/*////////////////////////// Hero //////////////////////////////*/

#top_hero{
width: 100%;
background: #fff7af;
display: grid;
grid-template-columns: 1fr 60vw 1fr;
align-content: center;
border-bottom: solid 1px rgba(0,0,0,0.1);
}

#top_movie {
width: 100%;
margin: auto;
position: relative;
}

#top_movie img,
#top_movie video{
width: 100%;
height: auto;
vertical-align: bottom;
}

.top_banner1{
background: #fff;
border-radius: 10px;
display: grid;
align-content: center;
width: 84%;
height: 45%;
border: solid 1px rgba(0,0,0,0.1);
margin: auto;
margin-top: 5.5%;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.2);
position: relative;
}
.banner_circle{
position: absolute;
border-radius: 50%;
width: 4vw;
height: 4vw;
background: #EA0003;
background: #0172dc;
text-align: center;
color: #fff;
top: 5px;
left: 5px;
z-index: 2;
display: grid;
align-content: center;
}

.banner_circle img{
width: 80%;
margin: auto;
}
.top_banner_inner{
text-align: center;
margin: auto;
position: relative;
}
.top_banner_inner a{
display: grid;
align-content: center;
}
.top_banner_inner a h4{
font-size: 1.2vw;
}
.top_banner_inner .pic{
width: 86%;
aspect-ratio: 4 / 2.8;
overflow: hidden;
margin: auto;
padding-bottom: 10px;
}
.top_banner_inner .pic img{
width: 100%;
height: 100%;
object-fit: cover;
}


@media screen and (min-width:1600px){
#top_hero{
grid-template-columns: 1fr 1000px 1fr;
}
.top_banner1{
height: 43%;
}
.top_banner_inner a h4{
font-size: 0.9vw;
}
}

@media screen and (min-width:1780px){
.top_banner_inner .pic{
width: 86%;
aspect-ratio: 4 / 2;
overflow: hidden;
margin: auto;
padding-bottom: 10px;
}
}

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

#top_hero{
background: #fff;
padding-top: 15px;
}
}
@media screen and (max-width:768px){
#top_hero{
display: block;
}
.top_hero_banner_left{
display: none;
}
.top_hero_banner_right{
display: none;
}
}



/*////////////////////////// Cleaning Menu List //////////////////////////////*/

#topmenu{
width: 100%;
background: #f1fcff;
padding: 40px 0 0;
}
.topmenu_box p.topmenu_catch br{
display: none;
}
#topmenu h2{
font-weight: bold;
}
#topmenu h4.catch{
padding-top: 1em;
font-size: 1.5rem;
text-align: center;
font-weight: bold;
}
#topmenu h4.catch span{
font-size: 70%;
}
.topmenu_wrap{
position: relative;
width: 90%;
max-width: 1200px;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
gap:2%;
}
.topmenu_box{
width: 276px;
position: relative;
background: #fff;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 6%;
}
.icon_time{
position: absolute;
left: -5px;
top: -5px;
width: 90px;
z-index: 3;
}
.topmenu_pic{
margin-bottom: 5px;
border-top-right-radius: 20px;
width: 100%;
aspect-ratio:2 / 1;
overflow: hidden;
}
.topmenu_pic img{
width: 100%;
height: 100%;
object-fit: cover;
}
.topmenu_txt{
padding: 8px 0 12px;
}
.topmenu_box h3{
text-align: center;
font-size: 1.60rem;
font-feature-settings: "palt";
padding-bottom: 0.1em;
}
.topmenu_box p.topmenu_catch{
font-size: 0.95rem;
text-align: center;
font-feature-settings: "palt";
padding-bottom: 0;
}
.topmenu_box h4.price{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
margin-top: 10px;
}
.topmenu_box h4.price span{
font-size: 55%;
font-weight: normal;
}
.topmenu_box h4.price span.free{
font-size: 55%;
font-weight: bold;
background: #fff7af;
border-radius: 3px;
padding: 0.25em 2em;
display: inline-block;
margin: 10px 0 10px;
}

@media screen and (max-width:1320px){
.topmenu_wrap{
position: relative;
width: 90%;
max-width: 1200px;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap:2%;
}
.topmenu_box{
width: 31%;
}
}

@media screen and (max-width:870px){
.topmenu_box{
width: 48%;
}
}

@media screen and (max-width:600px){
.topmenu_wrap {
margin: 20px auto 30px;
}
.topmenu_box h3{
text-align: center;
font-size: 1.40rem;
font-feature-settings: "palt";
padding-bottom: 0.1em;
}
.topmenu_box h4.price{
text-align: center;
font-size: 1.8rem;
font-weight: bold;
}
.topmenu_box p.topmenu_catch{
font-size: 0.85rem;
}
}

@media screen and (max-width:500px){
.topmenu_box h3{
font-size: 1.10rem;
font-weight: bold;
padding-bottom: 5px;
}
#topmenu h4.catch {
font-size: 1.2rem;
}
.topmenu_box h4.price{
font-size: 1.6rem;
padding-top: 5px;
margin-top: 0;
}
.topmenu_box h4.price span.free{
margin: 10px 0 0;
}
.topmenu_box p.topmenu_catch{
font-size: 0.80rem;
line-height: 1.2;
}
.topmenu_box p.topmenu_catch br{
display: block;
}
.icon_time{
position: absolute;
left: -5px;
top: -5px;
width: 75px;
z-index: 3;
}
}


