@media screen and (min-width:641px) { 
/* CSS Document */
html,body{ width:100%;}
body{
	margin:0px;
	padding:0px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 18px;
	background-color: #1F1F1F;
	padding-top:54px;
}

a{
	color:#FFF;
	text-decoration:none;
}
a:hover{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

h1,h2,h3,h4,h5,p,ul,li,img{
	margin:0px;
	padding:0px;
	font-size:100%;
	font-weight:normal;
	border:none;
	list-style:none;
}
    .law_title{
        font-weight: bold;
    }
#menu{
	position:fixed;
	width:100%;
	top:0px;
	left:0px;
	background-color:#072A24;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:40px;
	box-shadow:0px 1px 4px rgba(0,0,0,0.25);
}

/* 左端のロゴ。トップページへ戻る導線を兼ねるため、メニューから「トップページ」を外す */
#menu .brand{
	display:flex;
	align-items:center;
	gap:16px;
	flex:0 0 auto;
}

#menu .site_logo{
	display:block;
	line-height:0px;
}

/* head_logo.png は434pxあり、38pxへ縮小すると細い白文字がぼやける。
   表示サイズの2倍で書き出した専用画像を使う */
#menu .site_logo img{
	height:38px;
	width:auto;
}

/* メキシコ国旗の3色。緑のヘッダーに白と赤を足す */
#menu .flag_stripe{
	display:block;
	width:12px;
	height:30px;
	background:linear-gradient(to right, #006847 0px 4px, #FFFFFF 4px 8px, #CE1127 8px 12px);
}

#menu li.nav_top{
	display:none;
}

/* SPのドロワーをPCでは通常のグローバルナビとして表示する。
   drawer.css の画面外配置(position:fixed / right:-12rem)を打ち消す */
#menu .drawer-nav{
	position:static;
	width:auto;
	height:auto;
	right:auto;
	overflow:visible;
	background:transparent;
	-webkit-transition:none;
	transition:none;
}

#menu .drawer-hamburger{
	display:none;
}

#menu ul{
	width:auto;
	margin:0px;
	letter-spacing: -0.5em;
	padding-left:0px;
}

#menu ul li{
	display:inline-block;
	letter-spacing: normal;
	margin-right:24px;
	font-size:15px;
	width:160px;
}

#menu ul li a{
	width:100%;
	text-align:center;
	color:#FFF;
	padding-top:16px;
	padding-bottom:16px;
	display:block;
	border-bottom:solid 3px transparent;
}

/* SPドロワー用の開閉ボタン。PCはホバーのドロップダウンを使うため出さない */
#menu .sp_sub_toggle{
	display:none;
}

/* 下層があることを示す。ホバーしないと気づけない状態だったため */
#menu .nav_arrow{
	display:inline-block;
	font-size:13px;
	margin-left:7px;
	color:rgba(255,255,255,0.65);
	vertical-align:1px;
	transition:transform .2s ease, color .2s ease;
}

#menu li.menu__single:hover .nav_arrow{
	color:#FFF;
	transform:rotate(180deg);
}

/* 現在地。Layout から渡される page で判定する。
   :hover の指定（詳細度 1,2,3）に負けないようクラスを重ねている */
#menu ul li.menu__single.current > a{
	font-weight:bold;
	background-color:#CE1127;
	border-bottom-color:#CE1127;
}

#menu ul li.menu__single.current:hover > a{
	background-color:#B50E22;
	border-bottom-color:#B50E22;
}

#menu li.menu__single.current .nav_arrow{
	color:#FFF;
}

#menu ul li.menu__single:hover > a{
	border-bottom-color:rgba(255,255,255,0.45);
	background-color:rgba(255,255,255,0.10);
}

/* 親項目もページへのリンクであることを示す。矢印には下線が乗らないよう
   ラベルだけを span で包んでいる */
#menu li.menu__single:hover .nav_label{
	text-decoration:underline;
	text-underline-offset:4px;
}

#menu ul li:last-child{
	margin-right:0px;
}

#main_top{
	background-image: url(../img/bg_1.jpg);
	background-repeat:no-repeat;
}

#main_sinai{
	background-image: url(../img/bg_sinai.jpg);
}

