@charset "utf-8";

*,::after,::before { box-sizing:border-box;}
html {	font-family:sans-serif;
	line-height:1.15;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:transparent;}
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section { display:block;}
body {	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size:1rem;
	font-weight:400;
	line-height:1.5;
	color:#212529;
	text-align:left;
	background-color:#fff;
	font-family: "hika";}
@font-face {
	font-family: "hika";
	src: url("hika.woff2") format("woff2"),url("hika.woff") format("woff");}
@font-face {
	font-family: "hikaw";
	src: url("hikaw.woff2") format("woff2"),url("hikaw.woff") format("woff");}
.hika { font-family: "hika";}
.hikaw { font-family: "hikaw";}

@font-face { font-family: "HKW4"; src: url("HKW4.woff2") format("woff2"),url("HKW4.woff") format("woff");}
@font-face { font-family: "HKW7"; src: url("HKW7.woff2") format("woff2"),url("HKW7.woff") format("woff");}
@font-face { font-family: "HKW8"; src: url("HKW8.woff2") format("woff2"),url("HKW8.woff") format("woff");}
@font-face { font-family: "Speedy"; src: url("Speedy.woff2") format("woff2"),url("Speedy.woff") format("woff");}

.HKW4 { font-family: "HKW4";}
.HKW7 { font-family: "HKW7";}
.HKW8 { font-family: "HKW8";}
.Speedy { font-family: "Speedy";}


[tabindex="-1"]:focus:not(:focus-visible) { outline:0!important;}
hr {	box-sizing:content-box;
	height:0;
	overflow:visible;}
h1,h2,h3,h4,h5,h6 {
	margin-top:0;
	margin-bottom:.5rem;}
p {	margin-top:0;
	margin-bottom:1rem;}
abbr[data-original-title],abbr[title] {
	text-decoration:underline;
	-webkit-text-decoration:underline dotted;
	text-decoration:underline dotted;
	cursor:help;
	border-bottom:0;
	-webkit-text-decoration-skip-ink:none;
	text-decoration-skip-ink:none;}
address{margin-bottom:1rem;
	font-style:normal;
	line-height:inherit;}
dl,ol,ul {
	margin:0;
	padding: 0;
	list-style: none;}
ol ol,ol ul,ul ol,ul ul { margin:0;}
dt {	font-weight:700;}
dd {	margin-bottom:.5rem;
	margin-left:0;}
blockquote { margin:0 0 1rem;}
b,strong { font-weight:bolder;}
small {	font-size:80%;}
sub,sup{position:relative;
	font-size:75%;
	line-height:0;
	vertical-align:baseline;}
sub {	bottom:-.25em;}
sup {	top:-.5em;}
a {	color:#007bff;
	text-decoration:none;
	background-color:transparent;}
a:hover{color:#0056b3; text-decoration:underline;}
a:not([href]):not([class]) { color:inherit; text-decoration:none;}
a:not([href]):not([class]):hover { color:inherit; text-decoration:none;}
code,kbd,pre,samp {
	font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	font-size:1em;}
pre {	margin-top:0;
	margin-bottom:1rem;
	overflow:auto;
	-ms-overflow-style:scrollbar;}
figure {margin:0 0 1rem;}
img {	vertical-align:middle; border-style:none;}
svg {	overflow:hidden; vertical-align:middle;}
table {	border-collapse:collapse;}
caption{padding-top:.75rem;
	padding-bottom:.75rem;
	color:#6c757d;
	text-align:left;
	caption-side:bottom;}
th {	text-align:inherit; text-align:-webkit-match-parent;}
label {	display:inline-block; margin-bottom:.5rem;}
button {border-radius:0;}
button:focus:not(:focus-visible) { outline:0;}
button,input,optgroup,select,textarea {
	margin:0;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;}
button,input { overflow:visible;}
button,select { text-transform:none;}
[role=button] { cursor:pointer;}
select { word-wrap:normal;}
[type=button],[type=reset],[type=submit],button { -webkit-appearance:button;}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled) { cursor:pointer;}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner { padding:0; border-style:none;}
input[type=checkbox],input[type=radio] { box-sizing:border-box; padding:0;}
textarea {
	overflow:auto;
	resize:vertical;}
fieldset {
	min-width:0;
	padding:0;
	margin:0;
	border:0;}
legend {display:block;
	width:100%;
	max-width:100%;
	padding:0;
	margin-bottom:.5rem;
	font-size:1.5rem;
	line-height:inherit;
	color:inherit;
	white-space:normal;}
progress { vertical-align:baseline;}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button { height:auto;}
[type=search] { outline-offset:-2px; -webkit-appearance:none;}
[type=search]::-webkit-search-decoration {
	-webkit-appearance:none;}
	::-webkit-file-upload-button {
	font:inherit;
	-webkit-appearance:button;}
output { display:inline-block;}
summary{ display:list-item; cursor:pointer;}
template { display:none;}
[hidden] { display:none!important;}
.featherlight-sample { display: none;}
#law td { background: #fff; border: solid 1px #999;}
ol { margin-bottom: 1rem;}
.wrapper { overflow: hidden;}
body::-webkit-scrollbar{
  display:none;
}
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
    z-index: 100;
    opacity: 0.7;
    margin: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;}
#page-top:hover { opacity: 1;}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 7px 0;
    text-align: center;
    display: block;
    border-radius: 5px;}
#page-top a:hover {
    text-decoration: none;}
