@charset "utf-8";
/* ========== base ========== */
* {
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"游ゴシック体","YuGothic","游ゴシック","Yu Gothic",'Meiryo','メイリオ', sans-serif;
    scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    background-color: #f5fcff;
}
section {
    padding: 5% 0;
}
.mb0 {
    margin-bottom: 0px;
}
.tac {
    text-align: center;
}
#wrapper{
    margin: auto;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 4px 20px rgb(203 209 210);
}
img,video {
    width: 100%;
    vertical-align: middle;
}
p {
    line-height: 1.5;
    font-size: 14px;
    margin: 0.7em 0.7em 0;
}
.anno {
    font-size: 10px !important;
    color: gray;
    text-align: right;
    margin-top: 0px;
}
.marker {
    background: linear-gradient(to bottom, transparent 0%, transparent 65%, #fff59c 40%, #fff492 100%);
}
.sp {
    display: none;
}
.pc {
    display: block;
}

@media only screen and (min-width: 767px){
    #wrapper{
        max-width: 700px;
        margin: auto;
    }
}
@media only screen and (max-width: 766px){
    #wrapper{
        margin: 0;
    }
    p {
        font-size: 16px !important;
        line-height: 1.5;
        padding: 10px;
    }
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
}

/* ========== 見出し ========== */
.heading-31 {
    position: relative;
    padding: .3em 0 .2em 1em;
    border-bottom: 3px solid #4ba5c7;
    color: #333333;
    font-size: 1.5rem;
}
.heading-31::before {
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #4ba5c7;
    content: '';
}
.heading-31::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    background: #4ba5c7;
    content: '';
}
@media only screen and (max-width: 766px){
    .heading-31 {
        font-size: 1.2rem;
    }
}

.heading-21 {
    border-left: 5px solid #4ba5c7;
    background-color: #f7f7f7;
    padding: 10px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 33px;
    text-align: left;
    font-size: 20px;
    border-bottom: 2px solid #4ba5c7;
}

.heading-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}
.heading-16::before,
.heading-16::after {
    width: 3px;
    height: 40px;
    background-color: #49b4cd;
    content: '';
}
.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}
.heading-16::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

.heading-12 {
    position: relative;
    width: 290px;
    margin: 0 auto;
    padding: .5em .7em;
    background-color: #4ba5c7;
    color: #fff;
    text-align: center;
    transform-style: preserve-3d;
}

.heading-12::before,
.heading-12::after {
    position: absolute;
    bottom: -10px;
    border-style: solid;
    border-color: #3b95b7;
    content: '';
    transform: translateZ(-1px);
}

.heading-12::before {
    left: -30px;
    border-width: 25px 25px 25px 15px;
    border-left-color: transparent;
}
.heading-12::after {
    right: -30px;
    border-width: 25px 15px 25px 25px;
    border-right-color: transparent;
}
.heading-12 span::before,
.heading-12 span::after {
    position: absolute;
    bottom: -10px;
    width: 10px;
    height: 10px;
    background-color: #004567;
    content: '';
    transform: translateZ(-1px);
}
.heading-12 span::before {
    left: 0;
    clip-path: polygon(0 0, 100% 0%, 100% 100%);
}
.heading-12 span::after {
    right: 0;
    clip-path: polygon(0 0, 100% 0%, 0% 100%);
}


/* ========== ヘッダー ========== */
header {
    background: #e4f9ff;
    color: #fff;
}
.nav-wrapper {
    position: relative;
}

.header_flex {
    display: flex;
    padding: 2%;
    font-size: 14px;
}
.header_flex .left {
    flex: 6;
}
h1 {
    font-size: 1em;
    padding: 0;
    font-weight: normal;
    margin: 0px !important;
}
.title_top {
    display: flex;
    align-items: center;
    color: #026aa1;
}

/*
検索実装とナビ
----------------------------*/

.nav-wrapper{
	position: relative;
}


/* 
hamburger(ハンバーガーアイコン)
=================================== */
.hamburger {
	position: absolute;
	right: 15px;
	top: 13px;
	width: 30px;
	height: 25px;
	cursor: pointer;
	z-index: 300;
}