#main_gd{
	background-image: url(../img/bg_gd_2.jpg);
}

#main_fog{
	background-image: url(../img/bg_fog.jpg);
}

#main_ct{
	background-image: url(../img/bg_ct.jpg);
}

#main_mz{
	background-image: url(../img/bg_mz.jpg);
}

#main_tq{
	background-image: url(../img/bg_tq.jpg);
}



#main_dl{
	background-image: url(../img/bg_dl.jpg);
}

#main_mezcal{
	background-image: url(../img/main_mezcal.jpg);
}

#main_tequila{
	background-image: url(../img/main_tequila.jpg);
}

#main_agave{
	background-image: url(../img/main_agave.jpg);
}
.bg{
	width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
	text-align:center;
	padding-top:100px;
	box-sizing:border-box;
	min-width:1100px;
}
.bg_2{
	width:100%;
	min-width:1100px;
	height:598px;
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
	text-align:center;
	box-sizing:border-box;
}

#main_top h1{
	color:#FFF;
	padding-top:20px;
	line-height:1.8em;
	font-size:20px;
	padding-bottom:20px;
}

#shop_information{
	padding-top:20px;
	margin-bottom:50px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	width:750px;
}

#main_top p{
	color:#FFF;
	line-height:2.2em;
	font-size:18px;
	display:block;
	margin-bottom:14px;
	text-wrap:balance;
}

#main_top p:last-child{
	margin-bottom:0px;
}

a.btn_red{
	display:block;
	width:400px;
	margin-left:auto;
	margin-right:auto;
	background-color: #CE1127;
	border:solid 2px #FFF; 
	border-bottom:solid 4px #FFF; 
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	padding-top:20px;
	padding-bottom:20px;
	font-weight:bold;
}

a.btn_gr{
	display:block;
	width:400px;
	margin-left:auto;
	margin-right:auto;
	background-color: #006847;
	border:solid 2px #FFF; 
	border-bottom:solid 4px #FFF; 
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	padding-top:20px;
	padding-bottom:20px;
	font-weight:bold;
}

.bg_2 img.title{
	margin-top:200px;
}

.title_sub{
	width:900px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

.title_sub p{
	text-align:center;
	display:block;
	width:595px;
}
.bg_2 p{
	font-size:24px;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;  
}

h1#head_title{
	color:#fff;
	background-color:#006847;
	font-size:30px;
	font-weight:bold;
	padding-top:14px;
	padding-bottom:10px;
	text-align:center;
}

.bg_2 h1{
	display:block;
	font-size:30px;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;  
	width:595px;
	text-align:center;
	margin-bottom:10px;
}
.bg_2 h2{
	display:block;
	font-size:30px;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;  
	width:595px;
	text-align:center;
	margin-bottom:10px;
}

.bg_2 span{
	display:block;
	font-size:24px;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;  
	width:595px;
	text-align:center;
}
.bg_2 span.wide,
.bg_2 h1.wide,
.bg_2 h2.wide{
	width:100% !important;
}

.bk_txt{
	text-align:center;
	color:#FFF;
	font-size:16px;
	padding-top:50px;
	margin-bottom:100px;
	min-width:1100px;
}
.bk_txt h3,
.bk_txt h4{
	margin-bottom:50px;
}

.bk_txt span.copy{
	display:block;
	font-size:14px;
	margin-top:10px;
}

.bk_txt h4{
	display:block;
	font-size:18px;
	margin-top:5px;
	font-weight:bold;
}

/* 旧 <h4> の導入文。見出しではなく本文のため p に変更したが、
   従来の見た目を保つため h4 と同じ指定を当てる */
.bk_txt p.lead{
	display:block;
	font-size:18px;
	margin-top:5px;
	margin-bottom:50px;
	font-weight:bold;
}

.bk_txt ul{
	width:1100px;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	flex-wrap:wrap;
	margin-bottom:50px;
	text-align:left;
}


.bk_txt ul li img{
	width:300px;
	margin-left: auto;
    margin-right: auto;
}
.bk_txt ul li{
	width:500px;
	display:flex;
	flex-direction:column;
	border-top:dotted 1px #666;
	padding-top:30px;
	margin-top:30px;
	text-align:center;
}
.bk_txt ul li:nth-child(even){
	margin-left:80px;
}
.bk_txt ul li div.dsc{
	font-size:14px;
	text-align:left;
	border-top:dotted 1px #666;
	padding-top:10px;
	margin-top:10px;
	flex:1;
	display:flex;
	flex-direction:column;
}

