@charset "utf-8";

/*
@media screen and (max-width: 599px){} phone-only
@media screen and (min-width: 600px){} tablet-portrait-up
@media screen and (min-width: 900px){} tablet-landscape-up
@media screen and (min-width: 1200px){} desktop-up
@media screen and (min-width: 1800px){} big-desktop-up
*/

@font-face {
	font-family: number;
	src: local('Helvetica');
	unicode-range: U+0021-003F;
}

:root {
	--key-font-color:#604c3f;
	--key-font-link-color:#604c3f;
	--key-font-hover-color:#CAA846;
	--form-key-color:#ccc;
	--common-margin:100px;
}

/*
var(--key-******)
calc(var(--common-******) * 1.5)
*/

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }
@font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 100; }
@font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 200; }

*{ margin:0; 	padding:0; 	border:0; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html,body { height: 100%; }
html { font-size: 62.5%; }
body{ width:100%; font-family:number,'Josefin Sans',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size:10px; font-size:1.0rem; line-height:1.6; color: var(--key-font-color); background-color:#fff; position: relative; left: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "palt" 1, "trad" 0; }
.font-sansserif{ font-family: number,'Helvetica Neue',"游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", sans-serif; }

/*  */

h1,h2,h3,h4,h5,h6{
	font-weight: 400;
	text-transform:capitalize;
	margin: 0;
	padding: 0;
}

h1{font-size:2.4rem; line-height:2.4rem;}
h2{font-size:1.8rem; line-height:1.8rem;}
h3{font-size:1.4rem; line-height:1.4rem;}
h4{font-size:1.4rem; line-height:1.4rem;}
h5{font-size:1.2rem; line-height:1.2rem;}
h6{font-size:1.2rem; line-height:1.2rem;}

@media screen and (min-width: 768px){
	h1{font-size:3.6rem; line-height:3.6rem;}
	h2{font-size:3.0rem; line-height:3.0rem;}
	h3{font-size:2.4rem; line-height:2.4rem;}
	h4{font-size:1.8rem; line-height:1.8rem;}
	h5{font-size:1.4rem; line-height:1.4rem;}
	h6{font-size:1.2rem; line-height:1.2rem;}
}

/*  */

a{ outline:none; 	-webkit-transition: all 0.3s ease; 	-moz-transition: all 0.3s ease; 	-o-transition: all 0.3s ease; 	transition: all	0.3s ease; }

a:link{color: var(--key-font-link-color);}
a:visited{color: var(--key-font-link-color);}
a:hover{color: var(--key-font-hover-color);}
a:active{color: var(--key-font-hover-color);}

a:link,a:visited,a:active{text-decoration:none;}
a:hover, a:active { outline: 0; text-decoration: none; cursor: pointer;}
a:focus { outline:none; }
a img{border:none;text-decoration:none;}

a.fit { display: block; width: 100%; height: 100%; }

/* */

.img-responsive { width: 100%; max-width: 100%; height: auto;}
.img-responsive-overwrite { margin: 0 auto; }

figure { -webkit-margin-before: 0 !important; 	-webkit-margin-after: 0 !important; 	-webkit-margin-start: 0 !important; 	-webkit-margin-end: 0 !important; }

br.sp{ display: block; }
br.pc{ display: none; }
@media screen and (min-width: 900px){
	br.sp{ display: none; }
	br.pc{ display: block; }
}

/* */

body#home{
	padding-top: 70px;
}
body#archive .wrap{
	padding-top: 140px;
}
@media screen and (min-width: 900px){
	body#home{
		padding-top: 0;
	}
}


/*  */

#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	color:#555;
	margin-top: -70px;
}

@media screen and (min-width: 900px){
	#splash {
		margin-top: 0;
	}
}

#splash_logo {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}

#splash_logo img {
	width:120px;
}
@media screen and (min-width: 900px){
	#splash_logo img {
		width:200px;
	}
}

.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999;
	transform: translate(-50%, -50%);
	color: var(--key-font-link-color);
	width: 100%;
}

#splash_text svg{
	 height: 2px;
}

.loader_cover {
	 width: 100%;
	 height: 50%;
	 background-color: #FBFBF5;
	 transition: all 1.0s cubic-bezier(.04, .435, .315, .9);
	 transform: scaleY(1);
}

.loader_cover-up {
	 transform-origin: center top;
}

