@charset "UTF-8";

:root {
  --base-color: #333333;
  --border-color: #999999;
  --white: #fff;
  --point-color: #444444;
  --base-font-family: "Zen Kaku Gothic New", sans-serif;
  --en-font-family: "Manrope", sans-serif;
  --base-font-weight: 400;
  --title-font-weight: 700;
  --inner-padding: clamp(15px, -51.54758px + 9.84975vw, 83px);
  --inner-width: 1200;
  --inner-width-px: calc(var(--inner-width) * 1px);
  --base-border-radius: 10px;
  --vw: 1vw;
  --vh: 1vh;
  --slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
  --slope-1px-desktop: clamp(0px, -1.7778px + 0.2315vw, 1px);
}

/* data-intersection
============================== */
*:where([data-intersection]) {
  transition: opacity 1s, transform .8s;

  --intersection-y: 30px;
  --intersection-x: 0;
  --intersection-opacity: 0;
}

*[data-intersection] {
  opacity: var(--intersection-opacity);
  transform: translateX(var(--intersection-x)) translateY(var(--intersection-y));
}

*:where([data-intersection][data-intersecting=true]) {
  --intersection-y: 0;
  --intersection-x: 0;
  --intersection-opacity: 1;
}

/* =============================================================

Base

* ============================================================= */
*,
*:before,
*:after {
  box-sizing: border-box;
}


html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* background-color: var(--base-color); */
  color: var(--white);
  letter-spacing: 1px;
}

body > * {
  backface-visibility: hidden;
}

:where(img, svg) {
  display: block;
  height: auto;
  max-width: 100%;
}

a{
  text-decoration: none;
}


.c-button{
  background-color: var(--base-color);
  color: var(--white);
  font-family: var(--base-font-family);
  font-size: calc(14px + var(--slope-1px) * 1);
  /* font-size: min(calc(100cqi * (15 / 1366)), 15px); */
  font-weight: bold;
  position: relative;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 12em;
  height: 3.334em;
  border-radius: var(--base-border-radius);
  border: 1px solid var(--base-color);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.c-button.--white{
  background-color: var(--white);
  color: var(--base-color);
  border: 1px solid var(--border-color);
}

.c-button:after{
  content: "";
  width: 6px;
  height: 10px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.175686 0.173798C0.409934 -0.0579327 0.791197 -0.0579327 1.02545 0.173798L5.02431 4.12969C5.25856 4.36142 5.25856 4.73858 5.02431 4.97031L1.02545 8.9262C0.791197 9.15793 0.409934 9.15793 0.175686 8.9262C-0.0585621 8.69447 -0.0585621 8.31731 0.175686 8.08558L3.74967 4.55L0.175686 1.01442C-0.0585621 0.782694 -0.0585621 0.405529 0.175686 0.173798Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.175686 0.173798C0.409934 -0.0579327 0.791197 -0.0579327 1.02545 0.173798L5.02431 4.12969C5.25856 4.36142 5.25856 4.73858 5.02431 4.97031L1.02545 8.9262C0.791197 9.15793 0.409934 9.15793 0.175686 8.9262C-0.0585621 8.69447 -0.0585621 8.31731 0.175686 8.08558L3.74967 4.55L0.175686 1.01442C-0.0585621 0.782694 -0.0585621 0.405529 0.175686 0.173798Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--white);
  position: absolute;
  top: 50%;
  right: 9%;
  transform: translateY(-50%);
  flex-shrink: 0;
  transition: background-color .3s ease;
}

.c-button.--white:after{
  background-color: var(--base-color);
}

.c-button:hover{
  background-color: var(--white);
  border:1px solid var(--base-color);
  color: var(--base-color);
  transition: all .3s;
}

.c-button:hover:after {
  background-color: var(--base-color);
}

.c-button.--white:hover {
  background-color: var(--base-color);
  border: 1px solid var(--white);
  color: var(--white);
}

