@charset "utf-8";
/* CSS Document */

/*-- お知らせエリア --*/
.choi_notice{
  background-color:#FFF;
  border:solid 2px #FF0000;
  width:100%;
  max-width:1000px;
  margin:0 auto 24px;
  padding:1em;
}
.choi_notice p{
  font-weight:bold;
  line-height:1.5;
  text-align: center;
}

img{
  max-width: 100%;
}
a{
  display: inline-block;
  text-decoration: none;
}
.tss_comprehensiveHead,
.tss_footer{
    position: relative;
    z-index: 10;
}
#adminBox, .acms-admin-box{
  position: relative;
  z-index:9999;
}

.tss_wrap{
    background-color: #FCEBCA;
}
.choi_body {
    position: relative;
    padding: 0 clamp(0rem, -3.465rem + 12.95vw, 6.25rem) 56px;
    /* 0-100 428-1200 */
}
.tss_footer{
    background-color: #002855;
}


/* 背景画像固定 */
.choi_background{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.choi_background::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(252,235,202,0.44);
    z-index: 10;
}
.choi_background01 {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    animation: swich 10s ease infinite;
    z-index: 0;
    opacity: 0;
    background-image: url(../img/ph_bodybg01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.choi_background02 {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    animation: swich 10s ease infinite;
    z-index: 0;
    opacity: 0;
    background-image: url(../img/ph_bodybg02.jpg);
    background-repeat: repeat;
    background-size: cover;
    animation-delay: 5s;
}
@keyframes swich{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        z-index: 10;
    }
    100% {
        opacity: 0;
    }
}


/* キービジュアル */
.choi_keyvidual{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.choi_keyvidual::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    max-width: 1400px;
    height: 100%;
    background-image: url(../img/il_bubble.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center bottom 130px;
}
.choi_toptitle {
    max-width: 1128px;
    margin-inline: auto;
}
.choi_logo{
    max-width: 586px;
    margin-inline: auto;
}
.choi_mainimg{
    max-width: 1030px;
    margin-inline: auto;
}

/* セクション */
.choi_content_wrap{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
p.choi_content_title{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F3A100;
    border-radius: 20px 20px 0 0 ;
    position: relative;
    z-index: 10;
    padding: 0 20px;
}
p.choi_content_title img{
    object-fit: contain;
    object-position: center;
    position: relative;
    left: 0;
    top: 9px;
}
.choi_box {
    background-color: #FFFDE9;
    box-shadow: 0px 0px 10px 0px rgba(249, 102, 0, 1);
    margin-top: -20px;
    padding: 50px 36px 90px;
}
.choi_box p {
    line-height: calc(28.8/16);
}
.choi_box p:nth-last-of-type(n + 2) {
    margin-bottom: 32px;
}
span.choi_red {
    color: #FF0000;
    font-weight: bold;
}
span.choi_black {
    font-weight: bold;
}
a.choi_buy_btn{
    width: 340px;
    max-width: 100%;
    height: 54px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 57px;
    border: 3px solid #FFFFFF;
    background-image: linear-gradient(135deg, rgba(255, 187, 0, 1), rgba(255, 0, 0, 1)); 
    box-shadow: inset 0px 3px 6px 0px rgba(0, 0, 0, 0.16),0px 0px 6px 0px rgba(0, 0, 0, 0.16);
    transition: 0.3s;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: bold;
}
p.choi_video{
    max-width: 680px;
    margin: 0 auto;
    aspect-ratio: 16/9;
}
p.choi_video iframe {
    width: 100%;
    height: 100%;
}
p.choi_contact{
    line-height: calc(28.8/16);
    margin-bottom: 32px;
}
span.choi_contact_top{
    display: block;
    font-weight: bold;
}
span.choi_br{
    display: inline-block;
}


/* トップへ戻るボタン */
.tss_gotop{
    right: calc(50% - 650px);
    bottom: 70px;
    text-align: center;
}

/* 購入するボタン */
.choi_buy_fixedbtn{
    display: inline-block;
    position: fixed;
    right: calc(50% - 600px);
    bottom: 40px;
    z-index: 200;
    text-align: center;
    transition: 0.3s;
}



/*20250206add store*/
.choi_store h2{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  width: calc(100% + 100px);
  margin-left: -50px;
  margin-bottom: 40px;
  background-image: url(../img/il_tokkuri.svg), url(../img/il_tokkuri.svg);
  background-position: 70px center, right 70px center;
  background-repeat: no-repeat;
  background-color: #001D48;
}
.choi_store h2 p{line-height: normal;}
.choi_storemap{
  aspect-ratio: 300/181;
  margin-bottom: 20px;
}
.choi_storemap iframe{
  width: 100%;
  height: 100%;
}
.choi_storelist{text-align: left;}
.choi_storelist h3{
  margin-bottom: 12px;
  padding-top: 8px;
  font-weight: bold;
  color: #F3A100;
  border-top: 1px solid #F3A100;
}
.choi_storelist dl{
  display: flex;
  flex-flow: column;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 0 15px;
  height: 9em;
}
.choi_sthiroshima dl{height: 39.5em;}
.choi_storelist dl dt{
  width: 290px;
  margin-bottom: 8px;
  font-weight: bold;
}
.choi_storelist dl dd{
  height: 2.4em;
  max-width: 290px;
  line-height: 1.2;
  margin-bottom: 16px;
  font-size: 0.75rem;
}
.choi_flx3colm{
  display: flex;
  flex-wrap: wrap;
  gap: 0 15px;
}








@media screen and (min-width: 821px){
    p.choi_buy_btn:hover{
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
        transform: translateY(-0.1875em);
        /* opacity: 0.6; */
    }
    .choi_buy_fixedbtn:hover{
        opacity: 0.6;
    }
}







/* レスポンシブ */
@media screen and (max-width: 1400px) {
  .tss_gotop{
    right: 4%;
  }
  .choi_buy_fixedbtn{
    right: 7%;
  }
}

/*20250206add store*/
@media screen and (max-width: 1217px) {
  .choi_sthiroshima dl{height: 48.5em;}
  .choi_stkure dl{height: 9em;}
}
/*---*/

@media screen and (max-width: 800px) {
    .choi_notice p{font-size:0.875em;}
    .tss_body {
        padding-bottom: calc(17.5vw + 120px);
    }

    .choi_box{
        margin-top: 0px;
        padding: clamp(1.25rem, -0.907rem + 8.06vw, 3.125rem) clamp(1.25rem, -0.907rem + 8.06vw, 3.125rem) clamp(3.125rem, 0.249rem + 10.75vw, 5.625rem);
        /* 20-50 428-800 *//* 20-50 428-800 *//* 50-90 428-800 */
    }
    p.choi_content_title{
        padding: 6px 20px 0 20px;
    }
    p.choi_content_title img{
        top: 0px;
    }
    p.choi_section_txt{
        text-align: left;
        font-size: 14px;
    }
    .choi_box p:nth-last-of-type(n + 2) {
        margin-bottom: clamp(1rem, -0.151rem + 4.3vw, 2rem);
        /* 16-32 428-800 */
    }
    .choi_box p.choi_buy_btnwrap {
        margin-bottom: 32px;
    }

    p.choi_contact{
        font-size: 14px;
    }

    .tss_gotop {
        right: 3%;
        bottom:clamp(5.625rem, 2.316rem + 14.12vw, 9.375rem);
        /* 90-150 375-800 */
    }
    .choi_buy_fixedbtn {
        right: 1%;
        bottom: clamp(10.313rem, 7.555rem + 11.76vw, 13.438rem);
        /* 165-215 375-800 */
        width: min(120px, 25%);
    }



  /*20250206add store*/
  .choi_store h2{
    width: calc(100% + (clamp(1.25rem, -0.907rem + 8.06vw, 3.125rem)*2));
    height: max(48px, 7.5vw);
    margin-left: calc((clamp(1.25rem, -0.907rem + 8.06vw, 3.125rem))*-1);
    background-position: 32px center, right 32px center;
    background-size: auto 96%;
  }
  .choi_store h2 img{height: max(24px, 5.5vw);}
  .choi_storelist dl{
    flex-flow: row wrap;
    height: auto;
  }
  .choi_storelist dl dt{
    width: 100%;
    margin-bottom: 4px;
    font-size: clamp(0.875rem, 0.73rem + 0.54vw, 1rem);/*14-16 430-800*/
  }
  .choi_storelist dl dd{
    width: 100%;
    height: auto;
    font-size: clamp(0.625rem, 0.48rem + 0.54vw, 0.75rem);/*10-12 430-800*/
  }

  .choi_sthigashihiroshima,
  .choi_stmiyoshi,
  .choi_stotake{width: 100%;}
  /*---*/
}


@media screen and (max-width: 430px){
  p.choi_toptitle{
    width: 140%;
    position: relative;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
  }




  .choi_storemap{aspect-ratio: 1;}
}