@charset "UTF-8";
/* CSS Document */




:root{
  --main_color: hsla(167,55%,47%,1.00);
  --accent_color: #ECEBDD;
}



body{
  padding: 0;
  margin: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  text-align: justify;
  color: hsla(0,0%,35%,1.00);
}










.fadeUp {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeUp.is-active {
  opacity: 1;
  transform: translateY(0);
}




#header_kotei{
  display: block;
  position: relative;
  width: 100%;
  height: 60px;
  background-color: var(--main_color);
  z-index: 999999;
  top: 0px;   /* 上に隠す */
  left: 0;
  overflow: hidden;
}
#header{
  display: block;
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: var(--main_color);
  z-index: 999999;
  top: -100px;   /* 上に隠す */
  left: 0;
  color: white;
  align-items: center;
  justify-content: center;
  transition: top 0.4s ease;
  box-shadow: 0 0 5px gray;
  overflow: hidden;
}
/* 表示状態 */
#header.active {
  top: 0;
}
.header_nk{
  display: flex;
  justify-content: space-between;
  width: 95%;
  max-width: 1250px;
  margin: auto;
}
.header_left{
  display: block;
  width: 80px;
  padding: 5px 0 0 0;
}
.header_right{
  display: block;
}



/* ===== hamburger button ===== */
.hamburger{
  width: 60px;
  height: 60px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.hamburger span{
  position: absolute;
  left: 50%;
  width: 32px;
  height: 3px;
  background:#FFF;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: all .3s ease;
}

/* 3本線の位置 */
.hamburger span:nth-child(1){ top: 16px; }
.hamburger span:nth-child(2){ top: 27px; }
.hamburger span:nth-child(3){ top: 38px; }

/* ===== 開いた時（×になる） ===== */
.hamburger.is-active span:nth-child(1){
  top: 28px;
  transform: translateX(-50%) rotate(45deg);
}

.hamburger.is-active span:nth-child(2){
  opacity: 0;
}

.hamburger.is-active span:nth-child(3){
  top: 28px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ===== overlay ===== */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999990;
 　z-index: 1000000;
}

/* ===== drawer ===== */
.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(86vw, 360px);
  background: #fff;
  z-index: 999990;

  /* 右→左スライドの肝 */
  transform: translateX(100%);
  transition: transform .28s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  padding: 16px;
  
}
.drawer.is-open{
  transform: translateX(0);
}

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.drawer__title{
  margin:0;
  font-weight:700;
  letter-spacing: .08em;
}
.drawer__close{
  width: 40px;
  height: 40px;
  border: none;
  background: #f3f3f3;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.drawer__list{
  list-style:none;
  padding:0;
  margin: 0;
  display:grid;
  gap: 8px;
  font-weight: bold;
}
.drawer__link{
  display:flex;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: #006497;
}
.drawer__link span{
  font-size: 0.6em;
  margin: 6px 0 0 10px;
}
.drawer__link:hover{
  background:#f6f6f6;
}

/* スクロール禁止用 */
body.no-scroll{
  overflow: hidden;
}








main{
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.main_view{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: auto;
  background-color: hsla(169,48%,80%,1.00);
  overflow: hidden;
  padding: 40px 0 20px 0;
}
.top_bg{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
}
.main_view_nk{
  display: block;
  position: relative;
  min-width: 1100px;
  max-width: 1300px;
  height: 800px;
  margin: auto;
}
.mv_1{
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 700px;
  height: auto;
  z-index: 1;
}
.mv_2{
  display: block;
  position: absolute;
  top: 40px;
  left: 730px;
  width: 300px;
  height: auto;
  z-index: 1;
}
.mv_3{
  display: block;
  position: absolute;
  top: 550px;
  left: 0;
  width: 600px;
  height: auto;
  z-index: 1;
}
.mv_4{
  display: block;
  position: absolute;
  top: 500px;
  right: 0px;
  width: 500px;
  height: auto;
  z-index: 1;
}
.marumachi{
  display: block;
  position: absolute;
  z-index: 0;
  width: 1000px;
  height: auto;
  bottom: -400px;
  left: 300px;
  animation: mawarumachi 240s infinite;
}
@keyframes mawarumachi {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}






.main_about_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 120px 0 160px;
  background-color: var(--main_color);
  margin-top: -2vw;
}
.main_about{
  display: block;
  width: 1000px;
  height: auto;
  margin: auto;
}
.main_about h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 140px;
  color: #FFFFFF;
  font-weight: 400;
  font-family: "Nosifer", sans-serif;
  font-style: normal;
}
.main_about_flex{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 50px auto 0;
}
.main_about_left{
  display: block;
  width: 450px;
  height: auto;
}
.main_about_left img{
  display: block;
  width: 350px;
  height: auto;
  margin: auto;
}

.main_about_right{
  display: block;
  width: 500px;
  height: auto;
  color: #FFFFFF;
}
.main_about_right h2{
  display: block;
  margin: 0;
  font-size: 18px;
}
.main_about_right p{
  display: block;
  font-size: 15px;
}





.main_service_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 120px 0 160px;
  background-color: #FFFFFF;
}
.main_service{
  display: block;
  position: relative;
  width: 1000px;
  height: auto;
  margin: auto;
  z-index: 1000;
}
.usagi_left{
  display: block;
  position: absolute;
  width: 300px;
  height: auto;
  top: 200px;
  left: -34px;
}
.usagi_right{
  display: block;
  position: absolute;
  width: 350px;
  height: auto;
  top: 580px;
  right: -40px;
}
.main_service h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 140px;
  color: var(--main_color);
  font-family: "Coiny", system-ui;
  font-weight: 400;
  font-style: normal;
}
.main_service_flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin: 0px auto 0;
}
/* ===== アニメーション本体 ===== */
[data-stagger] > *{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  transition:
    opacity .7s ease,
    transform .7s ease,
    filter .7s ease;

  /* ここが時間差。--i を 0,1,2... と増やす */
  transition-delay: calc(var(--i, 0) * 120ms);
  will-change: opacity, transform, filter;
}

