*{
margin: 0;
padding: 0;
}

/* フォント */
/* font-family: "Sawarabi Mincho", serif; */
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&family=Shippori+Mincho&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');


p{
font-size: 16px;
/* font-family: "Sawarabi Mincho", serif; */
}

.Container{
max-width: 750px;
margin: 0 auto 0;
background-color: #fff;
font-family: "Sawarabi Mincho", serif;
}

/* body{
background-color: #333;
} */


/* body{
  margin-top: 0 !important;
  padding-top: 0 !important;
} */
  


/* .head{
display: none;

} */


/* 削除 */

/* .fs-c-productList{
    display: none;
}
.select{
    display: none;
}

.sns{
    display: none;
}

.fs-c-breadcrumb{
    display: none;
}
.foot-menu{
    display: none;
} */

/* フッダーの背景の色*/

/* .foot{
background-color: #313131;
} */


/* ------------------------------------------------------FV-----------------------------------------------------*/



.content0 {
position: relative;
}

.logo {
position: absolute;
top: 3px;
right: 7%;
width: 12%;
}

.content0 h1 img {
display: block; 
margin: 0 auto;
margin-bottom: 16px;

}





/* <!---------------------------------------- サプリメントオイル説明 ----------------------------------------> */

.Content1{
/* background-image: url(../images/Content1_BG.png);
background-repeat: no-repeat;
background-position: top center; */
text-align: center;
background: url(../images/Content1_BG.png) center top / 100% no-repeat;

}

.Content1 h2 img{
margin-top: 130px;
}


.Content1_text{
margin-top: 42px;
margin-bottom: 88px;
line-height: 1.8;
font-size: 3.33vw;

}

/* Q&Aセクションのスタイル */
.QA_Wrapper {
max-width: 650px;
margin: 0 auto;
padding-bottom: 60px;
}

.QA_Answer_red{
color: #b50d23;
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.QA_Block {
/* QA_ImageGroupを外に出したのに伴い、marginはQA_ImageGroup側に指定 */
}

.video_Wrapper {
  max-width: 80%;
  margin: 0 auto 11.7vw;
  width: 100%;
    aspect-ratio: 16 / 9; /* YouTubeの標準的な縦横比 */
}

.video_Wrapper iframe {
    width: 100%;
    height: 100%;
}

.QA_TextGroup {
display: table; /* 中身の幅に合わせて縮ませる */
margin: 0 auto 20px auto; /* ブロックごと中央に配置 */
padding: 0 20px;
}

.QA_Question, .QA_Answer {
display: flex;
align-items: center;
/* margin-bottom: 12px; */
}

.QA_Icon {
font-family: "Shippori Mincho", serif;
font-size: 36px;
font-weight: bold;
margin-right: 15px;
line-height: 1.4;
flex-shrink: 0;
}

.QA_Icon.Q {
color: #006eb4; 
}

.QA_Icon.A {
color: #b50d23;
}

/* QA の一部ふと文字 */

.QA_Question_bold{
  font-weight: bold;
}

.QA_Question p, .QA_Answer p {
font-size: 5.6vw;
line-height: 1.6;
margin: 0;
/* QとAのアイコンには線を引かず、テキストのみに線を引く */
border-bottom: 2px dotted #999; 
padding-bottom: 4px; 
}

.QA_Question p span, .QA_Answer p span{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.QA_ImageGroup {
text-align: center;
padding: 0 20px;
margin-bottom: 50px;
}

.QA_ImageGroup img {
max-width: 100%;
height: auto;
margin-bottom: 35px;
}

.QA_ImageCaption {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, "メイリオ", sans-serif;    
font-size: 3.3vw;
text-align: left;
font-weight: 500;

line-height: 1.8;
}

/* 説明テキストのマージン調整 */
.QA_bottom01{
margin-bottom: 69px;
}

.QA_bottom02{
margin-bottom: 86px;
}



/* <!------------------------------------------------------------ 
-----------------------------新オイル習慣 -------------------------------> */

.Content2{
background-image: url(../images/Content2_BG.jpg);
background-repeat: no-repeat;
/* 背景が画面幅の中央・上端に来るように指定 */
background-position: top center;
background-size: cover; /* 背景を領域いっぱいに広げる */
/* 一番下の要素のmarginが外に飛んでいく（マージンの相殺）のを防ぐ壁 */
padding-bottom: 11.8vw;
}

.Content2_text01{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;  
color: #554737;
font-size: 5.07vw;
text-align: center;
margin-top: 52px;
margin-bottom: 37px;
}


.Content2 h2{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #554737;
font-size: 8.6vw;
text-align: center;
margin-bottom: 5.08vw;
}

.Content2_ribbon {
display: block;
margin: 0 auto;
position: relative;

margin-bottom: -40px; /* 上にずらして空いた下の隙間を詰める */
}


/* インフォブロック（スプーン画像やまとめ部分）の調整 */
.Content2_infoBlock {
max-width: 650px;   /* コンテンツの幅に合わせて調整 */
margin: 0 auto 80px; /* 中央寄せ + 下に余白 */
text-align: left;    /* ブロック内のテキストは左揃え */
padding: 0 20px;     /* スマホ表示などで端に密着しないよう少し余白 */
box-sizing: border-box;
}

.Content2_infoBlock.summary {
margin-bottom: 90px; /* ここで2つ目だけの余白を調整できます */
}


.Content2_infoBlock img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto 5.41vw; /* 画像自体もブロック内で中央寄せ */
}
.Content2_infoBlock:last-child img {
  margin-bottom: 0;
}

.Content2_text02{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
text-align: left;
margin-top: 0;
line-height: 1.8;
}

/* レシピセクション全体の背景（ノートの線） */
.Content2_Recipe {

box-sizing: border-box;
}

/* 各レシピアイテムの基本設定 (Flexbox) */
.Content2_Recipe_Item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.91vw;
}

