@charset "UTF-8";
/*------------------------------------------------------------
枠線各種
-------------------------------------------------------------*/
.box01 {
padding: 0.5em 1em;
margin: 1em 0;
border: double 5px #FFA500;
}
.box01 p {
margin: 0; 
padding: 0;
}
.box02 {
padding: 0.5em 1em;
margin: 1em 0;
background: #fffce9;
border: dashed 2px #ffd73a;/*点線*/
}
.box02 p {
margin: 0; 
padding: 0;
}
.box-diagonal{
position: relative;
background: linear-gradient(-45deg, #fff 25%, #90d102 25%, #90d102 50%, #fff 50%, #fff 75%, #90d102 75%, #90d102);
background-size: 10px 10px;
padding: 10px;
margin: 1em 0;
}
.box-diagonal .box-diagonal-in{
background: #FFF;
padding: 15px 20px;
}
.box01 p,.box02 p,.box-diagonal-in p{
margin-bottom: 10px!important;
}
.box01 > p:last-child,.box02 > p:last-child,.box-diagonal-in > p:last-child{
margin-bottom: 0!important;
}
/*------------------------------------------------------------
矢印アニメーション
-------------------------------------------------------------*/
.anime-arrow-b {
position: relative;
display:block;
margin:20px auto;
height:50px;
}
.anime-arrow-b .arrow {
position: absolute;
width: 60px;
height: 10px;
opacity: 0;
left:0;
right:0;
margin:auto;
transform: scale(0.3);
animation: arrow-anime-b 3s ease-out infinite;
}
.anime-arrow-b .arrow:first-child {
animation: arrow-anime-b 3s ease-out 1s infinite;
}
.anime-arrow-b .arrow:nth-child(2) {
animation: arrow-anime-b 3s ease-out 2s infinite;
}
.anime-arrow-b .arrow:before,
.anime-arrow-b .arrow:after {
position: absolute;
content: '';
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 100%;
background: #ff6f6f;
border-radius: 2px;
}
.anime-arrow-b .arrow:before {
left: 1px;
transform: skewY(30deg);
}
.anime-arrow-b .arrow:after {
right: 1px;
transform: skewY(-30deg);
}
@keyframes arrow-anime-b {
25% { opacity: 0.6;}
43% { transform: translateY(1em); opacity: 0.8;}
62% { transform: translateY(2em); opacity: 1;}
100% { transform: translateY(3em) scale(0.5); opacity: 0;}
}
/*------------------------------------------------------------
見出し上吹き出し
-------------------------------------------------------------*/
.hukidasi-h-top{
width: fit-content;
margin: 20px auto -15px;
position: relative;
padding: 4px 16px;
border-radius: 30px;
background: #59b03c;
color: #fff;
line-height: 1.3;
font-size: 16px;
}
.hukidasi-h-top:after{
content: '';
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top: 8px solid #59b03c;
}
@media screen and (max-width : 376px){
.hukidasi-h-top{
font-size: 14px;
}
}
/*------------------------------------------------------------
TOPへ戻るボタン
-------------------------------------------------------------*/
.topBtn2{
position: fixed;
width: 56px;
height: 56px;
bottom: 32px;
right: 40px;
z-index: 100;
}
.topBtn2 a{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
width: 100%;
height: 100%;
background: rgba(13,48,15,.26);
color: #fff!important;
text-decoration: none!important;
font-size: 11px;
line-height: 1.3;
transition: 0.3s;
}
.topBtn2 a:hover{
opacity: 1;
background: rgba(13,48,15,.54);
}
.topBtn2 a:before{
content: '';
display: block;
width: 14px;
height: 14px;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/11/2024y11m12d_1359274912.png) no-repeat center / contain;
}
@media only screen and (max-width: 896px){
.topBtn2{
width: 60px;
height: 60px;
bottom: 16px;
right: 16px;
}
}
@media screen and (max-width : 376px){
.topBtn2{
width: 56px;
height: 56px;
}
}
/*--------------------------------------------------------
無料pointボックス
-------------------------------------------------------*/
main#main-lower .point-box-gray{
background:#eee;
padding:20px;
}
main#main-lower .point-box-gray h3{
padding:10px 0 25px;
margin:0 0 0;
}
main#main-lower .point-box-gray h2.betanuri-h{
background: linear-gradient(to right, #1e6782, #5c8695)!important;
margin:0 0 10px!important;;
}
.point-box-gray p{
line-height: 1.9!important;
}
main#main-lower .point-box-gray p:last-of-type{
margin:0!important;
}
@media only screen and (max-width: 896px){
main#main-lower .point-box-gray{
background:#eee;
padding:15px;
}
main#main-lower .point-box-gray h3{
padding:10px 0 20px;
margin:0 0 0px;
}
}

/*--------------------------------------------------------
テキストbox
-------------------------------------------------------*/
.exclamation-box,.question-box{
box-shadow: 0 0 0 1px #e9d2da;
border-radius: 10px;
padding: 16px;
display: flex;
align-items: center;
margin: 24px 0;
}
.exclamation-box:before,.question-box:before{
content: '';
display: block;
width: 33px;
height: 33px;
border-radius: 50%;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/08/2024y08m21d_1652053474.png) no-repeat center / 6px #e395b0;
}
main#main-lower .exclamation-box p,main#main-lower .question-box p,main#main-lower .line-height-1-allP .exclamation-box p, main#main-lower .line-height-1-allP .question-box p{
width: calc(100% - 49px);
margin: 0 0 0 auto;
border-left: 1px solid #e9d2da;
padding-left: 12px;
line-height: 1.4!important;
font-size: 16px!important;
}
.question-box{
box-shadow: 0 0 0 1px #ebd9b3;
}
.question-box:before{
background: url(https://koesiru.jp/img/koesiru/uploads/2024/08/2024y08m21d_1726153335.png) no-repeat center / 12px #e3bc71;
}
main#main-lower .question-box p{
border-left-color: #ebd9b3;
}

@media only screen and (max-width: 896px){
.exclamation-box,.question-box{
margin: 22px 0;
padding: 14px;
}
main#main-lower .exclamation-box p,main#main-lower .question-box p,main#main-lower .line-height-1-allP .exclamation-box p, main#main-lower .line-height-1-allP .question-box p{
width: calc(100% - 47px);
font-size: 15px!important;
}
}

/*--------------------------------------------------------
新リストボックス
-------------------------------------------------------*/
main#main-lower .koesiru_list-wrap {
border: solid 1px #1e6782;
border-radius: 4px;
color: #1e6782;
}



main#main-lower .koesiru_list-wrap .koesiru_list-heading {
text-align: center;
font-size: 17px !important;
font-weight: bold;
padding: 10px;
background-color: #b8e8f9;
border-radius: 4px 4px 0 0;
}

main#main-lower .koesiru_list-wrap .koesiru_list-ul {
padding: 0 15px 15px 15px;
}

main#main-lower .koesiru_list-wrap .koesiru_list-li{
padding-left:30px;
}

main#main-lower .koesiru_list-wrap .koesiru_list-ttl {
position: relative;
margin-bottom: 5px;
font-size: 16px !important;
font-weight: bold;
color: #ff753f;
}

main#main-lower .koesiru_list-wrap .koesiru_list-ttl:before {
content: '';
display: block;
width: 20px;
height: 20px;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/08/2024y08m28d_1448465682.png) no-repeat center;
position: absolute;
left: -25px;
top: 2px;
}

main#main-lower .koesiru_list-wrap .koesiru_list-txt {
font-size: 14px !important;
margin-bottom: 10px !important;
}

