@charset "utf-8";

/*===============================================*/

/*  common.css */

/*===============================================*/



/*//////////////////////////////////

reset
///////////////////////////////////*/

/* Fonts
---------------------------------------------------------------------*/
/*localfont  -------------------------
@font-face {font-family: ftB; src: url('../fonts/unicode.futurab.ttf');}
@font-face {font-family: ftH; src: url('../fonts/Futura Heavy font.ttf');}
@font-face {font-family: ftM; src: url('../fonts/futura medium bt.ttf');}*/


/*iconfont  -------------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?1nmhqm');
  src:  url('../fonts/icomoon.eot?1nmhqm#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?1nmhqm') format('truetype'),
    url('../fonts/icomoon.woff?1nmhqm') format('woff'),
    url('../fonts/icomoon.svg?1nmhqm#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow_right_alt:before {
  content: "\e910";
}
.icon-tiktok:before {
  content: "\e90e";
}
.icon-x:before {
  content: "\e90c";
}
.icon-back:before {
  content: "\e90a";
}
.icon-hide:before {
  content: "\e90b";
}
.icon-content-copy:before {
  content: "\e905";
}
.icon-view:before {
  content: "\e90d";
}
.icon-link:before {
  content: "\e901";
}
.icon-line:before {
  content: "\e009";
}
.icon-search:before {
  content: "\e902";
}
.icon-mail:before {
  content: "\e903";
}
.icon-mail2:before {
  content: "\e904";
}
.icon-tel:before {
  content: "\e907";
}
.icon-home:before {
  content: "\e908";
}
.icon-youtube:before {
  content: "\e909";
}
.icon-mobile:before {
  content: "\e958";
}
.icon-heart1:before {
  content: "\e9db";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-pdf:before {
  content: "\e906";
}
.icon-question:before {
  content: "\e90f";
}
.icon-search1:before {
  content: "\e900";
}
.icon-printer:before {
  content: "\e954";
}
.icon-mobile2:before {
  content: "\e959";
}
.icon-file-word:before {
  content: "\eae1";
}
.icon-file-excel:before {
  content: "\eae2";
}

.icon-mail:before {
	content: "\e903";
	font-size: 1.6rem;
	position: relative;
	top:3px;
	margin-right:5px;}

/*
.icon-Check:before {padding-right:8px; content:url("../images/common/icon_check.png"); position: relative; top: 5px;}
.voice_ten1:before {content:url("../images/common/voice_ten1.png"); position: absolute; top: -15px; left:-15px; z-index: 0; width: 36px; height: 30px;}
.voice_ten2:after {content:url("../images/common/voice_ten2.png"); position: absolute; bottom: -5px; right:-15px; z-index: 0; width: 36px; height: 30px;}*/



/*site main rules
---------------------------------------------------------------------*/

/*color  ------------------*/

:root {
	--clr-main: #161616;	
	--clr-sub:#FFE400;
	--clr-yel:#FFE400;
	--clr-lightyel: #FFFDEA;
	--clr-wh: #fff;
	--clr-gry: #DEDBC5;
}


