@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
:root {
  --calc_min1440:calc(1/1920*100vw);
  --calc_min1024:calc(1/1440*100vw);
  --calc_min768:calc(1/1024*100vw);
  --calc_max767:calc(1/767*100vw);
  --size10: calc(10 / 16 * 1rem);
  --size12: calc(12 / 16 * 1rem);
  --size14: calc(14 / 16 * 1rem);
  --size18: calc(18 / 16 * 1rem);
  --size20: calc(20 / 16 * 1rem);
  --size24: calc(24 / 16 * 1rem);
  --size30: calc(30 / 16 * 1rem);
  --size32: calc(32 / 16 * 1rem);
  --size40: calc(40 / 16 * 1rem);
  --size48: calc(48 / 16 * 1rem);
  --size50: calc(50 / 16 * 1rem);
  --size60: calc(60 / 16 * 1rem);
  --size70: calc(70 / 16 * 1rem);
  --size80: calc(80 / 16 * 1rem);
  --size90: calc(90 / 16 * 1rem);
  --size100: calc(100 / 16 * 1rem);
  --yellow:#F6F879;
  --blue:#1C38D0;
  --txt_black:#4E4E4E;
  --bg_gley:#F2F3F3;
  --font:YakuHanJP,"Zen Kaku Gothic New",'Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
  --fontEn:"Roboto", sans-serif;
  --innergap:min(8.4%, 145px);
  --outergap:clamp(30px, 5.2%, 100px);
  --crip_arw_b:polygon(50% 100%, 0 0, 100% 0);
  --crip_arw_t:polygon(50% 0%, 0% 100%, 100% 100%);
  --crip_arw_l:polygon(100% 0, 0 50%, 100% 100%);
  --crip_arw_r:polygon(0 0, 0% 100%, 100% 50%);
  --easeout:cubic-bezier(0,0,.5,1);
  --easein:cubic-bezier(.3,0,1,.7);
  --easeinout:cubic-bezier(.3,0,.7,1);
  --ease:cubic-bezier(.3,.11,.3,.98);
  --liner:cubic-bezier(0,0,1,1);
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  color: var(--text_black);
  font-family:var(--font);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(16px, 2.34vw, 24px);
  line-height: 145%;
  position: relative;   
}



