body{font-family: "Zen Old Mincho", serif;font-size:14px; font-weight:400; line-height:1.8; color:#584D3E; text-align:center;font-feature-settings: "palt"; }




h1,h2,h3,h4,h5,h6{line-height:1;position: relative;}
h2.top{border-radius:50%;width: 100%; max-width:160px;aspect-ratio: 1; margin-left:auto; margin-right:auto; border:solid 1px #A9977F; display:flex;justify-content: center;align-items: center;font-family: "STIX Two Text", serif; font-size:28px; font-weight:500; color:#A9977F;}
.global_inner{ margin-left:5%; margin-right:5%;}
.stage{width:100%; margin:0 auto; position:relative; background:#FFF;max-width:420px; z-index:2;
}
.text{text-align:left;}
iframe{border-radius:25px; overflow:hidden; width:100%; height:250px; margin-top:20px;}
img{width:100%; height:auto;}
img.pc_logo{position:fixed; left:60px; bottom:40px; width:70%; opacity:0.3;  z-index: 2;}
.w40{width:40%;}
.w45{width:45%;}
.w50{width:50%;}
.w60{width:60%;}


@media screen and (min-width: 421px) {
body{background-image:url(/assets/image/pc_back.jpg); background-repeat:no-repeat;background-attachment: fixed; background-size:cover;}
.stage{box-shadow: 0px 5px 12px 0px #a6a6a6;
}
}




/*====================
ハンバーガーメニュー
=====================*/
header{height:60px; position:fixed;max-width:420px; width:100%;left: 50%; transform: translateX(-50%);  z-index:3; top:0px;  background:#FFF; }
header .logo{ padding-top:18px; text-align:left; margin-left:36px; width:140px;}
header .logo img{transition:0.4s all;}
header .logo img:hover{transform: scale(1.0); opacity:0.8;transition:0.4s all;}
header .logo h1{margin-bottom:0;}
header img.instagram{position:absolute; top:14px; right:72px;width:34px;}

nav {display: block;  position: fixed;  top: 82px;  right:0px;  bottom: 0;  width: 100%;	background-color:#FFF;  	-webkit-overflow-scrolling: touch;  transition: all 0.5s;  z-index: 102;  opacity: 0; visibility:hidden;}

.open nav {right: 0;  opacity: 1;  top:0px;  width:100%;box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.08);visibility:visible; background:#DFD8D0;}

nav {	height: 100vh;		width: 100%;overflow: auto; padding-top:40px;}
nav .box{width: 100%;}
nav .box .item{padding-left: 0px;width: 100%;}
nav .box .item ul{margin-bottom:20px; padding-left:30px; padding-right:30px; }
nav .box .item ul li{line-height: 1.3; font-size:16px; display: block;  overflow: hidden;   z-index:0;position: relative;    text-align: left;}
nav .box .item ul li:last-child{border:none;}

nav .box .item ul li a{ display:block; padding-top:25px; padding-bottom:25px; color:#A9977F; 
position: relative;	overflow: hidden;    transition: ease .2s; border-bottom:solid 1px #A9977F; line-height:1.2;}
nav .box .item ul li a span{position: relative;	z-index: 3;	}


nav .box .item ul li a:hover{ transition: all 0.3s;color:#584D3E;}


nav .box .item ul li.title{font-size:13px; }
nav .box .item ul li.title span{letter-spacing:0px;  font-weight:500; margin-right:10px; font-size:25px;font-family: "STIX Two Text", serif;}
nav .box .item ul li:last-child{margin-bottom:0px;}

nav .box .item .online_shop{width:350px; margin-left:auto; margin-right:auto; margin-top:40px; position:static; right:unset; bottom:unset; transform:none;}
nav .box .item .instagram{width:50px; margin-left:auto; margin-right:auto;margin-top:40px;}
/*============
ハンバーガーメニューのトグル
=============*/
.toggle_btn {  display: block;
    position: fixed;
    top: 17px;
    right: 16px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 103;
    transition: 0.5s;}
.toggle_btn span {display: block;  position: absolute;  width: 30px; left:0px;  height: 2px;  background-color: #A9977F;  border-radius: 4px;  transition: all .5s;}
.toggle_btn span:nth-child(1) {  top: 2px;}
.toggle_btn span:nth-child(2) {  top: 13px;}
.toggle_btn span:nth-child(3) {  top: 24px;}
.open .toggle_btn span {  background-color: #A9977F;}
.open .toggle_btn span:nth-child(1) {  transform: translateY(10px) rotate(-315deg);top: 5px;}
.open .toggle_btn span:nth-child(2) {  opacity: 0;}
.open .toggle_btn span:nth-child(3) {  transform: translateY(-10px) rotate(315deg);top: 25px;}

/*============
ハンバーガーメニューのマスク
=============*/
#mask {display: none;  transition: all .5s;}
.open #mask {  display: block;  position: fixed;  top: 0;  right: 0;  width: 100%;  height: 100%;  /*background: #000;*/  opacity: .8;  z-index: 101; }




/*====================
イントロダクション
=====================*/
.introduction{padding-top:60px;}
.introduction .product_name{color:#A9977F; font-size:28px; margin-bottom:10px; line-height:1;}
.introduction .product_name span{font-family: "STIX Two Text", serif; font-size:35px; display:block; margin-top:15px;}
.introduction .text{font-size:10px;color:#A9977F;font-family: "STIX Two Text", serif; line-height:1.4; margin-bottom:40px; text-align:center;}
.introduction .photo.col2{display:flex;justify-content: space-between;    align-items: flex-end;}
.introduction .photo.col2 .item{border-radius:25px; overflow:hidden;}
.introduction .photo.col2 .item:first-child{width:35%;}
.introduction .photo.col2 .item:last-child{width:50%; margin-bottom:80px;}

.introduction .copy_image{width:50%; margin-left:auto; text-align:center;}
.introduction .copy_image img{width:30%;}

.introduction .copy_text{text-align:left; margin-top:60px; font-size:14.5px;}



/*====================
トップ：ABOUT
=====================*/
.top_about{margin-top:60px;}
.top_about .text_area{background:#DFD8D0; border-radius:20px; padding:90px 30px 50px 30px; margin-top:-50px;}
.top_about .box{display:flex;justify-content: space-between; margin-top:70px;}
.top_about .box .item{width:32%; border-radius:25px; overflow:hidden;}


/*====================
トップ：Product
=====================*/
.top_products{margin-top:60px;}
.top_products .text_area{background:#F0EEE4; border-radius:20px; padding:90px 30px 50px 30px; margin-top:-50px;}
.top_products .text_area h3{border-bottom:solid 1px #584D3E; padding-bottom:20px; margin-bottom:30px; font-size:24px;}
.top_products ul{background:#FFF; border-radius:20px; padding:20px; margin-top:40px;}
.top_products ul:first-of-type{margin-top:60px;}
.top_products ul li.small{font-size:14px;}
.top_products ul li.medium{font-size:15px;}
.top_products ul li.big{font-size:18px; font-weight:700;}
.top_products ul li span{font-size:13px; font-weight:500;}

/*====================
トップ：フット
=====================*/
.top_foot{padding-top:20px;}
.top_foot .box{margin-top:40px;display:flex;justify-content: space-between;}
.top_foot .item{width:40%;}
.top_foot .text_area{display:flex;justify-content: center;flex-direction: column; align-items: center;text-align:left; width:55%;}
.top_foot .text_area .viewmore{margin-top:20px;}


/*====================
下層：ヘッド
=====================*/
.head{height:350px; position:relative; background:#CCC; padding-top:80px;background:url(../image/head.png) no-repeat;}
.head h2{position: absolute;top: 160px; left: 50%; transform: translateX(-50%);  color:#a9977f;font-size:20px; width:100%; letter-spacing:2px;}
.head h2 span{ font-size:40px; display:block; margin-bottom:20px;letter-spacing:1px;}


/*====================
グリヒアンジョルテについて
=====================*/
.about .text{margin-top:40px;}
.about .photo{margin-top:40px; border-radius:25px; overflow:hidden;}
.about .material{margin-top:40px; background:#f0eee4; border-radius:25px; padding:30px; font-size:11px; letter-spacing:0;}
.about .material h3{text-align:center; padding:5px 30px; margin-bottom:15px; margin-left:auto; margin-right:auto; font-size:18px; background:#FFF; border-radius:5px; width:fit-content; font-weight:500;}
.about .material dl{display:flex;justify-content: center; font-size:18px; font-weight:700;}
.about .material dl dt:after{content:" ｜ ";}
.about .material dl:last-of-type{ margin-bottom:15px;}

.about .photo.col2{display:flex;justify-content: space-between;    align-items: flex-end;}
.about .photo.col2 .item{border-radius:25px; overflow:hidden;}
.about .photo.col2 .item:first-child{width:50%;margin-bottom:80px;}
.about .photo.col2 .item:last-child{width:35%; }

.about .produce{margin-top:60px; text-align:left;}
.about .produce .box{display:flex;}
.about .produce .box .photo{width:70%;margin-top: 0px;}
.about .produce .box .text_area{padding-left:30px;padding-top:30px;margin-right: -40px;    position: relative;}
.about .produce .box .text_area h3{font-size:30px;color:#584D3E;}
.about .produce .box .text_area h3 span{display:block; margin-bottom:10px;color:#a9977f; font-size:22px;font-family: "Parisienne", cursive;}
.about .produce .box .text_area .text{border-left:solid 2px #584d3e; padding-left:10px; font-size:12px;    white-space: nowrap;}


/*====================
商品取り扱い店舗
=====================*/
.stockist .lead{margin-top:60px; font-weight:500; font-size:17px;}
.stockist .shoplist .item{margin-top:60px;}
.stockist .shoplist .item h3{background:#f2efec; font-size:20px; line-height:1.2; padding:5px 20px; text-align:center; font-weight:700;} 
.stockist .shoplist .item .text{margin-top:20px; padding:0 20px; font-size:14px;}
.stockist .shoplist .item .text span{font-size:12px; line-height:1;}
.stockist .shoplist .item .link{ text-align:right; margin-top:10px;}
.stockist .shoplist .item .link a{display:inline-block;background:url(../image/ic_arrow_right.jpg) no-repeat; text-align:right; background-position:right top 5px; padding-right:25px; line-height:1; color:#a9977f; border-bottom: solid 1px #a9977f; padding-bottom:5px;}


/*====================
商品取り扱い店舗
=====================*/
.company{}
.company th,
.company td{border-bottom:solid 1px #584D3E; padding:20px 0; text-align:left;}
.company th{width:30%;}
.company td{width:70%;}
.company th span{border-radius:5px; width:85px; text-align:justify;text-align-last: justify; padding:0px 10px; font-size:16px; background:#edeae7;display: block; margin-right:10px;}






/*====================
フッター
=====================*/
footer{background:#A9977F; padding:60px 40px; color:#FFF; margin-top:80px;}
footer a{color:#FFF;}
footer ul{display:flex;justify-content: center;font-family: "STIX Two Text", serif; font-size:18px;}
footer ul li{padding-right:30px; position:relative;}
footer ul li:after{content:"/"; position:absolute; right:12px;}
footer ul li:last-child:after{content:none; }
footer ul li:last-child{padding-right:0px;}
footer .logo{width:195px; margin:60px auto 0 auto;}
footer .copyright{font-size:10px;font-family: "STIX Two Text", serif; margin-top:40px;}


/*====================
ボタン
=====================*/
.viewmore{width:120px; margin-left:auto; margin-right:auto; margin-top:40px;}
.btn_buy{width:200px; margin-left:auto; margin-right:auto; margin-top:40px;}
.online_shop{position:fixed; bottom:10px; right:10px; width:126px;z-index: 1;}



@media screen and (min-width: 421px) {
.online_shop{transform: translateX(223%);right: unset; }
}