@charset "utf-8";
:root {--main-color: ;}
:root {--sub-color: ;}
:root {--text-color: ;}

.pcnone,.navList_pcbox.pcnone{display: none;}
.spnone{display: block;}

@media screen and (min-width: 821px) {/** PCになったら****/
	.pcnone{display: block;}
	.spnone,#fv.spnone{display: none;}
}


main{
	color: #FFF;
	background: #ffffff;
}

p.shop_aren {
    font-size: 10px;
    color: #A7A7A7;
    max-width: 321px;
    max-height: 295px;
    margin: 0 auto;
}

section{
	width: 100%;
    padding: 60px 0;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.inner{
	width: 94%;
	max-width: 780px;
	margin: 0 auto;
    position: relative;
}
h1,h2,h3,h4,h5,h6{
	line-height: 1.6;
	letter-spacing: 0.05em;
}
p{
	font-size: 14px;
	line-height: 2.4;
    letter-spacing: 0.05em;
}
@media screen and (min-width: 821px) {
	main{
		max-width: 100%;/**393px**/
		margin: 0 auto;
	}
}

.about2_btn{
	width: 94%;
	margin: 0 3% 20px;
}

/*==================================================================================================*/
/*共通記述*/
h2.title{
	font-size: 36px;
	text-align: center;
	letter-spacing: 0;
	color: #AB880A;
	font-family: "Noto Serif JP", serif;
	margin: 30px 0 0 ;
}
@media screen and (max-width: 520px) {
	h2.title{
		font-size: 50px;
	}
}
/*==================================================================================================*/
/*-*/
header{
	width: 393px;
	height: 45px;
	position: fixed;
	top: 0;
	z-index: 1000;
	transition: .5s;
}
header.movement{
	background: rgba(255,255,255,0.50);
}
h1{
	width: 138px;
	margin: 0 0 0 10px;
	position: relative;
    z-index: 1;
}
h1 a{
	display: flex;
	align-items: center;
	height: 45px;
}
h1 img:nth-child(2){
	display: none;
}
.pcNav h1 img:nth-child(1){
	display: none;
}
.pcNav h1 img:nth-child(2){
	display: block;
}
nav{
	width: 100%;
	height: 100vh;
	padding: 100px 0;
	background: #AB880A;
	position: fixed;
	top: -100vh;
	transition: .5s;
	right: 0;
}
.pcNav nav{
	top: 0;
	right: 0;
}
nav .inner{
	width: 90%;
	max-width: 320px;
}
nav .sns{
	margin: 40px 0 0;
}
/*ボタン*/
.openbtn1{
	display: block;
	cursor: pointer;
	width: 45px;
	height: 45px;
	background: #AB880A;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10000;
}
.openbtn1 span:nth-of-type(1),
.openbtn1 span:nth-of-type(2),
.openbtn1 span:nth-of-type(3){
	display: inline-block;
	transition: all .4s;
	width: 23px;
	height: 3px;
	background: #FFF;
	position: absolute;
	left: 12px;
}
.openbtn1 span:nth-of-type(1) { top:14px;}
.openbtn1 span:nth-of-type(2) { top:22px;}
.openbtn1 span:nth-of-type(3) { top:30px;}

.pcNav .openbtn1{
	background: #FFF;
}
.pcNav .openbtn1 span:nth-of-type(1),
.pcNav .openbtn1 span:nth-of-type(2),
.pcNav .openbtn1 span:nth-of-type(3){
	background: #AB880A;
}
.pcNav .openbtn1 span:nth-of-type(1) {
	top: 21px;
	transform: rotate(-45deg);
}
.pcNav .openbtn1 span:nth-of-type(2){
	opacity: 0;
}
.pcNav .openbtn1 span:nth-of-type(3){
	top: 21px;
	transform: rotate(45deg);
}
@media screen and (min-width: 821px) {
	header.movement{
		background: none;
	}
	.openbtn1{
		box-shadow: 0 0 4px rgba(255,255,255,0.40);
	}
}
/*==================================================================================================*/
/*fv-ファーストビュー*/
#fv{
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 673px;
	padding: 0;
	background: center / cover no-repeat url("../img/fv_bg.jpg");
}
#fv p{
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.3em;
	color: #AB880A;
	margin: 0 0 10px;
}
#fv h2{
	width: 100%;
	max-width: 393px;
	margin: 0 auto;
}
#fvPc{
	display: none;
}
@media screen and (min-width: 821px) {
	#fvPc{
		width: 100%;
		height: 100vh;
		display: block;
		background: center / cover no-repeat url("../img/fv_bg_pc.jpg");
		-ms-filter: blur(3px);
  		filter: blur(3px);
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
/*==================================================================================================*/
/*topics-*/
#topics{
	background: center / cover no-repeat url("../img/topics_bg.jpg");
}