.hamburger__line {
	position: absolute;
	width: 20px;
	height: 2px;
	right: 0;
	background-color: #026aa1;
	transition: all 0.5s;
}

.hamburger__line--1 {
	top: 3px;
}

.hamburger__line--2 {
	top: 10px;
}

.hamburger__line--3 {
	top: 18px;
}

/*ハンバーガーがクリックされたら*/
.open .hamburger__line--1 {
	transform: rotate(-45deg);
	top: 5px;
	background-color: #026aa1;
}

.open .hamburger__line--2 {
	opacity: 0;
}

.open .hamburger__line--3 {
	transform: rotate(45deg);
	top: 5px;
	background-color: #026aa1;
}

/* 
sp-nav(ナビ)
=================================== */
.sp-nav {
	position: fixed;
	top: -100%;
	/*ハンバーガーがクリックされる前はWindow上部に隠す*/
	right: 0;
	width: 100%;
	/* 出てくるスライドメニューの幅 */
    height: 15vh;
	background-color: #FFFFFFE0;
	transition: all 0.5s;
	color: #333333;
	z-index: 200;
	overflow-y: auto;
	text-align: left;
	padding: 2em 1.5em 0em;
	border-radius: 0 0 15px 15px;
}

.sp-nav a {
	text-decoration: none;
	color: #333333;
	line-height: 1.4;
	font-weight: 500;
}

/*ハンバーガーがクリックされたら上からスライド*/
.open .sp-nav {
	top: 0;
}


/* 
black-bg(ハンバーガーメニュー解除用bg)
=================================== */
.black-bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 5;
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s;
	cursor: pointer;
	z-index: 100;
}

/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
	opacity: 0.3;
	visibility: visible;
}

@media (max-width: 768px) {
	.hamburger {
		right: 15px;
		top: 7px;
	}

	.sp-nav {
		padding: 2em 0.1em 0em;
        height: 12vh;
	}
}

/* ========== お悩み ========== */
.onayami img {
    margin: 0;
}


/* ========== お悩み ========== */
.point {
    border: 5px dotted #b4dbe7;
    border-radius: 10px;
    padding: 0 3%;
}

/* ========== 比較表（.rankTable〜） ========== */
.table-section {
    padding: 0;
}
.rankTable {
    overflow-x: scroll;
    border: 5px solid #c8e9f3;
    margin-bottom: 10px;
    margin-top: 14px;
    font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.rankTable table {
    width: 880px;
    text-align: center;
    line-height: 1.2;
}

.rankTable th {
    position: sticky;
    width: 20px;
    padding: 4px 0px 4px;
    background-color: #4ba5c7;
    color: #fff;
    left: 0;
    border-bottom: 1px solid #d0d0d0; /* 少し濃く */
    font-size: 9px;
}

.rankTable td {
    width: auto;
    border-bottom: 1px solid #d6d6d6; /* 少し濃く */
    border-top: none;
    padding: 8px 3px 8px;
    font-size: 14px;
    position: relative;
    vertical-align: middle;
    border-right: 1px dotted #ccc;
    background-color: #fff;
    font-weight: bold;
}

.rankTable td:last-child {
    border-right: none;
}

.rankTable tr th+td {
    background-color: #fdffe4;
}

.rankTable table th {
    width: 19.0%;
    font-size: 12px;
}

/* 横線（行境界）を実線＆少し濃く */
.rankTable table tr {
    border-top: 1px solid #bfbfbf;
}
.rankTable table tr:first-child {
    border-top: 1px solid #ffffff;
}

.rankTable tr {
    border-bottom: 1px solid #cfcfcf;
}
.rankTable tr:last-child {
    border-bottom: none;
}

.rankTable tr:last-child td {
    border-bottom: none;
    padding: 14px 1px 17px;
}

.crown{
    width: 30%;
    height: auto;
    margin: 20%;
    margin-left: 30%;
    margin-top: 0%;
    margin-bottom: 2px;
    position: absolute;
    top: 5%;
    right: -28%;
}

.star-rating {
    position: relative;
    display: inline-block;
    font-size: 30px; /* 星の大きさ */
    color: #ccc;    /* 空の星の色（グレー） */
}

.star-rating::before {
content: "★★★★★";
}

.star-rating-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #ffcc00; /* 塗りつぶす星の色（黄色） */
white-space: nowrap;
/* ↓ ここで評価を調整（4.7なら 4.7 / 5 = 94%） */
width: 94%; 
}