[data-stagger].is-inview > *{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* オプション：ユーザーが動き軽減設定なら無効化 */
@media (prefers-reduced-motion: reduce){
  [data-stagger] > *{
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.msf_box{
  display: block;
  width: 310px;
  height: auto;
  background-color: #FFFFFF;
  margin: 10px 0;
  border-radius: 30px;
  border: solid 6px hsla(169,100%,37%,1.00);
  box-shadow: 5px 5px 0px hsla(169,50%,83%,1.00);
  overflow: hidden;
}
.msf_box_phot{
  display: block;
  width: 100%;
  height: 180px;
  background-color: #FFF1FD;
  background-repeat: no-repeat;
  background-position: center center;
}
.msgp_1{
  background-image: url("../img/icon1.png");
  background-size: 50%;
}
.msgp_2{
  background-image: url("../img/icon2.png");
  background-size: 50%;
}
.msgp_3{
  background-image: url("../img/icon3.png");
  background-size: 60%;
}
.msgp_4{
  background-image: url("../img/icon4.png");
  background-size: 40%;
}
.msgp_5{
  background-image: url("../img/icon5.png");
  background-size: 60%;
}
.msgp_6{
  background-image: url("../img/icon6.png");
  background-size: 30%;
}
.msf_box h2{
  display: block;
  margin: 15px auto 0;
  text-align: center;
  font-size: 18px;
  color: #E7B000;
}
.service_p1{
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  width: 100%;
  margin: 0 auto -20px;
}
.service_p1 span{
  font-size: 80px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-right: 10px;
}
.s_red{
  color: hsla(359,100%,42%,1.00);
}
.s_green{
  color: #009255;
}
.s_blue{
  color: #0046AB;
}
.s_pink{
  color: #CC00B0;
}
.s_orange{
  color: #D78500;
}
.s_yellow{
  color: #C0CD00;
}
.service_p2{
  display: block;
  font-size: 12px;
  padding: 0px 20px 10px 20px;
}



/* 初期状態（隠れてる） */
.pop {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 0.6s ease;
}

/* 表示されたとき */
.pop.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: bounce 0.6s ease;
}
/* ぴょこん */
@keyframes bounce {
  0%   { transform: translateY(30px) scale(0.9); }
  50%  { transform: translateY(-10px) scale(1.05); }
  70%  { transform: translateY(5px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}


/* 共通 */
.slidein{
  opacity: 0;
  transform: translateX(0px); /* 右から来る初期位置（右へズラす） */
  transition: transform .7s ease;
  will-change: transform, opacity;
}

/* 左から来たい場合は左へズラす */
.slidein.left{
  transform: translateX(-160px);
}

/* 右から来たい場合は右へズラす（共通と同じでもOK） */
.slidein.right{
  transform: translateX(160px);
}

/* 表示トリガー後 */
.slidein.is-inview{
  opacity: 1;
  transform: translateX(0);
}








.main_feature_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 120px 0 160px;
  background-color: #E5B200;
  background-image: url("../img/white_bg.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
.main_feature{
  display: block;
  width: 1000px;
  height: auto;
  margin: auto;
}
.main_feature h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 140px;
  color: #FFFFFF;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.main_feature_block{
  display: block;
  width: 100%;
  height: auto;
  margin: 50px auto 0;
}
.mfb_box{
  display: flex;
  position: relative;
  width: 940px;
  height: auto;
  padding: 20px 30px 35px;
  background: rgba(255, 255, 255, 0.8); /* 黒の50%透明 */
  margin: 20px 0;
}
.mfb_left{
  display: block;
  width: 100px;
  font-size: 60px;
  text-align: center;
  background: linear-gradient(140deg, hsla(46,100%,32%,1.00), #00A789);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 一応標準対応 */
  background-clip: text;
  color: transparent;
  line-height: 50px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.mfb_left span{
  display: block;
  font-size: 20px;
  margin: 0;
}
.mfb_right{
  display: block;
  position: relative;
  width: 810px;
  margin-left: 30px;
}
.mfb_right h2{
  display: block;
  margin: 10px 0 0 0;
  border-bottom: solid 1px hsla(100,56%,36%,1.00);
  font-size: 25px;
}
.mfb_right p{
  display: block;
  margin: 10px 0 0 0;
}







.main_flow_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 120px 0 160px;
}
.main_flow{
  display: block;
  width: 1000px;
  height: auto;
  margin: auto;
}
.main_flow h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 140px;
  color: #FFFFFF;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.reveal{
  position: relative;
  display: inline-block;
  overflow: hidden;           /* 白い帯をクリップする */
  line-height: 1.2;
}

.reveal.small{
  margin-top: 20px;
  display: inline-block;
  margin-left: 350px;
}
.reveal__text{
  display: inline-block;
  opacity: 0;
  transform: translateY(0px);
  transition: opacity .1s ease, transform .1s ease;
  transition-delay: .55s;     /* 白い帯より後に出す */
  position: relative;
  z-index: 2;                 /* 帯の下/上は好みで調整 */
}

/* 白い帯（疑似要素） */
.reveal::before{
  content: "";
  position: absolute;
  inset: 0;                   /* 文字エリア全体 */
  background: #fff;           /* 白い帯 */
  transform: translateX(-110%);
  z-index: 3;                 /* 文字の上を通過させたいので上に */
}

/* 発火（JSで .is-in を付与） */
.reveal.is-in::before{
  animation: wipe 1.0s cubic-bezier(.7,0,.2,1) forwards;
}

.reveal.is-in .reveal__text{
  opacity: 1;
  transform: translateY(0);
}

/* 帯が「入って→抜ける」動き */
@keyframes wipe{
  0%   { transform: translateX(-110%); }
  45%  { transform: translateX(0%); }     /* 覆う */
  100% { transform: translateX(110%); }   /* 右へ抜ける */
}




.main_flow_flex{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 50px auto 0;
}
.flow_box{
  display: block;
  width: 220px;
  height: auto;
  background-color: #FFFFFF;
  margin: 10px 0;
  padding-bottom: 20px;
}
.flow_p1{
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: auto;
  color: hsla(204,100%,28%,1.00);
}
.flow_p1 span{
  font-size: 50px;
  margin-left: 10px;
}
.flow_p2{
  display: block;
  width: 190px;
  text-align: center;
  background-color: hsla(205,100%,29%,1.00);
  color: #FFFFFF;
  margin: auto;
  font-size: 14px;
  padding: 5px;
  font-weight: bold;
}
.flow_p3{
  display: block;
  padding: 0 10px 10px 10px;
  font-size: 12px;
}
.flow_img1{
  display: block;
  width: auto;
  height: 100px;
  margin: auto;
}
.sankaku{
  display: block;
  width: auto;
  height: 30px;
  margin: 165px 0 0 0;
}

#geo-bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 50vw;
  z-index: -1;
  pointer-events: none; /* 背景としてクリック邪魔しない */
}








.main_voice_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 120px 0 160px;
  background-color: #D64253;
  overflow: hidden;
}

.main_voice{
  display: block;
  position: relative;
  width: 1000px;
  height: auto;
  margin: auto;
}
.main_voice h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 140px;
  color: #FFFFFF;
  font-family: "Limelight", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.main_voice_flex{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 50px auto 0;
}
.voice_box{
  display: block;
  width: 320px;
  height: auto;
  background-color: #FFFFFF;
  margin: 10px 0;
}
.voice_phot{
  display: block;
  width: 100%;
  height: 200px;
  background-color: #FBF2F4;
  background-repeat: no-repeat;
  background-size: 160px auto;
  background-position: center center;
}
.vp_1{
  background-image: url("../img/hito2.png");
}
.vp_2{
  background-image: url("../img/hito1.png");
}
.vp_3{
  background-image: url("../img/hito3.png");
}
.voice_box h2{
  display: block;
  margin: auto;
  font-size: 22px;
  text-align: center;
  width: 100%;
  height: 40px;
  background-color: hsla(169,100%,37%,1.00);
  line-height: 40px;
  color: #FFFFFF;
}
.voice_box p{
  display: block;
  padding: 10px 20px;
  font-size: 14px;
}

.sen_left{
  display: block;
  position: absolute;
  top: 550px;
  left: -300px;
  width: 500px;
}
.sen_right{
  display: block;
  position: absolute;
  top: -140px;
  right: -300px;
  width: 600px;
}






.main_qa_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 120px 0 160px;
  background-color: #F2F2F2;
  overflow: hidden;
}

/* 背景レイヤー */
.q-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;

  perspective: 900px;          /* 3Dに見せる奥行き */
  perspective-origin: 50% 50%;
}
/* ? の基本スタイル */
.q{
  position: absolute;
  font-weight: 800;
  opacity: 0.18;
  user-select: none;

  transform-style: preserve-3d; /* 子要素を3Dに（単体でもOK） */
  backface-visibility: hidden;  /* 裏面を見せない → “裏表感”が綺麗 */

  animation:
    q-flip 3.8s ease-in-out infinite,
    q-float 6s ease-in-out infinite;
}