@media (min-width: 1440px) {
  .min1440cut {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .min1025cut {
    display: none !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .max1024cut {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .sp, .pccut {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .pc, .spcut, .max1024cut {
    display: none !important;
  }
}
@media (min-width: 501px) {
  .xs {
    display: none !important;
  }
}
@media (max-width: 500px) {
  .xs-cut {
    display: none !important;
  }
}
h1,h2,h3,h4,h5,h6,ul,figure,dt,dt,dd,ol {
  font-size:1em;
}

img {
  width: 100%;
  max-width: 100%;
  height:auto;
  display: block;
}

.en {
  font-family:var(--fontEn); 
}

.bold {
  font-weight: 700 !important;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.por {
  position: relative;
}

.poa {
  position: absolute;
}

.bg_light {
  background-color: var(--bg_gley);
}
.bg_blue {
  background-color: var(--blue);
}
.bg_yellow {
  background-color: var(--yellow);
}
.bg_blur {
background: transparent;
/* Note: currently only Safari supports backdrop-filter */
backdrop-filter: blur(20.328699111938477px);
--webkit-backdrop-filter: blur(20.328699111938477px);
background-color: rgba(0, 0, 0, 0);
/* (plus shape's fill blended on top as a separate layer with 79.8% opacity) */
}

.blue {
  color:var(--blue) !important;
}
.yellow {
  color:var(--yellow) !important;
}
.white {
  color:white !important;
}

.d_flex {display: flex;}
.wrap {flex-flow: wrap;}
.nowrap {flex-flow: nowrap;}
.j_center {justify-content: center;}
.j_end {justify-content: flex-end;}
.a_center {align-items: center;}
.a_end {align-items: flex-end;}
.d_column {flex-direction: column;}
.d_columnrev {flex-direction: column-reverse;}
.d_rowrev {flex-direction: row-reverse;}
.ws_nowrap {white-space:nowrap;}

.wrapper {
  container: parent / inline-size;
  position:relative;
  z-index: 1;
}
main {
  width:100%;
  container-type: inline-size;  
}
.container {
  width:min(100%,1720px);
  margin: 0 auto;
  padding:0 var(--innergap);
  position:relative;
}
section {
  position:relative;
  overflow: hidden;
}
.breaking-out {
	margin-inline: calc(50% - 50cqi);
}
.breaking-out.-bg {
	padding-inline: calc(50cqi - 50%);
}
.breaking-out.-bgr {
	padding-inline: 0 calc(50cqi - 50%);
}
.breaking-out.-bgl {
	padding-inline: calc(50cqi - 50%) 0;
}


@media (max-width:1024px) {
  .container {
      padding:0 calc(var(--innergap));
  }
}
.columns {
  display: grid;
  gap: clamp(40px, 4.16vw, 60px);
}
.col5x {
  grid-template-columns: repeat(5, 1fr);
}
.col4x {
  grid-template-columns: repeat(4, 1fr);
}
.col3x {
  grid-template-columns: repeat(3, 1fr);
}
.col2x {
  grid-template-columns: repeat(2, 1fr);
}
.columns.gap_l {
  gap: clamp(60px, 6.94vw, 90px);
}
.columns.gap_s {
  gap: clamp(20px, 2.08vw, 30px);
}
.columns.gap_xs {
  gap: clamp(8px, 1.04vw, 10px);
}
@media (max-width:1024px) {
  .col4x,.col5x {
      grid-template-columns: repeat(3, 1fr);
   }
}
@media (max-width:599px) {
  .col4x,.col5x {
      grid-template-columns: repeat(2, 1fr);
      }
  .col3x ,.col2x {
  grid-template-columns: repeat(1, 1fr);
  }
}

.mga {
  margin-left:auto;
  margin-right:auto;
}
.mb0{margin-bottom:0;}
.mb10{ margin-bottom: var(--size10)}
.mb12{ margin-bottom: var(--size12)}
.mb14{ margin-bottom: var(--size14)}
.mb18{ margin-bottom: var(--size18)}
.mb20{ margin-bottom: var(--size20)}
.mb24{ margin-bottom: var(--size24)}
.mb30{ margin-bottom: var(--size30)}
.mb32{ margin-bottom: var(--size32)}
.mb40{ margin-bottom: var(--size40)}
.mb48{ margin-bottom: var(--size48)}
.mb50{ margin-bottom: var(--size50)}
.mb60{ margin-bottom: var(--size60)}
.mb70{ margin-bottom: var(--size70)}
.mb80{ margin-bottom: var(--size80)}
.mb90{ margin-bottom: var(--size90)}
.mb100{ margin-bottom: var(--size100)}
.mb120{ margin-bottom:calc(var(--size100) + var(--size20)) }

.mt0{margin-top:0;}
.mt10{ margin-top: var(--size10)}
.mt12{ margin-top: var(--size12)}
.mt14{ margin-top: var(--size14)}
.mt18{ margin-top: var(--size18)}
.mt20{ margin-top: var(--size20)}
.mt24{ margin-top: var(--size24)}
.mt30{ margin-top: var(--size30)}
.mt32{ margin-top: var(--size32)}
.mt40{ margin-top: var(--size40)}
.mt48{ margin-top: var(--size48)}
.mt50{ margin-top: var(--size50)}
.mt60{ margin-top: var(--size60)}
.mt70{ margin-top: var(--size70)}
.mt80{ margin-top: var(--size80)}
.mt90{ margin-top: var(--size90)}
.mt100{ margin-top: var(--size100)}
.mt120{ margin-top:calc(var(--size100) + var(--size20)) }


.mi025{margin-inline: 0.25em;}
.mi05{margin-inline: 0.5em;}
.mi1{margin-inline: 1em;}

.pb0 { padding-bottom: 0}
.pb10{ padding-bottom: var(--size10)}
.pb12{ padding-bottom: var(--size12)}
.pb20{ padding-bottom: var(--size20)}
.pb24{ padding-bottom: var(--size24)}
.pb30{ padding-bottom: var(--size30)}
.pb32{ padding-bottom: var(--size32)}
.pb40{ padding-bottom: var(--size40)}
.pb48{ padding-bottom: var(--size48)}
.pb50{ padding-bottom: var(--size50)}
.pb60{ padding-bottom: var(--size60)}
.pb70{ padding-bottom: var(--size70)}
.pb80{ padding-bottom: var(--size80)}
.pb90{ padding-bottom: var(--size90)}
.pb100{ padding-bottom: var(--size100)}
.pb120{ padding-bottom:calc(var(--size100) + var(--size20)) }

.pt0{ padding-top: 0}
.pt10{ padding-top: var(--size10)}
.pt12{ padding-top: var(--size12)}
.pt20{ padding-top: var(--size20)}
.pt24{ padding-top: var(--size24)}
.pt30{ padding-top: var(--size30)}
.pt36{ padding-top: var(--size36)}
.pt40{ padding-top: var(--size40)}
.pt48{ padding-top: var(--size48)}
.pt50{ padding-top: var(--size50)}
.pt55{ padding-top: var(--size55)}
.pt60{ padding-top: var(--size60)}
.pt70{ padding-top: var(--size70)}
.pt80{ padding-top: var(--size80)}
.pt90{ padding-top: var(--size90)}
.pt100{ padding-top: var(--size100)}
.pt120{ padding-top:calc(var(--size100) + var(--size20)) }

.pi025{padding-inline: 0.25em;}
.pi05{padding-inline: 0.5em;}
.pi1{padding-inline: 1em;}


/* -------------------------------------------------------------
link
------------------------------------------------------------- */

a {
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
    /* TEL無効 */
  }
}
/*--------------------
 btn
---------------------*/
.btn_more {
  position:relative;
  background-color:var(--txt_black);
  color:white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline:1rem;
  width:min(100%,415px);
  height:auto;
  aspect-ratio:415/60;
  overflow: hidden;
  text-decoration: none;
}
.btn_more svg {
  position: absolute;
  right:1rem;
  top:50%;
  transform: translateY(-50%);
  transition:all 0.6s var(--easeout);
  stroke: white;
}
.btn_more:hover svg {
  right:0.75rem;
}
.tac .btn_more {
  margin: 0 auto;
}

/*--------------------
　共通
---------------------*/
small {
  font-size:75%;
}
.ttl_top_common h2 {
  gap:var(--size20);
}
.ttl_top_common h2:not(.d_column) {
  align-items: baseline;
}
@media (max-width: 768px) {
  .ttl_top_common h2:not(.d_column) {
    flex-direction: column;
    align-items: flex-start;
  }
}
.ttl_top_common h2 .en {
  font-size: 4.166666em;
  line-height: 1;
  display: block;
  font-weight:700;
}
.ttl_top_common h2 .ja {
  font-size: 1.3333em;
}

.ttl_common {
  margin-bottom: var(--size100);
  display: flex;
  gap:var(--size100);
}

.ttl_common:before {
  content:"";
  width:calc(3.333em + 20px + 1.3333em);
  height:auto;
  aspect-ratio:1/1;
  background-color: var(--blue);
  display: block;
}


.ttl_common h2 .en {
  font-size:3.3333em;
  margin-bottom: var(--size20);
  line-height: 1;
  font-weight: 700;
  display: block;
}
.ttl_common h2 .ja {
  font-size: 1.3333em;
}
@media (max-width: 768px) {

  .ttl_common {
    gap:var(--innergap);
    margin-bottom: var(--size40);
  }
  .ttl_common:before {
    content:"";
    width:var(--outergap);
}
}
.ttl_h3 {
  font-size: 1.66666em;
  background-color: var(--yellow);
  width:fit-content;
  padding-inline:1rem;
  font-weight:700;
}
.ttl_h3 span {
  width:100%;
  display: inline-block;
}
@media (max-width: 768px) {
  .ttl_h3 {
    font-size: 1.375em;
  }
}
h4 {
  font-size:1.5em;
  font-weight: 700;
}

h5 {
  font-size: 1.25em;
  font-weight: 600;
}

a.txt_link {
  text-decoration: underline;
}

p.txt {
  line-height: 2;
}
p.cap {
  font-size: 0.85em;
}

ul.dot li {
  margin-left: 1.5em;
  text-indent: -1.5em;
}
ul.dot li:before {
  content: "● ";
  font-weight: 700;
  color: var(--yellow);
  width: 1em;
}

ol.num {
  counter-reset: number 0;
}
ol.num li {
  font-family: var(--fontEn);
  position: relative;
  margin-bottom: 0.5em;
}
ol.num li:before {
  counter-increment: number 1;
  content: counter(number);
}


table.table {
  border: #959595 1px solid;
  border-collapse: collapse;
}
table.table th, table.table td {
  padding: 10px;
  border: #CCCCCC 1px solid;
  font-size: 1rem;
}
@media (max-width: 768px) {
  table.table th, table.table td {
    font-size: 0.85rem;
  }
}
table.table thead * {
  background-color: #E5F8FF;
}
table.table thead th {
  text-align: center;
}
table.table tbody th {
  background-color: #EEEEEE;
}

.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}

.js-img_pala {
  overflow: hidden;
}
.js-img_pala img {
  width:110%;
  height:110%;
  max-width: none;
  object-fit: cover;
}
.local_nav ul li a{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#878B8F;
  color:white;
  padding:1rem;
  transition:background-color .4s var(--ease); 
}
.local_nav ul li a:hover {
  background-color:var(--blue);
}
/*--------------------
　contact_bn
---------------------*/
.contact_bn {
  padding:calc(2*var(--size100)) 0;
  background: url(../img/bg_contact_bn.jpg) right center no-repeat;
  background-size:cover;
  color:white;
}
.contact_bn:before {
  content:"";
  width:100%;
  height:100%;
  background: #878B8F;
  mix-blend-mode: multiply;
  position:absolute;
  left:0;
  top:0;
  transition:all .4s var(--easeout);
}
.contact_bn:hover:before {
  background: #39434d;
}
.contact_bn .container {
  position:relative;
  z-index: 1;
}

.contact_bn .container .ttl_top_common {
  align-items: baseline;
  gap:var(--size30);
}
@media (max-width: 768px) {
  .contact_bn {
    padding:var(--size80) 0;
  }
  .contact_bn .container .ttl_top_common h2 .en {
    font-size:2.75em;
  }
}


/*--------------------
　hero
---------------------*/
span.smoothText {
  overflow: hidden;
  display: block;
}

span.smoothTextTrigger {
  transition: .8s ease-in-out;
  transform: translate3d(0, 100%, 0) skewY(12deg);
  transform-origin: left;
  display: block;
}

span.smoothTextTrigger.smoothTextAppear {
  transform: translate3d(0, 0, 0) skewY(0);
}

.mv-js-fadeUp {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease-in-out;
  transition-delay: 1s;
}

.loaded .mv-js-fadeUp {
  opacity: 1;
  transform: translateY(0);
}

.hero {
  width: 100%;
  height: auto;
  aspect-ratio: 192/76;
  position: relative;
  mix-blend-mode: overlay;
}

@media (max-width: 768px) {
  .hero {
    aspect-ratio: auto;
  }
}
.hero::before,.hero::after {
  content: "";
  width: 63.5%;
  height: 50px;
  background:var(--yellow);
  position: absolute;
  transition:.5s var(--easeout);
}
.hero::before {
  left: 0;
  top: 31.5%;
  transform-origin: left;
  transform: scaleX(0);
}
.hero::after {
  right: 0;
  bottom: 31.5%;
  transform-origin: right;
  transform: scaleX(0);
}
.hero.view::before {
  transform: scaleX(1);
}
.hero.view::after {
  transform: scaleX(1);
}
.hero .container {
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100%;
}
@media (max-width: 768px) {
  .hero .container {
    padding: var(--size100) 4%;
  }
}
.hero .tit_fv {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  transform: translateY(3.125em);
  position:relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .hero .tit_fv {
    transform: translateY(1em);
  }
}
.hero .tit_fv h1 > * {
  display: block;
  text-align: center;
}
.hero .tit_fv h1 .ja {
  font-size:2em;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  line-height: 1.2;
  font-weight:500;
}
.hero .tit_fv h1 .en {
  font-size:6.6666em ;
  line-height: 1;
}
@media (max-width: 768px) {
  .hero .tit_fv h1 .ja {
    font-size:1.75em;
  }
  .hero .tit_fv h1 .en {
    font-size:4em ;
  }
}
.breadcrumb {
  background-color: #FFF;
  width: 100%;
  padding: var(--size24) 0;
}
.breadcrumb ul {
  display: flex;
  gap: 1em;
}
.breadcrumb ul li a {
  color: #000000;
}
.breadcrumb ul li.current {
  color: #0A2C87;
}
@media (max-width: 768px) {
  .breadcrumb ul li {
    font-size: 0.85rem;
  }
}
.breadcrumb ul li:not(:last-child):after {
  content: "- ";
  margin-left: 1em;
}

.notop section:not(:first-child) {
  padding-top: calc(2*var(--size60));
  padding-bottom: calc(2*var(--size70));
}

.notop .breadcrumb + section {
  padding-top: calc(var(--size60));
}



/* -------------------------------------------------------------
animation
------------------------------------------------------------- */
.slide-in {
  overflow: hidden;
  display: inline-block;
}

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

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  transform: translateX(-100%);
}

.slideAnimeLeftRight {
  opacity: 0;
}

.slideAnimeLeftRight.on {
  animation-name: slideTextX100;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  0% {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.js-shuffleText {
  opacity: 0;
}

.js-shuffleText.is-show {
  animation-name: fadeIn;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

@keyframes maskInLeft {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.fade, .blur-in {
  opacity: 0;
}

.js-fadeUp {
  opacity: 0;
  transform: translateY(0);
}

.js-fadeUp.on {
  animation: fadeInUp 0.5s cubic-bezier(0.26, 0.57, 0.41, 0.74);
  animation-fill-mode: both;
}

.blur-in.active {
  animation: blurIn 1.5s ease;
  animation-fill-mode: both;
}

.js-zoomout img {
  transform-origin: center;
  transform: scale(1.1);
}

.js-zoomout.on img {
  animation: zoomOut 1.0s ease-in-out forwards;
}

.delay1 {
  animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
}

.delay2 {
  animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
  -webkit-animation-delay: 0.35s;
  -o-animation-delay: 0.35s;
}
.delay2 * {
  animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
  -webkit-animation-delay: 0.35s;
  -o-animation-delay: 0.35s;
}

.delay3 {
  animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
}
.delay3 * {
  animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
}

.delay4 {
  animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
}

.delay5 {
  animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
}

.delay6 {
  animation-delay: 0.95s;
  -moz-animation-delay: 0.95s;
  -webkit-animation-delay: 0.95s;
  -o-animation-delay: 0.95s;
}