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

}

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:0.8rem;
	font-weight:normal;
	border:none;
	list-style:none;
	vertical-align:top;
}

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

#main_top{
	background-image: url(../img/bg_1.jpg);
	padding-left:5%;
	padding-right:5%;
	position:relative;
}
#main_top img{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

#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%;
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
	text-align:center;
	padding-top:15%;
	box-sizing:border-box;
}
.bg_2{
	width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
	text-align:center;
	box-sizing:border-box;
	padding-top:25%;
	padding-bottom:25%;
}


.bg_2{
	display:block;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

.bg_2 img{
}
#main_top{
	color:#FFF;
	line-height:1.8em;
	font-size:1rem;
}

#main_top p{
	font-size:0.8rem;
	color:#FFF;
	line-height:1.8em;
	margin-top:4%;
	margin-bottom:4%;
}

a.btn_red{
	display:block;
	width:100%;
	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:4%;
	padding-bottom:4%;
	font-weight:bold;
}

.width_1020 a.btn_red{
	font-size:0.9rem;
}

a.btn_gr{
	display:block;
	width:90%;
	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:4%;
	padding-bottom:4%;
	font-weight:bold;
	font-size:0.9rem;
}

.bg_2 img.title{
	width:55%;
}

.title_sub{
	width:70%;
	margin-right:auto;
	text-align:left;
}


.bg_2 .title_sub img{
	width:75%;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.title_sub p{
	text-align:center;
	display:block;
}
.title_sub span{
	text-align:center;
	display:block;
}
.bg_2 p{
	font-size:0.7rem;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;
	font-weight:bold;
}

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:0.9rem;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;
	font-weight:bold;
	margin-bottom:2px;
}

.bg_2 h2{
	display:block;
	font-size:0.7rem;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;
	font-weight:bold;
	margin-top:2px;
	margin-bottom:2px;
	text-align:center;
}

.bg_2 span{
	display:block;
	font-size:0.7rem;
	color:#FFF;
	text-shadow: 0px 0px 8px #000;
	font-weight:bold;
}

.bg_2 .title_sub p{
}

.bk_txt{
	text-align:center;
	color:#FFF;
	padding-top:8%;
	margin-bottom:10%;
}
.bk_txt h3,
.bk_txt h4{
	text-align:left;
	margin-bottom:3%;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.product h3.dsc_sub{
	width:100% !important;
}

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

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

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

.bk_txt ul{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	letter-spacing: -0.5em;
	margin-bottom:5%;
	text-align:left;
}


.bk_txt ul li img{
	width:100%;
}
.bk_txt ul li{
	width:100%;
	display:inline-block;
	vertical-align:top;
	letter-spacing: normal;
	border-top:dotted 1px #666;
	padding-top:20px;
	margin-top:20px;
	text-align:center;
}
.bk_txt ul li div.dsc{
	text-align:left;
	border-top:dotted 1px #666;
	padding-top:10px;
	margin-top:10px;
}

.bk_txt ul li div.dsc a.buy{
	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;
	background-color: #CE1127;
}
.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;
	background-color: #999;
}



.bk_txt ul.made{
	width:100%;
}

.bk_txt ul.made li{
	text-align:center;
	letter-spacing: -.4em; 
}

.bk_txt ul.made li img{
	width:30%;
	display:inline-block;
}

.bk_txt ul.made li p{
	width:65%;
	padding-left:3%;
	display:inline-block;
	letter-spacing: normal; 
	text-align:left;
}

/* 製造工程を縦に並べるリスト */
.bk_txt ul.made.step_flow li{
	display:block;
	text-align:left;
	letter-spacing: normal;
	margin-top:20px;
	padding-top:20px;
	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:100%;
	display:block;
	margin-bottom:10px;
}

.bk_txt ul.made.step_flow .step_txt{
	display:block;
	width:100%;
}

.bk_txt ul.made.step_flow .step_name{
	font-size:1rem;
	font-weight:bold;
	line-height:1.4;
	margin:0px 0px 10px 0px;
	padding-bottom:8px;
	border-bottom:solid 1px #555;
}