.Content2_Recipe_Item:nth-of-type(4){
  margin-bottom: 10.6vw;
}


/* 偶数番目 (Recipe 2, 4) は左右を逆にする */
.Content2_Recipe_Item:nth-child(even) {
flex-direction: row-reverse;
}

/* テキストエリアの調整 */
.Content2_Recipe_Info {
width: 50%;
padding: 0 40px;
box-sizing: border-box;
}


.recipe_num img {
max-width: 100%;
margin-bottom: 30px;
}

.Content2_Recipe_Info h3 {
font-size: 6vw;
margin-bottom: 20px;
color: #64463c;
font-weight: bold;
}

.Content2_Recipe_Info p {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, "メイリオ", sans-serif;
font-size: 3.6vw;
line-height: 1.8;
font-weight: 500;
}

/* 画像エリアの調整 */
.Content2_Recipe_Visual {
width: 50%;
line-height: 0; /* 画像下の隙間を完全に消す */
}

.Content2_Recipe_Visual img {
max-width: 100%;
height: auto;
}





/* ---------------------------------------- あなたにぴったりオイル習慣を始めてみませんか？---------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */








.Content3{
background-image: url(../images/Content3_BG.jpg);
background-repeat: no-repeat;
background-size: 100% auto; /* 横幅いっぱいに広げる */
background-position: top center; /* 上基準に配置 */
padding-top: 23.9vw; /* 野菜の高さ分だけ上部に余白を空けて文字を下げる（数値は微調整してください） */
}
.Content3 h2{
font-family: "Shippori Mincho", serif;
/* font-size: 4.26vw; */
font-size: 6.53vw;
text-align: center;
margin-bottom: 13.3vw;
}

.Content3 h2 span{
font-family: 'Noto Sans JP', sans-serif;
color: #64463c;
font-weight: 700;

}




/* 商品画像 */