.loader_cover-down {
	 position: absolute;
	 bottom: 0;
	 transform-origin: center bottom;
}

.coveranime {
	 transform: scaleY(0);
}

/*  */

.splashbg{
	display: none;
}

body#archive.splashtransition.appear .splashbg{
	display: block;
	content: "";
	position:fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: scaleX(0);
	background-color: #EEE;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.0s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

#archive.splashtransition .wrap,
#archive.fadeall .wrap{
	opacity: 0;
}

body#archive.splashtransition.appear .wrap{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

body#archive.fadeall.appear .wrap{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*  */

.wrap{
	position: relative;
}

/*  */

header.childen{
	position: fixed;
	top:0;
	left:0;
	background-color: rgba(255, 255, 255, 0.9);
	width: 100%;
	height: 70px;
	line-height: 70px;
	transition: 0.5s;
	z-index: 2;
}

header.childen.is-animation{
	height: 50px;
	line-height: 50px;
	background-color: rgba(255, 255, 255, 0.5);
}

header.childen .header-nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header.childen .header-nav > * {
	flex: 1;
}
header.childen .header-nav .brand,
header.childen .header-nav nav,
header.childen .header-nav .button{
	flex: 1;
}
header.childen .header-nav .brand{
	
}
header.childen .header-nav .brand a{
	height: 70px;
	line-height: 70px;
	display: flex;
	align-items:center;
	margin-left: 15px;
}
@media screen and (min-width: 900px){
	header.childen .header-nav .brand a{
		justify-content: center;
		margin-left: 0;
	}
}
header.childen.is-animation .header-nav .brand a{
	height: 50px;
	line-height: 50px;
}
header.childen .header-nav .brand .brand-svg{
	width: 80px;
}
header.childen .header-nav{}
header.childen .header-nav nav{
	display: none;
}
header.childen .header-nav nav ul{
	text-indent: 0.5rem;
	letter-spacing: 0.5rem;
}
header.childen .header-nav nav ul li{
	display: inline-block;
}
header.childen .header-nav nav ul li:first-child{}
header.childen .header-nav nav ul li a{}
header.childen .header-nav .button-wrapper{
	display: flex;
	justify-content: flex-end;
	text-align: end;
	align-items: center;
}

header.childen .header-nav .button-wrapper .button{}

@media screen and (min-width: 900px){
	header.childen .header-nav nav{
		order: -1;
		display: block;
	}
	header.childen .header-nav .brand{
		text-align: center;
	}
}

/*  */

main{
	margin-bottom: calc(var(--common-margin)/2);
}

#main-visual{
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0 auto calc(var(--common-margin));
}
#video-area-sp{
	width: 100%;
	height: 100vw;
	position: relative;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
#video-area-file{
	width: 100%;
	height: 100vw;
	position: relative;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	background-color:  rgba(255,255,255,0.2);
}
#video-area video,
#video-area-sp video{
	vertical-align: top;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #000;
}
@media screen and (min-width: 900px){
	#main-visual{
		width: 100%;
		height: 100%;
		position: relative;
		margin: 0 auto calc(var(--common-margin) * 2);
	}
	#video-area,
	#video-area-sp{
		width: 100%;
		height: 100%;
		position: relative;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
	}
	#video-area-file{
		width: 100%;
		height: 100vh;
		position: relative;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		background-color:  rgba(255,255,255,0.2);
	}
}
#emergency{
	padding: 15px;
	text-align: center;
	background-color: #FBFBF5;
}

article{
	width: 90%;
	max-width: 980px;
	margin: 0 auto calc(var(--common-margin) * 2);
	padding: 0;
}

article h1,
article h1.home-title{
	margin: 0 0 calc(var(--common-margin) / 2);
	padding: 0;
	text-align: center;
	font-weight: 400;
}

@media screen and (min-width: 900px){
	article{
		width: 90%;
		max-width: 980px;
		margin: 0 auto calc(var(--common-margin) * 2);
		padding: 0;
	}
	article h1,
	article h1.home-title{
		margin: 0 0 calc(var(--common-margin) / 2);
	}
}

section{
	width: 100%;
	margin: 0 0 var(--common-margin);
	padding: 0;
}

.flex{
	width: 100%;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	margin: 0;
	padding: 0;
}

section.flex{
	margin: 0;
	padding: 0;
}