/* 裏表フリップ（Y軸でひっくり返る） */
@keyframes q-flip{
  0%   { transform: rotateY(0deg) rotateX(6deg); }
  50%  { transform: rotateY(180deg) rotateX(-6deg); }
  100% { transform: rotateY(360deg) rotateX(6deg); }
}

/* ふわふわはそのまま */
@keyframes q-float{
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -18px; }
}
/* 位置・サイズ・速度を個別に（ここが“それっぽさ”の肝） */
.q:nth-child(1) { left: 6%;  top: 12%; font-size: 44px; animation-duration: 3.2s, 5.8s; }
.q:nth-child(2) { left: 18%; top: 70%; font-size: 70px; animation-duration: 5.0s, 7.4s; opacity: .12; }
.q:nth-child(3) { left: 30%; top: 22%; font-size: 90px; animation-duration: 4.2s, 6.2s; }
.q:nth-child(4) { left: 42%; top: 60%; font-size: 56px; animation-duration: 3.6s, 5.6s; }
.q:nth-child(5) { left: 55%; top: 10%; font-size: 64px; animation-duration: 6.0s, 8.0s; opacity: .10; }
.q:nth-child(6) { left: 62%; top: 78%; font-size: 48px; animation-duration: 3.8s, 6.8s; }
.q:nth-child(7) { left: 74%; top: 34%; font-size: 84px; animation-duration: 4.8s, 7.0s; }
.q:nth-child(8) { left: 88%; top: 16%; font-size: 52px; animation-duration: 3.0s, 5.4s; }

.q:nth-child(9)  { left: 10%; top: 40%; font-size: 60px; animation-duration: 4.4s, 6.6s; }
.q:nth-child(10) { left: 24%; top: 8%;  font-size: 50px; animation-duration: 3.4s, 5.2s; opacity: .14; }
.q:nth-child(11) { left: 36%; top: 86%; font-size: 78px; animation-duration: 5.6s, 8.2s; }
.q:nth-child(12) { left: 48%; top: 32%; font-size: 46px; animation-duration: 3.1s, 5.9s; opacity: .16; }
.q:nth-child(13) { left: 58%; top: 52%; font-size: 92px; animation-duration: 6.4s, 9.0s; opacity: .08; }
.q:nth-child(14) { left: 70%; top: 6%;  font-size: 62px; animation-duration: 4.0s, 6.0s; }
.q:nth-child(15) { left: 82%; top: 66%; font-size: 54px; animation-duration: 3.7s, 6.3s; }
.q:nth-child(16) { left: 92%; top: 88%; font-size: 72px; animation-duration: 5.2s, 7.8s; opacity: .11; }

/* 追加4つ */
.q:nth-child(17) { left: 4%;  top: 86%; font-size: 58px; animation-duration: 3.9s, 6.7s; }
.q:nth-child(18) { left: 15%; top: 28%; font-size: 96px; animation-duration: 6.8s, 9.4s; opacity: .07; }
.q:nth-child(19) { left: 66%; top: 26%; font-size: 44px; animation-duration: 3.3s, 5.5s; opacity: .18; }
.q:nth-child(20) { left: 78%; top: 84%; font-size: 88px; animation-duration: 5.9s, 8.6s; opacity: .09; }

/* “動くの苦手”設定の人には止める（アクセシビリティ） */
@media (prefers-reduced-motion: reduce){
  .q{ animation: none; }
}







