@charset "UTF-8";
/* ------------------------------------------- */


:root {

    /* color */
    --color_black: #3C3C3C;
    --color_gray: #8D8D8D;
    --color_light-gray: #CBCBCB;
    --color_s-light-gray: #E6E6E6;
    --color_u-light-gray: #EFEFEF;
    --color_rg-blue: #28C8E4;
    --color_pink: #FF468D;
    
    --color_red: #E14861;
    --color_green: #78A517;
    --color_blue: #0085CC;

    /* グラフ用 */
    --color_per10: #28C8E4;
    --color_per20: #3DB0E1;
    --color_per30: #5199D6;
    --color_per40: #6A7FBA;
    --color_per50: #8963A1;
    --color_per60: #A74984;
    --color_per70: #C23763;
    --color_per80: #D82F44;
    --color_per90: #E23334;
    --color_per100: #E83828;
    
    --color_gold: #BFAD54;


}


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

.width_full{ width: 100%; }
.width_contents_pd16{ padding: 16px; }
.width_contents_pd32{ padding-left: 32px; padding-right: 32px; 
}
a{ opacity: 1; transition: opacity 0.5s; }
.a_underline { text-decoration: underline; }

/* テキスト両端揃え */
.textAlign--justify{ text-align: justify; text-justify: inter-ideograph; }

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

.after_arrow-right,
.text_before_arrow-right,
.text_after_arrow-right{ position: relative; }

.text_before_arrow-right{ padding-left: 15px; }
.text_after_arrow-right{ padding-right: 15px; }

.after_arrow-right::after,
.text_before_arrow-right::before,
.text_after_arrow-right::after{
    display: block;
    position: absolute!important;
    content: "";
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    top:50%;
    transform: translateY(-50%);
    width: 9px;
    height: 11px;
    mask-image:url('/asset/img/common/icon_arrow-right_9x11_3c3c3c.svgz');
    background-color: var(--color_rg-blue)!important;
}

.after_arrow-right::after{ right:13px; }
.text_before_arrow-right::before{ left:0px; }
.text_after_arrow-right::after{ width: 9px!important; right:0px; }

.icon__maskImage::before,
.icon__maskImage::after{
    display: block;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
}


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


@media (hover: hover) {
	a:hover{
		opacity: 0.5;
		transition: opacity 0.5s;
	}
}
@media (hover: none) {
	a:active{
		opacity: 0.5;
		transition: opacity 0.5s;
	}
}
@media print, screen and (min-width:481px) {
	.resp_min481_none {
		display: none;
	}
}
@media screen and (max-width:480px) {
	.resp_max480_none {
	display: none;
	}
}


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


/* loading
---------------------------------------------- */

.loading{
width: 100%;
height: 100dvh;
background-color: var(--color_rg-blue);
display: flex;
align-content: center;
justify-content: center;
position:fixed;
top:0;
left: 0;
z-index: 10;
}
.loading__logoMark{
display: block;
width: clamp(130px, 40%, 200px);
height: auto;
aspect-ratio:200 / 153;
}

.loading.hidden{
animation-name: loading-hidden;
animation-delay: 1s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}

@keyframes loading-hidden {
  0%{ opacity:1; display: flex; }
  98%{ opacity:0; display: flex; }
  99%{ opacity:0; display: none; height: 100dvh; width: 100%;}
  100%{ opacity:0; display: none; height: 0; width: 0; }
}


/* ----------------------------------------------
/ loading */