.flex > div{
	margin:0 0 calc(var(--common-margin) / 2);
}
.flex > div img{ vertical-align: bottom;}

@media screen and (min-width: 900px){
	.flex{
		flex-direction:row;
		justify-content:space-between;
	}
	.flex > div{
		margin:0 0 0 var(--common-margin);
	}
	.flex > div:first-child{
		margin-left:0;
	}
}

#home-news .flex{
	flex-direction:row;
	flex-wrap:wrap;
	align-items:flex-start;
	align-content:flex-start;
	justify-content:space-between;
	margin: 0;
	padding: 0;
}

#home-news .flex > div{
	align-self:flex-start;
}
@media screen and (max-width: 899px){
	#home-news .flex > div:first-child{
		flex:0 1 80%;
		width: 80%;
		margin-left:auto;
		margin-right:auto;
	}
}

#home-news .flex > div:nth-child(2),
#home-news .flex > div:nth-child(3){
	flex:0 1 48%;
}

@media screen and (min-width: 900px){
	#home-news .flex{
		flex-wrap:nowrap;
	}
}

#home-news figure{
	display: block;
}
#home-news .halfsize{
	width: 80%;
	margin: 0 auto;
}
#home-news p{
	font-weight: 700;
	padding:calc(var(--common-margin) / 10) 0;
}
#home-news h2{
	font-size: 1.6rem;
}

@media screen and (min-width: 900px){
	#home-news .flex > div:first-child{
		flex:0 1 30%;
	}
	#home-news .flex > div:nth-child(2),
	#home-news .flex > div:nth-child(3){
		flex:0 1 30%;
	}
	#home-news h2{
		font-size: 1.8rem;
	}
}

#home-concept{
	width: 100%;
	max-width: none;
}

#home-concept .flex > div{
	flex: 0 1 50%;
	margin: 0;
}

.concept-box{
	display:flex;
	justify-content:center;
	align-items:center;
}

.concept-box div{
	width: 96%;
	background-color: rgba(255, 255, 255, 0.9);
	margin:calc(var(--common-margin) * -1) 0 0 0; 
	padding: 2.5rem;
	font-size: 1.2rem;
}
@media screen and (min-width: 900px){
	.concept-box div{
		width: 65%;
		height: auto;
		margin:0 0 0 -100%;
	}
}

#home-menu{
	max-width: 640px;
}

#home-menu ul{
	margin:0 0 var(--common-margin); 
	padding: 0;
	flex-direction:column;
	flex-wrap:wrap;
}
#home-menu ul:last-child{
	margin:0;
}

#home-menu ul li{
	font-size: 1.8rem;
	margin: 0 0 calc(var(--common-margin) / 2);
	padding: 0;
	font-weight: 400;
	display: inline-block;
	position:	relative;
	text-indent: 2.4rem;
	list-style: none;
	flex: 0 1 100%;
}

#home-menu ul li::before {
	content:	'';
	width: 1.2rem;
	height: 1.2rem;
	display:	block;
	border-top: solid 1px;
	border-right: solid 1px;
	border-color: #555;
	transform: rotate(45deg);
	position:	absolute;
	top: 0.6rem;
	left:	0;
}

.menu-modal section{
	width:100%;
	margin: 0;
	padding: 0;
}

.menu-modal h1{
	text-align: center;
	margin: 0 0 calc(var(--common-margin) / 2);
	padding: 0;
}

.menu-modal h2{
	text-align: center;
	margin: 0 0 calc(var(--common-margin) / 4);
	padding: 0;
}
.menu-modal h3{
	color:#333;
	font-size: 1.4rem;
	text-align: center;
	margin: 0;
	padding: 0;
}

.menu-modal .price{
	text-align: center;
	margin: 0 0 calc(var(--common-margin) / 5);
	padding: 0;
	font-size: 1.2rem;
	color:#333;
}
.menu-modal .caption{
	text-align: center;
	margin: 0 0 calc(var(--common-margin) / 2);
	padding: 0;
	font-size: 1.2rem;
}
.menu-modal .caption:last-child{
	margin:0;
}

@media screen and (min-width: 900px){
	#home-menu ul{
		flex-direction:row;
	}
	#home-menu ul li{
		flex: 0 1 50%;
	}
	.menu-modal section{
		width:480px;
	}
}

