@charset "SJIS";

:root{
  --orange:#ee8002;
  --blue: #2367A4;
  --gray: #555555;
  --link-red: #e50311;
  --yellow: #FFF500;
}
/*
* style
*
* @author: kawai
* @date: 2021.12.13
* @breakpoint:
*    -> pc/[min-width:960px]
*    -> tab/[min-width:560 - max-width:959]
*    -> sp/[max-width:559]
*/
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html { font-family: 'Noto Sans JP', sans-serif; font-size: 10px; color: #444444; }

body { font-size: 1.6rem; line-height: 1.6; }

img[src*="svg"] { width: 100%; height: auto; display: block; }

address { font-size: 1rem; font-style: normal; background-color: #555555; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; }

a { -webkit-transition: .3s ease; transition: .3s ease; text-decoration: none; }

li { list-style: none; }

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type="number"] { -moz-appearance: textfield; }

._bg-gray { background-color: #555555; }

._bg-blue { background-color: #2367A4; }

._bg-orange { background-color:var(--orange) }

._btn-orange a { max-width: 338px; height: 46px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 2px solid #ee8002; border-radius: 30px; color: #ee8002; font-size: 1.8rem; font-weight: bold; position: relative; margin-bottom: 10px; background-color: white; }
._btn-orange a:after { content: ''; position: absolute; top: 50%; right: 8%; width: 7px; height: 7px; border-right: 2px solid #ee8002; border-top: 2px solid #ee8002; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }
._btn-orange a:hover { color: white; background-color: #ee8002; }
._btn-orange a:hover:after { border-right: 2px solid white; border-top: 2px solid white; }
@media screen and (max-width: 559px) { ._btn-orange a { max-width: 300px; height: 50px; } }

._btn-blue a { max-width: 338px; height: 46px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 2px solid #2367A4; border-radius: 30px; color: #2367A4; font-size: 1.8rem; font-weight: bold; position: relative; margin-bottom: 10px; background-color: white; }
._btn-blue a:after { content: ''; position: absolute; top: 50%; right: 8%; width: 7px; height: 7px; border-right: 2px solid #2367A4; border-top: 2px solid #2367A4; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }
._btn-blue a:hover { color: white; background-color: #2367A4; }
._btn-blue a:hover:after { border-right: 2px solid white; border-top: 2px solid white; }
@media screen and (max-width: 559px) { ._btn-blue a { max-width: 300px; height: 50px; } }

._btn-purple a { max-width: 338px; height: 46px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 2px solid #493488; border-radius: 30px; color: #493488; font-size: 1.8rem; font-weight: bold; position: relative; margin-bottom: 10px; background-color: white; }
._btn-purple a:after { content: ''; position: absolute; top: 50%; right: 8%; width: 7px; height: 7px; border-right: 2px solid #493488; border-top: 2px solid #493488; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }
._btn-purple a:hover { color: white; background-color: #493488; }
._btn-purple a:hover:after { border-right: 2px solid white; border-top: 2px solid white; }
@media screen and (max-width: 559px) { ._btn-purple a { max-width: 300px; height: 50px; } }

._btn-result { width: 100%; }

._btn-result span { cursor: pointer; max-width: 338px; width: 100%; height: 50px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 2px solid #162b45; border-radius: 30px; color: white; font-size: 1.8rem; font-weight: bold; position: relative; background-color: #162b45; background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #2b3e55 0, #2b3e55 15px); }
._btn-result span:after { content: ''; position: absolute; top: 50%; right: 8%; width: 7px; height: 7px; border-right: 2px solid white; border-bottom: 2px solid white; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }
@media screen and (max-width: 559px) { ._btn-result span { max-width: 300px; height: 50px; } }

._btn-etc-card a { width: 500px; height: 70px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 2px solid #493488; border-radius: 100px; color: white; font-size: 2.4rem; font-weight: bold; position: relative; margin-bottom: 10px; background-color: #493488; margin-right: 40px; }
._btn-etc-card a:after { content: ''; position: absolute; top: 50%; right: 8%; width: 7px; height: 7px; border-right: 2px solid white; border-top: 2px solid white; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }
._btn-etc-card a:hover { color: #493488; background-color: white; }
._btn-etc-card a:hover:after { border-right: 2px solid #493488; border-top: 2px solid #493488; }

._btn-etc-card__img { width: 78px; margin-right: 15px; }

._text-indent-1 { padding-left: 1.2em; text-indent: -1.2em; }
._text-indent-1\.5 { padding-left: 1.7em; text-indent: -1.7em; line-height: 1.3; margin-bottom: .5rem; }

._pc { display: block; }

._sp { display: none; }

@media screen and (max-width: 559px) { body { font-size: 1.3rem; padding-bottom: 60.95px; }
  ._pc { display: none; }
  ._sp { display: block; }
  ._btn-etc-card a { width: 100%; font-size: 1.8rem; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
  ._btn-etc-card__img { width: 50px; margin-right: 10px; } }
.logo { position: absolute; z-index: 2; left: 20px; }

.logo.svgbox { width: 140px; height: auto; }

@media screen and (max-width: 559px) { .logo { left: 10px; }
  .logo.svgbox { width: 70px; } }
.mv__bg { width: 100%; height: 340px; position: absolute; z-index: 1; }
.mv__bg picture { height: 100%; }
.mv__bg img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; width: 100%; height: 100%; }
.mv__catch { position: relative; z-index: 2; width: 73%; max-width: 1050px; height: 140px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(255, 255, 255, 0.8); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.mv__catch__text { width: 100%; }
@media screen and (max-width: 959px) { .mv__catch { width: 92%; top: 105px; height: auto; border-radius: 10px; padding-top: 40px; padding-bottom: 40px; } }
@media screen and (max-width: 559px) { .mv__catch { top: 65px; height: 140px; padding-top: 0; padding-bottom: 0; padding-left: 14px; padding-right: 14px; } }

.kangen { position: absolute; left: 4%; z-index: 3; width: 12.6388888889vw; max-width: 182px; height: 12.6388888889vw; max-height: 182px; margin-top: 35px; }
.kangen__btn { position: relative; display: block; background-color: #ee8002; border: 2px solid #2367A4; height: 100%; border-radius: 50%; text-align: center; padding-top: 11%; padding-bottom: 11%; text-decoration: none; background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #f18c18 0, #f18c18 15px); }
.kangen__btn:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }
.kangen__btn::after { content: ''; display: block; position: absolute; width: 5%; height: 5%; border-bottom: 4px solid #FFF500; border-right: 4px solid #FFF500; -webkit-transform: rotate(45deg) translate(-50%); transform: rotate(45deg) translate(-50%); left: 50%; bottom: 7.6%; }
.kangen__btn p { color: white; font-weight: bold; font-size: min(1.8 * 1rem,1.8 * 10 / 1440 * 100vw); line-height: 1.3; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .kangen__btn p { font-size: 1.25vw; } }
@media screen and (-ms-high-contrast: active) and (min-width: 144rem) { .kangen__btn p { font-size: 1.8rem; } }

.kangen__calculator { width: 16.4%; margin: 0 auto 10px; }
@media screen and (max-width: 959px) { .kangen { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 130px; height: 130px; top: 15px; }
  .kangen__btn { padding-top: 10px; }
  .kangen__btn::after { bottom: 6px; }
  .kangen__btn p { font-size: 1.2rem; line-height: 1.2; }
  .kangen__calculator { width: 30px; margin: 0 auto 5px; } }
@media screen and (max-width: 559px) { .kangen { width: 110px; height: 110px; margin-top: -15px; top: auto; }
  .kangen__btn { padding-top: 10px; }
  .kangen__btn::after { width: 8px; height: 8px; border-bottom: 2px solid #FFF500; border-right: 2px solid #FFF500; bottom: 6px; }
  .kangen__btn p { font-size: 1.6rem; line-height: 1.2; }
  .kangen__calculator { width: 18px; margin-bottom: 9px; } }

.time { position: relative; z-index: 2; width: 42.7777777778vw; max-width: 616px; margin: 0 auto 80px; }
.time__etc { background-color: #FFF500; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top-left-radius: 20px; border-top-right-radius: 20px; }
.time__etc__text { width: 44%; }
.time__off { padding-bottom: 20px; background-color: #2367A4; color: #FFF500; font-weight: bold; font-size: min(4 * 1rem,4 * 10 / 1440 * 100vw); text-align: center; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; line-height: 1; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .time__off { font-size: 2.7777777778vw; } }
@media screen and (-ms-high-contrast: active) and (min-width: 144rem) { .time__off { font-size: 4rem; } }

.time__off__text-1 { font-size: min(2.8 * 1rem,2.8 * 10 / 1440 * 100vw); }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .time__off__text-1 { font-size: 1.9444444444vw; } }
@media screen and (-ms-high-contrast: active) and (min-width: 144rem) { .time__off__text-1 { font-size: 2.8rem; } }

.time__off__text-2 { font-size: min(6 * 1rem,6 * 10 / 1440 * 100vw); display: inline-block; margin: 0 5px; position: relative; top: 4px; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .time__off__text-2 { font-size: 4.1666666667vw; } }
@media screen and (-ms-high-contrast: active) and (min-width: 144rem) { .time__off__text-2 { font-size: 6rem; } }

.time__morning { position: absolute; top: 50%; left: 25px; width: 42.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.time__evening { position: absolute; top: 50%; right: 30px; width: 40.7%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); }
@media screen and (max-width: 959px) { .time { padding-top: 35px; width: auto; max-width: none; margin-bottom: 215px; }
  .time__etc { border-top-left-radius: 0; border-top-right-radius: 0; }
  .time__off { font-size: 4rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 200px; }
  .time__off__text-1 { font-size: 2.8rem; }
  .time__off__text-2 { font-size: 6rem; }
  .time__morning { max-width: 262px; width: 45%; top: 210px; left: 15%; -webkit-transform: translate(0); transform: translate(0); }
  .time__evening { max-width: 251px; width: 44%; top: 210px; right: 15%; -webkit-transform: translate(0); transform: translate(0); } }
@media screen and (max-width: 559px) { .time { padding-top: 45px; margin-bottom: 115px; }
  .time__etc { height: 40px; border-top-left-radius: 0; border-top-right-radius: 0; }
  .time__etc__text { width: 57.7%; }
  .time__off { padding-top: 6px; height: 165px; font-size: 3rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .time__off__text-1 { font-size: 3rem; }
  .time__morning { width: 45%; top: 165px; left: 4%; -webkit-transform: translate(0); transform: translate(0); }
  .time__evening { width: 44%; top: 165px; right: 4%; -webkit-transform: translate(0); transform: translate(0); } }

.content-box { max-width: 1000px; margin: 0 auto; }

.content-box__inner { border-left: 1px solid #555555; border-right: 1px solid #555555; padding: 20px; }

.content-box__myrage-service { background-color: #F3F7FA; border-left: 1px solid #555555; border-right: 1px solid #555555; border-bottom: 1px solid #555555; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 15px 40px 5px; }

.content-box__myrage-service ul { margin-bottom: 20px; }

.content-box__myrage-service li { margin-bottom: 5px; padding-left: 1.5em; text-indent: -1.5em; }

.content-box__myrage-service .ico_caution { width: 18px; display: inline-block; position: relative; top: 2px; margin-right: 5px; }

@media screen and (max-width: 959px) { .content-box { max-width: 600px; margin: 0 auto; }
  .content-box__inner { padding: 20px 15px; }
  .content-box__myrage-service { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 15px 13px 30px; }
  .content-box__myrage-service li { padding-left: 1.5em; text-indent: -1.5em; }
  .content-box__myrage-service .ico_caution { width: 14px; } }
@media screen and (max-width: 559px) {
  .content-box { margin: 0 4%; max-width: none; }
  .content-box__inner { padding: 20px 15px; }
  .content-box__myrage-service { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 15px 13px 30px; }
  .content-box__myrage-service li { padding-left: 1.5em; text-indent: -1.5em; }
  .content-box__myrage-service .ico_caution { width: 14px; }
}
.traffic-price { margin-bottom: 20px; }
.traffic-price h2 { background-color: #555555; color: white; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top-left-radius: 20px; border-top-right-radius: 20px; }
.traffic-price h2 span { color: #ee8002; }
.traffic-price__month__label { font-size: 1.8rem; font-weight: bold; background-color: #F3F7FA; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; }
.traffic-price__month__discount { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 15px; }
.traffic-price__month__discount-ten { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 60px; }
.traffic-price__month__discount-five-nine { display: -webkit-box; display: -ms-flexbox; display: flex; }
.traffic-price__month__discount p { vertical-align: text-bottom; font-size: 3.6rem; font-weight: bold; }
.traffic-price__month__discount p span { color: #ee8002; }
.traffic-price__month__discount p.traffic-pre-text { font-size: 1.8rem; font-weight: bold; -webkit-transform: translateY(18px); transform: translateY(18px); margin-right: 10px; }
.traffic-price__month__discount p.traffic-mini-text { font-weight: normal; font-size: 1.4rem; -webkit-transform: translateY(22px); transform: translateY(22px); }
.traffic-price__month__annotation { line-height: 1.6; font-size: 1.8rem; margin-bottom: 25px; }
.traffic-price__month__annotation dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 5px; }
.traffic-price__month__annotation p { text-align: center; font-size: 1.6rem; }
.traffic-price__example { padding-top: 25px; border-top: 1px solid #555555; }
.traffic-price__example__label { margin-top: 25px; margin-bottom: 15px; font-size: 1.8rem; text-align: center; border: 1px solid #cccccc; }
.traffic-price__example__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; }
.traffic-price__example__info__table { max-width: 240px; }
.traffic-price__example__info dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.4rem; width: 100%; }
.traffic-price__example__info dt { width: 100px; background-color: #F0F0F0; text-align: center; border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; padding-top: 10px; padding-bottom: 10px; }
.traffic-price__example__info dt:last-of-type { border-bottom: 1px solid #dddddd; }
.traffic-price__example__info dd { width: calc(100% - 100px); border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; padding: 10px; }
.traffic-price__example__info dd:last-of-type { border-bottom: 1px solid #dddddd; }
.traffic-price__example__info dd span { font-size: 1.2rem; }
.traffic-price__example__info__pay { width: 452px; }
.traffic-price__example__info__paytype { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-bottom: 10px; }
.traffic-price__example__info__paytype p { width: 50%; text-align: center; color: white; font-size: 1.2rem; padding: 2px 0 3px; }
.traffic-price__example__info__payimg { width: 420px; margin: 0 auto 10px; }
.traffic-price__example__info__kangen { background-color: #ee8002; color: white; font-size: 1.6rem; font-weight: bold; text-align: center; }
.traffic-price__example__info__kangen span { font-size: 2rem; color:#FFF500; }
.traffic-price__example__info__desc { position: relative; background-color: #fffed8; border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: auto;}
.traffic-price__example__info__desc::after { content: ''; position: absolute; display: block; border-right: 30px solid #fffed8; border-top: 10px solid transparent; border-bottom: 10px solid transparent; top: 60px; left: -30px; z-index: 2; }
.traffic-price__example__info__descinner { padding-left: 15px; padding-right: 15px; }
.traffic-price__example__info__desc { max-width: 240px; }
.traffic-price__example ._submit-btn { margin-bottom: 20px; }
.traffic-price h2.myrage-service-title { border-radius: 0; background-color: #3c98d9; font-size: 2.2rem; color: var(--yellow); }
.traffic-price .myrage-point { border: 1px solid #555555; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.traffic-price .myrage-point__text { text-align: center; margin-bottom: 20px; }
.traffic-price .myrage-point__text span { color: #ee8002; font-size: 2rem; font-weight: bold; }
.traffic-price .myrage-point li { width: calc((100% - 30px) / 3); }
.traffic-price .myrage-point li dt, .traffic-price .myrage-point li dd { padding: 5px 20px; font-weight: normal; font-size: 1.4rem; width: 50%; }
.traffic-price .myrage-point li dd { text-align: center; }
.traffic-price .myrage-point__annotation { margin-top: 20px; }
@media screen and (max-width: 959px) { .traffic-price { margin-bottom: 30px; }
  .traffic-price h2 { font-size: 2rem; height: 50px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
  .traffic-price__month__discount { display: block; margin-bottom: 15px; }
  .traffic-price__month__discount-ten { margin-right: 0; }
  .traffic-price__month__discount-five-nine { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .traffic-price__month__discount p { width: 56%; font-size: 2.5rem; }
  .traffic-price__month__discount-five-nine p { margin-bottom: 5px; }
  .traffic-price__month__discount p.traffic-pre-text { width: 44%; -webkit-transform: translateY(9px); transform: translateY(9px); margin-right: 0; padding-left: 4%; }
  .traffic-price__month__discount p.traffic-mini-text { width: 100%; -webkit-transform: translateY(0); transform: translateY(0); text-align: right; padding-right: 4%; }
  .traffic-price__month__annotation dl { font-size: 1.5rem; }
  .traffic-price__month__annotation dt { width: 75px; }
  .traffic-price__month__annotation dd { width: calc(100% - 75px); }
  .traffic-price__month__annotation p { font-size: 1.3rem; text-align: left; display: inline-block; padding-left: 1.2em; text-indent: -1.2em; }
  .traffic-price__example__label { font-size: 1.2rem; padding-top: 5px; padding-bottom: 5px; }
  .traffic-price__example__info { display: block; margin-bottom: 30px; }
  .traffic-price__example__info__table { max-width: none; margin-bottom: 10px; }
  .traffic-price__example__info__table dt, .traffic-price__example__info__table dd { width: 50%; padding: 10px 20px; }
  .traffic-price__example__info__pay { width: auto; margin-bottom: 10px; }
  .traffic-price__example__info__paytype { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-bottom: 10px; }
  .traffic-price__example__info__paytype p { width: 50%; text-align: center; color: white; font-size: .9rem; }
  .traffic-price__example__info__payimg { width: 96%; margin: 0 auto 10px; }
  .traffic-price__example__info__desc { max-width: none; border-radius: 10px; padding: 15px; text-align: center; }
  .traffic-price__example__info__desc::after { display: none; }
  .traffic-price h2.myrage-service-title { font-size: 1.6rem; height: 30px; }
  .traffic-price .myrage-point__text { margin-bottom: 15px; }
  .traffic-price .myrage-point li { width: 100%; }
  .traffic-price .myrage-point li dt, .traffic-price .myrage-point li dd { padding: 15px; text-align: center; font-size: 1.3rem; }
  .traffic-price .myrage-point { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
  .traffic-price .myrage-point__annotation { font-size: 1.2rem; } }

.etc-box { margin-top: 80px; }
.etc-box ._btn-purple, .etc-box ._btn-blue { width: 340px; }
.etc-box__submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 70px; }
@media screen and (max-width: 959px) { .etc-box { max-width: 500px; margin: 50px auto; }
  .etc-box__submit { display: block; }
  .etc-box ._submit-btn { margin-left: auto; margin-right: auto; margin-top: 20px; } }
@media screen and (max-width: 559px) { .etc-box { max-width: none; margin: 50px 4%; }
  .etc-box__submit { display: block; }
  .etc-box ._submit-btn { margin-left: auto; margin-right: auto; margin-top: 0; } }

.step-content dt { width: min(29%,420px); color: white; position: relative; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .step-content dt { width: 29%; } }
@media screen and (-ms-high-contrast: active) and (min-width: calc(29% / 420px * 100vw)) { .step-content dt { font-size: 420px; } }

.step-content dd { width: max(71%,calc(100% - 420px)); }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .step-content dd { min-width: 71%; width: calc(100% - 420px); } }
.step-content__input { padding: 40px 200px 40px 40px; }
@media screen and (max-width: 959px) { .step-content dt { width: 33%; }
  .step-content dd { width: 67%; } }
@media screen and (max-width: 559px) { .step-content__input { padding: 15px; } }

.simulation__title { text-align: center; font-size: 3.6rem; margin-bottom: 30px; color: #ee8002; }
.simulation__title span { display: inline-block; position: relative; padding-bottom: 20px; }
.simulation__title span::after { content: ''; display: block; position: absolute; width: 50%; height: 1px; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #ee8002; }
.simulation__intro { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 0 auto 40px; width: 780px; }
.simulation__intro--text02{
  font-size: 1.6rem; font-weight: normal; margin: 2rem 0 1.5rem;
}
.simulation__intro--attention{
  display: flex;
  justify-content: center;
  width: 90%;
  margin-inline: auto;
}
.simulation__intro--attention a{
  color: var(--link-red);
  text-decoration: underline;
}
.simulation__intro--attention a:hover{
  text-decoration: none;
}
.simulation__intro .attention { text-align: center; padding-left: 1.6rem; text-indent: -1.6rem; /*margin-left: 6rem;*/ }
.simulation__intro span { font-size: 1.6rem; font-weight: normal; }
.simulation dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.simulation dt span { font-size: 1.2rem; }
.simulation dt .svgbox { margin-left: auto; margin-right: auto; margin-bottom: 10px; }
.simulation__step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 240px; height: 100%; }
.simulation__step-02, .simulation__step-03, .simulation__step-04 { display: none; }
.simulation__step-inner { text-align: center; }
.simulation__step-inner p { font-size: 2rem; font-weight: bold; }
.simulation__step-blue { background-color: #2367A4; background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #3876ad 0, #3876ad 15px); }
.simulation__step-orange { background-color: #ee8002; background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #f18c18 0, #f18c18 15px); }
.simulation__input-blue { background-color: #f5f7fa; }
.simulation__input-orange { background-color: #fef8f3; }
.simulation__icon-car { width: 37px; }
.simulation__icon-road { width: 40px; }
.simulation__icon-calendar { width: 28px; }
.simulation__cartype { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; }
.simulation__cartype li { margin-right: 2%; margin-bottom: 20px; width: calc(94% / 3); }
.simulation__cartype li:nth-last-child(-n+2) { margin-bottom: 0; }
.simulation__cartype li .simulation_check { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: white; height: 70px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; }
.simulation__cartype li .simulation_check._checked { color: #2367A4; border: 2px solid #2367A4; }
.simulation__step-arrow { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 55%); transform: translate(-50%, 55%); z-index: 2; }
.simulation__road-section { 
  display: flex; 
  align-items: center;
  flex-direction: column;
  justify-content: center; 
  height: 100%;
}
.simulation__road-section p{
  margin-top: 20px;
  text-indent: -1em;
  padding: 1em;
  max-width: 590px;
  width: 100%;
}
.simulation__road-section__inner {
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  /* height: 100%;  */
  width: 100%; 
}
.simulation__road-section__inner li:nth-child(1) { width: min(40%,260px); }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .simulation__road-section__inner li:nth-child(1) { width: 40%; max-width: 260px; } }
.simulation__road-section__inner li:nth-child(3) { width: min(40%,260px); }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .simulation__road-section__inner li:nth-child(3) { width: 40%; max-width: 260px; } }
.simulation__road-section__select-outer { position: relative; }
.simulation__road-section__select-outer::after { content: ''; position: absolute; width: 6px; height: 6px; border-right: 2px solid #ee8002; border-bottom: 2px solid #ee8002; top: 45%; right: 20px; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }
.simulation__road-section__inner select { width: 100%; height: 70px; color: #ee8002; border: 2px solid #ee8002; font-weight: bold; text-align: -webkit-center; text-align: center; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; font-size: 1.8rem; padding-left: 20px; padding-right: 20px; background-color: white; }
.simulation__road-section__inner select::-ms-expand { display: none; }
.simulation__road-section__inner li:nth-child(2) { padding: 0 20px; }
.simulation__traffic-count { padding-top: 10px; max-width: 600px; margin-left: auto; margin-right: auto; }
.simulation__traffic-count__input { text-align: center; position: relative; }
.simulation__traffic-count__input input { width: 260px; height: 70px; border: 2px solid #2367A4; text-align: center; font-size: 1.8rem; margin-right: 10px; margin-bottom: 25px; }
.simulation__traffic-count__txt-blue { display: inline-block; color: #2367A4; -webkit-transform: translateY(16px); transform: translateY(16px); }
.simulation__to-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; }
.simulation__under-arrow { width: 29%; max-width: 420px; text-align: center; }
.simulation__under-arrow div { width: 120px; margin-right: auto; margin-left: auto; }
.simulation__under-arrow .svgbox img { width: 100%; }
.simulation__result-btn { width: calc(100% - 420px); min-width: 71%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 40px; padding-right: 200px; }
@media screen and (max-width: 959px) { .simulation__intro { font-size: 1.6rem; margin-bottom: 20px; width: 90%; }
  .simulation__intro .attention {margin-left: 0;}
  .simulation__intro span { font-size: 1.3rem; }
  .simulation dt span { font-size: 1.1rem; }
  .simulation__step { min-height: 200px; }
  .simulation__step-inner p { font-size: 1.5rem; }
  .simulation__step-arrow { width: 16px; }
  .simulation__icon-car { width: 32px; }
  .simulation__icon-road { width: 32px; }
  .simulation__icon-calendar { width: 24px; }
  .simulation__cartype { display: block; }
  .simulation__cartype li { width: auto; margin: 0 0 5px 0; }
  .simulation__cartype li:nth-child(3n) { margin: 0 0 5px 0; }
  .simulation__cartype li:nth-last-child(-n+2) { margin: 0 0 5px 0; }
  .simulation__cartype li:last-child { margin-bottom: 0; }
  .simulation__cartype li .simulation_check { width: 100%; height: 40px; }
  .simulation__road-section__arrow { width: 22px; margin: 0 auto; }
  .simulation__road-section__inner { display: block; width: 100%; height: auto; }
  .simulation__road-section__inner li:nth-child(1) { width: 100%; }
  .simulation__road-section__inner li:nth-child(3) { width: 100%; }
  .simulation__road-section__inner select { width: 100%; height: 40px; font-size: 1.3rem; }
  .simulation__traffic-count__input { text-align: left; }
  .simulation__traffic-count__input input { width: 85%; height: 40px; }
  .simulation__traffic-count__txt-blue { -webkit-transform: translateY(2px); transform: translateY(2px); }
  .simulation__traffic-count p { padding-left: 1.5em; text-indent: -1.5em; }
  .simulation__under-arrow { width: 33%; }
  .simulation__under-arrow div { width: 62px; } }
@media screen and (max-width: 559px) { .simulation__title { font-size: 3rem; }
  .simulation__to-result { display: block; position: relative; }
  .simulation__result-btn { width: 100%; position: absolute; top: 40%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding-left: 0; padding-right: 0; }
  .simulation__road-section__inner select { font-size: 16px; }
  .simulation__traffic-count__input input { font-size: 16px; } }
.simulation__traffic-count__input__error { position: absolute; background-color: #fff2f2; top: -40px; left: 50%; -webkit-transform: translateX(-55%); transform: translateX(-55%); border: 1px solid #faabab; -webkit-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; opacity: 0; visibility: hidden; }
.simulation__traffic-count__input__error p { min-width: 292px; text-align: left; line-height: 1; padding: 10px; position: relative; color: red; }
.simulation__traffic-count__input__error p::before { content: ''; display: block; position: absolute; bottom: -20px; right: 15%; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #faabab; }
.simulation__traffic-count__input__error p::after { content: ''; display: block; position: absolute; bottom: -18px; right: calc(15% + 1px); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 19px solid #fff2f2; }
.simulation__traffic-count__input__error.active { opacity: 1; visibility: visible; }
@media screen and (max-width: 959px) { .simulation__traffic-count__input__error { left: 0; -webkit-transform: translateX(0); transform: translateX(0); }
  .simulation__traffic-count__input__error p { padding: 10px; text-indent: 0; } }
@media screen and (max-width: 559px) { .simulation__traffic-count__input__error { top: -50px; }
  .simulation__traffic-count__input__error p { line-height: 1.2; padding: 5px; min-width: 0; max-width: 190px; } }

.result { display: none; }
.result dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.result dt span { font-size: 1.2rem; }
.result dt .svgbox { margin-left: auto; margin-right: auto; margin-bottom: 10px; }
.result__step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 240px; height: 100%; }
.result__step-inner { text-align: center; }
.result__step-inner p { font-size: 2rem; font-weight: bold; }
.result__step-deepblue { background-color: #162b45; background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #2b3e55 0, #2b3e55 15px); }
.result__icon-calculator { width: 37px; }
.result__price { background-color: #f3f4f5; }
.result__base { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; border-bottom: 2px solid #ee8002; }
.result__cache.result__base{
  border-bottom: 2px solid var(--blue);
}
.result__base__text-1 {
  font-size: 2rem; margin-right: 40px;
  width: 160px;
}
.result__base__price-wrapper{
  width: 230px;
  display: flex;
}
.result__base__price { font-size: 3rem; margin-right: 10px; -webkit-transform: translateY(-12px); transform: translateY(-12px); width: 60%; text-align: right; }
.result__price-label { font-size: 2rem; }
.result__base__under { width: 29px; margin-left: auto; margin-right: auto; margin-bottom: 2rem;}
.result__calculation { margin-bottom: 20px; }
.result__calculation__label { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #ee8002; padding: 22px 25px 20px; color: white; font-weight: bold; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; height: 80px; }
.result__calculation__text-1 { font-size: 2.6rem; }
.result__calculation__price-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.result__calculation__price-number { font-size: 4.6rem; -webkit-transform: translateY(-22px); transform: translateY(-22px); margin-right: 20px; }
.result__calculation__label .result__price-label { font-size: 2.6rem; }
.result__calculation__annotation { font-weight: normal; position: absolute; right: 10px; top: 5px; }
.result__calculation__info { background-color: white; border-left: 2px solid #ee8002; border-right: 2px solid #ee8002; border-bottom: 2px solid #ee8002; padding: 20px 25px; }
.result__calculation__info ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.result__calculation__info li { display: -webkit-box; display: -ms-flexbox; display: flex; height: 40px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; font-size: 1.8rem; font-weight: bold; }
.result__calculation__info li:nth-child(1) {
  border-right: 1px solid #ee8002;
  width: 44.7%;
  position: relative;
}
.result__calculation__info-annotation{
  font-weight: normal;
  position: absolute;
  top: -5px;
  right: 10px;
}
.result__calculation__info__text-1 { margin-right: 20px; }
.result__calculation__info__price { margin-right: 10px; -webkit-transform: translateY(4px); transform: translateY(4px); }
.result__calculation__info__price span { font-size: 2.8rem; }
.result__calculation__info__text-2 { color: #ee8002; }
.result__calculation__info li:nth-child(2) { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-size: 1.6rem; width: 55.3%; }
.result__calculation__info__text-3 { margin-right: 30px; }
.result__calculation__info__point { margin-right: 5px; -webkit-transform: translateY(4px); transform: translateY(4px); }
.result__calculation__info__point span { font-size: 2.6rem; }
.result__calculation__info__text-4 { color: #2367A4; }
.result__price-inner { max-width: 840px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 1329px) {
  .result__calculation__info { padding: 14px; }
  .result__calculation__info ul { display: block; }
  .result__calculation__info li { -ms-flex-wrap: wrap; flex-wrap: wrap; height: auto; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .result__calculation__info li:nth-child(1) { border-right: none; border-bottom: 1px solid #ee8002; width: 100%; padding-bottom: 10px; }
  .result__calculation__info li:nth-child(2) { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 10px; }
  .result__calculation__info-annotation{
    top: 0;
    right: 0;
  }
}
@media screen and (max-width: 1169px) { .result__calculation__label { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
  .result__calculation__text-1 { font-size: 1.8rem; }
  .result__calculation__price-box { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
  .result__calculation__price-number { font-size: 3.4rem; -webkit-transform: translateY(-4px); transform: translateY(-4px); margin-right: 20px; line-height: 1; }
  .result__calculation__label .result__price-label { font-size: 1.8rem; } }
@media screen and (max-width: 959px) { .result dt span { font-size: 1.1rem; }
  .result__step-inner p { font-size: 1.4rem; }
  .result__icon-calculator { width: 25px; }
  .result__price { padding-right: 200px; }
  .result__base { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .result__base__text-1 { font-size: 1.3rem; margin-right: 0; width: auto; }
  .result__base__price { font-size: 2.3rem; margin-right: 0; -webkit-transform: translateY(-12px); transform: translateY(-12px); }
  .result__price-label { font-size: 1.3rem; }
  .result__base__under { width: 31px; margin-bottom: 10px; }
  .result__calculation { margin-bottom: 20px; }
  .result__calculation__label { display: block; height: auto; padding: 21px 15px; line-height: 1; }
  .result__calculation__price-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
  .result__calculation__text-1 { font-size: 1.8rem; margin-bottom: 14px; text-align: center; }
  .result__calculation__price-number { font-size: 3.3rem; margin-right: 0; -webkit-transform: translateY(0); transform: translateY(0); width: 68%; text-align: center; }
  .result__calculation__label .result__price-label { font-size: 1.8rem; -webkit-transform: translateY(-4px); transform: translateY(-4px); }
  .result__calculation__annotation { font-size: 1rem; font-weight: normal; position: absolute; right: 15px; top: 50px; }
  .result__calculation__info { padding: 14px; }
  .result__calculation__info ul { display: block; }
  .result__calculation__info li { -ms-flex-wrap: wrap; flex-wrap: wrap; height: auto; font-size: 1.3rem; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .result__calculation__info li:nth-child(1) { border-right: none; border-bottom: 1px solid #ee8002; width: 100%; padding-bottom: 10px; }
  .result__calculation__info__text-1 { margin-right: 0; width: 100%; }
  .result__calculation__info__price { margin-right: 10px; -webkit-transform: translateY(0); transform: translateY(0); }
  .result__calculation__info__price span { font-size: 2.3rem; line-height: 1; }
  .result__calculation__info li:nth-child(2) { font-size: 1.3rem; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 10px; }
  .result__calculation__info__text-3 { margin-right: 0; }
  .result__calculation__info__point { margin-right: 10px; -webkit-transform: translateY(0); transform: translateY(0); }
  .result__calculation__info__point span { font-size: 2.3rem; line-height: 1; }
  .result__annotation { font-size: 1.3rem; margin: 14px 4%; padding-left: 2em; text-indent: -2em; }
  .result__calculation__info-annotation{
    font-size: 1rem;
  }
  .simulation__road-section p{
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 559px) {
  .result__calculation__text-1 { font-size: 1.6rem; }
  .result__price { padding: 30px 12px; }
  .result__base__price-wrapper{
    width: auto;
  }
  .result__base__price{
    width: auto;
    margin-right: .8rem;
  }
  .traffic-price__example__info__note{
    margin-bottom: 1.5rem;
  }
  .traffic-price__example ._submit-btn { margin-bottom: 5px; }
  .simulation__intro--text02{
    font-size: 1.3rem;
  }
  .traffic-price__example__info__kangen { font-size: 1.2rem; }
  .traffic-price__example__info__kangen span { font-size: 1.4rem; }

  .simulation__road-section p{
    font-size: 1.2rem;
    margin-top: 0;
  }
}

.bnr__ageage-etc { display: block; position: fixed; z-index: 3; right: 0; top: 190px; }
.bnr__etc-card { display: block; position: fixed; z-index: 3; right: 0; top: 350px; }
@media screen and (max-width: 559px) { .bnr__ageage-etc { top: auto; right: auto; bottom: 0; left: 0; width: 50%; z-index: 4; }
  .bnr__etc-card { top: auto; bottom: 0; width: calc(50% + 2px); padding-left: 2px; margin-left: -2px; background-color: #493488; } }

.inview-fade { opacity: 0; -webkit-transition: opacity .8s; transition: opacity .8s; }
.inview-fade.is-inview { opacity: 1; }

.inview-fade-up { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition: opacity .8s, -webkit-transform .8s; transition: opacity .8s, -webkit-transform .8s; transition: opacity .8s, transform .8s; transition: opacity .8s, transform .8s, -webkit-transform .8s; }
.inview-fade-up.is-inview { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); /* 30px��Ɉړ����� */ -webkit-transition-delay: .5s; transition-delay: .5s; /* �t�F�[�h�J�n��0.5�b�x�点�� */ }

.link-red {color: red;}