@charset "UTF-8";

@import url(base.css);

body.active {
  height: 100%;
  overflow: hidden;
}


img {
	display: inline-block;
	max-width:100%;
	max-height: 100%;
    vertical-align: middle;}

html{ scroll-behavior: smooth;scroll-padding-top: 12vw;}

p {
	font-size: 3.5vw;}

.pc {
	display: none !important;}

img.fit {
    width: 100%;
    height: auto;}

/*-------------------------------------------------
	++ container
-------------------------------------------------*/
#container {
	margin:0 auto;
	position:relative;
	min-width:100%;}
.cInner {
	padding: 5vw 3vw;
    width: 100%;}

/*-------------------------------------------------
	++ HEADER
-------------------------------------------------*/
#headerBox {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 990;
    background-color: #fff;} 
.headerInner {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 13vw;
    padding: 0 12vw 0 0;}
#logo {
    width: 40%;
    margin: 0 2vw;}
#logo img {
    width: 100%;
    height: auto;}

.headerMenu {
    width: 100%;}
.headerMenu ul {
    display: flex;}
.headerMenu ul li {
    margin-left: 3px;
    width: 32%;}
.headerMenu ul li a {
    display: block;
    text-align: center;
    font-weight: bold; 
    padding: 5px 0;
    font-size: 3vw;
    line-height: 1.3em;
    border-radius: 10px;}
.headerMenu ul li a.join {
    color: #fff;
    background: linear-gradient(to bottom, #DC3D27, #E58F22);} 
.headerMenu ul li a.vote {
    color: #fff;
    background-color: #3299E6;} 
.headerMenu ul li a.premium {
    color: #174e9d;
    background-color: #ffd432;} 
.headerMenu ul li a:hover {
    text-decoration: none; }

#menu {
    margin-left: 0;
    width: 40px;}
#menu nav {
    display: flex;}
#menu nav ul {
    display: none;}
#menu nav ul.open {
    display: block;
    position: fixed;
    left: 0;
    top: 13vw;
    text-align: left;
    width: 100%;
    height: 100vh;
    padding: 10vw 8vw 0 8vw;
    background-color: #174e9d;}
#menu nav li {
    margin-left: 0;
    color: #174e9d;
    font-weight: bold;
    font-size: 4.5vw;
    line-height: 1;
    padding: 0px;
	text-align: left;
    background-color: #fff;
    border-radius: 50px;
    margin-bottom: 5vw;}
#menu nav li.logo {background-color: transparent;margin-bottom: 10vw;}
#menu nav li.logo img {width: 50%;}
#menu nav li span {
	display:none;}
#menu nav li a {
	color: #174e9d;
    display: block;
    line-height: 2.5em;
    padding: 0;
    font-weight: bold;
    text-align: center;
    position: relative;}

#nav_toggle {
	position:absolute;
	top:3.5vw;
	right:2vw;
	display: block;
	width: 35px;
	height: 30px;
	margin: 0px;
	z-index: 100;}
#nav_toggle i {
	display: block;
	height: 3px;
	background: #174e9d;
	position: absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;}
#nav_toggle i:nth-child(1) {
	top: 0;}
#nav_toggle i:nth-child(2) {
	top: 10px;}
#nav_toggle i:nth-child(3) {
	top: 20px;}
#nav_toggle.open i:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);}
#nav_toggle.open i:nth-child(2) {
	width: 0;
	left: 50%;}
#nav_toggle.open i:nth-child(3) {
	top: 12px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);}

/*-------------------------------------------------
    others
-------------------------------------------------*/
.mainBannerArea {
    width: 100%;
    margin: 0 auto;
    text-align: center;}
.mainArea {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;}

.bgWhite {
    width: 100%;
    background: url(../img/bg01.png) no-repeat center top;
    background-attachment: fixed;
    background-size: cover;}
.bgBlue {
    width: 100%;
    background: url(../img/bg02.png) repeat center top;}

