@charset "utf-8";

/* CSS Document */

*{

    margin: 0;

    padding: 0;

    list-style-type: none;

	box-sizing: border-box;

}

body{background-color: #ffffff;	
}

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

}

.gift-container {
            max-width: 1200px;
            margin: 10px auto 20px; /* 上の余白を少し詰めました */
            padding: 20px;
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            color: #333;
            line-height: 1.8;
            font-size: 18px; 
        }

.gift-header {
            text-align: center;
            border-bottom: 4px solid #004da0;
            margin: 20px auto 30px; /* 余白調整 */
            padding-bottom: 20px;
        }

        .gift-header h1 {
            font-size: 2.2rem;
			font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            color: #004da0;
            margin: 0;
            letter-spacing: 0.05em;
        }

     /* お届け目安：文字サイズアップと余白調整 */
        .schedule-box {
            background: #f0f8ff;
            border: solid 2px #00a0e9;
            padding: 30px 6px 40px; /* 上下パディングを増やして存在感をアップ */
            margin-bottom: 40px;
            border-radius: 12px;
            text-align: center;
			font-family: 'Noto Sans JP', sans-serif;
        }

        .schedule-title {
            font-weight: bold;
            color: #004da0;
            font-size: 1.8rem; /* タイトルを大きく */
			padding: 8px 0;
            margin-bottom: 15px;
        }
.schedule-title h2{
    font-size: 1.8rem;
		font-weight: bold;
	color: #004da0;
    position: relative;
    text-align: center;
}

.schedule-title h2::before{
	content: "";
    background-image: url(../../../../img/usr/free/information_catalog/image_car.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 65px;
    height: 47px;
    position: absolute;
	bottom: 5%;
    left: 31%;
	}



        .schedule-text {
            font-size: 1.4rem; /* 本文を大きく */
            line-height: 1.6;
        }

    /* コンテンツ枠 */
        .content-box {			
            background: #fff;
            border: none;
            border-radius: 12px;
            padding: 40px 40px 0px;
            margin-bottom: 10px;
			font-family: 'Noto Sans JP', sans-serif;
        }

        .box-title {
            font-weight: bold;
            font-size: 1.8rem;
            margin: 0 0 25px 30px;
            padding-left: 15px;
            border-left: 6px solid #00a0e9;
            color: #004da0;
        }

        .copy-box {
			width: 80%;
            background: #fdfdfd;
            border: 2px dashed #00a0e9; 
			margin: 0 auto 16px;
            padding: 25px;
            font-family: monospace;
            font-size: 1.2rem;
            line-height: 2.2;
            text-align: left;
            white-space: pre-wrap; 
        }

        .btn-area {
            text-align: center;
            margin-bottom: 60px;
        }

        .btn-contact {
            display: inline-block;
            background: #004da0;
            color: #fff !important;
            padding: 25px 80px;
            border-radius: 60px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.6rem;
            box-shadow: 0 6px 20px rgba(0, 77, 160, 0.3);
            transition: 0.3s;
            margin-bottom: 15px;
        }

        .nav-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 800px;
            margin: 40px auto 0;
        }

        .btn-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
            transition: 0.3s;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        }

        .btn-tokushu { background: #00a0e9; color: #fff !important; }
        .btn-webcat { background: #fff; color: #00a0e9 !important; border: 2px solid #00a0e9; }
        .btn-nav:hover { opacity: 0.8; transform: translateY(-2px); }

        .btn-top {
            display: inline-block;
            background: #0056b3; 
            color: #fff !important;
            padding: 15px 40px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 1.1rem;
        }



.readP{
font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;

	line-height: 2;

    width: 90%;
    
	padding: 0 14px; font-weight:bold; margin: 30px auto 40px;

    text-align: center;

}

.pointuseimage{
	max-width: 800px;
	width: 100%;
	margin: 0 auto 0;
	display: block;
}

.btn_gazou{

	max-width: 620px;

	width: 100%;

	margin: 0 auto 100px;

	display: block;

}

.mv_pic {
text-align: center;
	
}

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

.pic003 {
text-align: center;
	
}

.pic003 img{
width:80%;
height:auto;
	margin: 20px auto;
	
}

.pic002 {
text-align: center;
	
}

.pic002 img{
width:35%;
height:auto;
	margin: 5px auto 25px;
	
}


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

    border-radius: 5px;

    width: 500px;

    height: 88px;

    position: relative;

}

.cam_btn p{

    color: #fff;

    font-size: 20px;
	font-weight: bold;

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

}

.rightside{
	cursor:pointer;
}
.rightside p::after{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 25%;
}


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

	display: flex;

	background: linear-gradient(transparent 85%, #e4ff4c 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;

}

.percent_txt_point{

	font-size: 55px;

    line-height: 1.2;

    text-align: left;

}

.percent_txt_point2{

	font-size: 88px;

    line-height: 1.2;

    text-align: left;

}


.head-border {

    display: flex;

    align-items: center;

	font-size: 30px;

	margin: 30px 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;

}



.kakomi0 {
        background-color: #e50213;
        padding: 6px 0;
        text-align: center;
        font-size: 150%;
        margin: 25px auto 20px;
        font-weight: 600;
        color: #fff;
        border-radius: 0px; }



.kakomi {
        background-color: #e50213;
        padding: 6px 0;
        text-align: center;
        font-size: 150%;
        margin: 40px auto 20px;
        font-weight: 600;
        color: #fff;
        border-radius: 0px; }

.kakomi1 {
        background-color: #00a0e9;
        padding: 6px 0;
        text-align: center;
        font-size: 150%;
        margin: 25px auto 20px;
        font-weight: 600;
        color: #fff;
        border-radius: 0px; }
.kakomi2 {
        background-color: #00a0e9;
        padding: 6px 0;
        text-align: center;
        font-size: 150%;
        margin: 40px auto 20px;
        font-weight: 600;
        color: #fff;
        border-radius: 0px; }


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

    height: 88px;

    position: relative;

	margin: 40px auto 50px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	
	
}

