/* カスタムプロパティ（CSS変数）を定義 */

:root {
    --head-color: #378df0; 
    --foot-color: #378df0;
    --main-title-color: #ffb700;
    --primary-color: #378df0; 
    --secondary-color: #f6da27;
    --recommendations-bg: #fff6e4;
    --accent-color: #efabcb; 
    --highlight-color: #ff9d00; 
    --font-color: #535353; 
    --date-font-color: #6b6b6b;
    --h1-font-color: #fff6ed;
    --text-shadow: #ff8400;
    --link-color: #0cbc47; 
    --bg-color: #f3f8fb; 
    --button-bg: #00bc42;
    --button-shadow: #378df0;
    --button-text: white;
    --button-shine: #f5ffc7; 
    --border-color: #378df0; 
    --review-bg: #ff6ff2; 
    --review-text: #ffee00;
    --star-color: #ffa600; 
    --details-border-color: #FFD700;
    --tag-bg: #fff6e4;
    --tag-border: #ff3b3b;
    --tag-text: rgb(231, 0, 0);
    --overlay: rgba(255, 255, 255, 0.333);
}

/* 共通スタイル */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

body {
    font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Meiryo","roboto","san-serif",sans-serif;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--font-color);
}

header{
    max-width: 640px;
}

header img{
        width: 100%;          
        height: auto;
        aspect-ratio: 16 / 9;       
        display: block; 
        margin: 0;
}

@media (max-width:640px) {
    body {
        font-size: 14px;
        line-height: 2;
    }
}

li {
    list-style-type: none;
  }

  ul, ol {
    padding:0px;
  }

  p{
    margin: 0;
    padding: 0;
  }

p.margin-bottom{
    margin-bottom: 0.87rem;
} 

.section-wrapper {
    display: flex;
    justify-content: center;
    margin: 0;
}

.-section {
    width: 100%;
    margin: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}


.main-section{
    width: 98%;
    display: flex;
    flex-direction: column;
    max-width: 786px;
    margin: 8px;
    padding: 0.8rem;
}



.date-time{
    width: 100%;
    max-width: 640px;
}

.date-time p{
    text-align: right;
    font-weight: 400;
    color: var(--date-font-color);
    margin-right: 24px;
    margin-top: 0;
    font-size: 0.87em;
}

.main-before p{
   text-align: center;
   font-weight: 900;
}

.main-before span{
    color: var(--tag-border);
}

h1{
    margin: 0;
}


/* h2 を中央寄せ */
h2 {
    font-size: 1.6em;
    font-weight: 900;
    text-align: center;
    color: var(--primary-color);
    line-height: 1.3;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ranking-card h2{
    color: white !important;
    font-size: 1.28em;
    font-weight: 600;
}

/* h3, h4 のデザイン */
.h3-container{
    position: relative;
    width: 100%;
}

.header3{
    font-size: 1.12em;
    font-weight: bold;
    text-align: left;
    margin-top: 1.5rem;
    position: relative;
    padding-left: 40px;
    line-height: 1.4;
}

h3 {
    border-bottom: dashed 2px var(--primary-color);
}

.-rank1{
    background-image:url(../img/rank-1.webp);
    background-repeat:no-repeat;
    background-position:0.5% center;
    background-size:contain;
    text-align:center;
    height: 40px;
}

.-rank2{
    background-image:url(../img/rank-2.webp);
    background-repeat:no-repeat;
    background-position:0.5% center;
    background-size:contain;
    text-align:center;
    height: 40px;
}

.-rank3{
        background-image:url(../img/rank-3.webp);
        background-repeat:no-repeat;
        background-position:0.5% center;
        background-size:contain;
        text-align:center;
        height: 40px;
}

.normal::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

h4 {
    font-size: 1.6em;
    font-weight: bold;
    text-align: left;
    padding-bottom: 5px;
    margin-top: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

@media (max-width: 640px) {
    h2{
        font-size: 1.3em;
    }

    h3,h4{
        font-size: 1.2em;
    }
    
}

/* ダウンロードボタン 各種*/
/* CTAメインボタン */
a.download-button._shiny {
    width: 80%;
    max-width: 640px;
    display: block;
    position: relative;
    padding: 1rem 1rem;
    border-radius: 100px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 1.55em;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
        transition: 0.3s;
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
        background-color: [object object];
    }

._pink {
    background-image: linear-gradient(180deg, rgba(255, 151, 0, 1), rgba(255, 174, 55, 1) 11%, rgba(250, 165, 41, 1) 43%, rgba(255, 206, 52, 1) 89%, rgba(219, 178, 65, 1));
}


.download-button._shiny::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: var(--button-shine);
    transition: 300ms;
    animation: shinyshiny 2.5s ease-in-out infinite;
}

.download-button._shiny:hover {
    text-decoration: none;
    color: #fff;
    -webkit-transform: translateY(3px);
    transform: scale(0.98);
    box-shadow: 0 0 rgba(0, 0, 0, 0);
}

.pekopeko {
    animation: pekopeko 2s infinite;
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}

@keyframes pekopeko {
    0% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }

    10% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }

    20% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }

    30% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }

    40% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
}