/*--------------------------------------------------------
点線枠
-------------------------------------------------------*/
.borderDashe-o {
margin: 20px 0;
padding: 30px 20px 22px;
border: 2px dashed #ff9b00;
position: relative;
}
table + .borderDashe-o{
margin-top: 25px;
}
main#main-lower .post .iryoDietwrap .borderDashe-o .title,main#main-lower .post .borderDashe-o .title{
position: absolute;
top: -10px;
left: 20px;
background: #fff;
padding: 0 0.5em;
margin: 0;
font-size: 20px;
font-weight: bold;
line-height: 1;
border-radius: 0;
color: #333;
}
main#main-lower .post .iryoDietwrap .borderDashe-o .title:before,main#main-lower .post .iryoDietwrap .borderDashe-o .title:after,main#main-lower .post .borderDashe-o .title:before,main#main-lower .post .borderDashe-o .title:after{
display: none;
}
main#main-lower .post .iryoDietwrap .borderDashe-o p,main#main-lower .post .borderDashe-o p{
margin-bottom: 10px;
font-size: 16px;
}
main#main-lower .post .iryoDietwrap .borderDashe-o > p:last-child,main#main-lower .post .borderDashe-o > p:last-child{
margin-bottom: 0;
}
main#main-lower .post .iryoDietwrap .rank-contIn .borderDashe-o .title, main#main-lower .post .rank-contIn .borderDashe-o .title {
background: #fff3f7;
}

/*------------------------------------------------------------
縦並びランキング
-------------------------------------------------------------*/
main#main-lower article .post .contents .rank-tate_wrap{
background: #fef5ed;
padding-bottom: 30px;
border-radius: 10px;
}
main#main-lower article .post .contents .rank-tate_wrap p{
line-height: normal !important;
}
main#main-lower article .post .contents .rank-tate_title{
position: relative;
text-align: center;
padding: 15px;
background: linear-gradient(to right, #f14c14, #fe6633);
border-radius: 10px;
}
main#main-lower article .post .contents .rank-tate_title p{
color: #fff;
margin-bottom:0;
}
main#main-lower article .post .contents .rank-tate_time{
text-align: right;
margin-top: 15px;
margin-bottom: -20px;
padding-right: 10px;
font-weight: bold;
}
main#main-lower article .post .contents .rank-tate_copy{
font-size: 25px!important;
font-weight: bold;
}
main#main-lower article .post .contents .rank-tate_micro{
display: inline-block;
position: relative;
font-size: 15px!important;
}
main#main-lower article .post .contents .rank-tate_micro:before {
position: absolute;
left: -10px;
top: 0;
content: '';
width: 2px;
height: 100%;
background-color: #fff;
border-radius: 3px;
transform: rotate(-30deg);
}
main#main-lower article .post .contents .rank-tate_micro:after {
position: absolute;
right: -10px;
top: 0;
content: '';
width: 2px;
height: 100%;
background-color: #fff;
border-radius: 3px;
transform: rotate(30deg);
}
main#main-lower article .post .contents .rank-tate_title:after{
content: "";
position: absolute;
display: inline-block;
width: 30px;
height: 15px;
background: linear-gradient(90deg, #f75923 0%, #f85a24 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%);
bottom:-14px;
left: 50%;
transform: translateX(-50%);
}
main#main-lower article .post .contents .rank-tate_ul{
padding: 30px 10px 0 10px;
}
main#main-lower article .post .contents .rank-tate_li{
padding: 10px;
border: solid 2px #dbdbdb;
border-radius: 10px;
}
main#main-lower article .post .contents .rank-tate_li-top{
display: flex;
justify-content: space-between;
width: 100%;
}
main#main-lower article .post .contents .rank-tate_li-service{
margin-bottom: 0;
padding-left: 40px;
}
main#main-lower article .post .contents .rank-tate_01{
position: relative;
border: solid 3px #ffaa00;
}
main#main-lower article .post .contents .rank-tate_02{
position: relative;
}
main#main-lower article .post .contents .rank-tate_03{
position: relative;
}
main#main-lower article .post .contents .rank-tate_01:before{
content: "";
position: absolute;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/11/2024y11m13d_133600433.png) no-repeat center / 100% 100%;
width: 56.5px;
height: 70px;
top: -10px;
left: -10px;
}
main#main-lower article .post .contents .rank-tate_02:before{
content: "";
position: absolute;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/11/2024y11m13d_1335585929.png) no-repeat center / 100% 100%;
width: 56.5px;
height: 73px;
top: -10px;
left: -10px;
}
main#main-lower article .post .contents .rank-tate_03:before{
content: "";
position: absolute;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/11/2024y11m13d_1335568092.png) no-repeat center / 100% 100%;
width: 56.5px;
height: 73px;
top: -10px;
left: -10px;
}
main#main-lower article .post .contents .rank-tate_li-star{
display: flex;
align-items: center;
}
main#main-lower article .post .contents .rank-tate_li-star img{
max-height: 15px;
width: auto;
}
main#main-lower article .post .contents .rank-tate_li-service a{
font-size: 20px;
font-weight: bold;
}
main#main-lower article .post .contents .rank-tate_li-star .rank-tate_li-score{
margin-bottom: 0;
font-size: 25px;
font-weight: bold;
padding-left: 5px;
color: #e44141;
}
main#main-lower article .post .contents .rank-tate_li-bottom{
display: flex;
margin-top: 10px;
align-items: center;
}
main#main-lower article .post .contents .rank-tate_li-logo{
width: auto;
height: 40px;
border-radius: 5px;
}
main#main-lower article .post .contents .rank-tate_li-textbox{
padding-left: 30px;
font-size: 20px;
}
main#main-lower article .post .contents .rank-tate_li-textbox .rank-tate_li-text{
position:relative;
font-size: 15px;
font-weight: bold;
}
main#main-lower article .post .contents .rank-tate_li-textbox .rank-tate_li-text:last-of-type{
margin-bottom: 0!important;
}
main#main-lower article .post .contents .rank-tate_li-textbox .rank-tate_li-text:before{
content: "";
position: absolute;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/11/2024y11m13d_1412188486.png) no-repeat center / 100% 100%;
width: 20px;
height: 20px;
top: 3px;
left: -23px;
}
main#main-lower article .post .contents .rank-tate_mt0{
margin-top: 0;
}
@media screen and (min-width : 501px){
main#main-lower article .post .contents .rank-tate_li-textbox .rank-tate_li-text {
font-size: 18px;
}
main#main-lower article .post .contents .rank-tate_li-logo {
width: auto;
height: 50px;
}
main#main-lower article .post .contents .rank-tate_li-textbox {
padding-left: 50px;
}
main#main-lower article .post .contents .rank-tate_li {
padding: 15px;
}
}
@media screen and (max-width : 401px){
main#main-lower article .post .contents .rank-tate_li-service a {
font-size: 18px;
}
main#main-lower article .post .contents .rank-tate_li-star img {
max-height: 13px;
}
main#main-lower article .post .contents .rank-tate_li-star .rank-tate_li-score {
font-size: 20px;
}
main#main-lower article .post .contents .rank-tate_mt0{
margin-top: 10px;
}
}
/*------------------------------------------------------------
タイマー
-------------------------------------------------------------*/
.timer-text {
position: relative;
background: #ff2454;
border-radius: 50px;
color: #fff;
width: fit-content;
padding: 10px 20px 8px;
font-size: 18px;
box-shadow: 2px 2px 5px rgb(128 128 128 / 20%);
z-index: 2;
font-weight: bold;
letter-spacing: 1.5px;
margin:10px 0;
}
.timer-text:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid #ff2454;
border-bottom: 0;
position: absolute;
left: 25px;
bottom: -9px;
}
.timer-cont {
width: 510px;
background: #fffbd5;
padding: 35px 0 15px 70px;
font-size: 20px;
margin-top: -25px;
margin-left: 6px;
position: relative;
z-index: 1;
border-radius: 5px;
}
.timer-cont .num{
color: #ff0038;
font-size: 36px;
font-weight: bold;
}
.timer-cont .num{
margin-right: 5px;
}
.timer-cont .num ~ .num{
margin-left: 5px;
}
.timer-cont:before {
content: '';
display: inline-block;
width: 56px;
height: 38px;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/11/2024y11m11d_1348421857.png) no-repeat center / contain;
position: absolute;
left: 0;
top: 15px;
bottom: 0;
margin: auto;
border-right: 1px solid #ff2454;
}
@media only screen and (max-width: 896px) {
.timer-text{
font-size: 18px;
}
.timer-text:before{
left: 17px;
}
.timer-cont{
width: auto;
font-size: 14px;
margin-left: 0;
padding: 30px 0 14px 62px;
}
.timer-cont .num{
font-size: 30px;
}
.timer-cont:before{
width: 52px;
height: 32px;
top: 16px;
}
}
@media screen and (max-width : 391px){
.timer-text {
font-size: 16px;
}
.timer-cont .num {
font-size: 26px;
}
}
@media screen and (max-width : 376px){
.timer-cont{
padding-left: 60px;
}
.timer-cont .num {
font-size: 24px;
}
.timer-cont:before{
width: 50px;
}
.timer-text:before {
left: 16px;
}
}
@media screen and (max-width : 361px){
.timer-cont {
font-size: 13px;
}
.timer-cont .num {
font-size: 23px;
}
}