header {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    background-color: #ffffffad;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;}
header:hover { background-color: #fff;}
footer {
	text-align: center;
	padding: 10px 0 0}
footer ul li {
	font-size: 16px;
	display: inline-block;
	margin: 0 7px 35px;}
footer ul li a { color: #000;}
footer small {
    font-size: 11px;
    background-image: url(../img/bg_o.gif);
    background-repeat: repeat;
    width: 100%;
    margin: 0 auto;
    display: block;
    padding: 14px 0;}
.clearfix:after{
	content: "";
	clear: both;
	display: block;}
.head {
    display: flex;
    justify-content: space-between;
    position: relative;}
.tb {
    position: absolute;
    bottom: 0;
    right: 7px;}
.tb ul { display: flex;}
.tb ul li {}
.tb ul li:nth-child(1) {}
.tb ul li:nth-child(1) img:nth-child(1) { display: inline-block;}
.tb ul li:nth-child(1) img:nth-child(2) { display: none;}
.tb ul li:nth-child(2) { margin: 0 0 0 14px;}
.logo {
    height: 64px;
    width: max-content;
    position: relative;
    left: 7px;}
.logo h1 {
    font-size: 10px;
    margin: 0;}
.logo a {
    width: 141px;
    display: block;}
.logo a img { width: 100%;}
footer .logo {
    height: 48px;
    width: max-content;
    position: relative;
    margin: 0 auto 35px;
    left: initial;}
footer .logo img {
    width: auto;
    height: 100%;}
.menu {
    height: 50px;
    width: 100%;
    margin-bottom: 6px;
    position: relative;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;}
.menu.fixed { height: 30px;}
.menu ul {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 0;}
.menu ul li {
    margin: 0 1%;
    position: relative;
    z-index: 1;}
.menu ul li a {
    display: block;
    color: #222;
    text-decoration: none;
    font-family: "hikaw";
    font-size: 15px;}
.slider_fade > li {
    position: absolute;
    list-style: none;
    visibility: hidden;
    animation: anime_slider_fade 12s 0s infinite;
    height: 100%;
    width: auto;
    right: -10%;}
.slider_fade > li:nth-of-type(2) { animation-delay: 4s;}
.slider_fade > li:nth-of-type(3) { animation-delay: 8s;}
.slider_fade li img {
    width: auto;
    height: 100%;}
@keyframes anime_slider_fade {
    0% {visibility: visible;
        opacity: 0;}
    15% { opacity: 1;}
    33.3% { opacity: 1;}
    48.3% { opacity: 0;}
    100% { opacity: 0;}
}
.mainvisual {
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 0;
    padding-bottom: 48.888%;
    overflow: hidden;
    margin-top: 120px;}
.mainvisual .inner {
    width: 88%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;}

.mainvisual .inner .mv01 {
    max-width: 422px;}
.mainvisual .inner .mv01 h2 {
    line-height: 1.2;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white;}
.mainvisual .inner .mv01 h2 div {}
.mainvisual .inner .mv01 h2 div:nth-child(1) {
    font-family: "HKW8";
    font-size: min(3vw,28.8px);}
.mainvisual .inner .mv01 h2 div:nth-child(2) {
    font-family: "HKW8";
    font-size: min(4vw,44px);}
.mainvisual .inner .mv01 h2 div:nth-child(2) small {}
.mainvisual .inner .mv01 h2 div:nth-child(3) {
    font-family: "Speedy";
    font-size: min(3.5vw,36px);
    color: #f99107;
    margin: 1vw auto 0;}
.mainvisual .inner .mv01 h2 div:nth-child(4) {
    font-family: "Speedy";
    font-size: min(3.8vw,40px);}
.mainvisual .inner .mv01 h2 div:nth-child(4) span { color: #9c1e23;}

.mainvisual .inner .mv01_ {
    position: relative;}
.mainvisual .inner .mv01_ img { width: 100%;}
.mainvisual .inner .mv01_ div {
    color: #f99107;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white;
    position: absolute;
    top: 37%;
    right: 6%;
    font-size: 2vw;
    font-size: 30px;
    font-family: 'HKW7';
    animation: blink-fast .75s linear infinite;}
@keyframes blink-fast {
  0% { opacity: 0;}
  20% { opacity: 1;}
  100% { opacity: 1;}
}
@media screen and (max-width:960px) {
.mainvisual .inner .mv01_ div {
    font-size: 3vw;}
}
.mainvisual .inner .mv01_ div span {
    box-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white;
    position: relative;
    display: block;
    width: 0.38vw;
    height: 1.8vw;
    background-color: #f99107;
    border-radius: 5px;
    margin: 0 auto;}

.mainvisual .inner .mv01_ div span:before,
.mainvisual .inner .mv01_ div span:after {
    content: "";
    box-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white;
    position: absolute;
    display: block;
    width: 0.35vw;
    height: 1.8vw;
    background-color: #f99107;
    border-radius: 5px;
    margin: 0 auto;}
.mainvisual .inner .mv01_ div span:before {
    left: -3vw;
    transform: rotate(-45deg);
    top: 0.4vw;}
.mainvisual .inner .mv01_ div span:after {
    left: 3vw;
    transform: rotate(45deg);
    top: 0.4vw;}

.mainvisual .inner .mv02 {
    max-width: 500px;}
.mainvisual .inner .mv02 h3 {
    width: 70%;
    text-align: center;
    margin: 0 auto;
    color: #00b3ff;
    background-color: #e7f8ff;
    font-size: min(5vw,28.8px);
    border-radius: 5px;}
.mainvisual .inner .mv02 h3 small {}
.mainvisual .inner .mv02 ul {
    margin: 2vw auto 0;}
.mainvisual .inner .mv02 ul li {
    background-color: #ffffffc7;
    border-radius: 5px;
    margin: 7px auto;
    padding: 1vw 3vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;}
.mainvisual .inner .mv02 ul li div {
    width: 7.414vw;}
.mainvisual .inner .mv02 ul li img { width: 100%;}
.mainvisual .inner .mv02 ul li span {
    font-size: min(3.0vw,34px);
    font-family: 'HKW7';
    color: #18234d;
    text-align: left;
    line-height: 1.2;
    width: 25vw;
    margin-left: 1.5vw;}
.mainvisual .inner .mv02 ul li span small{
    display: block;
    font-size: 60%;}

.mainvisual .inner .mv02 ul li:nth-child(1) img {}
.mainvisual .inner .mv02 ul li:nth-child(1) span {}
.mainvisual .inner .mv02 ul li:nth-child(1) span small{}
.mainvisual .inner .mv02 ul li:nth-child(2) div {}
.mainvisual .inner .mv02 ul li:nth-child(2) img { width: 72%;}
.mainvisual .inner .mv02 ul li:nth-child(2) span {}
.mainvisual .inner .mv02 ul li:nth-child(2) span small{}
.mainvisual .inner .mv02 ul li:nth-child(3) img {}
.mainvisual .inner .mv02 ul li:nth-child(3) span {}
.mainvisual .inner .mv02 ul li:nth-child(3) span small{}
.mainvisual .inner .mv02 p {
    width: 78.2%;
    margin: 0 auto;}
.mainvisual .inner .mv02 p a {
    display: block;}
.mainvisual .inner .mv02 p a img { width: 100%;}

.cmp {}
.cmp p {
    color: #00a5ff;
    text-align: center;
    margin: 5vw;
    font-size: min(4vw,40px);
    text-shadow: 0 2px 5px BLACK;
    font-family: 'HKW7';}
.cmp p .kon {
    color: #18234d;}
.cmp p .bni {
    color: #9c1e23;}
.cmp p .ore {
    color: #f9a10f;
    font-size: min(5vw,50px);}

.cmp p:last-child {
    color: #000;
    text-shadow: initial;
    font-size: 20px;
    font-family: 'HKW4';
    width: 90%;
    margin: 0 auto;}

.online {
    background-color: #fff;
    padding: 7vw 0 0;
    text-align: center;}
.online h2 {
    font-size: min(6vw,30px);}
.online h2 small {
    font-size: 70%;
    display: block;}
.online p {
    margin: 1rem auto 1.5rem;}
.online p br {}
.online div {
    margin: 7vw auto 0;
    width: 90%;
    max-width: 780px;}
.online div img { width: 100%;}

.online a {
    width: 80%;
    max-width: 514px;
    margin: 5vw auto 0;
    display: block;}
.online a img { width: 100%;}





.feature {
    background-image: url(../img/bg_g.gif);
    background-repeat: repeat;
    width: 100%;
    margin: 4% auto;
    overflow: hidden;
    padding: 2% 0;}
.feature .page0 {
    background-color: #fff;
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3vw;}
.feature .page0_ { text-align: center;}
.feature .page0_ h2 {}
.feature .page0_ p{}

.feature ul {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-evenly;
    margin: 30px auto 0;
    align-items: self-start;
    position: relative;
}
.feature ul li {
    background-image: url(../img/bg_s.gif);
    border: solid 5px #fff;
    border-radius: 5px;
    width: calc((96% / 4) - 1%);
    padding: 1% 0 25%;
    margin: 0 1%;
    text-align: center;
    font-family: "hikaw";
    height: 0;
    position: relative;}
.feature ul li .title {
    font-size: 30px;
    line-height: 1.2;
    height: 80px;
    margin: 0;
    position: relative;}
.feature ul li .title span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    display: block;
    width: 100%;
    text-align: center;}
.feature ul li .explanation {
    font-size: 24px;
    line-height: 1.2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;}
.h2 {
    width: 90%;
    margin: 100px auto 40px;
    text-align: center;
    font-size: 30px;}
.h2p {
    width: 90%;
    margin: 0 auto 30px;}
.h2p p {
    text-align: center;
    font-size: 20px;}
.business_ {
    background-image: url(../img/bg_o.gif);
    background-repeat: repeat;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0;}
.business_ .row{
    display: -ms-grid;
    -ms-grid-columns: min-content;}
.business_ .autoplay-slider {
    display: flex;
    min-width: 100%;
    width: min-content;
    animation: 60s linear infinite sliderAnimation;}
.business_ .slide {
    width: 300px;
    background: #ffffff;
    margin: 4px;
    position: relative;
    padding: 10px;}
@keyframes sliderAnimation { 100% { transform: translateX(-50%);}}

.business_ .slide h3 {
    font-size: 16px;
    text-align: center;
    margin-top: 7px;}
.business_ .slide p {
    font-size: 16px;
    text-align: left;
    margin: 0;}
.business_ .slide span {
    display: block;
    font-size: 15px;
    font-family: "hikaw";
    text-align: center;
    margin-bottom: 7px;}
.btn_more {
    width: 22.523%;
    min-width: 250px;
    max-width: 300px;
    margin: 3% auto 0;}
.btn_more img { width: 100%;}
.trouble_ {
    background-image: url(../img/bg_b.gif);
    background-repeat: repeat;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0;}
.trouble_ ul {
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;}
.trouble_ ul li {
    border: solid 2px #fff;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 2%;
    text-align: center;
    position: relative;
    opacity: 0;}
.trouble_ ul li span {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    text-align: center;
    display: block;
    font-size: 16px;
    font-family: "hikaw";
    color: #ffea00;}
.other h2 { margin: 50px auto;}
.other_ {
    background-image: url(../img/bg_b.gif);
    background-repeat: repeat;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0;}
.other_ li {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 16px;
    font-family: "hikaw";
    color: #ffea00;
    line-height: 30px;
    opacity: 0;}

.trouble_ ul.box li.box1,.other_ ul.box li.box1 { opacity: 0; animation: late-open 0.1s ease-in .35s forwards;}
.other_ ul.box li.box2,.trouble_ ul.box li.box2 { opacity: 0; animation: late-open 0.1s ease-in .7s forwards;}
.other_ ul.box li.box3,.trouble_ ul.box li.box3 { opacity: 0; animation: late-open 0.1s ease-in 1.05s forwards;}
.other_ ul.box li.box4,.trouble_ ul.box li.box4 { opacity: 0; animation: late-open 0.1s ease-in 1.4s forwards;}
.other_ ul.box li.box5,.trouble_ ul.box li.box5 { opacity: 0; animation: late-open 0.1s ease-in 1.75s forwards;}
.other_ ul.box li.box6,.trouble_ ul.box li.box6 { opacity: 0; animation: late-open 0.1s ease-in 2.1s forwards;}
.other_ ul.box li.box7,.trouble_ ul.box li.box7 { opacity: 0; animation: late-open 0.1s ease-in 2.45s forwards;}
.other_ ul.box li.box8,.trouble_ ul.box li.box8 { opacity: 0; animation: late-open 0.1s ease-in 2.8s forwards;}
.other_ ul.box li.box9,.trouble_ ul.box li.box9 { opacity: 0; animation: late-open 0.1s ease-in 3.15s forwards;}
.other_ li.box10,.trouble_ ul.box li.box10 { opacity: 0; animation: late-open 0.1s ease-in 3.4s forwards;}

@keyframes late-open {
    0% { opacity: 0;}
    100% {  opacity: 1;}}
.app {
    margin: 50px auto 100px;
    width: 90%;
    max-width: 960px;}
.appTxt {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: "hikaw";}
.appTxt_ {
    margin: 0 auto;
    width: 90%;
    max-width: 960px;
    text-align: center;
    font-size: 30px;
    font-family: "hikaw";}
.Marker {
    background: -webkit-linear-gradient(left, rgb(255,196,139) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255,196,139) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255,196,139) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;}
.Marker.is-active{ background-position: 0% .5em;}
.appBtn {
    margin: 30px auto 0;
    width: 90%;
    min-width: 250px;
    max-width: 514px;}
.appBtn a { display: block;}
.appBtn img { width: 100%;}
.what {
    padding: 80px 0 0;
    background-color: #f0efff;}
.what ul {
    display: flex;
    width: 90%;
    max-width: 860px;
    margin: 0 auto;
    justify-content: space-between;
    z-index: 3;
    position: relative;}
.what ul li {
    width: 28.605%;
    margin: 0 auto;
    max-width: 246px;}
.what ul li img { width: 100%;}
.what h2.h2 { margin: 0 auto 40px;}
.what_ {
    width: 100%;
    height: 200px;
    position: relative;
    margin: 30% 0 0;
    z-index: 2;
    padding: 0 0 30%;}
.what_:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #202656;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: skewY(-14deg) translateY(-50%) translateX(-50%);
    -webkit- transform: skewY(-14deg) translateY(-50%) translateX(-50%);
    transform-origin: bottom left;}
.what_:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #202656;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: skewY(14deg) translateY(-50%) translateX(-50%);
    -webkit- transform: skewY(14deg) translateY(-50%) translateX(-50%);
    transform-origin: bottom left;}
.what_ div {
    position: absolute;
    width: 36.953%;
    right: 50%;
    left: 50%;
    max-width: 388px;
    z-index: -2;
    transform: translateY(-84%) translateX(-50%);
    -webkit- transform: translateY(-84%) translateX(-50%);}
.what_ div img { width: 100%;}
.merit {
    position: relative;
    margin: -28% auto 0;
    z-index: 2;
    width: 100%;
    background-color: #202656;}
.merit_ {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between;}
.merit_ p {
    font-size: min(9vw,84px);
    font-family: "hikaw";
    color: #fb7c00;
    line-height: 1.2;
    text-align: left;}
.merit_ p span {
    font-size: 34px;
    display: block;}
.merit .h2 {
    color: #fff;
    margin: 30px auto 0;
    padding: 0 0 30px;}
.merit .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: self-start;
    max-width: 960px;
    margin: auto;
    padding: 0 0 5%;}
.features .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: self-start;
    max-width: 960px;
    margin: 100px auto 0;
    padding: 0;}
.merit .inner li {
    width: calc(100% / 3);
    margin: 0 auto 7%;
    text-align: center;}
.features .inner li {
    width: calc(90% / 3);
    margin: 0 auto 14%;
    text-align: center;
    padding: 50px 7px 30px;}
.merit .inner h3 {
    color: #fff;
    text-align: center;
    font-size: 24px;}
.tip {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 14px 21px;
    border: solid 2px #fff;
    border-radius: 10px;
    width: 90%;}
.features .tip { border: solid 2px #202656;}
.tip p{
    margin: 0 0 7px;
    padding: 0;
    color: #fff;
    text-align: center;
    font-family: "hikaw";
    font-size: 18px;}
.tip .detail {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 105px;}
.tip .detail img { width: 100%;}
.tip .detail img:nth-child(2) {display: none;}
.tip .dct {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 18px;
    line-height: 1.6em;
    text-align: left;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: calc(100% + 60px);
    z-index: 10;
    font-family: "hikaw";
    box-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff,}
.tip .dct:before {
    content: "";
    position: absolute;
    bottom: -24px;
    right: calc(50% + -15px);
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
    transform: rotateZ(0deg);}
.tip:hover .dct{
    display: block;
    bottom: calc(100% + 60px);
    left: -30px;}
.features .tip .img {
    width: auto;
    height: 110px;
    position: absolute;
    top: -70px;
    left: 0;
    right: 0;
    margin: 0 auto 0;}
.features .tip .img img {
    width: auto;
    height: 100%;}
.features .tip .text {
    text-align: center;
    font-family: "hikaw";
    font-size: 26px;}
.map {
    background-image: url(../img/map.jpg);
    padding: 100px 0 50%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    position: relative;}
.map .h2 { margin: 0 auto 40px;}
.map .text {
    width: 90%;
    max-width: 410px;
    position: absolute;
    top: 40%;
    left: 20%;}
.map .text p {
    font-family: "hikaw";
    font-size: 20px;
    color: #4a412c;}
.flow {
    background-image: url(../img/bg_o.gif);
    background-repeat: repeat;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 100px 0 50px;}
.flow .h2 { margin: 0 auto 40px;}
.flow .h2 br { display: none;}
.flow_ .flow_li {
    display: flex;
    margin: 0 auto 28px;
    width: 90%;
    max-width: 800px;}
.flow_ .flow_li .title {
    text-align: center;
    width: 80px;
    height: auto;
    position: relative;}
.flow_ .flow_li .title:after {
    content: "";
    height: calc(100% - 80px);
    display: block;
    width: 1px;
    border-left: dotted 2px #fff;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;}
.flow_ .flow_li .title .step {
    font-size: 13px;
    color: #fff;
    line-height: 1;
    margin: 0 auto 3.5px;}
.flow_ .flow_li .title .img { margin: 0;}
.flow_ .flow_li .inner {
    width: calc(100% - 100px);
    margin-left: 20px;}
.flow_ .flow_li .inner h3 {
    font-family: "hikaw";
    font-size: 24px;
    line-height: 1;
    color: #fff;}
.flow_ .flow_li .inner div {
    font-family: "hika";
    background-color: #fff;
    border-radius: 7px;
    padding: 14px;
    font-size: 15px;}
.flow_ .flow_li .inner div p { margin: 0;}
.flow_ .flow_li:last-child .title:after { display: none;}
.flow_ .flow_li:last-child .inner div p:first-child { margin: 0 0 1rem;}
.flow_ .flow_li .inner ul {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    align-items: self-start;
    margin: 14px auto;}
.flow_ .flow_li .inner ul li { width: 50%;}
.flow_ .flow_li .inner ul li h4 {
    font-family: "hikaw";
    font-size: 17px;
    color: #ff7e00;}
.example_ .btn {
    height: 56px;
    text-align: center;
    margin: 50px auto 0;}
.more_1 .btn.on {
    height: 0;
    margin: 0 auto;}
.more_2 .btn,
.more_3 .btn {
    opacity: 0;
    height: 0;
    margin: 0 auto;}
.more_2 .btn.on,
.more_3 .btn.on {
    opacity: 1;
    height:56px;}
.more_1 .btn img,
.more_2 .btn img,
.more_3 .btn img {
    cursor: pointer;
    margin: 0 auto;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;}
.more_1 .btn img.on,
.more_2 .btn img.on,
.more_3 .btn img.on { opacity: 0;}
.more_1 ul,
.more_2 ul,
.more_3 ul {
    height: 0;
    opacity: 0;
    margin: 0 auto;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;}
.more_1 ul.on,
.more_2 ul.on,
.more_3 ul.on {
    opacity: 1;
    height: auto;}
.example_ ul {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    text-align: center;}
.example_ ul li {
    width: calc(92% / 2);
    padding: 2%;
    margin: 7px 2%;
    background-color: #f6f9ff;}
.example_ ul li .img {
    width: 100%;
    margin: 0 auto;
    max-width: 426px;}
.example_ ul li .img img { width: 100%;}
.example_ ul li h3 {
    font-family: "hikaw";
    font-size: 17px;
    width: 100%;
    margin: 14px auto;}
.example_ ul li p {
    font-size: 18px;
    width: 100%;
    margin: 0 auto;
    text-align: left;}
.accordion {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;}
.accordion__item {
    border: 3px solid #ffc48b;
    margin-top: 10px;
    cursor: pointer;}
.accordion__title {
    position: relative;
    padding: 15px 60px 15px 65px;
    font-weight: bold;
    cursor: pointer;
    background-color: #ffc48b;}
.accordion__title span {
    width: 35px;
    display: inline-block;
    height: 35px;
    margin: 0;
    background-color: #ff7e00;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%) translateX(0%);
    -webkit- transform: translateY(-50%) translateX(0%);}
.accordion__title::before,
.accordion__title::after {
    content: "-";
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 15px;
    height: 15px;
    line-height: 1;
    transition: all 0.3s;
    background-color: #ff7e00;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    font-family: "hikaw";
    color: #fff;}
.accordion__title::after { content: "+";}
.accordion__content {
    padding: 20px 20px 15px 20px;
    display: none;
    cursor: pointer;}
.accordion__content.is-open { display: block;}
.accordion__item.is-active .accordion__title::before { transform: rotate(180deg);}
.accordion__item.is-active .accordion__title::after {
    transform: rotate(180deg);
    opacity: 0;}






@media screen and (max-width:1240px) {
	.map {
	    padding: 100px 0 60%;
	    background-position: top right -100px;}
}

@media screen and (min-width:1200px) {
	.what_ { margin: 370px 0 0;}
}
@media screen and (max-width:1200px) {
	.feature ul {
	    width: 900px;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-evenly;
	    align-items: self-start;
	    position: relative;}
	.feature ul li {
	    background-image: url(../img/bg_s.gif);
	    border: solid 5px #fff;
	    border-radius: 5px;
	    width: calc((96% / 4) - 1%);
	    padding: 0 0 27%;
	    margin: 0 1%;
	    text-align: center;
	    font-family: "hikaw";
	    height: 0;}
	.feature ul li .title {
	    font-size: 20px;
	    height: 70px;}
	.feature ul li .explanation {
	    font-size: 20px;}
	.feature ul li div {
	    width: auto;
	    height: 100px;}
	.feature ul li div img {
	    width: auto;
	    height: 100%;}
	.feature ul li .explanation { font-size: 15px;}
	.what_ { margin: 35% 0 0;}
}
@media screen and (max-width:1000px) {
	.mainvisual { padding-bottom: 60%;}
	.slider_fade > li { right: -20%;}
	.map {
	    padding: 100px 0 80%;
	    background-position: top right -200px;}
}
@media screen and (max-width:960px) {
	.mainvisual { padding-bottom: 80%;}
	.feature ul {
	    width: 90%;
	    max-width: 600px;}
	.feature ul li {
	    width: calc((96% / 2) - 1%);
	    padding: 0 0 40%;
	    margin: 0 1% 3%;}
	.menu ul li a { font-size: 11px;}
}
@media screen and (max-width:800px) {
	.map {
	    padding: 100px 0 100%;
	    background-position: top right -200px;}
}
@media screen and (max-width:640px) {
	.tb ul li:nth-child(1) img:nth-child(2) { display: inline-block;}
	.tb ul li:nth-child(1) img:nth-child(1) { display: none;}
	.tb {
	    position: absolute;
	    top: 50%;
	    bottom: initial;
	    right: 55px;
	    transform: translateY(-50%) translateX(0%);
	    -webkit- transform: translateY(-50%) translateX(0%);}
	.menu {
	    position: fixed;
	    top: 5px;
	    margin: 0;
	    width: 40px;
	    height: 40px;
	    right: 7px;
	    border: solid 1px #ccc;
	    border-radius: 3px;
	    background-color: #fff;}
	.menu:before,
	.menu:after { content:"";}
	.menu:before {
	    position: absolute;
	    top: 8px;
	    height: 12px;
	    border-top: solid 2px #666;
	    border-bottom: solid 2px #666;
	    z-index: 1;
	    display: block;
	    width: 80%;
	    margin: 0 auto;
	    left: 0;
	    right: 0;}
	.menu:after {
	    position: absolute;
	    top: 28px;
	    height: 1px;
	    border-top: solid 2px #666;
	    z-index: 1;
	    display: block;
	    width: 80%;
	    margin: 0 auto;
	    left: 0;
	    right: 0;}
	.menu ul {
	    display: block;
	    justify-content: center;
	    position: fixed;
	    width: 100%;
	    bottom: 0;
	    top: 0;
	    height: 100%;
	    left: -100%;
	    background-color: #5a9fe8;
	    -webkit-transition: 0.5s;
	    -moz-transition: 0.5s;
	    -o-transition: 0.5s;
	    transition: 0.5s;}
	.menu ul.on { left: 0%;}
	.menu ul li {
	    margin: 0 1%;
	    position: relative;
	    z-index: 1;
	    height: 50px;
	    line-height: 50px;
	    border-bottom: dotted 1px;}
	.mainvisual {
	    width: 100%;
	    position: relative;
	    background-color: #fff;
	    height: 0;
	    padding-bottom: 100%;
	    overflow: hidden;
	    margin-top: 50px;}
	.slider_fade > li { right: -40%;}
	.feature ul li {
	    width: calc((96% / 2) - 1%);
	    padding: 0;
	    margin: 0 1% 3%;
	    height: auto;}
	.feature ul li .title {
	    font-size: 4.5vw;
	    height: 70px;}
	.feature ul li .explanation {
	    font-size: 3.5vw;
	    position: relative;
	    margin-top: 14px;}
	.feature ul li div {
	    width: auto;
	    height: 70px;
	    margin: 0 auto;}
	.logo { height: 45px;}
	.logo a { width: 80px;}
	.tb ul li:nth-child(1) { width: 36px;}
	.tb ul li:nth-child(1) img { width: 100%;}
	.tb ul li:nth-child(2) {
	    margin: 0 0 0 7px;
	    width: 130px;}
	.tb ul li:nth-child(2) img { width: 100%;}
	.flow .h2 br { display: block;}
	.trouble_ ul li {
	    width: 170px;
	    height: 170px;}
	.trouble_ ul li span { font-size: 14px;}
	.h2 {
	    margin: 50px auto 20px;
	    font-size: 20px;}
	.h2p { margin: 0 auto 15px;}
	.h2p p { font-size: 16px;}
	.appTxt_ { font-size: 20px;}
	.appTxt { font-size: 20px;}
	.merit_ {
	    display: block;
	    text-align: center;}
	.merit_ p {
	    font-size: 11vw;
	    text-align: center;
	    margin: 5% auto 14%;}
	.merit_ p span { font-size: 60%;}
	.merit .inner li { width: calc(100% / 1);}
	.tip:hover .dct,
	.tip .dct:before { display: none;}
	.tip1.on .dct,
	.tip2.on .dct,
	.tip3.on .dct,
	.tip4.on .dct,
	.tip5.on .dct,
	.tip6.on .dct,
	.tip11.on .dct,
	.tip12.on .dct,
	.tip13.on .dct,
	.tip14.on .dct,
	.tip15.on .dct,
	.tip16.on .dct {
	    display: block;
	    position: relative;
	    background-color: initial;
	    width: 100%;
	    font-size: 15px;
	    left: initial;
	    top: initial;}
	.tip.on .detail img:nth-child(1) {display: none;}
	.tip.on .detail img:nth-child(2) {display: block;}
	.features .tip .text { font-size: 20px;}
	.features .tip .img {
	    height: 80px;
	    top: -40px;}
	.features .inner li {
	    width: calc(90% / 1);
	    margin: 0 auto 25%;
	    padding: 50px 7px 20px;}
	.features .inner .dct { color: #202656;}
	.map {
	    padding: 50px 0 100%;
	    background-position: center right -200px;}
	.map .text {
	    top: 35%;
	    left: 0;
	    right: 0;
	    margin: 0 auto;}
	.map .text p {
	    font-family: "hikaw";
	    font-size: 15px;
	    color: #4a412c;}
	.flow { padding: 50px 0;}
	.flow_ .flow_li .title { width: 40px;}
	.flow_ .flow_li .title .img img { width: 100%;}
	.flow_ .flow_li .inner {
	    width: calc(100% - 50px);
	    margin-left: 10px;}
	.flow_ .flow_li .inner div {
	    padding: 10px;
	    line-height: 1.6;}
	.example_ ul { display: block;}
	.example_ ul li {
	    width: 96%;
	    padding: 0%;
	    margin: 7px 2% 10%;}
	.example_ ul li h3 { font-size: 14px;}
	.example_ ul li p { font-size: 14px;}
	.example_ .btn { width: 50%;}
	.example_ .btn img { width: 100%;}
	.accordion__title span {
	    width: 25px;
	    height: 25px;
	    line-height: 25px;
	    left: 10px;}
	.accordion__title {
	    padding: 15px 30px 15px 45px;
	    font-size: 15px;}
	.accordion__title::before, .accordion__title::after { right: 10px;}
	.accordion__content.is-open {
	    font-size: 15px;
	    line-height: 1.6;
	    padding: 14px 14px 7px;}
	.logo h1 {
	    zoom: 60%;
	    margin: 0 0 7px;}
	header { background-color: initial;}
	#page-top {
	    bottom: 10px;
	    right: 10px;}
	.online p {
	    margin: 1rem auto 1.5rem;
	    width: 90%;
	    text-align: left;}
	.online p br { display: none;}
	.mainvisual .inner .mv02 { margin: 5vw auto 0;}
}
@media screen and (max-width:500px) {
	.map { padding: 50px 0 120%;}
}
@media screen and (max-width:420px) {
	.menu {
	    width: 40px;
	    height: 45px;}
	.menu:before {
	    top: 10px;
	    height: 12px;}
	.menu:after { top: 30px;}
	.trouble_ ul li {
	    width: 140px;
	    height: 140px;
	    margin: 1%;}
	.what_ {
	    width: 100%;
	    height: 150px;
	    position: relative;
	    margin: 35% 0 0;
	    z-index: 2;
	    padding: 0 0 0%;}
	.what ul {
	    position: relative;
	    height: 0;
	    padding-bottom: 200px;
	    display: block;}
	.what ul li {
	    width: 45%;
	    position: absolute;
	    transform: translateY(-50%) translateX(-50%);
	    -webkit- transform: translateY(-50%) translateX(-50%);}
	.what ul li:nth-child(1) {
	    top: 60%;
	    left: -7%;}
	.what ul li:nth-child(2) {
	    top: 15%;
	    left: 28%;}
	.what ul li:nth-child(3) {
	    top: 60%;
	    right: -14%;}
	.mainvisual { padding-bottom: 150%;}
	.slider_fade > li { right: -70%;}
	.mainvisual .inner { top: 55%;}
	.feature ul li div { height: 50px;}
	.business_ { padding: 30px 0;}
	.business_ .slide h3,
	.business_ .slide p,
	.business_ .slide span { font-size: 14px;}
	.btn_more { margin: 7% auto 0;}
	.btn_more img { width: 100%;}
	.map { padding: 50px 0 150%;}
	.map .text {
	    width: 100%;
	    max-width: 420px;
	    padding: 14px 5%;
	    background-color: #ffffff9c;}


	.mainvisual .inner {
	    width: 100%;
	    top: 50%;
	    display: block;}
	.mainvisual .inner .mv01 h2 div:nth-child(1) { font-size: 5vw;}
	.mainvisual .inner .mv01 h2 div:nth-child(2) { font-size: 7vw;}
	.mainvisual .inner .mv01 h2 div:nth-child(3) { font-size: 6.5vw;}
	.mainvisual .inner .mv01 h2 div:nth-child(4) { font-size: 6.8vw;}
	.mainvisual .inner .mv01_ {
	    width: 50%;
	    margin: 0 auto;}
	.mainvisual .inner .mv02 ul {
	    margin: 2vw auto 0;
	    display: flex;
	    justify-content: space-between;}
	.mainvisual .inner .mv02 ul li {
	    background-color: #ffffffc7;
	    border-radius: 5px;
	    margin: 7px 2vw;
	    padding: 1vw 3vw;
	    display: block;
	    justify-content: space-evenly;
	    align-items: center;}
	.mainvisual .inner .mv02 ul li div {
	    width: 15vw;
	    margin: 0 auto;}
	.mainvisual .inner .mv02 ul li {
	    margin: 7px 1vw;
	    padding: 3vw 1vw;
	    width: calc(100% / 3);}
	.mainvisual .inner .mv02 ul li span small {
	    display: block;
	    font-size: 60%;}
	.mainvisual .inner .mv02 ul li span {
	    font-size: 3.0vw;
	    text-align: center;
	    margin: 2vw auto 0;
	    display: block;}
	.mainvisual .inner .mv02 ul li:nth-child(2) img { width: 70%;}
	.mainvisual .inner .mv02 ul li:nth-child(3) img { width: 90%;}
	.cmp p { font-size: min(7vw,40px);}
	.cmp p .ore { font-size: min(11vw,50px);}
	.cmp p:last-child { font-size: 18px;}
	.feature .page0_ h2 { font-size: 20px;}
	.feature ul { width: 100%;}
}
@media screen and (max-width:360px) {
	.menu {
	    width: 35px;
	    height: 40px;}
	.tb { right: 50px;}
	.logo h1 {
	    zoom: 50%;
	    margin: 7px 0 7px;}
	.map { padding: 50px 0 180%;}
}
@media screen and (max-width:335px) {
	header { zoom: 85%;}
	.map { zoom: 90%;}
}

form h4 {
    text-align: center;
    font-size: 16px;}
.app00 {
    text-align: center;
    color: #f00;
    font-size: 14px;}
form p {
    font-size: 15px;
    width: 90%;
    margin: 7px auto;
    text-align: center;
    display: flex;}
form p span {
    text-align: left;
    width: 45%;
    display: inline-block;}
form p span span {
    display: inline-block;
    width: auto;
    color: #f00;
    margin-right: 7px;}
form p span:nth-child(2) {
    width: 65%;
    padding: 7px;}
form input[type="text"] {
    width: 65%;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 7px;}
form input[type="radio"] { margin: 0 7px 0 0;}
form p.app10 {
    background: url(../img/app2.png) no-repeat;
    margin: 28px auto 0;
    height: 0;
    background-size: contain;
    width: 80.192%;
    padding-bottom: 18%;
    cursor: pointer;}
form p.app10 input {
    width: 100%;
    background: none;
    border: solid 1px #ccc;
    display: block;
    height: 0;
    padding-bottom: 70px;
    line-height: 70px;}
form p.app10 input:hover { background-color: #f98c04;}

.other-reset dl p,
.other-reset dl dt,
.other-reset dl dd {
    display: unset;
    font-size: unset;
    font-weight: unset;
    line-height: unset;
    width: unset;}
.other-reset dl p {
    margin-bottom: 30px;
    display: block;
    text-align: left;}
.other-reset dl p,
.other-reset dl dt,
.other-reset dl dd,
.other-reset dt,
.other-reset dd { display: block;}
.other-reset dl.InFo dt { font-weight: bold;}
.other-reset dl.InFo dd { margin-bottom: 30px;}
.other-reset dl.InFo dd ul {
	margin: 10px 0 0;
	padding-left:20px;}

.thanks {}
.thanks header { padding: 0 0 7px;}
.thanks footer { padding: 35px 0 0;}
.thanks_ {
    background-image: url(../img/mainvisual01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right -300px;
    width: 100%;
    height: 0;
    padding-bottom: 100vh;
    position: relative;}
.thanks__ {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 94%;
    max-width: 600px;
    background-color: #ffffff85;
    padding: 3%;
    text-align: center;}
.thanks_ p { margin-bottom: 3rem;}

@media screen and (max-width:640px) {.thanks .tb { right: 15px;}
form p {
    display: block;
}
form p span {
    width: 100%;
    display: block;
}
form input[type="text"] {
    width: 90%;}
form p span:nth-child(2) {
    width: 100%;
    padding: 7px;
    text-align: center;}
}





.display {
    padding: 7px;
    width: 100%;
    display: flex;
    align-items: center;
    background: #052370;
    position: relative;
    top: -10px;
    cursor: pointer;
    border-radius: 50px;}
.display.on { border-radius: 0;}
.display .img {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;}
.display .img img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);}
.display .def {}
.display .def h2 {
    font-size: 15px;
    color: #fff;
    margin: 0 0 0 5%;
    width: 100%;
    min-width: 170px;}
.display .def h2 span {
    font-size: 16px;
    display: block;}
.display .arw {
    background-color: #fff;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);}
.display .arw:before {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    border-top: solid 3px;
    border-right: solid 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    margin: auto;
    transition: .4s;
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -webkit- transform: translateY(-50%) translateX(-50%) rotate(-45deg);}
.display.on .arw:before {
    transform: translateY(-50%) translateX(-50%) rotate(135deg);
    -webkit- transform: translateY(-50%) translateX(-50%) rotate(135deg);}
.loaders {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap; }
.loader {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 50px;
    align-items: center;
    justify-content: center; }
@-webkit-keyframes scale {
    0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
    45% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; }
    80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes scale {
    0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
    45% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; }
    80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div {
    background-color: #335C80;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    display: inline-block; }
.form {
    width: calc(100% - 14px);
    max-width: calc(450px - 14px);
    margin: 0 auto;
    background-color: initial;
    position: fixed;
    top: calc(100vh - 72px);
    right: 7px;
    overflow: hidden;
    padding: 10px 0 0;
    z-index: 100;}
.form.on {
    background-color: #d6e0f0;
    top: initial;
    bottom: 0;
    height: 99vh;
    padding: 7px 0 0;}
.form .inner {
    overflow-y: scroll;
    height: 88vh;}
.waku {
    margin: 21px 0 7px 20px;
    background-color: #ffffff;
    border-radius: 0 9px 9px 9px;
    color: #1A5F80;
    display: inline-block;
    box-sizing: border-box;
    min-height: 23px;
    width: 90%;
    max-width: 90%;
    padding: 7px 13px;
    font-size: 16px;
    line-height: 1.3em;
    position: relative;}
.waku p {
    min-height: 30px;
    padding: 10px 0;
    font-size: 17px;
    margin: 0;
    letter-spacing: 0.026rem;
    font-size: 13.25px;
    text-align: left;
    position: relative;
    width: 100%;}
.required {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    color: #f00;
    width: auto;}
.next {
    text-align: center;
    width: 20%;
    min-width: 80px;
    margin: 7px 15px 7px auto;
    margin-right: 15px;
    background: #335C80;
    color: white;
    display: block;
    border: none;
    box-sizing: border-box;
    border-radius: 7px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;}
.s03 ul {
    display: flex;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #b6b6b6;}
.s03 ul li {
    position: relative;
    flex: 1;}
.s03 ul li input {
    width: 100%;
    height: 35px;
    opacity: 0;
    cursor: pointer;}
.s03 ul li label {
    position: absolute;
    top: 0; left: 0;
    color: #b6b6b6;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-right: 1px solid #b6b6b6;}
.s03 ul li:last-child label { border-right: 0;}
.s03 ul li input:checked + label {
    background: #052370;
    font-weight: 500;
    color: #fff;}
.s05 ul {
    display: flex;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #b6b6b6;
    flex-wrap: wrap;}
.s05 ul li {
    position: relative;
    width: 50%;}
.s05 ul li input {
    width: 100%;
    height: 35px;
    opacity: 0;
    cursor: pointer;}
.s05 ul li label {
    position: absolute;
    top: 0; left: 0;
    color: #b6b6b6;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-right: 1px solid #b6b6b6;
    border-bottom: 1px solid #b6b6b6;}
.s05 ul li:nth-child(2) label { border-right: 0;}
.s05 ul li:nth-child(3) label { border-bottom: none;}
.s05 ul li:last-child label {
    border-right: none;
    border-bottom: none;}
.s05 ul li input:checked + label {
    background: #052370;
    font-weight: 500;
    color: #fff;}
.waku.s01,
.waku.s02,
.waku.s04,
.waku.s06,
.waku.s08,
.waku.s10,
.waku.s12 {
    width: 75%;
    max-width: 75%;
    margin: 21px 0 7px 20%;}
.s01:before,
.s02:before,
.s04:before,
.s06:before,
.s08:before,
.s10:before,
.s12:before {
    content: "";
    width: 15%;
    height: 0;
    padding-bottom: 15%;
    background-image: url(../img/ppl.png);
    background-size: contain;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -21%;}
.none { display: none;}
.s01.load p { display: none;}
.s01.load p.atv { display: block;}
.s01.load .loaders.del { display: none;}
.s02 { display: none;}
.s02.atv { display: block;}
.s02 .loaders.del { display: none;}
.s02 p { display: none;}
.s02 p.atv { display: block;}
.s03 { display: none;}
.s03.atv { display: block;}

.s04.load p { display: none;}
.s04.load p.atv { display: block;}
.s04.load .loaders.del { display: none;}
.s05 { display: none;}
.s05.atv { display: block;}
.s06 { display: none;}
.s06.atv { display: block;}
.s06.load p { display: none;}
.s06.load p.atv { display: block;}
.s06.load .loaders.del { display: none;}
.s07 { display: none;}
.s07.atv { display: block;}
.s07 select {
    width: 100%;
    padding: 7px;
    border: solid 1px #052370;
    border-radius: 3px;}
.s08 { display: none;}
.s08.atv { display: block;}
.s08.load p { display: none;}
.s08.load p.atv { display: block;}
.s08.load .loaders.del { display: none;}
.s09 { display: none;}
.s09.atv { display: block;}
.s09 .next { background: none;}
.s09 .next span {
    background: #335C80;
    display: block;
    border-radius: 7px;}
.s07 .next,
.s09 .next span {
    cursor: no-drop;
    pointer-events: none;
    opacity: 0.3;}
.s07 .next.on,
.s09 .next.on span.on {
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;}
.s09 input {
    width: 100%;
    padding: 10px 7px;
    border: solid 1px #052370;
    border-radius: 3px;}
.s11 .next { background: none;}
.s11 .next span {
    background: #335C80;
    display: block;
    border-radius: 7px;}
.s11 .next span {
    cursor: no-drop;
    pointer-events: none;
    opacity: 0.3;}
.s11 .next.on span.on {
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;}
.s11 input {
    width: 100%;
    padding: 10px 7px;
    border: solid 1px #052370;
    border-radius: 3px;}
.s10 { display: none;}
.s10.atv { display: block;}
.s10.load p { display: none;}
.s10.load p.atv { display: block;}
.s10.load .loaders.del { display: none;}
.s11 { display: none;}
.s11.atv { display: block;}
.s12 { display: none;}
.s12.atv { display: block;}
.s12.load p { display: none;}
.s12.load p.atv { display: block;}
.s12.load .loaders.del { display: none;}
.s13 { display: none;}
.s13.atv { display: block;}
.s13 p {
    font-size: 18px;
    font-weight: bold;
    text-align: center;}
.s13 div {
    font-size: 14px;
    line-height: 2;
    font-weight: bold;}
.s13 div span {
    font-weight: normal;
    margin-left: 14px;}
.s14 { display: none;}
.s14.atv { display: block;}
.form .text { display: none;}
.s14 [type="checkbox"] {
    margin: 0 6px;
    display: inline-block;
    position: relative;
    top: 6px;
    width: 21px;
    height: 21px;}
[type=submit] {
    width: 100%;
    padding: 10px 7px;
    border: solid 1px #05237055;
    border-radius: 3px;}
[type=submit]:not(:disabled) { border: solid 1px #052370;}

.off {
    cursor: no-drop !important;
    pointer-events: none !important;}