@media screen and (max-width:768px) {
    .rankTable table {
        width: 710px;
    }

    .rankTable {
        overflow-x: scroll;
    }

    .rankTable th {
        padding: 2px 0px 2px;
        font-size: 7px;
    }

    .rankTable td {
        padding: 8px 1px 8px;
        font-size: 11px;
    }
}

.rankTable table th {
    vertical-align: middle;
    width: 7.0%;
    z-index: 88;
}

img.table_icon {
    width: 80%;
    margin-top: 2px;
}

.sogood {
    font-size: 33px;
    color: #ff4a1d;
}

.good {
    font-size: 32px;
    color: #ffbb00;
    font-weight: normal;
}

.soso {
    font-size: 32px;
    color: #1bb3ff;
    font-weight: normal;
}

.bad {
    font-size: 35px;
    font-weight: 300;
    color: #747474;
}

a.tbl_a01{
    color: #5c1200;
    font-weight: bold;
    font: 11px/1.2 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

a.t_btn{
    text-decoration: none;
    color: #fff;
    font: 11px/1.2 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    background: #FF9F00;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 6px 0 #ce8307;
    font-weight: bold;
}

td.pb10{
    padding: 20px 0 25px;
}

a.t_btn02{
    text-decoration: none;
    color: #fff;
    font: 11px/1.2 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    background: #3dbb00;
    padding: 10px;
    border-radius: 10px;
    margin: 0 7%;
    box-shadow: 0 6px 0 #226800;
    display: block;
    font-weight: bold;
}

.star-rating {
    position: relative;
    display: inline-block;
    font-size: 18px; /* 表に合わせて少し小さめに調整 */
    color: #ccc;
    letter-spacing: 2px; /* 星の間隔を少し広げると見やすい */
}

.star-rating::before {
    content: "★★★★★";
}

.star-rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffcc00;
    white-space: nowrap;
}


 /* ========== スライダーのスタイル ========== */ 
/* スライダー全体の枠 */
.slider {
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
}

/* 画像のサイズ調整 */
.slider img {
    width: 100%;
    height: auto;
    display: block;
}

/* 矢印（左右）を少し見やすくする（任意） */
.slick-prev:before, .slick-next:before {
    color: #000 !important; /* 矢印の色を黒に（デフォルトは白で見えにくい） */
}
.swiper-button-next, .swiper-button-prev {
    color: #4ba5c7 !important;
}
:root {
    --swiper-navigation-size: 28px !important;
}


/* ========== CTA ========== */ 
.cta a {
    background-color: #42bb26;
    border-radius: 7px;
    padding: 15px;
    box-shadow: 0 5px 0 #2a8a27;
    padding: 15px;
    display: block;
    width: 95%;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    margin: 1.5rem 0;
}
.cta_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.cta_inner .left_image {
    margin-right: 5px;
}
.cta_inner .right_image {
    position: absolute;
    right: 0;
}
.cta_inner .right_image img {
    width: 70%;
}
@media screen and (max-width:768px) {
    .cta a {
        width: auto;
    }
    .cta_txt {
        font-size: 1rem;
    }
    .cta_inner .right_image img {
        width: 50%;
    }
}


/* ========== リヴェリア ========== */ 
.riveria {
    background: linear-gradient(332deg, #43b1ca, #a7e3ff);
    margin: 0 !important;
    padding: 2%;
}
.riveria_content {
    background-color: #fff;
    border: 2px solid #c5c5c5;
    border-radius: 5px;
    margin: 20px 0;
}
.riveria_inner {
    margin: 3% 2%;
}
.riveria img {
    margin: 2% 0;
}

.txt_rink {
    text-align: right;
}
.txt_rink a {
    color: #1d7aa8;
}


/* ========== 口コミ ========== */ 
.voice_container {
    background-color: #dcf1fa;
    padding: 10px;
}
.voice_ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #45b2cb;
    font-size: 1.5rem;
}
.voice_ttl img {
    width: 40px;
}

  .tab_menu,
  .tab_menu2,
  .tab_menu3 {
      z-index: 2;
      position: relative;
      width: 120px;
      margin: 0 3px 0 0;
     color:#fff;
      background-color: #9c9c9c;
      line-height: 36px;
      float: left;
      text-align: center;
      transition: all 0.2s ease;
      border: solid 2px #ccc;
      border-radius: 8px 8px 0 0;
      cursor: pointer;
      box-sizing: border-box;
  }
