/*
Theme Name:プレポ リサーチ
Theme URI:
Author: 西本
Author URI: 
Description:
Version: 1.0.0
*/

/* Document
 * ========================================================================== */
/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */
 *,
::before,
::after {
   box-sizing: border-box; /* 1 */
   background-repeat: no-repeat; /* 2 */
}

/**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
::before,
::after {
   text-decoration: inherit; /* 1 */
   vertical-align: inherit; /* 2 */
}

/**
  * 1. Use the default cursor in all browsers (opinionated).
  * 2. Change the line height in all browsers (opinionated).
  * 3. Breaks words to prevent overflow in all browsers (opinionated).
  * 4. Use a 4-space tab width in all browsers (opinionated).
  * 5. Remove the grey highlight on links in iOS (opinionated).
  * 6. Prevent adjustments of font size after orientation changes in iOS.
  */
:root {
   overflow-wrap: break-word; /* 3 */
   -moz-tab-size: 4; /* 4 */
   -o-tab-size: 4;
      tab-size: 4; /* 4 */
   -webkit-tap-highlight-color: transparent; /* 5 */
   -webkit-text-size-adjust: 100%; /* 6 */
   -moz-text-size-adjust: 100%;
        text-size-adjust: 100%; /* 6 */
}

/* Sections
  * ========================================================================== */
/**
  * Remove the margin in all browsers (opinionated).
  */
body {
  min-height: 100vh;
  margin: 0;
  position: relative;
}
  

/**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Edge, Firefox, and Safari.
  */
/* Grouping content
  * ========================================================================== */
/**
  * Remove the margin on nested lists in Chrome, Edge, and Safari.
  */
/**
  * 1. Correct the inheritance of border color in Firefox.
  * 2. Add the correct box sizing in Firefox.
  */
hr {
   color: inherit; /* 1 */
   height: 0; /* 2 */
}

/**
  * Remove the list style on navigation lists in all browsers (opinionated).
  */
/**
  * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
  */
/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  * 3. Prevent overflow of the container in all browsers (opinionated).
  */
pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
   overflow: auto; /* 3 */
}

/* Text-level semantics
  * ========================================================================== */
/**
  * Add the correct text decoration in Safari.
  */
abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
b, strong {
  font-weight: bolder;
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
code, kbd, samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
}

/**
  * Add the correct font size in all browsers.
  */
small {
  font-size: 80%;
}

/* Embedded content
  * ========================================================================== */
/*
  * Change the alignment on media elements in all browsers (opinionated).
  */
audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

/**
  * Remove the border on iframes in all browsers (opinionated).
  */
iframe {
  border-style: none;
}

/**
  * Change the fill color to match the text color in all browsers (opinionated).
  */
svg:not([fill]) {
  fill: currentColor;
}

/* Tabular data
  * ========================================================================== */
/**
  * 1. Collapse border spacing in all browsers (opinionated).
  * 2. Correct table border color in Chrome, Edge, and Safari.
  * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
  */
table {
  border-collapse: collapse; /* 1 */
  border-color: currentColor; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
  * ========================================================================== */
/**
  * Remove the margin on controls in Safari.
  */
button, input, select {
  margin: 0;
}

/**
  * Correct the inability to style buttons in iOS and Safari.
  */
button, [type=button i], [type=reset i], [type=submit i] {
  -webkit-appearance: button;
}

/**
  * Change the inconsistent appearance in all browsers (opinionated).
  */
fieldset {
  border: 1px solid #a0a0a0;
}

/**
  * Add the correct vertical alignment in Chrome, Edge, and Firefox.
  */
progress {
  vertical-align: baseline;
}

/**
  * 1. Remove the margin in Firefox and Safari.
  * 3. Change the resize direction in all browsers (opinionated).
  */
textarea {
   margin: 0; /* 1 */
   resize: vertical; /* 3 */
}

/**
  * 1. Correct the odd appearance in Chrome, Edge, and Safari.
  * 2. Correct the outline style in Safari.
  */
[type=search i] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
  * Correct the cursor style of increment and decrement buttons in Safari.
  */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
  * Correct the text style of placeholders in Chrome, Edge, and Safari.
  */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
  * Remove the inner padding in Chrome, Edge, and Safari on macOS.
  */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
  * 1. Correct the inability to style upload buttons in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
}

/* Interactive
  * ========================================================================== */
/*
  * Add the correct styles in Safari.
  */