.bk_txt ul li div.dsc a.buy{
	display:block;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	margin-top:auto;
	font-weight:bold;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	font-size:16px;
	background-color: #CE1127;
}

/* margin-top:auto でボタンを下端に寄せるため、説明文側で最小余白を確保する */
.bk_txt ul li div.dsc > span{
	margin-bottom:10px;
}

.bk_txt ul li div.dsc a.buy_gr{
	display:block;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	margin-top:10px;
	font-weight:bold;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	font-size:16px;
	background-color: #999;
}

#footer{
	text-align:center;
	font-size:12px;
	color:#CCC;
	background-color:#000;
	padding-top:20px;
	padding-bottom:10px;
	min-width:1200px;
}

#footer p{
	padding-bottom:10px;
}

.slidemenu,.menu-button-right,.sp{
	display:none;
}

.width_1020{
	width:1020px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

#fbp{
	text-align:center;
	margin-bottom:80px;
	width:100%;
	min-width:1200px;
}

#fbp_2{
	text-align:center;
	margin-bottom:80px;
	width:100%;
	margin-top:100px;
	min-width:1200px;
}

#pageplugin{
	width:1200px;
	margin-left:auto;
	margin-right:auto;
	display:block;
	text-align:center;
	font-size:0;
}

#pageplugin img{
	display:inline-block;
	margin-bottom:40px;
	margin-left:40px;
	margin-right:40px;
}

#fbp iframe{
	width:400px;
	margin-left:auto;
	margin-right:auto;
}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}

#age_txt{
	color:#FFF;
	margin-top:10px;
	font-size:12px;
}

.stop{
	margin-top:30px;
	width:600px;
}
li.menu__single {
    position: relative;
	width:160px !important;
	text-align:center !important;
}

.menu__single .menu__second-level {
  position: absolute;
  top: 40px;
  background: #072A24;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  visibility: hidden;
  opacity: 0;
}

li.menu__single ul.menu__second-level {
	position: absolute;
	top: calc(100% - 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 230px !important;
  	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	background-color: #FFF;
	border-top: solid 3px #CE1127;
	box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
	padding:0px !important;
}

li.menu__single:hover ul.menu__second-level {
    top: 100%;
    visibility: visible;
    opacity: 1;
}
ul.menu__second-level li{
	width:100% !important;
	margin:0px !important;
}

ul.menu__second-level li a{
	width:100% !important;
	display:block !important;
	text-align:center !important;
	color:#333 !important;
	font-size:13px !important;
	padding-top:11px !important;
	padding-bottom:11px !important;
	border-bottom:solid 1px #EEE !important;
}
ul.menu__second-level li a:hover{
	background-color: #F2F2F2;
}

/* パネルの先頭に置いたページ自体へのリンク。下の節リンクと区別する */
ul.menu__second-level li.sub_self a{
	font-weight:bold !important;
	font-size:14px !important;
	border-bottom:solid 2px #CCC !important;
}

.dsc_txt{
	text-align:left;
	width:1100px;
	margin-left:auto;
	margin-right:auto;
}

.three_img{
	margin-top:25px;
	margin-bottom:30px;
}

/* 本文中に置くバナーリンク。中央に寄せる */
.dsc_txt .banner_center{
	text-align:center;
}
.dsc_txt .banner_center img{
	max-width:100%;
	height:auto;
}

.dsc_txt h2{
	display:block;
	font-size:200%;
	border-left:solid 5px #CE1127;
	padding-left:10px;
	margin-bottom:22px;
}
.dsc_txt span.dsc_sub,
.dsc_txt h3.dsc_sub{
	font-size:140%;
	font-weight:bold;
	display:block;
	border-bottom:dashed 1px #666;
	padding-bottom:7px;
	margin-top:44px;
	margin-bottom:7px;
}

/* 本文リセットで margin:0 のため、段落が連続すると詰まって見える */
.dsc_txt p{
	line-height:1.9;
	margin-bottom:1em;
}

/* テキーラの呼び名が縮まっていく流れ。原語と訳を交互に並べる */
.dsc_txt p.etymology{
	padding-left:18px;
	border-left:solid 2px #666;
}

.dsc_txt p.etymology .es{
	display:block;
	font-weight:bold;
}

.dsc_txt p.etymology .ja{
	display:block;
	font-size:88%;
	color:#BBB;
}

.dsc_txt p.etymology .arrow{
	display:block;
	color:#CE1127;
	margin-top:6px;
	margin-bottom:6px;
}

/* テキーラの熟成タイプ名。h3(破線の下線)の一段下として左の縦線で示す */
.dsc_txt h4.type_name{
	font-size:115%;
	font-weight:bold;
	display:block;
	margin-top:24px;
	margin-bottom:8px;
	padding-left:12px;
	border-left:solid 3px #777;
}

.dsc_txt table.price_range,
.dsc_txt table.info_table{
	width:100%;
	border-collapse:collapse;
	margin-top:16px;
	margin-bottom:10px;
	font-size:15px;
}

.dsc_txt table.price_range th,
.dsc_txt table.price_range td,
.dsc_txt table.info_table th,
.dsc_txt table.info_table td{
	border:solid 1px #4A4A4A;
	padding:10px 14px;
	text-align:left;
}

.dsc_txt table.price_range th,
.dsc_txt table.info_table th{
	background-color:#1B6153;
	font-weight:bold;
}

/* 1行おきにごく薄く敷いて、横に目を走らせやすくする。
   行見出し（緑）にも同じ膜を重ねるため、色ではなく background-image を使う */
.dsc_txt table.info_table tr:nth-child(even) td,
.dsc_txt table.info_table tr:nth-child(even) th{
	background-image:linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05));
}