h2 {
    border-bottom: solid 3px #1eade5;
    box-shadow: 0px 3px #174e9d,
                0px -3px #ffdf00 inset;
    text-align: center;
    font-size: 7vw;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 4vw;
    line-height: 1.8em;}
h2 span {font-size: 6vw;line-height: 1.4em;}
.bgWhite h2 {color: #335aa5;}
.bgBlue h2 {color: #fff;}
.logoS {
    width: 35%;
    margin: 0 5px 8px 0;}

h3 {
    font-size: 3.8vw;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.3em;}
.bgWhite h3 {color: #000;}
.bgBlue h3 {color: #fff;}

h4 {
    text-align: center;
    margin: 2em auto;
    width: 100%;}
h4 img {width: 100%;}

.reasonBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;}
.reasonImg {width: 100%;order: 2;margin: 0 auto;text-align: center;}
.reasonImg img {width: 50%;}
.reasonTxtBox {
    order: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;}
.reasonTxtIcon {width: 17%;}
.reasonTxt {width: 81%;}
.reasonTxt h5 {
    color: #174e9d;
    font-size: 4.5vw;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.4em;}
.reasonTxt p {
    color: #000;
    font-size: 3.5vw;
    font-weight: bold;
    text-align: left;
    line-height: 1.4em;
    padding-bottom: 0.5em;}
hr {
    width: 100%;
    border-width: 5px 0px 0px 0px;
    border-style: dotted;
    border-color: #9ddcff;
    height: 1px;
    margin-top: 20px;
    margin-bottom: 20px;}
.floatL {float: none;}
.floatR {float: none;}

.movieBtn {
    width: 70%;
    position: initial;
    margin: 0 auto;
    text-align: center;}
.movieBtn a {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color: #ffdf00;
    border-radius: 50px;
    font-size: 4vw;
    color: #174e9d;
    font-weight: bold;
    text-decoration: none;
    text-align: center;}
.movieBtn a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 10px solid #174e9d;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 0 solid transparent;
    transform: translateY(1px);
    box-sizing: border-box;}

.joinBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 4vw 0 3vw 0;}
.joinItem {
    width: 100%;
    height: 56px;
    background-color: #fff;
    border-radius: 0px;
    padding: 0;
    margin-top: 2%;
    display: flex;
    align-items: center;}
.joinItemImg {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;}
.joinItemImg img {width: 75%;}

.joinBtn {
    width: 50%;
    margin: 0px;
    display: flex;
    justify-content: center;
    position: relative;}
.joinBtn.W100 {width: 100%;}
.joinBtn a {
    width: 100%;
    display: block;
    color: #fff;
    font-size: 100%;
    line-height: 2em;
    font-weight: bold;
    text-align: center;
    border-radius: 50px;}
.joinBtn a:before{
    content: '';
    display: block;
    width: 20px; 
    height: 20px;
    background: url(../img/bt_blank.svg) no-repeat center center;
    background-size: 12px;
    position:absolute;
    bottom:1vw;
    right:0;
    left: 0;
    text-align: center;
    margin: 0 auto;}
.bgJoin {background-color: #174e9d; height: 100%;}
.bgExplain {background-color: #64abe2; height: 100%;}

.videoBox {
    width: 100%;
    margin: 0 auto;}
.video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 2% auto;}
.video iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;}

.flowImg {
    width: 100%;
    margin: 2vw auto 0 auto;
    text-align: center;}
.flowImg img {
    max-width: 100%;}
.flowBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px auto;}
h4.flowTtl {
    width: 100%;
    height: 12vw;
    text-align: left;
    color: #000;
    font-weight: bold;
    font-size: 3.9vw;
    margin: 1em auto 0.6em auto;
    padding: 0 0 1vw 18vw;
    display: flex;
    align-items: center;}