.bk_txt ul.made.step_flow .step_no{
	display:inline-block;
	background-color:#CE1127;
	color:#FFF;
	font-size:0.75rem;
	line-height:1;
	padding:4px 7px;
	border-radius:3px;
	margin-right:8px;
	vertical-align:2px;
}

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

.bk_txt ul.made.step_flow li p{
	width:100%;
	padding-left:0px;
	display:block;
}

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

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

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

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

.bk_txt ul.made.step_flow .aging_list dd::before{
	content:"";
	display:inline-block;
	width:112px;
	height:9px;
	border-radius:5px;
	margin-right:8px;
	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:10px;
}

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

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

#footer{
	text-align:center;
	font-size:0.8rem;
	color:#CCC;
	background-color:#000;
	padding-top:20px;
	padding-bottom:10px;
}

#footer p{
	padding-bottom:10px;
	padding-left:10%;
	padding-right:10%;
}
/* ロゴはPCヘッダー専用。SPはドロワーの「トップページ」で戻る */
#menu .brand{
	display:none;
}

/* ドロワーは既定の12remでは狭いため広げる。閉時は画面外へ完全に退避させる */
#menu .drawer-nav{
	width:78vw;
	max-width:320px;
}
body.drawer--right #menu .drawer-nav{
	right:-110vw;
}
body.drawer--right.drawer-open #menu .drawer-nav{
	right:0;
}
body.drawer--right.drawer-open .drawer-hamburger{
	right:min(78vw, 320px);
}

ul.slidemenu-content{
	padding-bottom:40px;
}
ul.slidemenu-content li a{
	display:block;
	text-align:left;
	font-size:1rem;
	padding:15px 16px;
	border-bottom:solid 1px #414141;
}

/* 親行は「リンク＋開閉ボタン」の横並び。サブメニューは折り返して全幅 */
#menu li.menu__single{
	display:flex;
	flex-wrap:wrap;
}
#menu li.menu__single > a{
	flex:1 1 auto;
}
#menu li.menu__single > a .nav_arrow{
	display:none;
}
#menu .sp_sub_toggle{
	flex:0 0 52px;
	margin:0;
	padding:0;
	border:0;
	border-left:solid 1px #414141;
	border-bottom:solid 1px #414141;
	background:transparent;
	color:rgba(255,255,255,0.8);
	font-size:14px;
}
#menu .sp_sub_toggle .toggle_arrow{
	display:inline-block;
	transition:transform .2s ease;
}
#menu li.sub-open .sp_sub_toggle .toggle_arrow{
	transform:rotate(180deg);
}

/* 現在地はPCと同じ赤で示す */
#menu li.menu__single.current > a{
	background-color:#CE1127;
	font-weight:bold;
}
#menu li.menu__single.current .sp_sub_toggle{
	background-color:#CE1127;
	color:#FFF;
}

/* サブメニューはアコーディオン。sub-open の付いたセクションだけ開く */
#menu .menu__second-level{
	display:none;
	flex:1 1 100%;
	width:100%;
	margin:0;
	padding:0;
}
#menu li.sub-open .menu__second-level{
	display:block;
}
.menu__second-level li a{
	background-color:#2A2A2A;
	font-size:0.85rem;
	padding:12px 16px 12px 28px;
	border-bottom:solid 1px #383838;
}
.menu__second-level li.sub_self a{
	font-weight:bold;
}
#fbp{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10%;
}

#fbp img{
	width:100%;
	margin-top:20px;
}

#fbp_2{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

#fbp_2 img{
	width:100%;
	margin-top:20px;
}


#age_txt{
	color:#FFF;
	margin-top:10px;
	font-size:0.7rem;
	line-height:1.5;
}

#age_txt .age_br{
	display:block;
}


.stop{
	margin-top:3%;
	width:100%;
}

