@charset "utf-8";


/* clearfix
------------------------------------------------*/
.clearfix { zoom: 1; }
.clearfix:before,
.clearfix:after {
	display: table;
	content:"";
	line-height: 0;
}
.clearfix:after { clear: both; }

/* 全体
------------------------------------------------*/

ul, ol, dl { 
	list-style: none;
}

a{
	text-decoration: none;
  color: #333;
}


/* リセット系 */
body {
  font-family: 'UDShinGoPro', sans-serif;
  background: #f8f9fa;
  color: #333;
  overflow-y: scroll;
  height: auto;
  margin: 0;
  width: 100%;
  line-height: 1.7em;
  letter-spacing: 1px;
  text-align: justify;
  text-justify: inter-ideograph;
}

@font-face {
  font-family: '';
  src: url('../font/UDShinGoPro-DeBold-AlphaNum.woff2') format('woff2'),
      url('../font/UDShinGoPro-DeBold-AlphaNum.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '';
  src: url('../font/UDShinGoPro-Heavy-AlphaNum.woff2') format('woff2'),
      url('../font/UDShinGoPro-Heavy-AlphaNum.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '';
  src: url('../font/UDShinGoPro-Bold-AlphaNum.woff2') format('woff2'),
      url('../font/UDShinGoPro-Bold-AlphaNum.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '';
  src: url('../font/UDShinGoPro-Light-AlphaNum.woff2') format('woff2'),
      url('../font/UDShinGoPro-Light-AlphaNum.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '';
  src: url('../font/UDShinGoPro-Regular-AlphaNum.woff2') format('woff2'),
      url('../font/UDShinGoPro-Regular-AlphaNum.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '';
  src: url('../font/UDShinGoPro-Medium-AlphaNum.woff2') format('woff2'),
      url('../font/UDShinGoPro-Medium-AlphaNum.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


.wrapper {
	width: 100%;
	margin: 0 auto;
  overflow: hidden;
}

.contact_wrapper>header {
  margin-bottom: 10%;
}


@media screen and (min-width:900px) {
  .wrapper_inner{
		width: 900px;
    margin: 0 auto;
  }

}
@media screen and (max-width:768px) {
  section{
    margin: 0;  
  }
}

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background:#00a7ea;
	text-align:center;
	color:#fcfcfc;
}

header{
  margin: 0 auto;
  width: 100%;
  position: fixed;
  z-index: 10;
}

.header_title{
  font-weight: bold;
  font-size: 200%;
}
.header_title a{
    color: #2099ff;
    
}

.header_title:hover{
  opacity: 0.7;
  transition: all 0.5s;
}

.header_inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
font-weight: 400;
height: 80px;
margin: 0 5%;
}


nav.pc,
nav.sp {
  display: none;
}

.nav_pc{
  font-size: 70%;
  display: flex;
  mix-blend-mode:multiply;
}
.nav_sp{
  display: flex;
}
.nav_sp li{
  margin-left: 10px;
  font-size: 120%;
}

/*nav PC*/
.nav_pc li{
  margin-left: 20px;
  font-size: 120%;
}



.nav_sp {
  opacity: 0;
  visibility: hidden;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  list-style: none;
  padding-top: 10%;
  z-index: 1000;
}

.nav_sp.active {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s ease;
  background-color: #f8f9fa;
  margin: 0 auto;
  width: 100%;
  height: 200vw;
  z-index: 1000;
  flex-direction: column;
  justify-content: flex-start;
}

.nav_sp.active span {
  color: #0481A2;
  font-size:70%;
  display: inline-block;
  margin-left: 1%;
}

.nav_sp.active li {
  margin-bottom: 10%;
}
.nav_sp li a{
  /*線の基点とするためrelativeを指定*/
position: relative;
}


.nav_sp li.current a,
.nav_sp li a:hover{
color:#0481A2;
}

.nav_sp li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 5%;
  /*線の形状*/
  width: 90%;
  height: 2px;
  background:#00b3ff;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.nav_sp li.current a::after,
.nav_sp li a:hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}

.nav_pc_btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  padding: 10px 30px;
  text-align: center;
  outline: none;
  border: none; /* ボーダーなし */
  border-radius: 50px; /* ←ここで角丸に */
  transition: background 0.3s ease;
  color: #005091;
}

/* テキストの基本スタイル */
.nav_pc_btn span {
  position: relative;
  z-index: 3;
  color: #fff; /* 白文字 */
  font-weight: bold;
}

/* ホバー時の文字色はそのままでOK */
.nav_pc_btn:hover span {
  color: #fff;
}
.nav_pc_btn:hover {
  color: #fff;
}
/* 背景が斜めに流れる（初期位置） */
.bgskew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 120%;
  height: 100%;
  background: rgba(32, 153, 255, 0.9); /* 少し透ける黒で強調 */
  transform: skewX(-25deg);
  z-index: -1;
  color: #fff;
}

/* アニメーション（流れる） */
.bgskew:hover::before {
  animation: skewanime 0.5s forwards;

}

@keyframes skewanime {
  100% {
    left: -10%;
  }
}
/*==================================================
　5-2-1 3本線が×に
===================================*/
/* ハンバーガーボタン */
.openbtn {
      position: relative;
      background:#2099ff;
      cursor: pointer;
      width: 50px;
      height:50px;
      border-radius: 5px;
      z-index: 1001;
    }
    .openbtn span {
      display: inline-block;
      transition: all .4s;
      position: absolute;
      left: 14px;
      height: 3px;
      border-radius: 2px;
      background: #fff;
      width: 45%;
    }
    .openbtn span:nth-of-type(1) { top:15px; }
    .openbtn span:nth-of-type(2) { top:23px; }
    .openbtn span:nth-of-type(3) { top:31px; }

    .openbtn.active span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%;
    }
    .openbtn.active span:nth-of-type(2) {
      opacity: 0;
    }
    .openbtn.active span:nth-of-type(3) {
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%;
    }

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

/*==================================================
　MV wrapper
=====================================================*/
.mv_wrapper{
  position: relative;
  background-size: cover;
  background:url(../img/MV_bg_PC.png) no-repeat top/cover;
  height: auto;
  width: 100vw;
  overflow: hidden;
}
.mv_inner_PC{
  display: flex;
  position: relative;
  z-index: 1;
  height: 1000px;
  margin: 0 5%;
}

.mv_inner_left{
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: center;
  margin: 10% auto;
}

.mv_inner_left h2{
  width: 100%;
  text-align: center;
  font-size: 180%;
  line-height: 180%;
  font-weight: 400;
  color: #fcfcfc;
}
.mv_inner_left_waku01{
  color: #2099ff;
  background-color: #fcfcfc;
  padding: 1%;
  border-radius: 10px;
}
.mv_inner_left_waku02{
  color: #2099ff;
  background-color: #fcfcfc;
  padding: 1%;
  border-radius: 10px;
}
.mv_inner_left_other01{

}
.mv_inner_left_other02{
}

.mv_inner_left h1 img{
  width: 100%;
}
.mv_inner_left h1{
    animation-delay: 0.5s;
}

.mv_start_btn {
  width: 100%;
  text-align: center;
  animation-delay: 1s;
}

.mv_start_btn a {
  display: inline-block;
  font-size: 140%;
  background: linear-gradient(90deg, rgba(103, 23, 205, 1), rgba(0, 72, 255, 1));
  padding: 20px 60px; /* %ではなくpxに */
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  border: none;
  transition: background 0.5s ease, filter 0.3s ease;
}

.mv_start_btn a:hover {
  background: linear-gradient(270deg, rgba(103, 23, 205, 1), rgba(0, 72, 255, 1));
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}


.mv_service{
  margin-top: 10%;
  text-align: center;
  animation-delay: 1.5s;
}
.mv_service_title {
  display: inline-block;
  font-size: large;
  font-weight: bold;
  color: #fcfcfc;
  background-color: #1aafee;
  padding: 1% 5%;
  border-radius: 30px;
  margin-bottom: -40px;
}
.mv_service_ul{
  display: flex;
  align-items: center;
  background-color: #fcfcfc;
  padding-left: 0;
  border-radius: 10px;
  padding: 5%;
  margin-top: -3%;
}
.mv_service ul li{
  width: auto;
  padding: 3% 3% 0 3%;
}
.mv_service ul li img{
  width: 100%;
}

.mv_inner_right{
  position: relative;
  display: flex;
  width: 50%;
  animation-delay: 2s;
}

  /*-サウンドエフェクト-*/ 
  .visualizer-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
  }
  
  
  .sound-ring {
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: rotateRing 20s linear infinite;
    box-sizing: border-box;
  }
  
  .bar {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height: 15px;
    background: rgba(255, 255, 255, 0.5);
    transform-origin: center bottom;
    transform: rotate(0deg) translateY(-100%);
    /* translateY -100% でリングの外側へ */
  }
  
  /* 回転アニメーション */
  @keyframes rotateRing {
    0%   { transform: rotate(0deg)scale(1.8); }
    100% { transform: rotate(360deg)scale(1.8); }
  }

  
  .MV_phone01{
    position: absolute;
    top: 20%;
    left: 40%;
    width: 45%;
  }
  .MV_phone01 img{
   width: 100%;
  }
  .MV_phone02{
    position: absolute;
    top:40%;
    left: 10%;
    width: 50%;
    z-index: -1;
  }
  .MV_phone02 img{
    width: 100%;
  }
  .MV_kage{
    position: absolute;
    z-index: -2;
    top:65%;
    left: 14%;
    width: 80%;
  }

 .MV_float_01{
  position: absolute;
  right: 0;
  top: 10%;
 }

 .MV_float_02{
  position: absolute;
  left: 0;
  bottom:20%;
}

