@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;
  margin-right: 6px;

  /* 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-arrow2:before{
    content: "";
	width: 10px;
    height: 5px;
	position: absolute;
	top:8px;
    right: -13px;
	background: url("../images/common/icon_arrow2.svg") no-repeat center bottom;  }

.icon-guide:before{
    content: "";
	width: 40px;
    height: 40px;
	position: absolute;
	top:0px;
    left: 0px;
	background: url("../images/common/icon_guide.png") no-repeat center center;  }



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

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

:root {
	--clr-main: #4B4B4B;	
	--clr-sub:#D3826A;
	--clr-wh: #fff;
	--clr-gry: #DEDBC5;
}


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


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


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

/*link  ------------------*/
a:link {color: #4B4B4B;text-decoration: none;}
a:visited {color: #4B4B4B;text-decoration: none;}
a:hover {color: #4B4B4B;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: #4B4B4B;
	font-family: "M PLUS 1", sans-serif;
	font-style: normal;
	font-weight: 500;
	-webkit-text-size-adjust: none;
counter-reset: rank_number;  }






/*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:500;
	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:500;
	letter-spacing: 0.08em;
	font-feature-settings : "palt"; }

.tx-14 {
    font-size: 1.4rem;
	line-height: 1.5;
	font-weight:500;
	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:500;
	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%; }

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



@media screen and (max-width: 959px){
.inner{margin:0 auto ; padding:12rem 1.6rem 4rem; }
.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;}
.inner-404{margin:0 auto ; padding:10rem 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;}
}


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

 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-color:#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;}




/*! #######################################################################

	HumbergerMenu

####################################################################### */

#sp-nav {display:none; }

/**/
@media screen and (max-width: 768px){
#sp-nav {
	display:inherit;
	position: fixed;
	height: auto;
	z-index:1000000;
	width:100%; }
}

	
/**/
.gNav-Btn{
	width:90px;
	height:90px;
	text-align:center;
	
	position: fixed;
	z-index: 100001;
	top:0px;
	right:0px;
	background: #e5ac99;}


	
/* #nav-toggle -------*/
#nav-toggle {
	height: 70px;
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
	
#nav-toggle div {margin: 35px auto 0; position: relative; width:30px;}
	
#nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--clr-wh);
  left: 0;
  zoom: 1;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out; }

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 8px;}
#nav-toggle span:nth-child(3) {top: 16px;}
.open #nav-toggle {background: transparent;}
.open #nav-toggle span {background: var(--clr-wh)}
.open #nav-toggle span:nth-child(1) {top: 9px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);zoom: 1;}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {
	top: 9px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	zoom: 1; }

/*#nav-toggle p{
	padding-top:15px;
	font-size:14px;
	text-align: center;
	color:#cf000e;
	font-family: dcb; }

.open #nav-toggle p{
	color:#fff;}*/

	

/**/	
div#humberger {
	 position: absolute;
	height: auto;
	z-index:100000;
	width:100%;
	display:block; }


	
/* ***********************************************************
* #global-nav
* *********************************************************** */
nav#h-nav {
	visibility: hidden;
	position: fixed;
	display: block;
	vertical-align: middle;
	height: 100%;
	width: 100%;
	top:0 ;
	right:0 ;
	transition: all .3s ease-in-out;
	opacity:0;
	/*transform:translatex(100%);*/ }

nav#h-nav .hWrap {
	position: absolute;
	height: 100%;
	width: 100%;
	top:0%;
	right:0 ;
	overflow-y: scroll; 
	-webkit-overflow-scrolling: touch; }

.open nav#h-nav {
	z-index: 1;
	visibility: visible;
	width: 100%;
	height: 100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	/*transform:translatex(0%);*/
	opacity:1;
	background-color: var(--clr-wh); }






/* ***********************************************************
* nav-list
* *********************************************************** */

.hWrap figure{
	text-align: center; }

