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

reset
///////////////////////////////////*/
/* Fonts
---------------------------------------------------------------------*/
/*localfont  -------------------------*/
@font-face { font-family: hvb; src: url("../fonts/Helvetica Bold.TTF"); }
@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon__q_6ywhrr-value_f52be908.eot"); src: url("../fonts/icomoon__q_6ywhrr-value_f52be908.eot") format("embedded-opentype"), url("../fonts/icomoon__q_6ywhrr-value_f52be908.ttf") format("truetype"), url("../fonts/icomoon__q_6ywhrr-value_f52be908.woff") format("woff"), url("../fonts/icomoon__q_6ywhrr-value_f52be908.svg") 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-x:before { content: "\e90c"; }

.icon-back:before { content: "\e90a"; }

.icon-hide:before { content: "\e90b"; }

.icon-content-copy:before { content: "\e905"; }

.icon-view:before { content: "\e900"; }

.icon-link:before { content: "\e901"; padding-left: 5px; }

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

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

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

@media screen and (max-width: 768px) { .icon-columun:before { width: 40px; height: 40px; }
  .icon-mov:before { width: 40px; height: 40px; } }
/**/
/*site main rules
---------------------------------------------------------------------*/
/*color  ------------------*/
/*bgcolor  ------------------*/
.bgcYel { background-color: #ffe700; }

.bgcYel2 { background-color: #FFFCE5 !important; }

.bgcRed { background-color: #ff2544; }

.bgcRed2 { background-color: #FFEBEB !important; }

.bgcBlue { background-color: #58d2ed; }

.bgcPink { background-color: #ff2544; }

.bgcGrn { background-color: #009f00; }

.bgcPpl { background-color: #c26199; }

.bgcGly { background-color: #EAEAEA; }

.bgcWh { background-color: #fff; }

/**/
.bgcYel-z { background: #ffe700 url("../images/common/bg_zara.png") repeat-x center bottom; }

.bgcRed-z { background: #ff2544 url("../images/common/bg_zara.png") repeat-x center bottom; }

.bgcBlue-z { background: #58d2ed url("../images/common/bg_zara.png") repeat-x center bottom; }

.bgcGrn-z { background: #009f00 url("../images/common/bg_zara.png") repeat-x center bottom; }

.bgcPpl-z { background: #c26199 url("../images/common/bg_zara.png") repeat-x center bottom; }

/**/
.clrRed { color: #ff2544 !important; }

.clrYel { color: #ffe700 !important; }

.clrBlue { color: #58d2ed !important; }

.clrPink { color: #ff2544 !important; }

.clrGrn { color: #009f00 !important; }

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

::-moz-selection { /* Firefox */ background: #ffe700; 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: 2; color: #4B4B4B; background-color: #fff; font-weight: 600; font-family: "Zen Maru Gothic", serif; -webkit-text-size-adjust: 100%; }

/**/
ruby rt { font-size: 1rem !important; letter-spacing: 0.00001em; }

/*responsive FONTS*/
.tx-60 { font-size: clamp(3rem, 4vw, 6rem); line-height: 1.2; font-weight: 500; letter-spacing: 0.00001em; }

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

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

.tx-40 { font-size: clamp(2.4rem, 3vw, 4rem); line-height: 1.6; font-weight: 500; 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.08em; font-feature-settings: "palt"; }

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

.tx-26 { font-size: clamp(2rem, 2.4vw, 2.6rem); line-height: 1.5; font-weight: 500; 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: 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: 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"; }

@media screen and (max-width: 959px) { .tx-60 { line-height: 1.2; }
  .tx-40 { line-height: 1.2; } }
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: 1350px) { .brNone { display: none; } }
@media screen and (max-width: 959px) { .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-align-l { text-align: left; }

.txt-align-r { text-align: right; }

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

module
///////////////////////////////////*/
/*background color
---------------------------*/
.bg-Cmn { background: url("../images/common/bg_common.png") repeat left top; }

.bg-Mv { background: url("../images/common/bg_mv.png") no-repeat center top; }

.bg-Intro { background: url("../images/top/bg_intro.png") no-repeat center center; }

.bg-manabu { background: #ffe700 url("../images/manabu/bg_manga.png") no-repeat right bottom; }

@media screen and (max-width: 959px) { .bg-Intro { background: none; } }
@media screen and (max-width: 768px) { .bg-Mv-sp { background: url("../images/common/bg_mv_sp.png") no-repeat center center; }
  /*.bg-Contact{background: url("../images/common/bg_contact_sp.png") no-repeat center top; background-size: cover; }*/ }
/*inner
---------------------------*/
.inner { position: relative; margin: 0 auto; padding: 12rem 2rem; width: min(100%, 1064px); }

.inner2 { position: relative; margin: 0 auto; padding: 6rem 2rem 12rem; /*max-width: 1160px;*/ width: min(100%, 1064px); }

.inner3 { position: relative; margin: 0 auto; padding: 6rem 2rem; /*max-width: 1160px;*/ width: min(100%, 1064px); }

.inner-top { position: relative; margin: 0 auto; padding: 16rem 2rem 0rem; /*max-width: 1160px;*/ width: min(100%, 1064px); }

@media screen and (max-width: 959px) { .inner { padding: 4rem 2rem; }
  .inner2 { padding: 4rem 2rem; }
  .inner3 { padding: 4rem 2rem; }
  .inner-top { padding: 4rem 2rem; } }
/*flex-box
---------------------------*/
.flex-Sb { display: flex; flex-wrap: wrap; justify-content: space-between; }

.flex-Center { display: flex; flex-wrap: wrap; justify-content: space-around; }

.flex-St { display: flex; flex-wrap: wrap; justify-content: flex-start; }

.flex-Nomal { display: flex; flex-wrap: wrap; }

/*mouse storker
---------------------------*/
.manabu-Menu__List 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, 0.9); 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(255, 191, 0, 0.5); border-radius: 50%; transform: translate(0, 0); transition: all 0.3s ease-out; z-index: 9999; opacity: 0; }

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

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

/*//////////////////////////////////
 animation
///////////////////////////////////*/
/*LOADING
---------------------------------

/*要素出現
---------------------------------*/
/* ------ 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: #ffe700; 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; }

.maskWH3 { width: 100%; height: 100%; position: absolute; top: 0; z-index: 5; background-color: #f2f2f2; }

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

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

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

/*button
---------------------------------*/
.button-Main { width: 100%; max-width: 300px; height: 60px; padding: 0 20px; position: relative; text-decoration: none; outline: none; display: flex; border-radius: 9999px; background-color: #fff; border: 1px solid #d9d9d9; transition: all 0.3s ease, background-color 0.3s; overflow: hidden; background-size: 400%; font-weight: 700; }

/* 伸びてくる背景 */
.button-Main::before { content: ""; position: absolute; top: 0; left: -10px; z-index: 2; transform: scaleX(0); transform-origin: 0 50%; width: 110%; height: inherit; border-radius: inherit; background-color: #ffe700; transition: all 0.3s ease; }

/* 丸アイコン */
.button-Main::after { content: ""; position: absolute; top: calc(50% - 8px); right: 25px; z-index: 3; display: inline-block; width: 16px; height: 16px; background-color: #ffe700; border-radius: 20px; transition: all 0.3s ease; }

/* テキスト */
.button-Main .text { position: relative; width: 100%; top: 13px; z-index: 5; transition: all 0.3s ease; }

/**/
.arrow::after { position: absolute; top: calc(50% - 17px); right: 5px; content: ''; box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-left: 5px solid #4B4B4B; }

.arrow:hover::after { border-left: 5px solid #4B4B4B; }

/* ホバーアニメーション */
.button-Main:hover { border: 1px solid #ffe700; }

.button-Main:hover::before { transform: scaleX(1); }

.button-Main:hover .text { color: #fff; color: #4B4B4B; }

.button-Main:hover::after { background-color: #fff; transform-origin: center; transform: scale(2); }

/**/
@media screen and (max-width: 768px) { .button-Main { height: 48px; }
  .button-Main .text { top: 5px; }
  .arrow::after { top: calc(50% - 9px); } }
/**/
.button-Sub { cursor: pointer; display: inline-block; position: relative; vertical-align: middle; z-index: 0; transition: all 0.25s; padding: 1.2rem; width: 100%; height: auto; text-align: center; font-size: 3.2rem; font-weight: 500; border-radius: 50px; background-color: #ffe700; color: #4B4B4B; border: 1px solid #ffe700; letter-spacing: 0.05em; font-family: "Zen Maru Gothic", serif; }

.button-Sub:hover { background-color: #4B4B4B; color: #fff; border: 1px solid #4B4B4B; }

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

	HumbergerMenu

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

@media screen and (max-width: 1000px) { #sp-nav { display: inherit; position: fixed; height: auto; z-index: 10000; width: 100%; }
  /**/
  .gNav-Btn { width: 45px; height: 45px; border-radius: 3%; text-align: center; position: fixed; z-index: 100001; top: 10px; right: 10px; border-radius: 10px; background: #494949; }
  /* #nav-toggle -------*/
  #nav-toggle { height: 45px; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  #nav-toggle div { margin: 13px auto 0; position: relative; width: 25px; }
  #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; 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: #fff; }
  /* *********************************************************** nav-list *********************************************************** */
  .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; }
  .spNav__H1 h1 { width: 180px; }
  .spNav__main { margin: 0px auto 5px; padding: 0; width: 100%; height: auto; }
  .spNav__main li { width: 100%; height: auto; font-size: 1.4rem; line-height: 20px; font-weight: 700; opacity: 0; }
  .spNav__Item .pdng { padding: 1.4rem; border-bottom: 1px solid #E6E6E6; }
  .spNav__main li a { display: block; position: relative; text-align: left; color: #111; text-decoration: none; transition: all 0.2s; }
  .spNav__main li a:hover { color: #ffe700 !important; }
  .spNav__main li ul { padding: 0; background-color: #F8F8F8; }
  .spNav__main li ul li { margin: 0 auto; width: 90%; padding: 1.4rem 0; font-weight: 400 !important; border-bottom: 1px solid #E6E6E6; }
  .spNav__main li ul li:last-child { border-bottom: none; }
  /*アコーディオン ------------------------------*/
  .toggle_title { position: relative; font-size: 1.4rem; font-weight: 700 !important; padding: 1.4rem; cursor: pointer; border-bottom: 1px solid #E6E6E6; }
  .toggle_btn { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); background: #555555; display: block; width: 24px; height: 24px; text-indent: 100%; white-space: nowrap; overflow: hidden; border-radius: 50%; }
  .toggle_btn:before, .toggle_btn:after { display: block; content: ''; background-color: #fff; position: absolute; width: 10px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .toggle_btn:before { width: 2px; height: 10px; }
  .toggle_title.selected .toggle_btn:before { content: normal; }
  .toggle_contents dd { display: none; }
  .toggle_btn { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); background-color: #fff; border: 1px solid #555555; display: block; width: 24px; height: 24px; text-indent: 100%; white-space: nowrap; overflow: hidden; border-radius: 50%; }
  .toggle_btn:before, .toggle_btn:after { display: block; content: ''; background-color: #555555; position: absolute; width: 10px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .toggle_btn:before { width: 2px; height: 10px; }
  .toggle_title.selected .toggle_btn:before { content: normal; }
  .toggle_title.selected .toggle_btn { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); background-color: #555555; border: 1px solid #555555; display: block; width: 24px; height: 24px; text-indent: 100%; white-space: nowrap; overflow: hidden; border-radius: 50%; }
  .toggle_title.selected .toggle_btn:before, .toggle_title.selected .toggle_btn:after { display: block; content: ''; background-color: #fff; position: absolute; width: 10px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .toggle_contents dd { display: none; }
  /* .toggle_btn { 	position: absolute; 	top: 50%; 	right: 3%; 	transform: translateY(-50%); 	background: #555555; 	display: block; 	width: 24px; 	height: 24px; 	text-indent: 100%; 	white-space: nowrap; 	overflow: hidden; 	border-radius: 50%; } .toggle_btn:before, .toggle_btn:after { 	display: block; 	content: ''; 	background-color: #fff; 	position: absolute; 	width: 10px; 	height: 2px; 	top: 50%; 	left: 50%; 	transform: translate(-50%, -50%); } .toggle_btn:before { 	width: 2px; 	height: 10px; } .toggle_title.selected .toggle_btn:before { 	content: normal; } .toggle_contents dd { 	display: none; }	*/
  .open nav#h-nav .spNav__main li { opacity: 1; -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: all 0.5s ease-out 0.3s; transition: all .5s ease-out .3s; }
  /*その他 ------------------------------*/
  /*inner ---------------------------*/
  .spNav__Inner { position: relative; margin: 0 auto; padding: 1rem 0; width: 90%; }
  /* spNav__Mail---------*/
  .spNav__Mail { margin: 0; padding-bottom: 2rem; width: 100%; position: relative; border-bottom: 1px solid #E6E6E6; }
  .spNav__Mail p { text-align: center; }
  .spNav__Mail div { margin-top: 5px; width: 100%; text-align: center; }
  .spNav__Mail div a { width: 240px; }
  .spNav__Mail div span { font-size: 1.8rem; }
  /* @media (min-width: 768px) { .spNav__Tel a[href*="tel:"] {pointer-events: none;cursor: default;text-decoration: none;} }*/
  /* spNav__sub----------*/
  .spNav__sub { padding: 2rem 0; width: 100%; position: relative; border-bottom: 1px solid #E6E6E6; }
  .spNav__sub li { margin-bottom: 5px; width: 100%; }
  .spNav__sub li:last-child { margin-bottom: 0px; }
  .spNav__Copy { text-align: center; margin: 30px auto; color: #777777; font-size: 1rem; line-height: 1.1; font-weight: 500; letter-spacing: 0.05em; } }
/* ***********************************************************
* #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 0.5s ease-out 0.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; }

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

Header
///////////////////////////////////*/
header { margin: 0 auto; padding: 3rem 4rem 0; width: 100%; height: 100px; background: rgba(255, 255, 255, 0); position: fixed; z-index: 1000; top: 0; transition: .5s; }

header h1 { transition: .5s; margin-top: -10px; width: 200px; position: relative; }
header h1 img { transition: .5s; width: 200px; }

/*変形header*/
header.transform { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(15px); padding: 1.6rem 4rem 0; height: 60px; }

header.transform h1 { margin-top: 0px; width: 150px; position: relative; }
header.transform h1 img { width: 150px; }

header.transform nav .gnavList { margin-top: 5px; }

header.transform nav .g-menu__dd-menu { top: 38px; width: 250px; }

header.transform .buttonNavPc:after { bottom: -20px; }

header.transform .current:after { bottom: -20px; }

/**/
/*- @media 959px-*/
@media screen and (max-width: 1000px) { header { padding: 1rem 1rem 2.2rem; width: 100%; height: 60px; }
  header h1 { margin-top: 0px; width: 100px !important; }
  header.transform h1 { margin-top: 0px; } }
/*//////////////////////////////////

G_Nav
/////////////////////////////////*/
nav { width: calc(100% - 200px); height: auto; position: relative; z-index: 9999; }

/*
nav .nav__Tel{
	position: relative;
	width : 160px; 
	
	a{
	display: block;
	color: $clr-wh;
	background-color: $clr-main;
	border-radius: 10px;
		transition: 0.25s;

	font-size: 1.6rem;
	line-height: 1.5;
	text-align: center;
	font-weight: 500; 
	margin: 0;
	padding: 1rem;
		
	span{font-size: 1.8rem;}}}

.nav__Tel a:hover {background-color: #4b4b4b;}*/
nav .gnavList { transition: .5s; margin-top: 15px; padding: 0; width: 100%; height: auto; position: relative; z-index: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; }

nav .gnavList li { position: relative; width: auto; padding: 0; }

nav .gnavList li a { display: block; padding: 0 2.4rem; width: 100%; height: auto; font-size: 2rem; line-height: 1.0; text-align: center; color: #4B4B4B; font-weight: 700; }

/*dropdown----------*/
nav .g-menu__dd-menu { opacity: 0; /* ポイント！！ */ pointer-events: none; /* ポイント！！ */ position: absolute; top: 55px; /* ポイント！！ */ left: 0; width: 250px; }

nav .g-menu__dd-item { border-bottom: 1px solid #ccc; padding: 0 0rem !important; }

nav .g-menu__dd-item:last-child { border-width: 0; }

nav .g-menu__dd-menu-link { display: block; text-align: left !important; padding: 1.6rem 1.6rem 1.6rem 3rem !important; background-color: #fffbd7; transition: .5s; font-size: 1.4rem !important; line-height: 1.2 !important; text-indent: -1.2em; }

nav .g-menu__item:hover .g-menu__link { transition: .5s; background-color: #ffe700; }

nav .g-menu__item:hover .g-menu__dd-menu { opacity: 1; pointer-events: auto; transition: .5s; background-color: #ffe700; }

nav .g-menu__dd-menu-link:hover { background-color: #ffe700; }

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

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

.buttonNavPc:hover:after { transform: scale(1, 1); }

.current { position: relative; width: 100%; }

.current:after { content: ""; position: absolute; z-index: 10; left: 10%; bottom: -36px; width: 80%; height: 4px; background-color: #ffe700; }

/*- @media 959px-*/
@media screen and (max-width: 1000px) { .gnavList { display: none !important; }
  .nav__Tel { display: none !important; } }
#first-View { width: 100%; position: relative; }

.top-View { height: 60vw; }

@media screen and (max-width: 959px) { .top-View { height: 100vw; } }
/**/
.sub-View__ttl { width: 100%; padding: 16rem 2rem 8rem; }
.sub-View__ttl figure { text-align: center; margin-bottom: 30px; }
.sub-View__ttl h2 { line-height: 1; text-align: center; }
.sub-View__ttl .sub-View__Line { margin: 20px auto; max-width: 700px; height: 5px; background-color: #787878; }
.sub-View__ttl h3 { line-height: 1; text-align: center; }
.sub-View__ttl p { margin-top: 30px; text-align: center; }

/**/
@media screen and (max-width: 959px) { .sub-View__ttl { padding: 8rem 2rem 4rem; }
  .sub-View__ttl figure { text-align: center; margin-bottom: 10px; }
  .sub-View__ttl h2 { line-height: 1; text-align: center; }
  .sub-View__ttl .sub-View__Line { margin: 10px auto; max-width: 700px; height: 2px; background-color: #787878; }
  .sub-View__ttl h3 { line-height: 1; text-align: center; }
  .sub-View__ttl p { margin-top: 10px; text-align: center; } }
.hero-Header { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); max-width: 680px; width: 100%; height: 100%; z-index: 99; }
.hero-Header h2 { margin-left: 0px; width: 60vw; }
.hero-Header p { text-align: center; margin: 30px 0; font-weight: 600; }
.hero-Header figure { position: relative; top: 0%; text-align: center; }

@media screen and (max-width: 959px) { .hero-Header { width: 100%; }
  .hero-Header h2 { margin: 0 auto; top: 52%; width: 70vw; text-align: center; }
  .hero-Header p { width: 95%; text-align: center; margin: 16px auto; font-weight: 600; }
  figure { margin: 0 auto; width: 70vw; text-align: center; } }
.sub-Header { position: relative; margin: 0 auto; padding: 0 2rem; max-width: 1400px; height: auto; }
.sub-Header h4 { margin-top: 50px; color: #ffe700; }

.sub-Header__Ttl { position: relative; margin: 0 auto; padding: 0 auto 40px; width: 100%; height: auto; }
.sub-Header__Ttl h2 { margin-bottom: 0px; font-size: 7rem; line-height: 70px; font-weight: 600; color: #ffe700; letter-spacing: 0.01em; font-feature-settings: "palt"; font-family: ftM; }

/**/
.sub-Header__Nav ul { width: 100%; margin-top: 20px; padding-top: 20px; }
.sub-Header__Nav ul li { font-weight: 500; padding: 0 3rem; display: inline-block; border-right: 1px solid #f2f2f2; }
.sub-Header__Nav ul li:first-child { padding-left: 0; }
.sub-Header__Nav ul li:last-child { border-right: none; }
.sub-Header__Nav ul li a { display: block; position: relative; transition: all 0.25s; }

.sub-Header__Nav a:hover { color: #ffe700; }

.sub-Header__Nav .over { color: #ffe700; }

.bd-Top { border-top: 1px solid #f2f2f2; }

@media screen and (max-width: 768px) { .sub-Header h4 { margin-top: 20px; color: #ffe700; }
  .sub-Header__Ttl h2 { font-size: 3rem; line-height: 30px; }
  .sub-Header__Nav ul { margin-top: 20px; padding-top: 0px; border: 1px solid #f2f2f2; }
  .sub-Header__Nav ul li { padding: 0rem; width: 100%; border-bottom: 1px solid #f2f2f2; border-right: none; }
  .sub-Header__Nav ul li:last-child { border-bottom: none; }
  .sub-Header__Nav ul li a { display: block; position: relative; transition: all 0.25s; padding: 1.5rem; text-align: center; } }
/*//////////////////////////////////

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

/*h2ttl-Wrap
---------------------------*/
.heading-H2 h2 { line-height: 1; letter-spacing: 0.1em; text-align: center; margin-bottom: 40px; }

@media screen and (max-width: 768px) { .heading-H2 h2 { margin-bottom: 10px; } }
/*page-top
---------------------------*/
#page-top { width: 70px; height: 70px; display: none; position: fixed; right: 0.5%; bottom: 40px; 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 { width: 100%; }

/*fInner-----------------*/
.foot__Inner { margin: 0 auto 0; padding: 12rem 2rem 5rem; width: 100%; position: relative; }

/*---------*/
.foot__Body { position: relative; text-align: center; width: 100%; }
.foot__Body h1 { margin: 0 auto; max-width: 250px; margin-bottom: 30px; text-align: center; }
.foot__Body .kikaku { text-align: center; }

.copy { margin-top: 50px; line-height: 2; text-align: right; color: #fff; }

/*- @media 959px-*/
@media screen and (max-width: 959px) { .foot__Inner { padding: 4rem 2rem; }
  .foot__Body h1 { margin-bottom: 20px; text-align: center; }
  .foot__Body .kikaku { text-align: center; } }