.MV_float_kira01{
  position: absolute;
  -webkit-animation: decokira 1.5s ease infinite;
  animation: decokira 2s steps(30) infinite;
  top: 13%;
  left: 25%;

}
.MV_float_kira02{
  position: absolute;
  -webkit-animation: decokira 1.5s ease infinite;
  animation: decokira 2.3s steps(40) infinite;
  top: 30%;
  left: 10%;

}
/*- MV SP -*/

  @media screen and (max-width: 768px) {
    .mv_wrapper{
      position: relative;
      background-size: cover;
      height: 100%;
      width: 100vw;
      background:url(../img/MV_bg_SP.png) no-repeat top/cover;
    }
    .mv_start_btn {
      animation-delay: 2.5s;
    }
    .mv_service{
      animation-delay: 3s;
    }
  }
  .mv_inner_SP{
    position: relative;
    height: auto;
    margin: 0 5%;
  }

.mv_inner_container{
  flex-direction: column;
  align-items: center;
  margin: 23% auto;
}
.mv_inner_container h1{
  margin-top: 70vw;
  animation-delay: 1.5s;
}

.mv_inner_container h2{
  position: absolute;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: 6vw;
  line-height: 155%;
  font-weight: 400;
  color: #fcfcfc;
}
.mv_inner_container h2 span{
  color: #2099ff;
  background-color: #fcfcfc;
  padding: 1%;
  border-radius: 10px;
}

.mv_inner_container h1 img{
  width: 100%;
}
.mv_start_btn {
  width: 100%;
  text-align: center;

}