/* 出典。注記と同じ小ささだが、左の線と「出典」の見出しで種類を見分けられるようにする。
   目立たせるのが目的ではなく、案内や断り書きと混ざらないようにするため */
.dsc_txt p.source{
	font-size:13px;
	color:#CCC;
	border-left:solid 2px #4A4A4A;
	padding-left:12px;
	margin-bottom:20px;
}

.dsc_txt p.source::before{
	content:"出典";
	font-weight:bold;
	color:#AAA;
	margin-right:10px;
}

.dsc_txt p.price_note{
	font-size:13px;
	color:#CCC;
	margin-bottom:20px;
}

ul.made{
	width:100%;
	margin-top:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	gap:12px 20px;
}

.bk_txt ul.made li,
.bk_txt ul.made li:nth-child(even){
	width:calc((100% - 40px) / 3);
	margin:0px;
	padding:0px;
	border:none;
	text-align:left;
	vertical-align:top;
}

ul.made li p{
	text-align:left;
	display:block;
	margin-top:6px;
	margin-bottom:0px;
	line-height:1.6;
	font-size:90%;
}

/* 製造工程を縦に並べるリスト */
ul.made.step_flow{
	display:block;
}

.bk_txt ul.made.step_flow li,
.bk_txt ul.made.step_flow li:nth-child(2),
.bk_txt ul.made.step_flow li:nth-child(3),
.bk_txt ul.made.step_flow li:nth-child(5),
.bk_txt ul.made.step_flow li:nth-child(6),
.bk_txt ul.made.step_flow li:nth-child(even){
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	text-align:left;
	margin:30px 0px 0px 0px;
	padding:30px 0px 0px 0px;
	border-top:dotted 1px #666;
}

.bk_txt ul.made.step_flow li:first-child{
	margin-top:0px;
	padding-top:0px;
	border-top:none;
}

.bk_txt ul.made.step_flow li img{
	width:300px;
	flex-shrink:0;
	margin:0px 25px 0px 0px;
}

.bk_txt ul.made.step_flow .step_txt{
	flex:1;
}

.bk_txt ul.made.step_flow .step_name{
	font-size:18px;
	font-weight:bold;
	margin:0px 0px 10px 0px;
	padding-bottom:8px;
	border-bottom:solid 1px #CE1127;
}

.bk_txt ul.made.step_flow .step_no{
	color:#CE1127;
	margin-right:10px;
}