/* Browse Notice
---------------------------------------------- */
/*
.browseNotice{
padding: 10px;
line-height: 1.5;
}
.browseNotice a{
text-decoration: underline;
}
.browseNotice span{
font-weight: bold;
color:var(--color_red);
}

body.spotArchive .browseNotice,
body.info.archive .browseNotice,
body.info.single .browseNotice,
body.apply .browseNotice,
body.inquiry-thanks .browseNotice,
body.map .browseNotice,
body.precaution .browseNotice,
body.prize .browseNotice,
body.rule .browseNotice,
body.terms .browseNotice,
body.spot-single .browseNotice{
margin-top: 58px;
}
body.spotArchive .browseNotice + .contents,
body.info.archive .browseNotice + .contents,
body.info.single .browseNotice + .contents,
body.apply .browseNotice + .contents,
body.inquiry-thanks .browseNotice + .contents,
body.map .browseNotice + .contents,
body.precaution .browseNotice + .contents,
body.prize .browseNotice + .contents,
body.rule .browseNotice + .contents,
body.terms .browseNotice + .contents,
body.spot-single .browseNotice + .contents{
padding-top: 6px!important;
}
body.map .browseNotice + .contents #map{
    height: calc(100dvh - 190px);
    margin-top: 58px;
}
*/
/* ----------------------------------------------
/ Browse Notice */

/* location Check
---------------------------------------------- */

.locationCheck{
display: flex;
justify-content: center;
height: 68px;
margin-top: -15px;
margin-bottom: 10px;
}
.locationCheck__inner{
display: flex;
justify-content: flex-start;
width: object-fit;
height: auto;
position: relative;
align-items: center;
gap:20px;
opacity: 0.6;
font-size: 1.6rem;
font-weight: bold;
}
.locationScan,
.locationScan__under, .locationScan__top{
width: 34px;
aspect-ratio: 68/100;
}
.locationScan{
position: relative;
display: flex;
justify-content: center;
}
.locationScan span{
content: "";
display: block;
mask-size:cover;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--color_gray);
}
.locationScan__under{
    mask-image:url("/asset/img/common/rg-mark_under_68x100_fff.svgz");
}
.locationScan__top{
    position: absolute;
    mask-image:url("/asset/img/common/rg-mark_top_68x100_fff.svgz");
    transform: translate3d(0,0,0);
    animation: locationScan__top 1.2s infinite cubic-bezier(.32, -0.03, .27, 1.02);
}
@keyframes locationScan__top{
    0%{ top: 0; }
    50%{ top: -7px; }
    90%{ top: 0; }
    100%{ top: 0; }
}
.locationScan__ring{
    position: absolute;
    mask-image:url("/asset/img/common/ovalLine_100x29_3c3c3c.svgz");
    /*background-color: var(--color_pink)!important;*/
    width: 100px;
    aspect-ratio: 100/29;
    opacity: 0;
    bottom: -22%;
    left: auto;
    scale:18%;
    animation: locationScan_ring 1.2s infinite 0.75s;
}

@keyframes locationScan_ring{
    0%{ transform: translate3d(0, 0px, 0) scale(100%); filter: blur(0px); opacity: 0;}
    30%{opacity: 1;}
    50%{opacity: 0.7; filter: blur(0px);}
    100%{ transform: translate3d(0, 4px, 0) scale(250%); filter: blur(3px); opacity: 0;}
}

.locationCheck.hidden{
height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
transition: all 0.3s ease-out;
}

    
/* ----------------------------------------------
/ location Check */


/* RallyGate Mark wait action
---------------------------------------------- */

.waitMark{
width: 65px;
position: relative;
flex-wrap:wrap;
margin: 0 auto 10px;
}
.waitMark img:first-child{
display: block;
position: absolute;
top:0;
left: 0;
}
.waitMark_top{
    transform: translate3d(0,0,0);
    animation: rg-mark 1.2s infinite cubic-bezier(.32, -0.03, .27, 1.02);
}
@keyframes rg-mark{
    0%{ top: 0; }
    50%{ top: -20px; }
    90%{ top: 0; }
    100%{ top: 0; }
}

/* ----------------------------------------------
/ RallyGate Mark wait action */


/* Contents Header Area
---------------------------------------------- */

.header {
width: 100%;
height: 58px;
position:fixed;
top: 0;
left:0;
overflow: visible;
z-index: 15;
}

