@charset "utf-8";

/* ************************************************************************
*
* PC
*
************************************************************************ */



/*-------------共通-------------*/

body{
  word-break:break-all;
  min-width: 1000px;
}
img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
a{
    transition: .4s; 
}
section{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  text-align: center;
  margin: auto;
  position: relative;
}
*, *:before, *:after {
box-sizing: border-box;
}

ul{
    list-style: none;
}
.sp{
  display:none;
}
.cntWrap{
    /*max-width: 1780px;*/
    margin: auto;
    position: relative;
    overflow: hidden;
}
.wrap{
    margin: auto;
    /*width: 980px;*/
    position: relative;
    max-width: 900px;
}
.end {
    display:block;
    background-color: #000000;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}



/*----------main----------*/

.main{
/*  background-position:-36px 0, 0 700px;*/
background-position:18.75vw 0, 17.2vw bottom;
    background-image: url(../images/circle1.png), url(../images/circle2.png);
    background-repeat: repeat-x, repeat-x;
}
.main h1 {
    text-align: center;
    padding: 90px 0 102px;
    margin: 0 auto;
}
.main h1 img {
    /*height: 100%;
    width: 100%;*/
    max-width: 902px;
}
.main p{
    margin: 0 auto;
    width: 652px;
    padding: 0 0 70px;
}
.main p span{
    text-align: left;
    font-size: 11px;
    padding-left: 1em;
    text-indent: -1em;
    display: block;
}

/*----------共通----------*/
.area-Wrap{
max-width: 1033px;
margin: 0 auto;
}
/*----------download----------*/
/*
h2 {
    margin: 0 auto 25px;
}
*/

.download {
padding:37px 0;
background: #D9EEF9;
}
.download .wrap01{
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.download .wrap01 .imgBox{
width:24.58%;
}
.download .wrap01 .txtBox{
width: 650px;
padding-left: 3%;
}
.download .wrap01 .txtBox .box01{
width: 537px/*86%*/;
padding-top: 18px;
}
.download .wrap01 .txtBox .cap{
font-size: 12px;
font-weight: 400;
text-align: left;
padding-top: 16px;
}
.download .wrap02{
width: 100%;
max-width: 802px;
margin:20px auto 0 auto;
padding:0 1.98412698412698vw;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
align-items: center;
gap: 17px;
background-color: #fff;
border-radius: 10px;
}
.download .wrap02 .imgBox{
width:100%;
max-width: 130px;
}
.download .wrap02 .txtBox{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
padding: 1.85185185185185vw 0;
align-items: center;
}
.download .wrap02 .txtBox .leadBox{
width: 595px;
}
.download .wrap02 .txtBox .leadBox .btn a{
display: block;
width: 100%;
max-width: 318px;
height: 48px;
border: 2px solid #0090D5;
border-radius: 90px;
color: #0090D5;
background-color: #D9EEF9;
font-size: 19px;
font-weight: bold;
letter-spacing: 0.03em;
display: flex;
align-items: center;
justify-content: center;
}

.btn-arrow-r {
  position: relative; /* 基準位置とする */
}

.btn-arrow-r::before,
.btn-arrow-r::after {
  content: ""; /* 疑似要素に指定必須 */
  width: 10px; /* 線の長さを指定 */
  height: 2px; /* 線の幅を指定 */
  display: inline-block; /* インラインブロックにする */
  border-radius: 2px; /* 線を角丸にする */
  background: #0090D5;   /* 線の色を指定 */
  position: absolute; /* 相対位置に指定 */
  right: 12px; /* 右から10pxの位置に配置 */
}

.btn-arrow-r::before {
  top: calc(50% - 6px);     /* 数値は微調整してください */
  transform: rotate(45deg); /* 45度回転させる */
}
.btn-arrow-r::after {
  bottom: calc(50% - 2px);   /* 数値は微調整してください */
  transform: rotate(-45deg); /* -45度回転させる */
}


.download .wrap02 .txtBox .leadBox .txt{
width: 100%;
font-weight: 500;
font-size: 15px;
line-height: 24px;
letter-spacing: 0%;
text-align: left;
padding: 18px 0 0 15px;
}

.download .wrap02 .txtBox .btnBox{
width: 100%;
max-width:260px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
text-align:center;
}
.download .wrap02 .txtBox .btnBox .area_app{
width:38%;
}
.download .wrap02 .txtBox .btnBox .area_app .qr_img{
width:82.02%;
margin-bottom: 1.2vw;
}
.download .wrap02 .txtBox .btnBox .area_and{
width: 49%;
}
.download .wrap02 .txtBox .btnBox .area_and .qr_img{
width:63.61%;
margin-bottom: 1.2vw;
}



/*----------anchorArea----------*/
.anchorArea {
padding: 47px 0;
}
.anchorArea .linkBox{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
}
.anchorArea .btnBox{
width:31%;
max-width: 320px;
}
.anchorArea a {
position: relative;
display: block;
width:100%;
background-color: #0090D5;
border-radius: 90px;
line-height: 1.3;
color: #fff;
text-decoration: none;
text-align: center;
}
.anchorArea a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 22px;
width: 13px;
height: 13px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: translateY(-2px) rotate(135deg);
box-sizing: border-box;
}
.anchorArea .btnBox.box03 a{
background-color: #055087;
}
.anchorArea .btnBox .txtArea{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
height: 114px;
}
.anchorArea .btnBox.box01 .txtArea .numBox{
width: 10%;
margin-left: 10%;
}
.anchorArea .btnBox.box02 .txtArea .numBox,
.anchorArea .btnBox.box03 .txtArea .numBox{
width: 11%;
margin-left: 9%;
}
.anchorArea .btnBox .txtArea .txtBox{
width: 65%;
font-size:20px;
}

/*----------howto----------*/
.howto{
background-color: #0090D5;
padding-top: 53px;
padding-bottom: 87px;
}
.howto .ttlArea{
color:#fff;
text-align: center;
}
.howto .ttlArea .ttlNum{
width: 47px;
margin:0 auto 12px auto;
transform: translateX(calc(-50% + 35px));
}
.howto .ttlArea .ttl{
font-size: 42px;
font-weight: 700;
line-height: 60px;
margin-bottom: 38px;
}
.howto .innerBox{
background-color: #fff;
border-radius: 15px;
}
.howto .innerBox .pcBox{
width: 882px;
margin: 0 auto;
padding: 64px 0 43px 0;
}
.howto .innerBox .txtArea{
width: 100%;
border-radius: 0 0 15px 15px;
background-color: #fff100;
}
.howto .innerBox .txtArea img{
width: 62%;
margin: 0 auto;
}

/*----------benefits----------*/
.benefits{
background-color: #D9EEF9;
padding-top: 50px;
padding-bottom: 90px;
}
.benefits .ttlArea .ttlNum{
width: 52px;
margin: 0 auto 16px auto;
transform: translateX(calc(-50% + 35px))
}
.benefits .ttlArea .ttl_sub{
font-size: 37px;
font-weight: 700;
line-height: 1.4;
}
.benefits .ttlArea .ttl{
font-size: 42px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 30px;
}
.benefits .innerBox{
background-color: #fff;
border-radius: 15px;
}
.benefits .innerBox .ticket.pcBox{
width: 882px;
margin: 0 auto;
padding:64px 0 75px 0;
}
.benefits .ancArea .box{
width: 51.4%;
margin: 0 auto 30px auto;
}

.benefits .ancArea .linkBox{
width:90%;
max-width: 880px;
margin: 0 auto;
display: flex;
position: relative;
}
.benefits .ancArea .linkBox .box{
  width: 50%;
}
.benefits .ancArea .linkBox .txtArea{
font-size: 26px;
font-weight: bold;
letter-spacing: 0.05em;
}
.benefits .ancArea .linkBox .txtArea .fn{
font-size: 33px;
}
.benefits .ancArea .linkBox .btnArea .btnBox{
width: 320px;
margin: 0 auto;
}

.benefits .ancArea .linkBox .btnArea .btnBox a {
position: relative;
display: block;
width:100%;
height: 100px;
border-radius: 90px;
padding-bottom: 20px;
border: 4px solid #0090D5;
color: #0090D5;
background-color: #fff;
line-height: 1.3;
text-decoration: none;
text-align: center;
}
.benefits .ancArea .linkBox .btnArea .btnBox a::after {
content: '';
position: absolute;
top: 0;
bottom: -51px;
left:0;
right:0;
width: 13px;
height: 13px;
margin: auto;
border-top: 2px solid #0090D5;
border-right: 2px solid #0090D5;
transform: translateY(-2px) rotate(135deg);
box-sizing: border-box;
}
.benefits .ancArea .linkBox .area01{
position: relative;
background-color: #D9EEF9;
border-radius: 16px 0 0 16px;
padding:65px 0 32px 0;
}
.benefits .ancArea .linkBox .iconBox{
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 7.5%;
}
.benefits .ancArea .linkBox .area01 .btnArea{
margin:44px auto 0 auto;
}
.benefits .ancArea .linkBox .area01 .btnArea .btn01  img{
width: 65%;
margin: 0 auto;
padding-top: 8%;
}
.benefits .ancArea .linkBox .area02{
background-color: #FFF999;
border-radius: 0 16px 16px 0;
padding:45px 0 28px 0;
}
.benefits .ancArea .linkBox .area02 .txtArea .txtBlock{
margin-top: 20px;
position: relative;
}
.benefits .ancArea .linkBox .area02 .txtArea .txtBlock span{
  display: block;
}
.benefits .ancArea .linkBox .area02 .fn{
text-align: left;
padding-left: 46px;
}
.benefits .ancArea .linkBox .area02 .fnBox{
position: absolute;
left: 270px;
top: 3px;
}
.benefits .ancArea .linkBox .area02 .btnArea{
margin-top: 27px;
}
.benefits .ancArea .linkBox .area02 .btnArea img{
width: 83%;
margin: 0 auto;
padding-top: 10.5%;
}
.benefits .ancArea .linkBox .btnArea .btnBox a:hover{
opacity: 0.8;
}

.bene_qr{
margin-top:45px;
}
.bene_qr .bene_ttl{
width: 42%;
margin: 0 auto;
}
.benefits .innerBox .bene_qr .pcBox{
width:882px;
margin: 0 auto;
padding: 47px 0 44px 0;
}

.bene_coupon{
margin-top:75px;
padding-bottom: 67px;
}
.bene_coupon .bene_ttl{
width: 58%;
margin: 0 auto;
}
.benefits .innerBox .bene_coupon .pcBox{
width:882px;
margin: 0 auto;
padding: 47px 0 59px 0;
}
.bene_coupon .noteBox{
width: 79%;
margin:0 auto;
font-size: 14px;
text-align: left;
}
.borderArea{
width:85%;
margin: 0 auto;
height: 5px;
background-color: #D9EEF9;
}


/*----------other----------*/
.other{
background-color: #B3DEF2;
padding-top: 55px;
padding-bottom: 90px;
}
.other .ttlArea .ttlNum{
width: 54px;
margin: 0 auto 14px auto;
transform: translateX(calc(-50% + 35px));
}
.other .ttlArea .ttl{
font-size: 42px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 37px;
}
.other .innerBox {
background-color: #fff;
border-radius: 15px;
text-align: left;
padding: 50px 77px 5px 77px;
}
.other .listArea .ttl{
font-size: 20px;
font-weight: bold;
margin-bottom: 7px;
}
.other .listArea .listBox{
margin-bottom: 35px;
font-size: 16px;
font-weight: bold;
}
.other .listArea .listBox li{
line-height: 1.6;
font-size: 16px;
font-weight: 500;
}
.other .listArea:last-child{
margin-bottom: 0;
}
.other a{
text-decoration: underline;
color:#1855C6;
}
.other .outlink{
width: 0.9vw;
vertical-align: baseline;
}

/*----------btnOne----------*/
.btnOne{
padding:50px 0 67px 0;
}
.btnOne .innerWrap{
width: 38%;
margin: 0 auto;
}

/*----------spec----------*/
#pageTop{
display: none;
position: fixed;
bottom: 2%;
right: 2%;
max-width:80px;
height: auto; 
z-index: 9999;
}
#spec p{
padding: 30px 0;
text-align: center;
background-color: #eeeeee;
font-size: 20px;
font-weight: bold;
}
#spec p a{
text-decoration: none;
}
#spec dl{
max-width: 605px;
margin: 30px auto;
line-height: 1.5;
padding: 28px 23px;
font-size: 1em;
border: 1px dotted #888888;
color: #888888;
text-align: left;
}

/*-------------footer-------------*/
footer {
background: #000;
padding:38px 0 17px 0;
}
footer .logo{
width: 371px;
margin: 0 auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
}
footer .copy{
color: #fff;
font-size: 0.6em;
text-align: center;
padding-top: 17px;
}


/*-------------飾り-------------*/
.fadein{
width: 13%;
position: absolute;
z-index: 999;
opacity: 0;
transform: translate(0,60px); 
-webkit-transform: translate(0,60px); 
transition: 0.7s;
}
.fd{
opacity: 1.0;
transform: translate(0,0); 
-webkit-transform: translate(0,0);
}
.fadein2{
width: 13%;
position: absolute;
z-index: 998;
opacity: 0;
transition: 1.0s;
transition: 0.7s;
}
.fd2{
opacity: 1.0;
}