/*------------------------------------------------------------
オーバーレイ2（オレンジボタン）
-------------------------------------------------------------*/
.over-ray2 {
left: 0;
bottom: -1px;
z-index: 100;
position: fixed;
width: 100%;
box-shadow: 0 3px 8px 0 rgb(153 153 153 / 48%);
background: rgb(255 249 223 / 90%);
padding: 4px 0 6px;
}
.over-ray2 > br{
display: none;
}
.over-ray2 a{
width: 700px;
max-width: calc(100% - 20px);
margin: 0px auto 7px;
border-bottom: solid 5px #b01c00;
padding: 18px 0;
background: #ff3600;
border-radius: 10px;
position: relative;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff!important;
cursor: pointer;
text-align: center;
transition: 0.3s;
box-sizing: border-box;
overflow: hidden;
font-size: 20px;
text-decoration:none!important;
}
.over-ray2 a:after{
content: "";
width: 30px;
height: 22px;
background: url(https://koesiru.jp/img/common/design/iryou-lp-bt-icon2.png) no-repeat center / 100% 100%;
top: 0;
right: 10px;
bottom: 0;
margin: auto;
position: absolute;
}
.over-ray2 .micro-top{
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #333!important;
font-weight:bold;
}
.over-ray2 .micro-top:before{
content: '';
display: block;
width: 30px;
height: 25px;
background: url(https://koesiru.jp/img/koesiru/uploads/2024/11/2024y11m20d_1043272081.png) no-repeat center / contain;
margin:0 10px 5px 0;
}
.over-ray2 .red{
color: #ff1a4f!important;
}
.over-ray2 .micro-bottom{
text-align: center;
display: block;
color: #000000;
font-size: 14px;
}
@media only screen and (max-width: 896px){
.over-ray2 a:after{
width: 26px;
height: 20px;
}
}
/*------------------------------------------------------------
オーバーレイ2（グリーンボタン）
-------------------------------------------------------------*/
.over-bt-g .over-ray2 a{
width: 700px;
max-width: calc(100% - 20px);
margin: 0px auto 7px;
border-bottom: solid 5px #53a006;
padding: 18px 0;
background: #70bb3a;
border-radius: 10px;
position: relative;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff!important;
cursor: pointer;
text-align: center;
transition: 0.3s;
box-sizing: border-box;
overflow: hidden;
font-size: 20px;
text-decoration:none!important;
}
/*--------------------------------------------------------
縦揺れアニメーション
-------------------------------------------------------*/
.tateyure{
animation-name: tateyure;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: normal;
}
@keyframes tateyure{
50%{
transform: translateY(0);
}
62.5%{
transform: translateY(5px);
}
75%{
transform: translateY(0);
}
87.5%{
transform: translateY(5px);
}
100%{
transform: translateY(0);
}
}

/*--------------------------------------------------------
オーバーレイ用の余白設ける
-------------------------------------------------------*/
.over-footer{
padding-bottom: 120px;
}

/*------------------------------------------------------------
tableスクロールデザイン修正
-------------------------------------------------------------*/
.scroll-table-box {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
margin-bottom: 20px;
}
.scroll-table-box-in{
display:flex;
width: max-content;
padding-bottom: 24px;
}
.scroll-table-box .scroll-table-box-in table{
border-collapse: separate!important;
border-spacing: 0;
margin: 0 20px 0 0;
border-radius: 20px;
border-spacing: 0;
overflow: hidden;
border: 2px solid #f1f4f7;
width: 400px;
display: block;
background: #FFF;
}
.scroll-table-box .scroll-table-box-in table:last-child{
margin-right: 0;
}
div.scroll-table-box div.scroll-table-box-in th,div.scroll-table-box div.scroll-table-box-in td{
border: 0;
}
div.scroll-table-box div.scroll-table-box-in th{
background: none;
color: #e65160;
position: relative;
text-align: center;
font-size: 16px;
padding: 16px 16px 10px;
}
div.scroll-table-box div.scroll-table-box-in td{
padding: 16px;
}
div.scroll-table-box div.scroll-table-box-in td > *{
margin-bottom: 16px!important;
}
div.scroll-table-box div.scroll-table-box-in td > *:last-child{
margin-bottom: 0!important;
}
.scroll-table-box .scroll-table-box-in th:after{
content: '';
display: block;
width: calc(100% - 32px);
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-bottom: 2px dashed #e8ebef;
}
.scroll-table-box .td-in{
background: #eaedf2;
border-radius: 10px;
padding: 20px;
display: block;
}
.scroll-table-box table img { 
display: block;
width: 100%;
object-fit: cover;
}

@media screen and (max-width : 428px){
.scroll-table-box-in{
padding-bottom: 10px;
}
.scroll-table-box .scroll-table-box-in table{
width: 82vw;
}
}

/*--------------------------------------------------------
サムネイル
-------------------------------------------------------*/
.thumbnails-table tr:nth-of-type(2) th{
background: none!important;
padding: 0!important;
}
.rank-thumbnails {
display: flex;
justify-content: space-between;
margin: -10px 0 20px;
background: #fff;
padding: 6px 18px 18px;
border-radius: 0 0 10px 10px;
}
.rank-thumbnails img {
height: 80px;
cursor: pointer;
border: 3px solid #fddae5;
background: #fff;
}
.rank-thumbnails img.active{
border: 3px solid #ff4c84;
box-shadow:0 0 1px 1px rgb(118 118 118 / 20%);
border-radius:2px;  
}
@media only screen and (max-width: 896px){
.rank-thumbnails{
padding: 6px 12px 12px;
}
.rank-thumbnails img{
height: 50px;
}
}
@media screen and (max-width : 391px){
.rank-thumbnails img{
height: 48px;
}
}
@media screen and (max-width : 376px){
.rank-thumbnails img{
height: 46px;
}
}
@media screen and (max-width : 361px){
.rank-thumbnails img{
height: 44px;
}
}

/*--------------------------------------------------------
画像サイズサムネの幅と揃える
-------------------------------------------------------*/
.fit-thumbnailWidth{
margin-bottom: 18px!important;
}
.fit-thumbnailWidth img{
max-width: none!important;
width: calc(100% - 36px);
}
@media only screen and (max-width: 896px) {
.fit-thumbnailWidth img{
width: calc(100% - 24px);
}
}

/*--------------------------------------------------------
インサートタグ調整
-------------------------------------------------------*/
.cptxt-box{
font-size: 14px;
line-height: 1.4;
}

/*--------------------------------------------------------
ボタン色変更
-------------------------------------------------------*/
main#main-lower .kousiki-btn.ver-green{
background: #70BB3A;
box-shadow: 0 5px 0 0 #53A006;
}
.cta-link-button02.ver-green{
box-shadow: 0 2px 16px 0px rgb(57 37 37 / 58%)!important;
border-bottom: solid 5px #53A006!important;
background: #70BB3A!important;
}
main#main-lower .kousiki-btn.ver-blue{
background: #2563eb;
box-shadow: 0 5px 0 0 #0000CC;
}
.cta-link-button02.ver-blue{
box-shadow: 0 2px 16px 0px rgb(57 37 37 / 58%)!important;
border-bottom: solid 5px #0000CC!important;
background: #2563eb!important;
}

/*------------------------------------------------------------
LPアイキャッチテキスト2
-------------------------------------------------------------*/
.kosen_txt2{
position:relative;
text-align:center;
}
.kosen_txt2 .eyecatch-text {
position: absolute;
top: 124px;
left: 0;
right: 0;
margin: auto;
font-size: 56px;
width: 100%;
height: 54px;
line-height: 54px;
color: #ffffff;
font-weight: bold;
}
.kosen_txt2.clr-b .eyecatch-text{
color: #333;
}
@media only screen and (max-width: 896px){
.kosen_txt2 .eyecatch-text{
top:20vw;
font-size:32px;
height:30px;
line-height:30px;
}
}

