@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: #484848;	
	--clr-sub:#FFC000;
	--clr-yel:#FFC000;
	--clr-blue: #77A6AE;
	--clr-lightblue: #C4DBDF;
	--clr-wh: #fff;
	--clr-gry: #f6fdf4;
}


.bgc-wh{background-color: #fff!important;}
.bgc-gly{background-color: #C4DBDF!important;}
.bgc-Alert{background-color: #ffefee;}


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


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

/*link  ------------------*/
a:link {color: #484848;text-decoration: none;}
a:visited {color: #484848;text-decoration: none;}
a:hover {color: #484848;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: #484848;
	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(2rem,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,3.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:700;
	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: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{background: linear-gradient(transparent 80%, #FFC200 80%); }






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

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-tex2{
	background: #c4dbdf url("../images/common/bg_texture2.png") repeat-x center bottom; 
	 mix-blend-mode: multiply;}

.bg-Intro{
	background: url(../images/common/intro_img2.png) no-repeat right bottom,url(../images/common/intro_bg.gif) repeat left top;}


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



@media screen and (max-width: 1050px){
.bg-ope{background: none;  }
	
.bg-About{
	background: url("../images/common/bg_about.png") relative no-repeat center bottom; }
}




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

.inner-Free{
	position: relative;
	margin:0 auto ;
	padding:14rem 0rem ;
	width: 95%; }

.inner-1240{
	position: relative;
	margin:0 auto ;
	padding: 0rem;
	max-width: 1280px; }

.inner-768{
	position: relative;
	margin:0 auto ;
	padding: 0rem;
	max-width: 768px; }

.inner-959{
	position: relative;
	margin:0 auto ;
	padding: 0;
	max-width: 959px; }


.inner2{
	position: relative;
	margin:0 auto ;
	padding:10rem 2rem;
	max-width: 1050px; }



@media screen and (max-width: 959px){
.inner{margin:0 auto ; padding:4rem 1.6rem; }
.inner-Free{margin:0 auto ; padding:4rem 1.6rem; }
.inner-959{margin:0 auto ; }
.inner2{margin:0 auto ; padding:4rem 1.6rem; }
}



/*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: 2px solid var(--clr-main); border-radius: 3px;
&:hover{color: var(--clr-main)!important; border-radius: 3px; border: 2px solid var(--clr-main); background:var(--clr-sub); letter-spacing: 0.3em;} }

.hvr-Entry{color: var(--clr-wh)!important; background: var(--clr-sub); border: 2px solid var(--clr-sub)b;  	
&:hover{color: var(--clr-wh)!important; border-radius: 5px; border: 2px solid #6de1a4; background:#6de1a4; } }

.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: min(90%, 300px);
	height:auto;
	font-size: 1.6rem;
    line-height: 1;
	font-weight: 700;
	text-align: center; 
    
    &:before { 
	content:"MORE"; 
	display: block;
	width: 44px;
	padding: 0.3rem 0.5rem 0.4rem;
    line-height:1;
	font-family: ftH!important;
	font-weight: 500;
	background: var(--clr-main); 
    color: #fff;
	background-size: contain;
	transition: 0.25s cubic-bezier(.55,.01,1,.5); 
	
	position: absolute; 
	top: 50%;
    transform: translateY(-50%);
	right:-24px;
    font-size: 1.0rem;} }

.button-Main:hover:before { right:0px; letter-spacing: 0.0em!important;} 
/**/
@media screen and (max-width: 768px){}

/**/

.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;}
}





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

	HumbergerMenu

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

/*#sp-nav {display:none;}*/

html.is-fixed,html.is-fixed body {height: 100%;overflow: hidden;}

#sp-nav {
	display:inherit;
	position: fixed;
	height: auto;
	z-index:100000;
	width:100%; }

	
/**/
.gNav-Btn{
	width:60px;
	height:60px;
	text-align:center;
	
	position: fixed;
	z-index: 100001;
	top:0px;
	right:0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 10px;
	background: rgba(31, 32, 63, 1);}

.open .gNav-Btn{}


	

	
/* #nav-toggle -------*/
#nav-toggle {
	width:60px;
	height:60px;
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0); }
	
#nav-toggle div {margin: 20px auto 0; position: relative; width:30px;}
	
#nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  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: #fff;}
.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;}

nav#h-nav .hWrap {
	position: absolute;
	height: 100%;
	width: 100%;
	top:0%;
	right:0 ; }

.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;}


/* ***********************************************************
* nav-Main
* *********************************************************** */
	
.spNav__H1{
	position: relative;
	z-index: 1000000;
	top:0px;
	padding: 1.5rem 1.5rem 2.5rem 1.5rem;
	width: 100%;
	border-bottom: 1px solid #E6E6E6; h1{width: 250px;}}

/**/

.spNav__Body {
    padding: 10rem 0 0;
	width: 100%; 
    height: 100vh;
    overflow: hidden;
    
    overflow-y: auto; 
	-webkit-overflow-scrolling: touch;}


.spNav__Body2 {
	margin:0 auto;
    padding: 0 10rem 0rem;
	width: 100%; }
    
    
.spNav__main {
	margin:0 auto;
	width: 100%; 
    gap:30px;
	
    li {
	width : calc((100% / 4) - 30px);
        
        a{
            display: block; 

            font-size: 4rem;
            line-height: 1;
            font-weight:500;
            font-family: ftB;
            color:var(--clr-main)!important;
            font-weight: 700!important;
            transition: 0.25s;
        
            span{display: block; line-height: 1; margin-top: 10px; color: #6E6E6E;}}
        
        .spNav__Div{margin-top: 16px; a{font-size: 1.6rem; line-height: 1.6; }} } }

/**/

.spNav__sub  {
	margin-top: 50px; text-align: center;

    li {display: inline-block;margin: 0 10px;
    a{display: block; font-weight: 700!important; transition: 0.25s;}
    } }

.spNav__main a:hover,.spNav__sub a:hover{color:var(--clr-sub)!important;}


/**/

.spNav__Info{
    margin-top: 40px;
    width: 100%;
    padding: 10rem 0;
    overflow: hidden; }

.spNav__Info-List{
	margin: 0 auto;
	max-width : 640px; 
	position: relative;
    
    li{
    width: 300px!important;
    position: relative;
	text-align: center;
	color: #fff;
    line-height: 1;
	font-weight: 700; } }

.spNav__Info-ListTel{
    font-size: 1.6rem;
	font-family: ftH!important;
    
    border: 2px solid #fff; 
    border-radius: 3px;
    
    &:before { 
	content:" TEL"; 
	display: block;
	width: 32px;
	padding: 0.3rem 0 0.2rem;
    line-height:1;
	background: #fff; 
    color: var(--clr-main);
	background-size: contain;
	
	position: absolute; 
	top: 50%;
    transform: translateY(-50%);
	left:-16px;
    font-size: 1.2rem;}
    
     a{display: block; padding: 1.4rem 1.4rem 1.4rem 1.8rem; font-size: 2rem; font-weight: 400!important; color: #fff!important;
     span{font-size: 1.6rem; margin-right: 0px;} } }

.spNav__Info-ListMail{
     border: 2px solid #fff; 
    border-radius: 3px;
    font-family: ftH!important;
    
    &:before { 
	content:"MAIL"; 
	display: block;
	width: 38px;
	padding: 0.3rem 0;
    line-height:1;
	background: #fff; 
    color: var(--clr-main);
	background-size: contain;
        
	position: absolute; 
	top: 50%;
    transform: translateY(-50%);
	left:-16px;
    font-size: 1.2rem;}
    
    a{display: block; font-family: 'Zen Kaku Gothic New', sans-serif!important;padding: 1.4rem 1.4rem 1.4rem 1.8rem; font-size: 1.8rem; color: #fff!important;
    span{margin-right: 0px;} } }


.bg-Info{
	background: url("../images/common/bg_info.png") no-repeat center center; 
	background-size: cover; }

/*- @media 768px-*/
@media screen and (max-width: 959px){
.spNav__Body {padding: 5rem 0 0;}
.spNav__Body2 {padding: 0 2rem 0rem; }
    
.spNav__main {width: 100%; gap:16px;
li {width : 100%;
a{font-size: clamp(2rem,3vw,4rem);
span{ margin-top: 5px; font-size: 1.6rem;}}
.spNav__Div{margin-top: 5px; a{font-size: 1.6rem; line-height: 1.6; }} } }

.spNav__sub  {margin-top: 20px; text-align: center;
li {display: inline-block;margin: 0 10px;a{display: block; font-weight: 700!important; transition: 0.25s;}} }

.spNav__Info{margin-top: 20px;width: 100%;padding: 4rem 0; }
.spNav__Info-List{
	text-align: center;
    li{margin: 0 auto;width: 300px!important; margin-bottom: 10px; &:last-child{margin-bottom: 0;}} }

.spNav__Info-ListTel{
    font-size: 1.6rem;
	font-family: ftH!important;
    
    border: 2px solid #fff; 
    border-radius: 3px;
    
    &:before { 
	content:" TEL"; 
	display: block;
	width: 32px;
	padding: 0.3rem 0 0.2rem;
    line-height:1;
	background: #fff; 
    color: var(--clr-main);
	background-size: contain;
	
	position: absolute; 
	top: 50%;
    transform: translateY(-50%);
	left:-16px;
    font-size: 1.2rem;}
    
     a{display: block; padding: 1.4rem 1.4rem 1.4rem 1.8rem; font-size: 2rem; color: #fff!important;
     span{font-size: 1.6rem; margin-right: 0px;} } }

.spNav__Info-ListMail{
     border: 2px solid #fff; 
    border-radius: 3px;
    font-family: ftH!important;
    
    &:before { 
	content:"MAIL"; 
	display: block;
	width: 38px;
	padding: 0.3rem 0;
    line-height:1;
	background: #fff; 
    color: var(--clr-main);
	background-size: contain;
	
	position: absolute; 
	top: 50%;
    transform: translateY(-50%);
	left:-16px;
    font-size: 1.2rem;}
    
    a{display: block; padding: 1.4rem 1.4rem 1.4rem 1.8rem; font-size: 1.8rem; color: #fff!important;
    span{margin-right: 0px;} } }
}


	
.spNav__Copy{}


.open nav#h-nav .spNav__main li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .5s ease-out.3s;
  transition: all .5s ease-out .3s;}



	
/* ***********************************************************
* #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: 0 ;
	height:53vw;
	z-index: 10; }


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

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

header{
	padding: 1rem 0 0 0; 
	width : 680px ; 
	height: 255px;
	/*background: rgba(255, 255, 255, 1);*/
	z-index: 101;

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

	h1{
    text-align: center;
	
		a{display: block; width:min(150px,8vw); margin: 8px auto; text-align: center; 
			img{text-align: center}} } 

	figure{
	width: 100%;
    position: absolute;
	z-index: -1;
	top:0;
	left:50%;
	transform: translateX(-50%); 
    img{width:100%;} } }





/*--*/
@media screen and (max-width: 959px){
.top-View{height:50vh;}
header{padding: 1rem 0 0 0; width : 80% ; height: 100px;
h1{font-size: 10px!important; a{display: block; width:min(200px,10vw); margin: 8px auto; } }  }
}



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

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


.gnav{
	margin:80px auto 0px ;
	padding:5rem 0 2rem; 
	width : 100% ; 
	position: sticky;
	top: 0;
	z-index: 99;
	background: rgba(255, 255, 255, 0.9); 
	transition: 0.25s;}

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


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



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

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

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-yel) !important;}
.gnav-List li a.active{color: var(--clr-yel) !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;} } 
}