.Content3_itemlist_img{
grid-row: 1;
}

.Content3_itemlist_name {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, "メイリオ", sans-serif;
font-weight: 500;
font-size: 3.2vw;
grid-row: 2;
margin-top: 10px;
text-align: center;
}


   .Content3_itemlist{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
max-width: 600px;
margin: 0 auto;
padding: 0 30px;
}



.Content3_itemlist_label{
position: absolute;
width: 18.5vw;
height: auto;
}

.Content3_itemlist_label.left{
display: block;
top: -7.3vw;
left: -5.3vw;
}


.Content3_itemlist_label.right{
display: block;
width: 13.3vw; /* rightは100pxが元サイズ: 100÷750=13.3vw */
top: 28vw;
right: -4vw;
}



/* 商品画像の下の文章 */

.Content3_itemlist_box{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 10px 0;

grid-row: 3;
}

.Content3_itemlist_box .target {
border: 1px solid #333;
padding: 2px 8px;
display: inline-block;
flex-shrink: 0;
} 

.Content3_itemlist_box p {
  color: #231815;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, "メイリオ", sans-serif;
font-size: 12px;
font-weight: 450;
}




/* 商品下の詳しく見るボタン */

/* .Content3_itemlist_btn{
width:30%;
margin: 8px 0;
grid-row: 4;
} */

.Content3_itemlist_text {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, "メイリオ", sans-serif;
grid-row: 5;
font-size: 3.3vw;
margin-top: 30px;
margin-bottom: 124px;
line-height: 1.5;
font-weight: 500;

}


.Content3_itemlist_text span{
font-size: 12px;
}









/* ========================================
Content4: サプリメントオイル ラインナップ
※ 一から作り直し中のためコメントアウト
======================================== */

/*
.Content4 {
padding-left: 16%;
box-sizing: border-box;
}

.Content4 h2 {
font-size: 24px;
font-weight: bold;
color: #64463c;
margin-bottom: 20px;
display: flex;
align-items: center;
}

.Content4 h2::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(../images/circle.png) no-repeat center center;
background-size: contain;
margin-right: 10px;
}

.Content4_itemlist {
list-style: none;
position: relative;
}

li.functional_label {
position: absolute;
top: 28px;
left: 30px;
bottom: 260px;
width: 54px !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background-color: #fff;
border: 4px solid #a68922;
color: #91771c;
font-size: 16px;
font-weight: bold;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}

.Content4_itemlist li:not(.functional_label) {
display: flex;
align-items: center;
padding: 23px 30px 23px 70px;
margin-bottom: 5px;
box-sizing: border-box;
}

.item-blue {
background-color: #eef5fb;
border-top: 3px solid #bed6e9;
}
.item-blue .target_text { color: #1a5c9e; }

.item-green {
background-color: #f1faef;
border-top: 3px solid #c9e4bd;
}
.item-green .target_text { color: #2e9f1a; }

.item-orange {
background-color: #fdf0ed;
border-top: 3px solid #facbbf;
}
.item-orange .target_text { color: #eb4b27; }

.item-pink {
background-color: #fcf0f5;
border-top: 3px solid #f3c1d8;
}
.item-pink .target_text { color: #d61788; }

.Content4_item_img {
width: 30%;
text-align: center;
}

.Content4_item_text {
width: 70%;
padding-left: 20px;
}

.Content4_item_text .target_text {
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}

.Content4_item_text .product_name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
line-height: 1.4;
}
*/