/*------------------------------------------------------------
LP hobby-name用
-------------------------------------------------------------*/
.kosen_txt2:has(img[src="https://koesiru.jp/img/common/eyecatch/hobby-name.jpg"]) .eyecatch-text{
top: 108px;
}
@media only screen and (max-width: 896px) {
.kosen_txt2:has(img[src="https://koesiru.jp/img/common/eyecatch/hobby-name.jpg"]) .eyecatch-text{
top: 16vw;
}
}

/*--------------------------------------------------------
table追従
-------------------------------------------------------*/
.following_area{
position: fixed;
top: 0;
left: 50%;
margin-left: -305px;
width: 610px;
z-index: 2;
}
.following_area table{
background: #fff;
}
@media only screen and (max-width: 896px){
.following_area{
width: calc(100vw - 20px);
left: 10px;
margin-left: 0;
}
}

/*--------------------------------------------------------
LP検索結果調整
-------------------------------------------------------*/
.k-searchresults{
background: #fff;
padding: 20px;
margin-top: 10px;
}
.k-searchresults > h2:first-child{
margin-top: 0!important;
}
@media only screen and (max-width: 896px){
.k-searchresults{
padding: 10px;
margin-top: 0;
}
}

/*--------------------------------------------------------
LP　ランキングに影つける
-------------------------------------------------------*/
.iryoDietwrap .rank-contIn{
box-shadow: 0 0 5px rgba(0,0,0,40%) ,0 3px 2px rgba(0,0,0,30%);
}


/*--------------------------------------------------------
スライダーアニメーション(ループ)
-------------------------------------------------------*/

.lp-slideItem-box {
display: flex;
overflow: hidden;
background:#f8f8f8;
padding:5px 0;
margin:0 auto 50px;
}
.lp-slideItem-box ul{
display: flex;
-webkit-animation: loop-slide 25s infinite linear 1s both;
animation: loop-slide 25s infinite linear 1s both;
margin:0;
padding:0;
}
.lp-slideItem-box ul li{
width: 150px;
margin:0 5px 0 0;
padding:5px;
list-style:none;
text-align: center;
background:#FFF;
}
.lp-slideItem-box ul li img{
width:100%;
height:55px;
object-fit:cover;
text-align: center;
}
.lp-slideItem-box ul li span.lsb-t{
display:block;
font-weight:bold;
font-size:16px;
text-align: center;
color:#ff2828;
margin:5px 0 0;
}

@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