.mv_start_btn a {
  display: inline-block;
  font-size: 200%;
  background: linear-gradient(90deg, rgba(103, 23, 205, 1), rgba(0, 72, 255, 1));
  padding: 20px 60px; /* %ではなくpxに */
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  border: none;
  transition: background 0.5s ease, filter 0.3s ease;
}

.mv_inner_SP .mv_start_btn a:hover {
  background: linear-gradient(270deg, rgba(103, 23, 205, 1), rgba(0, 72, 255, 1));
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}
.mv_inner_visual{
  height: 30vw;
  animation-delay: 1s;
}

.mv_inner_SP .mv_service_ul{
  justify-content: center;
  margin-top: 10%;
  text-align: center;
  justify-content: space-around;
  margin-left: 5%;
  margin-right: 8%;
}
.mv_inner_SP .mv_service_title {
  display: inline-block;
  font-size: large;
  font-weight: bold;
  color: #fcfcfc;
  background-color: #1aafee;
  padding: 1% 5%;
  border-radius: 30px;
  margin-bottom: -40px;

}
.mv_inner_SP .mv_service_ul{
  display: flex;
  align-items: center;
  background-color: #fcfcfc;
  padding-left: 0;
  border-radius: 10px;
  padding: 5%;
  margin-top: -3%;
}
.mv_inner_SP .mv_service ul li{
  width: auto;
  padding: 3% 3% 0 3%;
}
.mv_inner_SP .mv_service ul li img{
  width: 100%;
}


  /*-サウンドエフェクト-*/ 

  
  .mv_inner_SP .sound-ring {
    position: relative;
    z-index: -1;
    top: 60vw;
    animation: rotateRingSP 20s linear infinite;
  }


  @keyframes rotateRingSP {
    0%   { transform: rotate(0deg)scale(1.7); }
    100% { transform: rotate(360deg)scale(1.7); }
  }

  .mv_inner_SP .bar {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height:15px;
    z-index: -2;
    background: rgba(255, 255, 255,0.5);
    transform-origin: center bottom;
    transform: rotate(0deg) translateY(-100%);
    /* translateY -100% でリングの外側へ */
  }

.mv_inner_SP .MV_phone01{
  position: absolute;
  top: 20%;
  right: -10%;
  width: 40%;
  margin-left: 5%;
}
.mv_inner_SP .MV_phone01 img{
 width: 100%;
}
.mv_inner_SP .MV_phone02{
  position: absolute;
  top:26%;
  left: 14%;
  width: 45%;
  z-index: -1;
}
.mv_inner_SP .MV_phone02 img{
  width: 100%;
}
.mv_inner_SP .MV_kage{
  position: absolute;
  z-index: -2;
  left: 10%;
  top: 40%;
}

.mv_inner_SP .MV_float_01{
position: absolute;
z-index: -2;
right: 10%;
top: 15%;
width: 10%;
z-index: 3;

}

.mv_inner_SP .MV_float_02{
position: absolute;
left: 10%;
top: 40%;
width: 10%;
z-index: 3;
}

.mv_inner_SP .MV_float_kira01{
position: absolute;
-webkit-animation: decokira 1.5s ease infinite;
animation: decokira 2s steps(30) infinite;
top: 15%;
left: 8%;
width: 10%;
z-index: 3;
}
.mv_inner_SP .MV_float_kira02{
position: absolute;
-webkit-animation: decokira 1.5s ease infinite;
animation: decokira 2.3s steps(40) infinite;
top: 25%;
left: 5%;
width: 5%;
z-index: 3;

}

/*--*/


  .fuwa_1 {
    -webkit-animation: fuwafuwa 7s infinite;
            animation: fuwafuwa 7s infinite;
   }
   .fuwa_2 {
    -webkit-animation: fuwafuwa 10s infinite;
            animation: fuwafuwa 10s infinite;
   }
   .fuwa_3 {
    -webkit-animation: fuwafuwa2 3s infinite;
            animation: fuwafuwa2 3s infinite;
   }
   .fuwa_4 {
    -webkit-animation: fuwafuwa2 5s infinite;
            animation: fuwafuwa2 5s infinite;
   }
   @-webkit-keyframes fuwafuwa {
     0% {
     -webkit-transform: translateY(0px);
             transform: translateY(0px);
     }
     50% {
     -webkit-transform: translateY(-40px);
             transform: translateY(-40px);
     }
     100% {
     -webkit-transform: translateY(0px);
             transform: translateY(0px);
     }
   }
   @keyframes fuwafuwa {
     0% {
     -webkit-transform: translateY(0px);
             transform: translateY(0px);
     }
     50% {
     -webkit-transform: translateY(-30px);
             transform: translateY(-30px);
     }
     100% {
     -webkit-transform: translateY(0px);
             transform: translateY(0px);
     }
   }
   @-webkit-keyframes fuwafuwa2 {
    0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    }
    50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    }
    100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    }
  }
  @keyframes fuwafuwa2 {
    0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    }
    50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    }
    100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    }
  }
  
  
/*  MVキラキラ 装飾　MV用  */

