@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */

html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections
   ========================================================================== */

body { margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main { display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */

hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/**

 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics
   ========================================================================== */

a { background-color: transparent; }

abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

strong { font-weight: bolder; }

/**

 * 2. Correct the odd `em` font sizing in all browsers.
 */

samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

small { font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in

 */

sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content
   ========================================================================== */

img { border-style: none; }

/* Forms
   ========================================================================== */

textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

input { /* 1 */ overflow: visible; }

select { /* 1 */ text-transform: none; }

[type=button],
[type=reset],
[type=submit] { -webkit-appearance: button; }

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner { border-style: none; padding: 0; }

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { padding: 0.35em 0.75em 0.625em; }

/**

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 *    `fieldset` elements in all browsers.
 */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

progress { vertical-align: baseline; }

textarea { overflow: auto; }

[type=checkbox],
[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button { height: auto; }

[type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

[type=search]::-webkit-search-decoration { -webkit-appearance: none; }

/**

 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive
   ========================================================================== */

details { display: block; }

summary { display: list-item; }

/* Misc
   ========================================================================== */

template { display: none; }

[hidden] { display: none; }

a img { border-style: none; }

h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, figure, p { margin: 0; padding: 0; }

ul, li { list-style: none; }

.font-overpass { font-optical-sizing: auto; font-style: normal; }

@font-face { font-family: "icons"; src: url("../fonts/icons.woff") format("woff"); font-weight: normal; font-style: normal; }
[class^=icons-], [class*=" icons-"] { display: inline-block; font-family: "icons"; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icons-plus-a:before { content: "\ea01"; }

.icons-blank:before { content: "\ea02"; }

.icons-arrow-a:before { content: "\ea03"; }

.icons-arrow-b:before { content: "\ea04"; }

.icons-arrow-c:before { content: "\ea05"; }

.icons-minus-a:before { content: "\ea06"; }

.icons-maker:before { content: "\ea07"; }

.icons-factory:before { content: "\ea08"; }

.icons-mail:before { content: "\ea09"; }

.icons-check-circle:before { content: "\ea0a"; }

.icons-connected-tv:before { content: "\ea0b"; }

.icons-data-check:before { content: "\ea0c"; }

.icons-settings:before { content: "\ea0d"; }

.icons-sim-card-download:before { content: "\ea0e"; }

.icons-person:before { content: "\ea0f"; }

.icons-bulb:before { content: "\ea10"; }

.icons-monitoring:before { content: "\ea11"; }

.icons-trackpad-input:before { content: "\ea12"; }

.icons-loupe-plus:before { content: "\ea13"; }

.icons-info:before { content: "\ea14"; }

.icons-news:before { content: "\ea15"; }

.icons-build:before { content: "\ea16"; }

.icons-settings-b-roll:before { content: "\ea17"; }

.icons-app-registration:before { content: "\ea18"; }

.icons-gesture-select:before { content: "\ea19"; }

.icons-data-info-alert:before { content: "\ea1a"; }

.icons-forward-to-inbox:before { content: "\ea1b"; }

.icons-payments:before { content: "\ea1c"; }

.icons-acute:before { content: "\ea1d"; }

.icons-check:before { content: "\ea1e"; }

.icons-distance:before { content: "\ea1f"; }

.icons-man:before { content: "\ea20"; }

.icons-arrow-up:before { content: "\ea21"; }

.icons-camp:before { content: "\ea22"; }

.icons-soup:before { content: "\ea23"; }

.icons-game:before { content: "\ea24"; }

.icons-flight:before { content: "\ea25"; }

.icons-soccer:before { content: "\ea26"; }

.icons-piano:before { content: "\ea27"; }

.icons-exercise:before { content: "\ea28"; }

.icons-book:before { content: "\ea29"; }

.icons-golf:before { content: "\ea2a"; }

.icons-car:before { content: "\ea2b"; }

.icons-bike:before { content: "\ea2c"; }

.icons-cake:before { content: "\ea2d"; }

.icons-run:before { content: "\ea2e"; }

.icons-x:before { content: "\ea2f"; }

.icons-facebook:before { content: "\ea30"; }

.icons-instagram:before { content: "\ea31"; }

.icons-youtube:before { content: "\ea32"; }

.icons-line:before { content: "\ea33"; }

.anim-delay-01 { transition-delay: 0.1s !important; }

.anim-delay-02 { transition-delay: 0.2s !important; }

.anim-delay-03 { transition-delay: 0.3s !important; }

.anim-delay-04 { transition-delay: 0.4s !important; }

.anim-delay-05 { transition-delay: 0.5s !important; }

.anim-delay-06 { transition-delay: 0.6s !important; }

.anim-delay-07 { transition-delay: 0.7s !important; }

.anim-delay-08 { transition-delay: 0.8s !important; }

.anim-delay-09 { transition-delay: 0.9s !important; }

.anim-delay-10 { transition-delay: 1s !important; }

@media screen and (max-width:1023px) {
  
  .anim-delay-sp-01 { transition-delay: 0.1s !important; }
  .anim-delay-sp-02 { transition-delay: 0.2s !important; }
  .anim-delay-sp-03 { transition-delay: 0.3s !important; }
  .anim-delay-sp-04 { transition-delay: 0.4s !important; }
  .anim-delay-sp-05 { transition-delay: 0.5s !important; }
  .anim-delay-sp-06 { transition-delay: 0.6s !important; }
  .anim-delay-sp-07 { transition-delay: 0.7s !important; }
  .anim-delay-sp-08 { transition-delay: 0.8s !important; }
  .anim-delay-sp-09 { transition-delay: 0.9s !important; }
  .anim-delay-sp-10 { transition-delay: 1s !important; }
  
  .animation-drop { opacity: 0; transform: translateY(-20px); transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.7s linear; }
  .animation-drop.scroll-in { opacity: 1; transform: translateY(0); }
  .animation-up { opacity: 0; transform: translateY(30px); transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.7s linear; }
  .animation-up.scroll-in { opacity: 1; transform: translateY(0); }
  .animation-left-in { opacity: 0; transform: translateX(-30px); transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.7s linear; }
  .animation-left-in.scroll-in { opacity: 1; transform: translateX(0); }
  .animation-right-in { opacity: 0; transform: translateX(20px); transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.7s linear; }
  .animation-right-in.scroll-in { opacity: 1; transform: translateX(0); }
}

@media screen and (min-width:1024px) {
  .anim-delay-pc-01 { transition-delay: 0.1s !important; }
  .anim-delay-pc-02 { transition-delay: 0.2s !important; }
  .anim-delay-pc-03 { transition-delay: 0.3s !important; }
  .anim-delay-pc-04 { transition-delay: 0.4s !important; }
  .anim-delay-pc-05 { transition-delay: 0.5s !important; }
  .anim-delay-pc-06 { transition-delay: 0.6s !important; }
  .anim-delay-pc-07 { transition-delay: 0.7s !important; }
  .anim-delay-pc-08 { transition-delay: 0.8s !important; }
  .anim-delay-pc-09 { transition-delay: 0.9s !important; }
  .anim-delay-pc-10 { transition-delay: 1s !important; }
  
  .animation-drop { opacity: 0; transform: translateY(-30px); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s linear; }
  .animation-drop.scroll-in { opacity: 1; transform: translateY(0); }
  .animation-up { opacity: 0; transform: translateY(30px); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s linear; }
  .animation-up.scroll-in { opacity: 1; transform: translateY(0); }
  .animation-left-in { opacity: 0; transform: translateX(-30px); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s linear; }
  .animation-left-in.scroll-in { opacity: 1; transform: translateX(0); }
  .animation-right-in { opacity: 0; transform: translateX(30px); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s linear; }
  .animation-right-in.scroll-in { opacity: 1; transform: translateX(0); }
}
/*

getvw(50,1400)となる
*/
/*

body{
  @include ms-w('max',1200){
    background-color: red;
  }
}
*/

::selection { background-color: #19B84F; color: white; }

html, body { width: 100%; }

html { height: 100%; overflow: auto; }

body { color: #3C3C3C; font-size: 16px; font-weight: 400; font-feature-settings: "palt"; /*ipad 文字サイズ対策*/ text-size-adjust: none; -webkit-text-size-adjust: none; }

main { width: 100%; display: block; }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

a { color: inherit; text-decoration: none; }

img { vertical-align: top; width: 100%; }

.inline-block { display: inline-block; }

.text-align-right { text-align: right !important; }

.text-align-left { text-align: left !important; }

.text-align-center { text-align: center !important; }

@media screen and (max-width:1023px) {
  br.pc { display: none; }
}

@media screen and (min-width:1024px) {
  br.sp { display: none; }
}

@media screen and (max-width:1023px) {
  .common-contents-box { margin: 0 auto; width: 90%; }
}

@media screen and (min-width:1024px) {
  /*
  左右余白7.81%になる比率

  */
  .common-contents-box { margin: 0 auto; width: 84.365%; max-width: 1400px; }
}
/*

角丸ボタン(cssクラス名 .common-round-btn）

-whiteと-greenはhoverアニメーションの関係でsvgを使用してます（枠線が走るアニメーション）
svg部分はpugのmixinで外部化してます。引数はボタンの横幅と縦幅です。

↓↓↓↓↓↓↓↓pugの記述例↓↓↓↓↓↓↓↓↓

.-grad-greenや.-grad-orangeなどのグラデーションボタン↓↓↓↓↓↓↓

  a(href="#")
    |詳細はこちら

.-whiteや.-greenなどのhoverで枠線アニメがあるボタン↓↓↓↓↓↓↓

  a(href="#")
    +round-button(240,50)

      |詳細はこちら

pcとspでボタンサイズが違う場合↓↓↓↓↓↓↓↓

  a(href="#")

      +round-button(300,50)

      +round-button(290,60)

      |詳細はこちら

*/

.common-round-btn { position: relative; }
@media (hover: hover) {
  .common-round-btn.-white:hover span { color: #19B84F; }
  .common-round-btn.-white:hover svg .r-1 { stroke-dashoffset: 0; }
}
.common-round-btn.-white span { position: relative; transition: color 0.2s; }
.common-round-btn.-white svg { overflow: visible; position: absolute; top: 0; left: 0; }
.common-round-btn.-white svg .r-0 { stroke: #D5D5D5; stroke-width: 1; fill: white; }
.common-round-btn.-white svg .r-1 { stroke: #19B84F; stroke-width: 1; fill: none; transition: 0.5s ease; }
@media (hover: hover) {
  .common-round-btn.-green:hover span { color: #19B84F; }
  .common-round-btn.-green:hover svg .r-0 { stroke-width: 1; fill: white; }
  .common-round-btn.-green:hover svg .r-1 { stroke-dashoffset: 0; }
}
.common-round-btn.-green span { color: white; position: relative; transition: color 0.2s; }
.common-round-btn.-green svg { overflow: visible; position: absolute; top: 0; left: 0; }
.common-round-btn.-green svg .r-0 { stroke: #D5D5D5; stroke-width: 0; fill: #19B84F; }
.common-round-btn.-green svg .r-1 { stroke: #19B84F; stroke-width: 1; fill: none; transition: 0.5s ease; }
.common-round-btn.-orange-border { border: 1px solid #F29710; background: white; color: orange; }
.common-round-btn.-grad-green { color: white; background: linear-gradient(to right, rgb(156, 207, 13), rgb(1, 206, 163)); border: none; position: relative; overflow: hidden; }
.common-round-btn.-grad-green::before { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(to right, rgb(175, 236, 7), rgb(0, 219, 174)); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s; }
.common-round-btn.-grad-green a, .common-round-btn.-grad-green button { position: relative; }
@media (hover: hover) {
  .common-round-btn.-grad-green:hover::before { opacity: 1; }
}
.common-round-btn.-grad-orange { color: white; background: linear-gradient(to right, rgb(231, 190, 16), rgb(255, 140, 69)); border: none; position: relative; overflow: hidden; }
.common-round-btn.-grad-orange::before { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(to right, rgb(255, 211, 25), rgb(255, 131, 55)); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s; }
.common-round-btn.-grad-orange a, .common-round-btn.-grad-orange button { position: relative; }
@media (hover: hover) {
  .common-round-btn.-grad-orange:hover::before { opacity: 1; }
}
.common-round-btn button { background: none; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: inherit; cursor: pointer; }

@media screen and (max-width:1023px) {
  .common-round-btn { width: 240px; height: 50px; border-radius: 30px; }
  .common-round-btn .pc { display: none; }
  .common-round-btn a, .common-round-btn button { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; font-weight: 600; width: 100%; height: 100%; }
}

@media screen and (min-width:1024px) {
  .common-round-btn { width: 240px; height: 50px; border-radius: 30px; }
  .common-round-btn .sp { display: none; }
  .common-round-btn a, .common-round-btn button { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; font-weight: 600; width: 100%; height: 100%; }
}

@media screen and (max-width:1023px) {
  .common-sec-title .common-sec-title-en { font-optical-sizing: auto; font-style: normal; color: #19B84F; font-size: 0.12rem; font-weight: 500; line-height: 1.5em; text-align: center; }
  .common-sec-title .common-sec-title-ja { margin-top: 8px; font-size: 0.2rem; font-weight: 600; line-height: 1.7em; text-align: left; }
}

@media screen and (min-width:1024px) {
  .common-sec-title { text-align: center; }
  .common-sec-title .common-sec-title-en { font-optical-sizing: auto; font-style: normal; color: #19B84F; font-size: 20px; font-weight: 500; line-height: 1.5em; }
  .common-sec-title .common-sec-title-ja { margin-top: 8px; font-size: 32px; font-weight: 600; line-height: 1.7em; }
}

@keyframes bars-visible {
  0% { visibility: hidden; }
  100% { visibility: visible; }
}
@keyframes bar1-on {
  0% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0) rotate(150deg); }
}
@keyframes bar1-off {
  0% { transform: translateY(0) rotate(150deg); }
  50% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}
@keyframes bar2-on {
  0% { transform: translateY(5px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0) rotate(-150deg); }
}
@keyframes bar2-off {
  0% { transform: translateY(0) rotate(-150deg); }
  50% { transform: translateY(0); }
  100% { transform: translateY(5px); }
}