#topics .inner{
	width: 90%;
}

#topics .inner img{
	width: 100%;
}

#topics .inner a{margin: 40px 0 0 0;}


.scroll{
	display: block;
	width: 100%;
	height: 95px;
	margin: 0 0 40px;
	position: relative;
}
.scroll::before{
	display: block;
	content: "";
	width: 1px;
	background: #FFF;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
	animation-name:line;
	animation-duration:2s;
	animation-timing-function:cubic-bezier;
	animation-iteration-count:infinite;
}
@keyframes line{
  0%{
	  height:0;
	  opacity: 0;
  }
	20%{
	  opacity: 1;
  }
	80%{
	  opacity: 1;
  }
  100%{
	  height:95px;
	  opacity: 0;
  }
}
#topics h2{
	font-family: "Noto Serif JP", serif;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: 0em;
	text-align: center;
	margin: 0 0 17px;
}
#topics p{
	margin: 0 0 20px;
}
#topics img{
	width: 49%;
}
@media screen and (max-width: 520px) {
	#topics h2{
		font-size: 19px;
	}
}
/*==================================================================================================*/
/*products-*/
#products{
	padding: 0 0 60px;
}

#products h2 img {
    width: 60%;
    margin: 0 0 10px 20px;
}

@media screen and (max-width: 820px) {
}
/*==================================================================================================*/
/*about*/
#about{
	color: #686868;
	background: #fff;
}
#about .inner{
	width: 90%;
}
#about h2{
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.2em;
	margin: 40px 0 0;
}
#about h2 span{
	font-size: 26px;
	letter-spacing: 0.3em;
}
#about h2 + p{
	font-weight: bold;
}

#about p{
	color: #686868;
	line-height: 2;
	margin: 0 0 15px;
}
#about img{
	margin: 0 0 23px;
}
/**/
#about .inner div{
	padding: 21px 24px;
	border-radius: 11px;
	background: #FFF;
	box-shadow: 0 4px 4px rgba(0,0,0,0.25);
	position: relative;
	z-index: 1;
}
#about .inner div h3{
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	font-weight: 400;
	color: #7D6470;
	margin: 0 0 8px;
}
#about .inner div ol li{
	font-size: 13px;
	color: #E679AC;
	border-bottom: dotted 1px #E679AC;
}
#about .inner div ol li span{
	font-weight: 700;
}
#about .inner div ol li::before{
	display: inline-block;
	content: "1.";
	font-family: "Noto Serif JP", serif;
	font-size: 26px;
	color: #E679AC;
	margin: 0 5px 0 0;
}
#about .inner div ol li:nth-child(2)::before{
	content: "2.";
}
#about .inner div ol li:nth-child(3)::before{
	content: "3.";
}
#about .inner div ol li:nth-child(4)::before{
	content: "4.";
}
#about .inner div ol li:nth-child(5)::before{
	content: "5.";
}
#about .inner div ol li:nth-child(6)::before{
	content: "6.";
}

@media screen and (max-width: 820px) {
}
/*==================================================================================================*/
/*about2-*/
#about2{
	padding: 10px;
	overflow: inherit;
	background: center / cover no-repeat url("../img/topics_bg.jpg");
}

#about2 .inner{
	background: #fff;
	padding: 20px;
	margin: 20px auto;
}

#about2 li{
	padding: 0 0 80px;
}
#about2 p{
	color:#686868;
	margin: 0 0 20px;
}

#about2 h3{
	width: 94%;
	max-width: 393px;
	font-family: "Noto Serif JP", serif;
	font-size: 19px;
	text-align: center;
	letter-spacing: 0;
	margin: 0 auto 17px;
	position: relative;
}
#about2 li h3::before{
	display: block;
	content: "01";
	font-family: "Noto Serif JP", serif;
	font-size: 106px;
	font-weight: 700;
	line-height: 1;
	color: #FFF;
	opacity: 0.1;
	position: absolute;
	top: -40px;
	left: -16px;
}
#about2 li:nth-child(2) h3::before{
	content: "02";
}
#about2 li:nth-child(3) h3::before{
	content: "03";
}
#about2 li:nth-child(4) h3::before{
	content: "04";
}
#about2 li:nth-child(5) h3::before{
	content: "05";
}
#about2 li:nth-child(6) h3::before{
	content: "06";
}