@keyframes decokira {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  60% {
    opacity: 0.8;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  70% {
    opacity: 0;
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}


/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:1%;
right:50%;
  /*矢印の動き1秒かけて永遠にループ*/
animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
    0%{bottom:1%;}
    50%{bottom:3%;}
   100%{bottom:1%;}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
  /*描画位置*/
position: absolute;
left:-20px;
bottom:10px;
  /*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}

.scrolldown4:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
right:0;
  /*矢印の形状*/
width:1px;
height: 50px;
background:#eee;
}





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

/* ===== section 共通　===== */

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

.section_title{
  text-align: center;
  color: #008aff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.section_title h2{
  margin-top: 5%;
  font-size: 200%;
}
.section_title p{
  font-size: 120%;
  margin-top: -2%;
}

  @media screen and (max-width: 768px) {
    .section_title{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .section_title h2{
      margin-top: 5%;
      font-size: 300%;
      line-height: 100%;
    }
    .section_title p{
      font-size: 170%;
      margin-top: -2%;
    }

  }
  
  
/*------- 画像文字が流れる -------*/
.flow-font01, .flow-font02, .flow-font03, .flow-font04, .flow-font05,.flow-font06, .flow-font07, .flow-font08 {
  position: relative;
  padding: 100px 10vw;
  overflow: hidden;
  font-size: 14px; /* ← 通常時でも小さめに */
}

.flow-font01::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_about.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}

@keyframes flow-font01 {
  0%   { background-position: 0 0;}
  100% { background-position: -1000px 0;}
}

/* 各flowセクションに共通の流し文字 */
.flow-font02::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_value.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}
.flow-font03::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_providedbgm.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}
.flow-font04::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_faq.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}
.flow-font05::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_contact.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}
.flow-font06::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_company.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}
.flow-font07::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_privacy.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}
.flow-font08::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background-image: url(../img/flowtext_kiyaku.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 1000px auto;
  animation: flow-font01 20s linear infinite;
  z-index: -1;
}

/* ---------- SP用スタイル ---------- */
@media screen and (max-width: 768px) {
  .flow-font01, .flow-font02, .flow-font03, .flow-font04, .flow-font05 {
    padding: 30px 10vw;
    font-size: 12px; /* ← SPではさらに小さめに */
  }

  .flow-font01::before,
  .flow-font02::before,
  .flow-font03::before,
  .flow-font04::before,
  .flow-font05::before, 
  .flow-font06::before,
  .flow-font07::before,
  .flow-font08::before
  {
    height: 90px;
    background-size: 500px auto;
  }

  @keyframes flow-font01 {
    0%   { background-position: 0 0;}
    100% { background-position: -500px 0;}
  }
}
/* ======================================== */
/* ======================================== */

/* ===== about===== */

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

.about_text{
  text-align: center;
  margin: 0 auto;
  color: #2099ff;
  font-size: 200%;
  line-height: 160%;
  font-weight: 100;
}
.about_text span{
  font-weight: 1000;
}
 .about_contents{
   margin: 0 auto;
   width: 80%;
 }
 .about_contents img{
   width: 100%;
}


  @media screen and (max-width:768px) {
    .about_text{
      font-size: 4.5vw;
    }
    .about_text span{
      font-weight: 1000;
    }
     .about_contents{
       margin: 0 auto;
       width: 100%;
     }
     .about_contents img{
       width: 100%;
    }
  }




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

/* ===== value ===== */

/* ======================================== */
/* ======================================== */
.value{
  background-color: #eff8ff;
  margin: 0 auto;
  text-align: center;

}
.flow-font02{
  mix-blend-mode:multiply;
  opacity: 0.8;
}
.value h3{
  display: inline-block;
  background-color: #008aff;
  padding: 2.3% 4% 2% 3.5%;
  border-radius: 10px;
  font-size: 200%;
  color: #f8f9fa;
  margin-bottom: -10%;
}
.value h3 span{
  font-size: 85%;
}
.value_contents{
  background-color: #fcfcfc;
  border-radius: 25px;
  border: #b3dcff 3px solid;
  width: 65%;
  margin: 0 auto;
}
.value_contents_main{
  display: flex;
  align-items: center;
  text-align: left;
  text-align: justify;
  text-justify: inter-ideograph;
}
.value_contents_main p{
  font-size: 120%;
  font-weight: 400;
  line-height: 170%;
  color: #6c6c6c;
  width: 60%;
  padding-right: 10%;
}
.value_contents_main_img{
  width: 40%;
  padding-left: 1%;
  padding-top: 1%;
}
.value_contents_main img{
  width: 100%;
}
.value_accordion {
  margin: 0 2em 2em 2em;
  padding: 0.8em 0;
  font-size: 90%;
  background-color: #74bfff;
  border-radius: 20px;
}
.value_accordion_normaltext{
  font-weight: 200;
  color: #fcfcfc;
  background-color: transparent;
  cursor: normal;
  text-align: left;
  padding: 0.8em 1em 0 1em;
  font-size: 16px;
  margin: 0;
}
.value_accordion_normaltext02{
  color: #fcfcfc;
  background-color: transparent;
  cursor: normal;
  text-align: left;
  padding: 0.8em 1em 1em 1em;
  font-size: 16px;
  margin: 0;
}
.value_accordion .accordion_header {
  width: 100%;
  background: none;
  border: none;
  font-weight: bold;
  color: #fcfcfc;
  background-color: transparent;
  cursor: pointer;
  text-align: left;
  padding: 0.5em 1em;
  font-size: 16px;
}

.value_accordion .accordion_header .icon {
  border: #fff 1px solid;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 22px;
  text-align: center;
  font-weight: 100;
}

.value_accordion .accordion_content {
  background-color: #f8f9fa;
  padding: 0 1em;
  border-radius: 10px;
  margin-top: 0.5em;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.3s ease;
  color: #008aff;
}

.value_accordion button:hover {
  background-color: rgba(0, 122, 204,0.2);
  transition: all 0.3s ease-in-out;
  border-radius: 0%;
}

/* 開いた状態 */
.value_accordion.open .accordion_content {
  padding: 1em;
  margin: 1em;
  max-height: 1000px;
}

/* ここから実装 */
/* PCの時は横並び */
.value_section_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px;
}


.value_section_container > div {
  flex: 1;
  max-width: 38%;
}

/* スマホサイズ（900x以下）では縦並びに変更 */
/* スマホサイズでは全幅＆縦並びに変更 */
@media screen and (max-width: 1200px) {
  .value_section_container {
    flex-direction: column;
  }

  .value_section_container > div {
    max-width: 100%;
    width: 100%;
  }
}