@-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; }
}

@media  (max-width: 640px){
    a.download-button._shiny {
        width: 95%;
        max-width: 420px;
        border-radius: 100px;
        font-weight: bold;
        font-size: 1.4em;
        }
}

@media  (max-width: 425px){
    h3, h4{
        font-size: 1.2em;
    }

    a.download-button._shiny {
        width: 95%;
        max-width: 320px;
        border-radius: 100px;
        margin: 4px 3px;
        }

       #ranking a.download-button._shiny {
            font-size: 1.2em;
            padding: 5px;
            }

}

/* 比較表内ボタン */
a.btn{
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  display: inline-block;
  padding: 0.8rem 0.8rem;
  cursor: pointer;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  text-align: center;
  text-decoration: none;
  color: var(--h1-font-color);
  border-radius: 0.5rem;
  background-color: var(--button-bg);
  white-space: nowrap;
  width: 95%;
  min-width: 100px;
  max-height: 52px;
}
   
  a.btn--radius {
    border-radius: 100vh;
  }
  
  .fa-position-right {
    position: absolute;
    top: calc(50% - .5em);
    right: 1rem;
  }

  .text.--text-btn{
    margin-top: 6px;
    margin-bottom: 6px;
  }

  @media  (max-width: 767px){
    a.btn{
        width: 95%;
        font-size: 0.8em;
        padding: 0.87rem 1rem;
        min-width: 100px;
    }
  }

  @media  (max-width: 420px){
    a.btn{
        min-width: 84px;
    }
  }

  @media  (max-width: 340px){
    a.btn{
        min-width: 72px;
    }
  }

/* ランキングセクション */
#ranking{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 98%;
    max-width: 768px;
}

.ranking-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background-color: var(--head-color);
    border-radius: 5px;
}

.ranking-card-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ✅ 個々のランキングカード */
.ranking-card-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
    border-radius: 5px;
    padding: 5px;
    width: 98%; 
    background-color: white;
}

/* ✅ カード内のレイアウト */
.ranking-description {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start; /* 均等配置を解除し、左寄せ */
    padding: 0;
    margin-bottom: 0;
}

.ranking-card-img img {
    margin-right: 24px;
    margin-left: 16px;
    border-radius: 13px;
    max-width: 100px;
    height: auto;
}

.ranking-card-text {
    font-size: 1.4em;
    flex-grow: 1; /* テキスト部分が残りのスペースを埋める */
    line-height: 1.6;
    margin: 3px;
    margin-left: 1rem;
    margin-bottom: 1rem;
}