.main_qa{
  display: block;
  width: 1000px;
  height: auto;
  margin: auto;
}
.main_qa h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 120px;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.main_qa h1 .q1{
  color: hsla(169,100%,37%,1.00);
  font-size: 1.2em;
}
.main_qa h1 .q2{
  color: #C61155;
  font-size: 1.2em;
}
.main_qa_block{
  display: block;
  width: 100%;
  height: auto;
  margin: 50px auto 0;
}
.qa_box{
  display: block;
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
  margin: 20px 0;
}
.qa_up{
  display: flex;
  width: 950px;
  border-bottom: solid 1px hsla(0,0%,69%,1.00);
  margin: auto;
  padding: 20px 0 10px 0;
}
.qa_up span{
  display: block;
  width: 50px;
  height: 50px;
  background-color: hsla(167,100%,38%,1.00);
  text-align: center;
  line-height: 50px;
  color: #FFFFFF;
  font-size: 30px;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.qa_up p{
  display: block;
  padding: 0 20px;
  font-size: 20px;
  line-height: 50px;
  margin: 0;
  font-weight: bold;
}
.qa_down{
  display: flex;
  width: 950px;
  margin: 10px auto 0;
}
.qa_down span{
  display: block;
  width: 50px;
  height: 50px;
  background-color: #DB0054;
  text-align: center;
  line-height: 50px;
  color: #FFFFFF;
  font-size: 30px;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.qa_down p{
  display: block;
  padding: 0 20px 20px 20px;;
  font-size: 16px;
  line-height: 30px;
  margin: 0;
  font-weight: 500;
  width: 860px;
}









.contact_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 20px 0;
}
.contact{
  display: block;
  width: 97%;
  height: auto;
  margin: auto;
  background-color: #0083C1;
  border-radius: 20px;
  padding: 40px 0 80px 0;
}
.contact_top{
  display: none;
  margin: auto;
  text-align: center;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  color: #FFFFFF;
  font-size: 25px;
  opacity: 0.7;
  margin-bottom: -30px;
  padding-top: 30px;
  
}
.contact h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 140px;
  color: #00669A;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: 400;
  font-style: normal;
}
.contact_block{
  display: flex;
  justify-content: center;
  width: 900px;
  height: auto;
  margin: auto;
  border-top: solid 1px #FFFFFF;
  border-bottom: solid 1px #FFFFFF;
  padding: 40px 0;
}
.contact_tel{
  display: block;
  margin: 0;
}
.contact_tel_flex{
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  width: 400px;
  font-size: 40px;
  line-height: 0;
  margin: 0;
}
.contact_tel_flex img{
  display: block;
  width: auto;
  height: 40px;
  margin: 20px 10px 0 0;
}
.tel_under{
  font-size: 14px;
  text-align: center;
  margin: -10px 0 0 0;
  color: hsla(201,100%,31%,1.00);
  font-weight: bold;
}
.contact_mail_flex{
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  width: 450px;
  font-size: 40px;
  line-height: 0;
  margin: 0;
}
.contact_mail_flex img{
  display: block;
  width: auto;
  height: 30px;
  margin: 25px 10px 0 0;
}
.mail_under{
  font-size: 14px;
  text-align: center;
  margin: -10px 0 0 0;
  color: hsla(201,100%,31%,1.00);
  font-weight: bold;
}









footer{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 30px 0 70px 0;
  overflow: hidden;
}
.footer_nk{
  display: flex;
  justify-content: space-between;
  min-width: 1100px;
  max-width: 1300px;
  margin: 0px auto 0;
}
.footer_left{
  display: block;
  width: 500px;
  height: auto;
  padding-left: 20px;
}
.footer_left a{
  display: block;
  width: 200px;
  opacity: 1;
  transition: 0.3s;
}
.footer_left a:hover{
  opacity: 0.6;
}
.footer_left p{
  display: block;
  font-size: 14px;
  margin: 10px 0 0 0;
}
.footer_left span{
  display: block;
  font-size: 20px;
  margin: 10px 0 0 0;
  font-weight: bold;
}

.footer_right{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-right: 0px;
  width: 280px;
  margin-top: 30px;
}
.footer_right a{
  display: block;
  width: 140px;
  margin: 0;
  text-decoration: none;
  color: hsla(240,1%,35%,1.00);
  font-size: 14px;
}
.footer_right a:hover{
  text-decoration: underline;
}

.footer_under{
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 5px 0;
  background-color: hsla(169,100%,37%,1.00);
  text-align: center;
  color: #FFFFFF;
  font-size: 12px;
}












.main_view_sub{
  display: block;
  width: 100%;
  height: auto;
}

.sub_flex{
  display: flex;
  justify-content: space-between;
  width: 1100px;
  margin: 150px auto 0;
}
.sub_left{
  display: block;
  width: 600px;
}
.sub_left h1{
  font-size: 95px;
  margin: 0;
  line-height: 130px;
  color: #0C2A42;
}
.sub_left h1 span{
  color: #DD64B0;
}
.sub_left p{
  font-size: 25px;
  margin: 0;
  font-weight: 500;
  color: #0C2A42;
}

.sub_right{
  display: block;
  width: 500px;
  
}

.float {
  display: inline-block;
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}





.company_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 80px 0 150px;
}
.company{
  display: block;
  width: 1000px;
  height: auto;
  margin: auto;
}

.company_table{
  display: block;
  width: 100%;
  margin: 100px auto 0;
  color: #0C2A42;
}
.company_table tr{
  display: flex;
  padding: 50px 0;
  border-top: solid 1px hsla(0,0%,71%,1.00);
}
.company_table tr:nth-child(6){
  border-bottom: solid 1px hsla(0,0%,71%,1.00);
}
.company_table tr th{
  display: block;
  width: 170px;
  padding-left: 30px;
  font-weight: 500;
}
.company_table tr td{
  display: block;
  width: 800px;
  font-weight: 500;
}





