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

/*----------------------------------------------------------------------------
***                                                                  font
----------------------------------------------------------------------------*/
.font-.meiryo{font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif""Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo UI', Verdana, 'ＭＳ Ｐゴシック', serif;}
.font-kyoukasho{ font-family:'教科書ICA R',Kyoukasho ICA Regular,serif;}
.font-ryumin{ font-family:a-otf-ryumin-pr6n, serif; font-weight:300; font-style:normal;}
.font-noto{ font-family:"Noto Sans JP", serif;}

/*----------------------------------------------------------------------------
***                                                                  wrap
----------------------------------------------------------------------------*/
#wrap{}

body{background-color: #f4dedf;}
.allmain{background: #fff;padding: 65px 0px;max-width: 1050px;margin: 0 auto;}

/*----------------------------------------------------------------------------
***                                                                  Header
----------------------------------------------------------------------------*/
header .headerSec{position:fixed; width:100%; max-width: 1050px; height:65px; background-color:#fff; z-index:999; left: 0; right: 0; margin: 0 auto; opacity: 0.9;}
header .sectionInner{position:relative; max-width:1000px; width:100%; height: 100%; margin:0 auto; align-items: center;}
header .headerNavi{margin:0 0 0 auto;}
header .headerNavi li{float: left; color:#603813; border-right: 1px solid #603813; padding: 0.3em 1.2em; font-weight: bold;}
header .headerNavi li:last-child{border-right:none;}
header .headerNavi li a:link,header .headerNavi li a:visited{color:#603813;}

/* ハンバーガーメニュー中身 */
header .sectionInner nav.naviBox{width:300px;height:70vh;margin:0 auto;padding:0;position:fixed;top:0;left:0;background: rgba(255,125,153,1);text-align:center;transform:translateX(-100%);z-index:1;}
header .sectionInner nav.naviBox .mainNavi{max-width:500px;width: 100%;margin:0 auto;padding: 0;}
header .sectionInner nav.naviBox li{position: relative;text-align: left;text-indent: 1.5em;margin:0em auto;font-size: 110%;color:#fff;padding: 0.7em 0;line-height: 1.2;border-top: 1px solid #f4dedf;}
header .sectionInner nav.naviBox li::after{content: ""; display: block;position: absolute;font-size: 20px;width: 8px;height: 8px;  border-top: solid 2px #fff; border-right: solid 2px #fff;right: 20px;top: 0;bottom: 0;margin: auto; transform: rotate(45deg);}
header .sectionInner nav.naviBox li:last-child{border-bottom: 1px solid #f4dedf;}
header .sectionInner nav.naviBox li:nth-child(2){padding: 0.5em 0 1em;}
header .sectionInner nav.naviBox li:nth-child(2)::after{display: none;}
header .sectionInner nav.naviBox li:nth-child(2) p{color:#fff;width:100%;text-decoration:none;transition:color .4s;position:relative;text-align: left;font-weight: normal;text-indent: 1.3em;font-weight: bold;}
header .sectionInner nav.naviBox li:nth-child(2) div{width: 90%;height: auto;margin-left: auto;margin-right: auto;text-align: center;background-color: #ff7d99;border: #f4dedf 1px solid;border-radius: 7px;}
header .sectionInner nav.naviBox li:nth-child(2) div a{position: relative;color: #fff;border-bottom: dashed 1px #f4dedf;font-size: 90%;font-weight: normal;display: block;margin: auto;width: 100%;padding: 8px 0 3px 0;text-align: left;text-indent: 1.3em;}
header .sectionInner nav.naviBox li:nth-child(2) div a::after{content: "";display: block;position: absolute;font-size: 20px;width: 8px;height: 8px;border-top: solid 2px #fff;border-right: solid 2px #fff;right: 11px;top: 0;bottom: 0;margin: auto;transform: rotate(45deg);}
header .sectionInner nav.naviBox li:nth-child(2) div a:last-of-type{border-bottom: none;}
header .sectionInner nav.naviBox li a{color:#fff;width:100%;text-decoration:none;transition:color .4s;position:relative;display: block;font-weight: bold;}
header .sectionInner nav.naviBox li a:hover{ color: #fff;}

/* ハンバーガーメニューボタン */
header .sectionInner #menuBtn{position:relative; display:block; top:0; right:0; width:28px; height:21px; margin:0 0 0 1em; cursor:pointer; z-index:2;}
header .sectionInner #menuBtn span{display:block; position:absolute; width:100%; height:3px; border-radius:2px; background-color:#ff7d99; -webkit-transition:.35s ease-in-out; -moz-transition:.35s ease-in-out; transition:.35s ease-in-out;}
header .sectionInner #menuBtn span:nth-of-type(1){ top:0;}
header .sectionInner #menuBtn span:nth-of-type(2){ top:9px;}
header .sectionInner #menuBtn span:nth-of-type(3){ top:18px;}
header .sectionInner #menuBtn.active span{ background-color:#ff7d99;}
header .sectionInner #menuBtn.active span:nth-child(1){top:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg);}/* 最初のspanをマイナス45度に */
header .sectionInner #menuBtn.active span:nth-child(2),
header .sectionInner #menuBtn.active span:nth-child(3){top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg);}/* 2番目と3番目のspanを45度に */
header .sectionInner nav.naviBox.active{transform:translateX(0%); height:auto; overflow-y:scroll; -ms-overflow-style:none;/* IE, Edge 対応 */ scrollbar-width:none; top: 65px; left: 750px; right: 0; max-height: 88%;}
header .sectionInner nav.naviBox.active::-webkit-scrollbar{ width: 4px;}
header .sectionInner nav.naviBox.active::-webkit-scrollbar-track{background-color:none;}
header .sectionInner nav.naviBox.active::-webkit-scrollbar-thumb{background-color: #ccc;}


/*下の階層を持っているulの指定*/
header .headerNavi li.has-child ul{position: absolute; left:-15px; margin-top: 10px; z-index: 4; background:rgba(255,255,255,0.9); width:160px; visibility: hidden; opacity: 0; transition: all .3s;}
header .headerNavi li.has-child li{border-right: none;padding: 5px 10px; border: 1px solid #603813;width: 100%;font-weight: bold;text-align: center;margin: 0;}
/*hoverしたら表示*/
header .headerNavi li.has-child:hover > ul,
header .headerNavi li.has-child ul li:hover > ul,
header .headerNavi li.has-child:active > ul,
header .headerNavi li.has-child ul li:active > ul{visibility: visible; opacity: 1;}
/*ナビゲーションaタグの形状*/
header .headerNavi li.has-child ul li a:active{background:rgba(255,255,255,0.95);}
header .headerNavi li p{cursor: pointer;}

/* 950px以下*/
@media screen and (max-width:950px){
	.allmain{background: #fff;padding: 60px 0% 50px;margin: 0 auto;}
	header .pcNone{display:block;}
	header .spNone{display:none;}
	header .headerSec{height:60px; padding:0.8em 1em;}
	header .sectionInner{padding:0;justify-content: space-between;}
	header .sectionInner h1{width:180px;height: 36px;}
	header .icon_box{margin:0 0 0 auto;}
	header .icon_box li{width: 36px;}
	
	header .sectionInner #menuBtn{position:relative; width: 30px; height:23px;}
	header .sectionInner #menuBtn span:nth-of-type(1){ top:0px;}
	header .sectionInner #menuBtn span:nth-of-type(2){ top:10px;}
	header .sectionInner #menuBtn span:nth-of-type(3){ top:20px;}
	header .sectionInner #menuBtn.active span{background-color: #fff;}
	header .sectionInner #menuBtn.active span:nth-child(1),
	header .sectionInner #menuBtn.active span:nth-child(2),
	header .sectionInner #menuBtn.active span:nth-child(3){ top:12px}	
	
	header .sectionInner nav.naviBox.active{left: 0;top: 0;width: 100%;height: 100%;max-height: 100%;}
	header .sectionInner nav.naviBox .mainNavi{padding: 6em 0em;}
	header .sectionInner nav.naviBox li{margin:0em auto;padding: 1em 0;text-align: left;text-indent: 1.5em;line-height: 1em;font-size: 150%;}
	header .sectionInner nav.naviBox li.onlineshop{background: #fff;padding: 1.5em;color: #00a9a4;border-radius: 8px;}
	header .sectionInner nav.naviBox li.onlineshop span{color: #00a9a4;}
	header .sectionInner nav.naviBox li.onlineshop a{color: #00a9a4;}
	header .sectionInner nav.naviBox li:nth-child(2) div a{color: #fff;border-bottom: dashed 1px #f4dedf;font-size: 90%;font-weight: bold;display: block;padding: 10px 0 8px 0;text-align: left;}
	header .sectionInner nav.naviBox li::after{right: 29px;}
	header .sectionInner nav.naviBox.active::-webkit-scrollbar{display: none;}
}

/* 1000px以下*/
@media screen and (min-width:951px) and (max-width:1050px){
	header .sectionInner nav.naviBox.active{left: 0;width: 100%;}
}

/*----------------------------------------------------------------------------
 ***                                                           パンくずリスト
----------------------------------------------------------------------------*/
#breadcrumbList{ background-color:#EE847D; color:#fff; padding:65px 0 0;}
#breadcrumbList ul{ max-width:990px; width:96%; margin:0 auto; padding:0; font-size:0.75rem;}
#breadcrumbList li{ float:left; color:#fff; margin:0 0.2em; line-height:1.8em; position:relative;}
#breadcrumbList li a{ color:#fff; transition:opacity .3s;}
#breadcrumbList li a:hover{ text-decoration:none; opacity:0.6;}
#breadcrumbList li:not(:last-child):after{content:">"; display:inline-block; width:1em; height:1em; line-height:1.2em; margin:0 0 0 0.5em;}

/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
footer{}
footer .grayBox{background: #efece7;padding: 1.5em 0;}
footer .grayBox .sectionInner{ max-width:400px; width:90%; margin:0 auto; padding:0.5em 0;}
footer .grayBox p{font-size: 90%;}
footer .grayBox p a,
footer .grayBox p a:link,
footer .grayBox p a:visited{color: #464646;}
footer .copyR{background:#deb7a6;padding: 2.5em 0 2em;text-align: center; color: #fff;font-size: 90%;margin-bottom: 0;}

/* 820px以下*/
@media screen and (max-width:820px){
	footer .grayBox .sectionInner{display: block;}
	footer .grayBox{padding: 0.5em 0;}
	footer .sectionInner p{margin: 0.4em auto;text-align: center;}
	footer .copyR{padding: 1em 0 1em;font-size: 75%;margin: 0;}
}