.Content1 h2 img {
max-width: 73.6vw;
margin: 17.3vw auto 0;
}
.Content1_text {
margin-bottom: 11.7vw;
margin-top: 5.6vw;
}
.QA_Question p, .QA_Answer p {
font-size: 4.9vw;
}
.QA_Icon {
max-width: 7.4vw;
}
.QA_bottom02 {
margin-bottom: 0;
}
.QA_ImageGroup:nth-of-type(2) {
margin-bottom: 0;
}
.QA_Wrapper {
padding-bottom: 17.3vw;
}
.Content2_ribbon {
max-width: 53.3vw;
top: -5.3vw;
}
.recipe_num img {
max-width: 24.1vw;
}
.Content2_infoBlock {
margin: 0 auto 10.6vw;
}
.Content2_infoBlock.summary {
margin-bottom: 12vw;
max-width: 1110px;
margin: 0 auto;
}


.Content2_Recipe_Item:nth-of-type(even) .Content2_Recipe_Info {
padding-left: 20px;
padding-right: 7vw;
}

.Content2_Recipe_Item:nth-of-type(odd) .Content2_Recipe_Info {
padding-right: 20px;
padding-left: 7vw;
}

/* SP用 */
.content0 h1 {
max-width: 93.3vw;
margin: 6.2vw auto 0;
}
.logo {
max-width: 14vw;
}





/* 
--------------------PC------------------------------- */

/* PC用 */