/* 背景 */
.bg-animation{
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

/* 丸 */
.blob{
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #00BE9C;
  filter: blur(5px);
  opacity: 0.6;

  animation: 
    move 25s ease-in-out infinite alternate,
    morph 15s ease-in-out infinite alternate;
  opacity: 0.5;
}

/* ゆっくり移動 */
@keyframes move{
  0%   { transform: translate(-50%, -50%) translate(0px, 0px); }
  50%  { transform: translate(-50%, -50%) translate(120px, -80px); }
  100% { transform: translate(-50%, -50%) translate(-100px, 100px); }
}

/* うねうね変形 */
@keyframes morph{
  0%   { border-radius: 50%; }
  25%  { border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%; }
  50%  { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
  75%  { border-radius: 70% 30% 60% 40% / 30% 70% 40% 60%; }
  100% { border-radius: 50%; }
}











/* ============================
   Responsive (<= 600px)
   ============================ */
@media (max-width: 600px){
  
  
  
  
.fadeUp {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeUp.is-active {
  opacity: 1;
  transform: translateY(0);
}




#header_kotei{
  display: block;
  position: relative;
  width: 100%;
  height: 15vw;
  background-color: var(--main_color);
  z-index: 999999;
  top: 0px;   /* 上に隠す */
  left: 0;
  overflow: hidden;
}
#header{
  display: block;
  position: fixed;
  width: 100%;
  height: 15vw;
  background-color: var(--main_color);
  z-index: 999999;
  top: -18vw;   /* 上に隠す */
  left: 0;
  color: white;
  align-items: center;
  justify-content: center;
  transition: top 0.4s ease;
  box-shadow: 0 0 5px gray;
  overflow: hidden;
}
/* 表示状態 */
#header.active {
  top: 0;
}
.header_nk{
  display: flex;
  justify-content: space-between;
  width: 95%;
  max-width: 1250px;
  margin: auto;
}
.header_left{
  display: block;
  width: 20vw;
  padding: 2vw 0 0 0;
}
.header_right{
  display: block;
}



/* ===== hamburger button ===== */
.hamburger{
  width: 20vw;
  height: 15vw;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.hamburger span{
  position: absolute;
  left: 50%;
  width: 10vw;
  height: 1vw;
  background:#FFF;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: all .3s ease;
}

/* 3本線の位置 */
.hamburger span:nth-child(1){ top: 5vw; }
.hamburger span:nth-child(2){ top: 8vw; }
.hamburger span:nth-child(3){ top: 11vw; }

/* ===== 開いた時（×になる） ===== */
.hamburger.is-active span:nth-child(1){
  top: 8vw;
  transform: translateX(-50%) rotate(45deg);
}

.hamburger.is-active span:nth-child(2){
  opacity: 0;
}

.hamburger.is-active span:nth-child(3){
  top: 8vw;
  transform: translateX(-50%) rotate(-45deg);
}

/* ===== overlay ===== */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999990;
 　z-index: 1000000;
}

/* ===== drawer ===== */
.drawer{
  position: fixed;
  top: 2vw;
  right: 0;
  height: 100dvh;
  width: min(86vw, 360px);
  background: #fff;
  z-index: 999990;

  /* 右→左スライドの肝 */
  transform: translateX(100%);
  transition: transform .28s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  padding: 16px;
  
}
.drawer.is-open{
  transform: translateX(0);
}

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.drawer__title{
  margin:0;
  font-weight:700;
  letter-spacing: .08em;
}
.drawer__close{
  width: 0px;
  height: 0px;
  border: none;
  background: #f3f3f3;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.drawer__list{
  list-style:none;
  padding:0;
  margin: 0;
  display:grid;
  gap: 8px;
  font-weight: bold;
}
.drawer__link{
  display:flex;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: #006497;
}
.drawer__link span{
  font-size: 0.6em;
  margin: 6px 0 0 10px;
}
.drawer__link:hover{
  background:#f6f6f6;
}

/* スクロール禁止用 */
body.no-scroll{
  overflow: hidden;
}








main{
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.main_view{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: auto;
  background-color: hsla(169,48%,80%,1.00);
  overflow: hidden;
  padding: 10vw 0 15vw 0;
}
.top_bg{
  display: block;
  position: absolute;
  width: 200%;
  height: 200vw;
  top: 0;
  left: 0;
  opacity: 0.2;
}
.main_view_nk{
  display: block;
  position: relative;
  min-width: 0;
  max-width: 95%;
  height: 130vw;
  margin: auto;
}
.mv_1{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: auto;
  z-index: 1;
}
.mv_2{
  display: block;
  position: absolute;
  top: 35vw;
  left: 0;
  width: 50vw;
  height: auto;
  z-index: 1;
}
.mv_3{
  display: block;
  position: absolute;
  top: 60vw;
  left: 0;
  width: 80vw;
  height: auto;
  z-index: 1;
}
.mv_4{
  display: block;
  position: absolute;
  top: 90vw;
  right: 0px;
  width: 95vw;
  height: auto;
  z-index: 1;
}
.marumachi{
  display: block;
  position: absolute;
  z-index: 0;
  width: 100vw;
  height: auto;
  bottom: 10vw;
  left: 30vw;
  animation: mawarumachi 240s infinite;
}
@keyframes mawarumachi {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}






.main_about_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 15vw 0 15vw;
  background-color: var(--main_color);
  margin-top: -2vw;
}
.main_about{
  display: block;
  width: 95%;
  height: auto;
  margin: auto;
}
.main_about h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 12vw;
  color: #FFFFFF;
  font-weight: 400;
  font-family: "Nosifer", sans-serif;
  font-style: normal;
}
.main_about_flex{
  display: block;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 5vw auto 0;
}
.main_about_left{
  display: block;
  width: 80vw;
  height: auto;
  margin: auto;
}
.main_about_left img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 0 5vw;
}

.main_about_right{
  display: block;
  width: 95%;
  height: auto;
  color: #FFFFFF;
}
.main_about_right h2{
  display: block;
  margin: 0;
  font-size: 3.5vw;
}
.main_about_right p{
  display: block;
  font-size: 3.5vw;
}





.main_service_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 15vw 0 15vw;
  background-color: #FFFFFF;
}
.main_service{
  display: block;
  position: relative;
  width: 95%;
  height: auto;
  margin: auto;
  z-index: 1000;
}
.usagi_left{
  display: block;
  position: absolute;
  width: 30vw;
  height: auto;
  top: 10vw;
  left: -3.2vw;
}
.usagi_right{
  display: block;
  position: absolute;
  width: 30vw;
  height: auto;
  top: 10vw;
  right: -3.2vw;
}
.main_service h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 12vw;
  color: var(--main_color);
  font-family: "Coiny", system-ui;
  font-weight: 400;
  font-style: normal;
}
.main_service_flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin: 0px auto 0;
}
/* ===== アニメーション本体 ===== */
[data-stagger] > *{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  transition:
    opacity .7s ease,
    transform .7s ease,
    filter .7s ease;

  /* ここが時間差。--i を 0,1,2... と増やす */
  transition-delay: calc(var(--i, 0) * 120ms);
  will-change: opacity, transform, filter;
}