.product{
	text-align:left;
	font-size:0.8rem;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.product img{
	width:100%;
}


.dsc_txt h2{
	display:block;
	font-size:1.2rem;
	border-left:solid 5px #CE1127;
	padding-left:10px;
	margin-bottom:3%;
}
.dsc_txt span.dsc_sub,
.dsc_txt h3.dsc_sub{
	font-size:1.05rem;
	font-weight:bold;
	display:block;
	border-bottom:dashed 1px #666;
	margin-top:28px;
	margin-bottom:7px;
	padding-bottom:3px;
	line-height:1.4em;
}

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

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

.dsc_txt p.etymology .es{
	display:block;
	font-weight:bold;
	line-height:1.5em;
}

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

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

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

.dsc_txt table.price_range,
.dsc_txt table.info_table{
	width:100%;
	border-collapse:collapse;
	margin-top:12px;
	margin-bottom:8px;
	font-size:0.7rem;
}

.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:8px 6px;
	text-align:left;
	line-height:1.6em;
}

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

/* 列見出しを主、行見出しを従にする */
.dsc_txt table.compare_table tr:not(:first-child) th,
.dsc_txt table.spec_table th{
	background-color:#134037;
}

/* 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));
}

/* 豆知識。SPは横に並べず、ダルマを上に置く */
.dsc_txt .trivia{
	background-color:#303030;
	border:solid 1px #4A4A4A;
	border-radius:4px;
	padding:4% 5%;
	margin:4% 0px;
	text-align:left;
}

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

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

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

/* 用語の一覧。SPは横幅がないので、語と定義を縦に積む */
.dsc_txt dl.term_list{
	margin:3% 0px;
	border-top:solid 1px #4A4A4A;
}

.dsc_txt dl.term_list dt{
	font-weight:bold;
	font-size:105%;
	padding-top:3%;
}

.dsc_txt dl.term_list dd{
	margin:0px;
	padding-bottom:3%;
	border-bottom:solid 1px #4A4A4A;
	line-height:1.7;
}

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

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

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

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

.dsc_txt p.price_note{
	font-size:0.65rem;
	color:#CCC;
	margin-bottom:16px;
	line-height:1.5em;
}

/* SPでは回り込ませず、幅いっぱいに置く */
.dsc_txt img.lead_img{
	width:100%;
	float:none;
	display:block;
	margin:0px 0px 3% 0px;
}

img.three_img{
	margin-bottom:3%;
	margin-top:3%;
}

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


#pageplugin a img{
	width:100%;
}

.asoc{
	text-align:center;
	color:#FFF;
	padding-top:3%;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.asoc img{
	width:100%;
}

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

.asoc a.btn_gr{
	width:100%;
	text-align:center;
}

.center_aao{
	color:#FFF;
	font-size:80%;
	margin-top:20px;
	margin-bottom:30px;
}



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:16px;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
}

.law_under a{
	text-decoration:underline;
}

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

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

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

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

.bk_txt ul li h4{
	width:100% !important;
	text-align:center;
}
	
#main_top p.over_txt{
		font-weight: bold;
		font-size: 16px;
	}
#main_top p.member{
		font-size: 12px;
		display: block;
		margin-bottom: 20px;
	}

.shop_link{
	text-align:center;
	width:80%;
	margin:12px auto 24px auto;
	padding:16px 5%;
	background-color:#282828;
	border:solid 1px #555;
	border-radius:4px;
}

.shop_link p.shop_lead{
	font-weight:bold;
	font-size:1.1rem;
	line-height:1.4;
	margin-bottom:12px;
}

.shop_link p.shop_note{
	font-size:0.8rem;
	color:#CCC;
	line-height:1.5;
	margin-top:10px;
}

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

.shop_link a.btn_red{
	width:100%;
	font-size:1rem;
	padding-top:3.2%;
	padding-bottom:3.2%;
}

.shop_link p.shop_lead .shop_sub{
	display:block;
	font-size:0.85rem;
	margin-top:3px;
}

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

/* テキーラ・メスカルページのファーストビュー調整 */
#main_tequila{
	background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../img/main_tequila.jpg);
}

#main_mezcal{
	background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../img/main_mezcal.jpg);
}

#main_agave{
	background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../img/main_agave.jpg);
}

#main_tequila,
#main_mezcal,
#main_agave{
	padding-top:14%;
	padding-bottom:14%;
}

#main_tequila img.title,
#main_mezcal img.title,
#main_agave img.title{
	width:68%;
	margin-bottom:10px;
}