.nomal_btn p{

    color: #fff;

    font-size: 1.8rem;
	font-weight: bold;

    text-align: center;

    position: absolute;

    line-height: 1;

    width: 100%;

    top: 50%;

    transform: translate(0, -50%);

}

.nomal_btn p::after{

    content: "";

    position: absolute;

    width: 12px;

    height: 12px;

    border-top: solid 2px #fff;

    border-right: solid 2px #fff;

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

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

    top: 50%;

    right: 40px;

}

.nomal_btn a{

	width: 100%;

	height: 100%;

	position: absolute;

	left: 0;

}

.nomal_btn:hover { opacity: 0.8; transform: translateY(1px); transition: 0.8 ease;}

.nomal_btn.irochi { background-color: #eb9e3d;
margin: 30px auto;}

.copybt {
	width:80%; margin:10px auto; padding:16px 12px; cursor:pointer; background:#f0f4f8; border:1px solid #00a0e9; color:#004da0; font-size: 1.3rem; font-weight:bold; border-radius:5px; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.copybt:hover { opacity: 0.8; transform: translateY(1px); transition: 0.8 ease;}

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

}

.note{

	margin:15px auto 0; font-size: 1rem; color: #555;
	

	line-height: 2;

    width: 90%;

    text-align: center;

}
.note_b{

	margin:15px auto 25px; font-size: 1.2rem; color: #555;
	

	line-height: 1.5;

    width: 100%;

    text-align: center;

}

.note_s{

	font-size: 14px;

	line-height: 2;

    width: 90%;

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

    text-align: left;

}




h4{
	text-align: center;
	margin: 60px 0 0;
	font-size: 30px;
        font-weight: bold;
	color: #1d50a2;
}

.bottom {margin: 0 auto;
        padding: 34px 0 0;
        text-align: center;
        font-size: 150%;
         }
h3{
	text-align: center;
	font-size: 1.8rem;
        font-weight: bold;
	color: #004da0;
	margin: 25px 0 ;
}

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

}

.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-family: 'Noto Sans JP', sans-serif;
	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; /* 縦方向の位置調整 */

}


.sanka_wrap {

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

	max-width: 1200px;	

	background-color: #FFFFFF;

	padding: 20px 10px 20px;

	margin: 60px auto;

	text-align: center;

	border: none;


}


.toiawase_wrap {

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

	max-width: 1200px;	

	background-color: #FFFFFF;

	padding: 0 10px 20px 10px;

	margin: 60px auto;

	text-align: center;

	border: solid 2px #BBBBBB;


}

.jouken_wrap{

	
	width: 100%;

	background-color: #fafaef;

	padding: 10px 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;

	border: none;

}

