@charset "utf-8";

/* ************************************************************************
*
* SP
*
************************************************************************ */


@media (max-width: 767px) {


/*--------------共通(sp)--------------*/

body{
  word-break:break-all;
  min-width: initial;
}
img{
    width: 100%;
    height: auto;
}
.pc{
    display:none;
}
.sp{
    display: block;
}
.wrap {
    width: 90%;
}
.end {
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
}
.area-Wrap{
max-width: 90%;
width: 90%;
margin: 0 auto;
}

/*-------------main(sp)-------------*/

.main {
    background-image:none;
}
.main p {
    margin: 0 auto;
    width: 90%;
    padding: 15px 0;
}
.main .wrap{
    padding: 0;
}
.main h1 {
    height: auto;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.main h1 img {
    width: 100%;
}
.main h2{
    width: 100%
}

/*-------------download-------------*/

.download {
width: 100%;
padding: 6% 0;;
}
.download .wrap01{
width: 100%;
display: block;
}
.download .wrap01 .imgBox{
width:39.13%;
margin: 0 auto;
}
.download .wrap01 .txtBox{
width: 100%;
margin: 0 auto;
padding-left: 0;
padding-top: 3vw;
}
.download .wrap01 .txtBox .txt{
  width: 93%;
  margin: 0 auto;
}
.download .wrap01 .txtBox .box01{
width: 100%;
padding-top: 4vw;
}
.download .wrap01 .txtBox .cap{
font-size: 2.82vw;
padding-top: 3vw;
letter-spacing: -0.01em;
}
.download .wrap02{
width: 89.74vw;
padding:0 4vw 4vw 4vw;
margin:4.5vw auto 0 auto;
border-radius: 2vw;
align-items: normal;
gap: normal;
}
.download .wrap02 .imgBox {
width:21.2820512820513vw;
padding-top: 11%;
}
.download .wrap02 .txtBox{
width: 57.4358974358974vw;
display:block;
padding: 3.8vw 0 0 0;
}
.download .wrap02 .txtBox .leadBox{
width: 100%;
}
.download .wrap02 .txtBox .leadBox .btn a{
height:8.71794871794872vw;
border: 0.4vw solid #0090D5;
font-size: 3.33333333333333vw;
max-width: 100%;
}
.btn-arrow-r::before,
.btn-arrow-r::after {
width: 1.79487179487179vw; /* 線の長さを指定 */
height: 0.512820512820513vw; /* 線の幅を指定 */
right: 2.56410256410256vw; /* 右から10pxの位置に配置 */
}
.btn-arrow-r::before {
top: calc(50% - 1.02564102564103vw);     /* 数値は微調整してください */
}
.btn-arrow-r::after {
bottom: calc(50% - 0.769230769230769vw);   /* 数値は微調整してください */
}
.download .wrap02 .txtBox .leadBox .txt{
width: 52vw;
font-size: 3.58974358974359vw;
line-height: 1.285714285714286;
letter-spacing: 0%;
text-align: center;
padding: 2.82051282051282vw 0 0 0;
margin: 0 auto;
}
.download .wrap02 .txtBox .leadBox .txt-app {
align-items: center; /* 線を上下中央 */
display: flex; /* 文字と横線を横並び */
justify-content: center; /* 文字を中央寄せ */
}
.download .wrap02 .txtBox .leadBox .txt-app::before,
.download .wrap02 .txtBox .leadBox .txt-app::after {
background-color: #000; /* 線の色 */
border-radius: 0.512820512820513vw; /* 線の両端を丸く */
content: "";
height: 0.256410256410256vw; /* 線の高さ */
width: 3.58974358974359vw; /* 線の長さ */
}
.download .wrap02 .txtBox .leadBox .txt-app::before {
margin-right: 1.28205128205128vw; /* 文字との余白 */
transform: rotate(48deg); /* 傾ける */
}
.download .wrap02 .txtBox .leadBox .txt-app::after {
margin-left: 1.28205128205128vw; /* 文字との余白 */
transform: rotate(-48deg); /* 傾ける */
}

.download .wrap02 .txtBox .btnBox{
width: 100%;
padding-left: 0;
margin-top: 3%;
max-width: 100%;
align-items: center;
}
.download .wrap02 .txtBox .btnBox .area_app{
width:24.6153846153846vw;
}
.download .wrap02 .txtBox .btnBox .area_and{
width: 28.974358974359vw;
}

/*-------------anchorArea-------------*/
.anchorArea {
padding: 9vw 0 5vw 0;
}
.anchorArea .linkBox{
display: block;
}
.anchorArea .btnBox{
width: 100%;
margin:0 auto 4.1025641025641vw auto;
max-width: 100%;
}
.anchorArea a {
border-radius: 15vw;
font-size:4.8vw;
}
.anchorArea a::after {
right: 6vw;
width: 3vw;
height: 3vw;
}
.anchorArea .btnBox .txtArea{
height: auto;
padding: 5.12820512820513vw 0 5.64102564102564vw 0;
}
.anchorArea .btnBox.box01 .txtArea .numBox{
width: 6.15384615384615vw;
margin-left: 7%;
}
.anchorArea .btnBox.box02 .txtArea .numBox,
.anchorArea .btnBox.box03 .txtArea .numBox{
width: 6.66666666666667vw;
margin-left: 6%;
}
.anchorArea .btnBox .txtArea .txtBox{
width:73%;
font-size: 5vw;
}


/*-------------スライド-------------*/
/*.swiper-button-next,
.swiper-button-prev{
top:37%;
color: #0090D5;
}

*/
/*
.swiper-button-next:after{
content: '';
display: inline-block;
swidth: 6vw;
height: 6vw;
position: absolute;
top: 27%;
right: 2vw;
border: 0;
border-top: solid 3px #0090D5;
border-right: solid 3px #0090D5;
display: inline-block;
transform: rotate(45deg);
}
*/
/*
.swiper-button-prev:after{
content: '';
display: inline-block;
width: 6vw;
height: 6vw;
position: absolute;
top: 27%;
left: 2vw;
border: 0;
border-top: solid 3px #0090D5;
border-left: solid 3px #0090D5;
display: inline-block;
transform: rotate(-45deg);
}
*/
.swiper-button-prev:after,
.swiper-button-next:after {
background-repeat: no-repeat;
background-size: contain;
content: "";
width: 6vw;
height: 8.2051282051282vw;
position: absolute;
top: -141%;
}
.swiper-button-next:after{
background-image:url(/onelumine/renkeicp/images/arrow_blue_r.png);
right:0;
}
.swiper-button-prev:after{
background-image:url(/onelumine/renkeicp/images/arrow_blue_l.png);
left:5vw;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev{
right: 5.5vw;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
bottom: 0;
}
.swiper-wrapper{
padding-bottom: 9.5vw;
}
.swiper-pagination-bullet{
width: 2.5vw;
height: 2.5vw;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 2vw;
}
.swiper-pagination-bullet-active{
background-color: #0090D5;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
display: none;
}
.slideBox .imgBox{
width: 58%;
margin: 0 auto;
}
.slideBox .detailBox{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
padding-left: 6%;
margin-top: 2vw;
}
.slideBox .detailBox .numBox{
width:18%;
}
.slideBox .detailBox .txtBox{
width: 78%;
font-size: 4vw;
font-weight: 700;
text-align: left;
padding-left: 3%;
padding-top: 3vw;
line-height: 1.4;
}
.slideBox .detailBox .txtBox .f-area{
font-weight: 500;
}

/*----------howto----------*/
.howto{
padding-top: 8.2051282051282vw;
padding-bottom: 15vw;
}
.howto .ttlArea{
color:#fff;
text-align: center;
}
.howto .ttlArea .ttlNum{
width:6.6vw;
margin: 0 auto 1vw auto;
transform: translateX(calc(-50% + 5.12820512820513vw));
}
.howto .ttlArea .ttl{
font-size: 7.8vw;
line-height: 10vw;
margin-bottom: 4vw;
}
.howto .innerBox{
border-radius: 4vw;
}
.howto .innerBox .spBox{
padding:8vw 0 9vw 0;
}
.howto .innerBox .txtArea{
width: 100%;
border-radius: 0 0 4vw 4vw;
padding: 3vw 0;
}
.howto .innerBox .txtArea img{
width: 90%;
margin: 0 auto;
}
.howto .slideBox .imgBox{
width: 51.2820512820513vw;
margin: 0 auto 3.84615384615385vw auto;
}

/*----------benefits----------*/
.benefits{
background-color: #D9EEF9;
padding-top: 8vw;
padding-bottom: 16vw;
}
.benefits .ttlArea .ttlNum{
width:7.69230769230769vw;
margin: 0 auto 3vw auto;
transform: translateX(calc(-50% + 5.12820512820513vw));
}
.benefits .ttlArea .ttl_sub{
font-size: 6.4vw;
font-weight: 700;
line-height: 1.4;
}
.benefits .ttlArea .ttl{
font-size: 7.7vw;
margin-bottom: 6vw;
}
.benefits .innerBox{
background-color: #fff;
border-radius: 15px;
}
.benefits .innerBox .pcBox{
width: 85%;
margin: 0 auto;
padding: 64px 0 50px 0;
}
.benefits .slideBox .imgBox{
width: 60%;
margin: 0 auto;
padding-left: 3%;
}
.benefits .slideBox .detailBox{
margin-top: 3.84615384615385vw;
padding-left: 8%;
}
.slideBox .detailBox .txtBox{
padding-top: 2vw;
}
.benefits .innerBox .ticket.spBox{
padding: 5vw 0 8vw 0;
}
.benefits .innerBox .txtBox img{
width: 90%;
margin: 0 auto;
}
.benefits .ancArea .box{
width: 71%;
margin: 0 auto;
}
.benefits .ancArea .linkBox{
width: 85%;
max-width: 85%;
display: block;
margin-top: 2.82051282051282vw;
}
.benefits .ancArea .linkBox .box{
  width: 100%;
}
.benefits .ancArea .linkBox .txtArea{
font-size:4.61538461538462vw;
letter-spacing: 0;
}
.benefits .ancArea .linkBox .txtArea .fn{
font-size: 7.69230769230769vw;
display: inline-block;
padding-top: 3vw;
}
.benefits .ancArea .linkBox .btnArea .btnBox{
width:95%;
}
.benefits .ancArea .linkBox .btnArea .btnBox.btn01{
margin-bottom: 3vw;
}
.benefits .ancArea .linkBox .btnArea .btnBox a {
display: block;
width:100%;
height:auto;
border-radius: 11vw;
padding-bottom: 0;
border: 2.4px solid #0090D5;
}
.benefits .ancArea .linkBox .btnArea .btnBox a::after {
top: 37%;
bottom: auto;
left: auto;
right: 6%;
width: 3vw;
height: 3vw;
}
.benefits .ancArea .linkBox .area01{
border-radius:3vw 3vw 0 0;
padding:8.46153846153846vw 0 4.1025641025641vw 0;
margin-top: 1px;
}
.benefits .ancArea .linkBox .iconBox{
width: 16%;
top: 50%;
transform: translate(-50%, -50%);
}
.benefits .ancArea .linkBox .area01 .btnArea{
display: block;
max-width: 100%;
margin: 5vw auto 0 auto;
}
.benefits .ancArea .linkBox .area01 .btnArea .btn01  img{
width: 57%;
padding-top: 5%;
padding-bottom: 7%;
}
.benefits .ancArea .linkBox .area01 .btnArea .btn02  img{
width: 50%;
padding-top: 2%;
padding-bottom: 3%;
}
.benefits .ancArea .linkBox .area02{
border-radius: 0 0 3vw 3vw;
padding:9.48717948717949vw 0 7vw 0
}
.benefits .ancArea .linkBox .area02 .txtArea .txtBlock{
margin-top: 0;
}
.benefits .ancArea .linkBox .area02 .btnArea{
margin-top: 5.64102564102564vw;
}
.benefits .ancArea .linkBox .area02 .btnArea img {
width: 73%;
margin: 0 auto;
padding-top: 6%;
padding-bottom: 6%;
}
.benefits .ancArea .linkBox .area02 .fn {
font-size: 6.41025641025641vw;
padding-left: 5.64102564102564vw;
padding-top: 0;
margin-top:3.33333333333333vw;
}
.benefits .ancArea .linkBox .area02 .fnBox{
left: 50vw;
font-size: 5.12820512820513vw;
}
.benefits .slideBox .detailBox {
padding-left: 3%;
}
.benefits .slideBox .detailBox .txtBox{
padding-left: 2%;
letter-spacing: -0.03em;  
}

.bene_qr{
margin-top:10.3vw;
margin-bottom: 2.56410256410256vw;
}
.bene_qr .bene_ttl{
width: 80%;
margin:0 auto 5vw auto;
}
.benefits .bene_qr .slideBox .detailBox {
margin-top: 1.28205128205128vw;
margin-bottom: 6.41025641025641vw;
}
.benefits .bene_qr .slideBox .imgBox{
width: 58%;
}
.benefits .bene_qr .swiper-horizontal>.swiper-pagination-bullets, 
.benefits .bene_coupon .swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: 5.12820512820513vw;
}

.benefits .bene_qr .slideBox .swiper-button-next:after,
.benefits .bene_coupon .slideBox .swiper-button-next:after
{
background-image: url(/onelumine/renkeicp/images/arrow_black_r.png);
}
.benefits .bene_qr .slideBox .swiper-button-prev:after,
.benefits .bene_coupon .slideBox .swiper-button-prev:after{
background-image: url(/onelumine/renkeicp/images/arrow_black_l.png);
}


.bene_paper{
margin-top: 9.3vw;
margin-bottom: 8vw;
}
.bene_paper .bene_ttl{
width: 87%;
margin: 0 auto 6vw auto;
}
.benefits .bene_paper .slideBox .imgBox {
width: 63%;
margin: 0 auto;
padding-left: 3%;
}
.benefits .bene_paper .slideBox .slide03 .imgBox {
width: 80%;
padding:20vw 0 9vw 0;
}
.benefits .bene_paper .slideBox .detailBox {
margin-top: 0;
}
.benefits .bene_paper .swiper-wrapper{
padding-bottom: 9.5vw;
}
.bene_coupon{
margin-top: 9.3vw;
padding-bottom: 7vw;
}
.bene_coupon .bene_ttl{
width: 85%;
margin:0 auto 8vw auto;
}
.benefits .bene_coupon .slideBox .detailBox {
margin-top: 3.84615384615385vw;
}
.benefits .bene_coupon .swiper-wrapper{
padding-bottom: 15.5vw;
}
.bene_coupon .noteBox {
width: 84%;
font-size: 3vw;
margin-top: 6vw;
}
.borderArea{
height: 1vw;
}

/*----------other----------*/
.other{
padding-top: 8vw;
padding-bottom:15.3846153846154vw;
}
.other .ttlArea .ttlNum{
width: 7.69230769230769vw;
margin: 0 auto 1.53846153846154vw auto;
transform: translateX(calc(-50% + 5.12820512820513vw));
}
.other .ttlArea .ttl{
font-size: 8vw;
margin-bottom: 5.38461538461539vw;
line-height: 1.33;
}
.other .innerBox {
border-radius: 4vw;
padding:9vw 7vw 0.512820512820513vw 7vw;
}
.other .listArea .ttl{
font-size:4.6vw;
font-weight: bold;
margin-bottom: 1vw;
}
.other .listArea .listBox li{
margin-bottom: 1.2vw;
line-height: 1.65;
font-size: 3.6vw;
font-weight: bold;
}
.other .listArea .listBox{
margin-bottom: 8vw;
}
.other .outlink{
width: 2.8vw;
}
/*----------btnOne----------*/
.btnOne{
width: 100%;
min-width: auto;
padding:8.46153846153846vw 0 13vw 0;
}
.btnOne .innerWrap{
width: 90%;
}
/*-------------spec-------------*/
#spec{
padding:0 0 4.61538461538462vw;
}
#spec p{
padding: 3vw 0;
text-align: center;
background-color: #eeeeee;
font-size: 4vw;
font-weight: bold;
}
#spec p a{
text-decoration: none;
}

#spec dl{
max-width: 90vw;
margin: 4vw auto 0 auto;
line-height: 1.5;
padding: 5vw;
box-sizing: border-box;
font-size: 3vw;
border: 1px dotted #888888;
color: #888888;
}

/*-------------footer-------------*/
footer {
background: #000;
padding:10vw 0 5vw 0;
}
footer .logo{
width: 77%;
margin:0 auto;
text-align: center;
justify-content: space-between;;
}
footer .logo .box01{
width:38%;
}
footer .logo .box02{
width: 49%;
padding-left:0;
padding-top: 0;
}
footer .copy{
padding-top: 5vw;
}

/*-- END --*/
}
