@charset "shift_jis";
/*==============================================
common
============================================= */
.sp,
.spTitleImg,
.bnrIn .item {
    display:none;
}
#header {
    border-bottom: #ededed solid 1px;
}
.headerIn,
.footerIn {
    width: 930px;
    margin: 0 auto;
}
.copyRight { 
    border-top: 1px solid #ededed; 
}
#footer { 
    margin-top: 10px; 
}
.pageTop { 
    border-radius: 50%; 
}

/*==============================================
看板
============================================= */
.mainTitle {
    background: #f4f4f4 url(https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/bg_title.webp) center top no-repeat;
    margin: 0 auto;
    padding: 54px 0 70px;
}
h1 {
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/title.webp) right top no-repeat;
    width: 1070px;
    height: 559px;
    text-indent: -999em;
    font-size: 0;
    z-index: 1;
	margin: 0 auto -20px;
}
.lead {
font-size: 16px;
line-height: 1.8;
width: 930px;
margin: 0 auto -15px;
}

/*----　pointBox　----*/
.pointBox {
    padding: 65px;
	width: 930px;
	margin: 0 auto -20px;
}
.point {
    position: relative;
    padding: 30px 30px;
    border-radius: 0;
    background-color: #fff;
}
.point ul {
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/point_txt.gif) left 15px center no-repeat;
	box-sizing: border-box;
	padding-left: 250px;

}
.point ul li {
    position: relative;
    line-height: 1.8;
    padding-left: 3.5em;
    font-size: 19px;
}
.point ul li + li {
    margin-top: 5px;
}
.point ul li::before {
    content: "ポイント";
    position: absolute;
    top: .4em;
    left: 0;
    line-height: 2em;
    padding: 0 6px;
    background-color: #5b5b5b;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
}

/* ---- 目次（#index）全体エリア ---- */
#index {
width: 724px;
margin: 0 auto 20px;
}

#index ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#index li {
    margin-bottom: 13px; /* 各行の間隔 */
}

/* リンク全体のレイアウト設定 */
#index li a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    line-height: 1.4;
    
    /* 左側に矢印画像を配置 */
    background: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/menuArrow.gif') no-repeat left center;
    padding-left: 28px; /* 矢印画像の幅＋間隔 */
    
    /* ホバー時のふわっと早い消え効果（0.15秒） */
    transition: opacity 0.15s ease-in-out;
}

/* ホバー時に素早く少し薄くなる設定 */
#index li a:hover {
    opacity: 0.6;
}

/* グラデーション＆可変幅のラベル（カテゴリ）設定 */
#index li a span {
    display: inline-block;
    /* #f3c5fe から #d8c3fe への右方向グラデーション */
    background: linear-gradient(to right, #f3c5fe, #d8c3fe);
    color: #000;
    font-size: 16px;
    font-weight: bold;    
    /* 横幅は固定せず、内側の左右余白で文字長に合わせる */
    padding: 1px 8px;
    margin-right: 12px;      /* 右側の文章との間隔 */
    flex-shrink: 0;          /* 画面幅縮小時の潰れ防止 */
}
#index li a:hover {
opacity: 0.7;
}
/*==============================================
 .noto
============================================= */
/* regular */
@font-face {
    font-family: 'noto';
    src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Regular.woff);
    font-weight: normal;
}
/* medium */
@font-face {
    font-family: 'noto';
    src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Medium.woff);
    font-weight: 500;
}
/* bold */
@font-face {
    font-family: 'noto';
    src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Bold.woff);
    font-weight: 700;
}
/*==============================================
#mainContents
============================================= */
#mainContents {
    font-family: "noto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;
	letter-spacing: 0.08em;
    font-feature-settings: "palt" 1;
}
.paragraph {
border: #e5e5e5 solid 2px;
}
.paragraph h2 {
color: #000;
    width: 930px;
	text-align: center;
    margin: 115px auto 0;
font-weight: bold;
}
.paragraphIn {
width: 930px;
margin: 0 auto;
}
h2 b.subTitle {
display: inline-block;
width: auto;
margin-bottom: 25px;
padding: 0.02em 0.6em;
font-size: 25px;
background: linear-gradient(90deg, #f2c5fe 0%, #b5c7ff 100%);
}
.titleTxt {
    display: block;
    text-align: center;
    font-size: 25px;
    line-height: 1.6;
	margin-top: 25px;
}
.paragraphIn h3 {
font-size: 22px;
text-align: center;
font-weight: bold;
margin-top: 90px;
}
.paragraphIn h3 + p {
margin-top: 40px;
}
#matome p a,
p.cap a,
.lead a {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
#matome p a:link,
#matome p a:visited,
p.cap a:link,
p.cap a:visited,
.lead a:link,
.lead a:visited {
color: #0082e7;
font-weight: bold;
text-decoration: underline;
}
#matome p a:hover,
#matome p a:active,
p.cap a:hover,
p.cap a:active,
.lead a:hover,
.lead a:active {
color: #93cdff;
}
/*----　font　----*/
.paragraph p {
color: #202020;
font-size: 18px;
line-height: 1.9;
}
.topMargin p {margin-top: 60px;}
.topMargin p + p {margin-top: 30px;}
sup { font-size: 50%; }
p em {
    background: linear-gradient(transparent 75%, #e3e3e3 30%);
    font-weight: bold;
    font-style: normal;
}
#matome p + p {
margin-top: 30px;
}

p[class^="staff"] {
background-size: 80px;
background-repeat: no-repeat;
  padding-left: 110px; /* アイコンの幅(70px) + 余白(20px) */
  line-height: 1.9;
  font-size: 17px;
  color: #333;
  margin-top: 60px;
}
.spaceTop {
padding: 25px 0;
}
.spaceTop02 {
padding: 10px 0;
}
.spaceTop03 {
padding: 0px 0 15px;
}
/* -----------------------------------
   スタッフ空白 の画像指定
----------------------------------- */
p.staff00 {
  margin-top: 20px;
}
.staff00 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staff00.webp');
}
/* -----------------------------------
   スタッフ A の画像指定
----------------------------------- */
.staffA01 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffA_1.webp');
}
.staffA02 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffA_2.webp');
}
.staffA03 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffA_3.webp');
}