/* ここまで */
@media screen and (max-width: 900px) {
  .value{
    background-color: #eff8ff;
    margin: 0 auto;
    text-align: center;
  }
  .flow-font02{
    mix-blend-mode:multiply;
    opacity: 0.8;
  }
  .value h3{
    display: inline-block;
    background-color: #008aff;
    width: 60%;
    line-height: 120%;
    padding: 3% 4%;
    border-radius: 10px;
    font-size: 5vw;
    color: #f8f9fa;
    margin-bottom: -10%;

  }
  .value h3 span{
    font-size: 80%;
  }
  .value_contents{
    background-color: #fcfcfc;
    border-radius: 25px;
    border: #b3dcff 3px solid;
    width:95%;
    margin: 0 auto;
  }


  .value_contents_main{
    flex-direction: column;
    width: 85%;
    margin: 0 auto;
    padding-top: 0;
  }
  .value_contents_main p{
    font-size: 110%;
    line-height: 160%;
    font-weight: 400;
    color: #6c6c6c;
    width: 100%;
    padding: 0;
    margin-top: -5%;
  }

  .value_contents_main_img{
    width: 70%;
    padding:0;
  }

  .value_contents_main img{
    width: 100%;
  }

  .value_accordion {
    margin: 0 0.5em 0.5em 0.5em;
    padding: 0.8em 0;
    font-size: 85%;
    background-color: #74bfff;
    border-radius: 20px;
  }
  .value_accordion_normaltext{
    font-weight: 100;
    color: #fcfcfc;
    background-color: transparent;
    cursor: normal;
    text-align: left;
    padding: 0.8em 1em 0 1em;
    font-size: 16px;
    margin: 0;
  }
  .value_accordion_normaltext02{
    color: #fcfcfc;
    background-color: transparent;
    cursor: normal;
    text-align: left;
    padding: 0.8em 1em 1em 1em;
    font-size: 16px;
    margin: 0;
  }
  .value_accordion .accordion_header {
    width: 100%;
    background: none;
    border: none;
    font-weight: bold;
    color: #fcfcfc;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    padding: 0.5em 1em;
    font-size: 16px;
  }
  
  .value_accordion .accordion_header .icon {
    border: #fff 1px solid;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-weight: 100;
  }
  
  .value_accordion .accordion_content {
    background-color: #f8f9fa;
    padding: 0 1em;
    border-radius: 10px;
    margin-top: 0.5em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
    color: #008aff;
  }
  .value_accordion button:hover {
    background-color: rgba(0, 122, 204,0.2);
    transition: all 0.3s ease-in-out;
    border-radius: 0%;
    
  }
  /* 開いた状態 */
  .value_accordion.open .accordion_content {
    padding: 1em;
    margin: 1em;
    max-height: 1000px;
  }
}



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

/* ===== PROVIDED BGM ===== */

/* ======================================== */
/* ======================================== */
.providedbgm{
  background-color: #008aff;
  padding-bottom: 10%;
  margin-top: 10%;

}
.providedbgm .section_title{
  color: #f8f9fa;
}
.flow-font03{
  mix-blend-mode:lighten;
}

.fa{
  margin-right: 10px;
  color: #00a29f;
  font-size: 30px;
}
@media screen and (max-width:768px) {
  
  
  .fa{
    margin-right: 10px;
    color: #00a29f;
  }
}

.providedbgm_playlist_wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}


.providedbgm_playlist,.providedbgm_playlist_scroll{
  padding: 4%;
  width: 40%;
  color: #008aff;
  background: linear-gradient(0deg,rgba(179, 220, 255, 1) 0%, rgba(239, 248, 255, 1) 100%);
  border-radius: 20px;
  margin-bottom: 5%;
  margin-left: 1%;
  margin-right: 1%;
}
.providedbgm_playlist p,.providedbgm_playlist_scroll p{
  display: flex;
  justify-content: center;
  align-items: baseline;
  text-align: center;
  padding: 0 0 5% 0;
  margin: 0;
  font-weight: 600;
}
.providedbgm_playlist ul{
  max-height: 500px;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.providedbgm_playlist_scroll ul{
  overflow-y: scroll;
  max-height: 500px;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.providedbgm_playlist li{
  width: 100%;
}

.providedbgm_sub{
  background-color: #2099ff;
  color: #f8f9fa;
  padding: 3%;
  width: 80%;
  margin: 0 auto;
  border-radius: 20px;
  font-size: 90%;
}
.fa-solid, .fas{
  margin-right: 2px;
}
@media screen and (max-width: 768px) {
  
  .providedbgm_playlist_wrapper{
    display: flex;
    flex-wrap: wrap;
    width: 96%;
    margin: 0 auto;
  }
  
  .providedbgm_playlist,.providedbgm_playlist_scroll{
    width: 100%;
    color: #008aff;
    background: linear-gradient(0deg,rgba(179, 220, 255, 1) 0%, rgba(239, 248, 255, 1) 100%);
    border-radius: 20px;
    margin-bottom: 5%;
    max-height: 300px;/*-高さ調整済み　1.5 -*/
  }
  .providedbgm_playlist p,.providedbgm_playlist_scroll p{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 0 5% 0;
    margin: 0;
  }
  .providedbgm_playlist ul{
    max-height: 200px;/*-高さ調整済み　1.5 -*/
    padding: 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }
  .providedbgm_playlist_scroll ul{
    overflow-y: scroll;
    max-height: 200px;/*-高さ調整済み　1.5 -*/
    padding: 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }
  .providedbgm_playlist li{
    width: 100%;
  }

.providedbgm_sub{
  background-color: #2099ff;
  color: #f8f9fa;
  padding: 3%;
  line-height: normal;
  width: 85%;
  margin: 0 auto;
  border-radius: 20px;
  font-size: 90%;
}

}

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

/* ===== FAQ ===== */

/* ======================================== */
/* ======================================== */
.faq{
  padding-bottom: 10%;
}
.faq_accordion {
  max-width: 70%;
  margin: 0 auto;
  font-family: sans-serif;
}

.faq_accordion_box {
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.faq_accordion_header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #008aff;
  background-color: #fff;
  transition: background 0.3s;
}
.faq_accordion_header h3{
  font-weight: 100;
  font-size: 130%;
  line-height: 140%;
}
.faq_accordion_header:hover {
  background: #f2faff;
}

.faq_accordion_icon {
  font-size: 20px;
  border: 1px solid #008aff;
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  font-weight: 100;
  margin-left: 3%;
}

.faq_accordion_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  position: relative;
}

.faq_accordion_box.open .faq_accordion_content {
  max-height: 500px;
  padding: 16px 20px;
}

/* 吹き出し本体（pタグ） */
.faq_accordion_content p {
  position: relative;
  background-color: #ddf1ff;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  padding: 16px;
  border-radius: 6px;
  margin: 0 auto;
}

/* 中央上に三角形 */
.faq_accordion_content p::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #ddf1ff transparent;
}

