@charset "UTF-8";
/* CSS Document */

#wrapper{ width: 100%; overflow: hidden;}

/* header
---------------------------------------------------------------------------*/
header{ width: 100%; margin: 0px auto; position: absolute; top: 0; left: 0; z-index: 100; padding:4.0rem 5%;}
header section{ width: 100%; margin: 0px auto;}
header section h1{ width: 55%;}
header section h1 img{ width: 100%; height: auto;}

/* middle */
body#middle header{ position: relative; padding: 1.0em 5%;}

/*-- promo --*/
#promo{ width: 100%; min-width: 100%; padding-bottom: 100%; background: url("../../images/promo.webp") no-repeat center center; background-size: 200%; position: relative;}
#promo:before{ content: ""; width: 100%; height: 100%; background: #8B6E43; mix-blend-mode: multiply; position: absolute; top: 0; left: 0; z-index: 1;}
#promo section{ width: 90%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: 10;}
#promo section h2{ font-size: 3.2rem; line-height: 1.2em; color: #FFF; text-align: center;}
#promo section p{ color: #FFF; text-align: center; font-size: 2.0rem; line-height: 1.4em; margin-top: 0.5em;}

/* middle */
body#middle #promo{ width: 100%; padding-bottom: 32%; background: url("../../images/middle.webp") no-repeat center center; background-size: 100%; position: relative;}
body#middle #promo section{ width: 90%; position: absolute; top: auto; bottom:1.0em; left: 50%; transform: translate(-50%,0); z-index: 10;}
body#middle #promo section h2{ font-size: 3.2rem; line-height: 1.2em; color: #FFF; text-align: right;}

/* main
---------------------------------------------------------------------------*/
main article{ width: 100%; padding: 8.0rem 0 0 0; margin: 0px auto; position: relative;}
main article section{ width: 90%; max-width: 100%; margin: 0px auto;}
main article section h2{ font-size: 3.2rem; line-height: 1.2em; letter-spacing: 0.16em; text-align: center; margin-bottom: 2.4rem;}

/*-- intro --*/
main article.intro section{}
main article.intro section > p:nth-child(2){ margin-top: 1.0em;}
main article.intro section h3{ font-size: 2.4rem; line-height: 1.4em; text-align: right; margin-top: 4.0rem;}
main article.intro section h3 span{ display: block; font-size: 2.0rem; line-height: 1.4em; text-align: right;}
main article.intro section div{ margin-top: 4.0rem; background: url("../../images/background_01.webp") repeat;}
main article.intro section div p{ text-align: center; padding: 1.0em;}

