@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    width: 100%;
    vertical-align: bottom;

}

a {
    text-decoration: none;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 80px;
}

body {
    font-family: "Shippori Mincho", serif;
}


/*header---------------------------*/

header {
    background: url(imges/fv-bg.png) bottom / cover;
    height: 100vh;
    position: relative;

}

header h2 {
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*wave ride--------------------------------*/

#waveride {
    background: url(imges/wave-bg.png) center / cover;
}

#waveride article {
    display: flex;
}



#waveride h2 {
    font-size: 48px;
    font-weight: normal;
    font-family: "Cinzel Decorative", serif;
    color: #0B5C6E;

}

#waveride h3 {
    font-size: 32px;
    font-weight: bold;
    color: #47C2DE;
    font-family: "Shippori Mincho", serif;
    padding-top: 24px;
}

#waveride p {
    font-size: 20px;
    font-family: "Shippori Mincho", serif;
    color: #0B5C6E;
    padding-top: 8px;
    line-height: 1.5;
    padding-bottom: 40px;
}

.sp-waveride-p p{
    display: none;
}

#waveride a {
    display: inline-block;
    background-color: #FDCC4E;
    font-family: "Cinzel Decorative", serif;
    font-size: 40px;
    font-weight: bold;
    color: #0B5C6E;
    width: 320px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 20px;


}

#waveride a:hover {
    background-color: #0B5C6E;
    color: #FDCC4E;
}

.box-1 {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 40px;
}

.circle {
    width: 150px;
    height: 150px;
    background-color: #47C2DE;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#point h2 {
    font-family: "Shippori Mincho", serif;
    color: #0B5C6E;
    text-align: center;

}

#point ul {
    display: flex;

    justify-content: space-between;


}

#point li {


    width: calc((100% - 100px) / 3);

}

/*style--------------------------------------*/

#style {
    background: #47C2DE;
    height: 990px;
}

#style h2 {
    font-family: "Shippori Mincho", serif;
    font-size: 48px;
    color: #0B5C6E;
    text-align: center;
}

#style article {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;

}

#style article>div {
    width: calc((100% - 40px) / 2);

}

.sp-style-txtbox{
    display: none;
}

.style-txtbox1 {
    width: 80%;
}

.style-txtbox2 {
    width: 90%;
}

.style-txt h3 {
    font-size: 24px;
    font-family: "Shippori Mincho", serif;
    text-align: center;
    color: #163E4D;
    padding-bottom: 24px;
    line-height: 2;
}


.style-txt p {
    font-size: 16px;
    color: #163E4D;
    font-family: "Shippori Mincho", serif;
    line-height: 2;

}

.style-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.t40 {
    font-size: 40px;
}

.t64 {
    font-size: 64px;
}

.rev {
    flex-direction: row-reverse;
}

#point h2 {
    font-size: 48px;
}

/*size-----------------------*/

#size {
    background: url(imges/size-.png) center / 90% no-repeat;



}

#size h2 {
    font-size: 48px;
    color: #0B5C6E;
    font-family: "Shippori Mincho", serif;
    text-align: center;
}

.circle h3 {

    font-size: 32px;
    color: #fff;

}

#size ul {

    margin-top: 80px;

}

#size li {
    display: flex;

    padding-bottom: 80px;
}

.size-txt {
    width: 70%;
    margin-left: 120px;
}

.size-txt p {
    font-size: 24px;
    color: #0B5C6E;
}

#size a {
    margin: 80px auto 0;
    display: block;
    background: #FDCC4E;
    color: #163E4D;
    font-family: "Cinzel Decorative", serif;
    font-size: 40px;
    border-radius: 20px;
    width: 321px;
    text-align: center;
    font-weight: bold;
}

#size a:hover {
    background-color: #163E4D;
    color: #FDCC4E;
}






/*question----------------------------*/

#question {
    background: #47C2DE;

}

#question h2 {
    font-size: 48px;
    color: #fff;
    text-align: center;
}

.accordion {
    max-width: 1000px;
    background: #fff;
}

.option {
    border-bottom: 1px solid #163E4D;
}

.option:last-child {
    border: 0;
}

.title {
    display: block;
    padding: 40px 0 40px 24px;
    position: relative;
    color: #163E4D;
    font-size: 24px;
}

.title::before,
.title::after {
    content: "";
    width: 2px;
    height: 32px;
    position: absolute;
    top: 24px;
    right: 3em;
    background: #163E4D;
}

.title::after {
    transform: rotate(90deg);
}

.content {
    max-height: 0;
    overflow: hidden;
    position: relative;
}

