@charset "UTF-8";
/*===============================================*/
/*  common.css */
/*===============================================*/

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

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

/* Fonts
---------------------------------------------------------------------*/

// <weight>: Use a value from 200 to 700
// <uniquifier>: Use a unique and descriptive class name

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/*localfont  -------------------------*/

/*iconfont  -------------------------*/
@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon.eot?nc8ydo"); src: url("../fonts//icomoon.eot?nc8ydo#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?nc8ydo") format("truetype"), url("../fonts/icomoon.woff?nc8ydo") format("woff"), url("../fonts/icomoon.svg?nc8ydo#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-view:before { content: "\e900"; }

.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-twitter:before { content: "\ea96"; }

.icon-pdf:before { content: "\e906"; }

.icon-star-full:before { content: "\e9d9"; }

.icon-heart:before { content: "\e9da"; }

.icon-mail:before { content: "\e903"; font-size: 2rem; 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  ------------------*/
.bgc-gld { background: linear-gradient(90deg, #004CA1 5%, #00ADEC); }
.bgc-gly { background-color: #D9D9D9 !important; }
.bgc-wh{ background-color: #fff!important; }
.bgc-grn { background-color: #eefbf4 !important; }


.bgc-gly2 { background-color: #F5F5F5 !important; }

.bgc-Alert { background-color: #ffefee; }

.clrBlue { color: #004CA0; }
.clrLightBlue { color: #00ACEB; }
.clrGrn { color: #22C971; }
.clrGly { color: #A5A5A5; padding-left: 8px; }
.clrWh { color: #fff !important; }

.border-Alert { background-color: #ffefee; border: 2px solid #EC3225; }

/*テキストのハイライトカラーを変える  ------------------*/
::selection { /* Safari and Opera */ background: #004CA0; color: #1E1E1E; }

::-moz-selection { /* Firefox */ background: #004CA0; color: #1E1E1E; }

/*link  ------------------*/
a:link { color: #1E1E1E; text-decoration: none; }

a:visited { color: #1E1E1E; text-decoration: none; }

a:hover { color: #1E1E1E; 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: 2; color: #2a2a2a; font-family: 'Noto Sans JP', sans-serif; font-weight: 600; -webkit-text-size-adjust: none; }

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

.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-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.4rem, 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: 500; 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: 500; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-20 { font-size: clamp(1.6rem, 1.7vw, 2rem); line-height: 1.8; font-weight: 500; 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: 600; letter-spacing: 0.01em; font-feature-settings: "palt"; }

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

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: 14px; 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; } }
.font-color { color: #231815 !important; }


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

module
///////////////////////////////////*/
/*background color
---------------------------*/
.bg-Mv { background: url("../images/common/bg_mv.jpg") no-repeat center center; background-size: cover; }

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

.bg-ope { background: url("../images/common/ope_arrows.png") no-repeat center center; }

@media screen and (max-width: 1050px) { .bg-ope { background: none; } }


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

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

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


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


/*flex-box
---------------------------*/
.flex-Sb { display: flex; flex-wrap: wrap; justify-content: space-between; }
.flex-Nomal { display: flex; flex-wrap: wrap; }


/*//////////////////////////////////
 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(0.55, 0, 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(0.55, 0, 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(0.55, 0, 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(0.55, 0, 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: #22C971; position: absolute; top: 0; right: 0; animation: u-bgL 1s ease 1.5s both; }

/*.u-fadeInSlide2.is-active::after{ }*/
/* fade  ---------------*/
.u-fade { opacity: 0; }

.u-fade.is-active { opacity: 1; transition: all 0.5s 2s; }

/* 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 0.5s cubic-bezier(0.55, 0, 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(0.55, 0, 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: #fff; 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(0.8, 0, 0.2, 1) 0s forwards; }

@keyframes ef-animation { 0% { opacity: 0; }
  100% { opacity: 1; } }
.ef-animation .maskWH { animation: maskWH 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0.5s forwards; margin-left: 0; }

.ef-animation .maskWH2 { animation: maskWH2 0.5s cubic-bezier(0.8, 0, 0.2, 1) forwards; margin-right: 0; }

.ef-animation .maskWH3 { animation: maskWH 0.5s cubic-bezier(0.8, 0, 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.2s ease-in-out 0.6s; }

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

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

/*button
---------------------------------*/
/**/
/*hover color*/

.hvr-blue{ color: #fff !important; background: #004CA0; box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1); }

.hvr-blue:hover { color: #fff !important; background: #00ACEB; box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2); }


.hvr-grn2 { color: #fff !important; background: linear-gradient(45deg, #22C971 35%, #22fa66); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1); }

.hvr-grn2:hover { color: #fff !important; background: linear-gradient(45deg, #22fa66 35%, #22C971); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2); }

/*グラデボタン*/
.hvr-grn:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; transition: 0.5s; background: linear-gradient(45deg, #22C971 35%, #22fa66); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1); }

.hvr-grn:after { content: ""; width: 100%; height: 100%; position: absolute; z-index: -2; left: 0; background: linear-gradient(45deg, #22fa66 35%, #22C971); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2); }

.hvr-grn:hover:before { opacity: 0; }

/**/
.button-Main { 
	position: relative; 
	z-index: 0; 
	color: #fff !important; 
	width: 100%; 
	padding: 1.6rem; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	font-weight: 800; 
	text-decoration: none; 
	overflow: hidden; 
	transition: 0.5s; }



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

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

.first-View { 
	padding: 0; 
	width: 100%; 
	height: auto; position: relative; }

/*- @media 768px-*/
@media screen and (max-width: 768px) { 
.first-View { margin-bottom: 0px; } }


header { 
	width: 100%; 
	padding: 6rem 0;   }

/**/
/*- @media 768px-*/
@media screen and (max-width: 768px) { 
header { padding: 1.6rem 0;   }
}


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

hero-Header
/////////////////////////////////*/

/**/
.hero-Header { 
	position: relative; 
	margin: 0 auto 0; 
	padding: 4vw 2rem; 
	max-width: 1440px; 
	overflow: inherit; }

/**/
.hero-Header__Ttl { 
	width: 100%; 
	position: relative;

	div {
	position: relative;z-index: 10;
	h2 { margin-bottom: 80px; }
	h3 { margin-bottom: 16px; font-weight: 600;}
	h4 {  } }
 }

.hero-Header__Img { 
	position: absolute;
	top:-2vw;
	right:5vw; 
	z-index: 1; 
	width:min(760px, 52vw); img{width: 100%;} }

/*
.hero-Header__Img { 
	position: absolute;
	top:-2vw;
	right:5vw; 
	z-index: 1; 
	width:760px; img{width: 100%;} }
@media screen and (max-width: 1300px) { 
.hero-Header__Img { width:52vw; }
}*/

/**/
@media screen and (max-width: 959px) { 
.hero-Header { margin: 4vw auto ; padding: 0rem 2rem 0; }

.hero-Header__Ttl { width: 100%; position: relative;
div {h2 { margin-bottom: 16px; }
h3 { margin-bottom: 8px; font-weight: 600;}
h4 { margin-bottom: 32px; }}}
.hero-Header__Img {  position:  relative; right:0%;  width: 100%;  img{width: 100%; text-align: center;}}
}






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

Contents
/////////////////////////////////*/
main { margin: 0 auto; padding: 0; width: 100%; height: auto; position: relative; overflow: hidden; }




/*h2ttl-Wrap
---------------------------*/
.h2ttl-Wrap { 
	position: relative; 
	width: 100%; 
	height: auto; 
	margin-bottom: 60px; 

	.h2ttl-Inner { 
		position: relative; 
		margin: 0 auto; 
		padding: 0; 
		width: 100%; 
		text-align: center; 

		h2 { 
			color:#004CA0;
			text-align: center; 
			margin-bottom: 15px; 
			font-weight: 600; }

		.h2ttl__Line { 
			margin-bottom: 15px; 
			margin-inline: auto; 
			max-width: 250px; 
			height: 10px; 
			 background: linear-gradient(90deg, #004CA1 5%, #00ADEC); }
	
	.h2ttl__Line2 { 
			margin-bottom: 15px; 
			margin-inline: auto; 
			max-width: 250px; 
			height: 10px; 
			 background: #fff; } }}



@media screen and (max-width: 768px) { .h2ttl-Wrap { margin-bottom: 20px; }
  .h2ttl-Wrap .h2ttl-Inner { margin: 0 auto; }
  .h2ttl-Wrap .h2ttl-Inner h2 { margin-bottom: 5px; font-weight: 600; }
  .h2ttl-Wrap .h2ttl-Inner .h2ttl__Line { margin-bottom: 5px; max-width: 470px; height: 5px; }
  .h2ttl-Wrap .h2ttl-Inner .h2ttl__Line2 { margin-bottom: 5px; height: 5px; }
  .h2ttl-Wrap .h2ttl-Inner span { display: block; text-align: center; font-weight: 600; }
  .h2ttl-Wrap .h2ttl-Inner p { margin-top: 0px; text-align: center; } }





/*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__Body { }

/**/
.foot__Nav {  }
.foot__Nav li h2 { color: #fff; }
.foot__Nav li address { color: #fff; }
.foot__Nav li div a { color: #fff; }
.foot__Nav li ul li a { color: #fff; }

.foot__Item { max-width: 250px; }

.foot__Item2 { margin-top: 30px; width: calc(100% - 400px); }

#copy { text-align: center; padding: 20px 0; color: #22C971; }

/*- @media 768px-*/
@media screen and (max-width: 768px) { 
	footer { padding-bottom: 0rem; }
  .foot__Nav { ; width: 100%; }
  .foot__Nav ul li { color: #fff; }
  .foot__Item { width: 100%; }
  .foot__Item2 { width: 100%; margin-top: 10px; } }