/*--------------------------------------------------------
LP　ランキング4位～20位
-------------------------------------------------------*/
main#main-lower .iryoDietwrap div.rank-cont.no4 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2024/10/2024y10m21d_1021508395.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no5 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/03/2025y03m18d_1218594151.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no6 h3 {
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243320416.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no7 h3 {
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243345131.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no8 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243368283.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no9 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243394283.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no10 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243417868.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no11 h3 {
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243443824.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no12 h3 {
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243467411.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no13 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243493025.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no14 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243515578.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no15 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1243539318.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no16 h3 {
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1244046199.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no17 h3 {
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1244069367.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no18 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1244093742.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no19 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1244116133.png) no-repeat left 12px center / 56px #2abcbc!important;
}
main#main-lower .iryoDietwrap div.rank-cont.no20 h3{
background: url(https://koesiru.jp/img/koesiru/uploads/2025/04/2025y04m18d_1244138908.png) no-repeat left 12px center / 56px #2abcbc!important;
}


/*------------------------------------------------------------
アコーディオン　高さ固定
-------------------------------------------------------------*/
.acd-takasa-kotei{
margin-bottom: 30px;
position: relative;
overflow:hidden ;
}
.acd-takasa-kotei > *{
margin-bottom: 0!important;
}
.acd-takasa-kotei:before{
content: '';
display: block;
width: 100%;
height: 130px;
position: absolute;
left: 0;
bottom: -1px;
background: transparent linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 80%) 40%, rgb(255 255 255 / 100%) 70%, rgb(255 255 255 / 100%) 100%) 0% 0% no-repeat padding-box;
z-index: 100;
}
.acd-takasa-kotei.on-yellow:before{
background: transparent linear-gradient(180deg, rgb(255 252 233 / 10%) 0%, rgb(255 252 233 / 80%) 40%, rgb(255 252 233 / 100%) 70%, rgb(255 252 233 / 100%) 100%) 0% 0% no-repeat padding-box;
}
.acd-takasa-kotei .open-btn{
display: block;
width: 300px;
background: #eb7309;
border-radius: 30px;
color: #fff;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
margin: auto;
text-align: center;
padding: 10px 0;
cursor: pointer;
font-size: 16px;
z-index: 101;
}
.acd-takasa-kotei .open-btn input{
display: none;
}
.acd-takasa-kotei:has(.open-btn-check:checked){
height: auto!important;
padding-bottom: 80px;
}
.acd-takasa-kotei:has(.open-btn-check:checked):before{
display: none;
}
.acd-takasa-kotei:has(.open-btn-check:checked) .open-btn{
font-size: 0;
}
.acd-takasa-kotei:has(.open-btn-check:checked) .open-btn:before{
content: '閉じる';
font-size: 16px;
}
.acd-takasa-kotei.on-pink .box02{
	background: #FFF3F7;
    border: dashed 2px #fbc8f2;
}
.acd-takasa-kotei.on-pink:before{
background: transparent linear-gradient(180deg, rgb(255 243 247 / 10%) 0%, rgb(255  243 247 / 80%) 40%, rgb(255  243 247 / 100%) 70%, rgb(255  243 247 / 100%) 100%) 0% 0% no-repeat padding-box;
}

/*------------------------------------------------------------
テーブル border無くす用
-------------------------------------------------------------*/
.table-border-none,.table-border-none th,.table-border-none td{
border: 0!important;
}


/*--------------------------------------------------------
タブ　アコーディオン
-------------------------------------------------------*/
.accordion-content {
display: none;
}
.accordion-content.active {
display: block;
}
.content-pane {
display: none;
}
.content-pane.active {
display: block;
}
.tabs{
margin: 20px 0 30px;
}
.tabs .button-wrap {
margin-bottom: 20px;
}
.tabs .button-wrap.hidden{
display: none;
}
.tabs .button-wrap ul{
display: flex;
flex-wrap: wrap;
gap: 0 8px;
justify-content: flex-start;
}
.tabs .button-wrap li{
margin: 0!important;
border-bottom: 2px solid #ccc;
}
.tabs .tab-link{
cursor: pointer;
color: #808080;
padding: 12px 7px 8px;
display: block;
font-size: 16px;
border: 0;
border-bottom: 5px solid transparent;
margin-bottom: -2px;
line-height: 1.5;
background: none;
}
.tabs .tab-link.active{
color: #eb534c;
border-bottom-color: #eb534c;
}
.tabs .accordion-header{
background: #e6e6e6!important;
border-radius: 8px!important;
position: relative;
padding: 16px 36px 16px 16px!important;
cursor: pointer;
line-height: 1.5!important;
font-size: 16px!important;
margin: 20px 0 0!important;
color: #333!important;
top: auto!important;
}
.tabs .accordion-header:first-child{
margin-top: 0!important;
}
.tabs .accordion-header:after {
content: '';
width: 10px!important;
height: 10px!important;
border: 2px solid #333;
border-left: 0;
border-top: 0;
transform: rotate(45deg);
position: absolute;
top: 0!important;
left: auto!important;
bottom: 0;
right: 20px;
margin: auto;
background: none!important;
border-radius: 0!important;
z-index: 1!important;
}
.tabs .accordion-content {
padding-top: 10px;
}
.iryoDietwrap .rank-contIn .tabs{
background: #fff;
border-radius: 20px;
padding: 8px 0 20px;
margin: 40px 0;
}
.iryoDietwrap .rank-contIn .tabs .button-wrap{margin-left: 16px;margin-right: 16px;}
.iryoDietwrap .rank-contIn .tabs .content-pane{
padding: 0 16px;
}
.tabs .content-pane .cta-link-button02.two-line{
line-height: normal !important;
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 21px !important;
background: #ff3600;
color: #fff;
text-decoration: none;
margin: 0 auto 4px;
border-radius: 10px;
position: relative;
font-weight: bold;
padding: 0;
width: 426px;
box-shadow: 0 2px 16px 0px rgb(57 37 37 / 58%);
border-bottom: solid 5px #b01c00;
height: 85px !important;
}
.tabs .content-pane .cta-link-button02.two-line:after {
content: "";
display: block;
width: 40px;
height: 30px;
background: url(https://koesiru.jp/img/common/design/iryou-lp-bt-icon2.png)no-repeat center / 100% 100%;
top: 1px;
left: -10px;
right: auto;
bottom: 0;
margin: auto;
position: absolute;
animation: cvbtscroll 1.5s infinite;
}

@media only screen and (max-width: 896px){
.tabs .button-wrap li{
border-bottom: 2px solid #ccc;
}
.tabs .tab-link,.iryoDietwrap .rank-contIn .tabs .tab-link{
font-size: 16px;
padding: 10px 13px 6px 13px;
border-bottom-width: 4px;
}
.tabs .accordion-header{
font-size: 15px!important;
padding: 15px 32px 15px 14px!important;
}
.tabs .accordion-header:after{
right: 16px;
}
.tabs .content-pane .cta-link-button02.two-line{
width: calc(100% - 24px);
}
}
@media only screen and (max-width: 376px) {
.tabs .content-pane .cta-link-button02.two-line{
width: calc(100% - 4px);
}
}

/*--------------------------------------------------------
タブ表示制御用
-------------------------------------------------------*/
.tabs.disp-control .button-wrap li{
display: none;
}
.tabs.disp-control .button-wrap li:has(.tab-link.active){
display: block;
}
.tabs.disp-control .tab-link{
pointer-events: none;
}
.tabs.disp-control .content-pane.active{
display: none;
}
.tabs.disp-control:has(button[data-target="content1"].active) .content-pane#content1,
.tabs.disp-control:has(button[data-target="content2"].active) .content-pane#content2,
.tabs.disp-control:has(button[data-target="content3"].active) .content-pane#content3,
.tabs.disp-control:has(button[data-target="content4"].active) .content-pane#content4,
.tabs.disp-control:has(button[data-target="content5"].active) .content-pane#content5,
.tabs.disp-control:has(button[data-target="content6"].active) .content-pane#content6,
.tabs.disp-control:has(button[data-target="content7"].active) .content-pane#content7,
.tabs.disp-control:has(button[data-target="content8"].active) .content-pane#content8,
.tabs.disp-control:has(button[data-target="content9"].active) .content-pane#content9,
.tabs.disp-control:has(button[data-target="content10"].active) .content-pane#content10,
.tabs.disp-control:has(button[data-target="content11"].active) .content-pane#content11,
.tabs.disp-control:has(button[data-target="content12"].active) .content-pane#content12,
.tabs.disp-control:has(button[data-target="content13"].active) .content-pane#content13,
.tabs.disp-control:has(button[data-target="content14"].active) .content-pane#content14,
.tabs.disp-control:has(button[data-target="content15"].active) .content-pane#content15,
.tabs.disp-control:has(button[data-target="content16"].active) .content-pane#content16,
.tabs.disp-control:has(button[data-target="content17"].active) .content-pane#content17,
.tabs.disp-control:has(button[data-target="content18"].active) .content-pane#content18,
.tabs.disp-control:has(button[data-target="content19"].active) .content-pane#content19,
.tabs.disp-control:has(button[data-target="content20"].active) .content-pane#content20,
.tabs.disp-control:has(button[data-target="content21"].active) .content-pane#content21,
.tabs.disp-control:has(button[data-target="content22"].active) .content-pane#content22,
.tabs.disp-control:has(button[data-target="content23"].active) .content-pane#content23,
.tabs.disp-control:has(button[data-target="content24"].active) .content-pane#content24,
.tabs.disp-control:has(button[data-target="content25"].active) .content-pane#content25,
.tabs.disp-control:has(button[data-target="content26"].active) .content-pane#content26,
.tabs.disp-control:has(button[data-target="content27"].active) .content-pane#content27,
.tabs.disp-control:has(button[data-target="content28"].active) .content-pane#content28,
.tabs.disp-control:has(button[data-target="content29"].active) .content-pane#content29,
.tabs.disp-control:has(button[data-target="content29"].active) .content-pane#content30{
display: block;
}

/*------------------------------------------------------------
id用テキストの背景
-------------------------------------------------------------*/
.kosen_txt2.id_txt-bg-b .eyecatch-text{
background-color:#333c42;
    width: fit-content;
height: 80px;
    padding: 15px 30px 5px 30px;
    border-radius: 5px;
    top: 76px;
}

@media only screen and (max-width: 896px){
.kosen_txt2.id_txt-bg-b .eyecatch-text {
    height: 50px;
    padding: 12px 30px 5px 30px;
top: 12vw;
}
}

@media only screen and (max-width: 400px) {
.kosen_txt2.id_txt-bg-b .eyecatch-text {
    height: 40px;
    padding: 6px 30px 5px 30px;
}
}


/*------------------------------------------------------------
電話はこちらボタン
-------------------------------------------------------------*/
 .tell_btn{
display:none;
}

.tell_btn a.button-medium_tell {
    background-color: #ff5c29;
    box-shadow: 0 5px 0 #cc4a21;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    position: relative;
    padding: 13px;
    font-weight: 800;
    width: 90%;
    margin: 0 auto 24px auto;
    font-size: 21px;
    display: block;
    line-height:normal;
    overflow: hidden;
}

.button-medium_tell-name {
position: relative;
    display: block;
    font-size: 18px;
    color: #fff;
}

.button-medium_tell-name:before {
display: block;
background:url(https://koesiru.jp/img/koesiru/uploads/2025/07/2025y07m17d_1159007481.png) no-repeat center / contain;
content: "";
position: absolute;
left: 8%;
top: 115%;
transform: translateY(-50%);
width:20px;
height: 20px;
}


.tell_btn a.button-medium_tell.yaji-l-anime:after {
    content: "";
    width: 40px;
    height: 30px;
    background: url(https://koesiru.jp/img/common/design/iryou-lp-bt-icon2.png) no-repeat center / 100% 100%;
     top: 1px;
    left: -10px;
    bottom: 0;
    margin: auto;
    position: absolute;
    animation: cvbtscroll 1.5s infinite;
    }

.button-medium_tell {
    animation-name: tateyure;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
}

.button-medium_tell:before {
    content: '';
    display: block;
    width: 40px;
    height: 100%;
    position: absolute;
    top: -100px;
    left: 0;
    background: #fff;
    animation: shine 3.5s ease-in-out infinite;
}



@media only screen and (max-width: 600px) {
.tell_btn{
display:block;
}
.cta-link-box02 .tell_btn a {
    width: 100%;
}
}

@media only screen and (max-width: 350px) {
.button-medium_tell-name:before {
left: 12%;
}
}

/*------------------------------------------------------------
CTAボタンのみ
-------------------------------------------------------------*/
.cta-link-only  .cta-link-button02{
border-radius: 10px;
}

.cta-link-only  .cta-link-button02.yaji-l-anime:after {
        content: "";
        width: 40px;
        height: 30px;
        background: url(https://koesiru.jp/img/common/design/iryou-lp-bt-icon2.png) no-repeat center / 100% 100%;
        top: 1px;
        right: auto;
        bottom: 0;
        margin: auto;
        position: absolute;
        animation: cvbtscroll 1.5s infinite;
    }
    
@media only screen and (min-width: 601px) {
.cta-link-only  .cta-link-button02{
width: 426px;
}
}

/*------------------------------------------------------------
rank-thumbnailsの縦型サムネバージョン
-------------------------------------------------------------*/
.rank-thumb-tate .rank-thumbnails img{
    height: auto;
    width: 23%;
}


/*------------------------------------------------------------
タブ
-------------------------------------------------------------*/
.tab-label{
display: flex;
gap: 5px;
border-bottom: 1px solid #768d95;
}
.tab-label input,.tab-label > br{
display: none;
}
.tab-label label{
border-radius: 5px 5px 0 0;
width: calc((100% - 15px) / 4);
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
color: #fff;
height: 50px;
line-height: 1.3;
font-size: 16px;
cursor: pointer;
text-align: center;
border: 2px solid #ccc;
border-bottom: 0;
font-weight: bold;
}
.tab-label label:has(input:checked){
background: #ffa906;
border-color: #768d95;
}
.tab-wrap div[class^="tab-cont"] {
display: none;
}
.tab-wrap:has(.tab1 input:checked) .tab-cont1,.tab-wrap:has(.tab2 input:checked) .tab-cont2,.tab-wrap:has(.tab3 input:checked) .tab-cont3,.tab-wrap:has(.tab4 input:checked) .tab-cont4,.tab-wrap:has(.tab5 input:checked) .tab-cont5,.tab-wrap:has(.tab6 input:checked) .tab-cont6,.tab-wrap:has(.tab7 input:checked) .tab-cont7,.tab-wrap:has(.tab8 input:checked) .tab-cont8,.tab-wrap:has(.tab9 input:checked) .tab-cont9,.tab-wrap:has(.tab10 input:checked) .tab-cont10{
display: block;
}

/*------------------------------------------------------------
rank-tableの1位の色
-------------------------------------------------------------*/
body main .rank-table td:first-child {
    background-color: #fffff5 !important;
    text-align:center;
}

/*--------------------------------------------------------
テーブル内　〇△アイコンと文字が被るデザイン
-------------------------------------------------------*/
#koesiru_over .koesiru_over-td {
position: relative;
}
#koesiru_over .koesiru_over-txt {
position: absolute;
display: block;
width: 100%;
padding: 0 5px 0 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -20%);
font-size: 17px;
}
#koesiru_over .koesiru_over-img {
max-width: 80px;
width: 100%;
opacity: 0.3;
}
@media only screen and (max-width: 896px){
#koesiru_over .koesiru_over-txt {
font-size: 14px;
}
#koesiru_over .koesiru_over-img {
max-width: 60px;
}
}