/* -----------------------------------
   スタッフ B の画像指定
----------------------------------- */
.staffB01 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffB_1.webp');
}
.staffB02 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffB_2.webp');
}
.staffB03 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffB_3.webp');
}

/* -----------------------------------
   スタッフ C の画像指定
----------------------------------- */
.staffC01 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffC_1.webp');
}
.staffC02 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffC_2.webp');
}
.staffC03 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffC_3.webp');
}
.staffC04 {
  background-image: url('https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/staffC_4.webp');
}

/* 強調（emタグ）のスタイリング */
p[class^="staff"] em {
  font-style: normal;
  font-weight: bold;
}

/*----　imgBox　----*/
.imgBox {
    margin-top: 60px;
}
.imgBoxB {
width: 700px;
margin: 60px auto 0;
}
.imgBoxB .column,
.imgBox .column {
    display: flex;
    justify-content: center;
    column-gap: 20px;
}
.imgBoxB img,
.imgBox img {
    width: 100%;
    height: auto;
}
.imgBoxB .cap,
.imgBox .cap {
    margin-top: 15px;
    line-height: 1.6;
    font-size: 14px;
}
.imgBox span {
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: 10px;
}

/* ---- 3列レイアウトの親容器（HTML側の外枠に合わせて適宜指定） ---- */
.reviewContainer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
	margin-top: 50px;
}

/* ---- 各スタッフカード ---- */
dl.review {
    width: 31%; /* 3列表示用 */
    margin: 0;
    padding: 0;
}

/* 顔写真エリア */
dl.review dt .face {
    margin-bottom: 12px;
}

dl.review dt .face img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 画像の角丸 */
    display: block;
}

/* 名前・吹き出しエリア（横並び配置） */
dl.review dt .name {
    display: flex;
    font-size: 17px;
    font-weight: bold;
    align-items: center;
    margin-bottom: 10px;
}

/* 「スタッフA/B/C」の名前部分 */
dl.review dt .name span {

    color: #000;
    display: inline-flex;
    align-items: center;
}

/* ---- 吹き出しラベル（::before 擬似要素で生成） ---- */
dl.review dt .name span::before {
    display: inline-block;
    position: relative;
    background-color: #E2DFE5; /* 吹き出しの背景色 */
    color: #111;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 7px;
    margin-right: 13px; /* 名前との余白（矢印分含む） */
    border-radius: 2px;
    white-space: nowrap;
	top: 2px;
}

/* 吹き出し右側の三角矢印 */
dl.review dt .name span::after {
    content: "";
    position: relative;
    left: -15px; /* 位置調整 */
    margin-right: -7px;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #E2DFE5;
		top: 2px;
}

/* 各スタッフごとの吹き出しテキスト指定 */
dl.review:nth-of-type(1) dt .name span::before {
    content: "私が答えます";
}

dl.review:nth-of-type(2) dt .name span::before,
dl.review:nth-of-type(3) dt .name span::before {
    content: "教えてAさん";
}

/* 本文テキスト */
dl.review dd {
    margin: 0;
}

dl.review dd p {
    font-size: 14px;
    line-height: 1.7;
    color: #111;
    margin: 0;
}

/*----　動画 ----*/
.imgBox .column video {
    width: 455px;
    max-width: 100%;
    height: auto; /* アスペクト比を維持 */
}
.imgBox video {
    display: block;
    object-fit: cover;
}

/*----　bnr ----*/
.top a {
display: block;
width: 724px;
height: 67px;
text-indent: -9999px;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/topBnr.webp) no-repeat;
overflow: hidden;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
margin: 70px auto 40px;
}
.inner {
background: #f4f4f4;
box-sizing: border-box;
width: 100%;
margin: 80px 0 0;
padding: 60px 0;
}
.inner a {
display: block;
width: 930px;
height: 181px;
text-indent: -9999px;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/26/09_omen/bnr.webp) no-repeat;
overflow: hidden;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
margin: 0 auto;
}

/*---- bnr:hover ----*/
.top a:hover,
.inner a:hover {
opacity: 0.6;
}
/*==============================================
.productBox
============================================= */
#matome h2 {
margin-bottom: 60px;
padding-top: 5px;
}
#matome .subTitle {
display: none;
}
.productBox {
margin-top: -230px;
background: #f8f8f8;
}
.productBoxIn a {
display: block;
width: 930px;
margin: 0 auto;
padding: 300px 0 10px;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.productBoxIn a:hover {
opacity: 0.6;
}
/*==============================================
.releasedate
============================================= */
.releasedate {
background: #f8f8f8;
padding: 60px 0 100px;
}
.releasedate span {
display: block;
    font-size: 11px; 
    color: #333;
    width: 930px; 
    margin: 0 auto; 
    text-align: right;
}