@charset "utf-8";

/* CSS Document */

*{

    margin: 0;

    padding: 0;

    list-style-type: none;

	box-sizing: border-box;

}

body{
	background-image: linear-gradient(0deg, transparent calc(100% - 1px), #e5f1fe calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #e5f1fe calc(100% - 1px));
  background-size: 22px 22px;
  background-repeat: repeat;
  background-position: center center;
}

.sp{display: none;}

a{text-decoration: none;}



.pane-left-menu{

	display: none;

}

.block-genre-page--header{

	display: none;

}



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

    .sp{display: block;}

	.pc{display: none;}

	.block-filter--btn{display: none;}

}



/*クーポンページ*/

.mv{

	max-width: 1200px;

	width: 100%;

	margin: 0 auto 30px;

	display: block;

}


.btn_gazou{

	max-width: 620px;

	width: 100%;

	margin: 0 auto 100px;

	display: block;

}

.mv_pic {
text-align: center;
margin: 0 auto;
	
}

.mv_pic img{
width: 80%;
	max-width: 1200px;
height: auto;
	
}

.pic003 {
text-align: center;
	margin-bottom: 28px;
}

.pic003 img{
width:90%;
height:auto;
	
}

.pic004 {
text-align: center;
	margin-bottom: 20px;
}

.pic004 img{
width:40%;
height:auto;
	
}


.josefin {

    font-family: "Josefin Sans", sans-serif;

}




.btn_wrap{

	display: flex;

	justify-content: space-evenly;

	max-width: 1200px;

    margin: 0 auto;

}

.cam_btn{

    background-color: #444444;

    border-radius: 5px;

    width: 500px;

    height: 64px;

    position: relative;

}

.cam_btn p{

    color: #fff;

    font-size: 20px;

    text-align: center;

    position: absolute;

    line-height: 1;

    width: 100%;

    top: 50%;

    transform: translate(0, -50%);

}

.cam_btn p::after{

    content: "";

    position: absolute;

    width: 8px;

    height: 8px;

    border-top: solid 1.2px #fff;

    border-right: solid 1.2px #fff;

    -webkit-transform: rotate(45deg) translate(0, -50%);

    transform: rotate(45deg) translate(0, -50%);

    top: 50%;

    right: 20px;

}

.cam_btn a{

	width: 100%;

	height: 100%;

	position: absolute;

	left: 0;

}

.under{

	cursor:pointer;

}

.under p::after{

    -webkit-transform: rotate(135deg);

    transform: rotate(135deg);

    top: 10%;

}


.coupon_wrap{

	font-size: 26px;

	max-width: 1200px;

	border-radius:10px;

	background-color: #fff;

	padding: 60px 40px 50px;

	margin: 100px auto;

	text-align: center;

}

.date_note__wrap {
	width: 90%;
	background-color: #fff;
      border: 4px solid #23B0BA;
	margin: 20px auto;
      padding: 0 0 30px;
      border-radius: 24px;
	text-align: center;
       }



