@charset "UTF-8";
html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}

@media screen and (max-width: 1920px) {
  html {
    font-size: 0.5208333333vw;
}
}
@media screen and (max-width: 992px) {
  html {
    font-size: 1.2820512821vw;
}
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
  font-weight: 400;
  line-height: 1.45;
  font-size: 1.4rem;
  color: #000;
  font-feature-settings: "palt";
}

a {
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: #000;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =================================================================
全体レイアウト
=================================================================*/
.container {display: flex; justify-content: center; width: 100%; max-width: 1100px; margin: auto; padding-top: 8rem;}
.container .main-content {max-width: 78rem;}

/* =================================================================
共通
=================================================================*/
.important {color: #ff0000;}

/* =================================================================
ボタンアニメーション
=================================================================*/
.shiny {position: relative; background: url('../img/top_fukidashi.png') no-repeat center/contain; overflow: hidden; width: 52.1rem; height: 14.4rem; transition: 300ms; text-indent: -9999px; border-radius: 3px;}
.shiny::after {position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #ffd5d5; transition: 300ms; animation: shinyshiny 2.5s ease-in-out infinite;}

@-webkit-keyframes shinyshiny {
    0% {-webkit-transform: scale(0) rotate(45deg); opacity: 0;}
    80% {-webkit-transform: scale(0) rotate(45deg); opacity: 0.5;}
    81% {-webkit-transform: scale(4) rotate(45deg); opacity: 1;}
    100% {-webkit-transform: scale(50) rotate(45deg); opacity: 0;}
}

.btn_box {position: relative; margin: 3.8rem auto 0; z-index: 10; display: flex; justify-content: center;}
#btn_animation .btn {display: block; position: relative; width: 50.1rem; height: 8rem; border-radius: 9999px; text-decoration: none; transition: .2s;}
#btn_animation .btn:before,
#btn_animation .btn:after {content: ""; position: absolute; z-index: -10; width: 50.1rem; height: 8rem; top: 0; left: 0; border-radius: 39px; background: #000; transform: translate3d(0, 0, 0);}
#btn_animation .btn:before {animation: anime 1s ease-out infinite;}
#btn_animation .btn:after {animation: anime 1s ease-out 1s infinite;}
@keyframes anime {
  0% {transform: scale(.95); opacity: 1}
  90% {opacity: .1}
  to {transform: scale(1.2, 1.4); opacity: 0}
}


/* =================================================================
下線アニメーション
=================================================================*/
.under_line {position: relative; display: inline-block; overflow: hidden;}
.under_line::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2.3rem; background: #ffff00; transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease-out; z-index: -1;}
.under_line.active::after {transform: scaleX(1);}

/* =================================================================
サイドバー
=================================================================*/
#sidebar {width: 32rem; height: 100vh; flex-shrink: 0; position: relative;}
#sidebar a {display: flex; align-items: center; padding: 1.3rem 1.8rem; font-size: 1.8rem; font-weight: 700; gap: 1.3rem; background: linear-gradient(to bottom, #fefefe, #ece6d7); border-radius: 10px;}
#sidebar .inner {width: 32rem; position: fixed; z-index: 1000;}


@media screen and (max-width: 992px) {
  #sidebar {display: none;}
}

/* =================================================================
header
=================================================================*/
header {width: 100%; background: #42210b; position: fixed; z-index: 10000;}
header img {width: 16.1rem; height: 3.5rem;}
header .inner {width: 100%; max-width: 110.0rem; height: 8rem; display: flex; justify-content: space-between; align-items: center; margin: auto; padding: 0 2.3rem 0 2.8rem;}
header .right-box {align-self: flex-end; padding-bottom: 1.3rem;}
header p {color: #fff; font-size: 1.8rem;}

#head_submenu {display: none;}
header .toggle-button {display: none;}

@media screen and (max-width: 992px) {
  header .right-box {display: flex; justify-content: flex-end; align-items: center; align-self: center; padding-bottom: 0;}
  header .right-box p {align-self: flex-end;}
  header .toggle-button {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 4rem; height: 4rem; margin-left: 3rem;}
  header .toggle-button span {display: block; width: 3.5rem; background: #fff; height: 0.1rem;}

  header .toggle-button.open {gap: 0;}
  header .toggle-button.open span:nth-child(1) { transform:rotate(45deg); }
  header .toggle-button.open span:nth-child(2) {display: none;}
  header .toggle-button.open span:nth-child(3) { transform:rotate(-45deg); }

  /*  menu  *//*  button  */
  #head_submenu {visibility: hidden; opacity: 0; -webkit-transition: all 0.3s 0s ease; transition: all 0.6s 0s ease; display: block;}
  #head_submenu.open { opacity: 1; visibility: visible; z-index: 1020; -webkit-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;}

  /*  head submenu  */
  #head_submenu {position: fixed; top: 0px; left: 0; right: 0; bottom: 0; z-index: 997;}
  #head_submenu .head {position: fixed; width: 100%; top: 0px; right: 0; bottom: 0; background: #fff; overflow-y: scroll; padding: 0px 0px 30px 0px; box-sizing: border-box;}

  /*  animation  */
  #head_submenu,
  #head_submenu #submenu_left ul li a,
  #head_submenu #submenu_right ul li a,
  #head_menu ul li a {transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s;}

  #head_submenu .head {padding-top: 16rem;}
  #head_submenu .head .menu {width: 50rem; margin: auto;}
  #head_submenu .head a {font-size: 3rem; display: flex; align-items: center; justify-content: center; height: 10rem;}
  #head_submenu .head a img {margin-right: 2rem;}
}

@media screen and (max-width: 992px) {
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; transform: translateY(0); transition: transform 0.3s ease; }
header.hide-on-scroll { transform: translateY(-100%); }
}

/* =================================================================
footer
=================================================================*/
footer {padding-bottom: 5.1rem;}
footer p {text-align: center; font-size: 2.7rem; margin-top: 5.5rem;}


/* =================================================================
top
=================================================================*/
#top {padding-top: 9.1rem;}
#top img {margin: auto; display: block; width: 100%;}
#top .fukidashi {position: relative; width: 52.1rem; height: 14.4rem; margin: auto;}
#top .fukidashi:before {content: ""; display: block; width: 5.5rem; height: 3.5rem; background-image: url('../img/top_fukidashi_triangle.png'); background-size: cover; position: absolute; left: 0; right: 0; bottom: -2.5rem; margin: auto; z-index: 1;}

#top .intro-txt {text-align: center; margin: 6.6rem auto 2.7rem; font-size: 2.4rem; line-height: 1.75;}
#top .intro-txt strong span {color: #ff0000;}

/* =================================================================
kantan
=================================================================*/
#kantan .fukidashi {width: 52.8rem; height: 8.2rem; background: #00748a; display: flex; justify-content: center; align-items: center; font-size: 3.653rem; font-weight: 700; color: #fff; margin: auto; position: relative; margin-bottom: 3.7rem;}
#kantan .fukidashi:after {content: ""; display: block; width: 0; height: 0; border-style: solid; border-right: 1.6rem solid transparent; border-left: 1.6rem solid transparent; border-top: 2.8rem solid #00748a; border-bottom: 0; position: absolute; left: 0; right: 0; bottom: -2.7rem; margin: auto;}
#kantan .fukidashi + p {text-align: center; font-size: 3rem; font-weight: 700; margin-top: 3.7rem;}

#kantan .graph {position: relative; width: 100%; max-width: 68.6rem; height: 63.3rem; margin: 0 auto; margin-top: 7.3rem;}
#kantan .graph img {width: 100%; height: auto; display: block; position: relative; z-index: 2;}
#kantan .graph .item {position: absolute; bottom: 8.2rem; width: 11.7rem; transform-origin: bottom; transform: scaleY(0); transition: transform 1s ease-out;}
#kantan .graph.is-active .item {transform: scaleY(1);}
#kantan .graph .item_1 {left: 8.5rem; height: 2.7rem; background-color: #87ceeb; transition-delay: 0.2s;}
#kantan .graph .item_2 {left: 24.5rem; height: 3.8rem; background-color: #90ee90; transition-delay: 0.2s;}
#kantan .graph .item_3 {left: 40.5rem; height: 6.2rem; background-color: #ffd700; transition-delay: 0.2s;}
#kantan .graph .item_4 {left: 56rem; height: 50.2rem; background-color: red; transition-delay: 0.2s;}

#kantan .sounandesu h3 {text-align: center; font-size: 3.653rem; font-weight: 700; margin: 3.7rem auto 8.9rem;}
#kantan .sounandesu h3 strong {font-size: 5.4rem; color: #ff0000; font-weight: 700;}
#kantan .sounandesu h3 strong:nth-of-type(2) {font-size: 9rem; color: #000;}

#kantan .fuan {position: relative; background-color: #ece6d7;}
#kantan .fuan img {width: 100%; display: block; position: relative; z-index: 0;}
#kantan .fuan p {font-size: 3.6rem; text-align: center; font-weight: 700; position: absolute; left: 0; right: 0; bottom: 22.2rem; margin: auto; z-index: 2;}
#kantan .fuan p + p {font-size: 6rem; font-weight: 500; bottom: 13.7rem;}

.setsuzei img {width: 100%;}

.voice h3 {text-align: center; font-size: 3.6rem; font-weight: 500; line-height: 1.5; margin: 5.6rem auto 3.2rem;}
.voice h3 + p{background: #af9143; font-size: 3.6rem; color: #fff; font-weight: 700; display: flex; justify-content: center; align-items: center; padding: 1.6rem 9rem; margin: 0 auto 5.1rem; width: 70.7rem; height: 6.8rem;}
.voice .list {display: flex; flex-direction: column; padding: 0 4.4rem;}
.voice .item {display: flex; align-items: center; font-size: 3rem; gap: 5.3rem; padding: 0 0 5.2rem; margin-bottom: 5.2rem; border-bottom: 1px solid #c9caca;}
.voice .item p {font-size: 3rem; line-height: 1.666666666666667; letter-spacing: 0.01em;}
.voice .item img {width: 19.4rem; height: 19.4rem;}
.voice .item:last-child {border-bottom: 0; margin-bottom: 0;}

.shikumi {position: relative;}
.shikumi img {width: 100%;}
.shikumi p {position: absolute; left: 0; right: 0; bottom: 46.3rem; margin: auto; font-size: 3.6rem; text-align: center; font-weight: 500; line-height: 1.2; z-index: 2;}
.shikumi strong {font-size: 5.4rem;}

.tatoeba img {width: 100%;}

.soshitenanto {position: relative;}
.soshitenanto img {width: 100%;}
.soshitenanto p {font-size: 4.5rem; justify-content: center; align-items: center; display: flex; font-weight: 700; position: absolute; left: 0; right: 0; bottom: 40.8rem; margin: auto; z-index: 2;}
.soshitenanto p .under_line {width: 70.7rem; height: 10.1rem; display: flex; justify-content: center; align-items: center;}
.soshitenanto p .under_line::after { height: 10.1rem;}

.present {width: 100%;}

/* =================================================================
cta
=================================================================*/
.cta {background: #42210b; padding: 1rem 0;}
.cta p {font-size: 2.5rem; font-weight: 700; color: #fff; text-align: center;}
.cta .kotira {font-size: 3.5rem; color: #ffff00; margin-top: 0.5rem;margin-bottom: -2rem;}
.cta a img {width: 100%;}

.cta.float {display: none;}

@media screen and (max-width: 992px) {
  .cta.float {display: block; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; transform: translateY(100%); transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; pointer-events: none;}
  .cta.float.is-visible {transform: translateY(0); opacity: 1; pointer-events: auto;}
}



/* =================================================================
運営者情報
=================================================================*/
.about p {text-align: center; font-size: 2.7rem; margin-top: 5.5rem;}
.about a {width: 50rem; height: 8rem; display: flex; justify-content: center; align-items: center; position: relative; background: #42210b; color: #fff; font-size: 3.6rem; border-radius: 9999px; margin: 4.5rem auto 0; position: relative;}
.about img {width: 3.119rem; height: 0.894rem; position: absolute; top: 0; bottom: 0; left: 17rem; margin: auto;}


/* =================================================================
250731_追加分
=================================================================*/
.main-ttl{
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: -20px;
}

@media screen and (max-width: 992px) {
  .main-ttl{
    font-size: 20px;
  }
}

.cta {
  padding: 2rem 0 4rem;
}

.kantan-contents{
  padding: 4rem 0 0;
}

#top .intro-txt{
  margin: 6.6rem auto 4rem;
}