@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: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}
body.open_navigation{	position: fixed;height: 100vh;}

.gothic{font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;}
.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;height: 90px;z-index: 9999}	
	header #header_wrapper #logo_scroll{display: none; /* 初期状態では非表示 */
    position: fixed;top: 0px;left: 50px;z-index: 9999;transition: opacity 0.5s ease;width:80px;height:auto;}
	header #header_wrapper #logo_scroll img{width: 100%;}
	header #header_wrapper nav{width: 100%;position:fixed;	top:0px;left: 0;text-align: right;transition: 0.5s;}	
	.button{display:none}		
	header #header_wrapper nav #nav_menu .inner{padding-right: 50px;height: 90px;background-color: white}
	header #header_wrapper nav #nav_menu .inner a{display:  inline-block;padding: 60px 10px 0 10px; text-decoration:none;color: black;;font-size: 16px;letter-spacing:2px;}
	header #header_wrapper nav #nav_menu .inner a:hover{color:#ac8e84;}	
	header #header_wrapper nav #nav_menu .inner #nav_menu_logo{display:none;}
	/*スクロール時のヘッダー*/
	header.scroll-nav #header_wrapper nav {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);}		
	header.scroll-nav #header_wrapper #logo_scroll{display: block; /* スクロール時に表示 */opacity: 1;}
	header.scroll-nav #header_wrapper #logo_scroll a:hover{opacity:0.5;}
	/* 初期状態でスクロール後のロゴは非表示 */
    header #header_wrapper #logo_scroll {display: none;position: fixed;top: 8px;left: 50px;z-index: 9999;transition: opacity 0.5s ease;width: 180px;height: auto;}
    header #header_wrapper #logo_scroll img {width: 100%;}
    /* 初期状態でスクロール前のロゴは表示 */
    header #header_wrapper #logo_default {position: relative;top: 8px;left: 50px;z-index: 9999;width: 180px;}
    header #header_wrapper #logo_default img {width: 100%;}
    /* スクロール時のロゴ切り替え */
    header.scroll-nav #header_wrapper #logo_default {display: none; /* スクロール時にデフォルトロゴを非表示 */}
    header.scroll-nav #header_wrapper #logo_scroll {display: block; /* スクロール時に別のロゴを表示 */opacity: 1;}
    header.scroll-nav #header_wrapper nav {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);}
	
	
	/* footer */
	footer{margin: 0 auto;padding:0px 0 64px 0;background-color:#13202e;}
	footer #primary_area{position: relative;width:100%;height:382px;margin:  0px auto;}
	footer #primary_area::after { display:block; content:''; width:100%; height:0;padding-top:20%;}
	footer #primary_area .image_photo{position:absolute; bottom:0;width: 75%;height: 100%;left:0;}	
	footer #primary_area .image_photo img{width:100%;height: 100%;object-fit: cover;opacity: 0.3;}
	footer #primary_area #logo{position:absolute;top:45%;left:48%;transform: translateX(-50%); width: 180px;}
	footer #primary_area #logo img{width:100%;}
	footer #primary_area #logo a:hover{opacity: 0.5}
	footer #primary_area #catch_copy{position:absolute;top:22%;right:66%;writing-mode:vertical-rl;}
	footer #primary_area #catch_copy p{margin:0;padding: 0;color: white;font-size: 22px;letter-spacing: 2px;}
	footer #primary_area #catch_copy p:nth-of-type(2){padding:18px 16px 0 0;}
	footer #primary_area #catch_copy p:last-of-type{padding:56px 18px 0 0;}
	
	footer #secondary_area{width:80%;margin:24px auto 0 auto;font-size: 0;text-align: right}
	footer #secondary_area #pp{display:inline-block;margin-right: 20px}
	footer #secondary_area #pp a{display:block;color:#bdbdbd;font-size: 14px;letter-spacing: 1px;text-decoration: none}
	footer #secondary_area #pp a:hover{color:#faf4ed;}
	footer #secondary_area small{display:inline-block;color:#bdbdbd;font-size: 12px;letter-spacing: 1px;}
	
	/* Page-top */
	#page-top{display:block;position:fixed;right:0px;bottom:0px;z-index:9999;bottom:0;width:80px;height:60px;padding:20px 0px 0px 0px;color:#aea3a5;font-size:28px;letter-spacing:0;text-transform:uppercase;text-decoration: none;text-align: center;}
	#page-top:hover{color:white;background:rgba(174,163,165,0.5);}	
}