.percent_txt{

	font-weight: bold;

	color: #FF0000;

	display: flex;

	background: linear-gradient(transparent 85%, #FFF351 15%);
text-align: center;
	width: fit-content;
	max-width: 80%;
	

    margin: 25px auto 0px;

	align-items: flex-end;

}

.percent_txt_num{

	font-size: 140px;

	line-height: 1;

}

.percent_txt_yen{

	font-size: 55px;

    line-height: 1.2;

    text-align: left;

}

.head-borderred {

    display: flex;

    align-items: center;
	
	color: #E73449;

	font-size: 30px;

	margin: 50px 0 30px;

}
.head-borderred:before,

.head-borderred:after {

    content: "";

    height: 2px;

    flex-grow: 1;

    background-color: #E73449;

}



.head-borderred:before {

    margin-right: 1rem;

}



.head-borderred:after {

    margin-left: 1rem;

}

.head-border {

    display: flex;

    align-items: center;
	
	color: #1d50a2;

	font-size: 30px;

	margin: 70px 0 30px;

}



.head-border:before,

.head-border:after {

    content: "";

    height: 2px;

    flex-grow: 1;

    background-color: #acccde;

}



.head-border:before {

    margin-right: 1rem;

}



.head-border:after {

    margin-left: 1rem;

}



.coupon_code{

	font-size: 40px;

	font-weight: bold;

	background-color: #FFF351;

	width: 400px;

	padding: 20px;

	margin: 20px auto;

	border-radius:10px;

}

.nomal_btn{

    background-color: #1d50a2;

    border-radius: 150px;

    width: 300px;

    height: 60px;

    position: relative;

	margin: auto;
	
	
}

.nomal_btn p{

    color: #fff;

    font-size: 20px;

    text-align: center;

    position: absolute;

    line-height: 1;

    width: 100%;

    top: 50%;

    transform: translate(0, -50%);

}

.nomal_btn p::after{

    content: "";

    position: absolute;

    width: 7px;

    height: 7px;

    border-top: solid 1.2px #fff;

    border-right: solid 1.2px #fff;

    -webkit-transform: rotate(45deg) translate(0, -50%);

    transform: rotate(45deg) translate(0, -50%);

    top: 50%;

    right: 20px;

}

.nomal_btn a{

	width: 100%;

	height: 100%;

	position: absolute;

	left: 0;

}

.coupon-copy-code{

    display: block;

font-size: 40px;

font-weight: bold;

background-color: #ecf7de;

width: 680px;

padding: 20px;

margin: 20px auto;

border-radius:10px;

    border: solid 6px #629f46;

}

.coupon-copy-button {

display: block;

align-items: center;

padding: 10px 20px;

background-color: #1d50a2;

color: #fff;

font-size: 15px;

cursor: pointer;

border-radius: 50px;

transition: all 0.3s ease;

    width: 170px;

	margin: 0 auto;

}

.coupon-message {

margin: 10px auto;

color: #444444;

display: none;

	text-align: center;

	font-size: 15px;

}

.red{

	color: #FF0000;

}

.note{

	font-size: 18px;

	line-height: 2;

    width: 90%;

    margin: 0 auto;

    text-align: left;

}


.note_s{

	font-size: 16px;

	line-height: 2;

    width: 90%;

    margin: 0 auto;
	padding-top: 28px;

    text-align: center;

}

h1{
	text-align: center;
margin: 0 auto;

}	


h2{

	text-align: center;
	padding: 2% 0 1%;
	font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
	font-size: 280%;
line-height: 150%;
  font-weight: 800;
  color: #1d50a2;

}



h3{
	text-align: center;
	font-size: 180%;
font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
        font-weight: bold;
}

.head-004 {
background-color: #23B0BA;
	border-radius: 20px 20px 0 0;
	color: #FFFFFF;
	padding: 12px 10px;
	text-align: center;
	font-size:122%;
	font-weight: bold;
	}

.head-005 {
background-color: #E73449;
	border-radius: 4px 4px 0 0;
	color: #FFFFFF;
	padding: 24px 20px;
	text-align: center;
	}

.titleunder_P {

	text-align: center;
	padding: 0 14px;
	font-size: 120%;
font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
line-height: 150%;
  font-weight: 500;
}


.item_list{

	display: flex;

	max-width: 1200px;

	justify-content: space-between;

	margin: 30px auto 60px;

	

}

.item_list li{

	width: calc((100% - 25*2px)/3);

	background-color: #555;

	aspect-ratio: 1 / 1;

}



.flow_wrap {

	display: flex;

	margin-bottom: 40px;

}

.flow_wrap .flow_wrap_item{

	width: calc(100%/3);

	padding: 0 40px;

	background-image : linear-gradient(to bottom, #BBBBBB 8px, transparent 8px);

 background-size: 1px 15px;

 background-repeat: repeat-y; 

 background-position: right top;

}

.flow_wrap .flow_wrap_item:last-child{

	border:none;

	background: none;

}

.flow_num {

    display: flex;

    gap: 50px;

	align-items: center;

	justify-content: center;

}

.flow_num li.flow_num_current {

    width: 60px;

    height: 60px;

    background: #444;

}

.flow_num li.flow_num_current p{

	font-size: 12px;

	line-height:1;

}

.flow_num li.flow_num_current p span{

	font-size: 25px;

}

.flow_num li {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    background: #DDD;

    color: #FFF;

    font-size: 19px;

    border-radius: 50%;

    z-index: 1;

}

.flow_num li:not(:first-child):before {

    content: '';

    position: absolute;

    top: 0;

    left: -50px;

    bottom: 0;

    margin: auto;

    width: 50px;

    height: 1px;

    background: #DDD;

    z-index: -1;

}

.dummy{

	width: 100%;

	background-color: #555;

	aspect-ratio: 1 / 1;

	margin: 20px 0;

}

.flow_wrap .flow_wrap_item .flow_wrap_txt{

	font-size: 20px;

	text-align: left;

}



.txt_more{

	font-size: 50px;

	font-weight: bold;

	text-align: center;

	margin: 100px auto 30px;

}

.dots{

    background-image: radial-gradient(circle at center, #E9091A 20%, transparent 20%); /* 点の色とサイズ調整 */

    background-position: top right; /* 点の位置 */

    background-repeat: repeat-x; /* 横方向に繰り返し */

    background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */

    padding-top: .4em; /* 縦方向の位置調整 */

}



.campaign_wrap{

	font-size: 26px;
	font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
	width: 80%;

	max-width: 1200px;

	border-radius:10px;

	background-color: #FFF;

	padding: 40px 40px 50px;

	margin: 50px auto 60px;

	text-align: center;

	border: solid 6px #acccde;

}


.campaign_wrap002{

	font-size: 26px;
	font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
	width: 80%;

	max-width: 1200px;

	padding: 0;

	margin: 50px auto;

}

.campaign_wraptokuten{

	font-size: 26px;
	font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
	width: 80%;

	max-width: 1200px;

	border-radius:10px;

	background-color: #ecf6fc;

	padding: 20px 10px 40px;

	margin: 10px auto 0px;

	text-align: center;

	border: solid 6px #acccde;

}

.campaign_wrap004{

	font-size: 26px;
	font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
	width: 80%;

	max-width: 1200px;

	padding: 20px 0px 40px;

	margin: 20px auto 60px;

	text-align: center;

}


.percent_txt_point{

	font-size: 70px;

    line-height: 1.2;

    text-align: left;

}

.white_border{

	background: linear-gradient(transparent 85%, #FFF 15%);

}



.customer{

	max-width: 1200px;

	background-color: #fff;

	padding: 20px;

	margin: 0 auto 100px;;

	border-radius:10px;

	text-align: center;

}

.customer_campain{

	font-size: 20px;

	text-decoration: underline;

}

.customer_center{

	font-size: 16px;

	margin:20px 0;

}

.customer ul{

	display: flex;

	align-items: center;

	justify-content: center;

}

.tel{

	color: #FF0000;

	font-size: 27px;

	font-weight: bold;

	margin-right: 20px;

}

.time{

	font-size: 16px;

}

.dispcription {
	text-align: left;
	list-style: disc;
    padding: 5% 5% 0;
  }
 .dispcription ul {
    padding-left: 1vw;
    font-size: 80%;
    line-height: 120%;
  }
.dispcription ul li {
  margin-bottom: 2%;
  list-style-type: disc;
  line-height: 150%;
}
.dispcription ul li b {
  color: red;
}

.c_white{
    color: #fff;
}

.star_itemBox,
.crackr_itemBox,
.crackr_bottom_itemBox{
    width: 90%;
    margin: 2rem auto;
    text-align: center;
    margin-top: 4rem;
}
.star_itemBox h3,
.crackr_itemBox h3,
.crackr_bottom_itemBox h3{
    font-size: clamp(1.5rem, 2.5vw, 2.8rem);
	color: #1d50a2;
    position: relative;
    text-align: center;
}
.star_itemBox h3::after,
.star_itemBox h3::before
 {
    content: "";
    background-image: url(../../../../img/usr/free/coupon_SB/starR.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 60px;
    height: 60px;
    position: absolute;
}

.crackr_itemBox h3::after,
.crackr_itemBox h3::before,
.crackr_bottom_itemBox h3::after,
.crackr_bottom_itemBox h3::before{
    content: "";
    background-image: url(../../../../img/usr/free/coupon_SB/crackr01.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 60px;
    height: 60px;
    position: absolute;
}

.star_itemBox h3::after
{
    bottom: -2px;
    right: 16%;
}

.crackr_itemBox h3::after{
    bottom: -2px;
    right: 6%;
}

.crackr_bottom_itemBox h3::after{
    bottom: -2px;
    right: 12%;
}

.star_itemBox h3::before{
    background-image: url(../../../../img/usr/free/coupon_SB/starL.png);
    bottom: -2px;
    left: 16%;
}

.crackr_itemBox h3::before{
    background-image: url(../../../../img/usr/free/coupon_SB/crackr02.png);
    bottom: -2px;
    left: 6%;
}

.crackr_bottom_itemBox h3::before{
    background-image: url(../../../../img/usr/free/coupon_SB/crackr02.png);
    bottom: -2px;
    left: 12%;
}

.crackr_itemBox h3._contact::before{
    bottom: -2px;
    left: 16%;
}
.crackr_itemBox h3._contact::after{
    bottom: -2px;
    right: 16%;
}

.sec03_item {
	text-align: center;
	margin-top: 2rem;
	padding: 1.5rem;
	background-color: #fff;
	border-radius: 20px;
}
.sec03_item h4{
	background-color: #E5F6D4;
	border-radius: 50px;
	display: inline-block;
	padding: 0.625rem 1.25rem;
	font-size: clamp(1rem, 1.8vw, 1.25rem);
    margin-bottom: 0.5rem;
}


.sec03_item p{
	font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
}
.sec03_item .txt_highlight{
	font-size: 1.5rem;
    color: #4BA136;
    line-height: 1.2;
}
.sec03_item span{
	font-size: clamp(2rem, 2.5vw, 2.375rem);
}
.sec03_item span{
	font-size: 42px;
}

.sec_ttl h2{
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    text-align: center;
    border-top: 1px dashed rgba(255, 255, 255, .6);
    border-bottom: 1px dashed rgba(255, 255, 255, .6);
    padding: 2rem 1rem; 
}

.sec_ttl._02 h3{
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    text-align: center;
    border-top: 1px dashed rgba(255, 255, 255, .6);
    border-bottom: 1px dashed rgba(255, 255, 255, .6);
    padding: 2rem 1rem; 
}

.sec_ttl{
    background-color: rgb(35, 176, 186);
    padding: 0.5rem 0;
}

.sec_ttl._02{
    background-color: #E73449;
	padding: 0.5rem 0;
}

.sec01{
    background-color: rgba(35, 176, 186, .1);
    padding: 0 0 4rem;
}
.sec01_itemBox{
    width: 90%;
    margin: 2rem auto;
    text-align: center;
}
.sec01_itemBox ul{
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

.sec01_itemBox_li{
    width: 50%;
    background-color: #fff;
    border-radius: 24px;
    border: 3px solid #1d50a2;
}
.sec01_itemBox_li._02{
    border: 3px solid #E73449;
}

.sec01_itemBox h3{
    background-color: #1d50a2;
    border-radius: 20px 20px 0 0;
    padding: 0.875rem 0;
    line-height: 1.5;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    margin: -1px;
}
.sec01_itemBox_li._02 h3{
    background-color: #E73449;
}

.sec01_item{
    width: 95%;
    margin: 1rem auto;
}
.sec01_item h4{
    background-color: #1d50a2;
    border-radius: 50px;
    width: 50%;
    margin: 0 auto;
    padding: 0.5rem 0;
    font-size: 1.25rem;
}
.sec01_itemBox_li._02 h4{
    background-color: #E73449;
}

.sec01_item p{
    font-size: 1rem;
    margin-top: 0.5rem;
    line-height: 1.5;

}
.sec01_item p span{
    font-size: 1.5rem;
}
.sec01_itemBox_botom{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    background-color: #fff;
    align-items: center;
    border-radius: 14px;
    border: 3px solid #23B0BA;
    text-align: center;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.sec01_itemBox_botom ._left{
    background-color: #23B0BA;
    width: 37%;
    border-radius: 10px 0 0 10px;
    padding: 2.4rem 1.2rem ;
    line-height: 1.5;
}
.sec01_itemBox_botom ._right{
    border-radius: 0 10px 10px 0;
    width: 73%;
    padding: 1.0rem 1.2rem;
    line-height: 1.5;
	text-align: left;
}






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

	.mv{

        width: 100%;

        margin-bottom: 40px;

    }
	
	
	.btn_gazou{

        width: 80%;

        margin-bottom: 40px;

    }

.mv_pic {
text-align: center;
margin: 0 auto;
	
}

.mv_pic img{
	width:100%;

height:auto;
	
}
	
.pic003 {
text-align: center;
margin-bottom: 14px;
	
}

.pic003 img{
	width:90%;
height:auto;
	
}
	
	.pic004 {
text-align: center;
margin-bottom: 2px;
	
}

.pic004 img{
	width:46%;
height:auto;
	
}

h1{
	text-align: center;
margin:0 auto;

}	

h2{
	padding: 5% 0 3%;
	font-size: 170%;
line-height: 120%;

}

h3{
	text-align: center;
	font-size: 120%;
        font-weight: bold;
}

.titleunder_P {

	text-align: center;
	padding: 0 14px;
	font-size: 105%;
line-height: 150%;
  font-weight: bold;
}	

	.btn_wrap{

		display: block;

	}

	.cam_btn {

		width: 90%;

		margin: 10px auto;

	}
	
	

	

	.coupon_wrap,.campaign_wrap {

		width: 94%;

		padding: 15px 3px 30px;

		font-size: 16px;
	
font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;

		margin: 30px auto 20px;

	}
	
		.campaign_wrap002	
	{

		width: 100%;

		padding: 15px 15px 30;

		font-size: 16px;

		margin: 20px auto 20px;

	}
	
	.campaign_wraptokuten	
	{

		width: 94%;

		padding: 15px 2px 30px;

		font-size: 16px;

		margin: 10px auto 20px;

	}
	
	.campaign_wrap004
	{

		width: 94%;

		padding: 0px 15px 10px;

		font-size: 16px;

		margin: 20px auto 60px;

	}
	
	.title_bg {

		width: 90%;

		padding: 15px 15px 30;

		margin: 30px auto 20px;

	}

	.percent_txt{
max-width: 90%;
	margin: 15 auto 0;

}
	
	.percent_txt_num{

		font-size: calc(82 / 414* 100vw);

	}

	.percent_txt_yen {

		font-size: calc(29 / 414* 100vw);

	}

	.head-border{

		font-size: 20px;

		margin-top: 40px;

	}
.head-borderred{

		font-size: 20px;

		margin-top: 40px;

	}
	
	.coupon-copy-code {

		width: calc(300 / 414* 100vw);

		font-size: calc(30 / 414* 100vw);

		padding: calc(10 / 414* 100vw);

	}

	.coupon-copy-button {

		width: calc(170 / 414* 100vw);

		font-size: calc(15 / 414* 100vw);

	}

	.flow_wrap {

		display: block;

		margin: 0;

	}

	.flow_wrap .flow_wrap_item {

        width: 90%;

        padding: 40px 0;

        background-image: linear-gradient(to right, #BBBBBB 8px, transparent 8px);

        background-size: 15px 1px;

        background-repeat: repeat-x;

        background-position: left bottom;

		margin: 0 auto;

    }

	.flow_wrap .flow_wrap_item:first-child{

		padding-top: 0;

	}

	.flow_wrap .flow_wrap_item .flow_wrap_txt {

        font-size: 16px;

    }

	.nomal_btn {

		width: calc(270 / 414* 100vw);

	}

	.nomal_btn p{

		font-size: calc(15 / 414* 100vw);

	}

	.note {

		font-size: 18px;

	}
	
	.note_s {

		font-size: 13px;

	}

	.item_list {

		width: 90%;

		margin: 20px auto 40px;

	}

	.item_list li {

		width: calc((100% - 12* 2px) / 3);

	}

	.percent_txt_point{

		font-size: calc(26 / 414* 100vw);

	}

	.customer {

		width: 90%;

	}

	.customer ul {

		display: block;

	}

    .customer_campain{

        font-size: 18px;

    }

	.customer_center {

        font-size: 14px;

    }

	.tel {

        font-size: 22px;

    }
	
	.dispcription {
	text-align: left;
	list-style: disc;
    padding: 4% 2% 0px;
  }
	.dispcription ul {
  list-style: disc;
  padding-left: 5vw;
		font-size: 120%;
}
	
	
.dispcription ul li {
  margin-bottom: 2%;
  list-style-type: disc;
  line-height: 150%;
}
.dispcription ul li b {
  color: red;
}
	
	
.star_itemBox{
    margin: 2rem auto 0;
    margin-top: 3rem;
}
	
.crackr_itemBox{
    
    margin: 1rem auto;    
    margin-top: 3rem;
}	
	
.crackr_bottom_itemBox{
    
    margin: 1rem auto;    
    margin-top: 3rem;
}	
.star_itemBox h3::after,
.star_itemBox h3::before,
.crackr_itemBox h3::after,
.crackr_itemBox h3::before,
.crackr_bottom_itemBox h3::after,
.crackr_bottom_itemBox h3::before{
    width: 48px;
    height: 48px;
    position: absolute;
}
.star_itemBox h3::after
{
    bottom: -2px;
    right: -3%;
}
	

.crackr_itemBox h3::after{
    bottom: 8px;
    right: -10%;
}
.crackr_bottom_itemBox h3::after{
    bottom: 8px;
    right: -2%;
}
.star_itemBox h3::before{
    bottom: -2px;
    left: -3%;
}

.crackr_itemBox h3::before{
    bottom: 8px;
    left: -10%;
}
.crackr_bottom_itemBox h3::before{
    bottom: 8px;
    left: -2%;
}
	
.crackr_itemBox h3._contact::before{
    bottom: -2px;
    left: 8%;
}
.crackr_itemBox h3._contact::after{
    bottom: -2px;
    right: 8%;
}

.sec03_item {
	text-align: center;
	margin-top: 2rem;
	padding: 1.5rem;
	background-color: #fff;
	border-radius: 20px;
}
.sec03_item p{
	font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
}
.sec03_item span{
	font-size: clamp(2rem, 2.5vw, 2.375rem);
}
.sec03_item span{
	font-size: 42px;
}

.sec01_itemBox ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}
.sec01_itemBox_li{
    width: 100%;
}
.sec01_item{
    width: 100%;
        margin: 1rem auto 1.5rem;
}
.sec01_item h4{
    width: 60%;

}
.sec01_itemBox_botom ._left{
	width: 50%;
    padding: 1rem 0;
    line-height: 1.5;
}
.sec01_itemBox_botom ._right{
	width: 50%;
    font-size: 1.25rem;
    padding: 1rem 0;
}
	
.sec_ttl._02{
    background-color: #E73449;
}	
	
	.date_note__wrap h4{
    font-size: 130%;

}
	
	.date_note__wrap p{
    font-size: 150%;

}

}