.app-title{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.app-title p{
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 3px;
}

.app-title img{
    width: 100%;
    max-width: 48px;
}

.app-title span{
    font-weight: bold;
    padding-bottom: 0.1rem;
    color: var(--button-shadow)
}

.description-title{
    font-weight: bold;
    margin-bottom: 3px;
}

@media  (max-width: 767px){
    .ranking-card-img{
        width: 20%;
        margin-right: 16px;
    }

    .ranking-card-img img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }

    .ranking-card-text {
        width: 60%;
        margin-right: 3px;
        font-size: 0.87rem;
        margin-bottom: 8px;
    }

    .app-title p{
        font-size: 1.2em;
    }

    .app-title span{
        font-size: 1.2em;
    }

    #ranking .cta p{
        font-size: 1.12em;
        margin:0 0 3px 0;
    }
    #ranking .cta{
        margin: 6px;
        width: 95%;
    }
}

@media  (max-width: 425px){
    .app-title img{
        width: 20px;
    }
    .app-title span{
        font-size: 1em;
    }

    .ranking-description {
        padding: 0;
    }
}


/* 比較表セクション */
#comparison {
    width: 98%; 
    max-width: 768px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 2rem;
}

#comparison .title-container {
    text-align: center;
  }
  
  #comparison h2{
    display: inline-block; 
    position: relative; 
    font-size: 2em;
    line-height: 1.5;
    padding: 0 2rem; 
}
  
  /* 左のスラッシュ「＼」 */
  #comparison h2::before {
    content: "＼";
    position: absolute;
    left: -1.8rem; 
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 2.5rem;
  }
  
  /* 右のスラッシュ「／」 */
  #comparison h2::after {
    content: "／";
    position: absolute;
    right: -1.8rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 2.5rem;
  }


  @media  (max-width: 640px){
    #comparison h2{
        font-size: 1.7em;
        line-height: 1.4;
        padding: 0 1.2rem; 
    }

    #comparison h2::before {
        left: 3px; /* h2 の左側に配置 */
        top: 0;
        bottom: 0;
        font-size: 1.8rem;
      }

      #comparison h2::after {
        right: 3px; /* h2 の右側に配置 */
        top: 0;
        bottom: 0;
        font-size: 1.8rem;
      }
}

@media  (max-width: 350px){
    #comparison h2{
        font-size: 1.28rem;
        line-height: 1.4;
        padding: 0 1.2rem; /* スラッシュとの間隔を確保 */
    }

    #comparison h2::before {
        left: 3px; /* h2 の左側に配置 */
        top: 0;
        bottom: 0;
        font-size: 1.8rem;
      }

      #comparison h2::after {
        right: 3px; /* h2 の右側に配置 */
        top: 0;
        bottom: 0;
        font-size: 1.8rem;
      }
}

/* スクロール可能な親コンテナ */

.scrollable {

    width: 95%;

    white-space: nowrap; /* 折り返しを防ぐ */

    display: block; /* ブロック要素として扱う */

    margin-top: 32px;

}


/* テーブルの幅を自動調整 */

.comparison-table {

    min-width: 100%; /* 最低限、親の幅に合わせる */

    border-collapse: collapse;

    font-size: 1em;
    line-height: 1.2;

}



/* テーブル全体のスタイル */

table {

    border-collapse: collapse;

    table-layout: fixed;

}



.title-height{

    height: 180px;

}

.title-height a,p{
    margin: 0 !important;
}


table img {

    border-radius: 13px;

    width: 72px;
    height: auto;

}

.title .rank{
    width: 24px;
}

@media  (max-width: 425px){
    table img {

        border-radius: 13px;
    
        width: 52px;
        height: auto;
    
    }

    .title-height{

        height: 150px;
    
    }

}



/* セルの基本スタイル */

th, td {

    text-align: center;

    border: 1px solid var(--border-color);
    background-color: white;

    font-weight: bold;

    width: 30%;

}



/* セルの最小高さを設定 */

td:before {

	content: "";

	display: block;

	height: 64px;

	float: center;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;

}



td {

    position: relative;

	z-index: 0;

    font-size: 0.88em;

    white-space: normal;

}



th {

    background-color: var(--tag-bg);

    font-size: 1.4em;

}





.title{

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    place-content: center;

    inset: 0;

    z-index: 2;

    margin-top: 12px;

}



.title p{

    flex-grow: 1;

    font-size: 1.2em;

    color: var(--button-shadow);

}