/*
nav{
	width: calc(100% - 27%);
	position: absolute;
    top:0;
    right:3%;
	z-index: 9999;}

/*
.nav__Sub{
	margin: 0 30px 42px auto;
	padding: 0;
	width : 350px; 
	height:auto;
	position: relative;
    font-size: 0;
    
    li{
    position: relative;
    display: inline-block;
	font-size: 1.4rem;
	text-align: center;
	color: var(--clr-main);
        line-height: 1;
	font-weight: 700; } }

.nav__Sub-Tel{
    
    font-size: 1.6rem;
    font-family: ftM;
    
    border-right: 2px solid var(--clr-main); 
    border-bottom: 2px solid var(--clr-main); 
    border-left: 2px solid var(--clr-main); 
    
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 3px;
    
    &:before { 
	content:" "; 
	display: block;
	width: 30px;
	height: 4px;
	background: var(--clr-main); 
	background-size: contain;
	
	position: absolute; 
	bottom: -1px; 
	left:14px; }
    
     a{display: block; padding: 1.4rem 1.4rem 1.4rem 1.8rem; color: var(--clr-main)!important;
     span{font-size: 1.6rem; margin-right: 10px;} } }

.nav__Sub-Mail{
    
    border-right: 2px solid var(--clr-main); 
    border-bottom: 2px solid var(--clr-main); 
    border-left: 0px solid var(--clr-main); 
    
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0px;
    
    &:before { 
	content:" "; 
	display: block;
	width: 30px;
	height: 4px;
	background: var(--clr-main); 
	background-size: contain;
	
	position: absolute; 
	bottom: -1px; 
	left:11px; }
    
    a{display: block; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 600; padding: 1.4rem 1.4rem 1.6rem 1.8rem; color: var(--clr-main)!important; transition: 0.28s; background-color:transparent;
    span{margin-right: 6px;} } }

.nav__Sub-Mail a:hover{background-color: $clr-sub;}

/*

nav .gnavList{
	margin: 0 0 0 auto;
	padding: 0;
	width : 100%; 
	height:auto;
	position: relative;
	z-index: 0;

	display: flex;
	flex-wrap: wrap;
    justify-content:flex-end;}

nav .gnavList li {
	padding:0;
	width: 14%; }

nav .gnavList li a {
	display: block;
	padding:0 0 2rem;
	width:82%;
	font-size: clamp(1rem,1vw,1.6rem)!important;
	line-height: 1.0;
	text-align: center;
	color: var(--clr-main);
	font-weight: 700;  }

.gnavList__item1{width:50%!important;}


/*dropmenu-------
nav .dropmenu ul{
	  position: relative;
	  z-index: 9999;
	  bottom: -10px;
	  left: -12px;
	  margin: 0;
	  padding: 0;}

nav .dropmenu ul li{
	width: 100%; 
	}
nav .dropmenu ul li a{
	padding: 1.5rem 1rem 2rem 1rem ;
	width:100%;
	height:100%;
	color: var(--clr-main);
	font-size:1.2rem!important; 
	border-top: 1px solid #f2f2f2;
	background: #fff;
	text-align: center;
	box-sizing: border-box;
	font-weight:400;
    transition: .2s;  &:last-child{border-top: none;}}

nav .dropmenu ul li a:hover{background:var(--clr-sub);}
	
/*
#drop li ul{width:100%; overflow: hidden; height: 0; transition: .2s;}
#drop li ul li{width:100%; overflow: hidden; height: 0;transition: .2s;}
#drop li:hover ul li{ overflow: visible; height: 50px;}
#drop li:hover ul{width:100%; padding:0 0; overflow: visible; height: auto; background: #fff;border-radius: 10px; 
	box-shadow: 0 0 6px 1px rgba(85, 85, 85, 0.15); overflow: hidden;}



/* nav----------
.buttonNavPc {
	position: relative;
	z-index: 1;
	display: block;
	width:100%;
	transition: all 0.25s;}


.buttonNavPc:after {
    content: '';
    /*絶対配置で線の位置を決める
    position: absolute;
    bottom: -7px;
    left: 10%;
    /*線の形状
    width: 80%;
    height: 4px;
    background:var(--clr-sub);
    /*アニメーションの指定
    transition: all .3s;
    transform: scale(1, 0);/*X方向0、Y方向1
    transform-origin: left bottom;/*左上基点
}

.buttonNavPc:hover:after { transform: scale(1, 1);}
.buttonNavPc:hover {color: var(--clr-sub) !important;}

.current{ 
	position: relative;
	color:var(--clr-sub) !important;
	width: 100%;}

.current:after{ 
	content: "";
	position: absolute;
	z-index: 10;
	 left: 10%;
	bottom:-7px;
	
	width: 80%;
	height:3px;
	background-color: var(--clr-sub);}



/*- @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: 80px;
	
		h2{
		text-align: center;}

		span{margin-top: 16px; display: block; text-align: center; font-weight: 800; color:var(--clr-yel);}} 

/*//- @media 768px-//*/
@media screen and (max-width: 768px){
.h2ttl-Wrap{margin-bottom: 24px; 
h2{width: 40vw; 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:1000; }
 
#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: 0rem 2rem 7rem;
    width:95%;
	position:relative; }


/*---------*/

.copy{text-align: center;}


/*- @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;}
}