.content::before {
     color: #0B5C6E;
    content: "A,";
    position: absolute;
    top: 0;
    left: 1em;
    font-size: 24px;
}

.content p {
    font-size: 24px;
    color: #163E4D;
    margin-left: 50px;
    padding-bottom: 10px;
}

.toggle:checked+.title+.content {
    max-height: 300px;
}

.toggle:checked+.title::before {
    transform: rotate(90deg);
}

.toggle {
    display: none;
}

/*recommend------------------*/

.sp-slider{
    display: none;
}

#recommend {
    padding: 80px 0;
}

#recommend h2 {
    font-family: "Cinzel Decorative", serif;
    font-size: 64px;
    color: #163E4D;
    text-align: center;

}

.slideshow-box {
    display: flex;
    align-items: center;
    height: 619px;
    overflow: hidden;

}

.slideshow {
    display: flex;
    animation: loop-slide 30s infinite linear 1s both;
}

.slideshow li {
    width: 1366px;
    height: 619px;
}

@keyframes loop-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.html-css-slider_wrap{
    display: none;
}

/*footer---------------*/


footer {
    background: url(imges/footer-bg.png) bottom / cover;
    height: 100vh;
    position: relative;
}

footer h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15%;
    transform: translate(-50%, -50%);
}

@media (max-width :1024px) {
    header {
    height: 60vh;
}

.waveride-txt{
    margin-left: 40px;
}

footer {
    height: 60vh;
}

}

@media (max-width :820px){

    #point h2 {
    font-size: 40px;
}

.box-1 {
    width: 90%;
   
}

#style h2 {
    font-size: 40px;
}

#size h2 {
    font-size: 40px;
}

#question h2 {
    font-size: 40px;
}



}




@media (max-width :768px) {

    header {
    height: 60vh;
}


    header h2 {
    width: 60%;
}

    .box-1 {
        width: 60%;
    }

    .t64 {
    font-size: min(5vw,64px);
}

#waveride a {
    font-size: 32px;
    width: 90%;
    margin-bottom: 24px;
}

.waveride-img{
    width: 60%;
}

#point h2 {
    font-size: min(3.5vw,48px);
}

#style h2 {
    font-size: min(3.5vw,48px);
}

#style {
    height: 800px;
}

#size a {
    margin: 40px auto 0;
    font-size: min(4vw,40px);
    width: 30%;
}

 #size ul {

width: 80%;

margin: 80px auto 0;

}
#size h2 {
    font-size: min(3.5vw,48px);
}

.t40 {
    font-size: min(3.5vw,48px);
}

    .waveride-txt {
        width: 50%;
        margin-left: 60px;
    }

    #point li {

        width: calc((100% - 24px) / 3);
    }

    #size ul {

        width: 80%;

        margin: 80px auto;
    }

    .size-txt p {
    font-size: min(2.3vw,24px);
}

#size li {
    padding-bottom: 40px;
}

#question h2 {
    font-size: min(4vw,48px);
}

.circle {
    width: 100px;
    height: 100px;
}

.size-txt {
    width: 70%;
    margin-left: 60px;
}

footer h2 {
    width: 20%;
}

}

@media (max-width :500px){

    header {
    height: 50vh;
}

#waveride article {
    display: block;

}

 .waveride-txt {
        width: 50%;
        margin: 0 auto;
    }

    #waveride h2 {
    font-size: 36px;
    text-align: center;
}

.pc-waveride-p{
    display: none;
}

.sp-waveride-p p{
    display: block;
}

#waveride h3 {
    font-size: min(5vw,32px);
}

.container {
    padding-top: 40px;
}

#waveride a {
    display: block;
    font-size: 20px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    margin: 0 auto;
}

.waveride-img{
    margin: 0 auto;
}

#point h2 {
    font-size: 20px;
}

#point ul {
    display: block;
    margin: 0 auto;
}

 #point li {

width: 80%;

margin: 0 auto 24px;
}


#style {
    height: auto;
}

#style article {
    /* display: flex; */
    justify-content: space-between;
    margin-bottom: 40px;
}

#style article {
    display: block;
    margin-bottom: 0;
}


.style-txt h3 {
    font-size: 16px;
    padding-top: 24px;
    padding-bottom: 16px;
}

#style article>div {
    width: 100%;
}

.style-txt {
    
    margin: 0 auto;
    display: block;
}

.style-txtbox1{
    margin: 0 auto;
}

.style-img1{
    margin: 0 auto;
}

.style-img2{
    margin: 0 auto;
    padding-bottom: 24px;
}

.size-txt {
    width: 98%;
    margin-left: 0;

}



.style-txtbox1 p {
    display: none;
   
}