.title img{

    margin-bottom: 8px;

}



.title a{

    margin-bottom: 16px;

}



.fixed01{

    position: sticky;

    top: 0;

    background-color: white;

    z-index: 3;

    border: solid 1px var(--border-color);

}



.fixed01:before{

      content: "";

      position: absolute;

      top: -1px;

      left: -1px;

      width: 100%;

      height: 100%;

      border: solid 1px var(--border-color);

}



.text, .circle, .triangle, .doublecircle{

	position: absolute;

	display: grid;

	inset: 0;

	place-content: center;

}



/* テキスト */

.text{

	z-index: 2; /* 一番上に配置 */

}



/* アイコン */

.circle, .triangle, .doublecircle {

	z-index: 1; /* セルの一つ上に重ねる */

	opacity: 0.2; /* 不透明度 */

}



/* アイコンの大きさ */

.circle svg, .triangle svg, .doublecircle svg {

	width: 56px;

	height: 56px;

}



/* ◎の色 */

.circle svg {

	fill: red;

}



/* 〇の色 */

.triangle svg {

	fill: orange;

}



/* 王冠の色 */

.doublecircle svg {
    fill: red;
}



img.rank{

    width: 48px;

    margin-bottom: 5px;

}



@media  (max-width: 640px){

    .comparison-table {

        font-weight: 100;

    }



    th {

        background-color: var(--tag-bg);

        font-size: 1em;

    }



    .title p{

        font-size: 1em;

    }



    .rank-button{

        width: 70%;

        max-width: 100px;

        font-size: 0.7rem;

        font-weight: 100;

    }


}



/* 詳細セクション */

.break{
    display: none;
}

@media (min-width: 375px){
    .break{
        display: inline;
    }
}

#details img {

    max-width: 100%;
    height: auto;

    border-radius: 8px;

    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;

}



span.details-red{

    color: var(--highlight-color);

    font-weight: bold;

}



span.details-border{

    background: linear-gradient(transparent 50%, var(--details-border-color) 50%);

    font-weight: bold;

}



.rate {

    position: relative;

    display: inline-block;

    width: 120px;

    height: 24px;

    font-size: 24px;

}



/* ★の背景（グレー） */

.rate::before {

    content: '★★★★★'; 

    position: absolute;

    display: inline-block;

    height: 24px;

    line-height: 24px;

    color: gray;

    width: 100%; /* 全体を覆う */

}



/* ★の前景（オレンジ） */

.rate::after {

    content: '★★★★★'; 

    position: absolute;

    display: inline-block;

    height: 24px;

    line-height: 24px;

    color: var(--star-color);

    overflow: hidden;

    width: calc(var(--score) * 24px);

}



/* レートのラッパー */

.rate-wrap {

    display: flex;

    width: 100%;

    padding: 5px;

    font-weight: bold;

    color: gray;

    font-size: 0.8em;

}



.num{

    margin-right: 8px;

}



.rate-rev {

    position: relative;

    display: inline-block;

    width: 80px;

    height: 16px;

    font-size: 16px;

}



/* ★の背景（グレー） */

.rate-rev::before {

    content: '★★★★★'; 

    position: absolute;

    display: inline-block;

    height: 16px;

    line-height: 16px;

    color: gray;

    width: 100%; /* 全体を覆う */

}


/* ★の前景（オレンジ） */
.rate-rev::after {
    content: '★★★★★'; 
    position: absolute;
    display: inline-block;
    height: 16x;
    line-height: 16px;
    color: var(--star-color);
    overflow: hidden;
    width: calc(var(--score) * 16px);

}


/* レートのラッパー */

.rate-wrap-rev {

    display: flex;

    width: 100%;

    padding: 5px;

    font-weight: bold;

    color: gray;

}

.num-rev{
    line-height: 16px;
    font-size: 16px;
}