/*////////////////////////// DonDon Wari //////////////////////////////*/

#dondon{
width: 100%;
background: #fff;
padding: 60px 0 40px;
}
.dondon_wrap{
position: relative;
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #fffadc;
color: #5d4d42;
padding: 20px 30px 10px;
border-radius: 20px;
}
.dondon_title{
position: absolute;
left: 0;
top: -30px;
z-index: 2;
}
.dondon_img{
width: 61%;
text-align: center;
}
.dondon_txt{
width: 38%;
text-align: center;
display: grid;
align-content: center;
}
.dondon_txt h2 {
width: 100%;
font-size: 1.4rem;
font-weight: bold;
background: #ff6248;
border-radius: 10px;
color: #fff;
padding: 0.25em 0;
margin-bottom: 0.25em;
}
.dondon_txt p{
font-size: 1.4rem;
line-height: 1.7;
padding-bottom: 0;
font-weight: bold;
}
.dondon_txt p a{
display: inline-block;
position: relative;
text-decoration: none;
border-bottom: 0;
}
.dondon_txt p a::after {
content: "";
position: absolute;
left: 0;
bottom: 4px; 
width: 100%;
height: 1px; 
background-color: #604c3f;
}

@media screen and (max-width:1080px){
.dondon_img{
width: 60%;
text-align: center;
}
.dondon_txt{
width: 40%;
}
.dondon_txt p{
font-size: 1.3rem;
}
}
@media screen and (max-width:960px){
.dondon_img{
width: 100%;
text-align: center;
}
.dondon_txt{
width: 100%;
text-align: center;
display: grid;
align-content: center;
}
}
@media screen and (max-width:640px){
#dondon{
padding: 30px 0;
}
.dondon_txt h2 {
width: 100%;
font-size: 1.2rem;
font-weight: bold;
background: #ff6248;
border-radius: 10px;
color: #fff;
padding: 0.25em 0;
margin-bottom: 0.25em;
}
.dondon_txt p{
font-size: 1.2rem;
}
}

@media screen and (max-width:600px){
.dondon_title{
width: 200px;
}
.dondon_wrap{
padding: 20px 10px 10px;
}
}


/*////////////////////////// Payment / Guarantee //////////////////////////////*/

#guarantee{
width: 100%;
background: #f1fcff;
padding: 40px 0;
}
.guarantee_wrap{
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.guarantee_wrap h2{
font-size: 30px;
font-weight: normal;
padding-bottom: 0.5em;
}

.guarantee_wrap p{
font-size: 1.2rem;
padding-bottom: 0.5em;
}
.guarantee_wrap p.note{
font-size: 0.9rem;
}
.guarantee_box{
width: 49.5%;
position: relative;
display: flex;
justify-content: space-between;
background: #fff;
padding: 20px 30px;
border-radius: 20px;
}
.guarantee_txt{
width: 75%;
}
.guarantee_illust{
width: 24%;
position: relative;
}
.guarantee_illust img{
position: absolute;
bottom: 0.5em;
}
.payment_box{
width: 49.5%;
display: flex;
justify-content: space-between;
background: #fff;
padding: 20px 30px;
border-radius: 20px;
}
.payment_txt{
width:60%;
}
.payment_img{
width: 38%;
align-items: center;
align-content: center;
}

.payment_img img.pay_card_sp{
display: none;
}
.payment_card{
display: none;
}

@media screen and (max-width:1280px){
.guarantee_txt{
width: 70%;
}
.guarantee_illust{
width: 29%;
position: relative;
}
.guarantee_illust img{
position: absolute;
bottom: 0;
top: 0;
margin: auto;
}
}

@media screen and (max-width:960px){
.guarantee_box{
width: 100%;
position: relative;
display: grid;
grid-template-columns: 1fr 160px;
background: #fff;
padding: 30px 30px;
border-radius: 20px;
margin-bottom: 25px;
}
.guarantee_txt{
width: auto;
}
.guarantee_illust{
width: auto;
position: relative;
}
.payment_box{
width: 100%;
display: flex;
justify-content: space-between;
background: #fff;
padding: 20px 30px;
border-radius: 20px;
}
.payment_txt{
width:50%;
}
.payment_img{
width: 48%;
aspect-ratio:4 / 2.6;
overflow: hidden;
}
.payment_card{
display: block;
width: 100%;
max-width: 300px;
}
.payment_img img.pay_card_sp{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.payment_img img.pay_card_pc{
display: none;
}
}

@media screen and (max-width:640px){
#guarantee{
padding: 30px 0;
}
.guarantee_wrap h2{
text-align: center;
}
.guarantee_box{
width: 100%;
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 130px;
}
.guarantee_illust{
width: auto;
position: relative;
}
.guarantee_illust img{
top: auto;
left: 0;
right: 0;
width: 120px;
margin: auto;
}
.payment_box{
flex-wrap: wrap;
}
.payment_txt{
width:100%;
}
.payment_img{
width: 90%;
max-width: 320px;
margin: auto;
aspect-ratio:4 / 2.4;
overflow: hidden;
}
.payment_card{
margin: auto;
width: 100%;
max-width: 300px;
}
}