@media screen and (max-width: 768px) {
  .faq{
    padding-bottom: 10%;
  }
  .faq_accordion {
    max-width: 90%;
    margin: 0 auto;
    font-family: sans-serif;
    text-align: left;
  }
  
  .faq_accordion_box {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .faq_accordion_header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #008aff;
    background-color: #fff;
    transition: background 0.3s;
  }
  .faq_accordion_header h3{
    font-weight: 100;
    font-size: 120%;
    line-height: 140%;
  }
  .faq_accordion_header:hover {
    background: #f2faff;
  }
  
  .faq_accordion_icon {
    font-size: 20px;
    border: 1px solid #008aff;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-weight: 100;
    margin-left: 3%;
  }
  
  .faq_accordion_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    position: relative;
  }
  
  .faq_accordion_box.open .faq_accordion_content {
    max-height: 500px;
    padding: 16px 20px;
  }
  
  /* 吹き出し本体（pタグ） */
  .faq_accordion_content p {
    position: relative;
    background-color: #ddf1ff;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    padding: 16px;
    border-radius: 6px;
    margin: 0 auto;
  }
  
  /* 中央上に三角形 */
  .faq_accordion_content p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ddf1ff transparent;
  }
  
}
/* ======================================== */
/* ======================================== */

/* ===== contact ===== */

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


