@charset "UTF-8";
:root {
--color-primary: #B50080;
--color-dark: #1A1A1A;
--color-gray: #F3F4F8;
--color-gray2: #B2B2B2;
--color-rightgray: #666666;
--color-rightgray2: #888888;
--color-rightgray3: #E6E9F1;
--color-blue: #007AAB;
--color-rightblue: #0099CE;
--color-skyblue: #E7F5F9;
--color-skyblue2: #007AAB;
--color-red: #D70606;
}
/*
フォントサイズ
$font-size: フォントサイズ(必須)
$line-height: ラインハイト or 空
$letter-spacing: レタースペーシング or 空
*/
/*
*/
/*
Hタグ
$type: 2(H2サイズ)
*/
/*
共通ボタン 大
default: skyblue2
*/
/*
共通ボタン 小
default: skyblue2
*/
/*
通常
SP 左右のマージン20px
PC 幅900px
*/
/*
角丸border付きレイアウト
*/
/*
グレーの文字の補足系
*/
.p-app__w1200 {
margin-left: 20px;
margin-right: 20px;
background: var(--color-gray);
}
@media screen and (min-width: 1240px) {
.p-app__w1200 {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 768px) {
.p-app__w1200 {
margin-left: 0;
margin-right: 0;
}
}
.p-app__section {
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
}
@media screen and (min-width: 940px) {
.p-app__section {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 769px) {
.p-app__section {
margin-top: 80px;
}
}
.p-app__section .c-font__h4 {
font-size: 16px;
}
@media screen and (min-width: 769px) {
.p-app__section .c-font__h4 {
font-size: 17px;
}
}
.p-app__h2 {
font-weight: 700;
margin-bottom: 24px;
font-size: 2.2rem;
}
@media screen and (min-width: 769px) {
.p-app__h2 {
font-size: 2.6rem;
}
}
.p-app__h3 {
font-weight: 700;
font-size: 1.6rem;
}
@media screen and (min-width: 769px) {
.p-app__h3 {
font-size: 1.7rem;
}
}
.p-app__2column p {
font-size: 14px;
}
@media screen and (min-width: 769px) {
.p-app__2column p {
font-size: 16px;
}
}
.p-app__functions {
display: flex;
flex-direction: row;
gap: 0px 32px;
margin-top: 12px;
}
@media screen and (min-width: 769px) {
.p-app__functions {
gap: 0px 40px;
margin-top: 24px;
}
}
.p-app__box {
padding: 20px;
border-radius: 10px;
border: 1px solid #E6E9F1;
}
@media screen and (min-width: 769px) {
.p-app__box {
padding: 32px;
}
}
.p-app__box:not(:first-of-type) {
margin-top: 12px;
}
.p-app__kv {
margin-bottom: 32px;
position: relative;
background: #F4F4F4;
}
.p-app__functionImg {
width: 37%;
}
@media screen and (min-width: 769px) {
.p-app__functionImg {
flex: 1;
}
}
.p-app__functionImg img {
border-radius: 10px;
}
.p-app__functionImg a {
background-image: none !important;
}
.p-app__functionText {
flex: 1;
letter-spacing: 0.025em;
font-size: 1.4rem;
line-height: 1.5;
}
@media screen and (min-width: 769px) {
.p-app__functionText {
font-size: 1.6rem;
line-height: 1.5;
}
}
.p-app__btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 40px 20px 16px;
border-radius: 5px;
text-decoration: none;
color: var(--color-skyblue2);
border: 1px solid var(--color-skyblue2);
background-color: #fff;
position: relative;
overflow: hidden;
padding: 14px 40px 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 40px 20px 16px;
border-radius: 5px;
text-decoration: none;
color: var(--color-skyblue2);
border: 1px solid var(--color-skyblue2);
background-color: #fff;
position: relative;
overflow: hidden;
background-color: var(--color-skyblue);
border-color: var(--color-skyblue);
font-size: 1.2rem;
line-height: 1.5;
color: var(--color-skyblue2);
margin-top: 8px;
padding: 2px 2px 2px 14px;
justify-content: center;
}
.p-app__btn::before {
content: "";
width: 0px;
height: 100%;
position: absolute;
top: 0px;
right: -30px;
border-radius: 30px;
transition: width 0.4s ease;
isolation: isolate;
background-color: var(--color-blue);
}
.p-app__btn span {
position: relative;
font-weight: 500;
isolation: isolate;
transition: color 0.4s ease;
}
.p-app__btn::after {
content: "";
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 50%;
margin-top: -12px;
right: 16px;
isolation: isolate;
transition: background-image 0.4s ease;
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-app__btn[target=_blank]::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-app__btn[href*=".pdf"][target=_blank]::after, .p-app__btn[href*=".pdf"]:hover::after, .p-app__btn[href*=".pdf"][target=_blank]:hover::after, .p-app__btn[href*=".pdf"]::after {
background: url("/assets_2025/img/icon/pdf.svg") center center/contain no-repeat;
position: static;
margin: 0px auto 0px 8px;
}
.p-app__btn.--nobgcolor {
background: inherit;
}
@media screen and (min-width: 769px) {
.p-app__btn:hover span {
color: #fff;
}
.p-app__btn:hover::before {
left: -30px;
right: unset;
width: calc(100% + 60px);
}
.p-app__btn:hover::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
transition-delay: 0.1s;
}
.p-app__btn:hover[target=_blank]::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
}
body.--black .p-app__btn:not(.c-modal__ticket *) {
background: none;
}
.p-app__btn span {
font-weight: 500;
font-size: 1.4rem;
line-height: 1.5;
}
.p-app__btn::before {
content: "";
width: 0px;
height: 100%;
position: absolute;
top: 0px;
right: -30px;
border-radius: 30px;
transition: width 0.4s ease;
isolation: isolate;
background-color: var(--color-blue);
}
.p-app__btn span {
position: relative;
font-weight: 500;
isolation: isolate;
transition: color 0.4s ease;
}
.p-app__btn::after {
content: "";
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 50%;
margin-top: -12px;
right: 16px;
isolation: isolate;
transition: background-image 0.4s ease;
}
.p-app__btn[href*=".pdf"][target=_blank]::after, .p-app__btn[href*=".pdf"]:hover::after, .p-app__btn[href*=".pdf"][target=_blank]:hover::after, .p-app__btn[href*=".pdf"]::after {
background: url("/assets_2025/img/icon/pdf.svg") center center/contain no-repeat;
position: static;
margin: 0px auto 0px 8px;
}
.p-app__btn.--nobgcolor {
background: inherit;
}
@media screen and (min-width: 769px) {
.p-app__btn:hover span {
color: #fff;
}
.p-app__btn:hover::before {
left: -30px;
right: unset;
width: calc(100% + 60px);
}
.p-app__btn:hover::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
transition-delay: 0.1s;
}
.p-app__btn:hover[target=_blank]::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
}
.p-app__btn span {
color: var(--color-blue);
}
.p-app__btn::before {
background: #fff;
}
.p-app__btn::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-app__btn[target=_blank]::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
@media screen and (min-width: 769px) {
.p-app__btn:hover span {
color: var(--color-blue);
}
.p-app__btn:hover::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-app__btn:hover[target=_blank]::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
}
body.--black .p-app__btn:not(.c-modal__ticket *) {
background: none;
}
@media screen and (min-width: 769px) {
.p-app__btn {
display: none;
}
}
.p-app__btn::after {
content: "";
width: 12px;
height: 12px;
display: block;
position: absolute;
top: 50%;
left: calc(50% - 2.5em);
margin-top: -5px;
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-app__dl {
padding: 20px;
border-radius: 10px;
border: 1px solid #E6E9F1;
margin-left: 20px;
margin-right: 20px;
margin-left: 0;
margin-right: 0;
background: var(--color-gray);
text-align: center;
border: none;
}
@media screen and (min-width: 769px) {
.p-app__dl {
padding: 32px;
}
}
@media screen and (min-width: 600px) {
.p-app__dl {
width: 100%;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
}
.p-app__dlApp {
margin-left: 20px;
margin-right: 20px;
margin-top: 16px;
margin-left: 0;
margin-right: 0;
display: flex;
gap: 0px 24px;
flex-direction: row;
}
@media screen and (min-width: 352px) {
.p-app__dlApp {
width: 100%;
max-width: 312px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 769px) {
.p-app__dlApp {
gap: 0px 40px;
margin-top: 24px;
}
}
.p-app__dlApp img {
height: auto;
}
.p-app__dlApp p {
font-weight: bold;
margin-top: 8px;
font-size: 1.4rem;
line-height: 1.5;
}
@media screen and (min-width: 769px) {
.p-app__dlApp p {
margin-top: 12px;
font-size: 1.6rem;
line-height: 1.5;
}
}
.p-app__note {
color: #666;
padding-left: 1em;
text-indent: -1em;
font-size: 1.2rem;
line-height: 1.5;
font-size: 1.2rem;
line-height: 1.5;
color: var(--color-red);
}
@media screen and (min-width: 769px) {
.p-app__note {
font-size: 1.3rem;
line-height: 1.4615384615;
}
}
.p-app__main .p-payment__section {
max-width: 900px;
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
}
@media screen and (min-width: 769px) {
.p-app__main .p-payment__section {
margin-top: 64px;
margin-left: auto;
margin-right: auto;
}
}
.p-app__main .p-payment__other {
margin-top: 24px;
}
@media screen and (min-width: 769px) {
.p-app__main .p-payment__other {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px 30px;
margin-top: 32px;
}
}
.p-app__main .p-payment__other a {
font-size: 1.4rem;
line-height: 1.5;
padding: 20px 0px 14px;
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
background-image: none !important;
color: var(--color-dark);
position: relative;
}
@media screen and (min-width: 769px) {
.p-app__main .p-payment__other a {
padding: 0px 4px 14px 2px;
}
}
.p-app__main .p-payment__other a::before {
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0px;
bottom: 0px;
background-color: var(--color-gray2);
background-image: linear-gradient(90deg, var(--color-dark), var(--color-dark));
background-repeat: no-repeat;
background-position: right bottom;
background-size: 0% 2px;
transition: background-size 0.4s ease;
}
.p-app__main .p-payment__other a:hover::before {
background-size: 100% 2px;
background-position: left bottom;
}
.p-app__main .p-payment__other a::after {
content: "";
width: 24px;
height: 24px;
display: block;
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-app__main .p-payment__btnWrapper {
width: 335px;
margin: 40px auto 0;
}
@media screen and (min-width: 769px) {
.p-app__main .p-payment__btnWrapper {
width: 442px;
margin: 48px auto 0;
}
}
.p-app__main .p-payment__btnWrapper a {
color: var(--color-blue);
text-decoration: none;
}
.c-modal__body img {
display: block;
margin: 0 auto;
}
/*# sourceMappingURL=../../sourcemaps/assets_2025/css/app.css.map */