/*-- basic --*/
main article.basic{ border-bottom: solid 1px #DDD; padding-bottom: 8.0rem;}
main article.basic section .column{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
main article.basic section .column .image{ width: 100%; order: 1;}
main article.basic section .column .image img{ width: 100%; height: auto;}
main article.basic section .column .inner{ width: 100%; order: 2; margin-top: 2.4rem;}
main article.basic section .column .inner h3{ font-size: 2.4rem; line-height: 1.2em;}
main article.basic section .column .inner dl{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 1.6rem;}
main article.basic section .column .inner dl dt{ width: 4.0em; text-align:justify; text-align-last:justify; position: relative; line-height: 1.4em;}
main article.basic section .column .inner dl dt:after{ content: ":"; position: absolute; top: 0.8rem; left: 100%;}
main article.basic section .column .inner dl dd{ width: 100%; padding: 0 0 0.8rem 0; line-height: 1.4em;}
main article.basic section .column .inner dl dt{ padding: 0.8rem 0 0;}

/*-- product --*/
main article.product{ padding-bottom: 8.0rem;}
main article.product section{}
main article.product section .column{ display: flex; justify-content: space-between; flex-wrap: wrap;}
main article.product section .column:nth-of-type(n+2){ margin-top: 8.0rem;}
main article.product section .column .image{ width: 100%;}
main article.product section .column .image img{ width: 100%; height: auto; box-shadow: 0px 4px 16px rgba(0,0,0,0.24);}
main article.product section .column .inner{ width: 100%; margin-top: 1.6em;}
main article.product section .column .inner dl{}
main article.product section .column .inner dl dt{ font-size: 3.2rem; line-height: 1.0em;}
main article.product section .column .inner dl dd{ margin-top: 0.5em; line-height: 1.0em;}
main article.product section .column .inner table{ margin-top: 2.4rem;}
main article.product section .column .inner table th{ line-height: 1.2em; padding: 0.24em 0;}
main article.product section .column .inner table td{  padding: 0.24em 0; padding-left: 2.0em; text-align: right; line-height: 1.2em;}
main article.product section .button{ width: 90%; margin: 4.0rem auto 0;}
main article.product section .button a{ display: block; text-align: center; color: #FFF; text-decoration: none; background: #ad0001; padding: 1.0em 0; font-size: 2.0rem; line-height: 1.2em; border-radius: 8px; position: relative;}
main article.product section .button a:hover{ background: #666; color: #FFF; box-shadow: 0 0 24px rgba(0,0,0,0.24);}

/*-- store --*/
main article.store{ background: url("../../images/background_01.webp") repeat; padding-bottom: 8.0rem;}
main article.store:before{ content: ""; width: 100%; height: calc(100% - 10px); background: rgba(255,255,255,0.48); position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 1;}
main article.store section{ position: relative; z-index: 10;}
main article.store section .column{ display: flex; justify-content: space-between; flex-wrap: wrap;}
main article.store section .column .inner{ width: 100%;}
main article.store section .column .inner:nth-child(n+2){ margin-top: 4.0rem;}
main article.store section .column .inner .image img{ width: 100%; height: auto; box-shadow: 0 8px 16px rgba(0,0,0,0.24);}
main article.store section .column .inner dl{ margin-top: 0.8em;}
main article.store section .column .inner dl dt{ font-size: 2.4rem; line-height: 1.2em; text-align: center;}
main article.store section .column .inner dl dd{ text-align: center; margin-top: 0.5em;}

/*-- detail --*/
main article.detail{ background: url("../../images/background_02.webp") repeat center top; padding-bottom: 8.0rem;}
main article.detail:before{ content: ""; width: 100%; height: 100%; background: #391D0F; mix-blend-mode: multiply; opacity: 0.64; position: absolute; top: 0; left: 0; z-index: 1;}
main article.detail section{ position: relative; z-index: 10;}
main article.detail section .column{ display: flex; justify-content: space-between; flex-wrap: wrap;}
main article.detail section .column .image{ width: 100%;}
main article.detail section .column .image img{ width: 100%; height: auto;}
main article.detail section .column dl{ width: 100%; margin-top: 1.6em;}
main article.detail section .column dl dt{ font-size: 2.4rem; margin-bottom: 0.4em; line-height: 1.2em; color: #FFF;}
main article.detail section .column dl dd{ color: #FFF;}
main article.detail section .column dl dd sup{ font-size: 1.4rem; line-height: 1.6em; display: block; margin-top: 1.6em; padding-left: 1.0em; color: #FFF; position: relative;}
main article.detail section .column dl dd sup:before{ content: "※"; position: absolute; top: 0; left: 0;}
main article.detail section .column:nth-of-type(2){ margin-top: 4.0rem;}
main article.detail section .column:nth-of-type(2) dl dt{ display: none;}
main article.detail section .column.left .image{ order: 1;}
main article.detail section .column.left dl{ order: 2;}
main article.detail section .column.right .image{ order: 1;}
main article.detail section .column.right dl{ order: 2;}

/*-- philosophy --*/
main article.philosophy{ background: url("../../images/background_03.webp") repeat center top; padding-bottom: 8.0rem;}
main article.philosophy section{ width: 100%;}
main article.philosophy h3{ font-size: 2.0rem; line-height: 1.6em; text-align: center;}
main article.philosophy span{ display: inline-block; font-size: 1.6rem;}

/*-- recommend --*/
main article.recommend{ padding-bottom: 8.0rem;}
main article.recommend h3{ font-size: 2.4rem; line-height: 1.6em; text-align: center;}
main article.recommend .productList{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0px auto; margin-top: 1.0em;}
main article.recommend .productList li{ width: 100%;}
main article.recommend .productList li:nth-child(n+2){ margin-top: 1.0em;}
main article.recommend .productList li img{ width: 100%; height: auto; box-shadow: 0 8px 16px rgba(0,0,0,0.24);}

/*-- history --*/
main article.history{ background: url("../../images/background_01.webp") repeat center top; padding-bottom: 8.0rem;}
main article.history section dl{ background: rgba(255,255,255,0.88); box-shadow: 0 16px 40px rgba(0,0,0,0.16); padding: 1.6em;}
main article.history section dl dt{ width: 100%; padding: 0.5em 0 0.5em 1.2em; position: relative;}
main article.history section dl dt:before{ content: ""; width: 16px; height: 16px; background: #333; border-radius: 8px; position: absolute; top: 0.8em; left: 0;}
main article.history section dl dt:after{ content: ""; width: 2px; height: calc(100% - 0.8em); background: #333; position: absolute; top: 0.8em; left: 7px;}
main article.history section dl dt:last-of-type:after,
main article.history section dl dd:last-of-type:before{ content: none;}
main article.history section dl dd{ width: 100%; padding: 0 0 0.5em 1.2em; position: relative;}
main article.history section dl dd:before{ content: ""; width: 2px; height: calc(100% + 0.8em); background: #333; position: absolute; bottom: -0.8em; left: 7px;}

/*-- order --*/
main article.order{ background: url("../../images/background_01.webp") repeat center top; padding-bottom: 8.0rem;}
main article.order:before{ content: ""; width: 100%; height: 100%; background: rgba(255,255,255,0.48); position: absolute; top: 0; left: 0;}
main article.order section{ position: relative; z-index: 10;}
main article.order section h3{ font-size: 2.0rem; line-height: 1.3em; text-align: center;}
main article.order section > p{ margin: 0 auto;}
main article.order section dl{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 2.4rem auto 0;}
main article.order section dl:nth-of-type(2){ margin-top: 0;}
main article.order section dl dt{ width: 4.0em; text-align:justify; text-align-last:justify; position: relative; line-height: 1.4em;}
main article.order section dl dt:after{ content: ":"; position: absolute; top: 0.8rem; left: 100%;}
main article.order section dl dd{ width: 100%; padding: 0 0 0.8rem; line-height: 1.4em;}
main article.order section dl dt{ padding: 0.8rem 0 0;}
main article.order section div{ background: rgba(0,0,0,0.32); padding: 1.0em; width: 100%; margin: 4.0rem auto 0; display: flex; justify-content:center; flex-wrap: wrap;}
main article.order section div h4{ text-align: center; font-size: 2.4rem; color: #FFF; line-height: 1.2em; width: 100%;}
main article.order section div p{ margin-top: 1.0em; color: #FFF;}

/* footer
---------------------------------------------------------------------------*/
.sns{ padding: 4.0rem 0;}
.sns dt{ text-align: center;}
.sns dt img{ width: 40%; height: auto;}
.sns dd{ font-size: 2.0rem; line-height: 1.4em; text-align: center; margin-top: 0.5em;}

.googleMap{ width: 100%; padding-bottom: 100%; position: relative; min-height: 300px;}
.googleMap iframe{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 1;}
.googleMap:after{ content: ""; width: 100%; height: 30%; background: #000000; background: linear-gradient(0deg,rgba(0,0,0,1)0%,rgba(0,0,0,0)100%); position: absolute; bottom: 0; left: 0; z-index: 100;}

.sightseeing{ background: #000; padding: 1.0em 0;}
.sightseeing section{ width: 100%; margin: 0px auto; padding: 0 10%;}
.sightseeing section dl{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end;}
.sightseeing section dl dt{ width: 100%;}
.sightseeing section dl dt img{ width: 100%; height: auto;}
.sightseeing section dl dd{ width: 100%; font-size: 2.0rem; line-height: 1.2em; color: #FFF; margin-top: 1.0em;}
.sightseeing section dl dd strong{ display: block; font-size: 3.2rem; line-height: 1.2; color: #FFF; font-weight: normal;}
.sightseeing section p.copyright{ color: #FFF; user-select: none; text-align: center; margin-top: 2.4rem;}

#btn{ position: fixed; bottom: 0; right: 0; z-index: 100; color: #FFF; text-decoration: none; background: rgba(0,0,0,0.8); padding: 0.8em; transition: all 0.3s ease 0s; cursor: pointer;}
#btn:hover{ color: #111; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.24);}
#btn i{ display: block; width: 1.6em; line-height: 1.6em; text-align: center;}

/* products
---------------------------------------------------------------------------*/
main article.products{}
main article.products .layout01{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
main article.products .layout01 + .layout01{ margin-top: 4.0rem;}
main article.products .layout01 .image{ width: 100%; order: 1;}
main article.products .layout01 .image img{ width: 100%; height: auto; box-shadow: 0 8px 16px rgba(0,0,0,0.24);}
main article.products .layout01 .inner{ width: 100%; order: 2; margin-top: 1.6em;}
main article.products .layout01 .inner dl{ border-bottom: solid 2px #333; padding-bottom: 1.0em; margin-bottom: 1.0em;}
main article.products .layout01 .inner dl dt{ font-size: 2.4rem; line-height: 1.4em;}
main article.products .layout01 .inner table{}
main article.products .layout01 .inner table th{ line-height: 1.2em; padding: 0.24em 0;}
main article.products .layout01 .inner table td{  padding: 0.24em 0; padding-left: 2.0em; text-align: right; line-height: 1.2em;}

main article.products .layout01 .inner table.number{}
main article.products .layout01 .inner table.number tr th:before{ content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 0.5em; position: relative; top: 2px;}
main article.products .layout01 .inner table.number tr:nth-child(1) th:before{ background: url("../../images/no_01.svg") no-repeat; background-size: contain;}
main article.products .layout01 .inner table.number tr:nth-child(2) th:before{ background: url("../../images/no_02.svg") no-repeat; background-size: contain;}
main article.products .layout01 .inner table.number tr:nth-child(3) th:before{ background: url("../../images/no_03.svg") no-repeat; background-size: contain;}
main article.products .layout01 .inner table.number tr:nth-child(4) th:before{ background: url("../../images/no_04.svg") no-repeat; background-size: contain;}
main article.products .layout01 .inner table.number tr:nth-child(5) th:before{ background: url("../../images/no_05.svg") no-repeat; background-size: contain;}

main article.products.gift{ padding-bottom: 8.0rem;}

main article.products .layout02{ display: flex; justify-content: space-between; flex-wrap: wrap;}
main article.products .layout02 .inner{ width: 100%;}
main article.products .layout02 .inner:nth-child(n+2){ margin-top: 1.0em;}
main article.products .layout02 .inner .image img{ width: 100%; height: auto; box-shadow: 0 8px 16px rgba(0,0,0,0.24);}
main article.products .layout02 .inner dl{ margin-top: 1.0em;}
main article.products .layout02 .inner dl dt{ text-align: center; font-size: 2.4rem; line-height: 1.2em; text-align: center;}
main article.products .layout02 .inner dl dd{ text-align: center;}

.infomation{ background: url("../../images/background_01.webp") repeat; margin-top: 4.0rem; padding: 1.0em; border-radius: 16px;}
.infomation h4{ text-align: center; font-size: 2.4rem; line-height: 1.2em;}
.infomation p{ margin-top: 1.0em;}
.infomation p sup{ font-size: 1.4rem; line-height: 1.4em; display: block; margin-top: 0.8em; padding-left: 1.0em; position: relative;}
.infomation p sup:before{ content: "※"; position: absolute; top: 0; left: 0;}

header h1,
#promo section h2,
main article section h2,
main article.intro section p,
main article.intro section h3,
main article.intro section h3 span,
main article.basic section .column .inner h3,
main article.product section .column .inner dl dt,
main article.product section .button a span,
main article.store section .column .inner dl dt,
main article.detail section .column dl dt,
main article.philosophy h3,
main article.recommend h3,
main article.order section h3,
main article.order section div h4,
.sns dd,
.sightseeing section dl dd,
main article.products .layout01 .inner dl dt,
.infomation h4,
main article.products .layout02 .inner dl dt{ font-family: "Shippori Mincho B1", serif; font-weight: 500; font-style: normal;}
.noto-sans-jp { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}

/*=============================================================
	common
=============================================================*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.6em;
	font-family: -apple-system,"Noto Sans JP", BlinkMacSystemFont, "Helvetica Neue", YuGothic, Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-optical-sizing: auto;
	color: #333;
	background: #FFF;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position:relative;
}

a{color: rgba(var(--clr-prim-rgb),1.0); text-decoration:underline; transition: all 0.3s ease 0s;}
a:hover{color: rgba(var(--clr-prim-rgb),0.64); text-decoration:none;}

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}