.contact{
  background-color: rgba(113, 191, 255,0.2);
  padding-bottom: 10%;

}
.contact_text{
  color: rgb(87, 87, 87);
  font-size: 130%;
  text-align: center;
  margin: 0 auto;
}
.contact_inner {
  margin: 0 auto;
  width: 70%;
  padding:0 0 3% 0;
  margin-bottom: 10%;
  text-align: left;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.contact_midashi{
  padding: 2% 0;
  border-radius: 10px;
  text-align: center;
  background-color: #008aff;
  color: #fff;
  font-weight: 500;
}

.section04_contact{
  display: flex;
  margin-bottom: 5%;
}
.confirm_wrapper{
  display: flex;
  margin-bottom: 5%;
  margin-top: 10%;
}
.send_wrapper{
  display: flex;
  margin-bottom: 5%;
  margin-top: 15%;
}

  .contact_form label {
    display: block;
    margin-bottom: 1.5em;
  }

  .contact_form label span {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  .contact_form input[type="text"],
  .contact_form input[type="email"],
  .contact_form textarea {
    width: 100%;
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    resize: vertical;
  }

  .contact_button {
    display: inline-block;
    padding: 0.8em 2em;
    font-size: 1em;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 2%;
  }

  .contact_button:hover {
    opacity: 0.6;
  }





/*== 問い合わせボタン　sp */
.btn04 {
  padding: 15px 40px 15px 40px;
  text-align: center;
  font-weight: 100;
  font-size: 18px!important;
}


/*== アコーディオン　問い合わせ*/
.contact_accordion {
  background-color: #f9f9f9;
  border-radius: 12px;
  margin: auto;
  font-family: "Noto Sans JP", sans-serif;
}

.contact_accordion_box {
  margin: 10px;
}

.contact_accordion_header{
  color: #008aff;
  font-size: 130%;
  line-height: 160%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.contact_accordion_header:hover{
  background-color: #ffffff;
  transition: all 0.4s ease;
}
.contact_title01{
}
.contact_title02{
  border-top: rgb(229, 229, 229) 2px solid;
}
.contact_accordion_header h2{
  font-weight:300;
}

.contact_accordion_icon {
  border: #008aff 1px solid;
  color: #008aff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  font-weight:300;
}

.contact_accordion_content {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  padding: 60px;
  background-color: #f4f4f4;
  border-radius: 20px;
}

.contact_accordion_box.open .contact_accordion_content {
  max-height: 1000px; /* 十分な高さを仮設定 */
  padding: 20px;
  display: block;

}

.contact_accordion_content form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
  margin: 0 auto;
}

.contact_accordion_content label {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact_accordion_content input,
.contact_accordion_content textarea {
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  transition: border 0.3s;
}

.contact_accordion_content input:focus,
.contact_accordion_content textarea:focus {
  outline: none;
}

.contact_accordion_content textarea {
  resize: vertical;
  min-height: 100px;
}

.contact_accordion_content button {
  background-color: #1e90ff;
  color: white;
  font-size: 16px;
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 12px auto 0;
  display: block;
  font-weight: 600;
  transition: background-color 0.3s;
}

.contact_accordion_content button:hover {
  background-color: #187bcd;
  
}

.contact_accordion_note {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  margin-top: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  white-space: pre-line;
}

.form_note{
  color: #008aff;
  margin-top: -0.2%;
  margin-bottom: 5%;
  font-weight: 400;
  line-height: 150%;
  font-size: 80%;
}
.contact_linebtn{
  text-align: center;
  width: 90%;
  margin: 5% 5% 0 5%;
  transition: all 1s ease;
}
.contact_linebtn:hover{
  opacity: 0.9;
  transition: all 1s ease;
  filter: drop-shadow(0 0 5px #333333b3);
}
.contact_linebtn a img{
  width: 100%;
}
@media screen and (max-width: 768px) {

.contact{
  background-color: rgba(113, 191, 255,0.2);
  padding-bottom: 10%;

}
.contact_text{
  color: rgb(87, 87, 87);
  font-size: 3.8vw;
  line-height: 120%;
  text-align: center;
  width: 90%;
}
.contact_inner {
  margin: 0 auto;
  width: 95%;
  padding:0 0 3% 0;
  margin-bottom: 10%;
  text-align: left;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.contact_midashi{
  padding: 2% 0;
  border-radius: 10px;
  text-align: center;
  background-color: #008aff;
  color: #fff;
  font-weight: 500;
}

.section04_contact{
  display: flex;
  margin-bottom: 5%;
}
.confirm_wrapper{
  display: flex;
  margin-bottom: 5%;
  margin-top: 10%;
}
.send_wrapper{
  display: flex;
  margin-bottom: 5%;
  margin-top: 15%;
}

  .contact_form label {
    display: block;
    margin-bottom: 1.5em;
  }

  .contact_form label span {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  .contact_form input[type="text"],
  .contact_form input[type="email"],
  .contact_form textarea {
    width: 100%;
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    resize: vertical;
  }

  .contact_button {
    display: inline-block;
    padding: 0.8em 2em;
    font-size: 1em;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .contact_button:hover {
    background-color: #004e5c;
  }




  .contact_accordion {
    background-color: #f9f9f9;
    border-radius: 12px;
    margin: auto;
    font-family: "Noto Sans JP", sans-serif;
  }
  
  .contact_accordion_box {
    margin: 10px;
  }
  
  .contact_accordion_header{
    color: #008aff;
    line-height: 160%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  .contact_accordion_header:hover{
    background-color: #ffffff;
    transition: all 0.4s ease;
  }
  .contact_title01{
  }
  .contact_title02{
    border-top: rgb(229, 229, 229) 2px solid;

  }
  .contact_accordion_header h2{
    font-weight:300;
    font-size: 5vw;
  }
  
  .contact_accordion_icon {
    border: #008aff 1px solid;
    color: #008aff;
    border-radius: 50%;
    width: 25px;
    line-height: 22px;
    text-align: center;
    font-weight:300;
  }
  
  .contact_accordion_content {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding: 60px;
    background-color: #f4f4f4;
    border-radius: 20px;
  }
  
  .contact_accordion_box.open .contact_accordion_content {
    max-height: 1000px; /* 十分な高さを仮設定 */
    padding: 20px;
    display: block;
  
  }
  
  .contact_accordion_content form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .contact_accordion_content label {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .contact_accordion_content input,
  .contact_accordion_content textarea {
    font-size: 15px;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: border 0.3s;
  }
  
  .contact_accordion_content input:focus,
  .contact_accordion_content textarea:focus {
    outline: none;
  }
  
  .contact_accordion_content textarea {
    resize: vertical;
    min-height: 100px;
  }
  
  .contact_accordion_content button {
    background-color: #1e90ff;
    color: white;
    font-size: 16px;
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin: 12px auto 0;
    display: block;
    font-weight: 600;
    transition: background-color 0.3s;
  }
  
  .contact_accordion_content button:hover {
    background-color: #187bcd;
    
  }
  
  .contact_accordion_note {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    white-space: pre-line;
  }
  
  .form_note{
    color: #008aff;
    margin-top: -0.2%;
    margin-bottom: 5%;
    font-weight: 400;
    line-height: 150%;
    font-size: 80%;
  }
  .contact_linebtn{
    text-align: center;
    width: 90%;
    margin: 5% 5% 0 5%;
    transition: all 1s ease;
  }
  .contact_linebtn:hover{
    opacity: 0.9;
    transition: all 1s ease;
    filter: drop-shadow(0 0 5px #333333b3);
  }
  .contact_linebtn a img{
    width: 100%;
  }

}

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

/* ===== PageTopボタン＆footer ===== */

/* ======================================== */
.page_top {
  position: fixed;
  right: 10px;
  bottom: 0;
  width: 70px;
  height: 70px;
  background: none; /* 背景色を消す */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    bottom 0.2s ease;
}

.page_top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.page_top img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}


footer {
  position: relative;
  margin: 0 auto;
  width: 100%;
  background-color: #008aff;
  mix-blend-mode: multiply;
  z-index: 100;
  padding-top: 2%;
}

footer p {
  color: #fff;
  padding: 0;
  margin: 0;
  text-align: center;
  padding: 0% 0 5% 0;
}

.footer_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
}

.footer_title {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  margin: 1% 35%;
  padding: 0;
}

.footer_title img {
  width: 100%;
}

.footer_title:hover {
  opacity: 0.8;
  transition: all 0.5s;
}

.footer_nav {
  display: flex;
  width: 500px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  padding: 0;
  color: #008aff;
  border-radius: 20px;  
  background-color: #b3dcff;
}

.footer_nav li {
  font-size: 14px;
  display: inline-block;
  text-align: center;
  padding: 6px 12px;
  list-style: none;
}
.footer_nav li:nth-child(1){
  border-right: #74beff 1px solid;  
}
.footer_nav li:nth-child(2){
  border-right: #74beff 1px solid;  
}
.footer_nav li:nth-child(3){
  border-right: #74beff 1px solid;  
}
.footer_nav li:hover {
  color: #fff;
  transition: all 1s ease;
}
.footer_nav li a {
  position: relative;
  color: #008aff;
  text-decoration: none;
  display: inline-block;
}
@media screen and (max-width:768px) {

  footer {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background-color: #008aff;
    z-index: 100;
    padding-top: 2%;
  }
  
  footer p {
    padding: 0;
    margin: 0;
    text-align: center;
    padding: 0% 0 5% 0;
  }
  
  .footer_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
  }
  
  .footer_inner_sp p{
    font-size: 2.5vw;
  }
  .footer_title {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    margin: 5% 20%;
    padding: 0;
  }
  
  .footer_title img {
    width: 100%;
  }
  
  .footer_title:hover {
    opacity: 0.5;
    transition: all 0.5s;
  }

  .footer_nav {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    padding: 0;
    margin-top: 10px;
    border-radius: 20px;  
    font-weight: 400;
    color: #fff;
  }
  
  .footer_nav li {
    font-size: 14px;
    display: inline-block;
    text-align: center;
    padding: 3px 12px;
    list-style: none;
    line-height: 5vw;
    margin: 5px 0; 
    padding: 5px 0;

  }

  .footer_nav li:nth-child(1){
    border-right: 0px;  
    border-bottom: 1px solid rgba(0, 138, 255, 0.5); 
    width: 100%;
    margin-top: 10px;
  }
  .footer_nav li:nth-child(2){
    border-right: 0px;  

    border-bottom: 1px solid rgba(0, 138, 255, 0.5); 
    width: 100%;


  }
  .footer_nav li:nth-child(3){
    border-right: 0px;  
    border-bottom: 1px solid rgba(0, 138, 255, 0.5); 
    width: 100%;


  }
  .footer_nav li:nth-child(4){
    border-right: 0px;  
    width: 100%;
    margin-bottom: 10px;



  }
  }

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

/* ===== 子ページ共通 ===== */

/* ======================================== */
.delay{
  animation-delay: 0.5s;

}

.other_contents {
  margin: 0 auto;
  margin-bottom: 10%;
}

.read_wrapper {
  width: 70%;
  margin: 0 auto;
  padding: 5%;
  border-radius: 30px;
  font-family: sans-serif;
  color: #6c6c6c;
  background-color: #ffffff;
  line-height: 1.8;
}

.read_wrapper dt {
  font-weight: 100;
  font-size: 160%;
  color: #008aff;
  margin-top: 2.5em;
  margin-bottom: 0.5em;
}

.read_wrapper dd {
  margin: 0 0 1.5em 0;
  padding: 1em;
  border-radius: 6px;
}

.read_wrapper_p {
  margin: 0 0 1.5em 0;
  padding: 1em 1em 1em 0;
  border-radius: 6px;
}

.read_wrapper dd ul {
  list-style: none;
  padding-left: 0;
  padding: 2% 5% 2% 0;
  margin-top: 0.5em;
  background: #eef8ff;
}

.read_wrapper dd ul li {
  margin-left: 1em;
  padding-left: 1em;
  text-indent: -1em; /* 行頭の・を揃える */
}

.read_wrapper a {
  color: #008aff;
  text-decoration: none;
}

.read_wrapper a:hover {
  text-decoration: underline;
}
.other .contact_text{
  margin-bottom: 2%;
  margin-top: -4%;
}
.other .contact_inner {
  margin: 0 auto;
  width: 100%;
  padding:0 0 3% 0;
  margin-bottom: 10%;
  text-align: left;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width:768px) {
  .other_contents {
    margin: 0 auto;
    margin-bottom: 10%;
  }
  
  .read_wrapper {
    width: 80%;
    margin: 0 auto;
    padding: 5%;
    border-radius: 30px;
    font-family: sans-serif;
    color: #6c6c6c;
    background-color: #ffffff;
    line-height: 1.8;
  }
  
  .read_wrapper dt {
    font-weight: 100;
    font-size: 160%;
    color: #008aff;
    margin-top: 2.5em;
    margin-bottom: 0.5em;
  }
  
  .read_wrapper dd {
    margin: 0 0 1.5em 0;
    padding: 1em;
    border-radius: 6px;
  }
  
  .read_wrapper p {
    margin: 0 0 1.5em 0;
    padding: 1em 1em 1em 0;
    border-radius: 6px;
  }
  
  .read_wrapper dd ul {
    list-style: none;
    padding-left: 0;
    padding: 2% 5% 2% 0;
    margin-top: 0.5em;
    background: #eef8ff;
  }
  
  .read_wrapper dd ul li {
    margin-left: 1em;
    padding-left: 1em;
    text-indent: -1em; /* 行頭の・を揃える */
  }
  
  .read_wrapper a {
    color: #008aff;
    text-decoration: none;
  }
  
  .read_wrapper a:hover {
    text-decoration: underline;
  }
  }


  /*- send.phpに追加 -*/
  .section04_contact_right {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 40px 20px;
    margin: 40px auto;
    max-width: 600px;
    text-align: center;
    font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  }
  
  .section04_contact_right h1.contact_title {
    font-size: 24px;
    margin-bottom: 16px;
    font-weight: 600;
  }
  
  .section04_contact_right p {
    margin-bottom: 20px;
    font-size: 16px;
    color: #444;
  }
  
  .section04_contact_right a.btn04 {
    display: inline-block;
    background: #008aff;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s ease;
  }
  
  .section04_contact_right a.btn04:hover {
    background: #5db4ff;
  }
  .send_wrapper{
    margin: 0;
  }