.bk_txt ul.made.step_flow .step_out{
	display:block;
	font-size:13px;
	font-weight:normal;
	color:#CCC;
	margin-top:4px;
}

.bk_txt ul.made.step_flow li p{
	margin-top:0px;
}

/* 工程の結果。装飾は付けず、行だけ分ける */
.bk_txt ul.made.step_flow .step_result{
	display:block;
	margin-top:12px;
	margin-bottom:12px;
}

/* 熟成期間のリスト。バーの長さ＝期間、色＝樽で深まる液色 */
.bk_txt ul.made.step_flow .aging_list{
	display:flex;
	flex-wrap:wrap;
	font-size:90%;
	margin:12px 0px;
	padding:0px;
}

.bk_txt ul.made.step_flow .aging_list dt{
	width:10em;
	font-weight:bold;
	padding:5px 0px;
	margin:0px;
}

.bk_txt ul.made.step_flow .aging_list dd{
	width:calc(100% - 10em);
	color:#CCC;
	padding:5px 0px;
	margin:0px;
}

.bk_txt ul.made.step_flow .aging_list dd::before{
	content:"";
	display:inline-block;
	width:150px;
	height:10px;
	border-radius:5px;
	margin-right:10px;
	vertical-align:-1px;
}

.bk_txt ul.made.step_flow .aging_list dd:nth-of-type(1)::before{
	background:linear-gradient(to right, #E9C46A 23%, rgba(255,255,255,0.10) 23%);
}

.bk_txt ul.made.step_flow .aging_list dd:nth-of-type(2)::before{
	background:linear-gradient(to right, #C77B2F 57%, rgba(255,255,255,0.10) 57%);
}

.bk_txt ul.made.step_flow .aging_list dd:nth-of-type(3)::before{
	background:#8A4E1E;
}

.bk_txt ul.made.step_flow .step_txt p + p{
	margin-top:12px;
}

.bk_txt ul.made.step_flow p.step_note{
	font-size:13px;
	color:#CCC;
}

.bk_txt ul.made.step_flow p.step_note a{
	text-decoration:underline;
}

ul.made li img{
	width:100%;
}

/* アンカーで移動したとき、固定ヘッダー(#menu)に隠れないようにする。
   以前は margin-top:-100px と padding-top:100px の組み合わせで
   位置をずらしていたが、マージンの相殺で不安定になるため統一した */
.product,
#product_1,
#product_2,
#product_3,
#product_4{
	scroll-margin-top:110px;
}

.asoc{
	text-align:center;
	color:#FFF;
	padding-top:20px;
	min-width:1100px;
	margin-left:auto;
	margin-right:auto;
}

.as_bold{
	font-weight:bold;
	font-size:120%;
	display:block;
	margin-bottom:5px;
	margin-top:15px;
}


.center_aao{
	color:#FFF;
	font-size:80%;
	margin-top:20px;
	min-width:1100px;
}

table.law{
	width:100%;
    border-collapse: collapse;
    border:1px solid #333;
	margin-top:30px;
}

table.law td{
    border-collapse: collapse;
    border:1px solid #333;
}

table.law tr td{
	padding:20px;
}

table.law tr td:first-child{
	width:30%;
	background-color: #2A2A2A;
}

.law_under{
	font-size:12px;
	padding-top:10px;
	min-width:1100px;
}

.law_under a{
	text-decoration:underline;
}

table.law_2{
	width:360px;
    border-collapse: collapse;
    border:1px solid #333;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
}

table.law_2 td{
    border-collapse: collapse;
    border:1px solid #333;
	font-size:14px;
	color:#FFF;
	text-align:left;
}

table.law_2 tr td{
	padding:10px;
}

table.law_2 tr td:first-child{
	width:120px;
	background-color: #2A2A2A;
}

.bk_txt ul li h4{
	margin-bottom:10px !important;
}

.diner_banner{
	width:600px;
	margin-top:40px;
}
	#main_top p.over_txt{
		font-weight: bold;
		font-size: 18px;
	}
#main_top p.member{
		font-size: 12px;
		display: block;
		margin-bottom: 20px;
	}

.shop_link{
	text-align:center;
	width:640px;
	margin:20px auto 40px auto;
	padding:24px 20px;
	background-color:#282828;
	border:solid 1px #555;
	border-radius:4px;
}