[data-stagger].is-inview > *{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* オプション：ユーザーが動き軽減設定なら無効化 */
@media (prefers-reduced-motion: reduce){
  [data-stagger] > *{
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.msf_box{
  display: block;
  width: 44vw;
  height: auto;
  background-color: #FFFFFF;
  margin: 1vw 0;
  border-radius: 10vw;
  border: solid 3px hsla(169,100%,37%,1.00);
  box-shadow: 5px 5px 0px hsla(169,50%,83%,1.00);
  overflow: hidden;
}
.msf_box_phot{
  display: block;
  width: 100%;
  height: 25vw;
  background-color: #FFF1FD;
  background-repeat: no-repeat;
  background-position: center center;
}
.msgp_1{
  background-image: url("../img/icon1.png");
  background-size: 50%;
}
.msgp_2{
  background-image: url("../img/icon2.png");
  background-size: 50%;
}
.msgp_3{
  background-image: url("../img/icon3.png");
  background-size: 60%;
}
.msgp_4{
  background-image: url("../img/icon4.png");
  background-size: 40%;
}
.msgp_5{
  background-image: url("../img/icon5.png");
  background-size: 60%;
}
.msgp_6{
  background-image: url("../img/icon6.png");
  background-size: 30%;
}
.msf_box h2{
  display: block;
  margin: 4vw auto 0;
  text-align: center;
  font-size: 3.5vw;
  color: #E7B000;
}
.service_p1{
  display: block;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
  width: 100%;
  margin: 0 auto -4vw;
}
.service_p1 span{
  font-size: 15vw;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-right: 3vw;
}
.s_red{
  color: hsla(359,100%,42%,1.00);
}
.s_green{
  color: #009255;
}
.s_blue{
  color: #0046AB;
}
.s_pink{
  color: #CC00B0;
}
.s_orange{
  color: #D78500;
}
.s_yellow{
  color: #C0CD00;
}
.service_p2{
  display: block;
  font-size: 3vw;
  padding: 0px 20px 10px 20px;
}



/* 初期状態（隠れてる） */
.pop {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 0.6s ease;
}

/* 表示されたとき */
.pop.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: bounce 0.6s ease;
}
/* ぴょこん */
@keyframes bounce {
  0%   { transform: translateY(30px) scale(0.9); }
  50%  { transform: translateY(-10px) scale(1.05); }
  70%  { transform: translateY(5px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}


/* 共通 */
.slidein{
  opacity: 0;
  transform: translateX(0px); /* 右から来る初期位置（右へズラす） */
  transition: transform .7s ease;
  will-change: transform, opacity;
}

/* 左から来たい場合は左へズラす */
.slidein.left{
  transform: translateX(-160px);
}

/* 右から来たい場合は右へズラす（共通と同じでもOK） */
.slidein.right{
  transform: translateX(160px);
}

/* 表示トリガー後 */
.slidein.is-inview{
  opacity: 1;
  transform: translateX(0);
}








.main_feature_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 15vw 0 15vw;
  background-color: #E5B200;
  background-image: url("../img/white_bg.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
.main_feature{
  display: block;
  width: 95%;
  height: auto;
  margin: auto;
}
.main_feature h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 12vw;
  color: #FFFFFF;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.main_feature_block{
  display: block;
  width: 100%;
  height: auto;
  margin: 5vw auto 0;
}
.mfb_box{
  display: block;
  position: relative;
  width: 90%;
  height: auto;
  padding: 5%;
  background: rgba(255, 255, 255, 0.8); /* 黒の50%透明 */
  margin: 5vw 0;
}
.mfb_left{
  display: block;
  width: 16vw;
  font-size: 15vw;
  text-align: center;
  background: linear-gradient(140deg, hsla(46,100%,32%,1.00), #00A789);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 一応標準対応 */
  background-clip: text;
  color: transparent;
  line-height: 13vw;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.mfb_left span{
  display: block;
  font-size: 5vw;
  margin: 0;
}
.mfb_right{
  display: block;
  position: relative;
  width: 100%;
  margin-left: 0px;
}
.mfb_right h2{
  display: block;
  margin: 3vw 0 0 0;
  border-bottom: solid 1px hsla(100,56%,36%,1.00);
  font-size: 5vw;
}
.mfb_right p{
  display: block;
  margin: 10px 0 0 0;
  font-size: 3.5vw;
}







.main_flow_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 10vw 0 15vw;
  background-color: hsla(206,58%,5%,1.00);
  z-index: 1;
}
.main_flow{
  display: block;
  width: 95%;
  height: auto;
  margin: auto;
}
.main_flow h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 12vw;
  color: #FFFFFF;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.reveal{
  position: relative;
  display: inline-block;
  overflow: hidden;           /* 白い帯をクリップする */
  line-height: 1.2;
}

.reveal.small{
  margin-top: 5vw;
  display: inline-block;
  margin-left: 35vw;
}
.reveal__text{
  display: inline-block;
  opacity: 0;
  transform: translateY(0px);
  transition: opacity .1s ease, transform .1s ease;
  transition-delay: .55s;     /* 白い帯より後に出す */
  position: relative;
  z-index: 2;                 /* 帯の下/上は好みで調整 */
}

/* 白い帯（疑似要素） */
.reveal::before{
  content: "";
  position: absolute;
  inset: 0;                   /* 文字エリア全体 */
  background: #fff;           /* 白い帯 */
  transform: translateX(-110%);
  z-index: 3;                 /* 文字の上を通過させたいので上に */
}

/* 発火（JSで .is-in を付与） */
.reveal.is-in::before{
  animation: wipe 1.0s cubic-bezier(.7,0,.2,1) forwards;
}

.reveal.is-in .reveal__text{
  opacity: 1;
  transform: translateY(0);
}

/* 帯が「入って→抜ける」動き */
@keyframes wipe{
  0%   { transform: translateX(-110%); }
  45%  { transform: translateX(0%); }     /* 覆う */
  100% { transform: translateX(110%); }   /* 右へ抜ける */
}




.main_flow_flex{
  display: block;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 5vw auto 0;
}
.flow_box{
  display: block;
  width: 90%;
  height: auto;
  background-color: #FFFFFF;
  margin: 5vw auto 0;
  padding-bottom: 5vw;
}
.flow_p1{
  display: block;
  text-align: center;
  font-size: 8vw;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: auto;
  color: hsla(204,100%,28%,1.00);
}
.flow_p1 span{
  font-size: 15vw;
  margin-left: 2vw;
}
.flow_p2{
  display: block;
  width: 90%;
  text-align: center;
  background-color: hsla(205,100%,29%,1.00);
  color: #FFFFFF;
  margin: auto;
  font-size: 4vw;
  padding: 1vw;
  font-weight: bold;
}
.flow_p3{
  display: block;
  padding: 0 3vw 2vw 3vw;
  font-size: 3.5vw;
}
.flow_img1{
  display: block;
  width: auto;
  height: 40vw;
  margin: auto;
}
.sankaku{
  display: none;
  width: auto;
  height: 30px;
  margin: 165px 0 0 0;
}

#geo-bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 200vw;
  height: 350vw;
  z-index: -1;
  pointer-events: none; /* 背景としてクリック邪魔しない */
}








.main_voice_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 15vw 0 15vw;
  background-color: #D64253;
  overflow: hidden;
}

.main_voice{
  display: block;
  position: relative;
  width: 95%;
  height: auto;
  margin: auto;
}
.main_voice h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 12vw;
  color: #FFFFFF;
  font-family: "Limelight", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.main_voice_flex{
  display: block;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 5vw auto 0;
}
.voice_box{
  display: block;
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
  margin: 2vw 0;
}
.voice_phot{
  display: block;
  width: 100%;
  height: 50vw;
  background-color: #FBF2F4;
  background-repeat: no-repeat;
  background-size: 160px auto;
  background-position: center center;
}
.vp_1{
  background-image: url("../img/hito2.png");
}
.vp_2{
  background-image: url("../img/hito1.png");
}
.vp_3{
  background-image: url("../img/hito3.png");
}
.voice_box h2{
  display: block;
  margin: auto;
  font-size: 5vw;
  text-align: center;
  width: 100%;
  height: 10vw;
  background-color: hsla(169,100%,37%,1.00);
  line-height: 10vw;
  color: #FFFFFF;
}
.voice_box p{
  display: block;
  padding: 0 5vw 5vw;
  font-size: 3.5vw;
}

.sen_left{
  display: block;
  position: absolute;
  top: 70vw;
  left: -300px;
  width: 500px;
}
.sen_right{
  display: block;
  position: absolute;
  top: -34vw;
  right: -300px;
  width: 600px;
}






.main_qa_st{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 15vw 0 15vw;
  background-color: #F2F2F2;
  overflow: hidden;
}

/* 背景レイヤー */
.q-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;

  perspective: 900px;          /* 3Dに見せる奥行き */
  perspective-origin: 50% 50%;
}
/* ? の基本スタイル */
.q{
  position: absolute;
  font-weight: 800;
  opacity: 0.18;
  user-select: none;

  transform-style: preserve-3d; /* 子要素を3Dに（単体でもOK） */
  backface-visibility: hidden;  /* 裏面を見せない → “裏表感”が綺麗 */

  animation:
    q-flip 3.8s ease-in-out infinite,
    q-float 6s ease-in-out infinite;
}

/* 裏表フリップ（Y軸でひっくり返る） */
@keyframes q-flip{
  0%   { transform: rotateY(0deg) rotateX(6deg); }
  50%  { transform: rotateY(180deg) rotateX(-6deg); }
  100% { transform: rotateY(360deg) rotateX(6deg); }
}

/* ふわふわはそのまま */
@keyframes q-float{
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -18px; }
}
/* 位置・サイズ・速度を個別に（ここが“それっぽさ”の肝） */
.q:nth-child(1) { left: 6%;  top: 12%; font-size: 44px; animation-duration: 3.2s, 5.8s; }
.q:nth-child(2) { left: 18%; top: 70%; font-size: 70px; animation-duration: 5.0s, 7.4s; opacity: .12; }
.q:nth-child(3) { left: 30%; top: 22%; font-size: 90px; animation-duration: 4.2s, 6.2s; }
.q:nth-child(4) { left: 42%; top: 60%; font-size: 56px; animation-duration: 3.6s, 5.6s; }
.q:nth-child(5) { left: 55%; top: 10%; font-size: 64px; animation-duration: 6.0s, 8.0s; opacity: .10; }
.q:nth-child(6) { left: 62%; top: 78%; font-size: 48px; animation-duration: 3.8s, 6.8s; }
.q:nth-child(7) { left: 74%; top: 34%; font-size: 84px; animation-duration: 4.8s, 7.0s; }
.q:nth-child(8) { left: 88%; top: 16%; font-size: 52px; animation-duration: 3.0s, 5.4s; }

