@charset "UTF-8";
/* CSS Document */
html { width: 100%;height: 100%;margin: 0;	padding: 0;} 
body{width:100%;height: 100%;margin:0;padding:0; -webkit-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;}
body.open_navigation{	position: fixed;height: 100vh;}

.mincho{font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}
.fp{font-family: futura-pt, sans-serif;font-weight:300;font-style: normal;}
.clearfix:after{content: "";clear: both;display: block;}

:hover{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}

@media (min-width:1051px) {
	
	/*ヘッダー*/
	header{}
	
	header .wrapper{position: relative;z-index:1}
	
	header .wrapper h1{ position: fixed;top:50px;left:3%;width: 15%;min-width: 200px;max-width: 250px;margin: 0;padding: 0}
	header .wrapper h1 img{width: 100%}
	
	.button{display:none}
	
	header .wrapper #nav_menu .inner nav{position: fixed;top:50px;right:250px;width: 40%;min-width: 600px;display: flex;justify-content: flex-end;}
	header .wrapper #nav_menu .inner nav a{position: relative;display: block;margin: 0 10px;padding: 0;text-decoration: none;color: #605b51;font-size: 18px;letter-spacing: 3px;}

	header .wrapper #nav_menu .inner nav a::after {position: absolute;left: 0;content: '';width: 100%;height: 1px;background:linear-gradient(90deg, #ffb780, #be96ff);bottom: -10px;transform: scale(0, 1);transform-origin: left top;transition: transform 0.3s;}
	header .wrapper #nav_menu .inner nav a:hover::after {transform: scale(1, 1);}
	header .wrapper #nav_menu .inner nav a:hover{color:#e7c4bd}	
	
	
	header .wrapper #nav_menu .inner .contact_header{position: fixed;top:40px;right:30px;width: 200px}
	header .wrapper #nav_menu .inner .contact_header a{position:relative;display: block;margin: 0;padding:10px 0px;text-decoration: none;color: white;font-size: 18px;letter-spacing: 2px;font-weight: 600;background:linear-gradient(45deg, #e4bcff, #ffc8b1,#e4bcff, #ffc8b1);background-size: 300% 300%;animation:contact_header_bg 8s infinite alternate;text-align: center;border-radius: 40px;overflow: hidden; transition: color 1.3s ease;}
	@keyframes contact_header_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	header .wrapper #nav_menu .inner .contact_header a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #ffb780, #be96ff);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	header .wrapper #nav_menu .inner .contact_header a:hover::before {  height: 100%;  top:0%;}
	header .wrapper #nav_menu .inner .contact_header a span{ position:relative;}
	
	header .wrapper #nav_menu .inner .sp_logo{display: none}

	/*フッター*/

	footer .inner{position: relative;background:linear-gradient(90deg,#f1e8ff 0%,#fff1e7 100%);padding: 80px 0 50px 0;}
	footer .inner::before{content:'';position: absolute;top: 0%;left: 0%; width: 100%;height: 3px;background:linear-gradient(90deg,#cbe8ff 0%,#ffdedf 50%,#e2d2ff 100%);}
	
	footer .inner .logo{width: 15%;max-width: 200px;min-width: 150px;margin: 0 auto 20px auto}
	footer .inner .logo img{width: 100%;}
	
	footer .inner .menu_footer{display:flex;justify-content: center;margin: 0 auto 80px auto}
	footer .inner .menu_footer a{margin: 0 10px;text-decoration: none;color: #4d4d4d;font-size: 16px;letter-spacing: 2px;font-weight: 200}
	footer .inner .menu_footer a:hover{color:#e7c4bd}	
	
	footer .inner small{display: block;text-align: center;font-size: 12px;color: #5b5250;letter-spacing: 0px;font-weight: 200}
}

@media screen and (min-width:701px) and ( max-width:1050px)  {	
	header{}
	
	header .wrapper{}
	
	header .wrapper h1{ position: fixed;top:30px;left:3%;width:20%;min-width:180px;max-width: 230px;margin: 0;padding: 0;z-index: 1}
	header .wrapper h1 img{width: 100%}
	
	.button{display:block;	position: fixed;	right:5%;top:30px;width: 50px;height:50px;padding:0px;margin: 0;z-index: 2} 	
	.button span {display:block;position: absolute;	height:1px;	background:#605b51;right:0%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button span:nth-child(1) {	top:30%;width:100%;}
    .button span:nth-child(2) {	top:50%;width:80%;}
    .button span:nth-child(3) {	top:70%;width:60%;}    
	.button.open_navigation{z-index:999;}
	.button.open_navigation span{display:block;background:linear-gradient(90deg, #ffb780, #be96ff);}
    .button.open_navigation span:nth-child(1) {width:50%;top: 50%;left: 0%;	-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg);}
    .button.open_navigation span:nth-child(2) {width: 0;	left: 50%;	 	}
    .button.open_navigation span:nth-child(3) {	width:50%;top:50%;left: 0%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg);}
	
	/*ID名から直書き*/
	#nav_menu.open_navigation{	display: block;	animation-duration: 0.6s;	animation-name:button_open;z-index:1;}         
    @keyframes button_open{ from { opacity:0.1;}        to { opacity:1;}    }
	
	#nav_menu{display: none;width: 100%;height:100vh;position:fixed;	top:0px;left: 0;background: linear-gradient(90deg, rgba(225,170,255,0.7) 5%, rgba(255,192,131,0.7)95%);}
	
	#nav_menu .inner{position:fixed;	top:0px;left: 0;width:100%;height:75vh;margin:0 auto;padding:90px 0 0 0;box-sizing: border-box;background: linear-gradient(150deg, #ffdfe6 0%,  #ffffff 50%,#eceaff 90%);background-size: 300% 300%;animation:sp_bg 4s infinite alternate;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}
	@keyframes sp_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	
	#nav_menu .inner nav a{position: relative;display:block;width: 50%;margin: 0 auto 10px auto;padding: 30px 0px 20px 0; text-decoration:none;color:#605b51;font-size: 20px;letter-spacing:1px;font-weight:300;text-align: center}
	#nav_menu .inner nav a::after {position: absolute;left: 0;content: '';width: 100%;height: 1px;background:linear-gradient(90deg, #ffb780, #be96ff);bottom: -10px;transform: scale(0, 1);transform-origin: right top;transition: transform 0.6s;}
	#nav_menu .inner nav a:hover::after {transform: scale(1, 1);transform-origin:left top;}
	#nav_menu .inner nav a:hover{color:#e7c4bd}	
	
	header .wrapper #nav_menu .inner .contact_header{width: 50%;margin:50px auto 0 auto;padding:0px 0px; }
	
	header .wrapper #nav_menu .inner .contact_header a{position:relative;display:block;padding: 30px 0px; text-decoration:none;color:white;overflow: hidden;background:linear-gradient(45deg, #e4bcff, #ffc8b1,#e4bcff, #ffc8b1);background-size: 300% 300%;animation:contact_header_bg 8s infinite alternate;font-size: 16px;letter-spacing:1px;font-weight:600;text-align: center;border-radius: 50px;transition: color 1.3s ease;}
	@keyframes contact_header_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	header .wrapper #nav_menu .inner .contact_header a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #ffb780, #be96ff);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	header .wrapper #nav_menu .inner .contact_header a:hover::before {  height: 100%;  top:0%;}
	header .wrapper #nav_menu .inner .contact_header a span{ position:relative;}
	
	
	header .wrapper #nav_menu .inner .sp_logo{width: 25%;margin:80px auto 0 auto;padding:0px 0px; }
	header .wrapper #nav_menu .inner .sp_logo img{width: 100%}
	header .wrapper #nav_menu .inner .sp_logo a:hover{opacity:0.3;}
	
	/*フッター*/

	footer .inner{position: relative;background:linear-gradient(90deg,#f1e8ff 0%,#fff1e7 100%);padding: 80px 0 50px 0;}
	footer .inner::before{content:'';position: absolute;top: 0%;left: 0%; width: 100%;height: 3px;background:linear-gradient(90deg,#cbe8ff 0%,#ffdedf 50%,#e2d2ff 100%);}
	
	footer .inner .logo{width: 15%;max-width: 200px;min-width: 150px;margin: 0 auto 20px auto}
	footer .inner .logo img{width: 100%;}
	
	footer .inner .menu_footer{display:flex;justify-content: center;margin: 0 auto 80px auto}
	footer .inner .menu_footer a{margin: 0 10px;text-decoration: none;color: #4d4d4d;font-size: 16px;letter-spacing: 2px;font-weight: 200}
	footer .inner .menu_footer a:hover{color:#e7c4bd}	
	
	footer .inner small{display: block;text-align: center;font-size: 12px;color: #5b5250;letter-spacing: 0px;font-weight: 200}
}

@media (max-width: 700px) {
	header{}	
	header .wrapper{}	
	header .wrapper h1{ position: fixed;top:25px;left:5%;width:28%;min-width:150px;max-width: 280px;margin: 0;padding: 0;z-index: 2}
	header .wrapper h1 img{width: 100%}
	
	.button{display:block;	position: fixed;	right:5%;top:15px;width: 40px;height:40px;padding:0px;margin: 0;z-index: 2} 	
	.button span {display:block;position: absolute;	height:1px;	background:#605b51;right:0%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button span:nth-child(1) {	top:30%;width:100%;}
    .button span:nth-child(2) {	top:50%;width:80%;}
    .button span:nth-child(3) {	top:70%;width:60%;}    
	.button.open_navigation{z-index:999;}
	.button.open_navigation span{display:block;background:linear-gradient(90deg, #ffb780, #be96ff);}
    .button.open_navigation span:nth-child(1) {width:50%;top: 50%;right: 5%;	-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg);}
    .button.open_navigation span:nth-child(2) {width: 0;	left: 50%;	 	}
    .button.open_navigation span:nth-child(3) {	width:50%;top:50%;right: 5%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg);}
	
	/*ID名から直書き*/
	#nav_menu.open_navigation{	display: block;	animation-duration: 0.6s;	animation-name:button_open;z-index:2;}         
    @keyframes button_open{ from { opacity:0.1;}        to { opacity:1;}    }
	
	#nav_menu{display: none;width: 100%;height:100vh;position:fixed;	top:0px;left: 0;background: linear-gradient(90deg, rgba(225,170,255,0.7) 5%, rgba(255,192,131,0.7)95%);}
	
	#nav_menu .inner{position:fixed;	top:0px;left: 0;width:100%;height:75vh;margin:0 auto;padding:50px 0 0 0;box-sizing: border-box;background: linear-gradient(150deg, #ffdfe6 0%,  #ffffff 50%,#eceaff 90%);background-size: 300% 300%;animation:sp_bg 4s infinite alternate;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}
	@keyframes sp_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#nav_menu .inner nav a{position: relative;display:block;width:80%;margin: 0 auto 10px auto;padding: 20px 0px 10px 0; text-decoration:none;color:#605b51;font-size: 18px;letter-spacing:1px;font-weight:400;text-align: center}
	#nav_menu .inner nav a::after {position: absolute;left: 0;content: '';width: 100%;height: 1px;background:linear-gradient(90deg, #ffb780, #be96ff);bottom: -10px;transform: scale(0, 1);transform-origin: right top;transition: transform 0.3s;}
	#nav_menu .inner nav a:hover::after {transform: scale(1, 1);transform-origin:left top;}
	#nav_menu .inner nav a:hover{color:#e7c4bd}	
	
	header .wrapper #nav_menu .inner .contact_header{width: 80%;margin:30px auto 50px auto;padding:0px 0px; }	
	header .wrapper #nav_menu .inner .contact_header a{position:relative;display:block;padding: 20px 0px; text-decoration:none;color:white;overflow: hidden;background:linear-gradient(45deg, #e4bcff, #ffc8b1,#e4bcff, #ffc8b1);background-size: 300% 300%;animation:contact_header_bg 8s infinite alternate;font-size: 16px;letter-spacing:1px;font-weight:600;text-align: center;border-radius: 50px;transition: color 1.3s ease;}
	@keyframes contact_header_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	header .wrapper #nav_menu .inner .contact_header a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #ffb780, #be96ff);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	header .wrapper #nav_menu .inner .contact_header a:hover::before {  height: 100%;  top:0%;}
	header .wrapper #nav_menu .inner .contact_header a span{ position:relative;}
	
	header .wrapper #nav_menu .inner .sp_logo{width: 35%;margin:0px auto 0 auto;padding:0px 0px; }
	header .wrapper #nav_menu .inner .sp_logo img{width: 100%}
	header .wrapper #nav_menu .inner .sp_logo a:hover{opacity:0.3;}
	
	/*フッター*/
	footer .inner{position: relative;background:linear-gradient(90deg,#f1e8ff 0%,#fff1e7 100%);padding: 40px 0 20px 0;}
	footer .inner::before{content:'';position: absolute;top: 0%;left: 0%; width: 100%;height: 3px;background:linear-gradient(90deg,#cbe8ff 0%,#ffdedf 50%,#e2d2ff 100%);}
	
	footer .inner .logo{width: 15%;max-width: 200px;min-width: 150px;margin: 0 auto 0px auto}
	footer .inner .logo img{width: 100%;}
	
	footer .inner .menu_footer{width: 80%;margin: 0 auto 30px auto}
	footer .inner .menu_footer a{display: block;margin: 0 10px;padding: 14px 0;text-decoration: none;color: #4d4d4d;font-size: 14px;letter-spacing: 0px;font-weight: 200;border-bottom: 1px solid #e2d7d9}
	footer .inner .menu_footer a:hover{color:#e7c4bd}	
	
	footer .inner small{display: block;text-align: center;font-size: 10px;color: #5b5250;letter-spacing: 0px;font-weight: 200}
}