.sp-style-txtbox p{
    line-height: 1.5;
    padding-bottom: 24px;
    width: 90%;
    margin: 0 auto;
}

.style-txtbox p{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 24px;
}



.t64 {
    font-size: 24px;
}

#style h2 {
    font-size: 20px;
}

 .box-1 {
        width: 90%;
        margin-bottom: 24px;
    }

#size {
    background: none;
}



    #size h2 {
    font-size: 20px;
}


    #size ul {
margin: 40px auto;

}

#size li {
    display: block;
    padding-bottom: 0;
}

.size-txt p {
    font-size: 16px;
}

.circle h3 {
font-size: 24px;
}

.circle {
    margin: 0 auto;
}

.size-txt p {
    margin: 16px 0 24px 0;
}


#size a {
    margin: 20px auto 0;
    font-size: 24px;
    width: 50%;
}

#question{
    padding-bottom: 24px;
}

#question h2 {
    font-size: 20px;
}

.content::before {
    
    left: 2em;
    font-size: 16px;
}



.title::before,
.title::after {
    height: 16px;
    right: 1em;
}

.title {
    padding: 20px 0 20px 8px;
    font-size: 14px;
}


.content p {
    font-size: 16px;
}


#recommend h2 {
    font-size: 24px;
    color: #47C2DE;
}

.slideshow-box {
    display: none;

}

.html-css-slider_wrap{
    display: block;
}

.sp-slider {
display: flex;
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 500px;
  margin: 0 auto;
}

.slider-images {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide {
  position: absolute;
  top: 10%;
  right: 20%;
  max-width: 60%;
  max-height: 400px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slide.active {
  opacity: 1;
}

.slider-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #47C2DE;
    color: #fff;
    cursor: pointer;
    z-index: 10;
 
}

.prev{
    left: 10%;
}

.next{
    right: 10%;
}

.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dot{
    width: 8px;
    height: 8px;
    background: #47C2DE;
    border-radius: 50%;
}

#recommend {
    padding: 40px 0;
}



/* スライダー全体と子要素 */
.html-css-slider_wrap,
.html-css-slider_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

/* スライダー全体 */
.html-css-slider_wrap{
  position:relative; /* 操作ボタンの基準位置にする */
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:760px; /* 最大横幅。値を大きくすると全体が横へ広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border-radius:20px; /* 全体の角丸。値を大きくすると丸みが強くなる */
 
}



/* スライド選択用ラジオボタン */
.html-css-slider_input{
  position:absolute; /* 通常のレイアウトから外す */
  width:1px; /* 視覚的に隠すための横幅 */
  height:1px; /* 視覚的に隠すための高さ */
  overflow:hidden; /* 内容を表示しない */
  clip-path:inset(50%); /* 画面上から隠す */
  white-space:nowrap; /* 改行を防ぐ */
}

/* スライダー表示エリア */
.html-css-slider_area{
  position:relative; /* 操作ボタンの基準位置にする */
  padding:0 70px; /* 左右ボタンを配置するための余白 */
}

/* スライド表示枠 */
.html-css-slider_view{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  overflow:hidden; /* 表示枠の外側にあるスライドを隠す */
  border-radius:18px; /* 表示枠の角丸 */
}

/* スライド一覧 */
.html-css-slider_track{
  display:flex; /* スライドを横並びにする */
  width:300%; /* 3枚分の横幅を確保 */
  transition:transform .3s ease;
  /*
    0.3秒でスライドを移動する。
    値を大きくするとゆっくり、小さくすると速く切り替わる。
  */
}

/* 各スライド */
.html-css-slider_slide{
  display:flex; /* 内容を配置しやすくする */
  flex:0 0 calc(100% / 3); /* 3枚を同じ横幅にする */
  min-height:220px; /* スライドの最小高さ */
  padding:36px 48px; /* 上下36px・左右48pxの内側余白 */
  background:#ffffff; /* スライドの背景色 */
  flex-direction:column; /* 内容を縦方向へ配置 */
  justify-content:center; /* 内容を縦方向の中央へ配置 */
}

