
/* TOP PAGE */

  /* アニメーション定義 */
  @keyframes fadeUp {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 55px)); /* 初期位置より少し下からスタート */
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% + 45px)); /* 最終位置へ */
    }
  }


.top__page2026{
  & .commonWrapper { padding:80px 0 80px 0; }
  & .contentTitle { font-family: 'BIZ UDPGothic', sans-serif; font-weight: 700; text-align: center; letter-spacing: 0.1em;}
  & .contentTitle::after{ margin: 0 auto;}
  & .subContentTitle { font-family: 'BIZ UDPGothic', sans-serif; font-size:24px; line-height:1.5em; margin:0 0 20px 0; padding:0.25em 1.25em; text-align:left; color:#49666a; font-weight:bold; background:#f6f6f6; position:relative; }
  & .articleContentTitle { font-family: 'BIZ UDPGothic', sans-serif; font-size:18px; line-height:1.5em; margin:0 0 1em 0; padding:0 1.25em; text-align:left; color:#49666a; font-weight:bold; position:relative; }
  & .swiper-pagination-bullet-active{ background: #567064;}
  & .swiper-pagination { width: 100%; margin-top: 36px; left: 50%;
      transform: translateX( -50%);}
  & .swiper-pagination-bullet {margin: 0 4px;}

  & #mainSlide{ background: #FFFBE3;}
  & #mainSlide .mv_swiper{ max-height: 884px;}
  & #mainSlide .swiper-slide > img { width:100%; height:auto; }

  & #mainSlide .mainCopy { width: 51vw; top: 46%; left: 50%; transform: translateX(-50%); z-index: 10; }
  & #mainSlide .emblem{ width: 27.9vw; right: 80px; bottom: 40px; z-index: 10;}
  & #mainSlide .emblem li{ flex-basis: calc((100% - 5%)/2);} 
  & #mainSlide .emblemText { text-align: right; margin-right: 80px; font-size: 12px; }
  & #mainSlide .swiper-slide { transition: opacity 0.5s ease; opacity: 0.5;}
  & #mainSlide .logo_60th{ position: absolute; width:13.22%; height: 10.6%; top: 19.4%; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0; }
  & #mainSlide .logo_60th.loaded { animation: fadeUp 1s ease-out forwards; }

  @media screen and (max-width:767px) {
  & .commonWrapper { padding:50px 0 50px 0; }
  & .swiper-pagination{ width: 100%; margin-top: 15px;}

  /* TOP PAGE */
  & #mainSlide .mv_swiper{ max-height: 90vh;}
  & #mainSlide .mainCopy { width: 72vw; }
  & #mainSlide .swiper-container,
  & #mainSlide .swiper-slide,
  & #mainSlid .mainSlidelBox,
  & #mainSlide .swiper-slide figure{ height: 90vh;}
  & #mainSlide .swiper-slide figure > img { object-fit: cover; width: 100%; height: 90vh;}
  & #mainSlide .logo_60th { width: 30%; top: 45vw;}
  &  #mainSlide .emblem{ width: 59.46vw; right: 10px;}
  &  #mainSlide .emblem li{ flex-basis: calc((100% - 10px)/2);}
  &  #mainSlide .emblemText{ margin-right: 0; font-size: 10px;}
  &  #mainSlide .logo_60th { width: 100px; height: auto; top: 29vh;}

  }

  /* アニメーション定義 */
  @keyframes fadeUp {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 55px)); /* 初期位置より少し下からスタート */
    }
    100% {
      opacity: 1;
      transform: translate(-50%, calc(-50% + 45px)); /* 最終位置へ */
    }
  }

  & #bnrSlide{ background: #fffbe3; overflow: hidden;}
  & #bnrSlide .swiper-button-prev, & #bnrSlide .swiper-button-next { top:50%; }
  & #bnrSlide .playBtn { right:1.5em; font-size: 14px; }
  & #bnrSlide .pauseBtn { right:0.25em; font-size: 14px; }
  & .pauseBtn { right:0.25em; font-size: 14px; }
  & #bnrSlide .swiper-button-prev, #bnrSlide .swiper-button-next{ width: 48px; height: 48px; background-size: 48px 48px; top: 50%; margin-top: -24px;}
  & #bnrSlide .swiper-button-prev,
  & #bnrSlide .swiper-container-rtl .swiper-button-next { background-image: url("/assets/img/top/mv_back.png"); left: -4px; right: auto;}
  & #bnrSlide .swiper-button-next,
  & #bnrSlide .swiper-container-rtl .swiper-button-prev { background-image: url("/assets/img/top/mv_next.png"); right: -4px; left: auto;}
  & #bnrSlide .swiperBtn { /* color: #999; */ color: #ccc; position: absolute; top:100%; cursor: pointer; display: block; z-index: 20;}
  & #bnrSlide .eventBnrBox{ aspect-ratio: 5/8; overflow: hidden;}
  & #bnrSlide .eventBnrBox img{ object-fit: cover; transition: all ease-in-out 0.3s; max-width: 100%; max-height: 100%;}
  & #bnrSlide .eventBnrBox img:hover{ opacity: 0.8; transition: all ease-in-out 0.3s;}
  & #bnrSlide .swiperBtn.active,
  & #bnrSlide .swiperBtn:hover { color: #FFF; }
  & #bnrSlide .swiper-pagination-bullet-active { opacity: 1;  }
  & #bnrSlide .readMoreBox{ margin-top: 56px;}
  & #eventBnrBox{ padding-top: 90px;}

  @media screen and (min-width:768px) {
    & a:hover .eventBnrBox img { transition: none; filter: contrast(100%);}
    & #bnrSlide .readMoreBox{ margin-top: 88px;}
  }

  @media screen and (max-width:768px) {
    & #eventBnrBox{ padding-top: 50px;}
    & #bnrSlide.content{ padding:0;}
    & #bnrSlide .swiper-button-prev, & #bnrSlide .swiper-button-next{ width: 30px; height: 30px; background-size: 30px 30px;}
    & #bnrSlide .swiper-button-prev,
    & #bnrSlide .swiper-container-rtl .swiper-button-next { left: 10px; right: auto;}
    & #bnrSlide .swiper-button-next,
    & #bnrSlide .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto;}
  }

  & #adMovie { margin: 80px auto 80px auto; height: calc( 100% - 160px); }
  & #adMovie .movieBox { position: relative; height: 100%; width: 100%; z-index: 2;}
  & #adMovie .movieBox #player { position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 2; }
  & #adEvent { margin: 80px auto 80px auto; height: calc( 100% - 160px);}
  & #adEvent .reserveLink { display: block; color: #fff; background: #f90; text-align: center; font-size: 24px; line-height: 1.2; padding: 0.5em 0; text-decoration: none; margin: 20px 0 0 0;}

  /* SALES */
  & #sales{ background: #E0F1F8;}
  & #sales .box{ text-align: center;}
  & #sales .salesTitle{ position: relative; display: inline-block; width: auto; padding: 18px 3em; background: #fff; font-size: clamp( 16px , 2vw , 26px); border-radius: 123.132px; margin: 0 auto 40px; text-align: center; font-weight: bold;  letter-spacing: 0.2em;}
  & #sales .salesTitle::before{ position: absolute; content: ""; }
  & #sales .box:not(:last-of-type){ margin-bottom: 108px;}
  & #sales .box01 .salesTitle::before{ background: url(/assets/img/top/top_sales.svg) no-repeat; background-size: cover; width: 78px; height: 66px; left: -30px; top: -23px;}
  & #sales .box02 .salesTitle::before{ background: url(/assets/img/top/top_land.svg) no-repeat; background-size: cover; width: 115px; height: 70px; left: -57px; top: -21px;}

  @media screen and (max-width:767px) {
    & #sales .box:not(:last-of-type){ margin-bottom: 58px;}
    & #sales .salesTitle{ max-width: 200px; width: 100%; padding: 7px; background: #fff; font-size: clamp( 16px , 2vw , 26px); border-radius: 100px; margin: 0 auto 40px;letter-spacing: 0.2em;}
    & #sales .box01 .salesTitle::before{ width: 47px; height: 40px; left: -11px; top: -16px;}
    & #sales .box02 .salesTitle::before{ width: 65px; height: 40px; left: -37px; top: -16px;}
  }

  /* イベント・キャンペーン情報の日付表示 */
  & .dateBox .timeStamp {  line-height:1.5; margin:0; display:inline-block; letter-spacing: 0.08em; font-weight: bold; }
  & .dateBox .timeStamp span.week{ display: inline-block; margin-right:0.5em; box-sizing: border-box; width: 28px; height: 28px; line-height: 28px; font-size: 15px; text-align: center; vertical-align: 4px;}
  & .dateBox .timeStamp span.week::before{ content: "(";}
  & .dateBox .timeStamp span.week::after{ content: ")";}
  & .dateBox .timeStamp span.month, .timeStamp span.day{ border:none;}
  & .period_Box .count_down_Box{ margin-bottom: 15px;}
  & .period_Box .count_down_Box p{ color:#fff; font-size: 12px; padding:0.5em; text-align:center; display: inline-block; line-height: 1.2;}
  & .period_Box .count_down_Box .days_left{ background: #567064; padding: 0.3em 0.5em; transform: translateY(2px); }
  & .period_Box .count_down_Box .until_today{ background: #212464; font-weight: bold;}
  & .period_Box .count_down_Box .in_session{ background: #212464; font-weight: bold;}
  & .period_Box .count_down_Box .end{ background: #B34632;}
  & .infoListBox .textBox .categoryLabel { display: inline-block; padding: 0.5em ; color: #333; font-weight: bold; font-size: 16px; transform: translateY(-1px); border:1px solid #333; background: none; margin: 0 0.25em 0.25em 0 !important; line-height: 1.2;}


  /* TOP EVENT CAMPAIGN-イベント・キャンペーン情報*/
  & #event_topInfo{ background: #FFFBE3; overflow: hidden;}
  & section[id$="topInfo"] ul{ margin-bottom: 40px;}
  & section[id$="topInfo"] ul li { display:block;}
  & section[id$="topInfo"] .thumbnailBox{margin-bottom: 0; flex-basis: auto;}
  & section[id$="topInfo"] .thumbnailBox img{ max-height: 263px; object-fit: cover;}
  & section[id$="topInfo"] .contentBox{  padding: 20px 0 0; font-family: 'BIZ UDPGothic',sans-serif;}

  & section[id$="topInfo"] .infoListBox a{ display: block;}
  & section[id$="topInfo"] .infoListBox .textBox .categoryLabel { display: inline-block; padding: 0.5em ; color: #333; font-weight: bold; font-size: 16px; transform: translateY(-1px); border:1px solid #333; background: none; margin: 0 0.25em 0.25em 0 !important; line-height: 1.2;}
  & section[id$="topInfo"] .period_Box .count_down_Box{ display: inline-block;}
  & section[id$="topInfo"] .contentBox .titleBox{ font-size: 16px; margin: 10px 0 0; letter-spacing: 0.08em; line-height: 1.8; font-weight: bold; text-align: left;}
  & section[id$="topInfo"] .timeStamp{ font-size: 14px; font-family: 'BIZ UDPGothic',sans-serif; font-weight: bold;}
  & section[id$="topInfo"] .timeStamp span.week{ width: 20px; height: 20px; line-height: 20px; font-size: 14px; vertical-align: 0;}
  & section[id$="topInfo"]  .swiper-button-prev, section[id$="topInfo"] .swiper-button-next{ margin-top: 0; width: 37px; height: 37px; background-size: 37px 37px; top: 67px; border-radius: 50%;}
   & .campaign_swiper.is-center .swiper-wrapper{ justify-content:center; }
  & section[id$="topInfo"]  .swiper-button-prev,
  & section[id$="topInfo"]  .swiper-container-rtl .swiper-button-next { background-image: url("/assets/img/top/mv_back.png"); left: -16px; right: auto;}
  & section[id$="topInfo"]  .swiper-button-next,
  & section[id$="topInfo"]  .swiper-container-rtl .swiper-button-prev { background-image: url("/assets/img/top/mv_next.png"); right: -16px; left: auto;}
  & section[id$="topInfo"]  .swiperBtn { /* color: #999; */ color: #ccc; position: absolute; top:100%; cursor: pointer; display: block; z-index: 20;}
  & section[id$="topInfo"]  .swiperBtn.active,
  & section[id$="topInfo"]  .swiperBtn:hover { color: #FFF; }
  & section[id$="topInfo"]  .swiper-pagination{ width: 100%; max-width: 1200px; bottom: -35px;}
  & section[id$="topInfo"]  .swiper-pagination-bullet-active { opacity: 1; background: #567064; }
  & section[id$="topInfo"] .readMoreBox{ margin-top: 50px;}

  @media screen and (max-width:1199px) {
    & section[id$="topInfo"]  .swiper-button-prev, section[id$="topInfo"] .swiper-button-next{ margin-top: 0; width: 4.8vw; height: 4.8vw; background-size: 4.8vw 4.8vw; top: 4.5vw; border-radius: 50%;}
  }
  @media screen and (max-width:767px) {

    /* TOP EVENT CAMPAIGN-イベント・キャンペーン情報*/
    & section[id$="topInfo"] { background: #e0f1f7;}
    & section[id$="topInfo"] .contentBox{ padding: 24px 6px 0;}
    & section[id$="topInfo"] .timeStamp{ font-size: 14px;}
    & section[id$="topInfo"] .timeStamp span.week{ font-size: 14px;}
    & section[id$="topInfo"] .swiper-button-prev, & section[id$="topInfo"] .swiper-button-next{ width: 8vw; height: 8vw; background-size: 30px 30px; top: 14.5vw; }
    & section[id$="topInfo"] .swiper-button-next{ right: -15px;}
    & section[id$="topInfo"] .swiper-button-prev{ left: -15px;}
    & section[id$="topInfo"] .swiper-container{overflow: visible;}
    & section[id$="topInfo"] ul{ margin-bottom: 30px;}
    & section[id$="topInfo"] .readMoreBox{ margin-top: 90px;}

    & #campaign_topInfo .readMoreBox{ margin-top: 55px;}

  }
  
  /* HISTORY */
  & #history .historyTit{ padding: 50px 0; background: #4F7162; color: #fff; font-size: clamp( 18px , 3.3vw , 26px); text-align: center; line-height: 1.5;}
  & #history .historyTit span{ display: inline-block; border-bottom: 1px solid #fff; margin-bottom: 1em; font-size: clamp( 14px , 2.3vw , 18px);}
  & #history .content{ max-width: 1038px; width: calc(); padding: 70px 20px 80px;}
  & #history .content .txt{ font-size: clamp( 16px , 2.6vw , 20px); margin-bottom: 30px; text-align: center;  line-height: 1.8;}
  & #history .content .logo{ max-width: 209px; margin:0 auto 30px;}
  & #history .content .grid{ display: grid;         grid-template-columns: 1fr 1fr; column-gap: 30px; }
  & #history .content li{ border-radius: 10px; width: 100%; min-height: 248px; overflow: hidden; transition: all 0.3s;}
  & #history .content li:hover{ opacity: 0.6; transition: all 0.3s;}
  & #history .content .about{ background: url(/assets/img/top/top_history01.png) no-repeat;}
  & #history .content .ayumi{ background: url(/assets/img/top/top_history02.png) no-repeat;}
  & #history .content li a{ display: flex; height: 100%; width: 100%; text-decoration: none; color: #fff;}
  & #history .content li p{ position: relative; padding: 0.5em 1em; background: #4F7162; color: #fff; text-align: center; font-size: clamp( 16px , 2vw , 17px); margin-top: auto; width: 100%; min-height: 2.5em; display: flex; align-items: center; justify-content: center; letter-spacing: 0.08em;}
  & #history .content li p .arrow_right::before{position: absolute; right: 23px; top: 50%; transform: translateY(-50%);}
  & #history .sdgsBnr{ max-width: 700px; margin: 40px auto 0;}

  @media screen and (max-width:767px) {
    & #history .content{ padding: 28px 20px 51px;}
    & #history .historyTit{ padding: 25px 0;}
    & #history .content .grid{ column-gap: 15px; }
    & #history .content li p .arrow_right::before{ right: 10px;}
    & #history .content .about{ background: url(/assets/img/top/top_history01_sp.png) no-repeat; background-size: cover; background-position: center;}
    & #history .content .ayumi{ background: url(/assets/img/top/top_history02_sp.png) no-repeat; background-size: cover; background-position: center;}
    & #history .sdgsBnr{ margin: 30px auto 0;}
  }

  /* TOP owners VOICE */
  & #ownersVoice .swiper-button-prev,
  & #ownersVoice .swiper-container-rtl .swiper-button-next { background-image: url("/assets/img/top/mv_back.png"); left: -24px; right: auto;}
  & #ownersVoice .swiper-button-next,
  & #ownersVoice .swiper-container-rtl .swiper-button-prev { background-image: url("/assets/img/top/mv_next.png"); right: -24px; left: auto;}
  & #ownersVoice .swiper-pagination{ width: 100%; max-width: 1200px; bottom: -45px;}

  & #ownersVoice{ background: #FFFBE3;}
  & #ownersVoice  .swiper-button-prev, & #ownersVoice .swiper-button-next{ margin-top: 0; width: 37px; height: 37px; background-size: 37px 37px; top: 67px; border-radius: 50%;}
  & #ownersVoice .swiper-button-next{ right: -15px;}
  & #ownersVoice .swiper-button-prev{ left: -15px;}
  
  & #ownersVoiceBox ul li a{ text-decoration: none; color: #333;}
  & #ownersVoiceBox ul li figure{ position: relative;}
  & #ownersVoiceBox ul li .initialBox{ position: absolute; left: 0; top: 0; background: #567064; font-size: 13px; color: #fff; padding: 0.5em 1em;}
  & #ownersVoiceBox ul li .titleBox{ display: block; margin-top: 20px; font-size: 16px; font-weight: bold; text-align: center; line-height: 1.8;}
  & #ownersVoice .readMoreBox{ margin-top: 75px;}

  @media screen and (max-width:1199px) {
      & #ownersVoice  .swiper-button-prev, & #ownersVoice  .swiper-button-next{ margin-top: 0; width: 4.8vw; height: 4.8vw; background-size: 4.8vw 4.8vw; top: 4.5vw; border-radius: 50%;}
  }

  @media screen and (max-width:767px) {
    /* お客様の声 */
    & #ownersVoice .swiper-container{ overflow: visible;}
    & #ownersVoice .swiper-pagination{ margin-top: 0; bottom: -30px;}
    & #ownersVoice  .swiper-button-next , & #ownersVoice  .swiper-button-prev{ width: 8vw; height: 8vw; background-size: 30px 30px; top: 21vw; }
    & #ownersVoice  .swiper-button-next{ right: -15px;}
    & #ownersVoice  .swiper-button-prev{ left: -15px;}ç
    & #ownersVoiceBox ul li{ flex-basis: calc( ( 100% - 15px ) / 2); margin: 0 0 20px 0;}
    & #ownersVoice .readMoreBox{ margin-top: 50px;}

  }

  & #top_quality .qualityTit{ font-size: clamp( 16px , 2.3vw , 18px); margin-bottom: 25px; text-align: center;  line-height: 1.8;}
  & #top_quality .classImg{ margin: 0 auto;}
  & #top_quality .readMoreBox{ margin-top: 30px;}

  /* TOP WORKS */
  & #top_works{ background: #fffbe3;}
  & #top_works .swiper-button-prev,
  & #top_works .swiper-container-rtl .swiper-button-next { background-image: url("/assets/img/top/mv_back.png"); left: -24px; right: auto;}
  & #top_works .swiper-button-next,
  & #top_works .swiper-container-rtl .swiper-button-prev { background-image: url("/assets/img/top/mv_next.png"); right: -24px; left: auto;}
  & #top_works .swiper-pagination{ width: 100%; max-width: 1200px; bottom: -20px;}

  & #top_works  .swiper-button-prev, & #top_works .swiper-button-next{ margin-top: 0; width: 37px; height: 37px; background-size: 37px 37px; top: 67px; border-radius: 50%;}
  & #top_works .swiper-button-next{ right: -15px;}
  & #top_works .swiper-button-prev{ left: -15px;}
  & #top_works ul{ margin-bottom: 40px; }
  & #top_works li figure img{ width: 100%; object-fit: cover;
    aspect-ratio: 272/181;}
  & #top_works li a{ display: block; text-decoration: none; font-size: 16px; color: #333; text-align: center; font-family: 'BIZ UDPGothic',sans-serif; font-weight: bold; line-height: 1.8;}
  & #top_works li .name{ margin-top: 25px;}
  & #top_works .readMoreBox{ margin-top: 50px;}

  @media screen and (max-width:1199px) {
      & #top_works  .swiper-button-prev, & #top_works  .swiper-button-next{ margin-top: 0; width: 4.8vw; height: 4.8vw; background-size: 4.8vw 4.8vw; top: 4.5vw; border-radius: 50%;}
  }

  @media screen and (max-width:767px) {
    /* TOP WORKS */
      & #top_works .swiper-container{ overflow: visible;}
      & #top_works .swiper-pagination{ bottom: -35px;}
      & #top_works  .swiper-button-next , & #top_works  .swiper-button-prev{ width: 8vw; height: 8vw; background-size: 30px 30px; top: 24vw; }
      & #top_works  .swiper-button-next{ right: -15px;}
      & #top_works  .swiper-button-prev{ left: -15px;}
      & #top_works ul{ margin-bottom: 20px; }
      & #top_works li .name{margin-top: 20px;}
      & #top_works .readMoreBox { margin-top: 55px;}

  }

    /* 新着情報 */
  & #news_topInfo{ background: #fff; border-top: 9px solid #EAEAEA; }
  & #newsContent { margin:0 auto 40px auto; max-width: 920px;}
  & #newsContent ul li:not(:first-of-type){ padding-top: 40px;}
  & #newsContent ul li:not(:last-of-type){ padding-bottom: 40px; border-bottom: 2px solid rgba(86, 112, 100, 0.20);}
  & #newsContent ul li a { text-decoration:none;}
  & #newsContent ul li a .readMoreBtn { margin:10px 0 0 0; padding:0.25em 0; width:100% }
  & #newsContent .newsTxt{ margin-top: 1em; font-size: clamp( 14px , 2.2vw , 17px);}
  & #newsContent .categoryLabels{ display: inline-block;}
  & #newsContent .categoryLabel{ background: rgba(86, 112, 100, 0.80); color: #fff; padding: 0.4em 1em; margin: 0 5px 0 0; border-radius: 4px; vertical-align: 2px;}
  & #newsContent .categoryLabel.info_news{ background: #fff; color: #333; border: 1px solid #333; }
  & #newsContent .timeStamp{ display: inline-block; margin: 0.5em 0.5em 0.5em 0; font-size: clamp( 14px , 2.2vw , 17px); font-weight: normal;}
  & section#news_topInfo .readMoreBox { margin-top: 70px;}

  @media screen and (max-width:767px) {
    & #newsContent ul li:not(:first-of-type){ padding-top: 20px;}
    & #newsContent ul li:not(:last-of-type) { padding-bottom: 20px;}
    & #newsContent .articleText{ font-size: 16px;}
    & section#news_topInfo .readMoreBox { margin-top: 20px;}
    & #infoBox ul li { flex-basis:calc( ( 100% - 20px ) / 2 );}
      
  }

  /* COLUMN */
  & #mihamaVoice{ background: #E0F1F8;}
  & #mihamaVoice .columnBox .blogContents{ flex-basis: calc((100% - 30px)/2); border-radius: 5px; display: grid; grid-template-rows: auto auto 1fr; background: #fff;}
  & #mihamaVoice .columnBox .blogContents a{ text-decoration: none;}
  & #mihamaVoice .columnBox .blogContents .inner{ padding: 25px 50px;}
  & #mihamaVoice .columnBox .blogContents .columnSubTit{ position: relative; font-size: 18px; padding: 0.3em 1em; border-radius: 5px 5px 0 0 ; background: rgba(79, 113, 98, 0.80); color: #fff; text-align: center; transition: all 0.3s;}
  & #mihamaVoice .columnBox .blogContents .columnSubTit .arrow_right::before { position: absolute; right: 1em; transition: all 0.3s;}
  & #mihamaVoice .columnBox .blogContents .columnSubTit:hover{ opacity: 0.8; transition: all 0.3s;}
  & #mihamaVoice .columnBox .blogContents .columnSubTit:hover .arrow_right::before{ transform: translateX(0.5em); transition: all 0.3s;}
  & #mihamaVoice .columnBox .blogContents .columnSubTit02{ display: inline-block; font-size: 16px; margin-bottom: 22px;}
  & #mihamaVoice .columnBox .blogContents .columnSubTit02::before{ display: inline-block; margin-right: 5px; content: ""; width: 58px; height: 51px; background: url(/assets/img/top/top_mihamavoice.svg)no-repeat; background-size: cover; vertical-align: middle; }
  & #mihamaVoice .columnBox .blogContents.magazine .columnSubTit02::before{ width: 88px; height: 44px; background: url(/assets/img/top/top_magazine.svg)no-repeat;}
  & #mihamaVoice .columnBox .blogContents .blogTitle{ font-size: 14px; font-weight: normal; color: #333;}
  & #mihamaVoice .columnBox .blogContents .rowLinkBox{ padding: 0; margin: 0 auto ; padding: 22px 0 0; border-bottom: none; border-top: 1px solid #DDE2E0;}
  & #mihamaVoice .columnBox .blogContents .rowLinkBox .rowThumbnailBox{ flex-basis: 150px;}
  & #mihamaVoice .columnBox .blogContents .rowLinkBox .textBox{ flex-basis: calc(100% - 168px);}

  @media screen and (max-width:767px) {
    & #mihamaVoice .columnBox { display: block;}
    & #mihamaVoice .columnBox .blogContents:not(:last-of-type){ margin-bottom: 20px;}
    & #mihamaVoice .columnBox .blogContents .inner{ padding: 15px 24px;}
    & #mihamaVoice .columnBox .blogContents .columnSubTit02{ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
    & #mihamaVoice .columnBox .blogContents .columnSubTit02 span{ display: block; flex-basis: calc(100% - 77px);}
    & #mihamaVoice .columnBox .blogContents .columnSubTit02::before{ flex-basis: 58px;}
    & #mihamaVoice .columnBox .blogContents .rowLinkBox .textBox{ flex-basis: calc( 100% - 162px);}
    & #mihamaVoice .columnBox .blogContents.magazine .rowLinkBox .textBox{ flex-basis: 100%;}
  }

  /* SNS */
  & .snsTit{ font-size: clamp( 20px , 3.3vw , 26px); color: #567064; text-align: center; font-weight: bold; margin-bottom: 34px;}
  @media screen and (max-width:767px) {
  & .snsTit{ margin-bottom: 16px;}
  }

  /* TOP YouTube */
  & #top_youtube ul{ margin-bottom: 40px;}
  & #top_youtube ul li { height: auto; padding-bottom: 0; box-sizing: border-box;}
  & #top_youtube .movie_container { width: 100%; margin: 0 auto; }
  & #top_youtube .movie_container .youtube { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 アスペクト比を保つ */}
  & #top_youtube .movie_container .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
  & #top_youtube .readMoreBox{ margin-top: 80px;}
  & #top_youtube .swiper-button-prev,& #top_youtube .swiper-button-next{ width: 37px; height: 37px; background-size: 37px 37px; top: 50%; margin-top: -24px; transform: translateY(-50%);}
  & #top_youtube .swiper-button-prev,
  & #top_youtube .swiper-container-rtl .swiper-button-next { background-image: url("/assets/img/top/mv_back.png"); left: -24px; right: auto;}
  & #top_youtube .swiper-button-next,
  & #top_youtube .swiper-container-rtl .swiper-button-prev { background-image: url("/assets/img/top/mv_next.png"); right: -24px; left: auto;}
  & #top_youtube .swiper-pagination { margin-top: 20px;}
  & #youtubeContent:has(.no_date) .swiper-button-prev,#youtubeContent:has(.no_date) .swiper-button-next{ display: none;}

  @media screen and (max-width:767px) {
    /* TOP YOUTUBE */

    & #top_youtube .swiper-container { overflow: visible;}
    & #top_youtube .swiper-pagination { margin-top: -10px;}
    & #top_youtube  .swiper-button-next , & #top_youtube  .swiper-button-prev{ width: 8vw; height: 8vw; background-size: 30px 30px; margin-top: 0;}
    & #top_youtube  .swiper-button-next{ right: -15px;}
    & #top_youtube  .swiper-button-prev{ left: -15px;}
  }


  /* Googleレビュー埋め込み */
  & #top_reviewBox{ background: #FFFBE3; padding-top: 0;}

  & #topBnr ul li { flex-basis: calc( ( 100% - 15px) / 2); margin-top: 15px;}
  
  @media screen and (min-width:768px) {
    & #topBnr ul li a:hover {  transition:filter 0.5s linear 0s;  filter:contrast(150%)}
  }

  #popular { background: #f7f4ed; }
  & #popularLink ul { }
  & #popularLink ul li { flex-basis: calc( ( 100% - 30px ) / 3); margin: 0 0 15px 0; }
  & #popularLink ul li a { display: block; position: relative; font-size: 14px; color: #fff; text-align: center; text-decoration: none; padding: 3em 0; line-height: 1; font-size: 20px; letter-spacing: 0;}
  @media screen and (min-width:768px) {
    & #popularLink ul li a:hover { transition:filter 0.5s linear 0s;  filter:contrast(150%)}
  }

  & #popularLink ul li a .sub { font-size: 75%;}
  & #popularLink ul li:nth-of-type(1) a { background: url("/assets/img/top/bg_pickup_01.jpg") center center / cover no-repeat; }
  & #popularLink ul li:nth-of-type(2) a { background: url("/assets/img/top/bg_pickup_02.jpg") center center / cover no-repeat; }
  & #popularLink ul li:nth-of-type(3) a { background: url("/assets/img/top/bg_pickup_03.jpg") center center / cover no-repeat; }
  & #popularLink ul li:nth-of-type(4) a { background: url("/assets/img/top/bg_pickup_04.jpg") center center / cover no-repeat; }
  & #popularLink ul li:nth-of-type(5) a { background: url("/assets/img/top/bg_pickup_05.jpg") center center / cover no-repeat; }
  & #popularLink ul li:nth-of-type(6) a { background: url("/assets/img/top/bg_pickup_06.jpg") center center / cover no-repeat; }
  & #popularLink ul li a.comingSoon { cursor: inherit; pointer-events: none;}
  & #popularLink ul li a.comingSoon:before { content: ''; display: block; position: absolute; left: 0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2; }
  & #popularLink ul li a.comingSoon:after { content: 'comingsoon...' ; display: block; text-align: center; position: absolute;left: 50% !important; top:50% !important; transform: translateX(-50%) translateY(-50%); width: 100%; font-size: 12px; color: #fff; z-index: 3;}
  & #popularLink .rebuild { display: block; margin: 40px 0 0 0;}

  /* TOP CAMPAIGN */
  & #campaign_topInfo{ background: #FFFBE3;}
  & #campaign_topInfo .content{ position: relative;}
  & #campaign_topInfo  .infoListBox .textBox{ font-weight: bold; text-align: left;}

  /* TOP SEARCH */
  & #top_search { padding-top: 0; border: 12px solid rgba(79, 113, 98, 0.6); text-align: center;}
  & #top_search .content{ padding: 0 30px;}
  & #searchContent .contentTitle{ text-align: center;}
  & #searchContent .contentTitle::after{ margin: 0 auto;}
  & #searchContent ul { display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr; background: #fff;}
  & #searchContent ul li{ border: 1px solid #9F9F9F; border-radius: 6px;}
  & #searchContent ul li:hover{ opacity: 0.8;}
  & #searchContent ul li a{ display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 20px; font-family: 'BIZ UDPGothic', sans-serif; text-decoration: none;}
  & #searchContent ul li figure{ min-height: 101px; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
  & #searchContent ul li p{  margin: 0 auto; font-size: clamp( 12px , 2.3vw , 18px); margin-top: 1em; color: #333;}
  & #searchContent ul li p i{ display: inline-block;}

  @media screen and (max-width:768px) {
      & #searchContent ul { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
      & #searchContent ul li:not(:last-of-type) figure { min-height: 0; max-width: 65px;}
      & #searchContent ul li:last-of-type figure {min-height: 65px;}
      & #searchContent ul li a{ padding: 15px; display: flex; flex-wrap: wrap;}
      & #searchContent ul li figure img{ min-height: 0;}
      & #searchContent ul li p{ position: relative; display: inline-block;}
      & #searchContent ul li i{ position: absolute; right: -15px; top: 0.1em; }
  }

  /* COMING SOON */
  & #comingSoon  .contentTitle { text-align:center; }
  & #comingSoon .contentTitle::after { margin:10px auto 0 auto; }
  & #comingSoon h4{ font-size: 24px; text-align: center; font-weight: bold; margin-bottom: 20px; letter-spacing: 0.2em;}
  & #comingSoon h4:nth-of-type(2){ margin-top:30px;}
  & #comingBox ul li { flex-basis: calc( ( 100% - 20px ) / 2 ) ; }
  & #comingBox ul li .comingBox { font-size: 18px; line-height: 1.5; font-weight: bold; display: block; padding: 2em; background: #f2fbff; text-align: center;}
  & #comingBox ul li a { display: block; max-width: 11em; text-align: center; border-radius: 5px; margin: 10px auto 0 auto; font-size: 14px; background: #d44a01; color: #fff; padding: 0.5em 0; text-decoration: none;}
  & #comingBox ul li a:hover { background: #301717; color: #fff; text-decoration: none; transition: background 0.5s linear 0s;}

  @media screen and (max-width:767px) {
    /* #topBnr ul li:nth-of-type(4) { flex-basis: 100%; } */
    & #comingBox ul li { flex-basis: 100%; margin: 0 auto 20px auto;}
    & #comingSoon h4{ font-size: 4.5vw; margin-bottom:10px;}

    & #adEvent .reserveLink { font-size: 4vw;}
  }

  & #comingSoon .freeText{ font-size: 16px; margin-top: 1em;}

  /* イベントポップアップ　モーダルウィンドウ */
  & .eventPop { position: relative; z-index: 9999; }
  & .pop-content { position: fixed; right: 90px; bottom: 40px; z-index: 99999; width: 17vw; max-width: 329px; background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(100% + 40px)); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0s linear 0.45s; }
  & .pop-content.is-show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0s; }
  & .pop-content .pop-img{ width: 100%;}
  & .pop-content .pop-img img{width:100%;}
  & .pop-content .detailBox{ padding: 10px;}
  & .pop-content .txtBox p{ margin-bottom: 15px; text-align: center;}
  & .pop-content .txtBox .tit a{ text-decoration: none; color: #009944; font-size: clamp( 15px , 0.88vw , 17px); font-weight: bold; line-height: 1.5;}
  & .pop-content .txtBox .txt a{ text-decoration: none; font-size: clamp( 12px , 0.7vw , 14px);}
  & .pop-content .campaign_btn { box-sizing: border-box; width: 100%; background-color: #009944; color: #fff; border-radius: 50px; cursor: pointer; font-size: clamp( 14px , 0.7vw , 15px); font-weight:bold; text-align:center;}
  & .pop-content .txtBox .tit a:hover,& .pop-content .txtBox .txt a:hover,& .pop-content .campaign_btn:hover{ opacity: 0.8;}
  & .pop-content .campaign_btn a{ text-decoration:none; color: #fff; display: block; padding: 0.8em; width: 100%;}

  /* 表示しないチェック */
  & .pop-content .not_disp{ text-align: center; font-size: 13px;}
  & .pop-content .not_disp input{ display: inline-block; margin-right: 0.5em; }
  & .pop-content input[type="checkbox"] { position: relative; width: 13px; height: 13px; border: 1px solid #333; vertical-align: -2px; -webkit-appearance: none;    -moz-appearance: none; appearance: none;}
  & .pop-content input[type="checkbox"]:checked:before { position: absolute; top: -2px; left: 4px; transform: rotate(50deg); width: 5px; height: 9px; border-right: 2px solid #333; border-bottom: 2px solid #333; content: '';}


  /* 閉じるボタン */
  & .close { position: absolute; top: 13px; right: -13px; width: 27px; height: 27px; transform: translate(-50%, -50%);  background-color: #333; cursor: pointer; font-size: 16px; border: none;}
  & .close::before, & .close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; background: #fff;}
  & .close::before { transform: translate(-50%,-50%) rotate(45deg);}
  & .close::after { transform: translate(-50%,-50%) rotate(-45deg);}

  @media screen and (max-width:767px) {
    & .pop-content { max-width: 100%; width: 50%; bottom: 20vw;
            right: 70px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);}
    & .pop-content .pop-img{ width: 100%;}
    & .pop-content .detailBox{ padding: 10px;}
    & .pop-content .txtBox p{ margin-bottom: 0.5em;}
    & .pop-content .campaign_btn a{ padding: 0.5em; }
  }


  /* Googeレビュー　名前の非表示 */
  .ti-widget.ti-goog .ti-widget-container .ti-name { display: none;}

}


/* フローティングバナー */
.flBnr {  position: fixed; left: 0; bottom:0; width: 320px; opacity: 0.95; z-index: 2000; box-shadow: 5px 5px 0 0 rgba(0,0,0,0.05);}
.flBnr .closeBtn { position: absolute; top:0; right:0; width: 30px; height: 30px; background: #333; color: #fff; outline: none; border: none; box-shadow: none; cursor: pointer; z-index: 2001; transform: translateX(50%) translateY(-50%);}
.flBnr .closeBtn:hover { background: #ccc;}
.flBnr ul { box-sizing: border-box; padding: 10px; background: #fff;}
.flBnr ul li { flex-basis: 100%; }
.flBnr ul li a { display: block;}
.flBnr ul li a:hover { }

@media screen and (max-width:767px) {
	/* フローティングバナー */
	.flBnr { bottom: calc( 20vw + 60px); width: 80%; left: 10%;}
	.flBnr ul li { flex-basis: 50%;}
}

/* SANRIO AWARD */
#sanrioBox { margin: 0 auto 100px auto; text-align: center;}

/* TOPBNR */
#topBnr{ margin-bottom: 40px;}

/* INSTAGRAM FEED */
#instaBox { margin: 0 auto; position: relative;}
#instaBox h3 { text-align: center; margin: 0 auto 30px auto; width: 143px;}
#instaBox .followLink { display: inline-block; margin: 0; padding: 0.5em 1em; box-sizing: border-box; position: absolute; right: 10px; top:0; border: #333 solid 1px; font-size: 16px; color: #333;
text-decoration: none;
font-family: 'BIZ UDPGothic', sans-serif;}
#instaBox .followLink:hover { background: #333; color: #fff; text-decoration: none;}

@media screen and (max-width:767px) {

  #searchBnrBox{ padding-top: 10px;}
  #searchBnrBox ul li{ padding: 0;}

  #instaBox .followLink { position: static; margin:20px auto 0 auto; display: block; font-size: 16px; box-sizing: border-box;width: 190px;background: #fff;padding: 1em 0;text-align: center;display: block;border: #333 solid 1px;line-height: 1;}
    
    
  #popularLink ul li { flex-basis:100%; margin: 0 0 5px 0;}
  #popularLink ul li a { font-size: 4.5vw; padding: 1em 0;}
  .covidLink { font-size: 4vw; padding:calc(20px + 2em) 0 0.5em 0; }
  .covidLinkWrapper { background: #d44a01; margin: 0 0 0 0;}

  /* TOPBNR */
  #topBnr{ margin-bottom: 20px;}
  #topBnr ul { justify-content: space-between;}
  #topBnr ul li { flex-basis: calc( ( 100% - 10px) / 2); margin: 0 0 10px 0; }
}

#instaBox .slide { width: 162px; box-sizing: border-box; padding: 6px;}
#instaBox .slide a { display: block; position: relative; width: 100%; padding: 100% 0 0 0; overflow: hidden;}
#instaBox .slide a img { position: absolute; left: 50%; top:50%; width: 100%; height: 100%;  object-fit: cover; transform: translateX(-50%) translateY(-50%);}

@media screen and (min-width:768px) {
	a:hover img { transition:filter 0.5s linear 0s;  filter:contrast(150%)}
}

#instaBox .instagramErrorBnr { display: block; width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 0 20px;}