#about2 li h3 + p{
	text-align: center;
	line-height: 1.8;
}
/**/
#about2 li:nth-child(1) h3{
	margin: 0 auto;
}
#about2 li:nth-child(1) img{
	display: block;
	width: 100%;
	max-width: 294px;
	margin: -20px auto;
}
#about2 li:nth-child(1) img + p{
	font-family: "Noto Serif JP", serif;
	text-align: center;
}
/**/
#about2 li:nth-child(2){
	background: linear-gradient(#AB880A ,10%, #EC82A2);
}
#about2 li:nth-child(2) a{
	display: block;
	width: 257px;
	margin: 0 auto;
	position: relative;
}
#about2 li:nth-child(2) a img{
	opacity: 1;
	transition: .5s;
}
#about2 li:nth-child(2) a:hover img{
	opacity: 0.7;
}
#about2 li:nth-child(2) a:nth-child(3){
	margin: -10px auto 0;
}
#about2 li:nth-child(2) a:nth-child(4){
	margin: 20px auto -50px;
}
#about2 li:nth-child(2) a span{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 17px;
	font-size: 10px;
	line-height: 1;
	color: #FFF;
	border-radius: 8.5px;
	background: #222222;
	position: absolute;
	top: 165px;
	left: 0;
	transition: .5s;
}
#about2 li:nth-child(2) a:nth-child(4) span{
	top: 130px;
	left: auto;
	right: 0;
}
#about2 li:nth-child(2) a:hover span{
	color: #222222;
	background: #FFF;
}
/**/
#about2 li:nth-child(3){
	background: linear-gradient(#EC82A2 ,10%, #F2899B);
}
#about2 li:nth-child(3) div{
	width: 94%;
	max-width: 331px;
	border-radius: 17px 17px 0 0;
	background: #FFF;
	overflow: hidden;
	margin: 20px auto 20px;
}
#about2 li:nth-child(3) div p{
	font-size: 15px;line-height: 1.6;
	color: #606060;
	padding: 10px;
}
#about2 li:nth-child(3) div + p{
	font-family: "Noto Serif JP", serif;
	text-align: center;
}
/**/
#about2 li:nth-child(4){
	background: linear-gradient(#F2899B ,10%, #F79192);
}
#about2 li:nth-child(4) img{
	display: block;
	max-width: 393px;
	margin: -100px auto;
}
/**/
#about2 li:nth-child(5){
	background: linear-gradient(#F79192 ,10%, #FE9989);
	position: relative;
}
#about2 li:nth-child(5) h3 + p{
	width: 90%;
	max-width: 354px;
	font-size: 16px;
	text-align: left;
	margin: 0 auto 20px;
}
#about2 li:nth-child(5) h3 + p span{
	font-weight: bold;
	margin: 0 0 20px;
}
#about2 li:nth-child(5) h3 + p + p{
	width: fit-content;
	max-width: 94%;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0;
	color: #FF9A8A;
	border-radius: 23px;
	padding: 15px 30px;
	background: #FFF;
	margin: 0 auto 20px;
}
#about2 li:nth-child(5) img{
	display: block;
	width: 292px;
	margin: 0 auto 20px;
	position: relative;
	z-index: 1;
}
#about2 li:nth-child(5)::after{
	display: block;
	content: "";
	width: 100%;
	height: 100px;
	background: linear-gradient(#FE9989, #E579AD);
	position: absolute;
	bottom: 0;
}
@media screen and (max-width: 520px) {
	#about2 ul {
    	overflow: hidden;
	}
}
/*==================================================================================================*/
/*shop-*/
#shop{
	padding: 0 0 50px;
}
#shop ul{
	max-width: 321px;
	max-height: 295px;
	overflow-y: scroll;
	margin: 0 auto;
}
#shop ul::-webkit-scrollbar {
    width: 8px;
    background-color: #FFF; 
	border-radius: 3px;
}
#shop ul::-webkit-scrollbar-thumb {
    background: #AB880A;
    border-radius: 3px;
}
#shop ul li{
	padding: 10px 0 5px;
	border-bottom: solid 1px #AB880A;
}
#shop ul li h4{
	font-size: 14px;
	line-height: 1;
}
#shop ul li p{
	font-size: 12px;
}
#shop ul li p::before{
	display: inline-block;
	content: "";
	width: 8.25px;
	height: 10.12px;
	background: center / contain no-repeat url("../img/icon_map.svg");
	margin: 0 2px 0 0;
}

#shop ul li a{
	color:#6C6C6C;
}

@media screen and (max-width: 820px) {
}
/*==================================================================================================*/
/*corporate-*/
#corporate{
	color: #fff;
	padding: 40px 0;
	background: #706947;
}
#corporate h2{
	font-size: 36px;
	text-align: center;
	letter-spacing: 0;
	color: #fff;
	margin: 0 0 20px;
}
#corporate dl{
	width: 90%;
	max-width: 320px;
	display: flex;
	padding: 13px 0;
	border-bottom: solid 1px #9B9B9B;
	margin: 0 auto;
}
#corporate dl:last-child{
	border-bottom: none;
}
#corporate dl dt{
	width: 80px;
	font-size: 12px;
}
#corporate dl dd{
	width: calc( 100% - 80px );
	font-size: 12px;
}