dialog {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
  * Add the correct display in Safari.
  */
details > summary:first-of-type {
  display: list-item;
}

/* Accessibility
  * ========================================================================== */
/**
  * Change the cursor on busy elements in all browsers (opinionated).
  */
[aria-busy=true i] {
  cursor: progress;
}

/*
  * Change the cursor on disabled, not-editable, or otherwise
  * inoperable elements in all browsers (opinionated).
  */
[aria-disabled=true i], [disabled] {
  cursor: not-allowed;
}

/*
  * Change the display on visually hidden accessible elements
  * in all browsers (opinionated).
  */
[aria-hidden=false i][hidden] {
  display: initial;
}

[aria-hidden=false i][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
} 

:root {
  line-height: 1;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
html:focus-within {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", "Noto Sans Japanese", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  background: var(--color-white);
  font-weight: 400;
  font-feature-settings: revert;
  letter-spacing: 0.1em;
  color: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl, dd {
  margin: 0;
}

p {
  margin: 0;
}

blockquote {
  margin: 0;
}

hr {
  margin: 0;
  border: none;
  border-top: 1px solid currentColor;
}

pre {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.1375em;
  transition: var(--transition-duration) var(--transition-timing-function);
}
a.-tel{
  pointer-events: none; 
}
@media (max-width:767px) {
  a.-tel{
    pointer-events: auto; 
  }
}

figure {
  max-width: 100%;
  margin: 0;
}

img, picture, svg, iframe, video {
  max-width: 100%;
  /* height: auto; */
}
img, picture, svg, video {
  height: auto;
}

table {
  width: 100%;
  table-layout: fixed;
}

tbody, thead {
  vertical-align: inherit;
}

th {
  margin: 0;
  text-align: inherit;
  text-align: -webkit-match-parent;
}

td {
  padding: 0;
}

label {
  display: inline-block;
}

button, input, optgroup, select, textarea {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

button, [role=button], [type=button], [type=reset], [type=submit]:not(:disabled) {
  cursor: pointer;
  transition-property: opacity;
  transition-duration: var(--transition-duration);
  transition-timing-function: ease;
}

:root {
  --icon-newWindow: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M11.5%2014.5h-10v-10h1v9h9z%22%2F%3E%3Cpath%20d%3D%22M14.5%2012H4V1.5h10.5V12zM5%2011h8.5V2.5H5V11z%22%2F%3E%3Cpath%20d%3D%22M7.5%204.5v1h2.29L6.63%208.66l.71.71%203.16-3.16V8.5h1v-4z%22%2F%3E%3C%2Fsvg%3E');
  --icon-scroll: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2216%22%20viewBox%3D%220%200%2030%2016%22%20fill%3D%22none%22%3E%20%3Cg%20clip-path%3D%22url(%23clip0_587_843)%22%3E%20%3Cpath%20d%3D%22M15.0012%2016L0%202.04675L1.85521%200L15.0012%2012.2274L28.1473%200L30%202.04675L15.0012%2016Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip0_587_843%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%3C%2Fsvg%3E');
  --icon-arrow: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M25%2020.0024L18.8955%2026.0029L18%2025.2608L23.3495%2020.0024L18%2014.744L18.8955%2014.0029L25%2020.0024Z%22%20fill%3D%22white%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2219.575%22%20stroke%3D%22white%22%20stroke-width%3D%220.85%22%2F%3E%3C%2Fsvg%3E');
  --icon-right-arrow: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M6%204.99958L0.76753%2010L-3.75323e-08%209.3816L4.58528%204.99958L-5.69442e-07%200.617572L0.767529%20-2.4163e-08L6%204.99958Z%22%20fill%3D%22%23222222%22%2F%3E%3C%2Fsvg%3E');
  --color-white: #fff;
  --color-black: #000;
  --color-black-b: #222;
  --color-black-light: #1E1E1E;
  --color-blue: #15126F;
  --color-navy: #003168;
  --color-navy-b: #001935;
  --color-gray: #525252;
  --color-gray-b: #555555;
  --color-gray-c: #605F82;
  --color-gray-light: #fbfbfb;
  --font-sans:  "century-gothic-pro", "Noto Sans Japanese", source-han-sans-japanese, sans-serif;
  --font-zen:  "century-gothic-pro", "Zen Kaku Gothic Antique", "Century Gothic Pro", sans-serif;
  --font-pop: "Poppins", "Noto Sans Japanese", sans-serif;
  --font-Century: "Century Gothic Pro", sans-serif;
  --font-bah: bahnschrift, sans-serif;
  --transition-duration: 0.4s;
  --transition-opacity: 0.65;
  --transition-timing-function: ease;
  --z-index-c-loader: 1000;
  --z-index-site-wrap-drawerBtn: 600;
  --z-index-c-drawer: 550;
  --z-index-site-wrap-header: 150;
  --z-index-site-wrap-sideNav: 150;
  --z-index-site-pagetop: 750;
  --z-index-site-sideNav: 700;
  --z-index-page-fixedToc: 80;
  --px-10: calc(10px * .65);
  --px-20: calc(20px * .65);
  --px-30: calc(30px * .65);
  --px-40: calc(40px * .65);
  --px-46: calc(46px * .65);
  --px-50: calc(50px * .65);
  --px-55: calc(55px * .65);
  --px-60: calc(60px * .65);
  --px-70: calc(70px * .65);
  --px-80: calc(80px * .65);
  --px-90: calc(90px * .65);
  --px-100: calc(100px * .65);
  --px-110: calc(110px * .65);
  --px-120: calc(120px * .65);
  --px-130: calc(130px * .65);
  --px-140: calc(140px * .65);
  --px-150: calc(150px * .65);
  --px-200: calc(200px * .65);
  --px-250: calc(250px * .65);
  --px-300: calc(300px * .65);
  --px-350: calc(350px * .65);
  --px-400: calc(400px * .65);
  --px-450: calc(450px * .65);
  --px-500: calc(500px * .65);
  --px-550: calc(550px * .65);
  --px-600: calc(600px * .65);
  --px-650: calc(650px * .65);
  --px-700: calc(700px * .65);
  --px-750: calc(750px * .65);
  --px-800: calc(800px * .65);
  --leading-trim: calc((1em - 1lh) / 2);
  --content-gutter-medium: 5vw;
  --content-gutter: 6vw;
  --text-shadow-opacity50: 0 0 10px rgba(0, 0, 0, .5);
  --shadow-opacity50: 0 0 10px 0 rgba(0, 0, 0, .5);
  --shadow-opacity25: 0px 4px 4px 0 rgba(0, 0, 0, .25);
  --site-header-height: 90px;
  --site-header-scrolled-height: 90px;
  --site-wrap-border-width: 0px;
  --c-iconBtn-site-wrap-drawerBtn-width: clamp(67px, 11.4285714286vw, 160px);
  --font-10: 10px;
  --font-11: 11px;
  --font-12: 11px;
  --font-13: 12px;
  --font-14: 13px;
  --font-15: 13px;
  --font-16: 15px;
  --font-17: 15px;
  --font-18: 16px;
  --font-19: 16px;
  --font-20: 16px;
  --font-21: 17px;
  --font-22: 18px;
  --font-23: 18px;
  --font-24: 19px;
  --font-25: 19px;
  --font-26: 20px;
  --font-27: 21px;
  --font-28: 21px;
  --font-29: 22px;
  --font-30: 23px;
  --font-31: 23px;
  --font-32: 24px;
  --font-33: 24px;
  --font-34: 25px;
  --font-35: 26px;
  --font-36: 26px;
  --font-37: 27px;
  --font-38: 28px;
  --font-39: 28px;
  --font-40: 29px;
  --font-41: 29px;
  --font-42: 30px;
  --font-43: 31px;
  --font-44: 31px;
  --font-45: 32px;
  --font-46: 33px;
  --font-47: 33px;
  --font-48: 34px;
  --font-49: 34px;
  --font-50: 35px;
  --font-60: 41px;
  --font-64: 45px;
  --font-70: 48px;
  --font-80: 54px;
  --font-90: 60px;
}
@media (min-width: 960px) {
  :root {
    --px-10: 10px;
    --px-20: 20px;
    --px-30: 30px;
    --px-40: 40px;
    --px-46: 46px;
    --px-50: 50px;
    --px-55: 55px;
    --px-60: 60px;
    --px-70: 70px;
    --px-80: 80px;
    --px-90: 90px;
    --px-100: 100px;
    --px-110: 110px;
    --px-120: 120px;
    --px-130: 130px;
    --px-140: 140px;
    --px-150: 150px;
    --px-200: 200px;
    --px-250: 250px;
    --px-300: 300px;
    --px-350: 350px;
    --px-400: 400px;
    --px-450: 450px;
    --px-500: 500px;
    --px-550: 550px;
    --px-600: 600px;
    --px-650: 650px;
    --px-700: 700px;
    --px-750: 750px;
    --px-800: 800px;
  }
}
@media (min-width: 960px) {
  :root {
    --site-header-height: 100px;
    --site-wrap-border-width: clamp(10px, 1.1428571429vw, 16px);
  }
}
@media (min-width: 960px) {
  :root {
    --font-10: 10px;
    --font-11: 11px;
    --font-12: 12px;
    --font-13: 13px;
    --font-14: 14px;
    --font-15: 15px;
    --font-16: 16px;
    --font-17: 17px;
    --font-18: 18px;
    --font-19: 19px;
    --font-20: 20px;
    --font-21: 21px;
    --font-22: 22px;
    --font-23: 23px;
    --font-24: 24px;
    --font-25: 25px;
    --font-26: 26px;
    --font-27: 27px;
    --font-28: 28px;
    --font-29: 29px;
    --font-30: 30px;
    --font-31: 31px;
    --font-32: 32px;
    --font-33: 33px;
    --font-34: 34px;
    --font-35: 35px;
    --font-36: 36px;
    --font-37: 37px;
    --font-38: 38px;
    --font-39: 39px;
    --font-40: 40px;
    --font-41: 41px;
    --font-43: 43px;
    --font-44: 44px;
    --font-45: 45px;
    --font-46: 46px;
    --font-47: 47px;
    --font-48: 48px;
    --font-49: 49px;
    --font-50: 50px;
    --font-60: 60px;
    --font-64: 64px;
    --font-70: 70px;
    --font-80: 80px;
    --font-90: 90px;
  }
}

._d-none {
  display: none !important;
}
._d-block {
  display: block !important;
}
@media (min-width: 460px) {
  ._d-ssm-none {
    display: none !important;
  }
  ._d-ssm-block {
    display: block !important;
  }
}
@media (min-width: 560px) {
  ._d-sm-none {
    display: none !important;
  }
  ._d-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) {
  ._d-md-none {
    display: none !important;
  }
  ._d-md-block {
    display: block !important;
  }
}
@media (min-width: 960px) {
  ._d-lg-none {
    display: none !important;
  }
  ._d-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  ._d-xl-none {
    display: none !important;
  }
  ._d-xl-block {
    display: block !important;
  }
}
@media (min-width: 1300px) {
  ._d-xxl-none {
    display: none !important;
  }
  ._d-xxl-block {
    display: block !important;
  }
}

.-flx{
  display: flex;
}
.-flx.-center{
  justify-content: center;
  align-items:center;
}
/** ==================================================
*  c-loader
* ================================================ */
.c-loader {
  --c-loader-z-index: var(--z-index-c-loader);
  --c-loader-background: var(--color-white);
}
.c-loader {
  z-index: var(--c-loader-z-index);
  opacity: 1;
  visibility: visible;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: var(--c-loader-background);
  line-height: 1.4;
}
.c-loader {
  background: rgba(255, 255, 255, 0.6);
}
.c-loader::after {
  z-index: -1;
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--c-loader-background);
}
.c-loader.-is-loaded {
  animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 both;
}
.c-loader.-is-loaded::after {
  animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both;
}
@keyframes c-loader-curtain {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
/** ==================================================
* c-icon
* ================================================ */
.c-icon{
  display: inline-grid;
  place-items: center;
  padding: 0;
  vertical-align: bottom;
  font-style: normal;
  transition: var(--transition-duration) var(--transition-timing-function);
}
.c-icon::before{
  content: "";
  display: block;
  width: 1lh;
  height: 1lh;
  background-color: var(--color-white);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: var(--transition-duration) var(--transition-timing-function);
}
.c-icon.-arrow::before{
  -webkit-mask-image: var(--icon-arrow);
  mask-image: var(--icon-arrow);
  background-color: var(--color-white);
}
.c-icon.-newWindow::before{
  -webkit-mask-image: var(--icon-newWindow);
  mask-image: var(--icon-newWindow);
  background-color: var(--color-blue);
  width: 20px;
  height: 20px;
}

/** ==================================================
* c-heading
* ================================================ */
.c-heading.-typeA{
  display: flex;
  flex-direction: column;
}
.c-heading.-typeA>.en-ttl{
  color: var(--color-blue);
  font-family: var(--font-Century);
  font-size: var(--font-60);
  font-weight: 300;
  margin-bottom: .2em;
}
.c-heading.-typeA>.ttl{
  color: var(--color-gray-c);
  font-family: var(--font-zen);
  font-size: var(--font-16);
  font-weight: 500;
}

.c-heading.-typeB{
  display: inline-flex;
  flex-direction: column;
  margin-top: var(--px-100);
  border-left: 4px solid var(--color-blue);
}
.c-heading.-typeB>.ttl{
  display: inline;
  overflow: hidden;
}
.c-heading.-typeB>.ttl>.bg{
  color: var(--color-white);
  font-family: var(--font-zen);
  font-size: var(--font-30);
  font-weight: 600;
  background-color: var(--color-blue);
  padding-inline: 28px 16px;
  padding-block: 0.09em .2em;
  line-height: 1.6;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  position: relative;
  overflow: hidden;
}
.c-heading.-typeB>.txt{
  color: var(--color-black-b);
  font-family: var(--font-pop);
  font-size: var(--font-18);
  font-weight: 400;
  line-height: 2;
  padding-block: 17px;
  padding-inline: 24px;
}
.c-heading.-typeB>.txt.-margB0{
  padding-block: 0;
}
@media (max-width:767px) {
  .c-heading.-typeB>.ttl>.bg{
    padding-inline: .5em;
  }
  .c-heading.-typeB>.txt{
    padding-inline: .5em;
  }
}

/** ==================================================
* action
* ================================================ */
.action>.link{
  background-color: var(--color-navy);
  color: var(--color-white);
  padding-block: 15px;
  padding-inline: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px-30);
  width: 360px;
  max-width: 100%;
  margin-inline: auto;
}
.action>.link>.c-icon.-arrow::before{
  width: 40px;
  height: 40px;
}
@media (hover : hover) {
  .action>.link:hover>.c-icon.-arrow::before{
    transform: translateX(5px);
  }
}
@media (max-width:560px) {
  .action>.link{
    width: 100%;
  }
}
/** ==================================================
* ヘッダー
* ================================================ */
#header{
  z-index: var(--z-index-site-wrap-header);
  position: fixed;
  width: 100%;
}
#header::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
  z-index: -1;
  opacity: 0;
  transition: .25s ease-in-out;
  pointer-events: none;
}
#header.-is-scrolled::after{
  opacity: .9;
}
#header.low::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(21, 18, 111, 1) 100%, rgba(21, 18, 111, 1) 100%);
  z-index: -1;
  opacity: 1;
  transition: .25s ease-in-out;
  pointer-events: none;
}
#header.low.-is-scrolled::after{
  opacity: .9;
  background: linear-gradient(to bottom, rgba(21, 18, 111, 1) 90%, rgba(21, 18, 111, 0) 100%);
}
@media (max-width:960px) {
  #header.-is-scrolled::after{
    opacity: 0;
  }
  #header.low.-is-scrolled::after{
    opacity: 0;
  }
}