.spNav__Logo{
	margin:0 auto;
	padding: 2rem 1rem 1rem 1rem;
	width : 200px ;
	height: 200px;
	background-color: #fff;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
	text-align: center; 
	
	a{display: block;
	img{ } } }


/**/
.spNav__main{
	 margin: 0 auto;
	 width: 95%;
        padding: 2rem 1.6rem;
        background-color: #FCF5F2;
        border-radius: 10px;
        &:last-child{margin-bottom: 0;}
        
        h2{
			padding: 0 1.6rem;
			margin-top: 1.6rem;
			margin-left: 1.6rem;
            margin-bottom: 1.6rem;
            border-left: 4px solid #E8BCAF;
            }
        
        .-List{
			margin: 0 auto;
			width: 95%;
            padding: 2rem;
            background-color: #fff;
            border-radius: 10px; 
        
            li{
                margin-bottom: 8px;
				padding-bottom: 8px;
				border-bottom: 1px solid #ececec; 
                &:last-child{margin-bottom: 0; padding-bottom: 0px;border-bottom: none; }
                
                a{display: block; transition: 0.25s; }
                
                p{
                line-height: 1.2;
                }}}}

.spNav__main a:hover{opacity: 0.6;}


/**/
.spNav__Sub{
	 margin: 32px auto 0;
	 width: 95%;
    &:last-child{margin-bottom: 0;}
        
        .-List{
        
            li{ 
				position: relative;
                margin-bottom: 12px;
                &:last-child{margin-bottom: 0; }
                
                a{display: block; height: 40px; background-color: 0.25s;transition: 0.25s; 
					span{display: inline-block;vertical-align: middle; padding-right: 8px;}
					p{display: inline-block;line-height: 1.2;vertical-align: middle;}}
                
                }}}

.spNav__Sub a:hover{opacity: 0.6;}

	


/*- @media 768px -*/
@media screen and (max-width: 768px){
.spNav__Logo{padding: 2rem 1rem 1rem 1rem;width : 80px ;height: 120px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px; }
.spNav__main {margin:0px auto 0;padding: 1rem 0 1rem;}
.spNav__main li {font-size: 1.8rem;line-height: 18px; }
.spNav__main li a {padding: 1rem ;}
}
	
	
/**/
.open nav#h-nav .spNav__main li {
  opacity: 1;
  transform: scaleY(1) translateY(0);
  transition: all .4s ease-out .1s;}

.open nav#h-nav .spNav__main li:nth-child(1) {transition-delay: .1s;}
.open nav#h-nav .spNav__main li:nth-child(2) {transition-delay: .2s;}
.open nav#h-nav .spNav__main li:nth-child(3) {transition-delay: .3s;}
.open nav#h-nav .spNav__main li:nth-child(4) {transition-delay: .4s;}
.open nav#h-nav .spNav__main li:nth-child(5) {transition-delay: .5s;}
.open nav#h-nav .spNav__main li:nth-child(6) {transition-delay: .6s;}


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

.iconList {
	margin: 0px auto -50px ;
	padding:0 2rem;
	width: 100%;
	height: auto; 
	position: relative;
	opacity: 0; 
	transition: all 0.3s; 
	

	h2{margin-top: 5px; font-size: 1.6rem; text-align: center; font-weight: 600;}}
	
.iconList__List {
	margin: 0 auto ;
	padding:0;
	width: 200px;
	height: auto; 
	position: relative;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;}
	
.iconList li {
	position: relative;
	text-align: center;
	width: 100%;
	margin:0; }
	
.iconList li a {
	display: block;
	text-align: center;
	
	padding: 1.7rem;
	transition: all 0.3s;
	font-weight:500;
	width: 60px;
	height:60px;
	border-radius: 50%;
	background-color: $clr-main;
	}

.iconList li a span { font-size:26px; transition: .3s; color:$clr-wh;}
.iconList li a:hover { background-color:$clr-orng;}


