@charset "UTF-8";
/*注釈*/
sup {vertical-align: baseline;position: relative;top: 0.3em; line-height: 1em;font-size:50% !important; vertical-align: super;}
/*マーカー*/
span.marker {background-color: #fef4e9;}
/*スマホだけ改行*/
.br-sp { display: none;}
@media (max-width: 600px) {.br-sp {display: block;}}


/*A ------------- */
/*A注釈受け*/
.annotation_l{font-size:0.72em; line-height: 1.6em;}
.annotation_s{font-size:0.5em; line-height: 1.6em;}
/*B注釈受け*/
.text_annotation{ font-size: 60%; margin-top: 1em; line-height: 1.4em !important; color:#aaa;}


/*特徴タグ*/
.tag {display: inline-block;letter-spacing: 0em; margin: 0 0 .5em 0;padding: 0 0.8em;line-height: 2em;text-decoration: none;border-radius: 2em;font-size:0.85em;}
.tag_blue{color: #555;background-color: #edf4fc !important;border: 1px solid #999;}
.tag_gray{color: #555;background-color: #fff !important;border: 1px solid #999;}
.tag_gold{color: #555;background-color: #f9f3e5 !important;border: 1px solid #999;}	
.tag_gold_2{color: #555;background-color: #f9f3e5 !important;border: 1px solid #999;}	
@media(max-width: 700px){
.tag {letter-spacing: -0.02em;font-size:0.72em;}
}


/*横スクロール*/
.scroll-box { overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch;}
.scroll-box::-webkit-scrollbar { height: 4px;}/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar-track { background: #eee;}/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-thumb { background: #aaa; border: none;}/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb:hover { background: #999;}/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box table { width: 100%; min-width: 650px; margin: 0px 0 0 0;}
.scroll-box table th {vertical-align: middle; font-size: 70%; text-align: center;}
.scroll-box table td { vertical-align: middle; font-size: 70%;}
.scroll-box table.set { width: 100%; min-width: 450px; margin: 0px 0 0 0;}
.scroll-box table.set_1 { width: 100%; min-width: 30px; margin: 0px 0 0 0;}

/*B ------------- */
.contents_main{width:90%; margin:2% auto; border-top:1px solid #ccc; padding-top:0%;}
/*2カラム*/        
.grid {margin:5% auto 5% auto; display: grid; gap: 5%; grid-template-columns: 1fr minmax(180px, 1fr);}
.grid_kv {margin:5% auto 5% auto; display: grid; gap: 5%; grid-template-columns: 1fr minmax(180px, 1fr);}
.grid_1{margin:5% auto 5% auto;}
 /*3カラム*/ 
.grid_3col{margin:0 auto ;display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr;}
.tag_2 {letter-spacing: 0.1em;margin: 0 .1em .6em 0;line-height: 1.4em; padding:1em 0;text-decoration: none;border-radius: 0.5em; text-align: center; font-size:1.2em;}
.tag_gold{color: #555;background-color: #f5f0e6;border: 1px solid #999;}
@media(max-width: 700px){
.grid_3col{grid-template-columns: 1fr ;margin:7% auto 15% auto;}
.tag_2 {margin: 0 0 .3em 0;line-height: 1.4em; padding:1em 0; font-size:1em;}
}
/*3カラム*/
.grid_3 {margin:0 auto 10% auto;display: grid; gap: 5%; grid-template-columns: 1fr 1fr 1fr;}

.inner_grid {display: grid; gap: 10px; grid-template-columns: 1fr minmax(180px, 2fr);}
.inner_main {padding:0;}
.inner_side {padding:0 0 5% 0;}

.shiagari{border:1px solid #ddd;width:100%; padding:5% 15%;}

@media(max-width: 700px){
.shiagari{width:100%; padding:5% 0;}
	
.contents_main{width:112%; margin-left:-6%;}
.grid {grid-template-columns: 1fr; width:88%;}
.grid_1 {width:88%;}
.grid_kv {grid-template-columns: 1fr; width:100%;}
.main {padding-right: 0;}
.side {padding-bottom: 3em;}
.inner_main {padding-right: 0;}
}


/*メインコピー*/
.box_main_copy{margin-top: 2em;}
.product_copy_s{font-size:120%!important;text-align:center;color:#595959; letter-spacing: 0.1em!important; line-height: 1.6em!important; margin:0.7em 0;}
.product_copy_m{font-size:200%!important;text-align:center;color:#595959; letter-spacing: 0.1em!important; line-height: 1.6em!important;margin-top: 0.4em;}

.product_name_en{color: #c4a768; text-align: center;margin-top: 0.6em;}

h1, h2, h3, h4, h5{ border-bottom: none; margin: 1em 0 1em 0; padding: 0; letter-spacing: 0.05em; font-weight: 400;}
.contents_main h2{ background-color: #9e9e9f; padding:0.9em 0; margin: 4em 0 2em 0;font-size: 1.4em; letter-spacing: 0.25em; color: #fff; text-align: center; }
.contents_main h3{ font-weight:400; font-size: 1.85em;}
.contents_main h4{ font-weight:500; font-size: 1.2em;}
.contents_main h5{ font-weight:500; font-size: 1.2em;}
.contents_main p{line-height:1.9em; letter-spacing: 0.05em; }
@media(max-width: 700px){
.product_copy_s{font-size:110% !important;}
.product_copy_m{font-size:180% !important;}
.contents_main h3{ font-weight:400; font-size: 1.5em;}
}
/*アンカー　メニュー*/
.ancer .ancer_wrap {width:100%;justify-content: space-between;padding: 0;margin: 40px 0 0px 0; display: flex; display: grid; gap: 30px;  grid-template-columns: 1fr 1fr 1fr;}
.ancer .ancer_wrap a {border-bottom: 1px solid #B8B8B8; padding: 20px 0;text-align: center;line-height: 2.5;position: relative;font-size: 1.3em;text-decoration: none;}
.ancer .ancer_wrap a:after {position: absolute;top: 80%;left: 50%;text-align: center;right: 15px;content: '';width: 6.5px;height: 6.5px;border-top: solid 1px #333;border-right: solid 1px #333;transform: rotate(135deg);}
@media(max-width: 700px){
.ancer .ancer_wrap {margin: 20px 0 0 0; gap: 10px; }
.ancer .ancer_wrap a {line-height: 2.5;font-size: 0.8em;}
	}

/*中*/
.title_point{ border-bottom: 1px solid #333; display: inline-block; margin: 0;padding-right: 0.25em; font-size:1.2em;}
.title_point span{ margin-left: 0.3em;font-weight:300;font-size:1.7em;}

/*youtube*/
.youtube_wrap{ padding-top: 100%;width: 100%;position: relative;}
.youtube_wrap iframe{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;}
/*フッターバナー*/     
.contents_footer_ban{ margin-top: 10%;}


/*成分テキスト*/
.text_ingredients{ font-size: 80%; letter-spacing: 0;}
@media(max-width: 700px){
.text_ingredients{  margin: 0 auto; font-size: 60%;}
}