#home-instagram{
	width: 100%;
	max-width:none;
	padding-bottom: 0;
	background:none;
}

#home-instagram section{
	width:90%;
	max-width: 980px;
	margin:0 auto;
}

/* #home-instagram .flex{
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;
}

#home-instagram .flex > div{
	flex:0 1 50%;
	margin:0;
	
} */

@media screen and (min-width: 900px){
	#home-instagram{
		padding-bottom: calc(var(--common-margin) * 2);
		background:linear-gradient(to bottom, #fff 50%, #FBFBF5 50%);
	}
	/* #home-instagram .flex{
		flex-direction:row;
		justify-content:flex-start;
	}
	#home-instagram .flex > div{
		flex:0 1 25%;
		margin:0;
	} */
}

.instagram-imgbox span{
	position: relative;
	display: block;
	overflow: hidden;
}
.instagram-imgbox span:before{
	content: "";
	display: block;
	padding-top: 100%;
}
.instagram-imgbox span>img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	transition-duration: 0.3s;
}

.instagram-imgbox span>img:hover{
	transform: scale(1.2);
	transition-duration: 0.3s;
}

#home-works{
	width: 90%;
	max-width: none;
}

#home-works .flex{
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;
}

#home-works .flex > div{
	flex:0 1 47%;
}

@media screen and (max-width: 899px){
	#two-column-list.flex{
		flex-wrap:wrap;
		flex-direction:row;
		justify-content:space-between;
	}
	#two-column-list.flex > div{
		flex:0 1 47%;
	}
}

#home-works figure{
	display: block;
}
#home-works p{
	padding: calc(var(--common-margin) / 5) 0;
}
#home-works h2{
	font-size: 1.4rem;
}

@media screen and (min-width: 900px){
	#home-works{
		width: 90%;
		margin:0 auto inherit;
	}
	#home-works .flex{
		flex-wrap:nowrap;
		flex-direction:row;
		justify-content:space-between;
	}
	#home-works .flex > div{
		flex:0 1 20%;
		margin:0 0 0 var(--common-margin);
	}
	#home-works .flex > div:first-child{
		margin-left:0;
	}
	#home-works .flex > div:nth-child(even){
		margin-left:var(--common-margin);
	}
}



#home-naoko{
	width:80%;
	max-width: 640px;
}

#home-naoko .flex > div:first-child{
	text-align: center;
}


@media screen and (max-width: 899px){
	.naokophoto{
		width:80%;
		margin:0 auto;
	}
}
#home-naoko h2{
	font-size: 1.4rem;
	margin:0 0 calc(var(--common-margin) / 5);
}

#home-naoko p{
	font-size: 1.2rem;
	margin:0 0 calc(var(--common-margin) / 5);
}

#home-naoko p:last-child{
	text-align: right;
}
#home-naoko .link-btn{
	margin:0 0 var(--common-margin);
}

#home-artist .flex{
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:flex-start;
}

#home-artist .flex > div{
	flex:0 1 47%;
	margin:0 0 calc(var(--common-margin) / 2) 6%;
}

#home-artist .flex > div:nth-child(odd){
	margin-left:0;
}

#home-artist .flex > div:last-child{
	margin-bottom:0;
}

#home-artist .flex > div p{
	text-align: center;
	padding: calc(var(--common-margin) / 5) 0 0;
}

@media screen and (min-width: 900px){
	#home-artist h1{
		margin: 0 0 calc(var(--common-margin) / 2);
	}
	#home-artist .flex > div{
		flex:0 1 24%;
		margin:0 0 var(--common-margin) 14%;
	}
	#home-artist .flex > div:nth-child(odd){
		margin:0 0 var(--common-margin) 14%;
	}
	#home-artist .flex > div:nth-child(1),
	#home-artist .flex > div:nth-child(4),
	#home-artist .flex > div:nth-child(7){
		margin-left:0;
	}
	
	#home-artist .flex > div:nth-child(7),
	#home-artist .flex > div:nth-child(8),
	#home-artist .flex > div:nth-child(9){
		margin-bottom:0;
	}
}

#home-salon{
	width: 100%;
	max-width: 100%;
	position: relative;
}

#home-salon .slider{
	margin: 0;
	padding: 0;
}