.open .iconList {
	margin: 0px auto 0px ;
  	opacity: 1;
	transition-delay: 1.3s;}	


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

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

header{ 
    width: 100%;
    height: 96px;
    padding: 10px 0 10px 2rem;
    position: fixed;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);}


.head-Wrap{ 
    position: relative;
    max-width: 1240px;
    margin: 0 auto;


    h1{
        position: absolute;
        top:0;
        left:10px;
        width: 80px;}
    
    nav{
	position: relative;
	margin:0 0 0 auto;
	padding:0;
  	width:920px;}
    
    }


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

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



/**/

nav{}

.gnav-List{
	margin:0;
	padding-top:20px;
	width: 100%;

    justify-content: center;}

.gnav-List .gnav-List-item{
    position: relative;
	transition: all 0.25s; 
	text-align: center;
	margin:0px 38px 0px 0px;
	display: inline-block;
	font-size: clamp(1.5rem,1.6vw,1.6rem);
	line-height:1;
	letter-spacing: 0.01em; } 

.gnav-List .gnav-List-item .__Link{
	display: block;
    height: 54px;
	font-weight:500;
	transition: all 0.25s; 

    &:after{
        content:" "; 
        opacity:0;
        transition: all 0.5s; 

        position: absolute;
        bottom: 0;
        left:50%;
        transform: translateX(-50%);} }

/**/
.megaMenu {
  background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
    
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    top: 56px;

  	width:800px;
    margin-inline: auto;
    opacity: 0;
    
    transition: opacity .3s, visibility .3s;
    visibility: hidden;
    
    .megaMenu-list {
        width: 100%;
        padding: 2.4rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    
        .megaMenu-item {
            text-align: center;
    
            a{
                display: block;
                background-color: #fcf5f2;
                padding: 2.4rem;
                border-radius: 10px;
                transition: 0.25s; }}} }
    
    
/* メニューをhoverした時のスタイル */
.gnav-List-item:hover .megaMenu {opacity: 1;visibility: visible;}
.megaMenu-item a:hover {opacity: 0.6;}


.gnav-List .gnav-List-item .__Link:link {color: var(--clr-main) !important;}
.gnav-List .gnav-List-item .__Link:visited {color: var(--clr-main) !important;}
.gnav-List .gnav-List-item .__Link:hover{color: var(--clr-main) !important;}

.gnav-List .gnav-List-item .__Link:hover:after{
    content:" "; 
	display: block;
    width: 30px;
    height: 3px;
    background-color:  var(--clr-sub)!important;
    opacity:1;
    
    position: absolute;
    bottom: 0;
    left:50%;
    transform: translateX(-50%); }

.gnav-List li .__Link.active{color: var(--clr-main)  !important;}
.over{color: var(--clr-yel)!important; }



/**/
@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 screen and (max-width: 768px){
nav{display: none;}
}







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

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








/*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%;
    background-color: #f7e6df;}

/**/
.foot-Wrap{ 
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 3.2rem 2rem;

    .foot-List{}
    
    .copy{color:#a99e9b; font-weight: 400;}}


/**/
.foot-List {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 0;
}

.foot-List li {
    display: flex;
    align-items: center;
}

.foot-List li:not(:last-child)::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    margin-left: 20px;
    background-color: var(--clr-sub);
    content: '';
}

.foot-List a {
    color: var(--clr-main);
    text-decoration: none;
    font-size: 1.2rem;
    transition: 0.25s;}

.foot-List a:hover{opacity: 0.6;}



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

.foot-Wrap{ padding: 3.2rem 2rem;width: 100%;}

.foot-List {
    display: block;
    width: 100%;
    gap: 0 20px;
}

.foot-List li {display: block; align-items: center; text-align: center;}
.foot-List li:not(:last-child)::after {display: none;}
    
.copy { margin-top: 24px; width: 100%;text-align: center!important;}

}