@media (max-width: 640px){
    .rate {
    width: 50px;
    height: 10px;
    font-size: 10px;
}



/* ★の背景（グレー） */

.rate::before {
    height: 10px;
    line-height: 10px;
}



/* ★の前景（オレンジ） */

.rate::after {
    height: 10px;
    line-height: 10px;
    width: calc(var(--score) * 10px);

}
    
.rate-wrap {
    padding: 3px;
}

.num{
    margin-right: 3px;
}

}


.review-list {
    width: 100%;
    height: 360px;
    margin-bottom: 52px;
    display: block;
    position: relative;
  }

  .review-Container {
    width: 100%;
    height: 300px;
    padding: 0;
    overflow: hidden;
  }

  .review-Box {
    background: rgb(255, 240, 200);
    color: black;
    width: 100%;
    height: 300px;
    border-radius: 18px;
  }

  .box{
    width: 80%;
    color: black;
    margin-left: auto;
    margin-right: auto;
    padding-top: 24px;
  }

  .review-list cite {
    font-size: 0.8rem;
    color: gray;
    display: block;
    margin-top: 5px;
  }

  

  /* スライド切り換え用ラジオボタンは常に非表示 */

  .review_slide_select {

    display: none;

  }

  /* 各スライド */

  .review-slide {

    /* サイズは自由に変更してください。*/
    width: 100%;
    height: 100%;
    min-height: 300px;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
  }

  /* 前へ次へボタン */

  .review_scroll_button {

    position: absolute;

    display: block;

    height: 25px;

    width: 25px;

    /* 縦中央から20px上の位置 */

    top: 50%;

    margin-top: -20px;

  /* 上辺と右辺のみ幅5pxの枠線 */

    border-width: 5px 5px 0 0;

    border-style: solid;

    border-color: black;

    cursor: pointer;

    /* 普段はボタンはやや薄くする */

    opacity: 0.5;

    /* スライドよりも前面にする */

    z-index: 3;

  }

  /* ホバー時にボタンを強調 */

  .review_scroll_button:hover {

    opacity: 1;

  }

  /* 前へボタン */

  .rev-scroll_prev {

    left: 10px;

    /* 上辺と右辺の枠線を回転して"＜"にする */

    transform: rotate(-135deg);

  }

  /* 次へボタン */

  .rev-scroll_next {

    right: 10px;

    /* 上辺と右辺の枠線を回転して"＞"にする */

    transform: rotate(45deg);

  }

  /* スライド移動ボタンエリア */

  .rev-move_controler {

    position: absolute;

    bottom: 18px;

    width: 100%;

    text-align: center;

  }

  /* スライド移動の各ボタン */

  .rev_button_move {

    display: inline-block;

    height: 10px;

    width: 10px;

    margin: 0 2px;

    border-radius: 100%;

    cursor: pointer;

    /* 普段はやや薄くする */

    opacity: 0.5;

    /* スライドより前面にする */

    z-index: 2;

  }

  /* ホバー時はやや明るくする */

  .rev_button_move:hover {

    opacity: 0.75;

  }

  /* スライド移動ボタンの色 */

  .rev_button_move {

    background-color: black;

  }

  /* 1番目のスライド選択時 */

  /* 1番目のスライドの透明度を0にして表示する */

  .review_slide_select:nth-of-type(1):checked ~ .review-slide:nth-of-type(1) {

    opacity: 1;

  }

  /* 1番目のスライドの前へ次へボタンの領域を */

  .review_slide_select:nth-of-type(1):checked

    ~ .rev-move_controler

    .rev_button_move:nth-of-type(1) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(2):checked ~ .review-slide:nth-of-type(2) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(2):checked

    ~ .rev-move_controler

    .rev_button_move:nth-of-type(2) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(3):checked ~ .review-slide:nth-of-type(3) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(3):checked

    ~ .rev-move_controler

    .rev_button_move:nth-of-type(3) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(4):checked ~ .review-slide:nth-of-type(4) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(4):checked

    ~ .rev-move_controler

    .rev_button_move:nth-of-type(4) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(5):checked ~ .review-slide:nth-of-type(5) {

    opacity: 1;

  }

  .review_slide_select:nth-of-type(5):checked

    ~ .rev-move_controler

    .rev_button_move:nth-of-type(5) {

    opacity: 1;

  }


  @media (max-width: 640px){
    .review-list {
        width: 100%;
        height: 280px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 0px;
      }
    
      
    
      .review-Container {
        width: 100%;
        height: 260px;
        margin-right: auto;
        margin-left: auto;
      }
    
      .review-Box {
        width: 100%;
        height: 260px;
        margin-right: auto;
        margin-left: auto;
      }
    
      .box{
        width: 85%;
        height: 260px;
    }
    .review_scroll_button{
        width: 15px;
        height: 15px;
    }
  }

  @media (max-width: 420px){
    .review-list {
        height: 320px;
      }
      .review-Container {
        height: 300px !important; 
      }
      .review-Box {
        width: 98%;
        height: 300px !important;
      }
    
      .box{
        height: 300px !important;
    }
  }

  @media (max-width: 360px){
    .review-list {
        height: 380px;
      }
      .review-Container {
        height: 360px !important; 
      }
      .review-Box {
        width: 98%;
        height: 360px !important;
      }
    
      .box{
        height: 360px !important;
    }
  }