#home-salon .slick-next{
	right:10px;
	background:url("../img/arrow_n.png") 0 0 no-repeat;
}
#home-salon .slick-prev{
	left:10px;
	background:url("../img/arrow_p.png") 0 0 no-repeat;
}
#home-salon .slick-arrow{
	position: absolute;
	top:calc(50% - 20px);
	width: 40px;
	height: 40px;
	background-size: cover;
	z-index: 9999;
	text-indent: -10000px;
}
#home-salon .slick-arrow:hover,
#home-salon .slick-arrow:active,
#home-salon .slick-arrow:focus{
	border: none;
}
@media screen and (min-width: 900px){
	#home-salon .slick-arrow{
		top:calc(50% - 40px);
		width: 80px;
		height: 80px;
	}
}
#home-salon section{
	width: 90%;
	max-width: 640px;
	margin-left:auto;
	margin-right:auto;
}

#home-salon address{
	font-size: 1.4rem;
	font-style:normal;
	padding: calc(var(--common-margin) / 5) 0 calc(var(--common-margin) / 2);
}

@media screen and (min-width: 900px){
	#home-salon address{
		padding: var(--common-margin) 0;
	}
}

.link-btn{
	text-align: center;
}
.link-btn a{
	font-size: 1.3rem;
	line-height: 1.3rem;
	background-color: var(--key-font-color);
	color:#fff;
	padding:0.5rem 1.0rem;
	display: inline;
}

#home-subcontents{
	width:90%;
	max-width: 980px;
	text-align: center;
}

#home-shop,
#home-school{
	width: 100%; 
}

#home-shop section img,
#home-school section img{
	margin: 0 0 calc(var(--common-margin) / 5);
	padding: 0;
}

#home-shop p,
#home-school p{
	font-size: 1.2rem;
	padding: 0 0 calc(var(--common-margin) / 2);
}

@media screen and (min-width: 900px){
	#home-subcontents{
	}
	#home-shop,
	#home-school{
		width: 50%;
		margin: 0 auto;
	}
}

#home-contact{
	max-width: 640px;
	margin: 0 auto calc(var(--common-margin) / 2);
	padding: 0;
}

#home-contact .flex{
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:flex-start;
}

#home-contact .flex > div{
	flex:0 1 50%;
	background-color: #FBFBF5;
	margin: 0;
}

#home-contact .flex > div:nth-child(1),
#home-contact .flex > div:nth-child(2){
	border-bottom:solid 1px #fff;
}
#home-contact .flex > div:nth-child(even){
	border-left:solid 1px #fff;
}

#home-contact .flex > div a{
	text-align: center;
	padding: var(--common-margin) 0;
}

@media screen and (min-width: 900px){
	#home-contact{
		margin: 0 auto var(--common-margin);
	}
}

.archive-list{
	width: 90%;
	max-width: none;
}

.archive-list figure{
	display: block;
}
.archive-list p{
	padding: calc(var(--common-margin) / 5) 0;
}
.archive-list h2{
	font-size: 1.4rem;
}

@media screen and (min-width: 900px){
	.archive-list{
		width:calc( 100% + 50px);
		margin-left:-25px;
	}
	.archive-list .flex{
		flex-wrap:wrap;
	}
	.archive-list .flex > div{
		flex:0 1 20%;
		margin:0 0 var(--common-margin) 0;
		padding: 0 calc(var(--common-margin) / 2);
	}
	.archive-list .flex > div:first-child,
	.archive-list .flex > div:nth-child(6){
		margin-left:0;
	}
}

#archive-details{
	max-width: 640px;
}

#archive-details.w720{
	width: 80%;
}

@media screen and (min-width: 900px){
	#archive-details.w720{
		max-width: 720px;
	}
}

#archive-details img{
	margin-bottom: var(--common-margin);
}

#archive-details section{
	font-size: 1.2rem;
}

/*  */

#archive-details section h1,
#archive-details section h2,
#archive-details section h3,
#archive-details section h4,
#archive-details section h5,
#archive-details section h6{
	margin: 0 auto calc(var(--common-margin) / 2);
	padding: 0;
}

/*  */

aside{}