@media screen and (min-width:701px) and ( max-width:1050px)  {
	header #header_wrapper{position: relative;height: 90px;z-index: 9999}	
	header #header_wrapper #logo_scroll{  position: fixed;top:30px;left:3%;   width:90px;  transition: .5s;opacity: 0}
	header #header_wrapper #logo_scroll img{width: 100%;}
	header #header_wrapper nav{width: 100%;position:fixed;	top:0px;left: 0;text-align: right;transition: 0.5s;}
	header #header_wrapper #logo_default {position: relative;top: -16px;left: 20px;z-index: 9999;width: 180px;}
	header #header_wrapper #logo_default img {width: 100%;}
	
	/*navメニュー*/
	nav{width: 100%;position:fixed;	top:0px;left: 0;}	
	.button{display:block;	position: absolute;	right:0%;top:0px;width: 80px;height:80px;padding:0px 0 0 0px;margin: 0 0;text-align: center;letter-spacing: 1px;  background:#13202e;cursor:pointer;}
	
	.button span {display:block;position: absolute;	height:2px;border-radius: 2px;	background:white;right:25%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button span:nth-child(1) {	top:40%;width:50%;}
    .button span:nth-child(2) {	top:50%;width:50%;}
    .button span:nth-child(3) {	top:60%;width:50%;}    
	.button.open_navigation{z-index:9999;}
	.button.open_navigation span{display:block;	background:white;}
    .button.open_navigation span:nth-child(1) {width:30%;top: 50%;left: 35%;	-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:30%;top:50%;left: 35%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg);}
    #nav_menu.open_navigation{	display: block;	animation-duration: 0.6s;	animation-name:button_open;z-index:999;}         
    @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:#13202e;}
	#nav_menu .inner{position: fixed;top:80px;left:0%;width:100%;height:75vh;margin:0 auto;padding:0;list-style: none;background:#13202e;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}	
	#nav_menu .inner > a{position: relative;display: block;padding:30px 0%;text-decoration: none;color:white; font-size: 20px;letter-spacing: 1px;text-align: center}	
	#nav_menu .inner > a::after{   content:"";   display:inline-block;   width:100%;   height:1px;   background:white;   position:absolute;   bottom:0px;   left:50%;transform: translateX(-50%)}
	#nav_menu .inner > a:hover{color:#666666;} 	
	#nav_menu .inner #nav_menu_logo{width: 156px;margin:20px auto 0 auto;}
	#nav_menu .inner #nav_menu_logo img{width: 100%}
	#nav_menu .inner #nav_menu_logo a:hover{opacity:0.5;}
	/* ナビメニューが開いた時にデフォルトロゴを非表示 */
    header.nav-open #logo_default {display: none;}
    /* ナビメニューが開いた時にメニュー内のロゴを表示 */
    header.nav-open #nav_menu_logo {display: block;}
	
	/* footer */
	footer{background-color:#13202e;margin: 0 auto;padding:0px 0 40px 0}
	footer #primary_area{position: relative;width:100%;height:350px;margin:  0px auto;}
	footer #primary_area::after { display:block; content:''; width:100%; height:0;padding-top:20%;}
	footer #primary_area .image_photo{position:absolute; bottom:0;right:0%;width: 70%;height: 64%;}	
	footer #primary_area .image_photo img{width:100%;height: 100%;object-fit: cover}
	footer #primary_area #logo{position:absolute;top:25%;left:49%;transform: translateX(-50%); width: 186px;}
	footer #primary_area #logo img{width:100%;}
	footer #primary_area #logo a:hover{opacity: 0.5}
	footer #primary_area #catch_copy{position:absolute;bottom:15%;left:0%;text-align: center;width:100%;}
	footer #primary_area #catch_copy p{margin:0;padding: 0;color: white;font-size: 18px;letter-spacing: 3px;}
	footer #primary_area #catch_copy p:last-of-type{padding:0 0 0 0;}
	
	footer #secondary_area{width:80%;margin:50px auto 0 auto;font-size: 0;text-align: right}
	footer #secondary_area #pp{display:inline-block;margin-right: 20px}
	footer #secondary_area #pp a{display:block;color:#bdbdbd;font-size: 14px;letter-spacing: 1px;text-decoration: none}
	footer #secondary_area #pp a:hover{color:#494949;}
	footer #secondary_area small{display:inline-block;color:#bdbdbd;font-size: 12px;letter-spacing: 1px;}	
	
	/* Page-top */
	#page-top{display:block;position:fixed;right:0px;bottom:0px;z-index:9999;bottom:0;width:80px;height:60px;padding:20px 0px 0px 0px;color:#bdbdbd;font-size:28px;letter-spacing:0;text-transform:uppercase;text-decoration: none;text-align: center;}
	#page-top:hover{color:white;background:rgba(174,163,165,0.5);}
}


@media (max-width: 700px) {
	header #header_wrapper{position: relative;height: 90px;z-index: 9999}	
	header #header_wrapper #logo_scroll{  position: fixed;top:30px;left:3%;   width:90px;  transition: .5s;opacity: 0}
	header #header_wrapper #logo_scroll img{width: 100%;}
	header #header_wrapper #logo_default {position: relative;top: -12px;left: 8px;z-index: 9999;width: 155px;}
	header #header_wrapper #logo_default img {width: 100%;}
	
	
	/*navメニュー*/
	nav{width: 100%;position:fixed;	top:0px;left: 0;transition: 0.5s;}	
	.button{display:block;	position:fixed;	right:0%;top:0px;width: 80px;height:80px;padding:0px 0 0 0px;margin: 0 0;text-align: center;letter-spacing: 1px;  background:#13202e;cursor:pointer;} 	
	.button span {display:block;position: absolute;	height:2px;border-radius: 2px;	background:white;right:25%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button span:nth-child(1) {	top:40%;width:50%;}
    .button span:nth-child(2) {	top:50%;width:50%;}
    .button span:nth-child(3) {	top:60%;width:50%;}    
	.button.open_navigation{z-index:9999;}
	.button.open_navigation span{display:block;	background:white;}
    .button.open_navigation span:nth-child(1) {width:30%;top: 50%;left: 35%;	-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:30%;top:50%;left: 35%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg);}
    #nav_menu.open_navigation{	display: block;	animation-duration: 0.6s;	animation-name:button_open;z-index:999;}         
    @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:#13202e;}
	#nav_menu .inner{position: fixed;top:80px;left:0%;width:100%;height:75vh;margin:0 auto;padding:0;list-style: none;background:#13202e;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}	
	#nav_menu .inner > a{position: relative;display: block;padding:16px 0%;text-decoration: none;color:white; font-size:16px;letter-spacing: 1px;text-align: center}	
	#nav_menu .inner > a::after{   content:"";   display:inline-block;   width:100%;   height:1px;   background:white;   position:absolute;   bottom:0px;   left:50%;transform: translateX(-50%)}
	#nav_menu .inner > a:hover{color:#666666;} 	
	#nav_menu .inner #nav_menu_logo{width:25%;max-width: 180px;margin:20px auto 0 auto;}
	#nav_menu .inner #nav_menu_logo img{width: 100%}
	#nav_menu .inner #nav_menu_logo a:hover{opacity:0.5;}
	header.nav-open #logo_default {display: none;}
	
	footer{margin: 0 auto;padding:0px 0 30px 0;background-color:#13202e;}
	
	footer #primary_area{position: relative;width:100%;min-height:275px;margin:  0px auto;}
	footer #primary_area::after { display:block; content:''; width:100%; height:0;padding-top:35%;}
	footer #primary_area .image_photo{position:absolute; bottom:0;right:0%;width:90%;height: 64%;}	
	footer #primary_area .image_photo img{width:100%;height: 100%;object-fit: cover}
	footer #primary_area #logo{position:absolute;top:20%;left:49%;transform: translateX(-50%); max-width: 180px; width:35%;}
	footer #primary_area #logo img{width:100%;}
	footer #primary_area #logo a:hover{opacity: 0.5}
	footer #primary_area #catch_copy{position:absolute;bottom:15%;left:0%;text-align: center;width: 100%}
	footer #primary_area #catch_copy p{margin:0;padding: 0;color: white;font-size: 15px;letter-spacing: 1px;}
	
	footer #secondary_area{width:80%;margin:24px auto 0 auto;font-size: 0;text-align:center}	
	footer #secondary_area #pp a{display:block;color:#bdbdbd;font-size: 14px;letter-spacing: 1px;text-decoration: none}
	footer #secondary_area #pp a:hover{color:#494949;}
	footer #secondary_area small{display:block;color:#bdbdbd;font-size: 10px;letter-spacing:1px;margin: 10px auto 0 auto}		
	
	#page-top{display:block;position:fixed;right:0px;bottom:0px;z-index:9999;bottom:0;width:80px;height:60px;padding:20px 0px 0px 0px;color:#bdbdbd;font-size:28px;letter-spacing:0;text-transform:uppercase;text-decoration: none;text-align: center;}
	#page-top:hover{color:white;background:rgba(174,163,165,0.5);}
}