.shop_link p.shop_lead{
	font-weight:bold;
	font-size:20px;
	margin-bottom:16px;
}

.shop_link p.shop_note{
	font-size:13px;
	color:#CCC;
	margin-top:10px;
}

#products h2{
	margin-top:40px;
}

.shop_link p.shop_lead .shop_sub{
	margin-left:12px;
}

.shop_link p.shop_note span{
	display:inline-block;
}

.bk_txt p.lead span{
	display:block;
}

.bk_txt p.lead span + span{
	margin-top:0.5em;
}

.dsc_txt table.info_table th.nowrap{
	white-space:nowrap;
}

.dsc_txt table.info_table .name_ja{
	display:block;
	font-size:85%;
	color:#CCC;
	margin-top:2px;
}

.dsc_txt table.region_table td:first-child,
.dsc_txt table.region_table td:nth-child(2){
	white-space:nowrap;
}

.dsc_txt table.spec_table th{
	white-space:nowrap;
}

.dsc_txt table.compare_table th:first-child{
	white-space:nowrap;
}

/* アガベ価格の年表。「年／価格」の組を3列ぶん横に並べる */
.dsc_txt table.price_table th,
.dsc_txt table.price_table td{
	text-align:center;
	padding:8px 10px;
	white-space:nowrap;
}

.dsc_txt table.price_table td:nth-child(even){
	text-align:right;
}

/* 本文で名指ししている数値を、表でも示す。強調の語彙は本文と揃える（赤の下線） */
/* 本文で名指ししている最安値と最高値。表の中は罫線があるので、線ではなく面で示す */
.dsc_txt table.price_table td.mark{
	font-weight:bold;
	background-color:rgba(206,17,39,0.45);
	background-image:none;
}

/* 「年／価格」の組の切れ目。3組が地続きに見えないようにする */
.dsc_txt table.price_table th:nth-child(2n+3),
.dsc_txt table.price_table td:nth-child(2n+3){
	border-left-color:#6E6E6E;
}

/* 見出し列（左のラベル）の幅を表どうしでそろえる。
   用語表と比較表が縦に並んだとき、幅が違うとずれて見えるため */
.dsc_txt table.spec_table th:first-child,
.dsc_txt table.compare_table th:first-child{
	width:11em;
}

/* 列見出し（表の1行目）を主、行見出し（左列のラベル）を従にする。
   同じ緑だと役割の違いが読み取れないため、2段階に分ける */
.dsc_txt table.compare_table tr:not(:first-child) th,
.dsc_txt table.spec_table th{
	background-color:#134037;
}

/* 豆知識。語源・文化・意外な事実を置く。
   ※注記は出典の限定と読み方の断りに使うため、面白い補足はこちらへ分ける。
   目印のダルマは画像で、文章はキャラクターの口調にしない（docs/character-prompt.md） */
.dsc_txt .trivia{
	display:flex;
	align-items:flex-start;
	gap:24px;
	background-color:#303030;
	border:solid 1px #4A4A4A;
	border-radius:4px;
	padding:22px 26px;
	margin:26px 0px;
	text-align:left;
}

/* ダルマを戻すときのための指定。**現在HTMLに img はない**（キャラクター検討中、2026-08-29）。
   戻し方は docs/character-prompt.md の「一時的に外している状態からの戻し方」を参照 */
.dsc_txt .trivia img{
	width:130px;
	flex-shrink:0;
}

.dsc_txt .trivia_body{
	flex:1;
}

.dsc_txt .trivia_title{
	display:block;
	font-weight:bold;
	font-size:93%;
	color:#7FBFAE;
	margin-bottom:8px;
}

.dsc_txt .trivia p{
	margin-bottom:0px;
}

.dsc_txt .trivia p + p{
	margin-top:0.8em;
}

/* 用語の一覧。行どうしを見比べるものではないので表にしない。
   見出し行のない表にすると左列がまるごと緑の帯になり、読みにくくなる。
   左の幅は比較表の見出し列（11em）に合わせ、縦位置をそろえている */
.dsc_txt dl.term_list{
	display:grid;
	grid-template-columns:calc(11em + 28px) 1fr;
	margin:16px 0px 10px 0px;
	border-top:solid 1px #4A4A4A;
}