/* スライドタイトル */
.html-css-slider_slide-title{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:30px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* スライド本文 */
.html-css-slider_slide-text{
  margin:0; /* 外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:16px; /* 本文の文字サイズ */
  line-height:1.8; /* 本文の行間 */
}

/* 操作ボタン全体 */
.html-css-slider_controls{
  position:absolute; /* スライダー表示枠の左右へ配置 */
  top:50%; /* 上端から50%の位置 */
  right:0; /* 右端へ配置 */
  left:0; /* 左端へ配置 */
  z-index:2; /* スライドより前面へ表示 */
  display:none; /* 初期状態では非表示 */
  align-items:center; /* 縦方向を中央揃えにする */
  justify-content:space-between; /* 左右へボタンを配置 */
  transform:translateY(-50%); /* 縦方向の中央位置を調整 */
  pointer-events:none; /* ボタン以外の領域を操作対象から外す */
}

/* 左右の操作ボタン */
.html-css-slider_button{
  display:flex; /* 記号を中央へ配置する */
  align-items:center; /* 縦方向を中央揃えにする */
  justify-content:center; /* 横方向を中央揃えにする */
  flex-shrink:0; /* ボタンが縮まないようにする */
  width:52px; /* ボタンの横幅 */
  height:52px; /* ボタンの高さ */
  padding:0; /* 内側余白を削除 */
  border-radius:50%; /* ボタンを円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの記号色 */
  font-family:Arial,sans-serif; /* 記号に使用するフォント */
  font-size:30px; /* 記号のサイズ */
  font-weight:700; /* 記号を太字にする */
  line-height:1; /* 記号の行間を詰める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  pointer-events:auto; /* ボタンをクリックできるようにする */
}

/* 無効状態のボタン */
.html-css-slider_button-disabled{
  background:#cbd5e1; /* 無効状態の背景色 */
  cursor:default; /* 通常のカーソルを表示 */
}

/* 1枚目表示時の操作ボタン */
#html-css-slider-1:checked
~ .html-css-slider_area
.html-css-slider_controls-1{
  display:flex; /* 1枚目用のボタンを表示 */
}

/* 2枚目表示時の操作ボタン */
#html-css-slider-2:checked
~ .html-css-slider_area
.html-css-slider_controls-2{
  display:flex; /* 2枚目用のボタンを表示 */
}

/* 3枚目表示時の操作ボタン */
#html-css-slider-3:checked
~ .html-css-slider_area
.html-css-slider_controls-3{
  display:flex; /* 3枚目用のボタンを表示 */
}

/* 1枚目を表示 */
#html-css-slider-1:checked
~ .html-css-slider_area
.html-css-slider_track{
  transform:translateX(0); /* 最初の位置へ移動 */
}

/* 2枚目を表示 */
#html-css-slider-2:checked
~ .html-css-slider_area
.html-css-slider_track{
  transform:translateX(calc(-100% / 3)); /* 1枚分左へ移動 */
}

/* 3枚目を表示 */
#html-css-slider-3:checked
~ .html-css-slider_area
.html-css-slider_track{
  transform:translateX(calc(-200% / 3)); /* 2枚分左へ移動 */
}

/* ドットナビゲーション */
.html-css-slider_dots{
  display:flex; /* ドットを横並びにする */
  align-items:center; /* 縦方向を中央揃えにする */
  justify-content:center; /* 横方向を中央揃えにする */
  gap:10px; /* ドット同士の間隔 */
  margin-top:24px; /* スライドとの間隔 */
}

/* 各ドット */
.html-css-slider_dot{
  width:12px; /* ドットの横幅 */
  height:12px; /* ドットの高さ */
  border-radius:50%; /* ドットを円形にする */
  background:#cbd5e1; /* 通常時の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 1枚目選択時のドット */
#html-css-slider-1:checked
~ .html-css-slider_dots
label[for="html-css-slider-1"]{
  background:#2563eb; /* 選択中のドットを青色にする */
}

/* 2枚目選択時のドット */
#html-css-slider-2:checked
~ .html-css-slider_dots
label[for="html-css-slider-2"]{
  background:#2563eb; /* 選択中のドットを青色にする */
}

/* 3枚目選択時のドット */
#html-css-slider-3:checked
~ .html-css-slider_dots
label[for="html-css-slider-3"]{
  background:#2563eb; /* 選択中のドットを青色にする */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スライダー全体 */
  .html-css-slider_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* スライダー表示エリア */
  .html-css-slider_area{
    padding:0 50px; /* スマートフォンでは左右余白を小さくする */
  }

  /* 操作ボタン */
  .html-css-slider_button{
    width:42px; /* スマートフォンでのボタン横幅 */
    height:42px; /* スマートフォンでのボタン高さ */
    font-size:25px; /* スマートフォンでの記号サイズ */
  }

  /* 各スライド */
  .html-css-slider_slide{
    min-height:190px; /* スマートフォンでの最小高さ */
    padding:28px 24px; /* スマートフォンでの内側余白 */
  }

  /* スライドタイトル */
  .html-css-slider_slide-title{
    font-size:24px; /* スマートフォンでの文字サイズ */
  }

}
}