@charset "utf-8";

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {margin: 0;padding: 0;border: 0;font-weight: normal;font-size: 100%;vertical-align: baseline;}
article, header, footer, aside, figure, figcaption, nav, section {display: block;}
body {line-height: 1;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
ol, ul {list-style: none;list-style-type: none;}
figure {margin: 0;}
button, input[type="submit"] {border: 0 none;background: none;cursor: pointer;}
select::-ms-expand {display: none;}
img, input[type="image"] {max-width: 100%;width:auto;height: auto;backface-visibility: hidden;-webkit-backface-visibility: hidden;object-fit: cover;}
a {text-decoration: none;color: #000;}
a:hover, a img:hover, button:hover {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {height: 100%;-webkit-text-size-adjust: 100%;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
body {height: 100%;margin: 0 auto;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";font-size: 1rem;line-height: 2;color: #000;overflow-x: hidden;}
@media only screen and (min-width: 0px) and (max-width: 767px) {body {font-size: 0.8rem;line-height: 1.8;}}

.pc {display: inherit;}
.sp {display: none;}
.inner {width: 100%;max-width: 1140px;margin: auto;}
@media only screen and (min-width: 0px) and (max-width: 1139px) {.inner {width: 95%;}}
@media only screen and (min-width: 0px) and (max-width: 767px) {.pc {display: none;}.sp {display: block;}}
.flex {display: -webkit-box;display: -moz-box;display: -webkit-flexbox;display: -moz-flexbox;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;flex-wrap: wrap;}
.Acenter {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.mincho {font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";}

/* --------------------------------------------------------------------------------------------------------------------------- */

header {width: 100%;padding: 1% 0 60% 0;position: relative;background: url("images/mv.jpg") no-repeat 0 0 / 100% 100%;}
header h1 {position: absolute;top: 10px;left: 10px;}
header h1 a img {filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6)); height: 40px; width: auto;}
header #pageNav {position: absolute;top: 0;right: 0;}
header #pageNav ul {}
header #pageNav ul li {margin: 20px 20px 0 0;}
header #pageNav ul li a {font-weight: bold;text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;}
header #pageNav ul li a:hover {color: #0b5ba8;}
/*header h2 {width: 70%;margin: 3% 20px 0 auto;display: block;}*/
@media only screen and (min-width: 1367px) and (max-width: 1440px) {}
@media only screen and (min-width: 1281px) and (max-width: 1366px) {}
@media only screen and (min-width: 1141px) and (max-width: 1280px) {}
@media only screen and (min-width: 1025px) and (max-width: 1140px) {}
@media only screen and (min-width: 981px) and (max-width: 1024px) {header h1 {width: 20%;}}
@media only screen and (min-width: 768px) and (max-width: 980px) {header {background: url("images/mv.jpg") no-repeat 0 0 / 100% auto;}header h1 {width: 20%;}}
@media only screen and (min-width: 0px) and (max-width: 767px) {header {padding: 0 0 160% 0;background: url("images/mv_sp.jpg") no-repeat 0 0 / 100% auto;}header h1 {width: 45%;top: 10px;left: 10px;}}
@media only screen and (min-width: 0px) and (max-width: 1024px) {
header #pageNav ul {display: none;}
.menu-trigger {width: 40px;height: 50px;float: right;position: absolute;top: 2%;right: 1%;z-index: 10;}
.menu-trigger, .menu-trigger span {display: inline-block;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;cursor: pointer;-webkit-transition: all .4s;-moz-transition: all .4s;transition: all .4s;}
.menu-trigger span {width: 35px;height: 4px;margin: auto;position: absolute;background: #000;}
.menu-trigger span:nth-of-type(1) {top: 10px;}
.menu-trigger span:nth-of-type(2) {top: 0;bottom: 0;}
.menu-trigger span:nth-of-type(3) {bottom: 10px;}
.menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(13px) rotate(-45deg);transform: translateY(13px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
.menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-13px) rotate(45deg);transform: translateY(-13px) rotate(45deg);}
header #pageNav {width: 100%;background: #fff;}
header #pageNav ul {padding: 50px 0;}
header #pageNav ul li {width: 100%;margin: 0 auto;padding: 0;border-bottom: 1px solid #ccc;}
header #pageNav ul li:last-child {border-bottom: 0 none;}
header #pageNav ul li a {width: 100%;margin: 0 auto;padding: 15px 0 18px;display: block;text-align: center;font-size: 1rem;}
}

footer {width: 100%;padding: 20px 0 10px;text-align: center;background: #052355;color: #fff;}
footer p {margin: 5px auto;font-size: 0.8rem;}
footer p a {color: #fff;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
footer p {margin: 5px auto;font-size: 0.7rem;}
}

.contact {padding: 0 0 20px;text-align: center;background: #dce5ed;}
.contact .c_ber {}
.contact ul {width: 90%;margin: 10px auto 0;justify-content: space-between;}
.contact ul li:nth-child(1) {width: 55%;}
.contact ul li:nth-child(2) {width: 40%;}
.contact ul li .utit {margin: 0 auto 10px;position: relative;color: #072a6d;font-size: 1.6rem;}
.contact ul li .utit::before {content: "";width: 100%;height: 1px;position: absolute;top: 50%;left: 0;background: #072a6d;}
.contact ul li .utit span {padding: 0 15px;position: relative;z-index: 1;background: #dce5ed;font-weight: bold;}
.contact ul li:nth-child(2) .utit + p {margin: 30px auto 0;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.c_txt {padding: 0 20px;}
	.contact ul li:nth-child(1) {width: 90%;margin: 0 auto 10px;}
	.contact ul li:nth-child(2) {width: 90%;margin: 0 auto;}
	.contact ul li .utit {font-size: 1rem;}
	.contact ul li:nth-child(2) .utit + p {margin: 0 auto;}
}

/* --------------------------------------------------------------------------------------------------------------------------- */

#about {width: 100%;padding: 3% 0 1%;background: url("images/bus2.png") no-repeat right 10% / 400px;}
#about h3 {margin: 0 auto 50px;}
#about #atxt1 {margin: 0 auto 50px;}
#about #atxt2 {margin: 0 auto 50px;}
@media only screen and (max-width: 1024px) {#about {width: 100%;padding: 3% 0 1%;background: url("images/bus2.png") no-repeat right 10% / 300px;}}
@media only screen and (min-width: 0px) and (max-width: 767px) {
#about {width: 100%;padding: 3% 0 1%;background: none;}
#about h3 {width: 70%;margin: 0 auto 20px;}
#about #atxt1 {margin: 0 auto 20px;}
#about #atxt2 {width: 70%;margin: 0 auto 20px;}
}

#scene {width: 100%;padding: 11% 0 10%;text-align: center;background: url("images/back.png") no-repeat center / 100% 90%;color: #fff;}
#scene h3 {margin: 0 auto 30px;}
#scene h3 + p {margin: 0 auto 40px;}
#scene ul {justify-content: space-between;line-height: 1.5;}
#scene ul li {width: 24%;margin: 0 auto 20px;}
@media only screen and (min-width: 1441px) and (max-width: 1536px) {#scene {background: url("images/back.png") no-repeat center / 110% 90%;}}
@media only screen and (min-width: 1367px) and (max-width: 1440px) {#scene {background: url("images/back.png") no-repeat center / 110% 100%;}}
@media only screen and (min-width: 1281px) and (max-width: 1366px) {#scene {background: url("images/back.png") no-repeat center / 120% 100%;}}
@media only screen and (min-width: 1141px) and (max-width: 1280px) {#scene {background: url("images/back.png") no-repeat center / 130% 100%;}}
@media only screen and (min-width: 1025px) and (max-width: 1140px) {#scene {background: url("images/back.png") no-repeat center / 140% 100%;}}
@media only screen and (min-width: 981px) and (max-width: 1024px) {#scene {background: url("images/back.png") no-repeat center / 140% 100%;}}
@media only screen and (min-width: 768px) and (max-width: 980px) {#scene {background: url("images/back.png") no-repeat center / 170% 100%;}}
@media only screen and (min-width: 0px) and (max-width: 767px) {#scene {padding: 35% 0 30%;background: url("images/back.png") no-repeat center / 200% 100%;}#scene h3 {width: 60%;}#scene ul li {width: 48%;}}

#plan {padding: 50px 0 10px;}
#plan h3 {margin: 0 auto 50px;text-align: center;}
#plan #priceBox {width: 85%;margin: 0 auto 30px;padding: 50px 50px 100px;background: url("images/price_back.jpg") no-repeat 0 0 / 100% 100%;}
#plan #priceBox h4 {margin: 0 auto 50px;position: relative;text-align: center;}
#plan #priceBox h4::after {content: "";width: 220px;height: 200px;position: absolute;top: 0;right: 0;display: block;background: url("images/bus1.png") no-repeat center / cover;}
#plan #priceBox .kihon {margin: 40px auto 60px;padding: 5px 20px 10px;background: #fff;}
#plan #priceBox .kihon h6 {margin: 0 auto 10px;border-bottom: 1px solid #000;font-size: 1.2rem;}
#plan #priceBox h5 {margin: 0 auto 30px;text-align: center;font-size: 1.86rem;color: #fff;}
#plan #priceBox table {width: 100%;margin: 0 auto 30px;border-collapse: collapse;border-spacing: 0;text-align: center;line-height: 1.5;}
#plan #priceBox table th {padding: 10px;background: #dce5ed;color: #072a6d;border: 1px solid #072a6d;font-weight: bold;}
#plan #priceBox table td {padding: 10px;background: #fff;border: 1px solid #072a6d;vertical-align: middle;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
#plan {padding: 0;}
#plan h3 {width: 60%;}
#plan #priceBox {width: 100%;padding: 20px 30px 50px;}
#plan #priceBox h4::after {width: 100px;height: 80px;}
#plan #priceBox .kihon {margin: 20px auto 30px;font-size: 0.7rem;}
#plan #priceBox .kihon h6 {font-size: 1rem;}
#plan #priceBox h5 {font-size: 1.3rem;}
#plan #priceBox table {display: block;overflow-x: scroll;white-space: nowrap;-webkit-overflow-scrolling: touch;font-size: 0.7rem;}
#plan #priceBox table tbody {width: 100%;display: block;}
}

#service {width: 100%;padding: 14% 0 12%;text-align: center;background: url("images/back.png") no-repeat center / 110% 90%;}
#service h3 {margin: 0 auto 30px;}
#service figure {width: 80%;margin: auto;position: relative;}
#service figure::after {content: "";width: 400px;height: 350px;position: absolute;bottom: -15px;right: -140px;display: block;background: url("images/operator.png") no-repeat 0 0 / cover;}
@media only screen and (min-width: 1441px) and (max-width: 1536px) {#service {background: url("images/back.png") no-repeat center / 110% 90%;}}
@media only screen and (min-width: 1367px) and (max-width: 1440px) {#service {background: url("images/back.png") no-repeat center / 110% 100%;}}
@media only screen and (min-width: 1281px) and (max-width: 1366px) {#service {background: url("images/back.png") no-repeat center / 120% 100%;}}
@media only screen and (min-width: 1141px) and (max-width: 1280px) {#service {background: url("images/back.png") no-repeat center / 130% 100%;}}
@media only screen and (min-width: 1025px) and (max-width: 1140px) {#service {background: url("images/back.png") no-repeat center / 140% 100%;}}
@media only screen and (min-width: 981px) and (max-width: 1024px) {#service {background: url("images/back.png") no-repeat center / 130% 100%;}}
@media only screen and (min-width: 768px) and (max-width: 980px) {#service {background: url("images/back.png") no-repeat center / 170% 100%;}}
@media only screen and (min-width: 0px) and (max-width: 767px) {
#service {padding: 17% 0 30%;background: url("images/back.png") no-repeat center / 200% 100%;}
#service h3 {width: 60%;}
#service figure {width: 95%;}
#service figure::after {width: 180px;height: 130px;position: absolute;bottom: -35px;right: -10px;}
}

#results {padding: 50px 0 10px;}
#results h3 {margin: 0 auto 50px;text-align: center;}
#results h3 + p {margin: 0 auto 50px;text-align: center;font-weight: bold;}
#results ul {justify-content: space-between;}
#results ul li {width: 48%;margin: 0 auto 20px;}
#results ul li h4 {margin: 0 auto 30px;padding: 0 0 0 20px;position: relative;border-bottom: 1px solid #000;font-size: 1.1rem;font-weight: bold;}
#results ul li h4::before {content: "";width: 0;height: 0;position: absolute;left: 0;top: 8px;display: block;border-left: 12px solid #072a6d;border-top: 8px solid transparent;border-bottom: 8px solid transparent;}
#results ul li ul {font-size: 0.9rem;line-height: 2.3;}
#results ul li ul li {margin: 0 auto;}
#results ul li ul li strong {display: block;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
#results h3 {width: 60%;}
#results ul li ul li {width: 100%;}
#results ul li h4 {margin: 0 auto 10px;padding: 0 0 5px 10px;font-size: 0.88em;line-height: 1.3;}
#results ul li h4::before {top: 0;border-left: 8px solid #072a6d;border-top: 5px solid transparent;border-bottom: 5px solid transparent;}
#results ul li ul {font-size: 0.7rem;line-height: 2;flex-direction: column-reverse;}
}

#revolution {width: 100%;margin: 0 auto 50px;padding: 15% 0 10%;text-align: center;background: url("images/back.png") no-repeat center / 140% 100%;}
#revolution h3 {margin: 0 auto 30px;}
#revolution figure {width: 70%;margin: auto;position: relative;}
@media only screen and (min-width: 1441px) and (max-width: 1536px) {#revolution {background: url("images/back.png") no-repeat center / 110% 90%;}}
@media only screen and (min-width: 1367px) and (max-width: 1440px) {#revolution {background: url("images/back.png") no-repeat center / 110% 100%;}}
@media only screen and (min-width: 1281px) and (max-width: 1366px) {#revolution {background: url("images/back.png") no-repeat center / 120% 100%;}}
@media only screen and (min-width: 1141px) and (max-width: 1280px) {#revolution {background: url("images/back.png") no-repeat center / 130% 100%;}}
@media only screen and (min-width: 1025px) and (max-width: 1140px) {#revolution {background: url("images/back.png") no-repeat center / 140% 100%;}}
@media only screen and (min-width: 981px) and (max-width: 1024px) {#revolution {background: url("images/back.png") no-repeat center / 130% 100%;}}
@media only screen and (min-width: 768px) and (max-width: 980px) {#revolution {background: url("images/back.png") no-repeat center / 170% 100%;}}
@media only screen and (min-width: 0px) and (max-width: 767px) {
#revolution {margin: 0 auto 0;padding: 25% 0 20%;background: url("images/back.png") no-repeat center / 200% 100%;}
#revolution h3 {width: 60%;}
#revolution figure {width: 90%;}
}

#comparison {width: 100%;padding: 12% 0 12%;text-align: center;background: url("images/back.png") no-repeat center / 110% 90%;}
#comparison h3 {margin: 0 auto 30px;}
#comparison table {width: 100%;margin: 0 auto 30px;border-collapse: collapse;border-spacing: 0;text-align: center;line-height: 1.5;}
#comparison table th {padding: 10px;background: #dce5ed;color: #072a6d;border: 1px solid #072a6d;font-weight: bold;}
#comparison table td {padding: 10px;background: #fff;border: 1px solid #072a6d;vertical-align: middle;}
#comparison table .tousya {background: #f5d1d2;color: #d70915;}
#comparison table .other {background: #dce5ed;color: #072a6d;}
#comparison table caption {caption-side: bottom; text-align: right;color: #fff;}
@media only screen and (min-width: 1441px) and (max-width: 1536px) {#comparison {background: url("images/back.png") no-repeat center / 110% 90%;}}
@media only screen and (min-width: 1367px) and (max-width: 1440px) {#comparison {background: url("images/back.png") no-repeat center / 110% 100%;}}
@media only screen and (min-width: 1281px) and (max-width: 1366px) {#comparison {background: url("images/back.png") no-repeat center / 120% 100%;}}
@media only screen and (min-width: 1141px) and (max-width: 1280px) {#comparison {background: url("images/back.png") no-repeat center / 130% 100%;}}
@media only screen and (min-width: 1025px) and (max-width: 1140px) {#comparison {background: url("images/back.png") no-repeat center / 140% 100%;}}
@media only screen and (min-width: 981px) and (max-width: 1024px) {#comparison {background: url("images/back.png") no-repeat center / 130% 100%;}}
@media only screen and (min-width: 768px) and (max-width: 980px) {#comparison {background: url("images/back.png") no-repeat center / 170% 100%;}}
@media only screen and (min-width: 0px) and (max-width: 767px) {
#comparison {margin: 0;padding: 30% 0 22%;background: url("images/back.png") no-repeat center / 200% 100%;}
#comparison h3 {width: 90%;}
}

#contact {padding: 20px 0 80px;}
#contact h3 {margin: 0 auto 30px;text-align: center;}
#contact h3 + p {margin: 0 auto 50px;text-align: center;}
#contact dl {width: 70%;max-width: 1000px;line-height: 1;}
#contact dl dt {width: 100%;margin: 0 auto 20px;padding: 0 0 10px;border-bottom: 1px solid #072a6d;color: #072a6d;font-weight: bold;}
#contact dl dt span {margin: 0 0 0 20px;padding: 5px 10px;display: inline-block;background: #ab0000;color: #fff;font-size: 0.7rem;}
#contact dl dt small {margin: 0 0 0 20px;display: inline-block;font-size: 0.7rem;}
#contact dl dd {width: 100%;margin: 0 auto 20px;}
#contact dl dd input[type="text"], #contact dl dd input[type="email"], #contact dl dd input[type="tel"] {width: 65%;margin: 0 0 10px;padding: 10px;background: #dce5ed;border: 1px solid #ccc;}
#contact dl dd input[type="text"].i_small {width: 30%;}
#contact dl dd input[type="text"].i_full {width: 100%;}
#contact dl dd textarea {width: 100%!important;height: 200px!important;padding: 10px;background: #dce5ed;border: 1px solid #ccc;}
#contact button {margin: 50px auto 0;padding: 20px 100px;display: table;background: #072a6d;color: #fff;font-size: 1.3rem;line-height: 1;cursor: pointer;-webkit-border-radius: 0.3em;-moz-border-radius: 0.3em;border-radius: 0.3em;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
#contact {padding: 20px 0 50px;}
#contact h3 {width: 80%;}
#contact h3 + p {padding: 0 30px;}
#contact dl {width: 90%;}
#contact dl dt {font-size: 1.14rem;}
#contact dl dd input[type="text"], #contact dl dd input[type="email"], #contact dl dd input[type="tel"] {width: 100%;}
}

#thanks {padding: 10% 0;text-align: center;}
#thanks .btn a {margin: 50px auto 0;padding: 10px 50px;display: inline-block;background: #01255f;color: #fff;}

/* --------------------------------------------------------------------------------------------------------------------------- */