.dsc_txt dl.term_list dt{
	font-weight:bold;
	font-size:105%;
	padding:14px 14px 14px 14px;
	border-bottom:solid 1px #4A4A4A;
	border-right:solid 1px #4A4A4A;
	white-space:nowrap;
}

/* 定義は本文を足して2行に届くようにしてあるが、画面が広いと1行に収まる。
   高さがばらつかないよう下限を2行分にしておく */
.dsc_txt dl.term_list dd{
	margin:0px;
	min-height:3.8em;
	padding:14px 0px 14px 14px;
	border-bottom:solid 1px #4A4A4A;
	line-height:1.9;
}

/* 原語。緑を面ではなく文字色として使う */
/* 事実を並べるだけのリスト。用語一覧と違い定義が短いので、高さの下限は要らない */
.dsc_txt dl.fact_list dd{
	min-height:0px;
}

.dsc_txt dl.term_list .term_es{
	font-weight:normal;
	font-size:85%;
	color:#7FBFAE;
	margin-left:8px;
}

/* 呼び名の対応表。2列とも内容が短いので、全幅に引き伸ばさない */
.dsc_txt table.name_table{
	width:auto;
	min-width:60%;
}

.dsc_txt table.name_table td:first-child{
	white-space:nowrap;
}

/* 同じ学名は結合して1つに見せる。呼び名が複数あることを形で示す */
.dsc_txt table.name_table td[rowspan]{
	vertical-align:middle;
}

.dsc_txt table.info_table.name_table .th_sub{
	display:inline;
	margin-top:0px;
	margin-left:8px;
}

.dsc_txt table.info_table .th_sub{
	display:block;
	font-size:85%;
	font-weight:normal;
	color:#CCC;
	margin-top:2px;
}

/* 旧アンカーの受け皿。固定ヘッダーに隠れないよう位置を調整 */
.old_anchor{
	display:block;
	height:0px;
	visibility:hidden;
	scroll-margin-top:110px;
}

/* 本文中の箇条書き。.bk_txt ul の商品カード用指定を打ち消す */
.dsc_txt ul.txt_list{
	display:block;
	width:auto;
	margin:20px 0px 22px 0px;
	padding:0px;
	list-style:none;
	border-top:solid 1px #4A4A4A;
}

/* .bk_txt ul li が商品カード用に flex-direction:column を指定しているため、
   ここで row に戻さないと印と文が縦に並ぶ。
   字下げをやめ、罫線で1件ずつ区切る。本文の傍らの補足ではなく、
   節の結論として同じ幅で並ぶようにする。印は緑（補足を示すサイトの副色）*/
.dsc_txt ul.txt_list li{
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	gap:14px;
	width:auto;
	border:none;
	border-bottom:solid 1px #4A4A4A;
	padding:13px 0px;
	margin:0px;
	text-align:left;
	line-height:1.9;
}

.dsc_txt ul.txt_list li::before{
	content:"";
	flex:0 0 auto;
	width:7px;
	height:7px;
	margin-top:0.72em;
	background-color:#7FBFAE;
	transform:rotate(45deg);
}

/* 本文中の強調。旧 .dsc_txt strong は h2 と同じ見出し扱いだったため使わない。
   暗い背景に白文字なので太字だけでは前景に出ない。赤の下線を添える。
   赤はサイト全体で「ここが要点」を示す色（h2の左線、要点の左線、工程番号）*/
.dsc_txt .txt_em{
	font-weight:bold;
	border-bottom:solid 2px #CE1127;
	padding-bottom:1px;
}

/* 本文中の要点を引き出す。txt_em と同じ赤下線系の強調 */
.dsc_txt p.point{
	font-weight:bold;
	font-size:110%;
	line-height:1.9;
	margin:20px 0px;
	text-decoration:underline;
	text-decoration-color:#CE1127;
	text-decoration-thickness:2px;
	text-underline-offset:6px;
}

/* 本文中のリンク。サイト全体の a は下線なしのため、本文だけ下線を戻す */
.dsc_txt p a,
.dsc_txt table td a,
.dsc_txt dl.term_list dd a{
	text-decoration:underline;
}