.q:nth-child(9)  { left: 10%; top: 40%; font-size: 60px; animation-duration: 4.4s, 6.6s; }
.q:nth-child(10) { left: 24%; top: 8%;  font-size: 50px; animation-duration: 3.4s, 5.2s; opacity: .14; }
.q:nth-child(11) { left: 36%; top: 86%; font-size: 78px; animation-duration: 5.6s, 8.2s; }
.q:nth-child(12) { left: 48%; top: 32%; font-size: 46px; animation-duration: 3.1s, 5.9s; opacity: .16; }
.q:nth-child(13) { left: 58%; top: 52%; font-size: 92px; animation-duration: 6.4s, 9.0s; opacity: .08; }
.q:nth-child(14) { left: 70%; top: 6%;  font-size: 62px; animation-duration: 4.0s, 6.0s; }
.q:nth-child(15) { left: 82%; top: 66%; font-size: 54px; animation-duration: 3.7s, 6.3s; }
.q:nth-child(16) { left: 92%; top: 88%; font-size: 72px; animation-duration: 5.2s, 7.8s; opacity: .11; }

/* 追加4つ */
.q:nth-child(17) { left: 4%;  top: 86%; font-size: 58px; animation-duration: 3.9s, 6.7s; }
.q:nth-child(18) { left: 15%; top: 28%; font-size: 96px; animation-duration: 6.8s, 9.4s; opacity: .07; }
.q:nth-child(19) { left: 66%; top: 26%; font-size: 44px; animation-duration: 3.3s, 5.5s; opacity: .18; }
.q:nth-child(20) { left: 78%; top: 84%; font-size: 88px; animation-duration: 5.9s, 8.6s; opacity: .09; }

/* “動くの苦手”設定の人には止める（アクセシビリティ） */
@media (prefers-reduced-motion: reduce){
  .q{ animation: none; }
}