.step1 {background: url(../img/sp/step/ttl01.jpg) no-repeat left center;background-size: cover;}
.step2 {background: url(../img/sp/step/ttl02.jpg) no-repeat left center;background-size: cover;}
.step3 {background: url(../img/sp/step/ttl03.jpg) no-repeat left center;background-size: cover;}
.step4 {background: url(../img/sp/step/ttl04.jpg) no-repeat left center;background-size: cover;}
.step5 {background: url(../img/sp/step/ttl05.jpg) no-repeat left center;background-size: cover;}
.flowImg2 {width: 100%;text-align: center; margin-bottom: 5vw;}

.cls-1,.cls-2{fill:#174e9d;}
.cls-3,.cls-4{fill:#137fd3;}
.cls-4,.cls-5,.cls-6,.cls-2,.cls-7,.cls-8{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}
.cls-9,.cls-7{fill:#0065d3;}
.cls-5,.cls-10{fill:#64abe2;}
.cls-11,.cls-8{fill:#0046d3;}
.cls-6,.cls-12{fill:#fff;}
#map {width: 100%;}
#map svg {
    width: 100%;
    height: auto;}
#map svg a path {transition: fill 0.3s linear;}
#map svg a:hover path {opacity: 1;}

.qaBox {margin: 2em auto;}
.toggle {display: none;}
.option {
    position: relative;
    margin-bottom: 1em;}
.qaTitle,
.qaInner {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;}
.qaTitle {
    background-color: #002b81;
    border-radius: 999px;
    padding: 1%;
    display: block;
    color: #fff;
    font-size: 4vw;
    font-weight: bold;
    display: flex;
    align-items: center;}
.qaTitle img {width: 55px;margin-right: 15px;}
.qaTitle::after,
.qaTitle::before {
    content: "";
    position: absolute;
    right: 2.25em;
    top: 1.1em;
    width: 4px;
    height: 1.55em;
    background-color: #fff;
    transition: all 0.3s;}
.qaTitle::after {transform: rotate(90deg);}
.qaInner {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: #fff;
    border-radius: 15px;
    margin: 10px auto 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;}
.qaInner .icon {
    width: 15%;
    padding: 1em 0em 1em 0.5em;}
.qaInner .icon img {width: 100%;}
.qaInner .text {
    width: 82%;
    padding: 1.5em 1em 1em 0em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}
.qaInner p {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 3.5vw;
    line-height: 1.5;
    color: #000;
    font-weight: bold;}
.qaInner p span {
    display: block;
    font-weight: normal;
    font-size: 3vw;}
.qaInner p span.txtR {
    display: inline-block;
    font-weight: bold;
    color: #FF0000;
    font-size: 3.5vw;}
.W50 {width: 48%; margin: 1% 0;}
.W100 {width: 100%; margin: 1% 0;}
.W50 img,.W100 img {width: 100%;}
.toggle:checked + .qaTitle + .qaInner {
    max-height: 100%;
    transition: all 1.5s;}
.toggle:checked + .qaTitle::before {
    transform: rotate(90deg) !important;}

.table {	width: 100%;}
.table table {
	border-top: 1px solid #cbcbcb;
	border-right: 1px solid #cbcbcb;
	width: 100%;
    color: #000;
	border-spacing: 0px;
	margin: 0px auto 15px;}
.table th {
	border-bottom: 1px solid #cbcbcb;
	border-left: 1px solid #cbcbcb;
	padding: 5px 10px;
    width: 20%;
    font-size: 3.5vw;
    text-align: center;
    font-weight: bold;
    background-color: #FFFFFF;}
.table td {
	border-bottom: 1px solid #cbcbcb;
	border-left: 1px solid #cbcbcb;
	text-align: left;
    background-color: #FFFFFF;
    font-size: 3.5vw;
	padding: 5px 10px;
    font-weight: bold;}
.table td.w150 {width: 30%}
.table td.w300 {width: 50%}



.slideWrap {
    padding: 0 5vw;}
.slideWrap ul li img {
    width: 100%;
    height: auto;}
.bnrSlider li {padding: 0 10px;}
.slick-slider.slick-dotted {margin-bottom: 10vw !important;}
.slick-next,
.slick-prev {
    width: 30px;
    height: 30px;
    z-index: 1;}
.slick-next:before,
.slick-prev:before {
    display: block;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center center;}
.slick-prev {left: -30px !important;}
.slick-prev:before {
    content: "";
    background-image: url(../img/arrow_l.svg);}
.slick-next {right: -30px !important;}
.slick-next:before {
    content: '';
    background-image: url(../img/arrow_r.svg);}

.slick-dots {
    display: block;
    width: 100%;
    padding: 5px 0 8px 0;
    margin: 0;
    list-style: none;
    text-align: center;}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 15px !important;
    height: 15px !important;
    margin: 0 8px;
    padding: 0;
    cursor: pointer;
	background-color: #969090;
    border-radius: 10px;
    opacity:0.8;}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 15px !important;
    height: 15px !important;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
    background-color: #f5f5f5;
    border-radius: 10px;}
.slick-dots li.slick-active {background-color:#d9d9d9;}
.slick-dots li.slick-active button {background-color:#64abe2;}

.siteBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;}
.siteItem {
    width: 48%;
    border-radius: 20px;
    background-color: #fff;
    margin-bottom: 10px;}
.siteItem a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;}
.siteItem img {width: 70%;}

/*-------------------------------------------------
    FOOTER
-------------------------------------------------*/
#footer {
	color: #FFF;
	padding: 30px 0 70px 0;
    background: #012b81 url(../img/sp_footer.jpg) no-repeat center top;
    background-size: 100% auto;}
#footer .Inner {
	width:100%;
    padding: 0 4vw;
	margin:0 auto;}
#footer .logo {
    width: 70%;
    text-align: center;
    margin: 35px auto;}

#footer .footerNaviBox {
    margin: 30px auto 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;}