footer.childen{
	width: 100%;
	margin: 0 auto;
	padding: 0 0 calc(var(--common-margin) / 5);
	text-align: center;
}
footer.childen nav{
	margin-bottom: calc(var(--common-margin) / 5);
	padding: 0;
}
footer.childen nav ul{
	padding: 0;
	list-style: none;
}
footer.childen nav ul li{
	display: inline-block;
	text-indent: 0.5rem;
	letter-spacing: 0.5rem;
	height: 1.0rem;
	line-height: 1.0rem;
	margin: 0;
	padding: 0 0.5rem;
}
footer.childen nav ul li + li{
	border-left: 1px solid #ccc;
}

footer.childen small{
	text-indent: 0.5rem;
	letter-spacing: 0.5rem;
	display: block;
}

@media screen and (min-width: 900px){
	footer.childen nav{
		margin-bottom: calc(var(--common-margin) / 2);
	}
	footer.childen nav ul li{
		padding: 0 1.0rem;
	}
}


/*  */

	.header-search {
		display: flex;
		align-items: center;
		cursor: pointer;
		transition: all 0.3s ease 0.6s;
	}
	.header-search svg {
		cursor: pointer;
		margin: 0;
		width: 16px;
		height: 16px;
		display: block;
		color: var(--key-font-link-color);
		stroke-width: 2;
		transform: rotate(90deg);
		transition: all 0.3s ease 0.6s;
	}
	.header-search > div {
		position: relative;
		width: 0;
		transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15) 0.5s;
	}
	.header-search > div input {
		font-size: inherit;
		line-height: inherit;
		padding: 0;
		border: 0;
		display: block;
		outline: none;
		font-family: inherit;
		position: absolute;
		line-height: 20px;
		font-size: 16px;
		background: transparent;
		-webkit-appearance: none;
		top: 0;
		width: 100%;
		opacity: 0;
		z-index: 1;
		visibility: hidden;
		transition: all 0s ease 0s;
	}
	.header-search > div > div {
		white-space: nowrap;
		display: flex;
	}
	.header-search > div > div span {
		line-height: 20px;
		font-size: 16px;
		opacity: 0;
		display: block;
		visibility: hidden;
		transform: translate(0, 12px);
		transition: all 0.4s ease;
	}
	.header-search > div > div span:nth-child(1) {
		transition-delay: 0.4s;
	}
	.header-search > div > div span:nth-child(2) {
		transition-delay: 0.2s;
	}
	.header-search > div > div span:nth-child(3) {
		transition-delay: 0s;
	}
	.header-search.open {
		cursor: default;
		background-color: #fff;
		padding: 0.25rem;
		border-radius: 12px;
		transition-delay: 0s;
		box-shadow: 0 10px 36px -2px rgba(0, 0, 0, 0.18);
	}
	.header-search.open svg {
		opacity: 0.4;
		transform: rotate(0deg);
		transition-delay: 0s;
	}
	.header-search.open > div {
		transition-delay: 0s;
		width: 10.0rem;
	}
	.header-search.open > div > div span {
		opacity: 1;
		visibility: visible;
		transform: translate(0, 0);
	}
	.header-search.open > div > div span:nth-child(1) {
		transition-delay: 0.4s;
	}
	.header-search.open > div > div span:nth-child(2) {
		transition-delay: 0.45s;
	}
	.header-search.open > div > div span:nth-child(3) {
		transition-delay: 0.5s;
	}
	.header-search.open > div input {
		opacity: 1;
		visibility: visible;
		transition-delay: 0.75s;
		
	}
	
/*  */

.instagram-btn{
	padding:0 0 0 10px;
	text-align: center;
}
.instagram-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (min-width: 900px){
	.instagram-btn{
		padding:0 10px;
	}
}

/*  */

#openModal,
#openModal span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
#openModal {
	position: relative;
	width: 26px;
	height: 20px;
	margin: 0 15px;
	background: none;
	border: none;
	appearance: none;
	cursor: pointer;
}
#openModal span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--key-font-link-color);
	border-radius: 4px;
}
#openModal span:nth-of-type(1) {
	top: 0;
}
#openModal span:nth-of-type(2) {
	top:calc(50% - 1px);
}
#openModal span:nth-of-type(3) {
	bottom: 0;
}

#openModal.clicked span:nth-of-type(1) {
	width: 50%;
	transform: translate3d(2px, 4px, 0) rotate(45deg);
}
#openModal.clicked span:nth-of-type(2) {
	transform: translate3d(0, 0, 0) rotate(-45deg);
}
#openModal.clicked span:nth-of-type(3) {
	width: 50%;
	transform: translate3d(12px, -4px, 0) rotate(45deg);
}

