@charset "utf-8";

/* CSS Document */

*{

    margin: 0;

    padding: 0;

    list-style-type: none;

	box-sizing: border-box;

}

body{background-color: #FFFEE9;}

.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;

}

.pic002 {
text-align: center;
	
}

.pic002 img{
width:90%;
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;

}

.percent_txt{

	font-weight: bold;

	color: #E9091A;

	display: flex;

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

	width: fit-content;

    margin: 0 auto;

	align-items: flex-end;

}

.percent_txt_num{

	font-size: 150px;

	line-height: 1;

}

.percent_txt_yen{

	font-size: 55px;

    line-height: 1.2;

    text-align: left;

}



.head-border {

    display: flex;

    align-items: center;

	font-size: 30px;

	margin: 60px 0 20px;

}



.head-border:before,

.head-border:after {

    content: "";

    height: 1px;

    flex-grow: 1;

    background-color: #BBBBBB;

}



.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: #444444;

    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: #fce59f;

width: 670px;

padding: 20px;

margin: 20px auto;

border-radius:10px;

    border: none;

}

.coupon-copy-button {

display: block;

align-items: center;

padding: 10px 20px;

background-color: #444444;

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: #E9091A;

}

.note{

	font-size: 18px;

	line-height: 2;

    width: 90%;

    margin: 0 auto;

    text-align: left;

}



h2{

	text-align: center;

}

h3{
	text-align: center;
        font-weight: bold;
	padding: 0 6%;
}

.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;

	max-width: 1200px;

	border-radius:10px;

	background-color: #FFF;

	padding: 60px 40px 50px;

	margin: 50px auto;

	text-align: center;

	border: solid 2px #f29800;

}

.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;

}



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

	.mv{

        width: 100%;

        margin-bottom: 40px;

    }
	
	
	.btn_gazou{

        width: 80%;

        margin-bottom: 40px;

    }

.pic002 {
text-align: center;
	
}

.pic002 img{

height:auto;
	
}

	

	.btn_wrap{

		display: block;

	}

	.cam_btn {

		width: 90%;

		margin: 10px auto;

	}
	
	

	

	.coupon_wrap,.campaign_wrap {

		width: 90%;

		padding: 40px 15px;

		font-size: 16px;

		margin: 30px auto 40px;

	}

	.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;

	}

	.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: 14px;

	}

	.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;

    }

}