@media screen and (min-width: 751px) {

.video_Wrapper {
max-width: 65%;
margin: 0 auto 88px;
}

.Container {
max-width: 100%;
margin: 7.5rem auto 0;
}


/* PC用背景画像 */

.Content1 {
background-image: url(../images/Content1_BG_PC.png);
}

.Content2 {
background-image: url(../images/Content2_BG_PC.jpg);
padding-bottom: 82px;
}

.Content3 {
background-image: url(../images/Content3_BG_PC.jpg);
padding-top: 500px;
}


/* ----------------FV--------------- */

.content0 h1 img{

margin-bottom: -28px;
}

.Content1_text{
font-size: 27px;
margin-top: 36px;
margin-bottom: 88px;
}
/* ロゴの部分 */
/* PC用 */
main {
margin-top: 0 !important;
}
/* .foot .copy {
  font-family: "Arial", sans-serif;
    font-size: 25px;
} */
.content0 h1 {
position: relative;
max-width: 700px;
margin: 62px auto 0;
}
.logo {
position: absolute;
max-width: 90px;
top: 0px;
right: 20px;
}

.QA_Wrapper {
  padding-bottom: 120px;
max-width: 65%;
}


.Content2_ribbon {
top: -40px;
}

.Content1 h2 img{
margin-top: 205px;
}




.QA_Question p, .QA_Answer p{
font-size: 42px;
}




.Content2_infoBlock{
max-width: 1200px;
margin-bottom: 154px;
}

.Content2_Recipe_Item{
/* margin-bottom: 180px; */
max-width: 1200px;
margin: 0 auto 38px;

}


.Content2_Recipe {
max-width: 1200px;
margin: 0 auto;

}

.Content2_Recipe_Visual{
max-width: 51%;
}

.Content2_Recipe_Item {
justify-content: normal;
}


.Content2_Recipe_Item:nth-child(1){
gap: 22px;
}
.Content2_Recipe_Item:nth-child(2){
gap: 70px;
}
.Content2_Recipe_Item:nth-child(3){
gap: 14px;
}
.Content2_Recipe_Item:nth-child(4){
gap: 52px;
margin-bottom: 76px;
}




.Content2_Recipe_Item:nth-of-type(even) .Content2_Recipe_Info {
padding-left: 0;
padding-right: 0;
}

.Content2_Recipe_Item:nth-of-type(odd) .Content2_Recipe_Info {
padding-right: 0;
padding-left: 0;
}


.QA_ImageCaption{
font-size: 25px;
}

.Content2_text01{
font-size: 38px;
}
.Content2 h2{
font-size: 66px;
margin-bottom: 60px;
}
.Content2_text02{
font-size: 28px;
max-width: 904px;
margin: 0 auto;
}
.Content2_Recipe_Info h3{
font-size: 46px;
}
.Content2_Recipe_Info p{
font-size: 27px;
}

/* テキストエリアの調整 */
.Content2_Recipe_Info {
width: 100%;
max-width: 42%;
}

.Content2_infoBlock img {
  margin: 0 auto 55px;
}
.Content2_infoBlock:first-child img {
    max-width: 920px;
    width: 100%;
}



.Content2_infoBlock:last-child img {
    max-width: 1110px;
    width: 100%;
    /* margin-bottom: 80px; */
}



/* あなたにぴったりなオイル習慣 */
.Content3_itemlist_box p{
  font-size: 14px;
}

.Content3_itemlist_box{

flex-direction: row;
margin:29px 0 ; 
}
.Content3 h2 {
font-size: 49px;
/* margin-top: 373px; */
margin-bottom: 103px;
}

/* ラベル画像 PC固定サイズ */
.Content3_itemlist_label {
width: 140px;
}

.Content3_itemlist_label.left {
top: -55px;
left: -40px;
}

.Content3_itemlist_label.right {
width: 100px;
top: 210px;
right: -30px;
}

 .Content3_itemlist {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    max-width: 957px;
    padding: 0 20px;
    flex-wrap: wrap;
}

.Content3_itemlist li {
    position: relative;
    width: calc((100% - 124px) / 3);
}


.Content3_itemlist_img img {
width: 100%;
}





.Content3_itemlist_text {

font-size: 25px;
margin-bottom: 110px;

}

.Content3_itemlist_text span{
font-size: 12px;
}

.Content3_itemlist_text {

font-size: 25px;
}
.Content3_itemlist_name{
    font-size: 23px;

}


  




/* ========================================
Content4: サプリメントオイル ラインナップ
======================================== */

/* ▼ 共通（スマホ・PC同じ） ▼ */
.Content4 {
box-sizing: border-box;
max-width: 100%;
margin: 0 auto 0 0;
padding-left: 60px;

}

/* h2の装飾（左の●） */
.Content4 h2 {
font-size: 26px;
font-weight: bold;
color: #64463c;
margin-bottom: 30px;
margin-left: 50px; /* 商品エリアの左端に合わせるための調整 */
background: url(../images/circle.png) no-repeat left center;
background-size: 24px auto;
padding-left: 35px;
}



/* ----------------------------------
ヘッダ（タブ）のスタイル
---------------------------------- */
.Content4_header {
margin-bottom: 5px;
}
.Content4_header p {
position: relative;
text-align: center;
margin: 0 3px; /* タブ間の隙間 */
padding: 10px 0;
font-size: 23px;
font-weight: bold;
color: #333;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.Content4_header p:empty {
margin: 0;
padding: 0;
}
/* ▼ 修正2：タブの斜めカットを、どの幅でも同じ角度になるよう調整 ▼ */
.Content4_header p:not(:empty)::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #eeebe1;
border: 1px solid #dcdad1;
border-bottom: none;
border-radius: 6px 0 0 0;
/* 15px分だけ斜めにカットする（可変幅対応） */
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 0 100%);
z-index: -1;
}

/* ----------------------------------
テーブルボディと縦書きラベル
---------------------------------- */
.Content4_body {
position: relative;
}
.functional_label {
position: absolute;
top: 30px;
left: 30px; /* リストの外から内側へ移動 */
width: 60px;
height: 495px; /* 商品2つ分を覆う高さ */
writing-mode: vertical-rl;
text-align: center;
border: 3px solid #a68922;
color: #91771c;
font-size: 14px;
font-weight: bold;
background-color: #fff;
letter-spacing: 0.2em;
padding: 10px 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}

/* ----------------------------------
各行のスタイル
---------------------------------- */
.Content4_row {
margin-bottom: 20px;
align-items: stretch;
box-sizing: border-box;
}

