@charset "UTF-8";
/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section , main {
	display: block;
}

a:link, a:visited, a:hover, a:active { text-decoration: none; }

html { scroll-behavior:smooth; scrollbar-gutter: stable; }
/*[id] {scroll-margin-top:40px;}*/
body { line-height: 1; text-align: justify; background: #fff; color: #333333; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; }
ol, ul { list-style: none; color: #333; }
h1, h2, h3, h4, h5, h6 { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: 100%; height: auto; vertical-align: bottom; flex-shrink: 0; }
picture { display: block; }

/*オーバーレイ*/
.overlay { background: #fff; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; }

/*-----------------------------------------------------
fade
----------------------------------------------------- */
.fade { opacity: 0; transition: opacity 1.5s; }
.fade.is_inview { opacity: 1; transition-delay: .8s; }

.fade_early { opacity: 0; transition: opacity 1s; }
.fade_early.is_inview { opacity: 1; transition-delay: .1s; }

.fadeup { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform .8s; }
.fadeup.is_inview { opacity: 1; transform: translateY(0); transition-delay: .1s; }
.fadeup02 { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform .8s; }
.fadeup02.is_inview  { opacity: 1; transform: translateY(0); transition-delay: .2s; }
.fadeup03 { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform 1s; }
.fadeup03.is_inview  { opacity: 1; transform: translateY(0); transition-delay: .3s; }

.fadeleft { opacity: 0; transform: translateX(-30px); transition: opacity .8s ease, transform .8s ease; }
.fadeleft.is_inview { opacity: 1; transform: translateX(0); transition-delay: .3s; }


.sec { position: relative; z-index: 1; }
.sec_txt { font-size: clamp(14px, 3vw, 16px); }

h1 , h2 , h3 , h4 , h5 { font-feature-settings: "palt"; font-weight: initial; line-height: 1.5; }
.pc { display: block; }
.tab { display: none; }
.sp { display: none; }
p { font-feature-settings: "palt"; line-height: 1.8; }

/*[data-overDirection="full"] { width: 100vw; margin: 0 calc(50% - 50vw); }*/
[data-size="w750"]{ max-width: 750px; margin: 0 auto; }
[data-size="w800"]{ max-width: 800px; width: 90%; margin: 0 auto; }
[data-size="w900"]{ max-width: 900px; width: 90%; margin: 0 auto; }
[data-size="w1000"]{ max-width: 1000px; width: 90%; margin: 0 auto; }
[data-size="w1200"]{ max-width: 1200px; width: 90%; margin: 0 auto; }
[data-size="w1800"]{ max-width: 1800px; margin: 0 auto; }
[data-size="padding_inner"]{ padding-left: 20px; padding-right: 20px; box-sizing: border-box; margin: 0 auto; }

:root {
	--blue-color: #4260D9;
  --pink-color: #f757a3;
  --purple-color: #4c3598;
  --fixed-header-height: 100px;
  --font-en: "Poppins", sans-serif;
  --slide-grad: linear-gradient(103deg, #4260D9 32.45%, #30AEE4 83.11%);
  --spec-term-w:180px;
}
@media screen and (max-width: 600px) {
    :root {
        --fixed-header-height: 60px;
        --spec-term-w:80px;
    }
}

.l-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--fixed-header-height); box-sizing: border-box; z-index: 999; transition: background-color 0.3s; }
.l-header.is-scrolled { background-color: rgba(255,255,255,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* iOSで効かない環境のフォールバック */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .l-header.is-scrolled { background-color: rgba(255,255,255,.9); }
}
.l-header-container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.l-header-logo { max-width: none; padding: 0 2% 0 3%; }
.l-header-logo__link img { width: clamp(220px, 20vw, 320px); height: auto; }
.l-header-menu { display: flex; align-items: stretch; justify-content: space-between; gap: 0; }
.l-header-menu__container { margin-right: 100px; }
.l-header-nav__list { display: flex; align-items: center; gap: clamp(16px, 8vw, 35px); }
.l-header-nav__link { color: inherit; font-size: clamp(16px, 1.2vw, 16px); font-weight: 600; }
.l-header-nav__link::after { content: attr(data-en); font-family: var(--font-en); color: var(--blue-color); display: block; text-align: center; font-size: 12px; margin-top: 7px; }
.c-cta__arrow_spnav { display: none; }

/*ボタン*/
.l-header-menu-button { display: none; }

/*main { margin-bottom: 150px; }*/

footer { background: var(--blue-color); padding: 80px 0; box-sizing: border-box; position: relative; z-index: 1; }
footer .footer_flex { display: flex; justify-content: space-between; padding: 0 5%; }
footer .footer_logo img { max-width: clamp(300px, 10vw, 320px); margin-bottom: 25px; }
footer address { color: #FFF; font-size:clamp(14px, 3vw, 16px); font-style: normal; line-height: 1.5; font-weight: 700; }
footer small { color: #FFF; font-size: clamp(0.625rem, 0.594rem + 0.16vw, 0.75rem); margin-top: auto; display: block; text-align:right; }
footer .right_blk { display: flex; flex-direction: column; justify-content: space-between; }
footer .right_blk nav ul { display: flex; gap:20px; }
footer .right_blk nav ul a { color: #fff; font-weight: 700; transition: .5s; font-size: clamp(13px, 3vw, 16px); }

/*pagetop*/
.l-footer-pagetop { position: sticky; bottom: 0; }
.l-footer-pagetop__btn { position: absolute; bottom: 15px; right: 15px; z-index: 9; visibility: hidden; opacity: 0; transition: 0.5s; max-width: 60px; }
.l-footer-pagetop__btn.is-show { visibility: visible; opacity: 1; }

/*CVボタン*/
.contact_blk { background: url("../img/common/contact_bg.png")no-repeat; background-size: cover; padding: 90px 0; border-radius: 50px 50px 0 0; z-index: 1; position: relative; }
.contact_blk h3 { margin-bottom: 15px; }
.contact_blk h3 img { width: clamp(190px, 50vw, 390px); }
.contact_blk .sec_ttl span { font-weight: 700; }
.contact_innerflex { display: flex;justify-content: space-between;padding: 0 5%; gap: 5%; }
.contact_innerflex .left_blk { display: flex; flex-direction: column; justify-content: space-between; gap: 15px; }
.c-cta-list{display:flex;flex-direction:column;gap:45px}
.c-cta{position:relative;display:flex;align-items:center;gap:16px;justify-content:center;width:425px;height:80px;padding:0 24px;border:1px solid var(--blue-color);color:var(--blue-color);box-sizing: border-box;font-weight:700;font-size:clamp(16px, 3vw, 22px);line-height:1;letter-spacing:.02em;overflow:hidden;outline:none}
.c-cta span.tel { font-size: clamp(20px, 3vw, 26px); }
.c-cta__icon,.c-cta__arrow{display:inline-flex;align-items:center}
.c-cta svg{fill:currentColor}
.c-cta__icon svg,.c-cta__arrow svg{width:26px;height:26px;display:block}
.c-cta::before{content:"";position:absolute;inset:0;background:var(--blue-color);transform:translateX(-100%);transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.c-cta>*{position:relative;z-index:1;transition:color .45s}

.c-cta:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(color) 30%,#fff)}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
  .c-cta::before{transition:none}
  .c-cta>*{transition:none}
}

@media (hover: hover) and (pointer: fine) { 
   .l-header-nav__link:hover { color: var(--blue-color); }
  .l-header-logo__link { transition: opacity 0.3s; } 
  .l-header-logo__link:hover { opacity: 0.8; }
  .l-header-nav__link { transition: color .2s ease; white-space: nowrap; }
  .l-footer-pagetop__btn.is-show:hover { opacity: 0.4; }
  footer .right_blk nav ul a:hover { opacity: .5; }
  .c-cta:hover::before,.c-cta:focus-visible::before{transform:translateX(0)}
  .c-cta:hover,.c-cta:focus-visible{color:#fff}
}


@media print {
  header , footer { display: none!important; }
}

@media only screen and (max-width: 1024px){
  .l-header-nav__link { color: #fff; }
  .l-header-nav__link:hover { color: #fff; }
  body.is-menu-opened .l-header-logo { display: none; }
  body.is-menu-opened .l-header.is-scrolled { background-color: var(--blue-color); }
  /* iOSで効かない環境のフォールバック */
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .l-header.is-scrolled { background-color: rgba(255,255,255,.9); }
  }
/*  .l-header { background: #fff; }*/
  .l-header-logo { max-width: 237px; }
  .l-header-nav { margin-bottom: 30px; }
  .l-header-nav__list { display: none; }
  .l-header-menu-button { right: 0; position: absolute; padding: 15px; border: 0; display: flex; cursor: pointer; width: 100px; height: 100px; background: var(--blue-color); justify-content: center; align-items: center; }
  .l-header-menu-button__lines { position: absolute; width: 40px; height: 35px; transition: transform .35s ease; will-change: transform; }
  .l-header-menu-button__line { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 1px; transition: transform .35s ease, opacity .2s ease, background-color .2s ease; transform-origin: 50% 50%; }
  .l-header-menu-button__line--top { top: 0; }
  .l-header-menu-button__line--center { top: 50%; transform: translateY(-50%); width: 80%; }
  .l-header-menu-button__line--bottom { bottom: 0; }

  .is-menu-opened .l-header-menu-button__lines { transform: rotate(180deg); }
  .is-menu-opened .l-header-menu-button__line--top { transform: translateY(18px) rotate(45deg); }
  .is-menu-opened .l-header-menu-button__line--center { opacity: 0; }
  .is-menu-opened .l-header-menu-button__line--bottom { transform: translateY(-14px) rotate(-45deg); }

  .is-menu-opened .l-header-menu-button__line { background-color: #fff; }
  .l-header-menu { position: fixed; top: var(--fixed-header-height); left: 0; right: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 35px; padding: 24px; z-index: 998; height: calc(70dvh - var(--fixed-header-height)); max-height: calc(70dvh - var(--fixed-header-height)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; box-sizing: border-box; }
  .l-header-menu::after { content: ''; display: block; background: url("../img/common/spnav_en.svg")no-repeat; background-size: contain;aspect-ratio: 323 / 130;width:90%; height: auto; position: absolute; left: 0; bottom: 0;}
  body.is-menu-opened .l-header-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .2s ease, transform .2s ease, visibility 0s; background: var(--blue-color); box-shadow:0px 30px 40px -30px #575d76; }
  body.is-menu-opened { overflow: hidden; }
  body.is-menu-opened .l-header-container { background: var(--blue-color); }
/*  body::before { content: ''; position: fixed; inset: 0; background: var(--blue-color); z-index: 997; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }*/
  body.is-menu-opened::before { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
  .l-header-menu__container { width: 100%; margin-right: 0; display: block; }
  body.is-menu-opened .l-header-nav__list { display: flex; flex-direction: column; gap: 40px; width: 100%; }
  .l-header-nav__item { width: 100%; }
  .l-header-nav__link::after { text-align: left; color: #fff; }
  .c-cta__arrow_spnav{display:inline-block;align-items:center;margin-left:auto}
  .c-cta svg{fill:currentColor}
  .c-cta__arrow_spnav svg{width:18px;height:18px;display:block; position: relative; top: 3px; left: 10px; }
}

  @media (prefers-reduced-motion: reduce) {
  .l-header-menu-button__lines { transition: none; }
  .l-header-menu-button__line { transition: none; }
  }

@media only screen and (max-width: 980px){
  .contact_innerflex { display: block; }
  .contact_innerflex .left_blk { margin-bottom: 25px; }
  footer .footer_flex { display: block; }
  footer address { margin-bottom: 30px; }
  footer .right_blk nav ul { display: block; margin-bottom: 20px; }
  footer .right_blk nav ul li:not(:last-child) { margin-bottom: 7px; }
  footer small { text-align: center; }
}

/*　600pxからレスポンシブ*/
@media only screen and (max-width: 600px){
/*  main { margin-bottom: 65px; }*/
	.pc { display: none; }
	.sp { display: block; }
  .l-header-menu-button__lines { width: 30px; height: 25px; }  
  .l-header-menu-button { width: 60px; height: 60px; }
  .is-menu-opened .l-header-menu-button__line--top { transform: translateY(9px) rotate(45deg); }
  footer { padding: 45px 0 30px; }
  footer a { color: #fff; }
  footer address { margin-bottom: 20px; }
  footer .footer_flex { display: block; }
  footer .footer_logo img { max-width: 290px; margin-bottom: 15px; }

  .contact_blk { padding: 50px 0; }
  .c-cta-list { gap:15px; }
  .c-cta { width: 100%; height: 60px; }
  .c-cta__icon svg, .c-cta__arrow svg { width: 21px; height: 21px; }
  
}