.header__inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 58px;
background-color: #fff;
z-index: 17;
padding: 13px;
border-top: var(--color_rg-blue) solid 5px;
border-bottom: var(--color_gray) dotted 1px;
}

/* --- */
.header__title {
position: relative;
display: flex;
align-items: center;
font-weight: bold;
height: 26px;
font-size: 1.8rem;
padding-left: 34px;
}
.header__title::before{
display: block;
position: absolute;
left: 0;
top:50%;
transform: translateY(-50%);
width: 30px;
aspect-ratio: 1 / 1;
content: "";
background-color: var(--color_rg-blue);
margin-right: 5px;
}

.header__title.noIcon{ padding-left: 0; }
.header__title.noIcon::before{ content:none; }

.header__link{
position: relative;
display: flex;
align-items: center;
gap: 5px;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.header__link::after,
.header__link::before{
mask-size:cover;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--color_gray);
position: relative;
width: 20px;
aspect-ratio:1/1;
}


/* --- */
.header__button {
display: flex;
align-items: center;
gap: 5px;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.header__button:hover{
opacity: 1;
}
.header__buttonIcon {
width: 20px;
}

/* ----------------------------------------------
/ Contents Header Area */


p { text-align: justify; }

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

.bottom_border{
border-bottom: var(--color_gray) dotted 1px;
}

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

.contents{
min-height: calc(100dvh - 190px);
padding: 58px 0 32px;
}
.contents__inner{ padding: 26px 16px; }

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


/* footer Area */
/*#footer{}*/
.footer{
/* position: absolute;
bottom: 0;
left: 0;*/
width: 100%;
padding: 32px 16px 130px 16px;
background-color: rgba(244,244,244,1.00);
}
.footer__inner {
text-align: center;
}
.footer__logo {
width: 175px;
margin: 0 auto 5px auto;
}
.footer__logo img {
display: block;
width: 100%;
}
.footer__copyright {
font-size: 1.2rem;
}


/* Spot List Card List
---------------------------------------------- */

/* .spotListCard__list{} */

.spotListCard__item {
position: relative;
border-width: 1px;
border-style: solid;
border-color: var(--color_gray);
border-radius: 5px;
overflow: hidden;
flex: 0 0 auto;
}

.spotListCard__item[data-lucky='lucky']{
border-color: var(--color_gold);
}
/*
.spotListCard__item[data-area="A"] { border-color: var(--color_red); }
.spotListCard__item[data-area="B"] { border-color: var(--color_green); }
.spotListCard__item[data-area="C"] { border-color: var(--color_blue); }
*/
.spotListCard__item[data-judge_mode="locaqr"] .spotListCard__itemLink::after{
display: block;
position: absolute;
content:url(/asset/img/common/qr_code_2_30x30_3C3C3C.svgz);
height: 30px;
width: 30px;
background-color: #fff;
top:10px;
right:10px;
border-radius: 3px;
}

.spotArchive .spotListCard__item[data-judge_mode="locaqr"] .spotListCard__itemLink::after{
height: 24px;
width: 24px;
}



.spotListCard__itemLink{
width: 100%;
}
.spotListCard__flag {
width: 41px;
height: 48px;
position: absolute;
top: 0;
left: 10px;
z-index: 1;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
line-height: 1;
padding-top: 4px;
mask-image: url(/asset/img/common/flag_base_40x45.svgz);
mask-size: cover;
mask-position: center;
}

.spotListCard__flagPoint{
display: block;
font-size: 1rem;
line-height: 1;
margin-top: 3px;
}

.spotListCard__item[data-area="A"] .spotListCard__flag{ background-color: var(--color_red); }
.spotListCard__item[data-area="B"] .spotListCard__flag{ background-color: var(--color_green); }
.spotListCard__item[data-area="C"] .spotListCard__flag{ background-color: var(--color_blue); }

.spotListCard__item .spotListCard__flag.backgroundLuckyColor{
background-color: var(--color_gold);
left: 56px;
}

.spotListCard__image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.spotListCard__name {
font-size: 1.4rem;
font-weight: bold;
padding: 10px;
line-height: 1.5;
}

.spotListCard__item[data-earned="earned"] .spotListCard__image::after {
display: block;
position: absolute;
right:5px;
bottom: 5px;
content:"";
background-image: url("../img/common/spot_earned_mark_200x200_fff.svgz");
background-size: cover;
width: 35%;
aspect-ratio:1/1;
opacity: 0.8;
}

.spotListCard__name {
font-size: 1.4rem;
font-weight: bold;
padding: 10px;
line-height: 1.5;
}

/* Lucky Spot --------- */
.spotListCard__item[data-lucky='lucky'] .spotListCard__image::before{
position: absolute;
bottom:-5px;
left:-5px;
display: block;
width: 30%;
aspect-ratio: 120/151;
content:"";
background-image: url("../img/common/exokun_120x152_color.png");
background-repeat: no-repeat;
background-size: cover;
transform: rotate(25deg);
z-index: 1;
}
.spotListCard__item[data-lucky='lucky']{
outline: 3px solid var(--color_gold);
}

/* ----------------------------------------------
/ Spot List Card */


/* Swiper
---------------------------------------------- */
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: var(--color_s-light-gray);
    opacity: 0.5;
    transition: opacity 0.3s;
    pointer-events: auto; /* 念のため */
}
.swiper .swiper-button-next:after, .swiper .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 18px;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    position: absolute;
    color: rgba(0,0,0,0.8);
}