/*------------------------------------------------------------
年月最新版
-------------------------------------------------------------*/
.latestDate {
    position: absolute;
    top: 0;
    color: #fff;
    padding: 15px 20px;
    font-size: 20px;
    background-color: #222;
    font-weight: bold;
    border-radius: 0 0 15px 0;
}

@media only screen and (max-width: 601px){
.latestDate {
  padding: 10px 15px;
    font-size: 15px;
	border-radius: 0 0 10px 0;
}
}
@media only screen and (max-width: 430px){
.latestDate {
  padding: 8px 12px;
    font-size: 12px;
	border-radius: 0 0 5px 0;
}
}

/*------------------------------------------------------------
下線のカスタムカラー用
-------------------------------------------------------------*/
main#main-lower .iryoDietwrap .b-red {
background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, var(--line-color, #fff7bd) 0%) repeat scroll 0 0!important;
}



/*------------------------------------------------------------
ランキングテーブル用
-------------------------------------------------------------*/
.custom-ranking-wrapper {
--primary-color: #f0627e;
--text-color: #333333;
--bg-color: #f8f6f4;
--card-bg: #ffffff;
--gold: #d4af37;
--silver: #a0a0a0;
--bronze: #c58f79;
font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
padding: 30px 15px;
max-width: 600px;
width: 100%;
margin: 0 auto 30px; /* 中央寄せし、下部に余白を追加 */
box-sizing: border-box;
line-height: 1.5;
}
.custom-ranking-wrapper * {
box-sizing: border-box;
}
.custom-ranking-wrapper .header {
text-align: center;
margin-bottom: 20px;
}
.custom-ranking-wrapper .ribbon-title {
display: inline-block;
background-color: #f7e1b5;
color: #b05c4f;
font-size: 17px;
font-weight: bold;
padding: 6px 35px;
position: relative;
margin-bottom: 8px;
border-radius: 3px;
}
.custom-ranking-wrapper .ribbon-title::before, 
.custom-ranking-wrapper .ribbon-title::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 0;
border: 15px solid transparent;
}
.custom-ranking-wrapper .ribbon-title::before {
left: -15px;
border-right-color: #f7e1b5;
}
.custom-ranking-wrapper .ribbon-title::after {
right: -15px;
border-left-color: #f7e1b5;
}
.custom-ranking-wrapper .main-catch {
font-size: 20px;
font-weight: bold;
line-height: 1.6;
margin: 10px 0;
letter-spacing: 0.5px;
}
.custom-ranking-wrapper .year-badge {
background-color: var(--primary-color);
color: #fff;
font-size: 14px;
padding: 3px 14px;
border-radius: 15px;
vertical-align: middle;
margin-right: 5px;
}
.custom-ranking-wrapper .header .main-catch p:has(.year-badge) {
 display: inline-block;
 margin: 0px !important;
 transform: translateY(-5px);
}
.custom-ranking-wrapper .highlight-number {
color: var(--primary-color);
font-size: 28px;
}
.custom-ranking-wrapper .ranking-container {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 40px;
}
.custom-ranking-wrapper .item-card {
background-color: var(--card-bg);
border-radius: 8px;
width: 32%;
padding: 20px 10px 12px;
text-align: center;
position: relative;
box-shadow: 0 3px 8px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
border-top: 5px solid #eee;
}
.custom-ranking-wrapper .item-card:nth-child(1) { border-top-color: var(--gold); }
.custom-ranking-wrapper .item-card:nth-child(2) { border-top-color: var(--silver); }
.custom-ranking-wrapper .item-card:nth-child(3) { border-top-color: var(--bronze); }