#footer .footerNaviTtl {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    color: #335aa5;
    font-weight: bold;
    font-size: 4.3vw;
    line-height: 1.3em;
    padding: 4vw 0;
    margin-bottom: 3vw;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;}
#footer .footerNaviCustomer {
    width: 100%;
    text-align: left;}
#footer .footerNaviCustomer h4 {
    color: #64abe2;
    font-weight: bold;
    font-size: 5.5vw;
    display: block;
    text-align: left;
    margin: 0;
    width: auto;}
#footer .footerNaviCustomer p {font-size: 100%;}
#footer .footerNaviCustomer p span {
    font-size: 4.3vw;
    font-weight: bold;
    display: block;}
#footer .footerNaviCustomer p.tel {font-size: 5vw;}
#footer .copyright {
    font-size: 3.5vw;
    text-align: center;
    line-height: 1.8em;}

  #pageToTop {
    display: none;
    position: fixed;
    bottom: 18vw;
    right: 3vw;
    width: 13vw;}

/*-------------------------------------------------
    banner
-------------------------------------------------*/
.floating-bnr {background-color: #E63232;}
.floating-bnr.bnr01 {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 3px 0;
    border-radius: 0px;
    margin: 0 auto;
    text-align: center;
    -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%);
    box-shadow: 0 0 7px rgb(0 0 0 / 40%);
    z-index: 9999;
    background: linear-gradient(to bottom, #DC3D27, #E58F22);}
.floating-bnr.bnr01 img {width: 75%;}
.bnr_close {
    background-color: #f8f8f8;
    border: none;
    border-radius: 50px;
    box-shadow: 0 0 7px rgb(0, 0, 0, 0.4);
    color: #777;
    cursor: pointer;
    width: 8vw;
    height: 8vw;
    text-align: center;
    padding: 0;
    position: absolute;
    right: 2vw;
    top: -2vw;
    z-index: 99999;}
.fa-xmark:before {
    content: "×";
    font-style: normal;
    font-weight: bold;
    line-height: 5vw;
    font-size: 6vw;}




}