.main_qa{
  display: block;
  width: 95%;
  height: auto;
  margin: auto;
}
.main_qa h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 12vw;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.main_qa h1 .q1{
  color: hsla(169,100%,37%,1.00);
  font-size: 1.2em;
}
.main_qa h1 .q2{
  color: #C61155;
  font-size: 1.2em;
}
.main_qa_block{
  display: block;
  width: 100%;
  height: auto;
  margin: 5vw auto 0;
}
.qa_box{
  display: block;
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
  margin: 3vw 0;
}
.qa_up{
  display: flex;
  width: 95%;
  border-bottom: solid 1px hsla(0,0%,69%,1.00);
  margin: auto;
  padding: 4vw 0 3vw 0;
}
.qa_up span{
  display: block;
  width: 15vw;
  height: 15vw;
  background-color: hsla(167,100%,38%,1.00);
  text-align: center;
  line-height: 15vw;
  color: #FFFFFF;
  font-size: 8vw;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.qa_up p{
  display: block;
  width: 70vw;
  padding: 2vw 4vw 0;
  font-size: 3.5vw;
  line-height: 6vw;
  margin: 0;
  font-weight: bold;
}
.qa_down{
  display: flex;
  width: 95%;
  margin: 4vw auto 0;
}
.qa_down span{
  display: block;
  width: 15vw;
  height: 15vw;
  background-color: #DB0054;
  text-align: center;
  line-height: 15vw;
  color: #FFFFFF;
  font-size: 8vw;
  font-family: "Vidaloka", serif;
  font-weight: 400;
  font-style: normal;
}
.qa_down p{
  display: block;
  width: 70vw;
  padding: 2vw 4vw 3vw;
  font-size: 3.5vw;
  line-height: 6vw;
  margin: 0;
  font-weight: 500;
}









.contact_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 5vw 0;
}
.contact{
  display: block;
  width: 97%;
  height: auto;
  margin: auto;
  background-color: #0083C1;
  border-radius: 10px;
  padding: 10vw 0 15vw 0;
}

.contact h1{
  display: block;
  margin: auto;
  text-align: center;
  font-size: 12vw;
  color: #00669A;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: 400;
  font-style: normal;
}
.contact_block{
  display: block;
  justify-content: center;
  width: 90%;
  height: auto;
  margin: auto;
  border-top: solid 1px #FFFFFF;
  border-bottom: solid 1px #FFFFFF;
  padding: 5vw 0;
}
.contact_tel{
  display: block;
  margin: 0;
}
.contact_tel_flex{
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  width: 90vw;
  font-size: 8vw;
  line-height: 0;
  margin: auto;
  pointer-events: none;
}
.contact_tel_flex img{
  display: block;
  width: auto;
  height: 8vw;
  margin: 4vw 2vw 0 0;
}
.tel_under{
  font-size: 3.5vw;
  text-align: center;
  margin: -2vw 0 0 0;
  color: hsla(201,100%,31%,1.00);
  font-weight: bold;
}
.contact_mail_flex{
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  width: 90vw;
  font-size: 8vw;
  line-height: 0;
  margin: 0;
}
.contact_mail_flex img{
  display: block;
  width: auto;
  height: 6vw;
  margin: 5vw 2vw 0 0;
}
.mail_under{
  font-size: 3.5vw;
  text-align: center;
  margin: -2vw 0 0 0;
  color: hsla(201,100%,31%,1.00);
  font-weight: bold;
}









footer{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 5vw 0 15vw 0;
  overflow: hidden;
}
.footer_nk{
  display: block;
  justify-content: space-between;
  min-width: 0;
  max-width: 95%;
  margin: 0px auto 0;
}
.footer_left{
  display: block;
  width: 100%;
  height: auto;
  padding-left: 0px;
}
.footer_left a{
  display: block;
  width: 200px;
  opacity: 1;
  transition: 0.3s;
}
.footer_left a:hover{
  opacity: 0.6;
}
.footer_left p{
  display: block;
  font-size: 3vw;
  margin: 2vw 0 0 0;
}
.footer_left span{
  display: block;
  font-size: 5vw;
  margin: 2vw 0 0 0;
  font-weight: bold;
  pointer-events: none;
}

.footer_right{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-right: 0px;
  width: 70%;
  margin-top: 5vw;
}
.footer_right a{
  display: block;
  width: 35%;
  margin: 0;
  text-decoration: none;
  color: hsla(240,1%,35%,1.00);
  font-size: 3vw;
}
.footer_right a:hover{
  text-decoration: underline;
}

.footer_under{
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 1vw 0;
  background-color: hsla(169,100%,37%,1.00);
  text-align: center;
  color: #FFFFFF;
  font-size: 2vw;
}












.main_view_sub{
  display: block;
  width: 100%;
  height: auto;
}

.sub_flex{
  display: block;
  justify-content: space-between;
  width: 95%;
  margin: 15vw auto 0;
}
.sub_left{
  display: block;
  width: 95%;
}
.sub_left h1{
  font-size: 11vw;
  margin: 0;
  line-height: 16vw;
  color: #0C2A42;
}
.sub_left h1 span{
  color: #DD64B0;
}
.sub_left p{
  font-size: 6vw;
  margin: 0;
  font-weight: 500;
  color: #0C2A42;
}

.sub_right{
  display: block;
  width: 80%;
  
}

.float {
  display: inline-block;
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}






.company_st{
  display: block;
  width: 100%;
  height: auto;
  padding: 5vw 0 5vw;
}
.company{
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
}

.company_table{
  display: block;
  width: 95%;
  margin: 5vw auto 0;
  color: #0C2A42;
}
.company_table tr{
  display: block;
  padding: 5vw 0;
  border-top: solid 1px hsla(0,0%,71%,1.00);
}
.company_table tr:nth-child(6){
  border-bottom: solid 1px hsla(0,0%,71%,1.00);
}
.company_table tr th{
  display: block;
  width: auto;
  padding-left: 0px;
  font-weight: 500;
  font-size: 4vw;
}
.company_table tr td{
  display: block;
  width: auto;
  font-weight: 500;
  pointer-events: none;
  font-size: 5vw;
}





/* 背景 */
.bg-animation{
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

/* 丸 */
.blob{
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #00BE9C;
  filter: blur(5px);
  opacity: 0.6;

  animation: 
    move 25s ease-in-out infinite alternate,
    morph 15s ease-in-out infinite alternate;
  opacity: 0.5;
}

/* ゆっくり移動 */
@keyframes move{
  0%   { transform: translate(-50%, -50%) translate(0px, 0px); }
  50%  { transform: translate(-50%, -50%) translate(120px, -80px); }
  100% { transform: translate(-50%, -50%) translate(-100px, 100px); }
}

/* うねうね変形 */
@keyframes morph{
  0%   { border-radius: 50%; }
  25%  { border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%; }
  50%  { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
  75%  { border-radius: 70% 30% 60% 40% / 30% 70% 40% 60%; }
  100% { border-radius: 50%; }
}

  
  
  
  
  
  
  
  
}