@charset "utf-8";
/* CSS Document */
/*共通*/
html, body {
  width: 100%;
  overflow-x: hidden; /* 横スクロールを無効化 */
}
section {
  padding: 15px;
  max-width: 768px;
  margin: 0 auto;
  padding: 30px 15px;
  text-align: center;
}
h2 {
  font-weight: 700;
  font-size: min(30px, 6.7vw);
  text-align: center;
}
h3 {
  font-weight: 700;
  font-size: 20px;
}
p {
  line-height: 1.8;
}
img {
  object-fit: contain;
  display: block;
}
:root {
  --green: #0B93A0;
}
.bold {
  font-weight: 700;
}
.green {
  color: var(--green);
}
h2.green, h2 .green {
  font-weight: 800;
}
.pink {
  color: #ED596F;
}
.yellow {
  background: #FFEE8A;
  font-weight: 700;
}
.txt-yellow {
  color: #FFEE8A;
}
.large_font-size {
  font-size: 28px;
  line-height: 1.5;
  font-weight: 800;
}
.mid_font-size {
  font-size: 20px;
  line-height: 1.5;
}
.shadow {
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.15);
}
/*==========ヘッダー==============
===============================*/
header {
  background: #F3FAFA;
  padding: 15px;
  max-width: 768px;
  margin: 0 auto;
}
header .section-inner {}
header img {
  width: 25%;
  min-width: 150px;
}
/*==========FV==============
===============================*/
section.fv {
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.fv img {
  width: 160%;
  max-width: 768px;
}
/*==========CV==============
===============================*/
.cv {
  background-image: url("../img/cv-bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
}
.cv h2 {}
/*メニュー*/
.cv-menu {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.cv-menu img {
  max-height: 40px;
  object-fit: contain;
  margin: 0 3px;
}
/*CVボタンスタイル*/
.cv-btn_area-txt {
  font-size: 20px;
  margin-bottom: 10px;
}
.cv-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 10px;
}
.cv-btn1, .cv-btn2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 85px;
  width: 100%;
  max-width: 360px;
  gap: 12px;
  padding: 10px 15px;
  background: #ED596F;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 22px;
  border: solid 1px #fff;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7));
  margin-bottom: 10px;
}
.cv-btn_wrapper {
  display: flex;
  align-items: center;
}
.cv-btn1 img, .cv-btn2 img {
  margin-right: 20px;
}
.cv-btn1 .icon, .cv-btn2 .icon {
  display: inline-flex;
}
.cv-btn1 .circle, .cv-btn2 .circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-btn1 .triangle, .cv-btn2 .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
}
.cv-btn2 {
  background: #4CC764;
}
.cv-btn2 img, .cv-btn1 img {
  width: 40px;
  height: 40px;
}
/*特典*/
.cv-present {
  display: flex;
  justify-content: center;
  max-width: 500px;
  margin: 20px auto;
}
.cv-present img {
  flex: 1;
  max-width: 140px;
}
.cv-present_txt {
  text-align: left;
  margin-left: 10px;
  font-size: 16px;
}
/*電話*/
.cv-tel {
  border: 2px solid #fff;
  position: relative;
  max-width: 500px;
  margin: 40px auto 0;
}
.cv-tel h3 {
  text-align: center;
  position: absolute;
  right: 0;
  left: 0;
  top: -0.8em;
}
.cv-tel h3 span {
  padding: 0 .5em;
  background: linear-gradient(135deg, #85d9e4, #2ebfd0, #07adbd);
}
.cv-tel_number-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.cv-tel_icon {
  width: 30px;
  object-fit: contain;
  margin-right: 5px;
}
.cv-tel_number {
  font-size: 40px;
  line-height: 1.2;
}
.attention {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  margin: 10px 0;
}
/**リンク**/
.link-wrapper {
  margin:  0 auto;
  max-width: 500px;
}
.link-wrapper h2 {
  padding: 10px 0;
  border-top: solid 2px #333;
  border-bottom: solid 2px #333;
  margin: 0px 15px 30px;
  font-size: 20px;
}
.link-wrapper1 h2 {
  border-top: solid 2px #fff;
  border-bottom: solid 2px #fff;
  margin: 30px 0 0;
}
.link {
  display: block;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin: 30px 15px;
  background: #fff;
  text-align: center;
}
.link2 {
  margin-top: 0;
}
.link-wrapper1 .link {
  margin: 30px 0;
}
.link .link-ttl {
  font-weight: 700;
  font-size: 20px;
  color: #333;
}
.link img {
  width: max(150px, 70%);
  margin:  0 auto;
}
.link .link-access {
      font-size: 15px;
    color: #777;
}
.link .link-station {
      display: inline-block;
    padding: 0 15px;
    color: #fff;
    font-weight: 700;
    border-radius: 100px;
    font-size: 14px;
    margin: 10px auto;
    background: var(--green);
    text-align: center;
}
/*==========悩み==============
===============================*/
.trouble {
  text-align: center;
  background-image: url("../img/trouble-bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.trouble h2 {
  color: #fff;
  display: inline-block;
  margin-bottom: 20px;
}
.trouble h2 span {
  background: #4C6581;
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 5px;
}
.trouble ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.trouble ul li p {
  background-image: url("../img/trouble-bg1.webp");
  background-repeat: no-repeat;
}
.trouble .trouble-txt {
  width: 70%;
  max-width: 300px;
}
.trouble .trouble-img {
  width: 30%;
  max-width: 150px;
}
/*==========タイムリミット==============
===============================*/
.limit {
  background: #E7F4F5;
}
.limit-sub_ttl {
  background: #4C6581;
  color: #fff;
  display: inline-block;
  padding: 0 5px;
  margin-top: 20px;
}
.limit-age {
  font-size: 30px;
}
.limit-age .pink {
  display: inline-block;
  line-height: 1;
  margin-top: 10px;
  font-size: 50px;
  font-weight: 800;
}
.limit-age_txt {
  display: block;
  margin-top: -10px;
}
.limit .limit-img {
  display: flex;
  justify-content: space-between;
  margin: -50px auto 0;
  align-items: end;
  max-width: 500px;
}
.limit .limit-img img {
  width: 80px;
  object-fit: contain;
}
/*アコーディオン*/
.limit .accordion {
  border: 1px solid #ddd;
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
}
.limit .accordion-title {
  width: 100%;
  text-align: left;
  padding: 10px;
  font-size: 16px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.limit .toggle-icon {
  font-size: 22px;
  font-weight: bold;
  transition: transform 0.25s ease;
}
.limit .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: #fff;
  padding: 0 10px;
  border: solid 2px var(--green);
}
.limit .accordion-content p {
  margin: 0;
  padding: 20px 0;
}
.limit .accordion-content_txt {
  text-align: left;
}
.limit p.limit-summary {
  font-size: min(20px, 4.9vw);
  padding-bottom: 0;
}
.limit .accordion-content .yellow {
  font-weight: 700;
}
.limit .accordion-content img {
  margin: 20px 0;
}
.limit .accordion-content .attention {
  display: block;
  margin-bottom: 20px;
}
/*==========メカニズム==============
===============================*/
.mechanism {
  background: url("../img/mechanism-bg.webp");
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.mechanism .section-inner {
  max-width: 500px;
  margin: 0 auto;
}
.mechanism .mechanism-elements {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.mechanism-contents {
  display: flex;
}
.mechanism-contents img {
  width: 15%;
  min-width: 80px;
  margin-right: 5px;
}
.mechanism-contents p {
  text-align: left;
}
.mechanism .mechanism-elements_strength, .mechanism .mechanism-elements_time {
  background: #4C6581;
  color: #fff;
  font-size: 35px;
  width: 150px;
  border-radius: 5px;
  margin: 0 10px;
  padding: 5px 10px;
}
.mechanism .mechanism-elements_time {
  background: #297B9B;
}
.mechanism-elements_strength img, .mechanism-elements_time img {
  width: 50px;
  margin: 10px auto;
}
.mechanism .mechanism-elements_strength span, .mechanism .mechanism-elements_time span {
  font-size: 16px;
  display: block;
}
.mechanism-elements_times {
  font-size: 22px;
}
.mechanism-strength, .mechanism-time {
  background: #E7F4F5;
  border-radius: 5px;
  margin: 40px 0;
  padding: 30px 10px 10px;
  position: relative;
}
.mechanism-time {
  margin-bottom: 0;
}
.mechanism-strength h3, .mechanism-time h3 {
  display: inline-block;
  border: solid 2px var(--green);
  border-radius: 5px;
  padding: 5px 10px;
  background: #fff;
  margin-bottom: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
  white-space: nowrap;
}
.support h2 img {
  width: 100px;
  margin: 0 auto;
}
.support-strength, .support-time {
  max-width: 500px;
  margin: 0 auto;
}
.support-strength h3, .support-time h3 {
  background: #4C6581;
  padding: 5px 20px;
  position: relative;
  color: #fff;
  display: inline-block;
  margin-top: 20px;
}
.support-strength h3::after, .support-time h3::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px; /* 吹き出し本体からの距離 */
  border-width: 8px 8px 0 8px; /* 上に向かう三角（下向きの先端） */
  border-style: solid;
  border-color: #4C6581 transparent transparent transparent;
  width: 0;
  height: 0;
  pointer-events: none;
}
.support-graph {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
}
.support-strength_list li, .support-time_list li {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.support-strength_contents {
  padding: 0 10px 10px;
}
.support-strength_list .support-strength_ttl, .support-time_list .support-time_ttl {
  display: flex;
  align-content: center;
  justify-content: center;
  color: var(--green);
  border: solid 3px var(--green);
  padding: 10px;
  max-width: 500px;
  margin: 20px auto;
}
.support-strength_list .support-strength_ttl-wrapper, .support-time_list .support-time_ttl-wrapper {
  margin: 0 12px;
}
.support-strength_list .support-strength_ttl .support-strength_ttl-sub, .support-time_list .support-time_ttl .support-time_ttl-sub {
  font-size: 16px;
  background: var(--green);
  padding: 0 5px;
  color: #fff;
}
.support-strength_ttl-ttl, .support-time_ttl-ttl {
  line-height: 1.2;
  text-align: left;
}
.support-strength_list .support-strength_ttl img, .support-time_list .support-time_ttl img {
  width: 15%;
  max-width: 50px;
  min-width: 20px
}
.support-strength_list p, .support-time_list p {
  text-align: left;
}
.support-strength_list .limit-summary {
  text-align: center;
  margin: 20px 0;
}
.limit-summary_img {
  max-width: 350px;
  margin: 20px auto;
}
.support-pain, .support-lack {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F9F9F9;
  border-radius: 5px;
  padding: 10px;
}
.support-pain img {
  width: 25%;
  margin-right: 10px;
}
.support-lack {
  background: none;
}
.support-lack img {
  width: 40%;
}
/*==========結果==============
===============================*/
.result {
  background: #F3FAFA;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.7;
}
.result .bg-green {
  background: var(--green);
  color: #fff;
  padding: 0 10px 3px;
  margin: 0 5px;
  font-size: 35px;
}
.result .pink {
  font-size: 45px;
  line-height: 1.2;
}
.result .result-img {
  max-width: 500px;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
}
.result .result-img img {
  width: 27%;
  margin: 0 10px;
}
/*==========比較表==============
===============================*/
.compare {
  background-image: url("../img/compare-bg.webp");
  background-repeat: no-repeat;
  background-size: min(160%, 768px) auto;
}
.compare h2 img {
  margin: 0 auto;
  width: 50%;
  max-width: 200px;
}
.compare-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  margin: 20px 0;
}
.compare-scroll img {
  display: block;
  width: 500px;
  height: auto;
  object-fit: contain;
  max-width: none;
  margin: 0 auto;
}
/*==========安全性==============
===============================*/
section.safe {
  background: #F3FAFA;
  padding: 30px 0;
}
section.safe h2, section.safe img {
  padding: 0 15px;
  line-height: 1.5;
}
.safe h2 .bg-green {
  background: var(--green);
  color: #fff;
  font-weight: 800;
  padding: 0 5px;
  margin: 0 5px;
}
.safe img {
  margin: 20px 0;
}
.safe-efforts img {
  max-width: 450px;
  position: relative;
  top: 200px;
  margin: 0 auto;
  width: 100%;
}
.safe-efforts {
  background-image: url("../img/safe-bg.webp");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 370px;
  position: relative;
  top: -40px;
}
/*==========プロフィール==============
===============================*/
.profile {
  background: #F3FAFA;
}
.profile h2 {
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.profile-img {
  max-width: 320px;
  margin: 20px auto;
}
.job-title {
  background: var(--green);
  color: #fff;
  padding: 5px 15px;
  border-radius: 100px;
  font-size: 16px;
  margin-right: 10px;
  font-weight: 400;
}
.profile-ttl {
  max-width: 150px;
  margin: 10px auto;
}
.profile table {
  text-align: left;
}
.profile .career-table {
  display: inline-block;
  border-collapse: separate;
  border-spacing: 8px 6px; /* 行間と列間の余白 */
}
.profile .career-table-wrapper {
  text-align: center;
}
.profile .career-table td {
  vertical-align: top;
  font-size: 14px;
}
.profile table .year {
  width: 50px;
  white-space: nowrap;
}
.profile table .month {
  width: 40px;
  white-space: nowrap;
}
.profile table .text {
  width: auto;
}
.profile-other {
  display: flex;
  justify-content: center;
}
.profile-other_license, .profile-other_membership {
  margin: 0 10px;
}
/*==========料金表==============
===============================*/
.price {
  background: #F3FAFA;
}
.price .price-ttl {
  background: #fff;
  border: solid 3px var(--green);
  margin: 30px auto 0;
  padding: 30px 10px 10px;
  position: relative;
  max-width: 500px;
}
.price .price-ttl h3 {
  display: inline-block;
  border-radius: 100px;
  padding: 5px 10px;
  color: #fff;
  background: var(--green);
  margin-bottom: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
  white-space: nowrap;
}
.price .price-fee {
  font-size: 45px;
  font-weight: 800;
}
.price .price-fee .yen {
  font-size: 25px;
}
.price .price-txt {
  display: block;
  margin: 20px 0 10px;
}
.price .price-img {
  max-width: 500px;
  margin: 20px auto;
  width: 100%;
}
.price .simulation-txt {
  font-size: 22px;
  margin-top: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.price .sim-img {
  display: flex;
  justify-content: center;
  max-width: 500px;
  flex-wrap: wrap;
  margin: 20px auto 0;
}
.price .sim-img img {
  max-width: 200px;
  width: 50%;
}
/*==========声==============
===============================*/
.voice .inner-section, .flow {
  max-width: 500px;
  margin: 0 auto;
}
.voice {
  background: #F9F9F9;
}
.voice h2 {
  font-size: 30px;
}
.voice h2 span {
  display: block;
  color: #484747;
  font-size: 20px;
}
.slider-card {
  margin: 15px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.15);
}
.voice .slick-slide img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.voice .slider-card p {
  padding: 15px;
  min-height: 220px;
  text-align: left;
}
/**矢印調整**/
/* まずデフォルトの矢印アイコンを消す */
.slick-prev:before, .slick-next:before {
  content: "";
}
/* 矢印ボタンの基本デザイン */
.slick-prev, .slick-next {
  width: 40px;
  height: 40px;
  background: var(--green); /* ←使いたい緑色 */
  border-radius: 100%; /* 半円 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1 !important;
  visibility: visible !important;
}
/* 右矢印（▶） */
.slick-next:after {
  content: "▶";
  font-size: 10px;
  color: #fff;
}
/* 左矢印（◀） */
.slick-prev:after {
  content: "◀";
  font-size: 10px;
  color: #fff;
}
/* 位置調整：ちょい外側に出す */
.slick-prev {
  left: -3%;
}
.slick-next {
  right: -3%;
}
/* ホバー時の少し強調 */
.slick-prev:hover, .slick-next:hover {
  background: #007a4f; /* 少し濃い緑に */
}
/* クリック後 */
.slick-prev:focus, .slick-next:focus {
  background: var(--green);
  outline: none;
}
/* ★ focus中でも hover したら色を変える */
.slick-prev:focus:hover, .slick-next:focus:hover {
  background: #007a4f;
}
/*==========流れ==============
===============================*/
.flow h2 span {
  display: block;
  color: #484747;
  font-size: 20px;
}
.flow .slider-card {
  background: #F3FAFA;
  border-radius: 10px;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.15);
  text-align: left;
}
.flow img {
  width: 100%;
}
.flow .slider-card .txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 700;
  padding: 10px;
}
.flow .slider-card .txt-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #4C6581;
}
.flow .slider-card h3 {
  font-size: 25px;
  margin-left: 10px;
}
/*==========よくある質問==============
===============================*/
.faq-item {
  border-radius: 6px;
  overflow: hidden;
}
.faq-list {
  max-width: 500px;
  margin: 20px auto;
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--green);
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  margin: 5px auto;
  border-radius: 10px;
  text-align: left;
}
.faq-question_txt {
  display: flex;
  align-items: center;
}
.faq-question_num {
  color: var(--green);
  background: #fff;
  border-radius: 100px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  margin-right: 10px;
}
/* ▼ 初期状態（下向き） */
.arrow {
  width: 10px;
  height: 10px;
  border-right: 2px solid #ffff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-left: 10px;
}
/* ▲ 開いた状態（上向き） */
.faq-question.active .arrow {
  transform: rotate(-135deg);
}
.faq-answer {
  display: none;
  padding: 12px;
  background: #fff;
  line-height: 1.6;
  text-align: left;
}
.faq-answer_a {
  background: #ED596F;
  color: #fff;
  border-radius: 100px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  margin-right: 10px;
}
.faq-answer p {
  width: 90%;
}
/* 開いたとき表示 */
.faq-question.active + .faq-answer {
  display: flex;
  align-items: center;
}
/*==========ご案内==============
===============================*/
.info {
  max-width: 500px;
  margin: 0 auto;
}
.info-time {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  margin: 20px auto;
}
.info .attention {
  text-align: left;
}
.info-map_access {
  display: inline-block;
  padding: 0 15px;
  color: #fff;
  font-weight: 700;
  border-radius: 100px;
  font-size: 16px;
  margin: 20px auto;
  background: var(--green);
}
/*==========CVボタン==============
===============================*/
.cv-fixed {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 768px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999;
  box-sizing: border-box;
}
.cv-fixed_btn img {
  max-height: 80px;
  height: auto;
  width: auto;
  display: block;
}
/*==========フッター==============
===============================*/
footer {
  background: center center / cover url("../img/footer-bg.webp") no-repeat;
  color: #fff;
  font-size: 1.2rem;
  padding: 30px;
  text-align: center;
  margin-bottom: 100px;
}
footer .logo {
  margin-bottom: 5rem;
  width: 20%;
  min-width: 200px;
  margin: 0 auto;
}
footer p {
  font-size: 14px;
  margin-top: 10px;
}
/**20260227修正**/
.add-info {
  background: #fff;
  max-width: 500px;
  margin: 20px auto;
  padding: 15px;
  border: solid 5px #ED596F;
}
.add-info h4 {
  font-size: 25px;
  font-weight: 800;
  color: #ED596F;
  margin-bottom: 20px;
}
.add-info p {
  color: #333;
}
.add-info .link-station {
  display: inline-block;
  padding: 0 15px;
  color: #fff;
  font-weight: 700;
  border-radius: 100px;
  font-size: 14px;
  margin: 10px auto;
  background: var(--green);
  text-align: center;
}