@media (max-width: 768px) {
  .tab_menu,
  .tab_menu2,
  .tab_menu3 {
width: 105px;
}
.tab_menu:first-of-type, .tab_menu2:first-of-type, .tab_menu3:first-of-type {
    margin: 0 5px 0 16px;
}
}
  .tab_menu:hover,
  .tab_menu2:hover,
  .tab_menu3:hover {
      color: #838383;
  }
  .tab_menu:first-of-type,
  .tab_menu2:first-of-type,
  .tab_menu3:first-of-type {
      margin: 0 5px 0 10px;
  }
  input:checked + .tab_menu,
  input:checked + .tab_menu2,
  input:checked + .tab_menu3 {
      background-color: #43b1ca;
      border-bottom: solid 2px #43b1ca;
      color:#fff;
  }
  input[name="tab_menu"],
  input[name="tab_menu2"],
  input[name="tab_menu3"] {
      display: none;
  }
  .tab_content {
      display: none;
      z-index: 1;
      clear: both;
      background-color: #fff;
      border: solid 2px #ccc;
      border-radius: 8px;
      padding: 8px;
      position: relative;
      top: -2px;
  }
  #tab_a:checked ~ #tab_a_content,
  #tab_b:checked ~ #tab_b_content,
  #tab_c:checked ~ #tab_c_content,
  #tab_d:checked ~ #tab_d_content,
  #tab_e:checked ~ #tab_e_content,
  #tab_f:checked ~ #tab_f_content,
  #tab_g:checked ~ #tab_g_content,
  #tab_h:checked ~ #tab_h_content,
  #tab_i:checked ~ #tab_i_content {
      display: block;
  }
  
.voice{
    display: flex;
    align-items: flex-start;
   font-size:0.9rem
}
.voice img{
    width: 12%;
    height: 12%;
    margin-right: 0%;
    margin-top: 4%;
}

/* 吹き出し */
.fukidashi {
    position: relative;
    display: inline-block;
    margin: 5px 0 15px 20px;  /* 左側にマージンを追加 */
    padding: 8px;
    width: calc(100% - 50px);  /* 左マージン分を引く */
    color: #1B365C;
    font-size: 12px;
    line-height: 1.4;
    background: #f7f7f7;
    border: 2px solid #1B365C;
    border-radius: 12px;  /* より大きな角丸に */
}

.fukidashi:before,
.fukidashi:after {
    content: "";
    position: absolute;
    top: 20%;
}

.fukidashi:before {
    left: -16px;
    margin-top: -5px;
    border-style: solid;
    border-width: 8px 16px 8px 0;  /* 三角形をより滑らかに */
    border-color: transparent #1B365C transparent transparent;
}

.fukidashi:after {
    left: -12px;
    margin-top: -3px;
    border-style: solid;
    border-width: 6px 13px 6px 0;
    border-color: transparent #f7f7f7 transparent transparent;
}



/* ========== CTA02 ========== */ 
.offer_ttl {
    padding:0 .4em .2em;
    border-bottom: 3px solid #49b4cd;
    background-color: #ffffff;
    color: #333333;
    font-size: 1.3rem;
}

.cta02 a {
    background-color: #ff9900;
    border-radius: 7px;
    padding: 15px;
    box-shadow: 0 5px 0 #be7302;
    display: block;
    width: 95%;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    margin: 1.5rem auto;
    text-align: center;
    position: relative;
    overflow: hidden; /* 必須：光をボタン内に収める */
    z-index: 1;
}