/* 本文に添える写真。工程写真と同じ300px幅で、文章を右に回り込ませる */
.dsc_txt img.lead_img{
	width:300px;
	float:right;
	margin:6px 0px 16px 26px;
}

/* 回り込みが次の節に持ち越さないようにする */
.dsc_txt .product::after{
	content:"";
	display:block;
	clear:both;
}

/* セクションの区切り。.product の padding-top:100px は固定ヘッダー分の調整のため、
   その差分で余白を作る */
.dsc_txt .product + .product{
	margin-top:60px;
}

/* 工程見出しの番号 */
.dsc_txt h3.dsc_sub .step_no{
	color:#CE1127;
	margin-right:12px;
}

/* 工程写真の縦横比を揃える（縦位置の写真が混在するため） */
.bk_txt ul.made:not(.step_flow) li img{
	width:100%;
	aspect-ratio:3 / 2;
	object-fit:contain;
	display:block;
}

/* 縦位置の写真は縦の比率で表示する */
.bk_txt ul.made:not(.step_flow) li img.img_portrait{
	aspect-ratio:3 / 4;
}

/* ページ内の目次 */
.bk_txt .toc{
	width:1100px;
	margin:0px auto 40px auto;
	padding:26px 30px;
	background-color:#242424;
	border:solid 1px #4A4A4A;
	border-radius:4px;
	text-align:left;
	box-sizing:border-box;
}

.bk_txt .toc .toc_title{
	font-weight:bold;
	font-size:14px;
	letter-spacing:0.1em;
	color:#CCC;
	margin-bottom:18px;
	padding-bottom:10px;
	border-bottom:solid 1px #4A4A4A;
}

.bk_txt .toc ol.toc_list{
	width:auto;
	margin:0px;
	padding:0px;
	list-style:none;
	counter-reset:toc;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-auto-flow:row;
	column-gap:48px;
	row-gap:16px;
}

.bk_txt .toc ol.toc_list > li{
	display:block;
	width:auto;
	margin:0px;
	padding:0px 0px 0px 3.2em;
	border:none;
	text-align:left;
	position:relative;
	line-height:1.6;
	break-inside:avoid;
	-webkit-column-break-inside:avoid;
}

.bk_txt .toc ol.toc_list > li:last-child{
	margin-bottom:0px;
}

.bk_txt .toc ol.toc_list > li::before{
	counter-increment:toc;
	content:counter(toc,decimal-leading-zero);
	position:absolute;
	left:0px;
	top:0.1em;
	color:#CE1127;
	font-weight:bold;
	font-size:15px;
}

.bk_txt .toc a.toc_h2{
	font-weight:bold;
	font-size:17px;
}

.bk_txt .toc .toc_sub{
	display:block;
	margin-top:4px;
}

.bk_txt .toc .toc_sub a{
	font-size:13px;
	color:#AAA;
}

.bk_txt .toc .toc_sub a::after{
	content:"／";
	color:#666;
	margin:0px 6px;
}

.bk_txt .toc .toc_sub a:last-child::after{
	content:"";
	margin:0px;
}

.bk_txt .toc a:hover{
	text-decoration:underline;
}

/* 目次から見出しへ飛んだとき、固定ヘッダーに隠れないようにする */
.dsc_txt h3.dsc_sub[id],
.dsc_txt h4[id]{
	scroll-margin-top:110px;
}

/* セルを結合して同じ学名をまとめているので、1行おきの縞と食い違う。
   まとまりは結合と罫線で示し、背景は敷かない */
.dsc_txt table.name_table tr:nth-child(even) td,
.dsc_txt table.name_table tr:nth-child(even) th{
	background-image:none;
}


/* 呼び名を主役にして表に背骨を作る。学名は用語一覧の原語表記と同じ緑で従に置く。
   面での塗りは価格表の強調に使っているので、この表では使わない */
.dsc_txt table.name_table td:first-child{
	font-weight:bold;
}

.dsc_txt table.name_table .name_ja{
	color:#7FBFAE;
}


/* 商品リストのないページ（agave.html）では .dsc_txt の直後にショップ枠が来る。
   他ページは .bk_txt ul の下余白がそのぶんを担っているので、同じだけ空ける */
.dsc_txt + .shop_link{
	margin-top:50px;
}

}