#main_tequila h1,
#main_mezcal h1,
#main_agave h1{
	font-size:1.05rem;
	line-height:1.6;
	margin-bottom:6px;
	text-shadow: 0px 1px 6px rgba(0,0,0,0.9);
}

#main_tequila span,
#main_mezcal span,
#main_agave span{
	font-size:0.85rem;
	line-height:1.7;
	text-shadow: 0px 1px 6px rgba(0,0,0,0.9);
}

#main_tequila + .bk_txt,
#main_mezcal + .bk_txt,
#main_agave + .bk_txt{
	padding-top:4%;
}

#main_tequila + .bk_txt p.lead,
#main_mezcal + .bk_txt p.lead,
#main_agave + .bk_txt p.lead{
	font-size:0.88rem;
	line-height:1.6;
}

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

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

.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;
}

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

.dsc_txt .product + .product{
	margin-top:12%;
	padding-top:8%;
	border-top:solid 1px #444;
}

/* 旧アンカーの受け皿 */
.old_anchor{
	display:block;
	height:0px;
	visibility:hidden;
}

/* 本文中の箇条書き */
.dsc_txt ul.txt_list{
	display:block;
	width:auto;
	margin:18px 0px 20px 0px;
	padding:0px;
	list-style:none;
	border-top:solid 1px #4A4A4A;
}

/* PC と同じ考え方。字下げをやめ、罫線で1件ずつ区切る。
   .bk_txt ul li の flex-direction:column を row に戻すこと */
.dsc_txt ul.txt_list li{
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	gap:12px;
	width:auto;
	border:none;
	border-bottom:solid 1px #4A4A4A;
	padding:12px 0px;
	margin:0px;
	text-align:left;
	letter-spacing:normal;
	line-height:1.8;
}

.dsc_txt ul.txt_list li::before{
	content:"";
	flex:0 0 auto;
	width:6px;
	height:6px;
	margin-top:0.68em;
	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:0.95rem;
	line-height:1.9;
	margin:16px 0px;
	text-decoration:underline;
	text-decoration-color:#CE1127;
	text-decoration-thickness:2px;
	text-underline-offset:5px;
}

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

/* 工程写真のギャラリー（step_flow を使わない .made）を2列グリッドに */
.bk_txt ul.made:not(.step_flow){
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	letter-spacing:normal;
}

.bk_txt ul.made:not(.step_flow) li{
	width:48%;
	text-align:left;
	letter-spacing:normal;
	margin-bottom:12px;
}

.bk_txt ul.made:not(.step_flow) li img{
	width:100%;
	display:block;
}

.bk_txt ul.made:not(.step_flow) li p{
	width:100%;
	padding-left:0px;
	display:block;
	font-size:0.7rem;
	line-height:1.6;
	margin-top:6px;
}

/* 工程見出しの番号 */
.dsc_txt h3.dsc_sub .step_no{
	display:inline-block;
	background-color:#CE1127;
	color:#FFF;
	font-size:0.75rem;
	line-height:1;
	padding:4px 7px;
	border-radius:3px;
	margin-right:8px;
	vertical-align:2px;
}

/* 工程写真の縦横比を揃える（縦位置の写真が混在するため） */
.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:90%;
	margin:0px auto 8% auto;
	padding:18px 5%;
	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:0.75rem;
	letter-spacing:0.1em;
	color:#CCC;
	margin-bottom:18px;
	padding-bottom:10px;
	border-bottom:solid 1px #4A4A4A;
}

.bk_txt .toc ol.toc_list{
	display:block;
	width:auto;
	margin:0px;
	padding:0px;
	list-style:none;
	counter-reset:toc;
}

.bk_txt .toc ol.toc_list > li{
	display:block;
	width:auto;
	margin:0px 0px 16px 0px;
	padding:0px 0px 0px 2.6em;
	border:none;
	text-align:left;
	position:relative;
	line-height:1.6;
}

.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:0.85rem;
}

.bk_txt .toc a.toc_h2{
	font-weight:bold;
	font-size:0.95rem;
}

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

.bk_txt .toc .toc_sub a{
	font-size:0.75rem;
	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:24px;
}

/* セルを結合して同じ学名をまとめているので、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:5%;
}

}