@charset "utf-8";
/* -------（リセットCSS）-----------------------------------------------*/ 


*{ box-sizing: border-box;}

:root {
  --keyc1:#B19813;
  --keyc2:#fff;
  --font1:'Shippori Mincho', serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;font-family: var(--font1);font-weight: 400;font-size: 16px;line-height: 1.8em;color: #000;margin: 0;min-height:100%;overflow-x: hidden;background-color:#fff;/*
    -webkit-touch-callout:none; 
    -webkit-user-select:none; 	
	*/
}
body:before{
	content: "";display: block;position: fixed;height: 100lvh;width: 100%;background-image: url(../images/main_bg.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;z-index: -1;opacity: 1;}

.sp_only{display: none;}
.pc_only{display: initial;}

@media only screen and (max-width: 768px){
    
    .sp_only{display: initial;}
    .pc_only{display: none!important;}
}

html {overflow-y:scroll; height:100%;scroll-behavior: smooth;}
a {text-decoration: none;cursor: pointer;color:var(--keyc);;outline:none;transition: 0.2s ease;}
a:link { text-decoration: none;}
a:hover {opacity: .8; text-decoration: none;transition: 0.2s ease;}
a:active { text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)"; transition:0.3s;}
.sqex-footer-copy-logo{ padding: 10px 0;}
.sqex-footer-copyright{  line-height: 1.3em;}




/* =foot
-----------------------------------------------------------------------------------------*/
.contact_box{display: block;position: fixed;bottom: 0;right: 0;line-height: 0;z-index: 100;width: min(240px,18vw);}
.contact_box img{ width: 100%;}
.contact_box:hover img{opacity: 1;}




/* =video
------------------------------------------------------ */
/* #bgvid {
 position: fixed; bottom: -30vh; left:0; width: 100%; z-index: -1; mix-blend-mode: screen; opacity: 0.7; 
}
@media only screen and (max-width: 768px){
#bgvid { width: auto; height: 100%; bottom: 0;}
}

@media all and (-ms-high-contrast: none) {
#bgvid{ bottom: 0; opacity: 0.06;}
} */


/* =ページトップ
------------------------------------------------------------------------------------------*/

.page_top{text-align: right;margin: 0;text-align:center;position:fixed;right: 30px;bottom:30px;z-index:100;transition: 1s;}
.page_top a{display:block; width:11vw; line-height:0;}
.page_top a img{ width:100%;}
.page_top a:hover img{ opacity:0.9; }

.page_top.in{ bottom:-300px;}


@media only screen and (max-width: 639px){
.page_top{ right:4vw; bottom:4vw;}
.page_top a{ width:25vw;}

.page_top.in{ bottom:-40vw;}
}

/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


@media all and (-ms-high-contrast: none) {
.nav li a{ transition:inherit;}
}

/************* ANIMATIONS ***************/

.anime{ position:relative; overflow:hidden; opacity:0;}
.play.blkin.spring:before{ background-color: #e65087; }
.play.blkin.summer:before{ background-color: #fabe00; }
.play.blkin.autumn:before{ background-color: #f0824b; }
.play.blkin.winter:before{ background-color: #1eafe6; }
@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  10% { opacity: 1; animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

/* SLIDE BOX ANIMATION */
@keyframes play {
  from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut {
  from {transform: translateX(0); }  
  to {transform: translateX(101%); }
}

.play.blkin { animation-name: play; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative;}
.play.blkin:before { animation-name: maskOut; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #333;}

.play.fade_up {animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeInUp;visibility: visible !important;}

@-webkit-keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translateY(50px); } 
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.play.fade_in { animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeIn; visibility: visible !important;}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}


/*----------------------------------------
	header
------------------------------------------*/
@media only screen and (min-width: 767px) {
	#global_nav { position: fixed; top: 34px; left: 50%; z-index: 998; width: 100%; height: auto; padding: 5px 2% ; margin: 0 auto; transform: translateX(-50%); transition: 0.2s; border-bottom: 1px solid var(--keyc1);}

	#global_nav::before {
		position: absolute;display: block;content: "";bottom: 0;left: 0;width: 100%;height: 30px;transform: translateY(calc(100% + 6px));background: no-repeat center url(../images/header_bottom_item.svg); background-size: contain;}

	#global_nav::after { position: absolute;display: block;content: "";bottom: 0;left: 0;width: 100%;height: 2px;transform: translateY(7px);background-color: var(--keyc1);}
	#global_nav .nav_inner { position: relative; display: flex; justify-content: space-between; align-items: center; width: auto; height: auto;}
	#global_nav .nav_inner .header_logo {display: block; width: 100px; height: auto;}
	#global_nav .nav_inner .header_logo img {display: block; width: 100%; height: auto;}
	#global_nav .nav_inner .links, #global_nav .nav_inner .sns_links { display: flex; justify-content: center; width: auto; height: auto;}
	#global_nav .nav_inner .links li, #global_nav .nav_inner .sns_links li { display: block; width: auto; margin-bottom: 0px;}
	#global_nav .nav_inner .links li a, #global_nav .nav_inner .sns_links li a { display: block; width: auto; height: 35px; /* font-family: YakuHanJP, "Instrument Serif", "Noto Serif JP", "Noto Sans JP", "Noto Sans", "メイリオ", "Meiryo", "MS PGothic", sans-serif; */
	  color: var(--keyc1); font-weight: bold; font-size: clamp(15px , 1vw , 17px); line-height: 35px; white-space: nowrap; transition: 0.2s;}
	#global_nav .nav_inner .links li a img, #global_nav .nav_inner .sns_links li a img { display: block; width: auto; height: 100%;}
	#global_nav .nav_inner .links li a:hover, #global_nav .nav_inner .sns_links li a:hover { opacity: 0.7;}
	#global_nav .nav_inner .links { margin-right: 0px; flex-wrap: wrap;}
	#global_nav .nav_inner .links li {}
	#global_nav .nav_inner .links li a { padding: 0 clamp(18px , 2vw , 24px);}
	#global_nav .nav_inner .links li:last-of-type {}
	#global_nav .nav_inner .sns_links { min-width: 100px;}
	#global_nav .nav_inner .sns_links li a { padding: 0 5px;}
	#global_nav.nav_scroll_move_on { top: 0;background-color: rgba(254,251,236,0.95);}
  }
  @media only screen and (max-width: 767px) {
	#global_nav { position: fixed; z-index: 998; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: 0.3s;}
	#global_nav .nav_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: auto;}
	#global_nav .nav_inner .header_logo {display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; margin-bottom: calc(min(20px, 3vh)*2);}
	#global_nav .nav_inner .header_logo img {display: block; width: 100%; height: auto;}
	#global_nav .nav_inner .links li, #global_nav .nav_inner .sns_links li { display: block; width: auto; margin-bottom: min(20px, 3vh);}
	#global_nav .nav_inner .links li a, #global_nav .nav_inner .sns_links li a { display: block; width: auto; height: min(25px, 5vh); /* font-family: YakuHanJP, "Instrument Serif", "Noto Serif JP", "Noto Sans JP", "Noto Sans", "メイリオ", "Meiryo", "MS PGothic", sans-serif; */
	  color: var(--keyc1); font-weight: bold; font-size: 20px; line-height: 1em; text-align: left; transition: 0.2s;}
	#global_nav .nav_inner .links li a img, #global_nav .nav_inner .sns_links li a img { display: block; width: auto; height: 100%;}
	#global_nav .nav_inner .sns_links { display: flex; padding-top: 20px; border-top: 1px solid var(--keyc1);}
	#global_nav .nav_inner .sns_links li { margin-bottom: 0;}
	#global_nav .nav_inner .sns_links li a {
		height: min(40px, 6vh); margin-right: 15px;}
	#global_nav.active { opacity: 1; pointer-events: all;}
  }
  /* nav trigger
  -------------------------------*/
  .nav_trigger_outer {
	visibility: collapse;pointer-events: none;display: block;position: fixed;top: 34px;right: 0px;width: clamp(80px, 20vw, 140px);height: clamp(80px, 23vw, 140px);transform: translate(10%, -20%);cursor: pointer;border-radius: 9999px;z-index: 999;filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));transition: 0.2s;
  }
  .nav_trigger_outer .nav_trigger_bar {
	position: absolute;width: 50%;height: 33%;top: 50%;left: 50%;transform: translate(-50%, -50%);display: block;transition: 0.6s;
  }
  .nav_trigger_outer .nav_trigger_bar span {
	position: absolute;left: 50%;transform: translate(-50%, -50%) rotateZ(0deg);width: 100%;height: 2px;display: block;transition: 0.2s;background-color: var(--keyc1);
  }
  .nav_trigger_outer .nav_trigger_bar span:nth-last-of-type(1) {
	top: 25%;width: 100%;
  }
  .nav_trigger_outer .nav_trigger_bar span:nth-last-of-type(2) {
	top: 75%;width: 100%;
  }
  .nav_trigger_outer .nav_trigger_bar span:nth-last-of-type(3) {
	top: 50%;width: 100%;
  }
  .nav_trigger_outer.active .nav_trigger_bar span:nth-last-of-type(1) {
	transform: translate(-50%, -50%) rotateZ(-155deg);top: 50%;
  }
  .nav_trigger_outer.active .nav_trigger_bar span:nth-last-of-type(2) {
	transform: translate(-50%, -50%) rotateZ(155deg);top: 50%;
  }
  .nav_trigger_outer.active .nav_trigger_bar span:nth-last-of-type(3) {
	width: 0%;opacity: 0;
  }
  .nav_trigger_outer.nav_scroll_move_on {
	top: 0; 
  }
  
  @media only screen and (max-width: 767px) {
	.nav_trigger_outer { visibility: visible; pointer-events: auto;}
  }
  /*----------------------------------------
	  navigation
  ------------------------------------------*/