.Content4_row:last-child {
margin-bottom: 78px;

}
.Content4_row > * {
padding: 15px 10px;
text-align: center;
font-size: 28px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

/* ----------------------------------
特定の列の背景を濃くする
---------------------------------- */
/* 2番目(価格)、4番目(原材料)、6番目(ボタン)の列 */
.Content4_row > :nth-child(2),
.Content4_row > :nth-child(4),
.Content4_row > :nth-child(6) {
background-color: rgba(0, 0, 0, 0.035);
}

/* セル内のテキスト調整 */
.col-product {flex-direction: row !important;justify-content: center;text-align: left;padding: 15px 135px;}
.col-product img {
max-width: 64px;
margin-right: 15px;
}
.product-text {
align-items: flex-start !important;
}
.product-text .target {
font-size: 26px;
font-weight: bold;
margin-bottom: 5px;
}
.product-text .name {
font-size: 28px;
font-weight: bold;
line-height: 1.4;
}
.col-price {
font-size: 28px;
font-weight: bold;
line-height: 1.2;
}

.col-price span {
font-size: 22px;
font-weight: normal;
}
.col-component span {
display: inline-block;
border: 1px solid #000;
padding: 4px 10px;
background-color: #fff;
}
.col-material, .col-size { line-height: 1.5; }
.col-button { display: flex; }
.col-button img {
max-width: 100%;
height: auto;
}

/* 行カラー設定 */
.item-blue {
background-color: #f1f8fc;
border-top: 3px solid #b3d1e9;
}
.item-blue .target { color: #1f64a5; }

.item-green {
background-color: #f6fcf4;
border-top: 3px solid #c7e8be;
}
.item-green .target { color: #32a21d; }

.item-pink {
background-color: #fef5f9;
border-top: 3px solid #f2c0d5;
}
.item-pink .target { color: #d61889; }
}







 
  .lineup-container {
    max-width: 100%;
    margin: 50px auto 0;
    background: #fff;
  }

  /* テーブルとラベルを囲うラッパー（ここを基準に絶対配置する） */
  .table-wrapper {
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
    padding-left: 60px; /* 左側にラベル用のスペースを確保 */
  }
  .lineup-table tr {
    margin-bottom: 20px;
  }

  /* 機能性表示食品ラベル（絶対配置） */
  .kinousei-label {
    position: absolute;
    left: 93px;
    top: 110px;
    writing-mode: vertical-rl;
    border: 4px solid #96820a;
    color: #96820a;
    padding: 20px 10px;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: 2px;
    display: inline-block;
    background-color: #fff;
    z-index: 10;
    height: 495px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ヘッダータイトル */
  .header-title {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    color: #6b5344;
  }
  .header-title img {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border-radius: 50%;
  }

  /* テーブル設定 */
  .lineup-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .lineup-table th, 
  .lineup-table td {
    vertical-align: middle;
  }
  
  /* タブ型ヘッダー */
  .lineup-table th {
    vertical-align: bottom;
    padding-bottom: 0;
  }
  .lineup-table thead th:first-child {
    vertical-align: middle;
  }
  /* 既存のこれの下に… */
  /* .lineup-table thead th:nth-child(2) .tab {
    background-color: transparent;
    clip-path: none;
    border-radius: 0;
    border: none;
  } */

  /* ★これを追加して、2番目のタブだけ疑似要素を非表示にします */
  /* .lineup-table thead th:nth-child(2) .tab::before {
    display: none;
  } */
  .tab {
    position: relative;
    z-index: 1;
    background-color: #eeeee4;
    padding: 20px 10px;
    color: #333;
    text-align: center;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    width: 95%;
    margin: 0 auto;
    border-radius: 10px 25px 0 0;
    font-size: 20px;
    /* border: 3px solid #dadada; ← 通常のborderは削除します */
  }

  /* 内側の背景を作る疑似要素（これで3pxの擬似ボーダーを作ります） */
  .tab::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;   /* ★ここを 0 から 3px に変更 */
    background-color: #dadada;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    border-radius: 7px 22px 0 0;
    z-index: -1;
  }

  /* 行ごとの背景色 */
  .row-blue {border-top: 5px solid #b2d3e9;}
  .row-blue td { background-color: #f2f8fb; }
  .row-blue td.bg-dark { background-color: #e5f0f7; }

  .row-green {border-top: 5px solid #bee2b2;}
  .row-green td { background-color: #f4faf2; }
  .row-green td.bg-dark { background-color: #e9f5e5; }

  .row-pink {border-top: 5px solid #f7cbe3;}
  .row-pink td { background-color: #fdf5f9; }
  .row-pink td.bg-dark { background-color: #fceaf4; }

  /* 商品情報エリア */
  .product-cell {
    padding: 30px;
    /* display: block; */
    /* width: 660px; */
  }
  .product-inner {
    display: flex;
    align-items: center;
    width: 470px;
    max-width: 100%;
    margin: 0 auto;
  }
  .bottle-img {
    max-width: 63px;
    margin: 0 auto 0 0;
    margin-right: 45px;
  }
  .target-text {
    font-family:'Noto Sans JP', sans-serif;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 4px;
  }
  .text-blue { color: #205b9f; }
  .text-green { color: #1d9124; }
  .text-pink { color: #d61a6c; }
  
  .product-name {
    font-family:'Noto Sans JP', sans-serif;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 4px;
    color: #222;
  }
  .product-package {
    font-size: 11px;
    color: #222;
  }

  /* 中央揃えのテキストセル */
  .center-cell {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: #222;
    font-weight: bold;
    line-height: 1.5;
    font-size: 28px;
  }

  /* 価格 */
  .price-val { font-size: 38px; font-weight: 600;line-height: .8; font-family:'Noto Sans JP', sans-serif;}
  .price-val small:nth-of-type(1) {font-size: 72%;}
  .price-val small:nth-of-type(2) {font-size: 55%;}

  /* 成分ボックス */
  .ingredient-box {
    font-family:'Noto Sans JP', sans-serif;
    border: 3px solid #000;
    background-color: #fff;
    padding: 4px 8px;
    display: inline-block;
    font-weight: bold;
    font-size: 28px;
  }

  /* 小書き注釈 */
  .note-text {
    font-size: 75%;
  }

  /* ボタン画像 */
  .btn-cell {
    text-align: center;
    padding: 10px 25px;
  }
  .btn-img {
    max-width: 234px;
    height: auto;
    border-radius: 16px;
  }
  .spacer-row {
    height: 20px;
    background-color: #fff;
  }
  .spacer-row td {
    border: none;
    padding: 0;
  }


@media screen and (max-width: 1000px) {

   .Content3_itemlist{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
max-width: 600px;
margin: 0 auto;
/* padding: 0 7vw; */
}


.Content3_itemlist li{
position: relative;
width: calc((100% - 31px) / 2);

}



}
  @media (max-width: 1900px) {
    .table-wrapper { padding-left: 3.1vw; }
    .kinousei-label {
      top: 5.7vw; left: 4.8vw;
      padding: 1vw 1vw;
      font-size: 1.5vw;
      letter-spacing: 0.1vw;
      border-width: 0.2vw;
      height: 39vw;
    }
    .header-title { font-size: 1.6vw; }
    .header-title img { width: 1.8vw; height: 1.8vw; margin-right: 0.4vw; }
    .tab {
      padding: 1vw 0.5vw;
      border-radius: 0.5vw 1.3vw 0 0;
      font-size: 1.1vw;
    }
    .tab::before {
      top: 0.15vw;
      left: 0.15vw;
      right: 0.15vw;
      bottom: 0.15vw; /* ★これを追加 */
      border-radius: 0.3vw 1vw 0 0;
    }
    .row-blue { border-top-width: 0.2vw; border-bottom-width: 1vw; }
    .row-green { border-top-width: 0.2vw; border-bottom-width: 1vw; }
    .row-pink { border-top-width: 0.2vw; }
    .product-cell {padding: 1.5vw 0.5vw 1.5vw 1.5vw; }
    .product-inner {width: 21.7vw;}
    .bottle-img { max-width: 3.3vw; margin-right: 2vw; }
    .target-text {font-size: 1.1vw;margin-bottom: 0.2vw;}
    .product-name { font-size: 1.4vw; margin-bottom: 0.2vw; }
    .product-package { font-size: 0.5vw; }
    .center-cell { padding: 0.5vw; font-size: 1.4vw; 
    font-family:'Noto Sans JP', sans-serif;}
    .price-val { font-size: 2vw; }
    .ingredient-box { padding: 0.2vw 0.4vw; font-size: 1.4vw; border-width: 0.1vw; }
    .btn-cell { padding: 0.5vw 1.3vw; }
    .btn-img { max-width: 12.3vw; border-radius: 0.8vw; }
    .spacer-row { height: 1.1vw; } /* 20pxのvw変換 */
  }

  @media (max-width: 750px) {
    /* 横スクロールを有効にする設定 */
    .table-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる */
      padding-left: 0;
    }
    .lineup-table {
      min-width: 260vw; /* 画面幅より大きくして意図的にスクロールさせる */
    }

    /* 複雑な斜めタブは解除してシンプルな角丸に戻す */
    .tab::before, .tab::after {
      display: none !important;
    }
    .tab {
      background-color: #e8e6df;
      border: 0.3vw solid #dadada;
      border-radius: 1.3vw 3.3vw 0 0;
      padding: 2.6vw 1.3vw;
      font-size: 2.9vw;
      clip-path: none;
    }

    /* 各要素のvw変換 (÷7.51) */
    .kinousei-label {
      left: 2.6vw;
      top: 14.6vw;
      padding: 2.6vw 2vw;
      font-size: 3.8vw;
      border-width: 0.5vw;
      letter-spacing: 0.2vw;
      height: 95.9vw;
    }
    .header-title { font-size: 4.2vw; }
    .header-title img { width: 4.7vw; height: 4.7vw; margin-right: 1vw; }

    .row-blue td { border-top-width: 0.6vw; }
    .row-green td { border-top-width: 0.6vw; }
    .row-pink td { border-top-width: 0.6vw; }

    .product-cell {
      padding: 3.9vw 3.9vw 3.9vw 15.9vw; /* ラベルと被らないよう左側の余白(120px)を確保 */
    }
    .product-inner { width: 62.5vw; }
    .bottle-img { max-width: 8.3vw; margin-right: 5.9vw; }
    .target-text { font-size: 3.3vw; margin-bottom: 0.5vw; }
    .product-name { font-size: 3.7vw; margin-bottom: 0.5vw; }

    .center-cell { padding: 2vw; font-size: 3.7vw; }
    .price-val { font-size: 5vw; }
    .ingredient-box {
      padding: 1vw 2vw;
      font-size: 3.7vw;
      border-width: 0.2vw;
      white-space: nowrap; /* ★これを追加することで「α-リノレン酸」が1行に収まります */
    }
    .btn-cell { padding: 1.3vw 3.3vw; }
    .btn-img { max-width: 31.1vw; border-radius: 2.1vw; }

    /* 余白用スペーサー */
    .spacer-row { height: 2.6vw; }

    .Content3_itemlist_text{
      margin-bottom: 14.6vw;
      margin-top: 3.99vw;
    }
.Content3_itemlist li:nth-child(3) .Content3_itemlist_text {
  margin-bottom: 0;
}






/* .foot .copy {
    margin-top: 37px;
    margin-bottom: 36px;
    color: #FFF;
    font-size: 13px;
    font-family: "Arial", sans-serif;
} */

  .table-wrapper{
  padding-left: 8vw;
}

.kinousei-label{
  left:  12vw;
}


  
  }