#corporate dl dd a{
	color: #fff;
	text-decoration: underline;
}


@media screen and (max-width: 520px) {
	#corporate dl dt{
		width: 60px;
	}
	#corporate dl dd{
		width: calc( 100% - 60px );
	}
}
/*==================================================================================================*/
/*footer-*/
footer{
	padding: 40px 0 0;
	background: #AB880A;
}
footer .inner{
	width: 90%;
	max-width: 320px;
}
footer h2{
	display: flex;
	align-items: center;
	width: 205px;
	margin: 0 0 20px;
}
footer .navList{
	margin: 0 auto 40px;
}
footer .inner + div{
	padding: 0 15px;
	background: #4E4E4E;
	color: #fff;
	text-align: center;
	font-size: 10px;
}
footer .inner + div small{
}
footer .inner + div p,
footer .inner + div p a{
	width: fit-content;
	font-size: 11px;
	color: #FFF;
}
@media screen and (min-width: 821px) {
	footer{
		width: 100%;
		margin: 0 auto;
	}
}
/*==================================================================================================*/
/*-*/
.navList{
	margin: 0 auto;
}
.navList li{
	padding: 5px 0;
	margin: 0 0 16px;
}
.navList li a{
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: #FFF;
	opacity: 1;
	transition: .5s;
}
.navList li a:hover{
	opacity: 0.7;
}
.navList li a span{
	display: block;
	font-size: 12px;
	font-weight: 400;
}
.sns{
	display: flex;
	width: 60px;
	margin: 0 0 20px;
}
.sns a{
	display: block;
	width: 24px;
	opacity: 1;
	transition: .5s;
}
.sns a:hover{
	opacity: 0.7;
}
.sns a:last-child{
	margin: 0 0 0 10px;
}
/*ポップアップ*/
/*========= モーダル表示のためのCSS ===============*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}
.modal{
	display: block;
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100%;
	opacity:0;
	pointer-events: none;
	transition: opacity 1s;
}
.modal.open{
	opacity:1;
	pointer-events: auto;
}
/*ポップアップ共通css*/
.modaal-container{
	width: 90%;
	max-width: 350px;
	padding: 20px 0;
	border-radius: 11px;
}
.modaal-content-container{
    max-height: 80vh;
    overflow: scroll;
    padding: 0 !important;
}
.modaal-container [type="button"]{
    margin: 0;
}
.modaal-wrapper .modaal-close{
    width: 26px;
    height: 26px;
    background: #D9D9D9;
    border-radius: 50%;
    position: absolute !important;
    top: -10px !important;
    right: -5px !important;
}
.modaal-close:after,
.modaal-close:before{
    width: 2px !important;
    height: 12px !important;
	border-radius: 0;
    background: #696969 !important;
    top: 7px !important;
    left: 12px !important;
}
/**/
.privacyPop{
	width: 80%;
	margin: 0 auto;
}
.privacyPop h2{
	font-size: 26px;
	text-align: center;
	letter-spacing: 0;
	color: #AB880A;
	margin: 0 0 20px;
}
.privacyPop h3{
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 10px;
}
.privacyPop h3 + p{
	font-size: 12px;
	line-height: 2;
	margin: 0 0 30px;
}
.privacyPop li{
	margin: 0 0 20px;
}
.privacyPop li h4{
	font-size: 14px;
	font-weight: 400;
	margin: 0 0 10px;
}
.privacyPop li h4 + P{
	font-size: 12px;
	line-height: 2;
}
.privacyPop li + p{
	font-size: 12px;
	line-height: 1.8;
	padding: 0 0 20px;
}
@media screen and (max-width: 820px) {
}
/*==================================================================================================*/
/*-*/
@media screen and (max-width: 820px) {
}

@media screen and (min-width: 821px) {/** PCになったら****/
	.pcinner{
		max-width: 980px;
	margin: 0 auto;}
	
	footer .inner {
		max-width: 86%;
	}	
		#about p {
			width: 550px;
			margin: 0 auto 15px;
		}

		.about2_btn {
			width: 60%;
			margin: 0 auto 20px;
		}		

		#topics .inner {
			width: 30%;
		}		

	}
	
	.navList_pcbox{
		display: flex;
		justify-content: flex-start;
	}
	
	.navList_pcbox ul{
		width: 330px;
	}
	
	footer .navList {
		margin: 0 0 40px;
	}