.recommendations {
    width: auto;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    background-color: var(--recommendations-bg);
    color: var(--font-color);
    border: solid 1px var(--secondary-color);
}



.recommendations dt {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--text-shadow);

}

@media (max-width: 420px){
    .recommendations dt {
        font-size: 1.2em;
    }
}

.recommendations dd {
    line-height: 1.4;
    padding: 5px 0;
    margin-left: 0;
}



.cta {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 16px;
    width: 100%;
}



.cta p{

    font-size: 1.2em;
    color: var(--highlight-color);
    font-weight: 600;
    line-height: 1.2;
}



@media (max-width: 767px){

/* 画面サイズが768px未満の場合の設定 */

.cta p{

    font-size: 1.12em;
    margin-bottom: 6px;
}

   }



.detail-card {

    display: flex;

    align-items: center;

    border: 1px solid var(--font-color);

    padding: 12px;

    background-color: var(--tag-bg);

    margin-bottom: 24px;

}





.detail-card-img img {
    border-radius: 13px;
    width: 84px;
}



.detail-card-text {
    font-size: 1.6em;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 0;
}



@media (max-width: 767px){
    .detail-card-text {
        font-size: 1.2em;
        font-weight: bold;
        margin-top: 12px;
    }
       }





.detail-card-description{
    width: 80%;
    margin-left: 24px;
}



.detail-card-tag {

    padding: 8px;

    background-color: var(--tag-border);

    color: white;

    margin-right: 8px;

    font-weight: bold;

    font-size: 0.87em;

}



.detail-card-dl-button{

    display: block;

    width: 80%;

    flex-shrink: 0;

    background-color: var(--button-bg);

    color: white;

    font-weight: bold;

    border-radius: 24px;

    padding: 8px;

    text-align: center;

    text-decoration: none;

    transition: transform 0.2s;

    margin: 8px auto;

}



.detail-card-dl-button:hover{

    transform: scale(0.98);

}



.detail-card p{

    margin-bottom: 24px;

}



@media (max-width: 640px){
    .detail-card-img{
        margin-right: 8px;
    }
    .detail-card-img img {
        width: 64px;
        margin-right: 0px;

    }

    .detail-card-tag{
        margin-right: 4px;
        padding: 4px;
    }

    .rate-wrap{
    display: flex;
    align-items: center;
    }
    

    .detail-card-dl-button{
        padding: 4px;
        font-size: 0.8em;   }
       }

.sponsored {
    color: gray;
    font-size: 0.9rem;
    text-align: center;
}