.custom-ranking-wrapper .rank-badge {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
font-weight: bold;
font-size: 16px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.custom-ranking-wrapper .item-card:nth-child(1) .rank-badge { color: var(--gold); }
.custom-ranking-wrapper .item-card:nth-child(2) .rank-badge { color: var(--silver); }
.custom-ranking-wrapper .item-card:nth-child(3) .rank-badge { color: var(--bronze); }

.custom-ranking-wrapper .item-name {
font-size: 13px;
font-weight: bold;
margin: 12px 0;
min-height: 2.6em;
display: flex;
align-items: center;
justify-content: center;
text-decoration: underline;
text-decoration-color: #ccc;
text-underline-offset: 4px;
line-height: 1.3;
}
.custom-ranking-wrapper .item-image {
width: 100%;
aspect-ratio: 1 / 1.1;
background-color: #f4f4f4;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
font-size: 11px;
border-radius: 4px;
overflow: hidden;
}
.custom-ranking-wrapper .item-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.custom-ranking-wrapper .btn {
display: block;
width: 100%;
padding: 10px 0;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
margin-top: auto;
}
.custom-ranking-wrapper .btn-green {
background-color: #2ab5a4;
color: white;
box-shadow: 0 3px 0 #1e9687;
transition: transform 0.1s, box-shadow 0.1s;
}
.custom-ranking-wrapper .btn-green:active {
transform: translateY(3px);
box-shadow: none;
}
.custom-ranking-wrapper .btn-gray {
background-color: #c4c4c4;
color: white;
font-size: 11px;
line-height: 1.3;
padding: 6px 0;
box-shadow: 0 3px 0 #a0a0a0;
pointer-events: none;
}
.custom-ranking-wrapper .reason-box {
background-color: #fae6ea;
border: 2px solid #f09cb0;
border-radius: 12px;
padding: 30px 20px 25px;
position: relative;
}
.custom-ranking-wrapper .reason-label {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background-color: var(--primary-color);
color: white;
padding: 6px 26px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
letter-spacing: 1px;
}
.custom-ranking-wrapper .reason-heading {
text-align: center;
font-size: 22px;
font-weight: bold;
color: var(--primary-color);
margin: 0 0 20px 0;
}
.custom-ranking-wrapper .reason-heading span {
color: var(--text-color);
}
.custom-ranking-wrapper .reason-list {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.custom-ranking-wrapper .reason-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.custom-ranking-wrapper .reason-list li {
display: flex;
align-items: flex-start;
margin-bottom: 18px;
font-size: 15px;
font-weight: bold;
line-height: 1.6;
}
.custom-ranking-wrapper .reason-list li:last-child {
margin-bottom: 0;
}
.custom-ranking-wrapper .check-mark {
background-color: var(--primary-color);
color: white;
width: 22px;
height: 22px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-right: 12px;
margin-top: 2px;
flex-shrink: 0;
}
.custom-ranking-wrapper .marker-yellow {
background: linear-gradient(transparent 50%, rgba(255, 240, 0, 0.5) 50%);
}
.custom-ranking-wrapper .text-red {
color: #e63956;
}
@media (max-width: 480px) {
.custom-ranking-wrapper .main-catch { font-size: 18px; }
.custom-ranking-wrapper .item-name { font-size: 12px; }
.custom-ranking-wrapper .btn { font-size: 11px; }
.custom-ranking-wrapper .reason-list li { font-size: 14px; }
}

/*------------------------------------------------------------
ポイントコンテンツ
-------------------------------------------------------------*/
.custom-feature-wrapper {
max-width: 600px;
margin: 40px auto;
font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
color: #333;
/* ▼ ここから背景色・余白・角丸を追加 ▼ */
background-color: #fffaf5; 
padding: 30px 20px;
border-radius: 16px;
/* ▲ ここまで ▲ */
}
.custom-feature-wrapper * {
box-sizing: border-box;
}

/* ==========================================================
トップのリボンタイトル
========================================================== */
.custom-feature-wrapper .ribbon-title-wrap {
text-align: center;
margin-bottom: 15px;
}
.custom-feature-wrapper .ribbon-title {
display: inline-block;
background-color: #f7e1b5;
color: #b05c4f;
font-size: 14px;
font-weight: bold;
padding: 6px 35px;
position: relative;
border-radius: 3px;
line-height: 1.2;
}
.custom-feature-wrapper .ribbon-title::before, 
.custom-feature-wrapper .ribbon-title::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 0;
border: 15px solid transparent;
}
.custom-feature-wrapper .ribbon-title::before {
left: -15px;
border-right-color: #f7e1b5;
}
.custom-feature-wrapper .ribbon-title::after {
right: -15px;
border-left-color: #f7e1b5;
}

/* ==========================================================
メインタイトルとその他の設定
========================================================== */
.custom-feature-wrapper .section-title {
text-align: center;
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.4;
}
.custom-feature-wrapper .orange-num {
color: #ff6600;
font-size: 28px;
}
.custom-feature-wrapper .section-divider {
border: none;
border-top: 2px solid #ff6600;
margin-bottom: 40px;
width: 100%;
}

/* ==========================================================
カードリスト全体の設定
========================================================== */
.custom-feature-wrapper .card-list {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 20px;
}
.custom-feature-wrapper .feature-card {
background-color: #ffffff;
border-radius: 12px;
padding: 35px 15px 10px;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
}
.custom-feature-wrapper .point-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background-color: #ff6600;
color: #ffffff;
padding: 4px 24px;
border-radius: 20px;
font-weight: bold;
font-size: 15px;
letter-spacing: 1px;
}

/* ==========================================================
カード内の見出し（リボン風デザイン・中央寄せ）
========================================================== */
.custom-feature-wrapper .card-heading {
display: block !important;
width: fit-content !important;
margin: 0 auto 20px !important; /* 中央寄せ */
background-color: #f7e1b5;
color: #b05c4f;
font-size: 18px;
font-weight: bold;
padding: 6px 25px;
position: relative;
border-radius: 3px;
line-height: 1.4;
text-align: center !important; /* テキストも中央寄せ */
}
.custom-feature-wrapper .card-heading::before, 
.custom-feature-wrapper .card-heading::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 0;
border: 17px solid transparent;
}
.custom-feature-wrapper .card-heading::before {
left: -15px;
border-right-color: #f7e1b5;
}
.custom-feature-wrapper .card-heading::after {
right: -15px;
border-left-color: #f7e1b5;
}

/* ==========================================================
カード内のコンテンツ設定
========================================================== */
.custom-feature-wrapper .card-image {
width: 100%;
height: auto;
border-radius: 6px;
margin-bottom: 15px;
}
.custom-feature-wrapper .card-text {
font-size: 15px;
line-height: 1.8;
margin: 0;
}
.custom-feature-wrapper .marker {
background: linear-gradient(transparent 60%, #ffff99 60%);
font-weight: bold;
}
.custom-feature-wrapper .text-red-bold {
color: #e44141;
font-weight: bold;
}

/* ==========================================================
PR  フォントサイズ調整
========================================================== */
.iryoimg-fv-box:before {
	width: 60px!important;				
	height: 30px!important;				
	font-size: 18px!important;				
	letter-spacing: 4px!important;				
	line-height: 33px!important;				
@media (max-width: 480px) {
	width: 60px!important;				
	height: 30px!important;				
	font-size: 16px!important;				
	letter-spacing: 4px!important;				
	line-height: 33px!important;		
}
}


/* ==========================================================
アイキャッチサイズ指定
========================================================== */
.eyecatch {
    width: 100%!important; 
    height: auto; 
}


/* ==========================================================
tenpo
========================================================== */
/* 全体の枠組み */
.tenpo {
  max-width: 600px;
  margin: 0 auto 24px !important;
  border: 2px solid #ffd4ab !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #fff !important;
  font-family: sans-serif !important;
}

/* ヘッダー部分 */
.tenpo__head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffd4ab !important;
  padding: 16px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #333 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* コンテンツエリア */
.tenpo__text {
  padding: 16px 20px !important;
}

/* 地域見出し */
.tenpo__area {
  font-size: 17px !important;
  font-weight: bold !important;
  color: #555 !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  padding-left: 8px !important;
  border-left: 4px solid #ff6600 !important;
}

.tenpo__area:first-child {
  margin-top: 0 !important;
}

/* リンクを並べるコンテナ（PC基本設定） */
.tenpo__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* ★追加：自動挿入される改行タグや空の段落を強制的に無効化★ */
.tenpo__list br,
.tenpo__list p {
  display: none !important;
}

/* 各店舗のリンクボタン（PC基本設定） */
.tenpo__item {
  box-sizing: border-box !important;
  padding: 8px 16px !important;
  margin: 0 !important; /* 他のCSSの余白をリセット */
  text-align: center !important;
  font-size: 14px !important;
  color: #007bff !important;
  background-color: #f0f7ff !important;
  border: 1px solid #cce5ff !important;
  border-radius: 4px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

/* マウスオーバー時のエフェクト（PC用） */
.tenpo__item:hover {
  background-color: #007bff !important;
  color: #fff !important;
  border-color: #007bff !important;
}

/* ▼ スマホ表示時（画面幅599px以下）のレイアウト上書き ▼ */
@media screen and (max-width: 599px) {
  .tenpo__list {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
  }
  .tenpo__item {
    width: 100% !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
    display: block !important;
  }
}


/* --- デバイス出し分け設定 --- */

/* 1. 基本設定（スマホで見ている時） */
.pc-display-only {
  display: none !important; /* PC用を隠す */
}
.sp-display-only {
  display: block !important; /* スマホ用を表示 */
}

/* 2. PCで見ている時（画面幅768px以上）の設定 */
@media screen and (min-width: 768px) {
  .pc-display-only {
    display: block !important; /* PC用を表示 */
  }
  .sp-display-only {
    display: none !important; /* スマホ用を隠す */
  }
}


/* スマホ（画面幅896px以下）の場合のみ画面幅いっぱいに広げる */
@media screen and (max-width: 896px) {
  .yokohaba {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}



/* ==========================================================
ヘッダー
========================================================== */

.media-header {
  width: 100%;
  background: #ffffff;
  border-top: 3px solid #D8C2A4;
  border-bottom: 1px solid #C8B8A3;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  position: relative;
  z-index: 20;
}

/* 以前の下ラインを無効化 */
.media-header::after {
  display: none;
}

.media-header-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 5px 0;
  box-sizing: border-box;
}

/* ロゴ版：本文左端に揃える */
.media-header-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 34px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: left;
}

/* 元HTMLに残っているbrを無効化 */
.media-header-title br {
  display: none;
}

/* コエシルロゴ */
.media-logo {
  width: auto;
  height: 26px;
  max-width: 115px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

/* サブテキスト */
.brand-sub {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.02em;
  line-height: 1;
  padding-left: 8px;
  border-left: 1px solid #d1d5db;
  white-space: nowrap;
}

/* 旧アイコン・旧テキストを使わない場合 */
.media-icon,
.brand-name {
  display: none;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .media-header-inner {
    max-width: 100%;
    padding: 7px 10px;
  }

  .media-header-title {
    justify-content: flex-start;
    min-height: 32px;
    gap: 7px;
  }

  .media-logo {
    height: 22px;
    max-width: 96px;
  }

  .brand-sub {
    font-size: 11px;
    padding-left: 7px;
  }
}


/* ==========================================================
目次
========================================================== */
/* 目次全体を囲むボックス */
.lpmokuji {
  background-color: #f9f9f9; /* 薄いグレーの背景 */
  border: 1px solid #eaeaea; /* 薄い枠線 */
  border-radius: 4px;
  padding: 24px;
  max-width: 800px; /* 必要に応じて調整 */
  font-family: sans-serif;
  box-sizing: border-box;
}

/* 目次のタイトル部分 */
.lpmokujiTitle {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e0e0; /* 下線 */
  display: flex;
  align-items: center;
  gap: 8px; /* アイコンと文字の隙間 */
}

/* タイトル横のリストアイコン（SVGをインラインで背景指定） */
.lpmokujiTitle::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'></line><line x1='8' y1='12' x2='21' y2='12'></line><line x1='8' y1='18' x2='21' y2='18'></line><line x1='3' y1='6' x2='3.01' y2='6'></line><line x1='3' y1='12' x2='3.01' y2='12'></line><line x1='3' y1='18' x2='3.01' y2='18'></line></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* リスト全体 */
.lpmokuji ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各リスト項目 */
.lpmokuji li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 24px; /* アイコン分の余白 */
  line-height: 1.6;
}
.lpmokuji li:last-child {
  margin-bottom: 0;
}

/* リスト左の下向き矢印（CSSのborderで描画） */
.lpmokuji li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px; /* テキストとの縦位置調整 */
  width: 6px;
  height: 6px;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: rotate(45deg);
}