/* --- 滑らかな「きらん」のアニメーション --- */
.cta02 a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%; /* 幅を広げてグラデーションを滑らかに */
    height: 100%;
    /* 中央が白く、両端が透明なグラデーション */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0) 30%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 70%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* rotateより斜めカットが綺麗に見えるskewを使用 */
    animation: shiny 3.5s infinite; /* 少しゆっくりめに */
}

@keyframes shiny {
    0% {
        left: -150%;
    }
    /* 1.5秒から2.5秒の間で通り抜ける設定（待機時間を作る） */
    40% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

.cta02_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    z-index: 2; /* テキストが光に消されないように前面へ */
}

.cta02_inner .right_image {
    position: absolute;
    right: 0;
}
.cta02_inner .right_image img {
    width: 70%;
}
@media screen and (max-width:768px) {
    .cta02 a {
        width: auto;
    }
    .cta02_txt {
        font-size: 1rem;
    }
    .cta02_inner .right_image img {
        width: 50%;
    }
}


/* ========== 基本情報表 ========== */ 
.info {
    margin: 15% auto 10%;
    max-width: 550px;
    display: block;
}
/* 基本情報テーブルのスタイル */
.info-table {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
    border: 1px solid #d1d1d1;
    font-family: sans-serif;
    line-height: 1.6;
}

/* ヘッダー部分（基本情報） */
.info-table thead th {
    background-color: #c9d9f8; /* 画像に近い薄いブルー */
    color: #333;
    padding: 12px;
    font-size: 18px;
    border-bottom: 1px solid #d1d1d1;
}

/* 各行のスタイル */
.info-table th, .info-table td {
    padding: 15px;
    border-bottom: 1px solid #eeeeee;
    text-align: left;
}

/* 左側の項目ラベル */
.info-table th {
    background-color: #f9f9f9;
    width: 30%; /* 項目名の幅を固定 */
    color: #444;
    font-weight: bold;
    white-space: nowrap;
}

/* 右側の内容 */
.info-table td {
    background-color: #fff;
    color: #333;
}

/* 最後の行の線は消す */
.info-table tr:last-child th,
.info-table tr:last-child td {
    border-bottom: none;
}

/* スマホ対応：幅が狭いときに文字サイズを微調整 */
@media (max-width: 600px) {
    .info-table th, .info-table td {
        padding: 10px;
        font-size: 14px;
    }
    .info-table th {
        width: 35%;
    }
}



/* ========== Q&A ========== */ 
.qa-6 {
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
}

.qa-6 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-6 summary::before,
.qa-6 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-6 summary::before {
    color: #49b4cd;
    content: "Q";
}

.qa-6 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-6[open] summary::after {
    transform: rotate(225deg);
}

.qa-6 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-6[open] p {
    transform: none;
    opacity: 1;
}

.qa-6 p::before {
    color: #f45e81;
    line-height: 1.2;
    content: "A";
}


/* ========== 2位以下 ========== */ 
.others {
    background: linear-gradient(332deg, #a6d7e2, #dbeef7);
    margin: 0 !important;
    padding: 2%;
}
.others_content {
    background-color: #fff;
    border: 2px solid #c5c5c5;
    border-radius: 5px;
    margin: 20px 0;
}
.others_inner {
    margin: 3% 2%;
}
.others img {
    margin: 2% 0;
}



/* ========== 追従 ========== */
/* 画面下部に固定する枠 */
.fixed-footer-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 0;       /* 0にすることで、透明な壁を物理的に消す */
    height: 0;      /* 0にすることで、透明な壁を物理的に消す */
    z-index: 2147483647; /* ブラウザで設定できる最大値 */
    background: none;
    pointer-events: none; /* 念のため */
}
.fixed-footer-banner a {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: auto;
    pointer-events: auto; /* ここだけクリックを有効化 */
    cursor: pointer;
    line-height: 0; /* 余計な隙間を消す */
}

/* 画像の基本設定 */
.fixed-footer-banner img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
}

@media (max-width: 767px) {
    .fixed-footer-banner a {
        width: 170px;
    }
}


/* ==========  フッター  ========== */
footer {
    background-color: #ccc;
    margin-top: 10px;
    padding: 20px;
    text-align: center;
}
footer>a {
    color: #fff;
}