@media screen and (min-width: 900px){
	#openModal {
		width: 36px;
		height: 20px;
		margin: 0 20px;
	}
	#openModal.clicked span:nth-of-type(1) {
		transform: translate3d(2px, 3px, 0) rotate(45deg);
	}
	#openModal.clicked span:nth-of-type(3) {
		transform: translate3d(14px, -3px, 0) rotate(45deg);
	}
	
}

/*  */

.modalArea {
	visibility: hidden;
	opacity : 0;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .4s;
}

.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
}

.modalWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 80%;
	max-width: 480px;
	padding: 3.0rem;
	background-color: #fff;
	overflow: auto;
	text-indent: 0.5rem;
	letter-spacing: 0.5rem;
}

.closeModal {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	cursor: pointer;
}

.is-show {
	visibility: visible;
	opacity : 1;
}

#modalArea h1{
	text-align: center;
	margin: 0 0 var(--common-margin);
	padding: 0;
}

#modalArea ul{
	margin: 0 0 var(--common-margin);
	padding: 0;
	text-align: center;
}
#modalArea ul li{
	margin: 0 0 calc(var(--common-margin) / 5);
	padding: 0;
	list-style: none;
}
#modalArea ul li a{}

#modalArea .instagram-btn{
	padding:0;
}
#modalArea .instagram-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (min-width: 900px){
	#modalArea .instagram-btn{
		padding:0;
	}
}

/*  */

.js-scroll {
	opacity: 0;
	-webkit-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}
 
.js-scroll.scrolled {
	opacity: 1;
}
 
.scrolled.fade-in {
	-webkit-animation: fade-in 1.5s ease-in-out both;
			animation: fade-in 1.5s ease-in-out both;
}
 
.scrolled.fade-in-bottom {
	-webkit-animation: fade-in-bottom 1s ease-in-out both;
			animation: fade-in-bottom 1s ease-in-out both;
}
 
.scrolled.slide-left {
	-webkit-animation: slide-in-left 1s ease-out both;
			animation: slide-in-left 1s ease-out both;
}
 
.scrolled.slide-right {
	-webkit-animation: slide-in-right 1s ease-out both;
			animation: slide-in-right 1s ease-out both;
}

@-webkit-keyframes slide-in-left {
	0% {
	-webkit-transform: translateX(-50px);
	transform: translateX(-50px);
	opacity: 0;
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	}
}

@keyframes slide-in-left {
	0% {
	-webkit-transform: translateX(-50px);
	transform: translateX(-50px);
	opacity: 0;
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	}
}
 
@-webkit-keyframes slide-in-right {
	0% {
	-webkit-transform: translateX(50px);
	transform: translateX(50px);
	opacity: 0;
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	}
}
 
@keyframes slide-in-right {
	0% {
	-webkit-transform: translateX(50px);
	transform: translateX(50px);
	opacity: 0;
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	}
}
 
@-webkit-keyframes fade-in-bottom {
	0% {
	-webkit-transform: translateY(25px);
	transform: translateY(25px);
	opacity: 0;
	}
	100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	}
}
 
@keyframes fade-in-bottom {
	0% {
	-webkit-transform: translateY(25px);
	transform: translateY(25px);
	opacity: 0;
	}
	100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	}
}
 
@-webkit-keyframes fade-in {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}
 
@keyframes fade-in {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}

/*  */

#naokopofile:after {
content: "";
display: block;
clear: both;
}

#naokopofile:before {
　　　　content: "";
display: block;
clear: both;
} 

#naokopofile {
display: block;
}

#naokopofile .naokopofile-img{
	float: none;
	width: 100%;
} 

#naokowarks-btn{
	text-align: center;
	margin: 0 0 calc(var(--common-margin) * 2);
}
#naokowarks-btn a{
	background-color:#604c3f;
	padding: 15px 10px;
	color: #fff;
}

@media screen and (min-width: 900px){
	#naokopofile .naokopofile-img{
		float: left;
		width: 40%;
		margin-right:var(--common-margin);
	}
	#naokopofile h2{
		clear: none;
	}
}

/*  */

.image-shadow{
	filter: drop-shadow(1px 1px 2px #ccc);
}

/*  */

#searchform:after {
	content: "";
	display: block;
	clear: both;
}

