@charset "utf-8";

/* CSS Document */

*{

    margin: 0;

    padding: 0;

    list-style-type: none;

	box-sizing: border-box;

}

body{background-color: #fcf9f3;
}

.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: 90%;
height: auto;
	
}

.pic003 {
text-align: center;
	
}

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

}

.toiawase_wrap{

	
	font-size: 26px;
	
	width: 90%;

	max-width: 1200px;	

	background-color: #f9eddf;

	padding: 20px 30px 20px;

	margin: 60px auto;

	text-align: center;

	border: none;


}


.btm_note__wrap {
	width: 100%;
      border: 4px solid #990000;
	margin: 10px auto;
      padding: 0px 0px 30px;
      border-radius: 10px;
       }

.step_wrap{

	font-size: 26px;

	width: 100%;

	border-radius:10px;
	border: solid 2px #62b775;

	background-color: #eafaea;

	padding: 16px 16px 30px;

	margin: 20px auto;

	text-align: left;

}

.presentnaiyou_wrap{

	font-size: 26px;

	width: 100%;

	border-radius:10px;
	border: solid 2px #62b775;

	background-color: #ffffff;

	padding: 24px 16px 30px;

	margin: 20px auto;

	text-align: center;

}

.tokuten_wrap{

	
	width: 100%;

	background-color: #eafaea;

	padding: 0px;
	text-align: center;

	border: none;

}

.coupon_wrap{

	font-size: 26px;

	max-width: 1200px;
	

	padding: 10px 40px 40px;

	margin: 0px auto;

	text-align: center;

}

.percent_txt{

	font-weight: bold;

	color: #FF0000;

	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-004 {
background-color: #990000;
	border-radius: 6px 6px 0 0;
	color: #FFFFFF;
	padding: 12px 10px;
	text-align: center;
	font-size: 90%;
	}

.head-003 {
	margin: 3% 0 0;
	padding: 6px;
	font-size: 90%;
	text-align: center;
}
.head-002 {
background-color: #337a39;
	color: #FFFFFF;
	padding: 6px;
	text-align: center;
	}

.head-001 {
    padding: 0.1em 0.5em;
	margin: 50px 0 20px;
    border-left: 5px solid #62b775;
    color: #62b775;
}

.head-border {

    display: flex;

    align-items: center;

	margin: 14px 0;

}



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

}

.non_active_btn{

    background-color: #444444;

    border-radius: 150px;

    width: 500px;

    height: 70px;

    position: relative;

	margin: 30px auto 20px;
	
	
}

.non_active_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{

    background-color: #e18300;

    border-radius: 150px;

    width: 500px;

    height: 70px;

    position: relative;

	margin: 30px auto 20px;
	
	
}

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

width: 400px;

padding: 20px;

margin: 20px auto;

border-radius:10px;

    border: none;

}

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

}

.present_text{
	text-align: center;
	font-size: 120%;
font-family: "Noto Sans JP", sans-serif;
        font-weight: bold;
	padding: 6px 0;
}

.note{

	font-size: 18px;

	line-height: 1.5;

    width: 90%;

    margin: 20px auto 5px;

    text-align: left;

}


.note_s{

	font-size: 14px;

	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: 4% 0 2%;
	font-size: 190%;
font-family: "Noto Sans JP", sans-serif;
line-height: 150%;
  font-weight: 800;
  color: #007b30;

}

h3{
	text-align: left;
	font-size: 150%;
font-family: "Noto Sans JP", sans-serif;
        font-weight: bold;
}

h4{
	text-align: left;
	font-size: 120%;
font-family: "Noto Sans JP", sans-serif;
        font-weight: bold;	
}

.st_right_text{
	text-align: left;
	font-size: 116%;
font-family: "Noto Sans JP", sans-serif;
        font-weight: bold;
	padding: 6px 0;
}

.titleunder_P {

	text-align: center;
	padding: 0 14px;
	font-size: 120%;
font-family: "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)/2);
padding: 20px;
	background-color: #FFFFFF;
	border-radius:10px;
	border: solid 2px #62b775;

	aspect-ratio: 1 / 1.2;

}
.item_list li ul li{

	all: unset;
	padding: 4px 0;
  line-height: 150%;
	text-align: left;
	display: list-item;
	list-style: disc;
	font-size: 16px;

}


.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; /* 縦方向の位置調整 */

}

.present_wrap{

	font-size: 26px;
	font-family: "Noto Sans JP", sans-serif;
	width: 80%;

	max-width: 1200px;

	padding: 10px 40px 50px;

	margin: 10px auto;

	text-align: center;
	}


.campaign_wrap{

	font-size: 26px;
	font-family: "Noto Sans JP", sans-serif;
	width: 80%;

	max-width: 1200px;

	padding: 0px 40px 50px;

	margin: 0px auto;

	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: 48px;

	font-weight: bold;

	margin-right: 20px;

}

.time{

	font-size: 16px;

}

.dispcription {
	text-align: left;
	list-style: disc;
    padding: 2% 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;
}


.step_box {
        overflow: hidden; /* floatをクリアするために必要 */
    }

    .step_box h4,
    .step_box .st_right_text {
        float: left;
        margin-right: 10px; /* 見出しとテキストの間に余白を設ける場合 */
    }

@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;
	
}

.pic003 img{
	width:90%;

height:auto;
	
}

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

}	

h2{

	padding: 4% 0;
	font-size: 170%;
line-height: 120%;

}

h3{
	text-align: left;
	font-size: 130%;
        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: 98%;

		padding: 10px 15px;

		font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;

		margin: 0px auto 40px;

	}
	
	.presentnaiyou_wrap {

		width: 98%;

		padding: 20px 15px;

		font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;

		margin: 20px auto 40px;

	}
	
	.step_wrap,.btm_note__wrap {

		width: 98%;

		padding: 0 0 2% 0;

		font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;

		margin: 20px auto 40px;

	}
	
	.toiawase_wrap{

	
	font-size: 22px;
	
	width: 98%;	

	padding: 20px 15px ;

	margin: 30px auto;


}

	.percent_txt_num{

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

	}

	.percent_txt_yen {

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

	}

	.head-002 {
		border-radius: 8px 0 0 0;
	padding: 10 4;
	text-align: center;
	font-size: 90%;
	}
	
	.head-border{

		font-size: 20px;

		margin-top: 2%;

	}

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

    }


	.non_active_btn {

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

	}

	.non_active_btn p{

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

	}


	.nomal_btn {

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

	}

	.nomal_btn p{

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

	}

	.note {

		font-size: 14px;

	}
	
	.note_s {

		font-size: 11px;

	}

	.item_list {
		width: 90%;
		flex-direction: column;

		margin: 20px auto 40px;

	}

	.item_list li {

		width: 100%;
		margin: 20px auto 20px;
		aspect-ratio: 1 / 1;

	}

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

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

}