@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

#sb_summer_0701 *{ box-sizing: border-box;}
#sb_summer_0701 ul, #sb_summer_0701 ol, #sb_summer_0701 li, #sb_summer_0701 dl, #sb_summer_0701 dt, #sb_summer_0701 dd{ list-style: none; padding: 0; margin: 0;}
#sb_summer_0701 figure{ padding: 0; margin: 0;}
#sb_summer_0701{ width: 100%; max-width: 980px; margin: 0 auto; height: 100%; font-size: 20px; font-family: YakuHanJP, "Roboto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
#sb_summer_0701 .content_box{ width: 100%; max-width: 900px; margin: 0 auto;}
#sb_summer_0701 a{ color: #006ed6;}
#sb_summer_0701 a:hover{ opacity: 0.8;}
#sb_summer_0701 p{ margin: 0; line-height: 1.5em;}
#sb_summer_0701 img{ width: 100%; max-width: 100%; height: auto; vertical-align: bottom;}
#sb_summer_0701 sup{ vertical-align: super; font-size: 60%;}
#sb_summer_0701 h1,#sb_summer_0701 h2,#sb_summer_0701 h3,#sb_summer_0701 h4,#sb_summer_0701 h5,#sb_summer_0701 h6{ background: none; border: none; padding: 0; margin: 0; font-weight: bold;}
@media screen and (max-width: 980px) {
#sb_summer_0701{ min-width: 240px; font-size: 3.75vw; margin-top:2.5%; font-size-adjust: none; -webkit-text-size-adjust: 100%; overflow: hidden; background-size: 7.5vw;}
#sb_summer_0701 .content_box{ width: 92.5%;}
}



/*head*/
#sb_summer_0701 #head{ background: #fff;}



/*fv*/
#sb_summer_0701 #fv{ padding: 90px 0 140px; background: url("../images/fv_bg.png") center bottom no-repeat; background-size: 100%; position: relative; z-index: 9;}
#sb_summer_0701 #fv:after{ content: ""; width: 100%; height: 200px; background: url("../images/fv_ico.png") center top no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; z-index: -1;}
#sb_summer_0701 #fv .paypay{ width: 120px; position: absolute; left: 30px; top: 570px;}
#sb_summer_0701 #fv h1{ width: 900px; margin: 0 auto 20px;}
#sb_summer_0701 #fv figure.flow{ width: 900px; margin: 0 auto;}
#sb_summer_0701 #fv h2.lead_tit{ width: 220px; position: absolute; left: 0; right: 0; bottom: -110px; margin: auto; z-index: 5;}
@media screen and (max-width: 980px) {
#sb_summer_0701 #fv{ padding: calc((90/980)*100vw) 0 calc((140/980)*100vw);}
#sb_summer_0701 #fv:after{ height: calc((200/980)*100vw);}
#sb_summer_0701 #fv .paypay{ width: calc((120/980)*100vw); left: calc((30/980)*100vw); top: calc((570/980)*100vw);}
#sb_summer_0701 #fv h1{ width: calc((900/980)*100vw); margin: 0 auto calc((20/980)*100vw);}
#sb_summer_0701 #fv figure.flow{ width: calc((900/980)*100vw);}
#sb_summer_0701 #fv h2.lead_tit{ width: calc((220/980)*100vw); bottom: calc((-110/980)*100vw);}
}



/*lead*/
#sb_summer_0701 #lead{ margin-top: -110px; padding: 240px 0 60px; background: #014ea0; position: relative; z-index: 7;}
#sb_summer_0701 #lead ul{ display: flex; align-items: center; justify-content: space-between; margin: auto;}
#sb_summer_0701 #lead ul li{ width: calc(50% - 10px);}
@media screen and (max-width: 980px) {
#sb_summer_0701 #lead{ margin-top: calc((-110/980)*100vw); padding: calc((240/980)*100vw) 0 calc((60/980)*100vw);}
#sb_summer_0701 #lead ul li{ width: calc(50% - ((10/980)*100vw));}
}



/*sec01*/
#sb_summer_0701 #sec01{ padding: 60px 0 0; background: #014ea0;}
#sb_summer_0701 #sec01 h2{ margin-bottom: 30px;}
#sb_summer_0701 #sec01 figure.zu{ margin-bottom: 40px;}
@media screen and (max-width: 980px) {
#sb_summer_0701 #sec01{ padding: calc((60/980)*100vw) 0 0;}
#sb_summer_0701 #sec01 h2{ margin-bottom: calc((30/980)*100vw);}
#sb_summer_0701 #sec01 figure.zu{ margin-bottom: calc((40/980)*100vw);}
}