.c-button.--white:hover:after {
  background-color: var(--white);
}


/* l-wrapper
============================== */

.l-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: clip;
  width: 100%;
  min-height: 100%;
  margin-inline: auto;
  transition: opacity .4s ease-out;
  opacity: 0;
}

body.is-loaded .l-wrapper {
  opacity: 1;
}

@media screen and (max-width: 960px) {
  .l-wrapper {
    min-width: 0;
  }
}


/* =============================================================

Header

* ============================================================= */
/* header
=============================== */

.l-header{
  z-index: 100;
  width: 100%;
  padding: calc(20px + var(--slope-1px) * 12)  calc(15px + var(--slope-1px) * 17) 0;
  position: absolute;
}

.l-header__inner{
  display: flex;
  max-width: 444px;
  width: 78%;
}

/* l-header-logo
=============================== */
.l-header-logo{
  position: relative;
  z-index: 3;
  justify-self: flex-start;
}

.l-header-logo a{
  display: block;
  background: var(--white);
  border-radius: var(--base-border-radius);
  padding: calc(13px + var(--slope-1px) * 3) calc(8px + var(--slope-1px) * 8);
  transition: all .2s ease-out;
}

.l-header-logo a:hover {
  opacity: .7;
}

@media screen and (max-width: 560px) {
  .l-header-logo a{
    max-width: 240px;
  }
}

/* l-header-menu
=============================== */
.l-header-menu{
  position: fixed;
  top: calc(20px + var(--slope-1px) * 12);
  right: calc(15px + var(--slope-1px) * 17);
  margin-top: 6px;
  z-index: 107;
  transition: all .2s ease-out;
}

.l-header-menu:hover{
  opacity: .7;
}

@media screen and (max-width: 560px) {
  .l-header-menu{
    margin-top: 0;
  }
}

.l-header-menu__toggle{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  gap: calc(8px + var(--slope-1px) * 4);
  padding: 8px 8px 8px calc(10px + var(--slope-1px) * 2);
  border: none;
  border-radius: var(--base-border-radius);
  cursor: pointer;
}

.l-header-menu__toggle span{
  font-family: var(--en-font-family);
  font-size: calc(12px + var(--slope-1px) * 3);
  font-weight: 600;
}

.l-header-menu__button{
  background-color: var(--base-color);
  padding: calc(12px + var(--slope-1px) * 4) calc(6px + var(--slope-1px) * 3);
  border-radius: var(--base-border-radius);
}

@media screen and (max-width: 560px) {
  .l-header-menu__button{
    border-radius: 6px;
  }
}