.bgc-wh{background-color: #fff!important;}
.bgc-lightyel{background-color: #FFFDEA!important;}
.bgc-gly{background-color: #DEDBC5!important;}


.wid100{width: 100vw; margin: 0 calc(50% - 50vw)!important;}


/*テキストのハイライトカラーを変える  ------------------*/
::selection{ /* Safari and Opera */background:#FFFDEA; color:#161616;}
::-moz-selection{ /* Firefox */background:#FFFDEA; color:#161616 ;}

/*link  ------------------*/
a:link {color: #161616;text-decoration: none;}
a:visited {color: #161616;text-decoration: none;}
a:hover {color: #161616;text-decoration: none;}
a:active {text-decoration: none;}


/* reset
---------------------------------------------------------------------*/
html{font-size: 62.5%;}
body{
	margin: 0;
	padding: 0;
	height: 100%;
	font-size:1.6rem; /* 16px*/
	line-height: 1.8;
	color: #161616;background-color: #FFE400;
	font-family: "Zen Maru Gothic", sans-serif,Meiryo,sans-serif;
	font-style: normal;
	font-weight: 500;
	-webkit-text-size-adjust: none;}



/*responsive FONTS ------------------*/

.tx-80 {
    font-size: clamp(3rem,5vw,8rem);
	line-height: 1.2;
	font-weight:900;
	letter-spacing: 0.000001em;}

.tx-64 {
    font-size: clamp(3rem,4.5vw,6.4rem);
	line-height: 1.4;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-60 {
    font-size: clamp(3rem,4.5vw,6rem);
	line-height: 1.4;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-54 {
    font-size: clamp(3rem,3.4vw,5.4rem);
	line-height: 1;
	font-weight:700;
	letter-spacing: 0.1em;
	font-feature-settings : "palt"; }

.tx-48 {
    font-size: clamp(2.4rem,3.4vw,4.8rem);
	line-height: 1.6;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-44 {
    font-size: clamp(2rem,3vw,4.4rem);
	line-height: 1.6;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-40 {
    font-size: clamp(2.6rem,3vw,4rem);
	line-height: 1.6;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-36 {
    font-size: clamp(2.4rem,2.6vw,3.6rem);
	line-height: 1.5;
	font-weight:500;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-32 {
	font-size: clamp(2rem,2.2vw,3.2rem);
	line-height: 1.5;
	font-weight:500;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-26 {
    font-size: clamp(2rem,2.6vw,2.6rem);
	line-height: 1.5;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-24 {
    font-size: clamp(1.6rem,1.5vw,2.4rem);
	line-height: 1.5;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-22 {
	font-size: clamp(1.6rem,1.5vw,2.2rem);
	line-height: 1.8;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-20 {
    font-size: clamp(1.6rem,1.7vw,2rem);
	line-height: 1.8;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-18 {
    font-size: clamp(1.6rem,1.7vw,1.8rem);
	line-height: 1.8;
	font-weight:400;
	letter-spacing: 0.05em;
	font-feature-settings : "palt"; }

.tx-16 {
    font-size: clamp(1.4rem,1.5vw,1.6rem);
	line-height: 1.8;
	font-weight:400;
	letter-spacing: 0.08em;
	font-feature-settings : "palt"; }

.tx-14 {
    font-size: 1.4rem;
	line-height: 1.5;
	font-weight:400;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-12 {
    font-size: 1.2rem;
	line-height: 1.5;
	font-weight:500;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-10 {
    font-size: 1rem;
	line-height: 1.5;
	font-weight:700;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

/**/
.mgn-top48{margin-top: 48px!important;}
.mgn-top40{margin-top: 40px!important;}
.mgn-top32{margin-top: 32px!important;}
.mgn-top24{margin-top: 24px!important;}
.mgn-top20{margin-top: 20px!important;}
.mgn-top16{margin-top: 16px!important;}
.mgn-top10{margin-top: 10px!important;}
.mgn-top8{margin-top: 8px!important;}
.mgn-top4{margin-top: 4px!important;}

.mgn-btm48{margin-bottom: 48px!important;}
.mgn-btm40{margin-bottom: 40px!important;}
.mgn-btm32{margin-bottom: 32px!important;}
.mgn-btm24{margin-bottom: 24px!important;}
.mgn-btm20{margin-bottom: 20px!important;}
.mgn-btm16{margin-bottom: 16px!important;}
.mgn-btm10{margin-bottom: 10px!important;}
.mgn-btm8{margin-bottom: 8px!important;}
.mgn-btm4{margin-bottom: 4px!important;}

@media screen and (max-width: 768px) {
.mgn-top48{margin-top: 24px!important;}
.mgn-top40{margin-top: 20px!important;}
.mgn-top32{margin-top: 16px!important;}
.mgn-top24{margin-top: 12px!important;}
.mgn-top20{margin-top: 10px!important;}
.mgn-top16{margin-top: 16px!important;}
.mgn-top10{margin-top: 10px!important;}
.mgn-top8{margin-top: 8px!important;}
.mgn-top4{margin-top: 4px!important;}

.mgn-btm48{margin-bottom: 48px!important;}
.mgn-btm40{margin-bottom: 40px!important;}
.mgn-btm32{margin-bottom: 32px!important;}
.mgn-btm24{margin-bottom: 24px!important;}
.mgn-btm20{margin-bottom: 20px!important;}
.mgn-btm16{margin-bottom: 16px!important;}
.mgn-btm10{margin-bottom: 10px!important;}
.mgn-btm8{margin-bottom: 8px!important;}
.mgn-btm4{margin-bottom: 4px!important;}
}




h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3; }

h2 {
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;}

@media (min-width: 1200px) {
    h1 {font-size: 3.6rem;/* 36px*/}
    h2 {font-size: 2.4rem;/* 24px*/} }

@media screen and (max-width: 768px) {
    body{line-height: 2;}
    h1{font-size: 2.4rem;/* 24px*/}
    h2 {font-size: 2rem;/* 20px*/} }

html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0; }

h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
	font-style: normal;
	font-weight: normal;
	font-size: 1.6rem;
	text-align: left;
	list-style-type: none; }


/* Layout
 * *********************************** */
article,
aside,
footer,
header,
nav,
section,
main {display: block;}
 
* {box-sizing: border-box;}
 
*:before,
*:after {box-sizing: inherit;}

/* テキストエリア内文字サイズのブラウザ間での差異をなくす */
textarea { font-size: 100%; }

/* 画像の下にできる隙間をなくす */
img {border:0;vertical-align: bottom;}
img {max-width: 100%; height: auto; width /***/:auto;}

/* hr 要素は不可視で使う */
hr { display: none; }

/* br 要素のレスポンシブ化 */
/* none */
@media screen and (max-width: 768px){.pc-Only{ display: none; }}
@media screen and (min-width: 768px){.sp-Only{ display: none; }}

/* テキストインデント */
.txtindent{padding-left:1em; text-indent:-1em;}


/*float
----------------------------------*/
.left{float:left;}
.right{float:right;}
#left{float:left;}
#right{float:right;}


/*txt-align
----------------------------------*/
.txt-al{text-align: left;}
.txt-ar{text-align: right;}

@media screen and (max-width: 768px){
.txt-ar{text-align: left}
}


/*underLine*/

.underLine-Wh:before { 
    content:""; 
    width:min(400px,80vw); 
    height: min(20px,1vw); 
    background-color: #fff;
    border-radius: 50px;
    
    z-index: -1;
    position:absolute;
    top:55%;
    left:50%;
    transform: translate(-50%,-50%);}

.underLine-yel:before{ 
    content:""; 
    width:min(400px,80vw); 
    height: min(20px,2vw); 
    background-color: #FFE400;
    border-radius: 50px;
    
    z-index: -1;
    position:absolute;
    top:55%;
    left:50%;
    transform: translate(-50%,-50%);}






/*//////////////////////////////////

module
///////////////////////////////////*/


/*background color
---------------------------*/

.bg-Mv{
	background: url("../images/top/bg_mv.svg") no-repeat center bottom; 
	background-size: cover; }


.bg-tex1{
	background: #c4dbdf url("../images/common/bg_texture1.png") repeat-x center top; 
	 mix-blend-mode: multiply;}

.bg-intro{
	background: #fff url("../images/top/intro_bg.png") no-repeat center top; }


.bg-About{
	background: url("../images/common/bg_about.png") fixed no-repeat center bottom; 
	background-size: cover; }



@media screen and (max-width: 768px){
.bg-intro{
	background: #fff url("../images/top/intro_bg-sp.png") no-repeat center -50px; }
}




/*inner
---------------------------*/
.inner{
	position: relative;
	margin:0 auto ;
	padding:14rem 2rem;
	max-width: 1400px; }

.inner-top{
	position: relative;
	margin:0 auto ;
	padding:14rem 2rem;
	max-width: 1400px; }

.inner-apply{
	position: relative;
	margin:0 auto ;
	padding:8rem 2rem;
	max-width: 1400px; }

.inner-960{
	position: relative;
	margin:0 auto ;
	padding:8rem 2rem;
	max-width: 1000px; }

.inner-Full{
	position: relative;
	margin:0 auto ;
	padding:8rem 0;
	width: 100%; }




@media screen and (max-width: 959px){
.inner{margin:0 auto ; padding:4rem 1.6rem; }
.inner-top{margin:0 auto ; padding:4rem 1.6rem 8rem; }
.inner-apply{padding:4rem 1.6rem; }
.inner-960{margin:0 auto ; padding:4rem 1.6rem;}
.inner-Full{margin:0 auto ; padding:4rem 0;}
}



/*flex-box
---------------------------*/
.flex-Sb{display: flex; flex-wrap: wrap; justify-content: space-between; }
.flex-St{display: flex; flex-wrap: wrap; justify-content:flex-start; }
.flex-Nomal{display: flex; flex-wrap: wrap;justify-content:center; }
.flex--reverse{flex-direction: row-reverse;}

@media screen and (max-width: 768px){
.flex--reverse{flex-direction: row;}
}


/*mouse storker
---------------------------*/
.splide__slide a {cursor: none;}

.vv:before { 
	content:" "; 
	display: block;
	width: 0px;
	height: 0px;
	background: url(images/hoge.gif) no-repeat ;
	background-size: contain;
	
	position: absolute; 
	top: 50%; 
	left:0;
	transform: translate(0,-50%) }

#js-cursor{
    pointer-events: none;
    position: fixed;
	text-align: center;
	padding:33px 0;
    top: -50px; 
    left: -50px;
    width: 90px;
    height: 90px;
    background-color:rgba(255,255,255,1);
    border-radius: 50%;
    transform: translate(0,0);
    transition: width 0.3s ease-out,height 0.3s ease-out;
    z-index: 10000;
    opacity: 0;
}

#js-mouse{
    pointer-events: none;
    position: fixed;
    top: -60px; 
    left: -60px;
    width: 110px;
    height: 110px;
    background-color:rgba(155,191,69,1);
    border-radius: 50%;
    transform: translate(0,0);
    transition: all 0.2s ease-out;
    z-index: 9999;
    opacity: 0;
}

#js-cursor.js-hover {
    width: 100px;
    height: 100px;
}
#js-mouse.js-hover {
    width: 120px;
    height: 120px;
}



/*//////////////////////////////////

 animation
///////////////////////////////////*/


/*要素出現
---------------------------------*/

/* ------ animation style ------ */

/* fade fadeInDown */
@keyframes u-fadeInDown {
	0% {transform: translate(0, -20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInDown span {
	opacity: 0;}

.u-fadeInDown.is-active span {
	opacity: 1;
    animation: u-fadeInDown 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInDown span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInDown span:nth-child(2) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInDown span:nth-child(3) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInDown span:nth-child(4) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInDown span:nth-child(5) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInDown span:nth-child(6) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInDown span:nth-child(7) {animation-delay: 0.7s;display:inline-block;}
.u-fadeInDown span:nth-child(8) {animation-delay: 0.8s;display:inline-block;}
.u-fadeInDown span:nth-child(9) {animation-delay: 0.9s;display:inline-block;}
.u-fadeInDown span:nth-child(10) {animation-delay: 1s;display:inline-block;}
.u-fadeInDown span:nth-child(11) {animation-delay: 1.1s;display:inline-block;}
.u-fadeInDown span:nth-child(12) {animation-delay: 1.2s;display:inline-block;}
.u-fadeInDown span:nth-child(13) {animation-delay: 1.3s;display:inline-block;}


/* fade up  ---------------*/
@keyframes u-fadeInUp {
	0% {transform: translate(0, 20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInUp span {
	opacity: 0;}

.u-fadeInUp.is-active span {
	opacity: 1;
    animation: u-fadeInUp 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInUp span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInUp span:nth-child(2) {animation-delay: 0.15s;display:inline-block;}
.u-fadeInUp span:nth-child(3) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInUp span:nth-child(4) {animation-delay: 0.25s;display:inline-block;}
.u-fadeInUp span:nth-child(5) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInUp span:nth-child(6) {animation-delay: 0.35s;display:inline-block;}
.u-fadeInUp span:nth-child(7) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInUp span:nth-child(8) {animation-delay: 0.45s;display:inline-block;}
.u-fadeInUp span:nth-child(9) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInUp span:nth-child(10) {animation-delay: 0.55s;display:inline-block;}
.u-fadeInUp span:nth-child(11) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInUp span:nth-child(12) {animation-delay: 0.65s;display:inline-block;}
.u-fadeInUp span:nth-child(13) {animation-delay: 0.7s;display:inline-block;}


/* fade left  ---------------*/
@keyframes u-fadeInLeft {
	0% {transform: translate(-20px, 0) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInLeft span {
	opacity: 0;}

.u-fadeInLeft.is-active span {
	opacity: 1;
    animation: u-fadeInLeft 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInLeft span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInLeft span:nth-child(2) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInLeft span:nth-child(3) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInLeft span:nth-child(4) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInLeft span:nth-child(5) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInLeft span:nth-child(6) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInLeft span:nth-child(7) {animation-delay: 0.7s;display:inline-block;}
.u-fadeInLeft span:nth-child(8) {animation-delay: 0.8s;display:inline-block;}
.u-fadeInLeft span:nth-child(9) {animation-delay: 0.9s;display:inline-block;}
.u-fadeInLeft span:nth-child(10) {animation-delay: 1s;display:inline-block;}
.u-fadeInLeft span:nth-child(11) {animation-delay: 1.1s;display:inline-block;}
.u-fadeInLeft span:nth-child(12) {animation-delay: 1.2s;display:inline-block;}
.u-fadeInLeft span:nth-child(13) {animation-delay: 1.3s;display:inline-block;}


/* fade right  ---------------*/
@keyframes u-fadeInRight {
	0% {transform: translate(20px, 0) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInRight span {
	opacity: 0;}

.u-fadeInRight.is-active span {
	opacity: 1;
    animation: u-fadeInRight 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInRight span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInRight span:nth-child(2) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInRight span:nth-child(3) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInRight span:nth-child(4) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInRight span:nth-child(5) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInRight span:nth-child(6) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInRight span:nth-child(7) {animation-delay: 0.7s;display:inline-block;}
.u-fadeInRight span:nth-child(8) {animation-delay: 0.8s;display:inline-block;}
.u-fadeInRight span:nth-child(9) {animation-delay: 0.9s;display:inline-block;}
.u-fadeInRight span:nth-child(10) {animation-delay: 1s;display:inline-block;}
.u-fadeInRight span:nth-child(11) {animation-delay: 1.1s;display:inline-block;}
.u-fadeInRight span:nth-child(12) {animation-delay: 1.2s;display:inline-block;}
.u-fadeInRight span:nth-child(13) {animation-delay: 1.3s;display:inline-block;}




/* カーテン背景色  ---------------*/
@keyframes u-bgL {
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);}
}

.u-bgL{
    position: relative;
	z-index: 2; }

.u-bgL::after{
    content: '';
    display: block;
    width: 100%;
	height: 100%;
	
    background-color: $clr-sub;
    position: absolute;
    top: 0;
    right: 0;
	animation: u-bgL 1s ease 1.5s both; }

/*.u-fadeInSlide2.is-active::after{ }*/




/* fade  ---------------*/
.u-fade {filter: blur(100px);}
.u-fade.is-active {
	filter: blur(0px);
    transition: all 1s 0s ; }


/* fadeUp ---------------*/
@keyframes u-fadeUp {
	0% {transform: translate(0, 20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeUp{opacity: 0; }

.u-fadeUp.is-active {
	opacity: 1;
    
    animation: u-fadeUp 1.5s cubic-bezier(.55,0,.1,1) both; }


/* fadeDown ---------------*/
@keyframes u-fadeDown {
	0% {transform: translate(0, -20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeDown{opacity: 0;}

.u-fadeDown.is-active {
	opacity: 1;
    animation: u-fadeDown 0.5s cubic-bezier(.55,0,.1,1) both; }



/* img slide ---------------*/
.u-fadeInSlide{
    position: relative;
	z-index: 2;
}

.u-fadeInSlide::after{
    content: '';
    display: block;
    width: 100%;
    transform: scaleX(1);
    transform-origin: 100% 0;
    height: 100%;
    background-color: $clr-wh;
    position: absolute;
    top: 0;
    right: 0;
}

.u-fadeInSlide.is-active::after{
    transition: all 0.5s 3s ;
    transform: scaleX(0);
}


/* single marker ---------------*/
.u-fadeInMarker {
    background: linear-gradient(to right, transparent 50%, rgba(255, 165, 0, 0.3) 50%);
    background-repeat: repeat-x;
    background-size: 200% .6em;
    background-position: 0 .6em;
    padding-bottom: .6em;
}

.u-fadeInMarker.is-active{
    transition: all 1.2s ease;
    background-position: -100% .6em;
}



/*delay-------------*/
.delay-05s.is-active {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.delay-06s.is-active {-webkit-animation-delay: 0.6s; animation-delay: 0.5s;}
.delay-07s.is-active {-webkit-animation-delay: 0.7s; animation-delay: 0.5s;}
.delay-08s.is-active {-webkit-animation-delay: 0.8s; animation-delay: 0.5s;}
.delay-09s.is-active {-webkit-animation-delay: 0.9s; animation-delay: 0.5s;}
.delay-1s.is-active {-webkit-animation-delay: 1s; animation-delay: 1s;}
.delay-11s.is-active {-webkit-animation-delay: 11s; animation-delay: 1.1s;}
.delay-12s.is-active {-webkit-animation-delay: 12s; animation-delay: 1.2s;}
.delay-13s.is-active {-webkit-animation-delay: 13s; animation-delay: 1.3s;}
.delay-14s.is-active {-webkit-animation-delay: 14s; animation-delay: 1.4s;}
.delay-15s.is-active {-webkit-animation-delay: 15s; animation-delay: 1.5s;}
.delay-16s.is-active {-webkit-animation-delay: 16s; animation-delay: 1.6s;}
.delay-17s.is-active {-webkit-animation-delay: 17s; animation-delay: 1.7s;}
.delay-18s.is-active {-webkit-animation-delay: 18s; animation-delay: 1.8s;}
.delay-19s.is-active {-webkit-animation-delay: 19s; animation-delay: 1.9s;}
.delay-2s.is-active {-webkit-animation-delay: 2s; animation-delay: 2s;}
.delay-21s.is-active {-webkit-animation-delay: 21s; animation-delay: 2.1s;}
.delay-22s.is-active {-webkit-animation-delay: 22s; animation-delay: 2.2s;}
.delay-23s.is-active {-webkit-animation-delay: 23s; animation-delay: 2.3s;}
.delay-24s.is-active {-webkit-animation-delay: 24s; animation-delay: 2.4s;}
.delay-25s.is-active {-webkit-animation-delay: 25s; animation-delay: 2.5s;}
.delay-26s.is-active {-webkit-animation-delay: 26s; animation-delay: 2.6s;}
.delay-27s.is-active {-webkit-animation-delay: 27s; animation-delay: 2.7s;}
.delay-28s.is-active {-webkit-animation-delay: 28s; animation-delay: 2.8s;}
.delay-29s.is-active {-webkit-animation-delay: 29s; animation-delay: 2.9s;}
.delay-3s.is-active {-webkit-animation-delay: 3s; animation-delay: 3s;}
.delay-31s.is-active {-webkit-animation-delay: 3.2s; animation-delay: 3.2s;}
.delay-35s.is-active {-webkit-animation-delay: 3.5s; animation-delay: 3.5s;}
.delay-4s.is-active {-webkit-animation-delay: 4.5s; animation-delay: 4.5s;}
.delay-45s.is-active {-webkit-animation-delay: 4s; animation-delay: 4s;}
.delay-5s.is-active {-webkit-animation-delay: 5s; animation-delay: 5s;}
.delay-55s.is-active {-webkit-animation-delay: 5.5s; animation-delay: 5.5s;}
.delay-6s.is-active {-webkit-animation-delay: 6s; animation-delay: 6s;}
.delay-7s.is-active {-webkit-animation-delay: 7s; animation-delay: 7s;}
.delay-75s.is-active {-webkit-animation-delay: 7.7s; animation-delay: 7.7s;}
.delay-8s.is-active {-webkit-animation-delay: 8s; animation-delay: 8s;}
.delay-9s.is-active {-webkit-animation-delay: 9s; animation-delay: 9s;}
.delay-10s.is-active {-webkit-animation-delay: 10s; animation-delay: 10s;}




/*curtain
---------------------------------*/
.curtainIn{ position:relative ; opacity: 0; z-index: 0; }

.maskWH { width: 100%; height: 100%; position: absolute; top:0; z-index: 5; background-color: #f7f5ed; }
.maskWH2 { width: 100%; height: 100%; position: absolute; top:0; right: 0; background-color: #fff; }
.maskWH-wh { width: 100%; height: 100%; position: absolute; top:0; z-index: 4; background-color: #e7e5e5;}


/*animation ------------*/
.ef-animation { animation: ef-animation 0s cubic-bezier(.8, 0, .2, 1) 0s forwards;}
@keyframes ef-animation{ 0%{ opacity: 0;} 100% { opacity: 1;} }

.ef-animation .maskWH {animation: maskWH 0.5s cubic-bezier(.8, 0, .2, 1) 0.5s forwards; margin-left: 0; }
.ef-animation .maskWH2 {animation: maskWH2 0.5s cubic-bezier(.8, 0, .2, 1) forwards; margin-right: 0; }
.ef-animation .maskWH3 {animation: maskWH 0.5s cubic-bezier(.8, 0, .2, 1) 0.5s forwards; margin-left: 0; }
.ef-animation .maskWH-wh { animation: maskWH 0.7s ease-out 0.8s forwards; margin-left: 0; }
@keyframes maskWH { 0% { margin-left: 0;} 100% {margin-left: 100%;} }
@keyframes maskWH2 { 0% { margin-right: 0;} 100% {margin-right: 100%;} }




/*fade motion---------------------*/
.move,
.move:hover {transition:all 0.5s ease-in-out 0.8s;}

.move2,
.move2:hover {transition:all 4s ease-in-out 10s;}

.fade_box {transform: translateY(30px);opacity: 0; }


/*button
---------------------------------*/

/*hover color*/
.hvr-Primary{color: var(--clr-main)!important; background: var(--clr-wh); border: 3px solid var(--clr-yel); border-radius: 5px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
&:hover{color: var(--clr-main)!important; border-radius: 5px; border: 3px solid var(--clr-yel); background:var(--clr-sub); letter-spacing: 0.15em; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5);} }

/**/
.hvr-Blk{
	color: #fff!important;
	background-color: #161616;
	box-shadow: 5px 5px 0 #928D62;
	
	&:hover{
		color: var(--clr-main)!important;
		background-color: #fff;
		transform: translateY(5px) translatex(5px);
		box-shadow: 0px 0px 0px 0px rgba(146, 141, 98, 1);} }

/**/
.hvr-Yel{
	color: #161616!important;
	background-color: var(--clr-yel);
	box-shadow: 5px 5px 0 #928D62;
	
	&:hover{
		color: var(--clr-wh)!important;
		background-color: #161616;
		transform: translateY(5px) translatex(5px);
		box-shadow: 0px 0px 0px 0px rgba(146, 141, 98, 1);} }

/**/
.hvr-Wh{
	color: #161616!important;
	background-color: var(--clr-wh);
	border: 1px solid #dddddd;
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	
	&:hover{
		color: var(--clr-main)!important;
		background-color: var(--clr-yel);
		border: 1px solid #dddddd;
		box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);} }

.hvr-Foot{color: var(--clr-sub)!important; background: var(--clr-wh);  
&:before { background:#9affba; }	
&:hover{color: var(--clr-main) !important; border-radius: 10px; } }

/**/

.button-Main{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: 0.25s cubic-bezier(.55,.01,1,.5); 
	padding:1.6rem 1.6rem;
	width: 100%;
	height:auto;
	font-size: 2rem;
    line-height: 1;
	font-weight: 700;
	text-align: center; }

/**/
@media screen and (max-width: 768px){}



/**/
.button-Sub{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	padding:1vw;
	width:100%;
	height:auto;
	text-align: center;
	font-size: clamp(1.6rem,1.5vw,2.4rem);
	font-weight:600; 
	border-radius: 10px; }


/**/
.button-Map{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	padding:1rem;
	width:48px;
	height:auto;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1;
	font-weight:600; 
	border-radius: 3px; }




/**/

.button-Cntct{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: 0.25s cubic-bezier(.55,.01,1,.5); 
	padding:1.6rem 1.6rem;
	width: min(90%, 300px);
	height:auto;
	font-size: 1.6rem;
    line-height: 1;
	font-weight: 700;
	text-align: center; }

.btn_back{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: 0.25s cubic-bezier(.55,.01,1,.5); 
	padding:1rem 1rem;
	width: min(90%, 150px);
	height:auto;
	font-size: 1.6rem;
    line-height: 1;
	font-weight: 700;
	text-align: center; 
	color: var(--clr-main)!important; 
	background: #dddddd; border: 2px solid var(--clr-main);
}


/**/

.button-Login{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	padding:0.5rem 1.5rem;
	width:100%;
	height:auto;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	border-radius: 5px;
	overflow: hidden; }


/**/
.button-News{
	cursor: pointer;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	
	z-index: 0;
	transition: all 0.25s;
    margin-top: 15px;
	padding:0.5rem;
	width:200px;
	height:auto;
	text-align:center;
	font-size: 1.2rem;
	font-weight:500; 
	border-radius: 50px;
	background-color: transparent;
	color: var(--clr-main)!important;
	border: 1px solid var(--clr-main); 
	letter-spacing: 0.05em; }


.button-News:hover {
	background-color: var(--clr-sub);
	color: $clr-wh!important;
	border: 1px solid var(--clr-sub);  }

/**/
@media screen and (max-width: 600px){
.button-News{padding:0.5rem;width:100%;font-size: 1.6rem;}
}






	
/* ***********************************************************
* #iconList
* *********************************************************** */

.iconList {
	margin: 0 auto ;
	padding: 2rem;
	max-width: 400px;
	height: auto;
	opacity: 0; }

.iconList h3 {
	margin-bottom:10px;
	font-size:2rem;
	line-height:20px;
	color:#fff;
	letter-spacing: 0.05em;
	font-feature-settings : "palt";
	font-family: ftM; }
	
.iconList i {width:0px;height:0px; margin:0 5px;}

.open nav#sp-NavMain .iconList {opacity: 1; -webkit-transition: all .5s ease-out.6s; transition: all .5s ease-out .6s;}
.open nav#sp-NavMain .iconList span {font-size:20px; transition: .3s; color:#fff;}
.open nav#sp-NavMain .iconList span:hover { color:#000;}



/* ***********************************************************
* #sns
* *********************************************************** */

.sns {
	position: fixed;
	z-index: 999;
	top:35%;
	right:1%;
	width: 10px;
	height: auto; 
	transition: all 0.3s;
	

	h2{margin-bottom: 10px; margin-left: 3px;  text-align: center; img{}}}
	
.sns__List {
	width: 100%;}
	
.sns__List li {}
	
.sns__List li a {
	display: block;
	text-align: center;
	transition: all 0.3s;
	}


.sns__List li a span { font-size:14px; line-height: 1; transition: .3s; color:$clr-main;}
.sns__List li a:hover span { color:$clr-sub; }



/*- @media 1250px -*/
@media screen and (max-width: 1100px){
.sns {display:  none;}
}


/*///////////////////////////////////

//first-View
////////////////////////////////////*/
.top-View{
	position: relative; 
	width: 100%;
	padding-top: 12rem ; }

.sub-View{
	position: relative; 
	width: 100%;
	padding-top: 8rem ; 
	margin-bottom: -48px;}


/*--*/
@media screen and (max-width: 959px){
.top-View{padding-top: 4rem ; height: auto;}
.sub-View{padding-top: 4rem ; height: auto;margin-bottom: -40px;}
}


/*//////////////////////////////////

Header
///////////////////////////////////*/

header{ position: fixed;z-index: 999;}

/*//////////////////////////////////

G_Nav
/////////////////////////////////*/


.gnav{
	margin:0 auto ;
	padding:4rem 0; 
	width : 100% ; 
	position: fixed;
	top: 0;
	background-color:  rgba(255, 228, 0, 1); 
	transition: 0.25s; }

/*変形header*/
.gnav.transform{padding:2rem 0; background: rgba(255, 228, 0, 0.8); backdrop-filter: blur(15px);}


/*- @media 959px -*/
@media screen and (max-width: 959px){
	.gnav{display: none;}
}



/**/

nav{
	position: relative;
	margin:0 auto;
	padding:0;
  	width:100%;}

.gnav-List{
	margin:0;
	padding:0;
	width: 100%;
	text-align: center; }

.gnav-List li{
	text-align: center;
	margin:0 20px 0px;
	display: inline-block;
	font-size:1.8rem;
	line-height:1;
	font-weight:500;
	letter-spacing: 0.01em; 

	span{
		text-align: center;
		display: block;
		margin-top: 10px;
		font-size:1.4rem;
		line-height:1;
		font-weight:500;
		letter-spacing: 0.05em; 
		color: var(--clr-yel); } } 

.gnav-List li a{
	display: block;
	transition: all 0.2s; }


.gnav-List li a:link {color: var(--clr-main) !important;}
.gnav-List li a:visited {color: var(--clr-main) !important;}
.gnav-List li a:hover{color: var(--clr-wh) !important;}
.gnav-List li a.active{color: var(--clr-wh) !important;}

.over{color: var(--clr-yel)!important; }



/*- @media 959px-*/
@media screen and (max-width: 959px){
nav{}
.gnav-List{}
.gnav-List li{margin:0 10px 10px;font-size:1.6rem;line-height:16px;
span{font-size:1rem;line-height:12px;} } 
}


/*- @media 959px-*/
@media screen and (max-width: 959px){
nav{display: none;}
}







/*//////////////////////////////////

Contents
/////////////////////////////////*/
	
main {position:relative; }


/*h2ttl-Wrap
---------------------------*/
.h2ttl-Wrap{
	position:relative;
	width: 100%;
	height: auto;
	margin-bottom: 56px;
	z-index: 10;
	
		h2{
            position:relative;
            z-index: 1;
            max-width: 400px;
            margin: 0 auto;
            line-height: 1;
            margin-bottom: 16px;
            text-align: center;
            font-family: Outfit;
            }

		span{display: block; text-align: center; line-height: 1.4;}} 


.h2ttl-Wrap2{
	position:relative;
	width: 100%;
	height: auto;
	margin:40px 0 10px;
    z-index: 10;span{display: block; text-align: center; line-height: 1.4;}}

/*//- @media 768px-//*/
@media screen and (max-width: 768px){
.h2ttl-Wrap{margin-bottom: 24px; 
h2{width: 80%; margin: 0 auto;} 
span{margin-top: 8px;}
    } 
}








/*page-top
---------------------------*/	
#page-top{
   width:70px;
   height:70px;
   display:none;
   position:fixed;
   right:0.5%;
   bottom:1.5%;
   z-index:500; }
 
#page-top p{
   margin:0;
   padding:0;
   text-align:center;
   -webkit-transition:all 0.3s;
   -moz-transition:all 0.3s;
   transition:all 0.3s; }

#move-page-top{
   color:#fff;
   line-height:50px;
   text-decoration:none;
   display:block;
   cursor:pointer; }

/*- @media 768px-*/
@media screen and (max-width: 768px){#page-top p{display:none;} }




/*////////////////////////////////

footer
////////////////////////////////*/	

footer{
	margin:0 auto;
	width: 100%;}

/*fInner-----------------*/
.foot__Inner{
	margin:0 auto;
	padding: 4rem 2rem;
    width:95%;
	position:relative; 
	text-align: center;
	
	h3 {margin-bottom:5px;text-align: center;
	
	span {
	text-align: center;
	display: block;
	margin-top:5px ;
	font-size:12px;} } 

	p{
	text-align: center;
	margin-bottom:16px;}
	
	.copy {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 0px; }
}
	
	

.fwh{color: #fff;}

/*- @media 768px -*/
@media screen and (max-width: 768px){
.kiyaku{margin-bottom:100px; width: 90%; }
.inq{width: 100%; }　}


/*- @media 959px-*/
@media screen and (max-width: 959px){
footer{padding-bottom: 0rem;}
.foot__Inner{padding: 3rem 2rem 1rem;}

.foot__left-Wrap{width: 100%; margin-bottom: 0px;
h1{ margin-bottom: 10px;  } 
.adrs{ } }

.foot__right-Wrap{display: none; }
.foot__Btm .foot__Inner{padding:1rem 2rem!important;}
.copy{display: block;margin-top: 20px;}
.foot__Btm h3,.foot__Btm .foot__fList,{
	display: none;}
}