/*sec02*/
#sb_summer_0701 #sec02{ padding: 60px 0 160px; background: #014ea0; position: relative; z-index: 5;}
#sb_summer_0701 #sec02:after{ content: ""; width: 100%; height: 200px; background: url("../images/sec02_ico.png") center top no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; z-index: -1;}
#sb_summer_0701 #sec02 h2{ margin-bottom: 30px;}
#sb_summer_0701 #sec02 figure.zu{ margin-bottom: 40px;}
#sb_summer_0701 #sec02 p.att{ margin-top: 40px;}
@media screen and (max-width: 980px) {
#sb_summer_0701 #sec02{ padding: calc((60/980)*100vw) 0 calc((160/980)*100vw);}
#sb_summer_0701 #sec02:after{ height: calc((200/980)*100vw);}
#sb_summer_0701 #sec02 h2{ margin-bottom: calc((30/980)*100vw);}
#sb_summer_0701 #sec02 figure.zu{ margin-bottom: calc((40/980)*100vw);}
#sb_summer_0701 #sec02 p.att{ margin-top: calc((40/980)*100vw);}
}



/*sec03*/
#sb_summer_0701 #sec03{ padding: 0 0 60px; background: #fff; position: relative; z-index: 9;}
#sb_summer_0701 #sec03:after{ content: ""; width: 100%; height: 88px; background: url("../images/sec03_top.png") center top no-repeat; background-size: 100%; position: absolute; left: 0; top: -90px; z-index: -1;}
#sb_summer_0701 #sec03 h2{ margin-bottom: 40px;}
#sb_summer_0701 #sec03 h2 img{ margin-top: -120px;}
@media screen and (max-width: 980px) {
#sb_summer_0701 #sec03{ padding: 0 0 calc((60/980)*100vw);}
#sb_summer_0701 #sec03:after{ height: calc((90/980)*100vw); top: calc((-88/980)*100vw);}
#sb_summer_0701 #sec03 h2{ margin-bottom: calc((40/980)*100vw);}
#sb_summer_0701 #sec03 h2 img{ margin-top: calc((-120/980)*100vw);}
}



/*sec04*/
#sb_summer_0701 #sec04{ position: relative; z-index: 1;}
#sb_summer_0701 #sec04 .content_box{ width: 100%; max-width: 100%;}
#sb_summer_0701 #sec04:after{ content: ""; width: 100%; height: 50%; background: #ffe100; position: absolute; left: 0; bottom: 0; z-index: -1;}
#sb_summer_0701 #sec04 h2{ width: 650px; margin: auto;}
@media screen and (max-width: 980px) {
#sb_summer_0701 #sec04 h2{ width: calc((650/980)*100vw);}
}



/*sec05*/
#sb_summer_0701 #sec05{ padding: 0 0 60px; background: #ffe100; position: relative; z-index: 1;}
#sb_summer_0701 #sec05 h2{ margin-bottom: 70px;}
#sb_summer_0701 #sec05 h2 img{ margin-top: -60px;}
#sb_summer_0701 #sec05 .btn_list{ width: 650px; margin: auto;}
#sb_summer_0701 #sec05 .btn_list h3{ margin-bottom: 40px;}
#sb_summer_0701 #sec05 .btn_list ul li{ margin-bottom: 10px;}
#sb_summer_0701 #sec05 figure.ill{ margin: 50px auto 0;}
@media screen and (max-width: 980px) {
#sb_summer_0701 #sec05{ padding: 0 0 calc((60/980)*100vw);}
#sb_summer_0701 #sec05 h2{ margin-bottom: calc((70/980)*100vw);}
#sb_summer_0701 #sec05 h2 img{ margin-top: calc((-60/980)*100vw);}
#sb_summer_0701 #sec05 .btn_list{ width: calc((650/980)*100vw);}
#sb_summer_0701 #sec05 .btn_list h3{ margin-bottom: calc((40/980)*100vw);}
#sb_summer_0701 #sec05 .btn_list ul li{ margin-bottom: calc((10/980)*100vw);}
#sb_summer_0701 #sec05 figure.ill{ margin: calc((50/980)*100vw) auto 0;}
}



/*foot*/
#sb_summer_0701 #foot{ margin: 120px auto; text-align: center;}
#sb_summer_0701 #foot img{ width: 650px;}
@media screen and (max-width: 980px) {
#sb_summer_0701 #foot{ margin: calc((120/980)*100vw) auto;}
#sb_summer_0701 #foot img{ width: calc((650/980)*100vw);}
}



#sb_summer_0701 .brsp{ display:none;}
#sb_summer_0701 .brpc{ display:block;}
#sb_summer_0701 .sp{ display:none;}
#sb_summer_0701 .pc{ display:inline;}
@media screen and (max-width: 980px) {
#sb_summer_0701 .brsp{ display:block;}
#sb_summer_0701 .brpc{ display:none;}
#sb_summer_0701 .sp{ display:inline;}
#sb_summer_0701 .pc{ display:none;}
}



/*common調整*/
body{ min-width: 1px; width: auto;}
#mains{ min-width: 1px;}
aside{ min-width: 767px;}
@media screen and (max-width: 767px) {
aside{ min-width: 1px;}
}