@charset "utf-8";
.wrapper.wrapper--column-2 .__inner,
.wrapper.wrapper--column-1 .__inner { max-width: 100%; padding-top: 0em; padding-bottom: 0em;}
.wrapper.wrapper--column-2 .__inner .main:not(.main--home),
.wrapper.wrapper--column-1 .__inner .main:not(.main--home) { padding-right: 0em; padding-left: 0em;}
@media screen and (min-width: 960px) {
.wrapper .__inner .main, .wrapper .__inner .aside { padding-top: 0em; padding-bottom: 0em;}
}
.wrapper.wrapper--column-1 .__heading { display: none;}
@media screen and (max-width: 959px) {
.wrapper .__inner .main, .wrapper .__inner .aside { padding-top: 0em; padding-bottom: 0em; }
}
@media screen and (max-width: 959px) {
.main.main--page-detail-1column section:not(.__heading),
.main.main--page-detail-2column section:not(.__heading) { padding: 0 0em;}
}
@media screen and (max-width: 481px) {}
.page-kv .inner-kv { position: relative;}
.page-kv .kv-link { width: 50%; max-width: 310px; position: absolute; right: 30px; top: 30px; z-index: 5;}
.page-kv .kv-link a { position: relative; display: block; padding: 10px 18px; background: #fff; border-radius: 4px;
color: #00307C; font-size: 15px; font-weight: 700; text-decoration: none;}
.page-kv .kv-link a:after { content: ''; display: block; width: 18px; height: 18px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
}
.page-kv .kv-link a:hover { opacity: 0.8;}
.page-kv .txt { position: absolute; left: 0; top: 12%; width: 100%; z-index: 3;}
.page-kv .txt h2 { margin: 0 0 40px; text-align: center;}
.page-kv .txt h2 img { width: 40%; max-width: 500px; vertical-align: bottom;}
.page-kv .txt .btn { width: 40%; max-width: 400px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden;}
.page-kv .txt .btn a { display: block; width: 100%; padding: 4px; background: #EDD738; border-radius: 14px; overflow: hidden;}
.page-kv .txt .btn a img { width: 100%; border: solid 1px #00307C; border-radius: 10px; vertical-align: bottom;}
.page-kv .txt .btn a:hover { opacity: 0.6;}
.page-kv .msg { position: absolute; left: 0; bottom: 15%; width: 100%; z-index: 2;}
.page-kv .msg .inner { width: 92%; max-width: 800px; margin: 0 auto; padding: 30px 0; background: #fff;}
.page-kv .msg p { margin: 0; font-size: clamp(14px,3.0vw,20px); text-align: center;}
.page-kv .msg p span.bold { font-weight: 700;}
.page-kv .msg p br.sp { display: none;}
.page-kv .bg { position: relative; width: 100%; max-width: 100%; margin: 0 auto; z-index: 1;}
.page-kv .bg picture { display: block; width: 100%;}
.page-kv .bg picture img { width: 100%; vertical-align: bottom;}
@media (max-width: 1401px) {
.page-kv .txt { top: 4vw;}
.page-kv .msg { bottom: 10%;}
.page-kv .bg { padding-bottom: 40px;}
}
@media (max-width: 1001px) {
.page-kv .msg { bottom: 8%;}
}
@media (max-width: 801px) {
.page-kv .kv-link { width: 100%; max-width: 100%; position: relative; right: auto; top: auto;}
.page-kv .kv-link a { width: 80%; max-width: 300px; margin: 0 auto; padding: 10px; padding-right: 20px;}
.page-kv .txt { top: 24vw;}
.page-kv .txt h2 img { width: 80%;}
.page-kv .txt .btn { width: 72%;}
.page-kv .msg .inner { width: 90%; padding: 20px; box-shadow: 0 4px 4px #ededed;}
.page-kv .msg p br.sp { display: block;}
}
@media (max-width: 481px) {
.page-kv .kv-link { background: #3498db;}
.page-kv .kv-link a { max-width: 270px; padding: 6px 18px; background: #3498db; color: #fff; font-size: 13px;}
.page-kv .kv-link a:after {
background-image: url('data:image/svg+xml;utf8,');
}
.page-kv .txt { top: 30vw;}
.page-kv .txt h2 { margin-bottom: 12px;}
.page-kv .txt .btn { border-radius: 6px;}
.page-kv .txt .btn a { padding: 3px; border-radius: 4px;}
.page-kv .txt .btn a img { border-radius: 3px;}
.page-kv .msg { bottom: 4vw;}
}
.fixed-btn { position: fixed; right: 4%; bottom: 30px; width: 172px; z-index: 100;}
.fixed-btn div { background: #fff; border-radius: 50%; box-shadow: 2px 2px 4px #ccc; overflow: hidden;}
.fixed-btn div a { display: block; width: 100%; border-radius: 50%;}
.fixed-btn div a img { width: 100%; vertical-align: bottom;}
.fixed-btn div a:hover { opacity: 0.6;}
@media (max-width: 801px) {
.fixed-btn { width: 100px;}
}
@media (max-width: 481px) {
.fixed-btn { width: 90px;}
}
.ttl { text-align: center;}
.ttl .tips { margin-bottom: 8px;}
.ttl .tips:after { content: ''; display: block; width: 24px; height: 18px; margin: 0 auto; background: #00307C;
clip-path: polygon(0 0,100% 0,50% 100%);
}
.ttl .tips p { display: inline-block; margin: 0 0 -1px; padding: 4px 16px; background: #00307C; color: #fff; font-size: clamp(14px,2.0vw,20px); letter-spacing: 0.05rem;}
.ttl .tips p span { display: inline-block; padding: 0px 10px; font-weight: 700; vertical-align: middle;}
.ttl .tips p span em { font-size: 17px; font-style: normal;}
.ttl h2 { margin: 0; color: #00307C; font-size: clamp(24px,5.0vw,40px); font-weight: 700; line-height: 1.25;}
.ttl p { margin: 0; font-size: clamp(15px,2.0vw,20px);}
.ttl p br.sp { display: none;}
@media (max-width: 801px) {
.ttl h2 span { display: block;}
}
@media (max-width: 481px) {
.ttl .tips:after { width: 20px; height: 12px;}
.ttl .tips p span em { font-size: 12px;}
.ttl p br.sp { display: block;}
}
#about .inner-sct { padding: 20px 0 80px;}
#about .ttl { margin-bottom: 20px;}
#about .flex { display: flex; justify-content: space-between; width: 92%; max-width: 1100px; margin: 0 auto;}
#about .flex.mb { margin-bottom: 60px;}
#about .bloc { width: 33%; padding: 16px;}
#about .bloc .box { position: relative; width: 100%; max-width: 360px; margin: 0 auto; height: 100%; background: #DFF4FF; border-radius: 10px;}
#about .bloc .box .badge { width: 92px; position: absolute; left: -20px; top: -20px; }
#about .bloc .box .badge img { width: 100%;}
#about .bloc .box dl { margin: 0 auto; padding: 20px 0;}
#about .bloc .box dl dt { text-align: center;}
#about .bloc .box dl dt img { display: block; width: 40%; max-width: 100px; margin: 0 auto 20px;}
#about .bloc .box dl dt span.tit { display: block; color: #00307C; font-size: 24px; font-weight: 700;}
#about .bloc .box dl dt span.marker { background: linear-gradient(#DFF4FF 65%, #EDD738 65%)}
#about .bloc .box dl dt span.tit em { font-size: 20px; font-style: normal;}
#about .bloc .box dl dd.txt { margin: 0; padding: 20px; font-size: clamp(12px,1.8vw,16px);}
#about .bloc .box dl dd.tips { margin: 0; color: #00307C; font-size: clamp(16px,2.0vw,18px); font-weight: 700; text-align: center;}
#about .bloc .box dl dd.tips:before { content: ''; display: block; width: 88%; height: 1px; margin: 0 auto 20px; border-top: dashed 1px #00307C;}
#about .left { width: 35%;}
#about .right{ width: 64%;}
#about .left p.tips { margin: 0 0 18px; color: #00307C; font-size: clamp(12px,1.8vw,18px); font-weight: 700; line-height: 1;}
#about .left p.tips span { display: inline-block; padding: 8px 20px; border: solid 1px #00307C;}
#about .left h3 { margin: 0; margin-bottom: 20px; color: #00307C; font-size: clamp(18px,2.5vw,32px);}
#about .left h3 span.marker { background: linear-gradient(#fff 68%, #AFE3FF 68%);}
#about .left p.txt { margin: 0; margin-bottom: 18px; font-size: 16px;}
#about .left .link a { display: block; width: 100%; max-width: 290px; border-radius: 10px; overflow: hidden;}
#about .left .link a img { width: 100%; vertical-align: bottom;}
#about .left .link a:hover img { opacity: 0.8;}
#about .right {}
#about .right ul { width: 100%; max-width: 680px; margin: 0 auto; padding: 0; list-style: none; font-size: 0;
border: solid 1px #A8B6C0; border-radius: 10px; overflow: hidden;
}
#about .right ul li { display: inline-block; vertical-align: top;}
#about .right ul > li.col1 { width: 16%;}
#about .right ul > li.col2 { width: 42%;}
#about .right ul li dl { width: 100%; height: 100%; text-align: center;}
#about .right ul li dl dt { height: 68px; border-bottom: solid 1px #A8B6C0;}
#about .right ul li dl dd { width: 100%; margin: 0; padding: 20px 10px; border-bottom: dashed 1px #A8B6C0; font-size: clamp(12px,1.4vw,16px); font-weight: 700; line-height: 1.4;}
#about .right ul li dl dd:last-child { border-bottom: none;}
#about .right ul li:nth-child(2) ul { background: #FFFCE3; border: none; text-align: center;}
#about .right ul li:nth-child(3) ul { background: #EEF9FF; border: none; text-align: center;}
#about .right ul li span.tit { display: block; height: 68px; margin: 0; padding-top: 21px; border-bottom: solid 1px #A8B6C0;
color: #003081; font-size: clamp(12px,1.8vw,18px); font-weight: 700; line-height: 1.2; text-align: center;
}
#about .right ul li:nth-child(2) span.tit { background: #FFF9CC;}
#about .right ul li:nth-child(3) span.tit { background: #DFF4FF;}
#about .right ul li:nth-child(2) span.tit em { position: relative; display: inline-block; margin-left: 10px; padding: 4px 12px; background: #EDD738; border-radius: 50px;
font-size: 15px; font-style: normal; vertical-align: middle; transform: translateY(-2px);
}
#about .right ul li ul li { display: block; width: 100% !important; margin: 0; padding: 20px 10px; border-bottom: dashed 1px #A8B6C0; font-size: clamp(12px,1.4vw,16px); line-height: 1.4;}
#about .right ul li ul li:last-child { border-bottom: none;}
#about .right ul li ul li.row { padding: 10px 8px 10.5px;}
#about .right ul li ul li span { display: block; font-size: 14px;}
@media (max-width: 1001px) {
#about .bloc { padding: 8px;}
#about .bloc .box dl dt span.tit { font-size: clamp(20px,2.4vw,24px);}
#about .bloc .box dl dt span.tit em { font-size: clamp(12px,1.8vw,20px);}
}
@media (max-width: 801px) {
#about .flex { display: block;}
#about .flex.mb { margin-bottom: 40px;}
#about .bloc { width: 100%;}
#about .left { width: 100%; margin-bottom: 30px;}
#about .right{ width: 100%;}
#about .left p { text-align: center;}
#about .left p.tips { margin-bottom: 12px;}
#about .left h3 { font-size: clamp(26px,2.5vw,32px); text-align: center;}
#about .left .link a { margin: 0 auto;}
}
@media (max-width: 481px) {
#about .inner-sct { padding: 12px 0 40px;}
#about .flex { width: 88%;}
#about .bloc .box .badge { width: 80px; left: -12px; top: -12px; }
#about .bloc .box dl dt img { max-width: 80px;}
#about .bloc .box dl dt span.tit { font-size: 21px;}
#about .bloc .box dl dt span.tit em { font-size: 16px;}
#about .bloc .box dl dd.txt { padding: 12px 35px; font-size: 13px;}
#about .bloc .box dl dd.tips:before { width: 80%;}
#about .left { margin-bottom: 20px;}
#about .left h3 { margin-bottom: 5px;}
#about .left p.tips { font-size: 15px;}
#about .left p.tips span { padding: 4px 15px;}
#about .left p.txt { font-size: 16px;}
#about .left .link a { max-width: 250px;}
#about .right ul { border: none; overflow: visible;}
#about .right ul li { display: block; width: 100%;}
#about .right ul li.col1 { display: none;}
#about .right ul li.col2 { width: 100%; padding: 6px 0;}
#about .right ul li span.tit { padding: 10px 5px; height: auto; background: none; border: none; font-size: 20px; text-align: left; }
#about .right ul li:nth-child(2) span.tit { background: none;}
#about .right ul li:nth-child(3) span.tit { background: none;}
#about .right ul li:nth-child(2) span.tit em { font-size: 12px;}
#about .right ul li:nth-child(2) ul { background: #FFFCE3; border: solid 1px #A8B6C0; border-radius: 6px; text-align: center;}
#about .right ul li:nth-child(3) ul { background: #EEF9FF; border: solid 1px #A8B6C0; border-radius: 6px; text-align: center;}
#about .right ul li ul li { position: relative; padding: 12px 0; padding-left: 90px; font-size: 14px;}
#about .right ul li ul li.row { padding: 8px 0; padding-left: 100px;}
#about .right ul li ul li:nth-child(1):before { content: '対象'; border-top-left-radius: 6px;}
#about .right ul li ul li:nth-child(2):before { content: '購入単位';}
#about .right ul li ul li:nth-child(3):before { content: 'お支払い'; border-bottom-left-radius: 6px;}
#about .right ul li ul li::before { display: block; box-sizing: border-box; width: 80px; height: 100%; padding-top: 12px; background: #fff;
position: absolute; left: 0; top: 0; font-size: 14px; font-weight: 700;
}
#about .right ul li ul li.row:before { padding-top: 18px;}
#about .right ul li ul li span { font-size: 12px;}
}
#step1 { background: #DFF4FF;}
#step1 .inner-sct { padding: 80px 0 60px;}
#step1 .ttl { margin-bottom: 30px;}
#step1 .ttl h2 { margin-bottom: 20px;}
#step1 .ctn { width: 92%; max-width: 1180px; margin: 0 auto;}
#step1 .ctn .flex { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
#step1 .ctn .box { width: 24%; }
#step1 .ctn .box .inner { background: #fff; border-radius: 10px; overflow: hidden;}
#step1 .ctn .box figure { margin: 0;}
#step1 .ctn .box figure img { width: 100%; vertical-align: bottom;}
#step1 .ctn .box .txt { padding: 20px 25px;}
#step1 .ctn .box .txt .tit { height:60px; padding-top: 8px;}
#step1 .ctn .box .txt .tit.row { padding-top: 0px;}
#step1 .ctn .box .txt .tit h3 { margin: 0; color: #00307C; font-size: clamp(14px,1.8vw,20px); text-align: center;}
#step1 .ctn .box .txt p { margin: 0; font-size: 15px;}
#step1 .ctn .box .txt dl{ position: relative; padding-top: 12px; padding-left: 60px; border-top: dashed 1px #7f97c0;}
#step1 .ctn .box .txt dl dt,
#step1 .ctn .box .txt dl dd { font-size: clamp(12px,1.4vw,15px);}
#step1 .ctn .box .txt dl dt { position: absolute; left: 0; font-weight: 700;}
#step1 .ctn .box .txt dl dd { position: relative; padding-left: 18px; margin: 0;}
#step1 .ctn .box .txt dl dd:before { content: ''; display: block; width: 10px; height: 10px; background: #4CAEF0; border-radius: 50%;
position: absolute; left: 0; top: 6px;
}
#step1 .ctn .box .txt .btn { width: 90%; max-width: 150px; margin: 0 auto;}
#step1 .ctn .box .txt .btn a { position: relative; display: block; width: 100%; padding: 6px 0px; padding-right: 20px; background: #4CAEF0; border-radius: 5px;
color: #fff; font-size: 15px; font-weight: 700; text-align: center;
}
#step1 .ctn .box .txt .btn a::after { content: ''; display: block; width: 16px; height: 16px;
position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
#step1 .ctn .box .txt .btn a:hover { background: #00307C; text-decoration: none;}
@media (max-width: 1001px) {
#step1 .ctn .box .txt { padding: 12px 15px;}
#step1 .ctn .box .txt dl{ padding-left: 50px;}
}
@media (max-width: 801px) {
#step1 .ctn .box { width: 50%; padding: 8px;}
}
@media (max-width: 481px) {
#step1 .inner-sct { padding: 40px 0px;}
#step1 .ttl { margin-bottom: 12px;}
#step1 .ttl h2 { margin-bottom: 12px;}
#step1 .ctn .flex { display: block;}
#step1 .ctn .box { width: 100%; padding: 15px;}
#step1 .ctn .box .txt { padding: 12px 25px 24px;}
#step1 .ctn .box .txt .tit { height: auto; margin-bottom: 12px; padding-top: 0px;}
#step1 .ctn .box .txt .tit h3 { font-size: 21px;}
#step1 .ctn .box .txt dl { padding-left: 68px;}
#step1 .ctn .box .txt dl dt,
#step1 .ctn .box .txt dl dd { font-size: 15px;}
}
#step2 .inner-sct { padding: 80px 0;}
#step2 .ttl { margin-bottom: 40px;}
#step2 .ttl h2 { margin-bottom: 20px;}
#step2 .ctn { width: 92%; max-width: 1100px; margin: 0 auto;}
#step2 .scroll-area { width: 100%; overflow-x: scroll; margin-bottom: 40px;}
#step2 .table { width: 1100px;}
#step2 .table table { width: 100%; border: solid 2px #AEDAF1; table-layout: fixed}
#step2 .table table thead { background: #003081;}
#step2 .table table thead th { width: calc(( 100% - 120px ) / 5); padding: 14px 0; border-left: solid 1px #AEDAF1; color: #fff; font-size: 20px; text-align: center;}
#step2 .table table thead th:first-child { width: 120px; border-left: none;}
#step2 .table table td { border-left: solid 1px #AEDAF1; border-bottom: solid 1px #AEDAF1; padding: 14px 12px; font-size: 16px; line-height: 1.4; word-break: break-all; vertical-align: top;}
#step2 .table table td.tit { background: #E9F8FF; border-left: none; font-weight: 700; text-align: center; vertical-align: middle;}
#step2 .table table td.link a { position: relative; display: block; width: 120px; margin: 0 auto; padding: 10px; padding-right: 30px;
background: #4CAEF0; border-radius: 5px;
color: #fff; font-size: 14px; font-weight: 700; text-align: center;
}
#step2 .table table td.link a::after { content: ''; display: block; width: 16px; height: 16px;
position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
#step2 .table table td.link a:hover { background: #00307C; text-decoration: none;}
#step2 .flex { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
#step2 .size { width: 58%; padding: 20px 20px 0; border: solid 2px #C3EAFF;}
#step2 .choice { width: 40%; padding: 20px 20px 12px; border: solid 2px #C3EAFF;}
#step2 .size h3 { margin: 0 0 20px; font-size: 18px; font-weight: 700; text-align: center;}
#step2 .size ul { margin: 0; padding: 0; font-size: 0;}
#step2 .size ul li { display: inline-block; width: 50%; padding: 0 8px; vertical-align: top;}
#step2 .size ul li dl { padding: 12px 0; border-top: solid 1px #AEDAF1; }
#step2 .size ul li dl dt { display: inline-block; margin: 0; margin-right: 12px; font-size: 16px; font-weight: 700; vertical-align: top;}
#step2 .size ul li dl dd { display: inline-block; margin: 0; font-size: 14px; vertical-align: top;}
#step2 .size ul li dl dd a { color: #003081; text-decoration: underline;}
#step2 .size ul li dl dd a:hover { text-decoration: none;}
#step2 .choice h3 { margin: 0 0 20px; font-size: 18px; font-weight: 700; text-align: center;}
#step2 .choice ul { margin: 0 0 12px; padding: 12px 0; border-top: solid 1px #AEDAF1; border-bottom: solid 1px #AEDAF1; list-style: none;}
#step2 .choice ul li { position: relative; padding: 2px; padding-left: 20px; font-size: 14px; list-style-type: none;}
#step2 .choice ul li:before { content: ''; display: block; width: 10px; height: 10px; background: #003081; border-radius: 50px;
position: absolute; left: 0; top: 7px;
}
#step2 .choice ul li br { display: none;}
#step2 .choice .link { text-align: center;}
#step2 .choice .link a { position: relative; display: inline-block; padding-right: 20px; color: #212121; font-size: 14px; font-weight: 700;}
#step2 .choice .link a::after { content: ''; display: block; width: 16px; height: 16px;
position: absolute; top: 50%; right: 0px; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
#step2 .choice .link a:hover { color: #000;}
@media (max-width: 1001px) {
#step2 .table { width: 1000px;}
#step2 .table table thead th { width: calc(( 100% - 90px ) / 5); padding: 10px; font-size: 14px;}
#step2 .table table thead th:first-child { width: 90px;}
#step2 .table table td { padding: 10px; font-size: 13px;}
}
@media (max-width: 801px) {
#step2 .flex { display: block;}
#step2 .size { width: 100%; margin-bottom: 30px;}
#step2 .choice { width: 100%;}
}
@media (max-width: 481px) {
#step2 .inner-sct { padding: 40px 0;}
#step2 .ttl { margin-bottom: 20px;}
#step2 .ttl h2 { margin-bottom: 12px;}
#step2 .table { width: 900px;}
#step2 .size { margin-bottom: 20px; padding: 12px 20px;}
#step2 .size h3 { margin-bottom: 12px; font-size: 16px;}
#step2 .size ul li { display: block; width: 100%; padding: 0;}
#step2 .size ul li dl { padding: 8px 0;}
#step2 .size ul li dl dt { width: 130px; margin-right: 0; font-size: 15px;}
#step2 .size ul li dl dd { font-size: 14px;}
#step2 .choice { padding: 12px 20px;}
#step2 .choice h3 { margin-bottom: 12px; font-size: 16px;}
#step2 .choice ul li { font-size: 15px;}
#step2 .choice ul li br { display: block;}
}
#step3 { background: #DFF4FF;}
#step3 .inner-sct { padding: 80px 0 60px;}
#step3 .ttl { margin-bottom: 12px;}
#step3 .ttl h2 { margin-bottom: 20px;}
#step3 .ctn { width: 92%; max-width: 1180px; margin: 0 auto;}
#step3 .flex { display: flex; width: 100%; margin-bottom: 20px; justify-content: space-between; flex-wrap: wrap;}
#step3 .box { width: 33%; padding: 16px;}
#step3 .box .inner { position: relative; height: 100%; padding-bottom: 60px; background: #fff; border-radius: 10px; overflow: hidden;}
#step3 .box figure { margin: 0; text-align: center;}
#step3 .box figure img { width: 100%; vertical-align: bottom;}
#step3 .box .txt { padding: 20px 30px; border-top: solid 1px #E9E9E9;}
#step3 .box .txt ul.tag { margin: 0 0 10px; padding: 0; font-size: 0; text-align: left; }
#step3 .box .txt ul.tag li { display: inline-block; margin: 0px; margin-right: 5px; padding: 5px 8px; border-radius: 5px; color: #000; font-size: 13px; font-weight: 700; line-height: 1;}
#step3 .box .txt ul.tag li.type { background: #C9EDFF;}
#step3 .box .txt ul.tag li.status { background: #FFF9CC;}
#step3 .box .txt .name { margin: 0 0 10px; min-height: 58px;}
#step3 .box .txt .name p { margin: 0; color: #003081; font-size: 20px; font-weight: 700; line-height: 1.4;}
#step3 .box .txt p.read { margin: 0 0 20px; font-size: 15px;}
#step3 .box .detail { padding-top: 20px; border-top: dashed 1px #003081;}
#step3 .box .detail p { margin: 0; font-size: 16px; }
#step3 .box .btn { width: 100%; position: absolute; left: 0; bottom: 28px;}
#step3 .box .btn a { position: relative; display: block; width: 100%; max-width: 180px; margin: 0 auto; padding: 6px 0px; padding-right: 20px; background: #4CAEF0; border-radius: 5px;
color: #fff; font-size: 15px; font-weight: 700; text-align: center;
}
#step3 .box .btn a::after { content: ''; display: block; width: 16px; height: 16px;
position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
#step3 .box .btn a:hover { background: #003081; text-decoration: none;}
#step3 .btn-more { width: 100%; max-width: 230px; margin: 0 auto;}
#step3 .btn-more a { position: relative; display: block; width: 100%; max-width: 230px; margin: 0 auto; padding: 10px 0px; padding-right: 20px; background: #4CAEF0; border-radius: 5px;
color: #fff; font-size: 17px; font-weight: 700; text-align: center;
}
#step3 .btn-more a::after { content: ''; display: block; width: 16px; height: 16px;
position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
#step3 .btn-more a:hover { background: #003081; text-decoration: none;}
@media (max-width: 1001px) {
#step3 .box { width: 50%; padding: 8px;}
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
#step3 .inner-sct { padding: 40px 0px;}
#step3 .flex { display: block;}
#step3 .box { width: 100%; padding: 12px 0;}
#step3 .box .txt .name { min-height: auto;}
#step3 .box .detail p { font-size: 14px;}
}
#preperation { margin: 0;}
#preperation .inner-sct { padding: 60px 0;}
#preperation .ttl { margin-bottom: 40px;}
#preperation .ctn { width: 92%; max-width: 1180px; margin: 0 auto;}
#preperation .ctn ul { display: flex; justify-content: space-between; margin: 0; padding: 0; font-size: 0; text-align: center;}
#preperation .ctn ul li { display: inline-block; width: 32%; }
#preperation .ctn ul li a { display: block; width: 100%; max-width: 340px; margin: 0 auto; background: #DFF4FF; border-radius: 10px; overflow: hidden;
color: #000;
}
#preperation .ctn ul li a dl { display: block; width: 100%; padding-bottom: 20px;}
#preperation .ctn ul li a dl dt { position: relative;}
#preperation .ctn ul li a dl dt img { position: relative; width: 100%; z-index: 1; vertical-align: bottom;}
#preperation .ctn ul li a dl dt span { display: block; width: 100%; position: absolute; bottom: 10px; color: #fff; font-size: clamp(16px,1.8vw,20px); font-weight: 700; z-index: 2;}
#preperation .ctn ul li a dl dd { margin: 0; font-size: 15px; font-weight: 700;}
#preperation .ctn ul li a dl dd.tit { padding: 10px; font-size: clamp(16px,2.0vw,20px);}
#preperation .ctn ul li a dl dd.more::after { content: ''; display: inline-block; width: 16px; height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
vertical-align: middle;
}
#preperation .ctn ul li a dl dd.more span { display: inline-block; margin-right: 10px; vertical-align: middle;}
#preperation .ctn ul li a:hover { text-decoration: none; opacity: 0.7;}
@media (max-width: 641px) {
#preperation .ttl { margin-bottom: 12px;}
#preperation .ctn { width: 80%;}
#preperation .ctn ul { display: block; }
#preperation .ctn ul li { width: 100%; padding: 15px 0;}
}
@media (max-width: 481px) {
#preperation .inner-sct { padding: 40px 0;}
}
#point { background: #DFF4FF;}
#point .inner-sct { padding: 80px 0 60px;}
#point .ctn { width: 92%; max-width: 1180px; margin: 0 auto;}
#point .ctn ul.point { margin-bottom: 60px; padding: 0; font-size: 0; list-style: none;}
#point .ctn ul.point li { display: inline-block; width: 50%; padding: 12px; list-style-type: none; vertical-align: top;}
#point .ctn ul.point li dl { position: relative; padding: 25px 10px; padding-left: 140px; background: #fff; border-radius: 10px;}
#point .ctn ul.point li dl dt { width: 64px; position: absolute; left: 40px; top: 25px;}
#point .ctn ul.point li dl dd { margin: 0; font-size: 15px; }
#point .ctn ul.point li dl dd span { display: block; color: #00307C; font-size: clamp(14px,1.8vw,20px); font-weight: 700;}
#point .ctn .box { width: calc(100% - 24px); margin: 0 auto; background: #fff; border-radius: 10px;}
#point .ctn .box .flex { display: flex; justify-content: space-between; padding: 50px 60px;}
#point .ctn .box .pht { width: 40%;}
#point .ctn .box .txt { width: 56%;}
#point .ctn .box .pht figure { margin: 0;}
#point .ctn .box .pht figure img { width: 100%; vertical-align: bottom;}
#point .ctn .box .txt p.tips { margin: 0 0 12px; font-size: 17px; font-weight: 700;}
#point .ctn .box .txt p.tips span { display: inline-block; padding: 2px 20px; border: solid 1px #BFCBDF;}
#point .ctn .box .txt h4 { margin: 0 0 16px; color: #003081; font-size: clamp(23px,3.2vw,32px); font-weight: 700; line-height: 1.4;}
#point .ctn .box .txt ul { margin: 0; padding: 0; font-size: 0; list-style: none;}
#point .ctn .box .txt ul.disc { margin-bottom: 20px;}
#point .ctn .box .txt ul.disc li { position: relative; padding: 2px; padding-left: 20px; list-style-type: none; font-size: 15px;}
#point .ctn .box .txt ul.disc li:before { content: ''; display: block; width: 10px; height: 10px; background: #003081; border-radius: 10px;
position: absolute; left: 0; top: 7px;
}
#point .ctn .box .txt ul.tag { margin-bottom: 12px;}
#point .ctn .box .txt ul.tag li { display: inline-block; margin-right: 10px; font-size: 15px; font-weight: 700;}
#point .ctn .box .txt ul.tag li span { padding: 5px 12px; background: #EDD738; border-radius: 50px;}
#point .ctn .box .txt ul.tag li span em { font-size: 13px; font-style: normal;}
#point .ctn .box .txt p.kome { margin: 0; font-size: 12px;}
@media (max-width: 1001px) {
#point .ctn .box .flex { padding: 30px;}
}
@media (max-width: 641px) {
#point .ttl { margin-bottom: 12px;}
#point .ctn ul.point li { display: block; width: 100%; padding: 12px 0;}
#point .ctn ul.point li dl dt { top: 15px;}
#point .ctn .box { width: 100%;}
#point .ctn .box .flex { display: block; padding: 30px;}
#point .ctn .box .pht { width: 100%; margin-bottom: 20px;}
#point .ctn .box .txt { width: 100%;}
}
@media (max-width: 481px) {
#point .inner-sct { padding: 40px 0px;}
#point .ctn { width: 88%;}
#point .ctn ul.point { margin-bottom: 40px;}
#point .ctn ul.point li dl { padding: 15px; padding-left: 90px;}
#point .ctn ul.point li dl dt { width: 50px; left: 20px; top: 24px;}
#point .ctn ul.point li dl dd { font-size: 15px; }
#point .ctn ul.point li dl dd span { font-size: 16px;}
#point .ctn .box .flex { padding: 20px;}
#point .ctn .box .txt p.tips { font-size: 14px;}
#point .ctn .box .txt ul.disc { margin-bottom: 12px;}
#point .ctn .box .txt ul.disc li { font-size: 14px;}
#point .ctn .box .txt ul.tag li { font-size: 13px; margin-right: 8px; padding: 6px 0;}
#point .ctn .box .txt ul.tag li span em { font-size: 10px;}
}
#shipping { margin: 0;}
#shipping .inner-sct { padding: 80px 0 60px;}
#shipping .ttl { margin-bottom: 40px;}
#shipping .ctn { width: 94%; max-width: 1120px; margin: 0 auto;}
#shipping .ctn ul { margin: 0; padding: 0; font-size: 0; text-align: center; list-style: none;}
#shipping .ctn ul li { position: relative; display: inline-block; width: 25%; padding: 18px; font-size: 15px; vertical-align: top;}
#shipping .ctn ul li::after { content: ''; display: block; width: 18px; height: 90px; background: #EDD738;
clip-path: polygon(0 0,100% 50%,0 100%);
position: absolute; right: -10px; top: 50%; transform: translate(0,-50%);
}
#shipping .ctn ul li:last-child:after { content: none;}
#shipping .ctn ul li dl { width: 100%; padding: 50px 0 30px; background: #DFF4FF; border-radius: 10px;}
#shipping .ctn ul li dl dt { position: relative; width: 100%;}
#shipping .ctn ul li dl dt img { width: 40%; max-width: 72px;}
#shipping .ctn ul li dl dt span { display: block; width: 140px; background: #00307C;
position: absolute; left: 50%; top: -66px; transform: translateX(-50%);
color: #fff; font-size: clamp(21px,2.8vw,24px); font-weight: 700; letter-spacing: 0.05rem; text-align: center;
}
#shipping .ctn ul li dl dd { margin: 0; padding: 0 25px; text-align: left;}
#shipping .ctn ul li dl dd span { display: block; margin-bottom: 18px; color: #00307C; font-size: 21px; font-weight: 700; text-align: center;}
#shipping .ctn ul li dl dd br.sp { display: none;}
@media (max-width: 1001px) {
#shipping .ctn ul li { padding: 12px;}
#shipping .ctn ul li::after { width: 12px; height: 60px; right: -8px;}
#shipping .ctn ul li dl { min-height: 230px; padding: 40px 0 20px;}
#shipping .ctn ul li dl dt span { top: -54px;}
#shipping .ctn ul li dl dd { padding: 0 15px; font-size: 13px;}
#shipping .ctn ul li dl dd span { margin-bottom: 12px; font-size: clamp(14px,2.0vw,21px);}
}
@media (max-width: 641px) {
#shipping .inner-sct { padding: 40px 0 30px;}
#shipping .ttl { margin-bottom: 12px;}
#shipping .ctn { width: 84%;}
#shipping .ctn ul { width: 100%; max-width: 400px; margin: 0 auto;}
#shipping .ctn ul li { display: block; width: 100%; padding: 30px 0px;}
#shipping .ctn ul li::after { width: 80px; height: 18px; clip-path: polygon(0 0,100% 0%,50% 100%);
right: auto; left: 50%; top: auto; bottom: 0; transform: translate(-50%,0);
}
#shipping .ctn ul li dl { min-height: auto;}
#shipping .ctn ul li dl dd { text-align: center;}
#shipping .ctn ul li dl dd span { font-size: 21px;}
#shipping .ctn ul li dl dd br.sp { display: block;}
}
@media (max-width: 481px) {
#shipping .ttl { margin-bottom: 0px;}
#shipping .ctn ul li { padding: 30px 0;}
#shipping .ctn ul li::after { width: 80px; height: 15px;}
#shipping .ctn ul li dl { padding: 32px 0 20px;}
#shipping .ctn ul li dl dt span { top: -48px;}
#shipping .ctn ul li dl dd { font-size: 15px;}
}
#order { background: #00307C;}
#order .inner-sct { padding: 30px 0px;}
#order .box { position: relative; width: 90%; max-width: 1080px; margin: 0 auto; padding: 25px 40px; padding-right: 280px; background: #fff; border-radius: 15px;}
#order .box .txt { border-right: dashed 1px #00307C; padding-right: 20px;}
#order .box .txt .tit { position: relative; padding-left: 50px; margin-bottom: 20px;}
#order .box .txt .tit:before { content: ''; display: block; width: 32px; height: 32px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
#order .box .txt .tit h3 { margin: 0; color: #00307C; font-size: clamp(20px,2.6vw,30px); font-weight: 700; line-height: 1.4;}
#order .box .txt p { margin: 0; font-size: 14px;}
#order .box .btn { width: 214px; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}
#order .box .btn a { position: relative; display: block; width: 100%; padding: 10px 0; padding-right: 30px; border-radius: 10px; background: #4CAEF0; border-radius: 5px;
color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center;
}
#order .box .btn a::after { content: ''; display: block; width: 18px; height: 18px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
position: absolute; right: 20px; top: 50%; transform: translateY(-55%);
}
#order .box .btn a img { width: 100%;}
#order .box .btn a:hover { background: #00307C; text-decoration: none;}
@media (max-width: 1001px) {
#order .box { padding: 20px; padding-right: 260px;}
}
@media (max-width: 641px) {
#order .box { padding: 20px 30px;}
#order .box .txt { margin-bottom: 20px; padding: 0; padding-bottom: 20px; border-right: none; border-bottom: dashed 1px #00307C;}
#order .box .btn { position: relative; right: auto; top: auto; transform: translateY(0%); width: 80%; margin: 0 auto;}
#order .box .btn a br { display: none;}
}
@media (max-width: 481px) {
#order .box .txt .tit { padding-left: 60px; margin-bottom: 12px;}
#order .box .txt .tit:before { left: 10px;}
#order .box .txt .tit h3 { font-size: 26px; line-height: 1.25;}
#order .box .txt .tit h3 span { display: block;}
#order .box .txt p { font-size: 15px;}
#order .box .btn { width: 90%;}
#order .box .btn a { font-size: 14px;}
}
#faq .inner-sct { padding: 80px 0;}
#faq .ttl { margin-bottom: 20px;}
#faq .ctn { width: 92%; max-width: 900px; margin: 0 auto;}
#faq .ctn ul { margin: 0; padding: 0; list-style: none;}
#faq .ctn ul li { padding: 10px 0; list-style-type: none;}
#faq .ctn ul li dl { padding: 0 30px; background: #DFF4FF; border-radius: 10px;}
#faq .ctn ul li dl dt { margin: 0; padding: 20px 56px; color: #003081; font-size: 21px; font-weight: 700;}
#faq .ctn ul li dl dd { position: relative; margin: 0; padding: 20px 10px; font-size: 18px;}
#faq .ctn ul li dl dd:after { content: ''; display: block; width: 98%; height: 1px; border-bottom: dashed 1px #7f97c0;
position: absolute; left: 50%; top: 1px; transform: translateX(-50%);
}
#faq .ctn ul li .q-label { display: block; cursor: pointer; padding: 0 30px; background: #DFF4FF; border-radius: 10px;}
#faq .ctn ul li .q-toggle{ display: none;}
#faq .ctn ul li .q-tit { position: relative; display: block; font-weight: bold; display: block; padding: 20px 56px; color: #003081; font-size: clamp(15px,2.4vw,21px); font-weight: 700;}
#faq .ctn ul li .q-tit:before,
#faq .ctn ul li .q-tit:after { content: ''; display: block; position: absolute; }
#faq .ctn ul li .q-tit:before{ width: 40px; height: 40px; left: 0; top: 16px;
background-color: #fff;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
border-radius: 50%;
}
#faq .ctn ul li .q-tit:after { width: 20px; height: 20px; top: 50%; right: 0px; transform: translateY(-50%) rotate(90deg);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
#faq .ctn ul li .answer { position: relative; max-height: 0; overflow: hidden; transition: max-height 0.4s ease;}
#faq .ctn ul li .answer:before { content: ''; display: block; width: 98%; height: 1px; border-bottom: dashed 1px #7f97c0;
position: absolute; left: 50%; top: 1px; transform: translateX(-50%);
}
#faq .ctn ul li .answer p { margin: 0; display: none; font-size: clamp(15px,1.8vw,18px);}
#faq .ctn ul li .q-toggle:checked + .q-tit:after { transform: translateY(-50%) rotate(-90deg);}
#faq .ctn ul li .q-toggle:checked + .q-tit + .answer { max-height: 200px; /* 適宜調整 */padding: 20px 10px; }
#faq .ctn ul li .q-toggle:checked + .q-tit + .answer p { display: block;}
@media (max-width: 641px) {
#faq .ctn ul li .q-label { padding: 0 20px;}
#faq .ctn ul li .q-tit { padding: 15px 40px;}
#faq .ctn ul li .q-tit:before{ width: 30px; height: 30px; top: 12px;}
}
@media (max-width: 481px) {
#faq .ttl { margin-bottom: 12px;}
#faq .inner-sct { padding: 40px 0;}
#faq .ctn ul li { padding: 10px 0;}
#faq .ctn ul li .q-label { padding: 0 15px;}
}
.aside { margin: 0 !important; background: #00307C;}
.aside .inner-sct { padding: 40px 0;}
.aside .box { width: 90%; max-width: 1080px; margin: 0 auto 30px; padding: 8px; background: #fff; border-radius: 15px;}
.aside .box .inner { position: relative; padding: 25px 30px; padding-right: 390px; border: solid 1px #00307C; border-radius: 15px;}
.aside .box .tit { width: 100%; max-width: 580px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: dashed 1px #00307C;}
.aside .box .tit h3 { margin: 0; color: #00307C; font-size: clamp(18px,2.4vw,24px); line-height: 1.6;}
.aside .box .tit h3 br { display: none;}
.aside .box p { margin: 0; font-size: 17px;}
.aside .box p br.sp { display: none;}
.aside .box .btn { width: 80%; max-width: 360px; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}
.aside .box .btn a { display: block; width: 100%; padding: 4px; background: #EDD738; border-radius: 14px; overflow: hidden;
box-shadow: 0 3px 4px #ccc;
}
.aside .box .btn a img { width: 100%; border: solid 1px #00307C; border-radius: 10px; vertical-align: bottom;}
.aside .box .btn a:hover { opacity: 0.6;}
.aside p.txt-link { margin: 0; font-size: 18px; line-height: 1.6; text-align: center;}
.aside p.txt-link a { position: relative; display: inline-block; padding-right: 30px; color: #fff; text-decoration: none;}
.aside p.txt-link a::before,
.aside p.txt-link a::after { content: ''; display: block; position: absolute;}
.aside p.txt-link a::before{ width: calc( 100% - 30px ); height: 1px; bottom: 0; background: #fff;}
.aside p.txt-link a::after { width: 20px; height: 20px; top: 50%; right: 0px; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%; background-position: 50% 50%;
}
.aside p.txt-link a span { display: inline-block; padding-left: 6px;}
.aside p.txt-link a:hover:before { background: #00307C;}
@media (max-width: 1001px) {
.aside .box { padding: 6px;}
.aside .box .inner { padding: 20px; padding-right: 320px;}
.aside .box .btn { max-width: 280px; right: 20px;}
}
@media (max-width: 641px) {
.aside .box { margin-bottom: 20px;}
.aside .box .inner { padding: 20px 30px;}
.aside .box .tit h3 { font-size: clamp(20px,3.0vw,24px); text-align: center;}
.aside .box p { margin-bottom: 20px;}
.aside .box .btn { position: relative; top: auto; right: auto; transform: translateY(0%); margin: 0 auto;}
.aside p.txt-link a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;}
.aside p.txt-link a::before { content: none;}
.aside p.txt-link a span { display: block; }
}
@media (max-width: 481px) {
.aside .box { padding: 4px; border-radius: 8px;}
.aside .box .inner { border-radius: 8px;}
.aside .box .tit h3 br { display: block;}
.aside .box p { margin-bottom: 12px; font-size: 16px;}
.aside .box p br.sp { display: block;}
.aside .box .btn { width: 100%;}
.aside .box .btn a { padding: 2px; border-radius: 6px;}
.aside .box .btn a img { border-radius: 6px;}
.aside p.txt-link { font-size: 15px;}
}