.swiper .swiper-pagination-bullet {
    background: var(--color_gray);
    opacity: 0.7;
}
.swiper .swiper-pagination-bullet-active {
    background: var(--color_rg-blue);
}

.swiper .swiper-button-next.swiper-button-disabled,
.swiper .swiper-button-prev.swiper-button-disabled {
    opacity: 0; /* 非表示にしたい場合 */
    pointer-events: none; /* クリックできなくする */
}
/* ----------------------------------------------
/ Swiper */


/* applyButton --------------- */

.applyButton{
margin-bottom: 32px;
}
.applyButton__link{
display: block;
width: 100%;
font-size: 2.0rem;
font-weight: bold;
line-height: 1;
color: #fff;
padding: 14px 0 15px;
text-align: center;
border: none;
border-radius: 50px;
margin-bottom: 10px;
}
.applyButton__BeforeText{
display: block;
font-size: 1.7rem;
line-height: 1;
margin-top: 25px;
margin-bottom: 15px;
font-weight: bold;
text-align: center;
color: var(--color_rg-blue);
}
.applyButton__link + p{
line-height: 1.5;
}

.applyButton__link{
    background-color: var(--color_light-gray);
    opacity: 0.5;
    pointer-events: none;
}
body[data-applysts="true"][data-applied="false"] .applyButton__link{
    background-color: var(--color_rg-blue);
    opacity: 1;
    pointer-events: auto;
}

/* / applyButton --------------- */


/* pleasePortraitView ------------- */

.pleasePortraitView{
    /* display: block; */
    width: 100%;
    height: 100dvh;
    position: fixed;
    top:0;
    left:0;
    background-color: var(--color_u-light-gray);
    font-size: 2rem;
    font-weight: bold;
    color: var(--color_gray);
    z-index: 100;
    pointer-events: all;
}
.pleasePortraitView__inner{
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pleasePortraitView__inner::before{
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    mask-image: url(/asset/img/common/icon_mobileRotate_30x30_3c3c3c.svgz);
    mask-size: cover;
    mask-position: center;
    background-color: var(--color_gray);
    margin-right: 20px;
}
@media (orientation: landscape) {
  /* 横長（ランドスケープ）状態のときのスタイル */
  .pleasePortraitView{
      display: fixed;
  }
}

@media (orientation: portrait) {
  /* 縦長（ポートレート）状態のときのスタイル */
  .pleasePortraitView{
      display: none;
  }
}