.l-header-menu__button > div{
  position: relative;
  width: 15px;
  height: 1px;
  background-color: var(--white);
  background: linear-gradient(to right, var(--white) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: left bottom;
  transition: background-position .5s ease;
}

.l-header-menu__button > div:before,
.l-header-menu__button > div:after{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  transition: bottom .5s ease, top .5s ease, transform .5s ease;
}

.l-header-menu__button > div:before{
  bottom: 5px;
}

.l-header-menu__button > div:after{
  top: 5px;
}

body.is-toggle-menu-open .l-header-menu__button > div {
  background-position: right bottom;
  /* opacity: 0; */
}

body.is-toggle-menu-open .l-header-menu__button > div:before {
  bottom: 0;
  transform: rotate(45deg); 
}

body.is-toggle-menu-open .l-header-menu__button > div:after {
  top: 0;
  transform: rotate(-45deg);
}

/* l-header-menu-nav
=============================== */
.l-header-menu-nav{
  position: fixed;
  top: 0;
  left: 0;
  /* visibility: hidden; */
  overflow-y: auto;
  width: 100%;
  height: 100svh;
  padding: calc(77px + var(--slope-1px) * 34) calc(15px + var(--slope-1px) * 17);
  z-index: 104;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

body.is-toggle-menu-open .l-header-menu-nav {
  opacity: 1;
  visibility: visible;
}

.l-header-menu-nav:before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(90deg,rgba(25, 118, 199, 0.69) 0%, rgba(132, 31, 88, 0.7) 50%, rgba(212, 24, 24, 0.7) 100%);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

@media screen and (max-width: 560px) {
  .l-header-menu-nav:before{
    background: linear-gradient(0deg,rgba(212, 24, 24, 0.7) 0%, rgba(132, 31, 88, 0.7) 50%, rgba(25, 118, 199, 0.69) 100%);
  }
}

body.is-toggle-menu-open .l-header-menu-nav:before {
  opacity: 1;
  visibility: visible;
}

.l-header-menu-nav__inner{
  background-color: var(--white);
  padding: calc(32px + var(--slope-1px) * 8) calc(24px + var(--slope-1px) * 16);
  max-width: 652px;
  width: 100%;
  margin-left: auto;
  border-radius: var(--base-border-radius);
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 103;
}

body.is-toggle-menu-open .l-header-menu-nav__inner {
  opacity: 1;
  transform: translateY(0);
}

.l-header-menu-nav__head{
  position: relative;
  font-size: calc(16px + var(--slope-1px) * 2);
  font-family: var(--base-font-family);
  font-weight: bold;
  color: var(--base-color);
  border-bottom: 1px solid var(--base-color);
  padding-bottom: calc(15px + var(--slope-1px) * -2);
}

.l-header-menu-nav__head a{
  position: relative;
  color: var(--base-color);
  display: block;
  width: 20%;
  transition: all .2s ease-out;
}

.l-header-menu-nav__head a:hover{
  opacity: .7;
}

@media screen and (max-width: 560px) {
  .l-header-menu-nav__head a{
    width: 40%;
  }
}

.l-header-menu-nav__head a:after{
  content: "";
  width: 6px;
  height: 10px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.175686 0.173798C0.409934 -0.0579327 0.791197 -0.0579327 1.02545 0.173798L5.02431 4.12969C5.25856 4.36142 5.25856 4.73858 5.02431 4.97031L1.02545 8.9262C0.791197 9.15793 0.409934 9.15793 0.175686 8.9262C-0.0585621 8.69447 -0.0585621 8.31731 0.175686 8.08558L3.74967 4.55L0.175686 1.01442C-0.0585621 0.782694 -0.0585621 0.405529 0.175686 0.173798Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.175686 0.173798C0.409934 -0.0579327 0.791197 -0.0579327 1.02545 0.173798L5.02431 4.12969C5.25856 4.36142 5.25856 4.73858 5.02431 4.97031L1.02545 8.9262C0.791197 9.15793 0.409934 9.15793 0.175686 8.9262C-0.0585621 8.69447 -0.0585621 8.31731 0.175686 8.08558L3.74967 4.55L0.175686 1.01442C-0.0585621 0.782694 -0.0585621 0.405529 0.175686 0.173798Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--base-color);
  position: absolute;
  top: 56%;
  left: 92px;
  transform: translateY(-50%);
  flex-shrink: 0;
}

/* l-header-menu-nav-corporate
=============================== */
.l-header-menu-nav-corporate{
  margin-top: 3.2em;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-toggle-menu-open .l-header-menu-nav-corporate {
  opacity: 1;
  transform: translateY(0);
}

body.is-toggle-menu-open .l-header-menu-nav-corporate:nth-child(1) {
  transition-delay: 0.2s;
}

body.is-toggle-menu-open .l-header-menu-nav-corporate:nth-child(2) {
  transition-delay: 0.3s;
}

.l-header-menu-nav-corporate__head{
  border-left: 5px solid #1976C7;
  padding-left: 8px;
  padding-block: 0 2px;
  font-size: calc(16px + var(--slope-1px) * 2);
  font-family: var(--base-font-family);
  font-weight: bold;
  color: var(--base-color);
}

.l-header-menu-nav-corporate__head.--yamagatahigashi{
  border-color: #D41818;
}

.l-header-menu-nav-corporate__list{
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px + var(--slope-1px) * 4);
  margin-top: 14px;
}

.l-header-menu-nav-corporate__list a{
  width: calc(100% / 3 - 11px);
}

@media screen and (max-width: 560px) {
  .l-header-menu-nav-corporate__list a{
    width: calc(100% / 2 - 7px);
  }
}

/* =============================================================

Main

* ============================================================= */
/* main
=============================== */

.l-main{
  position: relative;
  flex-grow: 1;
  width: 100%;
  min-height: 0%;
  max-height: 100%;
  margin-inline: auto;
  background-color: var(--base-color);
}

.l-main-body{
  position: relative;
  width: calc(100% - var(--inner-padding) * 2);
  max-width: var(--inner-width-px);
  margin-inline: auto;
}

/* =============================================================

Footer

* ============================================================= */
/* l-footer
============================== */

.l-footer{
  padding: 40px;
  font-size: 1.4rem;
  font-family: var(--base-font-family);
  background-color: var(--base-color);
}

.l-footer-nav{
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.l-footer-nav__item:last-of-type{
  font-family: var(--en-font-family);
}

.l-footer-nav__item a{
  color: var(--white);
  border-bottom: solid 1px var(--white);
}

.l-footer-nav__item a:hover{
  border-bottom: none;
}


@media screen and (max-width: 560px) {
  .l-footer-nav{
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* ============================================================= *

Utility

* ============================================================= */
/* Media Query Setting
====================================== */
.u-pc-block {
  display: block !important;
}

@media screen and (max-width: 560px) {
  .u-pc-block {
    display: none !important;
  }
}

.u-tablet-block {
  display: none !important;
}

@media screen and (max-width: 960px) {
  .u-tablet-block {
    display: block !important;
  }
}

.u-tablet-inline-block {
  display: none !important;
}

@media screen and (max-width: 960px) {
  .u-tablet-inline-block {
    display: inline-block !important;
  }
}

.u-tablet-flex {
  display: none !important;
}

@media screen and (max-width: 960px) {
  .u-tablet-flex {
    display: flex !important;
  }
}

@media screen and (max-width: 960px) {
  .u-tablet-none {
    display: none !important;
  }
}

.u-mobile-block {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-block {
    display: block !important;
  }
}

.u-mobile-inline-block {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-inline-block {
    display: inline-block !important;
  }
}

.u-mobile-flex {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-flex {
    display: flex !important;
  }
}

@media screen and (max-width: 560px) {
  .u-mobile-none {
    display: none !important;
  }
}

/* text align
====================================== */
.u-ta-left {
  text-align: left !important;
}

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

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

/* display
====================================== */
.u-d-block {
  display: block !important;
}

.u-d-none {
  display: none !important;
}

.u-d-inline {
  display: inline !important;
}

.u-d-ib {
  display: inline-block !important;
}

/* position
====================================== */
.u-pos-static {
  position: static !important;
}

.u-pos-relative {
  position: relative !important;
}

.u-pos-absolute {
  position: absolute !important;
}

.u-pos-fixed {
  position: fixed !important;
}

/* clear
====================================== */
.u-clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

/* other
====================================== */
.u-strong {
  font-weight: bold !important;
}

.u-pointer {
  cursor: pointer;
}

.u-nowrap {
  white-space: nowrap;
}

.u-color-honda {
  color: #cc0000 !important;
}

.u-color-ciao {
  color: #0068b6 !important;
}

.u-color-mamoru {
  color: #8fc31f !important;
}

.u-rotate-90 {
  transform: rotate(90deg);
}

/* animationn
====================================== */
.u-no-transition {
  transition: none !important;
}

.u-wbr {
  word-break: keep-all;
  overflow-wrap: anywhere;
}