/* カルーセル全体 */
.prize-slide {
    display: flex;
    justify-content: center;
  }

  /* カルーセル内容 */
  .contains {
    /* サイズは自由に変更してください。*/
    /* 下の.slideも同じサイズにしてください。 */
    width: 100%;
    aspect-ratio: 1200/628;
    overflow: hidden;
    position: relative;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
  }

  /* スライド切り換え用ラジオボタンは常に非表示 */
  .slide_select {
    display: none;
  }

  /* 各スライド */
  .slide {
    /* サイズは自由に変更してください。*/
    /* 上の.containsも同じサイズにしてください。 */
    width: 100%;
    aspect-ratio: 1200/628;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
    display: flex;
    justify-content: center;
  }

  /* 前へ次へボタン */
  .scroll_button {
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    top: 50%; /* 縦中央から20px上の位置 */
    margin-top: -20px;
    border-width: 5px 5px 0 0;  /* 上辺と右辺のみ幅5pxの枠線 */
    border-style: solid;
    border-color: black;
    cursor: pointer;
    opacity: 0.5; /* 普段はボタンはやや薄くする */
    z-index: 3; /* スライドよりも前面にする */
  }

@media (max-width:640px) {
    .scroll_button {
        height: 20px;
        width: 20px;
      }
}


  /* ホバー時にボタンを強調 */

  .scroll_button:hover {

    opacity: 1;

  }

  /* 前へボタン */

  .scroll_prev {

    left: 15px;

    /* 上辺と右辺の枠線を回転して"＜"にする */

    transform: rotate(-135deg);

  }

  /* 次へボタン */

  .scroll_next {

    right: 15px;

    /* 上辺と右辺の枠線を回転して"＞"にする */

    transform: rotate(45deg);

  }

  /* スライド移動ボタンエリア */

  .move_controler {

    position: absolute;

    bottom: 20px;

    width: 100%;

    text-align: center;

  }

  /* スライド移動の各ボタン */

  .button_move {

    display: inline-block;

    height: 15px;

    width: 15px;

    margin: 0 2px;

    border-radius: 100%;

    cursor: pointer;

    /* 普段はやや薄くする */

    opacity: 0.5;

    /* スライドより前面にする */

    z-index: 2;

  }

  /* ホバー時はやや明るくする */

  .button_move:hover {

    opacity: 0.75;

  }

  /* スライド移動ボタンの色 */

  .button_move {

    background-color: black;

  }

  /* 1番目のスライド選択時 */

  /* 1番目のスライドの透明度を0にして表示する */

  .slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {

    opacity: 1;

  }

  /* 1番目のスライドの前へ次へボタンの領域を */

  .slide_select:nth-of-type(1):checked

    ~ .move_controler

    .button_move:nth-of-type(1) {

    opacity: 1;

  }

  .slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {

    opacity: 1;

  }

  .slide_select:nth-of-type(2):checked

    ~ .move_controler

    .button_move:nth-of-type(2) {

    opacity: 1;

  }

  .slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {

    opacity: 1;

  }

  .slide_select:nth-of-type(3):checked

    ~ .move_controler

    .button_move:nth-of-type(3) {

    opacity: 1;

  }

  .slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {

    opacity: 1;

  }

  .slide_select:nth-of-type(4):checked

    ~ .move_controler

    .button_move:nth-of-type(4) {

    opacity: 1;

  }



/* フッター */

footer {
    text-align: center;

    padding: 1.5rem;

    background-color: var(--foot-color);

    color: var(--font-color);

    font-size: 0.9em;

}



.footer-links {
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}



.footer-links a {

    color: white;

    text-decoration: none;

    margin: 0 10px;

    font-size: 1.3em;

}



.footer-links a:hover {

    text-decoration: underline;

}



/* ボタンのスマホ対応 */
#privacy-policy{
    display: block;
    width: 100%;
}

.privacy-policy h1{
    color: #008cff;
    font-size: 1.8rem;
    text-align: center;
}

.privacy-policy{
    padding: 50px;
}

.privacy-policy li{
    list-style-type: disc;
}

video{
    width: 100%;
    aspect-ratio: 16/9;
}

.video{
    text-align: center;
}


@media  (max-width: 460px){
    .privacy-policy h1{
        font-size: 1.4rem;
    }

    .privacy-policy h2{
            font-size: 1.2rem;
        }

    video{
        max-width: 320px;
        max-height: 180px;
    }

}