.site-header{
  height: auto;
  padding-block: 1em;
  padding-inline: calc(var(--content-gutter-medium) / 2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vw;
}
.site-header>.brand{
  display: inline-block;
}
.brand > .link > .logo{
  flex: 0 1 auto;
  opacity: 1;
  width: 330px;
  transition: all .4s ease-in-out;
}
.brand > .link.-is-scrolled > .logo{
  width: 270px;
}
@media (max-width:1200px) {
  .brand > .link > .logo{
    width: 290px;
  }
}
@media (max-width:960px) {
  .brand > .link > .logo{
    width: 200px;
  }
  .brand > .link.-is-scrolled {
    opacity: 0;
    pointer-events: none;
  }
  .brand > .link.-is-scrolled > .logo{
    width: 200px;
  }
}
.site-header>.nav{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--px-20) 4vw;
  margin-left: auto;
}
.site-header>.nav>.item{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  font: inherit;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
  justify-content: flex-end;
  gap: 2vw;
}
.site-header>.nav>.item>.list>.link{
  font-size: 16px;
  color: var(--color-white);
  font-family: var(--font-pop);
  /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.30); */
  font-weight: 500;
  line-height: 1.8;
  text-decoration: none;
}
#header.-is-scrolled>.site-header>.nav>.item>.list>.link{
  color: var(--color-blue);
}
@media (hover : hover) {
  #header>.site-header>.nav>.item>.list>.link{
    background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
    transition: background-size .4s ease-out;
  }
  #header>.site-header>.nav>.item>.list>.link:hover{
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}
@media (max-width:1200px) {
  .site-header>.nav>.item{
    gap: 1.5vw;
  }
}
@media (max-width:960px) {
  .site-header>.nav{
    display: none;
  }
}