#searchform:before {
	content: "";
	display: block;
	clear: both;
} 

#searchform {
	display: block;
}

#searchform button{
	float: left;
}

/*  */

#taglist{
	max-width: 80%;
	margin: 0 auto;
	padding:0;
	text-align: center;
}

#taglist li{
	list-style: none;
	display: inline-block;
	font-size:13px;
	margin: 0 1.0rem 1.0rem 0;
	padding: 0 1.0rem 0 0;
}

#taglist li:not(:last-child){
	border-right:1px solid var(--key-font-color);
}

/*  */

.pagination{
	width: 90%;
	max-width: 980px;
	margin:0 auto;
	padding: calc(var(--common-margin)/2) 0;
}
.nav-links{
	width: 100%;
	margin: 0;
	padding: 0;
}
.pagination .nav-links ul{
	width: 100%;
	display: flex;
	margin: 0;
	padding: 0;
	justify-content:space-between;
}
.pagination .nav-links li{
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.pagination .nav-links li　a{}
.pagination .nav-links .prev{}
.pagination .nav-links .next{}
.pagination .nav-links .current{}
.pagination .nav-links .dots{}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}
/*  */

.prevnext{
	width: 90%;
	 max-width: 980px;
	 margin: 0 auto calc(var(--common-margin) * 2);
	 padding: 0;
	 display: flex;
	 justify-content:space-between;
}

.prevnext a{
	width: 100%;
	display: block;
}

.prevnext a + a{
	text-align: right;
}

/*  */

.wpcf7-form{
	width:100%;
	margin:var(--common-margin) auto;
	padding:5%;
	text-align: left;
}

.wpcf7-form button,
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea{
	font-family:inherit;
	font-size:100%;
	box-sizing: border-box;
	display: block;
}

.wpcf7-form label{
	width:100%;
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	margin-bottom:15px;
}

.wpcf7-form input[type="hidden"]{}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select{
	padding:10px;
	border: 1px solid #ccc;
	width: 100%;
	margin-bottom:15px;
	color: #000;
	background-color: #fff;
	border-radius: 4px;
}

.wpcf7-form input[type="text"]{}
.wpcf7-form input[type="email"]{}
.wpcf7-form input[type="date"]{}
.wpcf7-form input[type="tel"]{}

.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"],
.wpcf7-form label{ display: inline-block; }

.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"]{
	margin-right:10px;
}

.wpcf7-form label + input[type="radio"],
.wpcf7-form label + input[type="checkbox"]{
	margin-left:10px;
}

.wpcf7-form textarea{
	width: 100% !important;
	height: 10.0rem !important;
}

.select-wrap {
	position: relative;
}
.select-wrap::before {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	background: transparent;
	border-bottom: 3px solid #ccc;
	border-right: 3px solid #ccc;
	pointer-events: none;
}

.wpcf7-form select{
	outline:none;
	-moz-appearance: none;
	text-overflow: '';
	vertical-align: middle;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.wpcf7-form select::-ms-expand {
	display: none;
}

.wpcf7-form select:-moz-focusring { 
	color: transparent; 
}

.wpcf7-form input[type="submit"],
.wpcf7-form input[type="reset"]{
	display:inline-block;
	padding: 10px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: var(--form-key-color);
	border-radius: 4px;
	transition: all 0.5s;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="reset"]:hover{
	cursor: pointer;
}

.wpcf7-form input[type="submit"]{
	padding-left: 20px;
	padding-right: 20px;
	margin-right: 10px;
}

#policy{
	width: 100%;
	height: 100px;
	margin: 0;
	margin-bottom:15px;
	padding: 10px;
	color: #888;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow-y: scroll;
}

#policy h2{ 
	font-size: 10px;
	margin-bottom:10px;
	font-weight: 700;
}
#policy p{
	text-align: left !important;
	font-size: 10px;
	margin-bottom:10px;
}

#mfp_loading,
#mfp_loading_screen,
#mfp_overlay_background,
#mfp_overlay,
#mfp_hidden{
	display: none;
}

.mfp_err[style]{
	margin: 0 0 20px;
	padding: 10px;
	font-size: 10px;
	font-weight: 700;
	border-radius: 4px;
	background-color: var(--form-key-color);
	color:#fff;
}