/* リンクテキスト */
.lpmokuji a {
  color: #555;
  text-decoration: underline;
  text-decoration-color: #ccc; /* 控えめなアンダーライン色 */
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* マウスホバー時 */
.lpmokuji a:hover {
  color: #000;
  text-decoration-color: #888;
}


/* アコーディオン */
.acMenu dt{
border: 1px solid #bbb;
border-radius: 3px;
margin: 10px 0 17px;
padding: 7px 5px;
text-align: center;
display: block;
box-shadow: none;
background: #fff;
color: #666;
cursor: pointer;
position:relative;
}
.acMenu dt:before{
content:"";
position:absolute;
bottom:-4px;
left:0;
right:0;
margin:auto;
z-index:5px;
width:99%;
height:2px;
border-bottom:1px solid #bbb;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
}
.acMenu dt:after{
content:"";
position:absolute;
bottom:-7px;
left:0;
right:0;
margin:auto;
z-index:5px;
width:98%;
height:1px;
border-bottom:1px solid #bbb;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
}
.acMenu dd{
display:none;
margin:0 0 5px!important;
box-sizing:border-box;
}
.acMenu dt.active{
border: 1px solid #ffeea1;
background:#fff2b7;
margin:0 0 5px!important;
box-shadow: 0 2px 0 0 #bbb;
border-radius:4px 4px 0 0;
color:#444;
}
.acMenu dt.active:before{
border:none;
}
.acMenu dt.active:after{
border:none;
}
.acMenu{
margin:5px 0;
}
.acMenu dt{
border: 1px solid #bbb;
border-radius: 3px;
margin: 0px 0 10px;
padding: 8px 5px;
text-align: center;
display: block;
background: #fff;
cursor: pointer;
color:#666;
font-size:14px;
}
.acMenu dt:before{
content:"";
position:absolute;
bottom:-3px;
left:0;
right:0;
margin:auto;
z-index:5px;
width:99%;
height:1px;
border-bottom:1px solid #bbb;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
}
.acMenu dt:after{
content:"";
position:absolute;
bottom:-5px;
left:0;
right:0;
margin:auto;
z-index:5px;
width:98%;
height:0px;
border-bottom:1px solid #bbb;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
}
.acMenu dt.active{
border: 1px solid #ffeea1;
background:#fff2b7;
margin:0 0 10px!important;
box-shadow: 0 2px 0 0 #bbb;
border-radius:4px 4px 0 0;
color:#444;
}
.acMenu dt.active:before{
border:none;
}
.acMenu dt.active:after{
border:none;
}
.acMenu + h3{
margin-top:27px!important;
}

/*--------------------------------------------------------
クーポンコード
-------------------------------------------------------*/
.coupon-wrap-container {
    /* overflow: hidden; */
    padding: 10px;
    margin: 45px auto 30px;
    max-width: 460px;
    background: #ff417c;
    border-radius: 10px;
}

.coupon-wrap {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    padding: 12px 60px 24px 60px;
}

.coupon-wrap::before,
.coupon-wrap::after {
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #ff417c;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
}

.coupon-wrap::before {
    left: -1px;
    transform: translateX(-50%);
    clip-path: inset(0 0 0 50%);
}

.coupon-wrap::after {
    right: -1px;
    transform: translateX(50%);
    clip-path: inset(0 50% 0 0);
}

.coupon-title {
    position: absolute;
    left: 50%;
    top: -5px;
    transform: translate(-50%, -50%);
    background-color: #ff417c;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px #ff417c;
    margin: 0 !important;
    /* margin-top: 30px !important; */
    height: 46px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    font-size: 17px !important;
    gap: 10px;
    color: #fff;
    font-weight: 900;
    white-space: nowrap;
}

.coupon-title::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(https://koesiru.jp/img/koesiru/uploads/2026/08/2026y08m18d_1855214445.png) no-repeat center/contain;
}

.coupon-detail-list>li {
    border-bottom: 1px dashed #ccc;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin: 0 !important;
}

.coupon-detail-icon {
    width: 60px;
    top: 10px;
    position: relative;
}

.coupon-detail-list>li>br,
.coupon-detail-info>br {
    display: none;
}

.coupon-detail-name {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.coupon-detail-value,
.coupon-detail-value .num {
    color: #ff5500;
    font-weight: bold;
}

.coupon-detail-value {
    font-size: 30px;
    line-height: 1;
}

.coupon-detail-value .num {
    font-size: 60px;
}

.coupon-code {
    margin-top: 20px;
}

.coupon-code-title {
    text-align: center;
    font-size: 18px !important;
    margin-bottom: 5px !important;
}

.coupon-code-value {
    border: 1px solid #ccc;
    color: #ff417c;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    border-radius: 8px;
    margin-bottom: 20px;
}

.coupon-code p:has(.coupon-copy-button) {
    margin-bottom: 0 !important;
}

.coupon-copy-button {
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color: #ff5500;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.3s;
    position: relative;
}

.coupon-copy-button::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(https://koesiru.jp/img/koesiru/uploads/2026/08/2026y08m18d_1206587195.png) no-repeat center/contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
}

.coupon-copy-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 14px;
    margin: auto;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

.coupon-copy-button:hover {
    opacity: 0.6;
}

.coupon-copy-hint {
    width: fit-content;
    margin: 5px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.coupon-copy-hint::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background: url(https://koesiru.jp/img/koesiru/uploads/2026/08/2026y08m18d_1227017971.png) no-repeat center/contain;
}

.coupon-copy-note {
    font-size: 14px;
    margin: 16px 0 0 !important;
}

@media screen and (max-width: 767px) {
.coupon-detail-list>li {
    gap: 20px;
    padding: 20px;
}


.coupon-wrap {
    padding: 12px 30px 24px 30px;
}

.coupon-copy-button {
    font-size: 14px;
}
    
}

@media screen and (max-width: 420px) {
.coupon-detail-value {
    font-size: 20px;
}
}

@media screen and (max-width: 344px) {
.coupon-detail-value .num {
    font-size: 45px;
}
}