.oisogi_wrap{

	
	width: 100%;

	background-color: #eff4fa;	
	padding: 20px 10px 10px;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;

	border: none;

}
.nanaco2_wrap{

	
	width: 100%;

	background-color: #FFFFFF;	
padding: 10px 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;

	border: none;

}


.campaign_wrap{

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

	max-width: 1200px;

	border-radius:0px;

	background-color: #FFF;

	padding: 5px 40px 50px;

	margin: 10px auto 50px;

	text-align: center;

	border: solid 2px #BBBBBB;

}

.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: 180%;

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

@media screen and (max-width: 980px){
	.schedule-title h2::before
{
	width: 55px;
    height: 37px;
    bottom: 5px;
    left: 22%;
}
 }	

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

	.mv{

        width: 100%;

        margin-bottom: 40px;

    }
	
	
	.nav-buttons { grid-template-columns: 1fr; padding: 0 10px; }
            .gift-header h1 { font-size: 1.8rem; }
            .schedule-title { font-size: 1.7rem; }
            .schedule-text { font-size: 1.2rem; }
            
            .content-box { padding: 10px 0px; }
	
	.copy-box {
			width: 96%;
            padding: 12px;
            font-size: 1rem;
            line-height: 2.2;
        }
	
	
	.btn_gazou{

        width: 80%;

        margin-bottom: 40px;

    }

.mv_pic {
text-align: center;
	
}

.mv_pic img{
	width:100%;

height:auto;
	
}
	
.pic003 {
text-align: center;
	
}

.pic003 img{
	width:98%;

height:auto;
	
}	
	
	.pic002 img{
width:60%;
height:auto;
	margin: 5px auto 15px;
	
}
	
	.readP{

	font-size: 16px;

	line-height: 150%;

    width: 96%;
    
	padding: 0 ; font-weight:bold; margin: 30px auto;

    text-align: center;

}

h2{

	font-size: 1.0rem;
	padding: 2% 0 2%;
line-height: 110%;

}

h3{
	text-align: center;
	font-size: calc(18 / 414* 100vw);
        font-weight: bold;
}	
	
	h4{
	text-align: center;
	margin: 45px 0 0;
	font-size: 150%;
        font-weight: bold;
	color: #1d50a2;
}

	


.schedule-title h2::before
{
	width: 53px;
    height: 37px;
    bottom: 5px;
    left: 16%;
}
	
	.btn_wrap{

		display: block;

	}

	.cam_btn {

		width: 90%;

		margin: 10px auto;

	}
	
	

	

	.coupon_wrap,.campaign_wrap {

		width: 90%;

		padding: 0px 15px 40px ;

		font-size: 16px;

		margin: 0px auto 40px;

	}

	.percent_txt_num{

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

	}

	.percent_txt_yen {

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

	}
	
	.percent_txt_point {

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

	}
	
	.percent_txt_point2 {

		font-size: calc(58 / 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 0 5px;
		

	}

	.flow_wrap .flow_wrap_item {

        width: 70%;

        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;

    }
	
	
	.sanka_wrap {
	font-size: 18px;

	padding: 0 5 20;

	margin: 0 auto 20px;



}
	
	.toiawase_wrap {
	font-size: 18px;

	padding: 0 5 20;

	margin: 20px auto;



}
	
	
	
.kakomi0 {
        
        margin: 10px auto 20px;
         }
	.kakomi1 {        
        margin: 10px auto 20px;
         }
	
	.nomal_btn {

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

	}

	.nomal_btn p{

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

	}
	.nomal_btn p::after{

    content: "";

    position: absolute;

    width: 6px;

    height: 6px;

    border-top: solid 2px #fff;

    border-right: solid 2px #fff;

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

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

    top: 50%;

    right: 16px;

}

.nomal_btn.irochi P{ font-size: calc(22 / 414* 100vw);}
	.note {

		font-size: 14px;

	}
	
	.note_b {
margin:10px auto 10px;
		font-size: 16px;

	}
	.note_s {

		font-size: 12px;

	}

	.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: 150%;

    }
	.bottom {
        padding: 25px 0 0;
        text-align: center;
        font-size: 150%;
         }
	
	.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;
}
	.box-title {
            
            font-size: 1.6rem;
            margin: 0 0 20px 0;
        }
	 }
	@media screen and (max-width: 414px){

		h3{	
	font-size: 95%;
}	
}