*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
#container{
  max-width: 100% !important;
      margin-top: 0 !important;
}
.lp_wrap{
  width: 100%;
  margin: 0 auto;
  background-color: #fceaea;
}
.lp_wrap a{
  text-decoration: none;
}
.lp_wrap img{
  width: 100%;
  height: auto;
  display: block;
}
.lp_wrap li{
  list-style-type: none;
}
.lp_wrap :where([class^="ui-"], [class*=" ui-"]){
  all: unset;
  box-sizing: border-box;

  width: auto !important;
}
.lp_wrap h2{
  background-color: #00000000;
}
@font-face {
  font-family: "MyTTF";
  src: url("../font/tw-cen-mt.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.content_wrap{
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.title{
  padding: clamp(16px, 4vw, 30px) 0;
}
.title .title_days{
  font-size: clamp(11px, 2.8vw, 12px);
  text-align: left;
  margin-bottom: clamp(12px, 3vw, 20px);
}
.title h1{
  font-size: clamp(18px, 4.5vw, 24px);
  text-align: center;
  line-height: 1.4;
}

.keyvisual_img{
  max-width: min(600px, 92vw);
  width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 30px) 0;
}

.radio .content_wrap{
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
}
.radio_ttl{
  font-family: "MyTTF", sans-serif;
  font-size: clamp(36px, 9vw, 70px);
  text-align: center;
  margin-bottom: clamp(12px, 3vw, 20px);
  margin-top: clamp(16px, 4vw, 30px);
}
.human_img{
  max-width: 360px;
  width: 100%;
  margin: 0 auto 30px;
}

.sec_ttl{
  position: relative;
  font-size: clamp(64px, 18vw, 140px);
  text-align: center;
  color: #fedfdf;
  font-family: "MyTTF", sans-serif;
  line-height: 1;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  white-space: nowrap;
}
.sec_ttl::before,
.sec_ttl::after{
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background-image: url(../img/ttl_line.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}
.sec_ttl span{
  position: absolute;
  font-size: clamp(20px, 5.5vw, 46px);
  color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 12px;
  white-space: nowrap;
}

.personality_ttl_box{
  text-align: center;
}
.personality_ttl{
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
.personality_ttl_line{
  display: inline-block;
  max-width: 485px;
  width: 100%;
  margin: auto;
  text-align: center;
}
.personality_name{
  font-size: clamp(22px, 6vw, 34px);
  text-align: center;
  color: #e1616d;
  margin: 20px auto;
  font-weight: bold;
}

.content_ttl{
  font-size: clamp(20px, 5vw, 28px);
  font-weight: bold;
  color:#242424;
  text-align: center;
  margin-bottom: clamp(20px, 5vw, 40px);
}
.content_text{
  font-size: clamp(14px, 3.8vw, 16px);
  text-align: center;
  color: #242424;
  line-height: 1.9;
  padding: 0 8px;
}

.content_list{
  display: grid;
  gap: clamp(12px, 3vw, 20px);
  margin: clamp(24px, 6vw, 50px) auto clamp(18px, 4vw, 30px);
}
.content_list li{
  background-color: #FFF;
  border-radius: 12px;
  box-shadow:
  0 0 16px rgba(111, 158, 190, 0.10);
  padding: clamp(16px, 4vw, 30px);
}

.btn_flex{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: clamp(28px, 7vw, 60px) auto clamp(60px, 12vw, 150px);
  padding: 0 8px;
}
.btn_flex li{
  text-align: center;
  width: min(90px, 20%);
}
.btn_flex li a img{
  max-width: 50px;
  width: 50px;
  margin: 0 auto;
}
.btn_flex li a p{
  color: #242424;
  text-align: center;
}

.number_navigator{
  font-size: clamp(14px, 3.8vw, 16px);
  text-align: center;
  margin-bottom: 20px;
}
.number_navigator span{
  display: block;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: bold;
  color: #e1616d;
  text-align: center;
}
.number .content_text{
  margin-bottom: 20px;
}

.number .content_list{
  text-align: center;
  margin-bottom: 30px;
}
.number .content_list .content_text{
  display: inline-block;
  margin: auto;
}
.number .content_list .content_text span{
  display: block;
  text-align: left;
}

.link_box{
  padding-bottom:  clamp(28px, 7vw, 60px);
}
.link_box li{
  max-width: min(600px, 100%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  gap: 10px;
}
.link_box li span{
  width: calc(100% / 2);
  font-size: 16px;
  color: #242424;
}
.link_box li span a{
  font-size: 16px;
  color: #242424;
  opacity: 1;
  text-decoration: underline;
}
.link_box li span a:hover{
  opacity: 0.8;
}

.info{
  background-color: #FFF;
  padding: clamp(16px, 4vw, 30px) 0;
}
.info_wrap{
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
.info_flex{
  display: flex;
  justify-content: center;
  gap: 16px;
}
.info_flex li:first-child{
  border-right: 2px solid #c5dae9;
}
.info_flex li span{
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #242424;
  margin-bottom: 20px;
}
.info_flex li:first-child span{
  color: #e1636f;
  font-size: 16px;
  font-weight: bold;
  padding-right: 30px;
}
.info_flex li:nth-child(2) span{
  padding-left: 30px;
}

/* ====== Small screens ====== */
@media (max-width: 600px){
  .sec_ttl span{
    white-space: normal;
  }

  .link_box li{
    flex-direction: column;
    align-items: flex-start;
  }
  .link_box li span{
    width: 100%;
  }

  .info_flex{
    padding: 0;
  }
  .info_flex li:first-child span{
    padding-right: 10px;
  }
  .info_flex li:nth-child(2) span{
    padding-left: 10px;
  }
}


.hm-audio-wrap{
    max-width:780px;
    margin:60px auto 30px;
  }
  .hm-audio-inner{
    background:#fff;
    border-radius:12px;
    padding:18px 16px;
  }

  .hm-audio-actions{
    display:flex;
    gap:14px;
    justify-content:center;
    align-items:center;
    margin-bottom:14px;
    flex-wrap:wrap;
  }

  .hm-btn{
    appearance:none;
    border:0;
    cursor:pointer;
    border-radius:12px;
    padding:10px 18px;
    background:#f07d8a; /* ボタンのピンク */
    color:#fff;
    font-size:16px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    gap:10px;
    box-shadow:0 1px 0 rgba(0,0,0,.05);
    user-select:none;
  }
  .hm-btn:active{ transform:translateY(1px); }
  .hm-btn:focus-visible{
    outline:3px solid rgba(240,125,138,.35);
    outline-offset:2px;
  }
  .hm-ico{
    display:inline-flex;
    background-color: #FFF;
    border-radius: 999px;

  }
  .hm-btn svg {
  color: #f07d8a; /* ピンク */
}

  .hm-bar{
    display:flex;
    align-items:center;
    gap:12px;
    background:#4a4a4a; /* 音声バーの濃いグレー */
    border-radius:6px;
    padding:10px 10px;
  }

  .hm-bar-play{
    width:26px !important;
    height:22px;
    border:0;
    border-radius:3px;
    cursor:pointer;
    background:#2f2f2f; /* 左の小さい再生ボタン */
    display:grid;
    place-items:center;
    flex:0 0 auto;
  }
  .hm-bar-play:focus-visible{
    outline:3px solid rgba(255,255,255,.35);
    outline-offset:2px;
  }

  .hm-mini-ico{
    display:block;
    width:0;height:0;
    border-style:solid;
  }
  .hm-mini-ico-play{
    border-width:6px 0 6px 10px;
    border-color:transparent transparent transparent #fff;
    margin-left:2px;
  }
  .hm-mini-ico-pause{
    width:12px;height:12px;
    border:0;
    position:relative;
  }
  .hm-mini-ico-pause::before,
  .hm-mini-ico-pause::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:4px;
    background:#fff;
    border-radius:1px;
  }
  .hm-mini-ico-pause::before{ left:1px; }
  .hm-mini-ico-pause::after{ right:1px; }

  .hm-range{
    flex:1 1 auto;
    min-width:120px;
    height:6px;
    background:transparent;
  }
  /* range track */
  .hm-range::-webkit-slider-runnable-track{
    height:6px;
    background:#6b6b6b;
    border-radius:999px;
  }
  .hm-range::-moz-range-track{
    height:6px;
    background:#6b6b6b;
    border-radius:999px;
  }
  /* thumb */
  .hm-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:14px;height:14px;
    border-radius:50%;
    background:#d9d9d9;
    border:2px solid #4a4a4a;
    margin-top:-4px;
  }
  .hm-range::-moz-range-thumb{
    width:14px;height:14px;
    border-radius:50%;
    background:#d9d9d9;
    border:2px solid #4a4a4a;
  }

  .hm-time{
    flex:0 0 auto;
    color:#fff;
    font-size:12px;
    font-variant-numeric:tabular-nums;
    opacity:.95;
    min-width:110px;
    text-align:right;
  }

  @media (max-width:480px){
    .hm-time{ min-width:96px; }
    .hm-btn{ padding:10px 14px; }
  }