/** ==================================================
* hero
* ================================================ */
.hero{
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100%;
}
.hero>.inner>.grid{
  position: relative;
  display: grid;
  justify-items: center;
  grid-template-columns: min(1100px, calc(1100 / 1920 * 100 * 1vw)) 1fr;
}
.hero>.inner>.grid>.movie-box{
  width: 100%;
  height: 100vh;
  max-height: 100%;
  position: sticky;
  top: 0;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 15% 50%);
}
.hero>.inner>.grid>.movie-box>.movie{
  width: 100%;
  height: 100vh;
  max-height: 100%;
  object-fit: cover;
}
.hero>.inner>.grid>.content-box{
  width: min(1000px,100%);
  height: auto;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  background: var(--color-white);
  padding-block: var(--px-200) var(--px-130);
  padding-inline: clamp(10px, 3.3333333333vw, 60px) 0;
}
.hero>.inner>.grid>.content-box>.main-ttl{
  color: var(--color-blue);
  font-family: var(--font-sans);
  font-size: var(--font-50);
  line-height: 1.4;
  letter-spacing: 0.09em;
  font-weight: 600;
  margin-bottom: var(--px-40);
}
.hero>.inner>.grid>.content-box>.main-txt{
  font-size: var(--font-20);
  font-family: var(--font-pop);
  color: var(--color-blue);
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: var(--px-46);
}
.hero>.inner>.grid>.content-box>.badge-media{
  width: min(602px,100%);
  height: auto;
  padding-bottom: var(--px-120);
}
.hero>.inner>.grid>.content-box>.badge-media.-second{
  padding-bottom: var(--px-50);
}
.hero>.inner>.grid>.content-box>.badge-media>.badge-note{
  font-size: var(--font-14);
  font-family: var(--font-pop);
  line-height: 1.8;
  color: var(--color-gray-b);
}
.hero>.inner>.grid>.content-box>.section-ttl{
  font-size: var(--font-32);
  font-family: var(--font-zen);
  color: var(--color-white);
  background: var(--color-blue);
  font-weight: 700;
  padding: var(--px-10);
  margin-block: var(--px-120) var(--px-40);
  display: inline-block;
  line-height: 1.4;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt{
  font-size: var(--font-20);
  font-family: var(--font-pop);
  color: var(--color-blue);
  margin-bottom: var(--px-20);
  line-height: 2;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt:first-of-type{
  margin-bottom: 0;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt.-small{
  font-size: var(--font-14);
  line-height: 1.2;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt>span{
  font-size: var(--font-14);
}

/** ==================================================
* hero SP
* ================================================ */
.hero.-sp>.home-hero{
  position: relative;
}
.hero.-sp>.home-hero>.media{
  height: 100vh;
  max-height: 100%;
  width: 100%;
  position: sticky;
  top: 0;
}
.hero.-sp>.home-hero>.media>.img-wrap{
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  position: relative;
}
.hero.-sp>.home-hero>.media>.img-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
}
.hero.-sp>.home-hero>.media>.img-wrap>.movie{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}
.hero.-sp>.home-hero>.media>.img-wrap.fade-in {
  opacity: 1;
}

.hero.-sp>.home-hero>.deco{
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 95%;
}
.hero.-sp>.home-hero>.deco>.content-box {
  transition: filter 1s ease-in-out, transform 1s ease-in-out;
}
.hero.-sp>.home-hero>.deco>.content-box.shadow-on {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  transform: translateY(-5px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.hero.-sp>.home-hero>.deco>.content-box.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}
.hero.-sp>.home-hero>.deco>.content-box>.main-ttl{
  font-family: var(--font-sans);
  line-height: 1.4;
  letter-spacing: 0.09em;
  font-weight: 600;
  margin-bottom: var(--px-40);
  text-align: center;
  color: var(--color-white);
  font-size: 34px;
}
.hero.-sp>.home-hero>.deco>.content-box>.main-txt{
  font-size: var(--font-20);
  font-family: var(--font-pop);
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: var(--px-46);
  color: var(--color-white);
  text-align: center;
}
.hero.-sp>.home-hero>.deco>.content-box>.badge-media{
  width: min(602px,100%);
  height: auto;
  padding-bottom: var(--px-120);
  margin-inline: auto;
}
.hero.-sp>.home-hero>.deco>.content-box>.badge-media.-second{
  padding-bottom: var(--px-50);
}
.hero.-sp>.home-hero>.deco>.content-box>.badge-media>.badge-note{
  font-size: var(--font-14);
  font-family: var(--font-pop);
  line-height: 1.8;
  color: var(--color-white);
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-ttl{
  font-size: var(--font-32);
  font-family: var(--font-zen);
  font-weight: 700;
  padding: var(--px-10);
  margin-block: var(--px-120) var(--px-40);
  display: inline-block;
  line-height: 1.4;
  background-color: var(--color-white);
  color: var(--color-blue);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt{
  font-size: var(--font-20);
  font-family: var(--font-pop);
  margin-bottom: var(--px-20);
  line-height: 2;
  color: var(--color-white);
  text-align: center;
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt:first-of-type{
  margin-bottom: 0;
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt.-small{
  font-size: var(--font-14);
  line-height: 1.2;
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt>span{
  font-size: var(--font-14);
}

.hero.-sp>.home-hero>.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 21, 64, 0.75);
  opacity: var(--overlay-opacity, 0);
  transition: opacity 0.1s ease-out;
}

.hero.-sp>.home-hero>.content>.wrap{
  padding-block: var(--px-200);
  padding-inline: 3%;
}
.hero.-sp>.home-hero>.content>.wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.hero.-sp>.home-hero>.content>.wrap.show-after-logo {
  opacity: 1;
  transform: translateY(0);
}
.hero.-sp>.home-hero>.content>.wrap.appear {
  opacity: 1;
  transform: translateY(0);
}
.hero.-sp>.home-hero>.content>.wrap>.section-ttl{
  font-size: var(--font-32);
  font-family: var(--font-zen);
  font-weight: 700;
  padding: var(--px-10);
  margin-block: var(--px-120) var(--px-40);
  display: inline-block;
  line-height: 1.4;
  background-color: var(--color-white);
  color: var(--color-blue);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt{
  font-size: var(--font-20);
  font-family: var(--font-pop);
  margin-bottom: var(--px-20);
  line-height: 2;
  color: var(--color-white);
  text-align: center;
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt:first-of-type{
  margin-bottom: 0;
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt.-small{
  font-size: var(--font-14);
  line-height: 1.2;
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt>span{
  font-size: var(--font-14);
}
.hero.-sp>.home-hero>.content>.wrap>.badge-media{
  width: min(602px,100%);
  height: auto;
  padding-bottom: var(--px-120);
  margin-inline: auto;
}
.hero.-sp>.home-hero>.content>.wrap>.badge-media.-second{
  padding-bottom: var(--px-50);
}
.hero.-sp>.home-hero>.content>.wrap>.badge-media>.badge-note{
  font-size: var(--font-14);
  font-family: var(--font-pop);
  line-height: 1.8;
  color: var(--color-white);
}
@media (max-width:560px) {
  .hero.-sp>.home-hero>.deco>.content-box>.main-ttl{
    font-size: 25px;
  }
}

/** ==================================================
* chosen
* ================================================ */
.chosen>.inner{
  padding-inline: clamp(10px, 5.5555555556vw, 100px) 0;
  padding-block: var(--px-120) var(--px-200);
}
.chosen>.inner>.body{
  margin-top: var(--px-70);
}
.chosen>.inner>.body>.item{
  position: relative;
  z-index: 1;
}
.chosen>.inner>.body>.item+.item{
  margin-top: var(--px-100);
}
.chosen>.inner>.body>.item>.media{
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.chosen>.inner>.body>.item>.media::before{
  content: "";
  display: block;
  width: calc(100% - 538px);
  height: 100%;
  background-color: var(--color-gray-light);
  opacity: 0.9;
  position: absolute;
  top: 0;
  left: 0;
}
.chosen>.inner>.body>.item>.media>img{
  width: 100%;
  max-width: 1208px;
  height: 100%;
  min-height: 325px;
  object-fit: cover;
}
.chosen>.inner>.body>.item>.content{
  width: min(1126px,100%);
  padding-top: var(--px-30);
}
.chosen>.inner>.body>.item>.content>.head{
  border-left: 4px solid var(--color-blue);
}
.chosen>.inner>.body>.item>.content>.head>.ttl{
  color: var(--color-blue);
  font-family: var(--font-zen);
  font-size: var(--font-40);
  line-height: 1.8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 34px;
  padding-left: 0.35em;
}
.chosen>.inner>.body>.item>.content>.head>.ttl>span{
  font-size: var(--font-30);
  font-weight: 400;
}
.chosen>.inner>.body>.item>.content>.head>.txt{
  display: inline-block;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-zen);
  font-size: var(--font-20);
  font-weight: 500;
  line-height: 1.8;
  padding-inline: clamp(10px, 4.6666666667vw, 84px) clamp(10px, 4.5555555556vw, 82px);
}
.chosen>.inner>.body>.item>.content>.txt{
  padding-left: clamp(10px, 4.6666666667vw, 84px);
  color: var(--color-black-b);
  font-family: var(--font-pop);
  font-size: var(--font-18);
  font-weight: 400;
  line-height: 2;
  margin-top: var(--px-30);
}

@media (max-width:1440px) {
  .chosen>.inner>.body>.item>.media::before{
    width: 80%;
  }
}
@media (max-width:1100px) {
  .chosen>.inner>.body>.item>.media::before{
    width: 90%;
  }
}
@media (max-width:960px) {
  .chosen>.inner{
    padding-inline: 1em;
    padding-bottom: 80px;
  }
  .chosen>.inner>.body>.item>.media{
    position: unset;
  }
  .chosen>.inner>.body>.item>.media::before{
    position: unset;
    content: none;
  }
  .chosen>.inner>.body>.item>.media>img{
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    min-height: 127px;
  }
  .chosen>.inner>.body>.item>.content>.txt{
    margin-bottom: var(--px-40);
    padding-left: 0;
  }
}
@media (max-width:767px) {
  .chosen>.inner>.body>.item>.content>.head>.ttl{
    flex-direction: column;
    align-items: flex-start;
    gap:0;
    line-height: 1.4;
    padding-bottom: 0.5em;
  }
}

/** ==================================================
* copy
* ================================================ */
.copy{
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.copy::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #efefef;
  width: 25%;
  max-width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  z-index: -1;
}

.copy>.inner{
  padding-block: var(--px-60);
  margin-inline: auto;
  max-width: 750px;
  width: 100%;
}
.copy>.inner>.ttl{
  color: var(--color-blue);
  font-family: var(--font-zen);
  font-size: var(--font-40);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--px-40);
}
.copy>.inner>.txt{
  color: var(--color-black-b);
  font-family: var(--font-pop);
  font-size: var(--font-18);
  font-weight: 400;
  line-height: 2;
}
@media (max-width:960px) {
  .copy>.inner{
    width: 80%;
  }
}

/** ==================================================
* comparison
* ================================================ */
.comparison>.inner{
  padding-block: var(--px-100);
  padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
@media (max-width:960px) {
  .comparison>.inner{
    padding-inline: 1em;
  }
}

/** ==================================================
* fee
* ================================================ */
.fee>.inner{
  width: 100%;
  margin-inline: auto;
  padding-inline: 1em;
  text-align: center;
  position: relative;
  z-index: 1;
}
.fee>.inner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #efefef;
  width: 15%;
  max-width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  z-index: -1;
  opacity: 0;
}
.fee>.inner::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-color: #efefef;
  width: 15%;
  max-width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
  z-index: -1;
  opacity: 0;
}
@media (max-width:767px) {
  .fee>.inner::after{
    content: none;
  }
  .fee>.inner::before{
    content: none;
  }
}

/** ==================================================
* bnr
* ================================================ */
.bnr>.inner{
  padding-block: var(--px-200) var(--px-30);
  padding-inline: 1em;
  text-align: center;
}
.bnr>.inner>.link{
  opacity: 1;
}
@media (hover : hover) {
  .bnr>.inner>.link:hover{
    opacity: 0.65;
  } 
}
@media (max-width:960px) {
  .bnr>.inner{
    padding-top: 80px;
  }
}

/** ==================================================
* customer
* ================================================ */
.customer>.inner{
  padding-block: var(--px-100);
  padding-inline: clamp(10px, 5.5555555556vw, 100px);
}

/** ==================================================
* pie-chart
* ================================================ */
.pie-chart>.inner{
  padding-left: clamp(10px, 16.6666666667vw, 300px);
  position: relative;
  z-index: 5;
}
.pie-chart>.inner::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-color: #efefef;
  width: 25%;
  max-width: 100%;
  height: 100%;
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  z-index: -2;
  overflow: hidden;
  opacity: 0;
}
.pie-chart>.inner::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(img/arrow-bg.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  max-width: 100%;
  height: 100%;
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  z-index: -1;
  opacity: 0;
}
.pie-chart>.inner>.media{
  padding-bottom: var(--px-80);
}
@media (max-width:1240px) {
  .pie-chart>.inner{
    padding-left: 1em;
  }
}
@media (max-width:767px) {
  .pie-chart>.inner::after{
    clip-path: polygon(25% 50%, 100% 50%, 100% 100%, 25% 100%, 0 75%);
  }
  .pie-chart>.inner::before{
    clip-path: polygon(25% 50%, 100% 50%, 100% 100%, 25% 100%, 0 75%);
  }
}

/** ==================================================
* customer-content
* ================================================ */
.customer-content>.inner{
  padding-inline: 1em clamp(10px, 11.1111111111vw, 200px);
  padding-block: var(--px-70);
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.customer-content>.inner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #efefef;
  width: 30%;
  max-width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  z-index: -2;
  overflow: hidden;
  opacity: 0;
}
.customer-content>.inner::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(img/arrow-bg-02.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 30%;
  max-width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  z-index: -1;
  opacity: 0;
}
.customer-content>.inner>.content{
  max-width: 832px;
  margin-left: auto;
}
.customer-content>.inner>.content>.txt,
.customer-content>.inner>.content>.second-txt{
  color: var(--color-black-b);
  font-family: var(--font-pop);
  font-size: var(--font-18);
  line-height: 2;
}
.customer-content>.inner>.content>.txt{
  margin-bottom: var(--px-30);
}
.customer-content>.inner>.content>.second-txt{
  margin-top: var(--px-30);
}
.customer-content>.inner>.content>.ttl{
  color: var(--color-blue);
  font-family: var(--font-zen);
  font-size: var(--font-40);
  font-weight: 700;
  line-height: 1.6;
}
@media (max-width:960px) {
  .customer-content>.inner{
    padding-right: 1em;
  }
}
@media (max-width:767px) {
  .customer-content>.inner::after,
  .customer-content>.inner::before{
    clip-path: polygon(0% 0%, 55% 0, 100% 50%, 55% 100%, 0% 100%);
  }
}

/** ==================================================
* flow
* ================================================ */
.flow{
  padding-block: var(--px-100) var(--px-80);
}
.flow>.inner{
  padding-block: 0 var(--px-80);
  padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
.flow>.content-inner{
  width: min(1100px,95vw);
  margin-inline: auto;
}
.flow>.content-inner>.item>.list{
  display: flex;
  border: 1px solid #B7CADA;
}
.flow>.content-inner>.item>.list+.list{
  border-top: none;
}
.flow>.content-inner>.item>.list>.flow-left{
  position: relative;
  width: 100%;
  min-width: 110px;
  max-width: 200px;
  min-height: 250px;
  background-color: var(--color-blue);
  display: flex;
  justify-content: center;
  align-items: center;
}
.flow>.content-inner>.item>.list>.flow-left>.number{
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-bah);
  font-size: var(--font-26);
  font-weight: 500;
  line-height: 1.8;
}
.flow>.content-inner>.item>.list>.flow-left>.deco{
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 30px;
  height: 16px;
  background-color: var(--color-white);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: var(--transition-duration) var(--transition-timing-function);
  -webkit-mask-image: var(--icon-scroll);
  mask-image: var(--icon-scroll);
}
.scroll-anime{
  animation: arrowDropLoop 2s ease-in-out infinite;
}
@keyframes arrowDropLoop{
  0%{
    transform: translateY(-15px) translateX(-50%);
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  40%{
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
  60%{
    transform: translateY(15px) translateX(-50%);
    opacity: 0;
  }
  100%{
    transform: translateY(-15px) translateX(-50%);
    opacity: 0;
  }
}
.flow>.content-inner>.item>.list>.flow-right{
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 5.5555555556vw, 100px);
  padding-block: var(--px-40) var(--px-50);
  padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
.flow>.content-inner>.item>.list>.flow-right>.content{
  width: 80%;
}
.flow>.content-inner>.item>.list>.flow-right>.content>.ttl{
  color: var(--color-navy-b);
  font-family: var(--font-zen);
  font-size: var(--font-22);
  font-weight: 600;
  line-height: 2;
  margin-bottom: var(--px-20);
  letter-spacing: 0;
}
.flow>.content-inner>.item>.list>.flow-right>.content>.txt{
  color: var(--color-black-b);
  font-family: var(--font-pop);
  font-size: var(--font-15);
  line-height: 2;
  letter-spacing: 0;
}

@media (max-width:767px) {
  .flow>.content-inner>.item>.list>.flow-left{
    width: auto;
    min-width: 95px;
  }
  .flow>.content-inner>.item>.list>.flow-right{
    padding-inline: 1em;
  }
  .flow>.content-inner>.item>.list>.flow-right>.content{
    width: 100%;
  }
  .flow>.content-inner>.item>.list>.flow-right>.content>.ttl{
    display: flex;
    align-items: center;
    gap: 17px;
  }
}

/** ==================================================
* faq
* ================================================ */
.faq{
  position: relative;
  z-index: 1;
  margin-top: var(--px-80);
  overflow: hidden;
}
.faq::before{
  content: "";
  background-color: #efefef;
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
  width: 45%;
  height: 100%;
  background-color: #efefef;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.faq::after{
  content: "";
  background-image: url(img/faq-img.jpg);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  width: 60%;
  height: 100%;
  z-index: -2;
  position: absolute;
  top: 0;
  right: 0;
}
.faq>.inner{
  width: min(700px,95vw);
  margin-inline: auto;
  padding-block: var(--px-80) var(--px-70);
}
.faq>.inner>.flx{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq>.inner>.flx>.content{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.faq>.inner>.flx>.content>.ttl{
  color: var(--color-blue);
  font-family: var(--font-zen);
  font-size: var(--font-60);
  font-weight: 300;
}
.faq>.inner>.flx>.content>.txt{
  color: var(--color-gray-c);
  font-family: var(--font-zen);
  font-size: var(--font-16);
  font-weight: 500;
}
@media (max-width:560px) {
  .faq>.inner>.flx{
    display: block;
  }
  .faq>.inner>.flx>.content{
    align-items: flex-start;
    margin-bottom: 50px;
  }
  .faq::after{
    background-image: url(img/faq-sp-img.jpg);
  }
}
/** ==================================================
* price
* ================================================ */
.price>.inner{
  padding-block: var(--px-120) var(--px-80);
  padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
.price>.inner.-second{
  padding-top: 0;
}
.price>.content-inner{
  position: relative;
}
.price>.content-inner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #efefef;
  width: clamp(100px, 16.6666666667vw, 300px);
  max-width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
  z-index: -1;
  opacity: 0;
}
.price>.content-inner::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-color: #efefef;
  width: clamp(100px, 16.6666666667vw, 300px);
  max-width: 100%;
  height: 100%;
  clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
  z-index: -1;
}
.price>.content-inner>.media{
  padding-block: 1em 2em;
  text-align: center;
}
.price>.content-inner>.media>img{
  width: min(838px,90%);
  margin-inline: auto;
}
@media (max-width:767px) {
  .price>.content-inner::after{
    width: 10%;
    clip-path: polygon(80% 0, 100% 0%, 100% 100%, 0% 100%);
  }
  .price>.content-inner::before{
    width: 10%;
    clip-path: polygon(0 0, 100% 0%, 25% 100%, 0% 100%);
  }
  .price>.content-inner>.media{
    text-align: center;
  }
  .price>.content-inner>.media>img{
    width: 70%;
  }
}

/** ==================================================
* contact
* ================================================ */
.contact{
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-block: var(--px-120) 0;
}
.contact::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-color: #efefef;
  width: 840px;
  max-width: 65%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 8% 50%);
  z-index: -2;
}
.contact::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(img/contact-bg.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 8% 50%);
  opacity: 0.15;
  width: 840px;
  max-width: 65%;
  height: 100%;
  z-index: -1;
}
.contact>.inner{
  width: min(1611px,95vw);
  margin-inline: auto;
  padding-block: var(--px-30);
}
.contact>.inner>.flx{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5em;
}
@media (max-width:960px) {
  .contact{
    margin-top: 0;
  }
}
@media (max-width:767px) {
  .contact>.inner>.flx{
    flex-direction: column;
    gap: 1.5em;
  }
  .contact>.inner>.flx>.item.content{
    text-align: center;
  }
  .contact>.inner>.flx>.item.media,
  .contact>.inner>.flx>.item.media>.action>.link{
    width: 100%;
  }
  .contact>.inner>.flx>.item>img{
    width: 80%;
  }
}
@media (max-width:560px) {
  .contact>.inner>.flx>.item>img{
    width: 100%;
  }
}

/** ==================================================
* footer
* ================================================ */
.footer>.inner{
  background-color: var(--color-blue);
  padding-block: var(--px-40);
  padding-inline: var(--px-110) 1em;
}
.footer>.inner>.flx{
  display: flex;
  gap: 10px;
}
.footer>.inner>.flx>.item{
  color: var(--color-white);
}
.footer>.inner>.flx>.item>.first-name{
  color: #efefef;
  font-family: var(--font-sans);
  font-size: var(--font-15);
  line-height: 1.8;
}
.footer>.inner>.flx>.item>.name{
  font-family: var(--font-pop);
  font-size: var(--font-17);
  font-weight: 600;
  line-height: 2;
}
.footer>.inner>.flx>.item>.info{
  display: flex;
  align-items: center;
  gap: .3em 1em;
  flex-wrap: wrap;
}
.footer>.inner>.flx>.item>.info>.addr,
.footer>.inner>.flx>.item>.info>.tel{
  font-family: var(--font-pop);
  font-size: var(--font-15);
  line-height: 2;
}
.footer>.nav{
  display: flex;
  gap: var(--px-40);
  padding-block: var(--px-30);
  padding-inline: var(--px-110) 1em;
}
.footer>.nav>.menu{
  color: var(--color-navy-b);
  font-family: var(--font-pop);
  font-size: var(--font-14);
  line-height: 2;
}
.footer>.nav>.menu>.link{
  color: var(--color-navy-b);
  font-family: var(--font-sans);
  font-size: var(--font-14);
  line-height: 2;
  text-decoration-line: underline;
}
@media (hover : hover) {
  .footer>.nav>.menu>.link:hover{
    opacity: 0.65;
  }
}
@media (max-width:960px) {
  .footer>.inner{
    padding-left: 1em;
  }
  .footer>.nav{
    padding-left: 1em;
  }
}
@media (max-width:767px) {
  .footer>.inner>.flx{
    flex-direction: column;
  }
  .footer>.inner>.flx>.item>.info{
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .footer>.nav{
    flex-direction: column;
    gap: 0;
  }
}

/** ==================================================
* c-breadcrumb
* ================================================ */
.c-breadcrumb {
  --c-breadcrumb-list-gutter-x: 1em;
  --c-breadcrumb-list-gutter-y: .4em;
}
.c-breadcrumb {
  font: inherit;
  line-height: 1;
}
.c-breadcrumb > .list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-breadcrumb-list-gutter-y) var(--c-breadcrumb-list-gutter-x);
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-breadcrumb > .list > .item {
  display: flex;
  align-items: center;
}
.c-breadcrumb > .list > .item::after {
  content: "";
  flex: 0 0 auto;
  margin-left: var(--c-breadcrumb-list-gutter-x);
}
.c-breadcrumb > .list > .item:last-child::after {
  display: none;
}
.c-breadcrumb > .list.-right {
  justify-content: right;
  text-align: right;
}
.c-breadcrumb {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray-c);
}
.c-breadcrumb > .list {
  align-items: center;
  min-height: 3.4em;
  padding: 0.6em 0;
}
.c-breadcrumb > .list > .item::after {
  content: "";
  display: block;
  width: 10px;
  height: 6px;
  background-color: var(--color-black);
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  transition: var(--transition-duration) var(--transition-timing-function);
  -webkit-mask-image: var(--icon-right-arrow);
  mask-image: var(--icon-right-arrow);
}
.c-breadcrumb > .list > .item > .link{
  color: var(--color-black-b);
}
@media (hover : hover) {
  .c-breadcrumb > .list > .item > .link:hover {
    text-decoration: underline;
    opacity: 1;
  }
}
@media (min-width: 960px) {
  .c-breadcrumb {
    width: 100%;
  }
}

/** ==================================================
* 下層ページ共通CSS
* ================================================ */
.page-container{
  padding-block: var(--px-130) var(--px-200);
  width: min(1300px,95%);
  margin-inline: auto;
}
.page-container.-contact{
  width: min(972px,95%);
  margin-inline: auto;
}
.page-header{
  margin-top: var(--px-80);
}
.section{
  margin-top: var(--px-60);
}

/** ==================================================
* privacy
* ================================================ */
.privacy{
  line-height: 2.2;
}
.privacy_wrap > h2{
  position: relative;
  font-size: var(--font-28);
  font-weight: bold;
  border-bottom: 1px solid #CECACA;
  margin-bottom: 0.5em;
  font-family: var(--font-zen);
}
.privacy_wrap > h2::after{
  content: "";
  position: absolute;
  bottom: -1%;
  left: 0;
  width: 20%;
  border-top: 2px solid var(--color-blue);
}
.privacy_wrap{
  margin: 2em 0;
}
.privacy_wrap > p{
  font-size: var(--font-16);
}
.privacy_wrap>.list{
  padding-left: 1em;
  margin-left: 1em;
  text-indent: -1em;
}
@media (max-width:767px) {
  .privacy_wrap>.list{
    padding: 0.5em;
  }
  .privacy_wrap > h2{
    line-height: 1.6;
  }
}

/** ==================================================
* お問い合わせ
* ================================================ */
.c-contactForm {
  font-size: 15px;
  line-height: 1.6;
}
.other-container.-contact .note{
  display: block;
}
.other-container .note{
  display: none;
}
.c-contactForm>.note{
  text-align: center;
  margin-top: var(--px-60);
}
.c-contactForm>.note>.txt{
  color: var(--color-black-b);
  font-size: 16px;
  line-height: 2;
}
.c-contactForm>.note>.txt>.link{
  color: var(--color-blue);
  font-size: 16px;
  line-height: 2;
  text-decoration-line: underline;
  display: inline-flex;
  align-items: center;
}
@media (hover : hover) {  
  .c-contactForm>.note>.txt>.link:hover{
    opacity: 0.65;
  }
}
  .c-contactForm > .list{
  margin-top: var(--px-80);
}
.c-contactForm > .list > .item {
  display: flex;
  flex-direction: column;
  gap: 1em 0;
  padding: 1.2em 0;
  border-bottom: 1px solid #BBBBBB;

}
@media (min-width: 768px) {
  .c-contactForm > .list > .item {
    flex-direction: row;
    align-items: center;
  }
}
.c-contactForm > .list > .item > .label {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: var(--color-black-b);
  font-feature-settings: "palt";
}
@media (min-width: 768px) {
  .c-contactForm > .list > .item > .label {
    flex: 0 0 auto;
    width: 20em;
    padding: calc(0.8em + 1px) 0;
  }
}

.c-contactForm > .list > .item > .label > .-required {
  color: #D0000C;
  font-size: 13px;
}
.other-container.-contact .entry-form-field__privacy-check{
  display: block;
}
.other-container .entry-form-field__privacy-check{
  display: none;
}
.entry-form-field__privacy-check>.entry-form-field__privacy-check-inner{
  margin-top: var(--px-40);
  text-align: center;
}
.mwform-checkbox-field-text{
  color: var(--color-black-b);
  font-size: 16px;
  line-height: 1.4;
}
.entry-form-field__privacy-check-inner>.-required {
  color: #D0000C;
  font-size: 13px;
}
.c-contactForm > .list > .item > .control {
  flex: 1 1 0%;
}
.c-contactForm > .list > .item > .control.-grid{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 8px;
}
.mw_wp_form .horizontal-item + .horizontal-item{
  margin-left: 0 !important;
}
.c-contactForm > .attention {
  margin-top: 3em;
  font-size: var(--font-14);
  text-align: center;
}
.c-contactForm > .attention > .link {
  text-decoration: underline;
  color: var(--color-blue);
}
.c-contactForm > .action {
  margin-top: var(--px-50);
  text-align: center;
}
@media (min-width: 768px) {
  .c-contactForm > .list > .item > .control.-radio {
    align-self: center;
  }
}
.mw_wp_form_confirm .c-contactForm > .list > .item > .control {
  padding-block: calc(0.8em + 1px);
}
@media (max-width:560px) {
  .mw_wp_form_confirm .c-contactForm > .list > .item > .control{
    padding-block: 0;
  }
}

.other-container>.read{
  margin-top: var(--px-60);
}
.other-container>.read>.txt{
  color: var(--color-black-b);
  font-size: 16px;
  line-height: 2;
}
.other-container>.read>.txt>span{
  color: #D0000C;
}


.c-formControl {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  margin-top: 5px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.c-formControl:disabled {
  cursor: not-allowed;
}
.c-formControl::-moz-placeholder {
  opacity: 0.25;
}
.c-formControl::placeholder {
  opacity: 0.25;
}
textarea.c-formControl {
  resize: vertical;
}
select.c-formControl {
  padding-right: 2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3e%3cpath fill='%23343a40' d='M15 22L0 0h30z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: calc(100% - 0.75em) 50%;
  background-size: 0.5em auto;
}
select.c-formControl[multiple], select.c-formControl[size]:not([size="1"]) {
  background-image: none;
}
.c-formControl.-auto {
  display: inline-block;
  width: auto;
}
.c-formControl {
  padding: 0.8em 1em;
  border: 1px solid #B8B8B8;
  background: #F7FBFD;
  font-size: 16px;
  line-height: 1.6;
}
@media (min-width: 960px) {
  .c-formControl {
    font-size: var(--font-15);
  }
}
.c-formControl.-typeArchive {
  width: 15em;
}

.submit{
  position: relative;
  display: inline-block;
}
.c-btn.-c-contactForm-submit {
  padding: 1em;
  background: var(--color-blue);
  border: 1px solid var(--color-blue);
  text-align: center;
  font-size: var(--font-18);
  color: var(--color-white);
  transition-property: background-color, color;
  transition-duration: var(--transition-duration);
  width: 360px;
  max-width: 100%;
}
.submit::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  display: block;
  width: 40px;
  height: 40px;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: var(--transition-duration) var(--transition-timing-function);
  -webkit-mask-image: var(--icon-arrow);
  mask-image: var(--icon-arrow);
  background-color: var(--color-white);
}
@media (hover : hover) { 
  .submit:hover::after{
    transform: translateY(-50%) translateX(5px);
  }
}
@media (max-width:767px) {
  .c-contactForm>.note>.txt{
    text-align: left;
  }
}
@media (max-width:560px) {
  .c-btn.-c-contactForm-submit{
    width: 100%;
  }
  .submit{
    display: block;
  }
}

/** ==================================================
* c-typography
* ================================================ */
.c-typography.-contact{
  margin-block: var(--px-60) var(--px-30);
  text-align: center;
}
.c-typography.-contact > h2{
  color: #D0000C;
}
.c-typography.-contact > h2.-complete{
  text-align: center;
}
.c-typography.-contact > .action{
  text-align: center;
  display: block;
}
.c-typography.-contact > .action>.link{
  text-decoration: none;
}
@media (max-width:560px) {
  .c-typography.-contact{
    text-align: left;
  }
}
.c-typography {
  --c-typography-elem-gap: 1lh;
  --c-typography-a-color: var(--color-blue);
}

.c-typography {
  display: block;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1;
  text-align: justify;
  word-break: break-all;
  overflow-wrap: break-word;
  color: inherit;
}
.c-typography :where(hr) {
  border: none;
  border-top: 1px solid currentColor;
  color: inherit;
}
.c-typography :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}
.c-typography :where(h1:not(.c-heading), h2:not(.c-heading), h3:not(.c-heading), h4:not(.c-heading), h5:not(.c-heading), h6:not(.c-heading)) {
  font: inherit;
  line-height: inherit;
  color: inherit;
}
.c-typography :where(ul:not(.c-list, .c-row), ol:not(.c-list, .c-row)) {
  padding-left: 1.25em;
  list-style: revert;
}
.c-typography strong {
  font-weight: bolder;
}
.c-typography :where(a:-moz-any-link:not(.c-btn)) {
  text-decoration: underline;
  color: var(--c-typography-a-color);
}
.c-typography :where(a:any-link:not(.c-btn)) {
  text-decoration: underline;
  color: var(--color-red);
}
.c-typography :where(hr, dl, ol, ul, p, blockquote, figure, table, div:not(.c-row > .col)) {
  margin-bottom: var(--c-typography-elem-gap);
}
.c-typography :where(hr, dl, ol, ul, p, blockquote, figure, table, div:not(.c-row > .col)):last-child {
  margin-bottom: 0;
}
.c-typography :where(h1, h2, h3, h4, h5, h6) :first-child {
  margin-top: 0;
}

.c-typography {
  font-size: var(--font-15);
  line-height: 2;
}
.c-typography h1, .c-typography h2, .c-typography h3, .c-typography h4, .c-typography h5, .c-typography h6 {
  margin: 2em 0 1em;
}
.c-typography h1:first-child, .c-typography h2:first-child, .c-typography h3:first-child, .c-typography h4:first-child, .c-typography h5:first-child, .c-typography h6:first-child {
  margin-top: 0;
}
.c-typography h1 + :is(h2, h3, h4, h5, h6),
.c-typography h2 + :is(h3, h4, h5, h6),
.c-typography h3 + :is(h4, h5, h6),
.c-typography h4 + :is(h5, h6),
.c-typography h5 + h6 {
  margin-top: 0;
}
.c-typography h2:not(.c-heading) {
  font-weight: 500;
  font-size: 1.4em;
  line-height: 1.6;
}
.c-typography h3:not(.c-heading) {
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.6;
}
.c-typography h4:not(.c-heading) {
  font-weight: 500;
  font-size: 1.1em;
  line-height: 1.6;
}
.c-typography h5:not(.c-heading),
.c-typography h6:not(.c-heading) {
  font-weight: 500;
  line-height: 1.6;
}
.c-typography hr {
  border-color: var(--color-gray-pale-b);
}
.c-typography .c-dataList > .item {
  margin: 0;
}
.c-typography strong {
  font-weight: 600;
}

/** ==================================================
* アニメーション
* ================================================ */
.top-fade {
  opacity: 0;
}
.top-fade.active {
  animation: fadeIn 1s ease-in-out forwards;
}
@media (max-width:960px) {
  .top-fade.active {
    animation: fadeIn 3s ease-in-out forwards;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
}
.fade-in.active {
  animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.slide-in-up {
  transform: translateY(100px);
  opacity: 0;
}
.slide-in-up.active {
  animation: slideInUp 1s ease-out forwards;
}
@keyframes slideInUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.slide-left-in-up {
  transform: translateX(100px);
  opacity: 0;
}
.slide-left-in-up.active {
  animation: slideLeft 1s ease-out forwards;
}
@keyframes slideLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animation-delay-1{
  animation-delay: 0.1s;
}
.animation-delay-2{
  animation-delay: 0.3s;
}
.animation-delay-3{
  animation-delay: 0.6s;
}
.animation-delay-4{
  animation-delay: 0.9s;
}
.animation-delay-5{
  animation-delay: 1.2s;
}

.-left-anime::before{
  transform: translateX(-100px);
  opacity: 0;
}
.-left-anime.active::before {
  animation: slideLeft 1s ease-out forwards;
}
@keyframes slideLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.customer-content>.inner.-left-anime::after{
  transform: translateX(-100px);
  opacity: 0;
}
.customer-content>.inner.-left-anime.active::after {
  animation: slideLeftOP 1s ease-out forwards;
}
@keyframes slideLeftOP {
  to {
    transform: translateX(0);
    opacity: .15;
  }
}
.-right-anime::after{
  transform: translateX(100px);
  opacity: 0;
}
.-right-anime.active::after {
  animation: slideRight 1s ease-out forwards;
}
.pie-chart>.inner.-right-anime::before{
  transform: translateX(100px);
  opacity: 0;
}
.pie-chart>.inner.-right-anime.active::before {
  animation: slideRight 1s ease-out forwards;
}
@keyframes slideRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.pie-chart>.inner.-right-anime::after{
  transform: translateX(100px);
}
.pie-chart>.inner.-right-anime.active::after {
  animation: slideRightOP 1s ease-out forwards;
}
@keyframes slideRightOP {
  to {
    transform: translateX(0);
    opacity: .15;
  }
}
.text-animate .char.space {
  width: 0.25em;
}
.text-animate {
  display: inline-block;
  opacity: 0;
}
/* JavaScriptで処理された後に表示 */
.text-animate[data-animated] {
  opacity: 1;
}
.text-animate.text-animate .char {
  display: inline-block;
  opacity: 0;
  animation: fadeInCharBottom 0.5s ease-in-out forwards;
}
@keyframes fadeInCharBottom {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}