@charset "utf-8";
/***************
--- base ---
****************/
html {
cursor: default;
line-height: 1.5;
-moz-tab-size: 4;
tab-size: 4;
-webkit-tap-highlight-color: transparent;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
word-break: break-word;
font-size: 16px;
}
body {
margin: 0;
padding: 0;
/* font-size: 16px;*/
line-height: 1.5;
font-weight: 400;
color: #5a5b5b;
background-color: #fff;
}
header, main, section, footer {
display: block;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 768px) {
html {
font-size: 3.73vw;
}
}
.sans-serif {
font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6,
p,
dl, dt, dd {
margin: 0;
padding: 0;
font-weight: inherit;
font-size: inherit;
}
small {
font-size: 80%;
}
em {
font-style: inherit;
}
*, :after, :before {
box-sizing: border-box;
}
:after, :before {
text-decoration: inherit;
vertical-align: inherit;
}
a {
color: #a20073;
text-decoration: none;
transition: opacity 0.2s ease;
}
@media only screen and (min-width: 769px) {
a:hover,
a:focus {
opacity: 0.8;
}
}
@media only screen and (max-width: 319px) {
html {
font-size: 4.375vw;
}
}
ol, ul {
padding: 0;
margin: 0;
list-style: none;
}
hr {
height: 0;
overflow: visible;
}
* + p {
margin-top: 1em;
}
img {
max-width: 100%;
height: auto;
border-style: none;
vertical-align: bottom;
user-drag: none;
-webkit-user-drag: none;
flex-shrink: 0;
}
iframe, img {
border-style: none;
}
table {
border-collapse: collapse;
}
input {
overflow: visible;
}
button {
appearance: none;
padding: 0;
background: none;
border: none;
letter-spacing: inherit;
line-height: inherit;
}
/***************
.js-headercontainer
（ヘッダー読込までのズレ軽減）
****************/
.js-headercontainer:not(:has(*)){
min-height: 76px;
}
@media only screen and (max-width: 768px) {
.js-headercontainer:not(:has(*)){
min-height: 51px;
}
}
/***************
common
****************/
.inline-block {
display: inline-block;
}
.mh-auto {
margin-right: auto;
margin-left: auto;
}
.ta-left {
text-align: left !important;
}
.ta-center {
text-align: center !important;
}
.ta-right {
text-align: right !important;
}
.block-center {
width: fit-content;
margin-left : auto;
margin-right: auto;
}
.valign-top {
vertical-align: middle;
}
.valign-middle {
vertical-align: middle;
}
.valign-bottom {
vertical-align: middle;
}
.valign-baseline {
vertical-align: baseline;
}
.fw-bold {
font-weight: bold;
}
.fw-normal {
font-weight: normal !important;
}
.f-num {
font-family: sans-serif;
}
.text-link {
display: inline-block;
color: #053371;
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-color: currentColor;
}
.icon-blank {
display: inline-block;
vertical-align: top;
width: 0.7em;
height: auto;
margin: 0.2em 0 0 0.1em;
}
.after-sparkle::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background: no-repeat url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/font-sparkle.png) center/contain;
vertical-align: baseline;
margin-left: 0.1em;
}
@media only screen and (min-width: 769px) {
.pc-none {
display: none !important;
}
}
@media only screen and (max-width: 768px) {
.sp-none {
display: none !important;
}
}
/***************
margin
padding
****************/
.m0 { margin : 0 !important; }
.p0 { padding: 0 !important; }
.mt0 { margin-top : 0 !important; }
.pt0 { padding-top: 0 !important; }
.mb0 { margin-bottom : 0 !important; }
.pb0 { padding-bottom: 0 !important; }
.ml0 { margin-left : 0 !important; }
.pl0 { padding-left: 0 !important; }
.mr0 { margin-right : 0 !important; }
.pr0 { padding-right: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }
.mt50 { margin-top: 50px !important; }
.mt55 { margin-top: 55px !important; }
.mt60 { margin-top: 60px !important; }
.mt65 { margin-top: 65px !important; }
.mt70 { margin-top: 70px !important; }
.mt75 { margin-top: 75px !important; }
.mt80 { margin-top: 80px !important; }
.mt85 { margin-top: 85px !important; }
.mt90 { margin-top: 90px !important; }
.mt95 { margin-top: 95px !important; }
.mt100 { margin-top: 100px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb45 { margin-bottom: 45px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb55 { margin-bottom: 55px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb65 { margin-bottom: 65px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb75 { margin-bottom: 75px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb85 { margin-bottom: 85px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb95 { margin-bottom: 95px !important; }
.mb100 { margin-bottom: 100px !important; }
.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }
.pt45 { padding-top: 45px !important; }
.pt50 { padding-top: 50px !important; }
.pt55 { padding-top: 55px !important; }
.pt60 { padding-top: 60px !important; }
.pt65 { padding-top: 65px !important; }
.pt70 { padding-top: 70px !important; }
.pt75 { padding-top: 75px !important; }
.pt80 { padding-top: 80px !important; }
.pt85 { padding-top: 85px !important; }
.pt90 { padding-top: 90px !important; }
.pt95 { padding-top: 95px !important; }
.pt100 { padding-top: 100px !important; }
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb45 { padding-bottom: 45px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb55 { padding-bottom: 55px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb65 { padding-bottom: 65px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb75 { padding-bottom: 75px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb85 { padding-bottom: 85px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb95 { padding-bottom: 95px !important; }
.pb100 { padding-bottom: 100px !important; }
@media only screen and (max-width: 1000px) {
.mt5 { margin-top: 0.5vw !important; }
.mt10 { margin-top: 1.0vw !important; }
.mt15 { margin-top: 1.5vw !important; }
.mt20 { margin-top: 2.0vw !important; }
.mt25 { margin-top: 2.5vw !important; }
.mt30 { margin-top: 3.0vw !important; }
.mt35 { margin-top: 3.5vw !important; }
.mt40 { margin-top: 4.0vw !important; }
.mt45 { margin-top: 4.5vw !important; }
.mt50 { margin-top: 5.0vw !important; }
.mt55 { margin-top: 5.5vw !important; }
.mt60 { margin-top: 6.0vw !important; }
.mt65 { margin-top: 6.5vw !important; }
.mt70 { margin-top: 7.0vw !important; }
.mt75 { margin-top: 7.5vw !important; }
.mt80 { margin-top: 8.0vw !important; }
.mt85 { margin-top: 8.5vw !important; }
.mt90 { margin-top: 9.0vw !important; }
.mt95 { margin-top: 9.5vw !important; }
.mt100 { margin-top: 10.0vw !important; }
.mb5 { margin-bottom: 0.5vw !important; }
.mb10 { margin-bottom: 1.0vw !important; }
.mb15 { margin-bottom: 1.5vw !important; }
.mb20 { margin-bottom: 2.0vw !important; }
.mb25 { margin-bottom: 2.5vw !important; }
.mb30 { margin-bottom: 3.0vw !important; }
.mb35 { margin-bottom: 3.5vw !important; }
.mb40 { margin-bottom: 4.0vw !important; }
.mb45 { margin-bottom: 4.5vw !important; }
.mb50 { margin-bottom: 5.0vw !important; }
.mb55 { margin-bottom: 5.5vw !important; }
.mb60 { margin-bottom: 6.0vw !important; }
.mb65 { margin-bottom: 6.5vw !important; }
.mb70 { margin-bottom: 7.0vw !important; }
.mb75 { margin-bottom: 7.5vw !important; }
.mb80 { margin-bottom: 8.0vw !important; }
.mb85 { margin-bottom: 8.5vw !important; }
.mb90 { margin-bottom: 9.0vw !important; }
.mb95 { margin-bottom: 9.5vw !important; }
.mb100 { margin-bottom: 10.0vw !important; }
.pt5 { padding-top: 0.5vw !important; }
.pt10 { padding-top: 1.0vw !important; }
.pt15 { padding-top: 1.5vw !important; }
.pt20 { padding-top: 2.0vw !important; }
.pt25 { padding-top: 2.5vw !important; }
.pt30 { padding-top: 3.0vw !important; }
.pt35 { padding-top: 3.5vw !important; }
.pt40 { padding-top: 4.0vw !important; }
.pt45 { padding-top: 4.5vw !important; }
.pt50 { padding-top: 5.0vw !important; }
.pt55 { padding-top: 5.5vw !important; }
.pt60 { padding-top: 6.0vw !important; }
.pt65 { padding-top: 6.5vw !important; }
.pt70 { padding-top: 7.0vw !important; }
.pt75 { padding-top: 7.5vw !important; }
.pt80 { padding-top: 8.0vw !important; }
.pt85 { padding-top: 8.5vw !important; }
.pt90 { padding-top: 9.0vw !important; }
.pt95 { padding-top: 9.5vw !important; }
.pt100 { padding-top: 10.0vw !important; }
.pb5 { padding-bottom: 0.5vw !important; }
.pb10 { padding-bottom: 1.0vw !important; }
.pb15 { padding-bottom: 1.5vw !important; }
.pb20 { padding-bottom: 2.0vw !important; }
.pb25 { padding-bottom: 2.5vw !important; }
.pb30 { padding-bottom: 3.0vw !important; }
.pb35 { padding-bottom: 3.5vw !important; }
.pb40 { padding-bottom: 4.0vw !important; }
.pb45 { padding-bottom: 4.5vw !important; }
.pb50 { padding-bottom: 5.0vw !important; }
.pb55 { padding-bottom: 5.5vw !important; }
.pb60 { padding-bottom: 6.0vw !important; }
.pb65 { padding-bottom: 6.5vw !important; }
.pb70 { padding-bottom: 7.0vw !important; }
.pb75 { padding-bottom: 7.5vw !important; }
.pb80 { padding-bottom: 8.0vw !important; }
.pb85 { padding-bottom: 8.5vw !important; }
.pb90 { padding-bottom: 9.0vw !important; }
.pb95 { padding-bottom: 9.5vw !important; }
.pb100 { padding-bottom: 10.0vw !important; }
}
/********************
.pv*
(padding vertical)
*********************/
.pv1rem { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.pv2rem { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.pv3rem { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pv4rem { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.pv5rem { padding-top: 5rem !important; padding-bottom: 5rem !important; }
/********************
.ph*
(padding horizontal)
*********************/
.ph1rem { padding-left: 1rem !important; padding-right: 1rem !important; }
.ph2rem { padding-left: 2rem !important; padding-right: 2rem !important; }
.ph3rem { padding-left: 3rem !important; padding-right: 3rem !important; }
.ph4rem { padding-left: 4rem !important; padding-right: 4rem !important; }
.ph5rem { padding-left: 5rem !important; padding-right: 5rem !important; }
/********************
.mv* : *rem
(margin vertical)
*********************/
.mv1rem { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.mv2rem { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.mv3rem { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.mv4rem { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.mv5rem { margin-top: 5rem !important; margin-bottom: 5rem !important; }
/********************
.mt* : *rem
(margin top)
*********************/
.mt05rem { margin-top: 0.5rem !important; }
.mt1rem { margin-top: 1rem !important; }
.mt2rem { margin-top: 2rem !important; }
.mt3rem { margin-top: 3rem !important; }
.mt4rem { margin-top: 4rem !important; }
.mt5rem { margin-top: 5rem !important; }
/********************
.mb* : *rem
(margin bottom)
*********************/
.mb1rem { margin-bottom: 1rem !important; }
.mb2rem { margin-bottom: 2rem !important; }
.mb3rem { margin-bottom: 3rem !important; }
.mb4rem { margin-bottom: 4rem !important; }
.mb5rem { margin-bottom: 5rem !important; }
/********************
.max-px-*
*********************/
.max-px-400 { max-width: 400px; }
.max-px-450 { max-width: 450px; }
.max-px-500 { max-width: 500px; }
.max-px-550 { max-width: 550px; }
.max-px-600 { max-width: 600px; }
.max-px-650 { max-width: 650px; }
.max-px-700 { max-width: 700px; }
.max-px-750 { max-width: 750px; }
.max-px-800 { max-width: 800px; }
.max-px-850 { max-width: 850px; }
.max-px-900 { max-width: 900px; }
.max-px-950 { max-width: 950px; }
/********************
.w-*
*********************/
.w-100 { width: 100% !important; }
.w-95 { width: 95% !important; }
.w-90 { width: 90% !important; }
.w-85 { width: 85% !important; }
.w-80 { width: 80% !important; }
.w-75 { width: 75% !important; }
.w-70 { width: 70% !important; }
.w-65 { width: 65% !important; }
.w-60 { width: 60% !important; }
.w-55 { width: 55% !important; }
.w-50 { width: 50% !important; }
.w-45 { width: 45% !important; }
.w-40 { width: 40% !important; }
/********************
.max-w*
*********************/
.max-w100 { max-width: 100% !important;}
.max-w95 { max-width: 95% !important;}
.max-w90 { max-width: 90% !important;}
.max-w85 { max-width: 85% !important;}
.max-w80 { max-width: 80% !important;}
.max-w75 { max-width: 75% !important;}
.max-w70 { max-width: 70% !important;}
.max-w65 { max-width: 65% !important;}
.max-w60 { max-width: 60% !important;}
.max-w55 { max-width: 55% !important;}
.max-w50 { max-width: 50% !important;}
.max-w45 { max-width: 45% !important;}
.max-w40 { max-width: 40% !important;}
.max-w35 { max-width: 35% !important;}
.max-w30 { max-width: 30% !important;}
/********************
.max-h*
（画像用）
*********************/
.max-h-0100rem { max-height: 1.00rem; width:auto; }
.max-h-0125rem { max-height: 1.25rem; width:auto; }
.max-h-0150rem { max-height: 1.50rem; width:auto; }
.max-h-0175rem { max-height: 1.75rem; width:auto; }
.max-h-0200rem { max-height: 2.00rem; width:auto; }
.max-h-0225rem { max-height: 2.25rem; width:auto; }
.max-h-0250rem { max-height: 2.50rem; width:auto; }
.max-h-0275rem { max-height: 2.75rem; width:auto; }
.max-h-0300rem { max-height: 3.00rem; width:auto; }
.max-h-0325rem { max-height: 3.25rem; width:auto; }
.max-h-0350rem { max-height: 3.50rem; width:auto; }
.max-h-0375rem { max-height: 3.75rem; width:auto; }
.max-h-0400rem { max-height: 4.00rem; width:auto; }
.max-h-0425rem { max-height: 4.25rem; width:auto; }
.max-h-0450rem { max-height: 4.50rem; width:auto; }
.max-h-0475rem { max-height: 4.75rem; width:auto; }
.max-h-0500rem { max-height: 5.00rem; width:auto; }
.max-h-0525rem { max-height: 5.25rem; width:auto; }
.max-h-0550rem { max-height: 5.50rem; width:auto; }
.max-h-0575rem { max-height: 5.75rem; width:auto; }
.max-h-0600rem { max-height: 6.00rem; width:auto; }
.max-h-0625rem { max-height: 6.25rem; width:auto; }
.max-h-0650rem { max-height: 6.50rem; width:auto; }
.max-h-0675rem { max-height: 6.75rem; width:auto; }
.max-h-0700rem { max-height: 7.00rem; width:auto; }
.max-h-0725rem { max-height: 7.25rem; width:auto; }
.max-h-0750rem { max-height: 7.50rem; width:auto; }
.max-h-0775rem { max-height: 7.75rem; width:auto; }
.max-h-0800rem { max-height: 8.00rem; width:auto; }
.max-h-0825rem { max-height: 8.25rem; width:auto; }
.max-h-0850rem { max-height: 8.50rem; width:auto; }
.max-h-0875rem { max-height: 8.75rem; width:auto; }
.max-h-0900rem { max-height: 9.00rem; width:auto; }
.max-h-0925rem { max-height: 9.25rem; width:auto; }
.max-h-0950rem { max-height: 9.50rem; width:auto; }
.max-h-0975rem { max-height: 9.75rem; width:auto; }
.max-h-1000rem { max-height: 10.00rem; width:auto; }
/********************
.fs-*p
*********************/
.fs-60p { font-size: 60%; }
.fs-70p { font-size: 70%; }
.fs-75p { font-size: 75%; }
.fs-80p { font-size: 80%; }
.fs-85p { font-size: 85%; }
.fs-90p { font-size: 90%; }
.fs-100p { font-size: 100%; }
.fs-105p { font-size: 105%; }
.fs-110p { font-size: 110%; }
.fs-115p { font-size: 115%; }
.fs-120p { font-size: 120%; }
.fs-125p { font-size: 125%; }
.fs-130p { font-size: 130%; }
.fs-135p { font-size: 135%; }
.fs-140p { font-size: 140%; }
.fs-145p { font-size: 145%; }
.fs-150p { font-size: 150%; }
.fs-155p { font-size: 155%; }
.fs-160p { font-size: 160%; }
.fs-165p { font-size: 165%; }
.fs-170p { font-size: 170%; }
.fs-175p { font-size: 175%; }
.fs-180p { font-size: 180%; }
.fs-185p { font-size: 185%; }
.fs-190p { font-size: 190%; }
.fs-195p { font-size: 195%; }
.fs-200p { font-size: 200%; }
/********************
.pc-*
*********************/
@media only screen and (min-width: 769px) {
.pc-mr05rem {
margin-right: 0.5rem;
}
}
/********************
.fs-*
*********************/
.fs-default-rem {
font-size: 1rem;
}
@media only screen and (max-width: 768px) {
.fs-default-rem {
font-size: 1.2rem;
}
}
/********************
─背景─
.bg-*
*********************/
.bg-fill-blue {
background-color: #dcf0f6;
}
/********************
─文字色─
.fc-*
*********************/
.fc-inherit {
color: inherit;
}
.fc-default {
color: #000;
}
.fc-red {
color: #ff0000;
}
.fc-blue {
color: #053371;
}
.fc-yellow {
color: #ffff9b;
}
.fc-pink {
color: #dc0695;
}
/********************
─字間─
.ls-*
*********************/
.ls-narrow {
letter-spacing: -0.025em !important;
}
.ls-0 {
letter-spacing: 0 !important;
}
.ls-0025em {
letter-spacing: 0.0025em;
}
.ls-005em {
letter-spacing: 0.05em;
}
.ls-01em {
letter-spacing: 0.1em;
}
/********************
─行間─
.lh-*
*********************/
.lh-10 { line-height: 1.0; }
.lh-11 { line-height: 1.1; }
.lh-12 { line-height: 1.2; }
.lh-13 { line-height: 1.3; }
.lh-14 { line-height: 1.4; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-17 { line-height: 1.7; }
.lh-18 { line-height: 1.8; }
/********************
.text-*
*********************/
.text-underline {
text-decoration: underline;
text-underline-offset: 1px;
}
.text-marker-1 {
background: linear-gradient(to top, #ffff9b 0.5em, transparent 0.5em, transparent 100%);
}
.text-marker-2 {
background: linear-gradient(to top, #caf5fc 0.5em, transparent 0.5em, transparent 100%);
}
.text-marker-3 {
background: linear-gradient(to top, #ffcdf7 0.5em, transparent 0.5em, transparent 100%);
}
/********************
─インライン画像─
.img-inline-*
*********************/
.img-inline {
display: inline-block;
width: auto;
height: auto;
max-width: 100%;
vertical-align: baseline;
}
.img-inline.-middle {
vertical-align: middle;
}
.img-inline.-bottom {
vertical-align: bottom;
}
.img-inline.-baseline {
vertical-align: baseline;
}
.img-inline.-maxh-0120em {
max-height: 1.20em;
}
.img-inline.-maxh-0150em {
max-height: 1.50em;
}
.img-inline.-maxh-0175em {
max-height: 1.75em;
}
.img-inline.-maxh-0200em {
max-height: 2.00em;
}
.img-inline.-textline {
margin: 0 0.2em;
max-height: 0.8em;
}
.img-inline.-vertical-card {
max-height: 3em;
vertical-align: -0.1em;
}
.img-inline-textheight {
width: auto;
height: auto;
max-width: 100%;
max-height: 1em;
margin: 0 0.1em;
vertical-align: baseline;
display: inline-block;
}
.img-inline.-mh10 {
margin-right: 0.1em;
margin-left : 0.1em;
}
/********************
.mark-indent
*********************/
.mark-indent {
padding-left: 1em;
position: relative;
text-align: left;
}
.mark-indent .mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
/********************
.mark-indent-list
*********************/
.mark-indent-list {
text-align: left;
}
.mark-indent-list > li {
position: relative;
padding-left: 1em;
font-size: 16px;
}
.mark-indent-list.-small-text > li {
font-size: 12px;
}
.mark-indent-list > li .mark {
display: inline-block;
position: absolute;
top: 0;
left: 0;
font-size: inherit;
line-height: inherit;
}
.mark-indent-list.-em-1_25 > li {
padding-left: 1.25em;
}
.mark-indent-list.-em-1_5 > li {
padding-left: 1.5em;
}
.mark-indent-list.-em-1_75 > li {
padding-left: 1.75em;
}
.mark-indent-list.-em-2 > li {
padding-left: 2em;
}
@media only screen and (max-width: 768px) {
.mark-indent-list > li {
font-size: 1.2rem;
}
}
/********************
.img-anchor-list
*********************/
.img-anchor-list {
text-align: center;
}
.img-anchor-list > li {
margin: 1.5rem auto;
}
.img-anchor-list > li img {
width: 92%;
max-width: 500px;
display: block;
margin: 0 auto;
}
/********************
.img-content-v-list
*********************/
.img-content-v-list {
font-size: 18px;
}
.img-content-v-list > li > .img-center-box {
margin: 1rem auto;
max-width: 420px;
}
.img-content-v-list > li + li {
margin-top: 2rem;
}
.img-content-v-list > li .mark {
color: #053371;
}
@media only screen and (max-width: 768px) {
.img-content-v-list {
font-size: 1.3rem;
}
}
/********************
.img-content-list
*********************/
.img-content-list {
width: fit-content;
margin: 0 auto;
font-size: 18px;
}
.img-content-list.-adjust-pc {
max-width: 480px;
}
.img-content-list > li {
position: relative;
padding-left: 7em;
min-height: 6em;
margin: 1.5em auto;
}
.img-content-list > li::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5em;
background: no-repeat center top/contain;
}
.img-content-list:last-child > li:last-child {
margin-bottom: 0;
}
.img-content-list > li.img-1::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/illust-register.png);
margin-top: 0.5em;
}
.img-content-list > li.img-2::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/illust-terminal.png);
}
.img-content-list > li.img-3::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/illust-smcard.png);
}
.img-content-list > li.img-4::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/illust-payment.png);
}
.img-content-list > li.img-5::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/illust-recognition.png);
}
.img-content-list > li.img-6::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/illust-touch.png);
}
.img-content-list > li .num {
position: absolute;
top: 0;
left: 5.75em;
width: 1em;
color: #053371;
}
@media only screen and (max-width: 768px) {
.img-content-list {
font-size: 1.2rem;
}
.img-content-list.-adjust-pc {
max-width: none;
}
}
/********************
.has-mark-list*
.has-mark
*********************/
.has-mark-list > li::before ,
.has-mark::before {
content: "";
display: inline-block;
vertical-align: baseline;
margin-right: 0.1em;
}
.has-mark-list.-circle > li::before ,
.has-mark.-circle::before {
width: 0.8em;
height: 0.8em;
border-radius: 50%;
background-color: #fff;
border: 0.2em solid #053371;
}
.has-mark-list.-circle > li {
padding-left: 1.1em;
text-indent: -1.1em;
}
.has-mark-list.-circle > li > * {
text-indent: 0;
}
/********************
.inline-block-list
*********************/
.inline-block-list > li {
display: inline-block;
margin-right: 1.0em;
}
.inline-block-list > li.block {
display: block;
margin-right: 0;
}
.inline-block-list > li:last-child {
margin-right: 0;
}
/********************
.flex-list
*********************/
.flex-list {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: left;
}
.flex-list > li {
text-align: left;
}
/********************
--- common override ---
*********************/
body {
min-width: 0;
}
body main p {
font-size: inherit;
line-height: inherit;
}
body main picture {
display: block;
margin: 0;
padding: 0;
}
b, strong {
font-weight: 700;
}
/********************
@keyframes
*********************/
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/********************
--- ▽ページスタイル ---
*********************/
.main-wrap {
letter-spacing: 0.01em;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
color: #130f21;
overflow: hidden;
font-size: 14px;
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
}
@media screen and (max-width: 768px) {
html {
font-size: calc(100vw / 37.5);
}
.main-wrap {
font-size: 1.2rem;
font-family: HiraKakuProN-W3, HiraKakuPro-W3,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
"Yu Gothic",
Meiryo,
sans-serif;
}
}
/********************
.section
*********************/
.section {
padding: 80px 0;
position: relative;
}
@media only screen and (max-width: 768px) {
.section {
padding: 10vw 0;
}
}
/********************
─フレーム─
.contents-frame
*********************/
.contents-frame {
max-width: 740px;
padding: 0 20px;
margin: 0 auto;
position: relative;
}
.indent-frame {
padding: 0 1rem;
}
@media only screen and (max-width: 375px) {
.contents-frame {
padding: 0 5vw;
}
}
/********************
─単体画像─
.img-center-box
*********************/
.img-center-box {
text-align: center;
}
.img-center-box img {
display: block;
margin: 0 auto;
}
/********************
─ボタン─
お申込み
.btn::before
└影
.btn .design::before
└●
.btn .design::after
└＞
*********************/
.btn {
display: inline-block;
position: relative;
color: #130f21;
font-size: 16px;
min-width: 40%;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
.btn .design {
display: block;
background-color: #fff;
border: solid currentColor 2px;
padding: 0.6em 2em 0.6em 1em;
position: relative;
font-weight: bold;
}
.btn .design .text {
margin-left: 0.25em;
}
.btn::before ,
.btn .design::before ,
.btn .design::after {
content: "";
display: block;
position: absolute;
}
.btn::before {
background-color: #ff9bf0;
border: solid #130f21 2px ;
top: 0.3em;
left: 0.3em;
width: 100%;
height: 100%;
}
.btn::before ,
.btn .design {
border-radius: 1.6em/50%;
}
.btn .design::before ,
.btn .design::after {
top: 0;
bottom: 0;
margin: auto 0;
}
.btn .design::before {
background-color: #130f21;
background-color: currentColor;
border-radius: 50%;
width: 1.2em;
height: 1.2em;
right: 0.5em;
}
.btn .design::after {
right: 0.9em;
width: 0.5em;
height: 0.5em;
border: solid #fff;
border-width: 0 0.2em 0.2em 0;
transform: rotate(-45deg);
}
@media only screen and (max-width: 768px) {
.btn {
font-size: 1.5rem;
}
}
/********************
─ボタンタイプ─
*********************/
.btn.-type2 {
color: #053371;
}
.btn.-type2 .design {
border-color: #053371;
}
.btn.-type2::before {
border-color: #053371;
background-color: #053371;
}
/********************
─ボックス─
.box
.-border-*
.-rounded
*********************/
.box {
margin: 3rem auto 0.8rem;
background-color: #fff;
}
.box + .box {
margin-top: 1.5rem;
}
.box-inner {
padding: 1rem 1.6rem;
}
.box-inner.-narrow {
padding: 1rem 2.4rem;
}
.box-inner:last-child > :last-child {
margin-bottom: 1rem;
}
.box-inner > :first-child {
margin-top: 0;
}
.adjust-box-frame {
padding: 0 1.6rem;
}
.box.-shadow {
box-shadow: 0.3rem 0.3rem 0 0 #ff9bf0;
}
.box.-rounded {
border-radius: 1.4rem;
}
.box.-border-yellow {
border: 2px solid #ffff9b;
}
.box-heading.-fill-yellow {
background-color: #ffff9b;
text-align: center;
padding: 0.8rem;
}
@media only screen and (max-width: 768px) {
.box {
margin: 1.8em auto 0.8em;
}
.box-inner {
padding: 1rem 1.2rem;
}
.box.-shadow {
box-shadow: 0.15rem 0.15rem 0 0 #ff9bf0;
}
}
/********************
.box-dotted-border
*********************/
.box-dotted-border {
margin: 1.5rem auto 1rem;
}
.box-dotted-border + .box-dotted-border {
margin-top: 3rem;
}
.box-dotted-border .box-heading {
text-align: center;
margin-bottom: -0.8em;
padding: 0 1em;
font-size: 28px;
font-weight: bold;
color: #053371;
line-height: 1.2;
position: relative;
z-index: 1;
}
.box-dotted-border .box-heading .text {
display: inline-block;
text-shadow:
0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff,
0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff,
0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff,
0 0 0.5em #fff;
padding: 0 0.2em;
border-radius: 0.2em;
}
.box-dotted-border .box-heading .logo-aeonpay {
display: inline-block;
margin-bottom: -1.6rem;
padding: 0.5rem;
border-radius: 0.6rem;
background-color: #fff;
}
.box-dotted-border .box-heading .logo-aeonpay img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 4.6rem;
margin: auto;
}
.box-dotted-border .box-body {
border: dotted #053371;
border-width: 0.2em 0;
background-color: #fff;
padding: 2rem 1em;
position: relative;
box-shadow: 0 -1px 0 0 #fff, 0 1px 0 0 #fff;
}
.box-dotted-border .box-body .list-appeal {
max-width: 70%;
}
@media only screen and (max-width: 768px) {
.box-dotted-border .box-heading {
font-size: 1.8rem;
}
.box-dotted-border .accordion-wrap {
width: 100%;
}
.box-dotted-border .box-heading .logo-aeonpay {
padding: 0.4rem;
}
}
/********************
─見出し（画像）─
.hdg-img-*
*********************/
.hdg-img-center {
text-align: center;
margin: 2rem auto;
}
/********************
─見出し（波画像）─
.hdg-wave-img
*********************/
.hdg-wave-img {
position: relative;
top: -2rem;
margin: 6rem auto -2rem;
text-align: center;
}
.hdg-wave-img img {
width: auto;
height: auto;
max-width: 100%;
display: block;
margin: 0 auto;
}
.hdg-wave-img img.bg-white {
background-color: #fff;
padding: 0 5px;
}
@media only screen and (max-width: 768px) {
.hdg-wave-img {
top: -0.8rem;
margin: 3rem auto -1em;
}
}
/********************
─見出し（装飾）─
.hdg-decorated
*********************/
.hdg-decorated {
position: relative;
text-align: center;
margin: 2rem auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.hdg-decorated::before ,
.hdg-decorated::after {
content: "";
display: block;
}
.hdg-decorated.-topLine {
margin-top: 5rem;
}
.hdg-decorated.-topLine::before {
width: 100%;
height: 6px;
background: repeat-x url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/deco-circle-fill.svg) left center/contain;
justify-self: flex-start;
margin-bottom: 1.3rem;
}
.hdg-decorated.-bottomLine {
background:
no-repeat url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/deco-circle-stroke.svg) left bottom/11px auto,
no-repeat url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/deco-circle-stroke.svg) right bottom/11px auto;
}
.hdg-decorated.-bottomLine::after {
margin: 1.3em 18px 0;
width: auto;
height: 11px;
background-color: #fff;
border: solid #053371 3px;
border-radius: 20px;
}
@media only screen and (max-width: 768px) {
.hdg-decorated.-topLine {
margin-top: 4rem;
}
.hdg-decorated.-topLine::before {
height: 0.25em;
}
.hdg-decorated.-bottomLine {
background-size:
0.55em auto,
0.55em auto;
}
.hdg-decorated.-bottomLine::after {
margin: 0.5em 0.9em 0;
height: 0.55em;
border-width: 0.2em;
}
}
/********************
.hdg-decorated .content
*********************/
.hdg-decorated .content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
align-items: center;
justify-content: center;
width: 100%;
align-self: center;
font-size: 30px;
font-weight: bold;
letter-spacing: 0.05em;
}
.hdg-decorated .content.-fontLarge {
font-size: 34px;
}
.hdg-decorated.-point.-topLine {
/* min-height: auto;*/
}
.hdg-decorated.-point::after {
margin-top: 0.4rem;
}
.hdg-decorated.-point .content {
width: 94%;
max-width: 655px;
align-items: center;
justify-content: flex-start;
}
.hdg-decorated.-point .content .point-number {
width: 3.2em;
height: auto;
margin-right: 1em;
}
.hdg-decorated.-point .content.-pmr-narrow .point-number {
margin-right: 0.3em;
}
.hdg-decorated.-point .content .text {
font-weight: bold;
color: #130f21;
text-align: center;
line-height: 1.2;
flex-grow: 1;
}
@media only screen and (max-width: 768px) {
.hdg-decorated .content {
font-size: 1.5rem;
}
.hdg-decorated .content.-fontLarge {
font-size: 1.8rem;
}
.hdg-decorated.-point .content {
justify-content: flex-start;
align-self: flex-end;
width: 97%;
max-width: none;
}
.hdg-decorated.-point .content .point-number {
width: 3.866em;
}
.hdg-decorated.-point .content .text {
font-size: 1.5rem;
flex-grow: 0;
}
}
/********************
─見出し（テキストのみ）─
.hdg-text
*********************/
.hdg-text {
font-size: 30px;
font-weight: bold;
text-align: center;
letter-spacing: 0.05em;
margin: 1.5em auto 0.6em;
}
@media only screen and (max-width: 768px) {
.hdg-text {
font-size: 1.8rem;
}
}
/********************
.hdg-wave
*********************/
.hdg-wave {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #053371;
margin: 1em auto 0.5em;
}
.hdg-wave .decoration {
display: inline-block;
}
.hdg-wave::after {
content: "";
display: block;
height: 0.4em;
margin-top: 0.2em;
background: no-repeat center/contain url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/deco-wave.png);
}
@media only screen and (max-width: 768px) {
.hdg-wave {
font-size: 1.8rem;
}
}
/********************
.hdg-marker-dotline
*********************/
.hdg-marker-dotline {
display: flex;
text-align: center;
align-items: flex-end;
justify-content: center;
font-size: 32px;
letter-spacing: 0.025em;
font-weight: bold;
line-height: 1.2;
margin: 2rem auto 1rem;
}
.hdg-marker-dotline::before ,
.hdg-marker-dotline::after {
content: "";
dispaly: block;
flex-grow: 1;
height: 0.3rem;
background: repeat-x url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/deco-circle-fill.svg) left center/ contain;
margin-bottom: 0.2em;
}
.hdg-marker-dotline .text {
background: linear-gradient(to top, transparent 0%, transparent 0.1em, #ffff9b 0.1em, #ffff9b 0.5em, transparent 0.5em, transparent 100%);
}
@media only screen and (max-width: 768px) {
.hdg-marker-dotline {
font-size: 1.8rem;
}
}
/********************
.hdg-fill-round
*********************/
.hdg-fill-round {
text-align: center;
font-size: 24px;
color: #053371;
}
.hdg-fill-round .design {
display: inline-block;
background-color: #ffff9b;
padding: 0.5em 1.6em;
border-radius: 1.4em/50%;
line-height: 1.3;
border: solid currentColor 0.15em;
box-shadow: 0.1em 0.1em 0 0 currentColor;
letter-spacing: 0.1em;
font-weight: bold;
min-width: 80%;
}
@media only screen and (max-width: 768px) {
.hdg-fill-round {
font-size: 1.8rem;
}
}
/********************
─スクロールボックス─
.scroll-box*
*********************/
.scroll-box {
max-height: 220px;
overflow-y: auto;
}
.scroll-inner {
padding: 1em 1.4em;
}
@media only screen and (max-width: 768px) {
.scroll-box {
max-height: 24vh;
}
.scroll-inner {
padding: 1em 1.5em 1em 1em;
}
}
/********************
（simplebar）
*********************/
.simplebar-track.simplebar-vertical {
background-color: #eee;
}
/********************
─訴求（リスト）─
.list-appeal
*********************/
.list-appeal > li {
font-size: 24px;
margin: 0.5em auto;
letter-spacing: 0.025em;
font-weight: bold;
}
@media only screen and (max-width: 768px) {
.list-appeal > li {
font-size: 1.5rem;
}
}
/********************
─訴求テキスト─
.text-appeal
*********************/
.text-appeal {
font-size: 24px;
margin-top: 1em;
text-align: center;
font-weight: bold;
letter-spacing: 0.05em;
}
.text-appeal:not([class*=" lh-"]) {
line-height: 1.7;
}
.text-appeal.-small-1 {
font-size: 22px;
}
.text-appeal.-small-2 {
font-size: 20px;
}
.text-appeal strong {
font-weight: bold;
}
.text-appeal .font-large-1 {
font-size: 120%;
line-height: 1.1;
}
.text-appeal .font-large-2 {
font-size: 140%;
line-height: 1.1;
}
.text-appeal .font-large-3 {
font-size: 160%;
line-height: 1.1;
}
.text-appeal .font-large-4 {
font-size: 190%;
line-height: 1.0;
}
.text-appeal .font-large-10 {
font-size: 200%;
line-height: 1.0;
}
.text-appeal .font-small {
}
@media only screen and (max-width: 768px) {
.text-appeal {
font-size: 1.5rem;
}
.text-appeal.-small-1 {
font-size: 1.4rem;
}
.text-appeal.-small-2 {
font-size: 1.2rem;
}
}
/********************
─注記テキスト─
.text-note
*********************/
.text-note {
font-size: 16px;
}
@media only screen and (max-width: 768px) {
.text-note {
font-size: 1.2rem;
}
}
/********************
.deco-*
*********************/
.deco-sideline {
position: relative;
display: inline-block;
padding: 1em 2em;
}
.deco-sideline::before ,
.deco-sideline::after {
content: "";
display: block;
position: absolute;
display: block;
width: 1.3em;
height: 3em;
top: 0;
bottom: 0.2em;
margin: auto 0;
background: no-repeat center/contain url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/deco-line-curve.png);
}
.deco-sideline::before {
left: 0;
}
.deco-sideline::after {
right: 0;
transform: scaleX(-1);
}
/********************
─真ん中ボタン─
.btn-center
*********************/
.btn-center {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.btn-center > .btn ,
.btn-center > .btn-img {
display: block;
margin: 1.5rem auto 1rem;
width: 50%;
max-width: 300px;
}
.btn-center .btn-img img {
width: 100%;
}
/********************
─アコーディオン─
.accordion*
*********************/
.accordion-wrap {
color: #053371;
border: solid 2px currentColor;
background-color: #fff;
margin: 1.5rem auto;
width: 95%;
}
.accordion-wrap.-color-2 {
color: #dc0695;
}
.accordion-trigger {
appearance: none;
cursor: pointer;
display: block;
text-align: center;
width: 100%;
padding: 0.8em 2.4em 0.8em 1.6em;
background-color: #fff;
position: relative;
font-size: 18px;
color: inherit;
border: none;
font-weight: bold;
}
.accordion-wrap .accordion-trigger:hover ,
.accordion-wrap .accordion-trigger:active ,
.accordion-wrap .accordion-trigger:focus {
opacity: 1 !important;
}
.accordion-trigger::before ,
.accordion-trigger::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
background-color: currentColor;
}
.accordion-trigger::before {
right: 1em;
width: 1em;
height: 2px;
bottom: 1px;
}
.accordion-trigger::after {
right: 1.5em;
width: 2px;
height: 1em;
margin-right: -1px;
transform: scaleY(1);
transition: transform 0.1s linear;
}
.accordion-wrap.-narrow .accordion-trigger {
font-size: 1.3rem;
padding-left: 0.5em;
padding-right: 2em;
letter-spacing: 0.05em;
}
.accordion-content {
visibility: hidden;
height: 0;
overflow: hidden;
margin: 0 0.4em;
padding: 0 1em;
transition: padding 0.2s ease-out;
transition-property: padding-top, padding-bottom;
}
.accordion-content > :last-child {
margin-bottom: 0.8rem;
}
.accordion-content > * {
color: #000;
}
.accordion-wrap:not(.-is-open):not(.-has-slide) .accordion-content > * {
display: none;
}
.accordion-wrap.-is-open .accordion-trigger::after {
transform: scaleY(0);
}
.accordion-wrap.-is-open .accordion-content {
padding: 1em 1.5em;
visibility: visible;
height: auto;
border-top: dashed 1px currentColor;
}
@media only screen and (max-width: 768px) {
.accordion-trigger {
font-size: 1.5rem;
}
.accordion-wrap.-is-open .accordion-content {
padding: 1em 1em;
}
}
/********************
─動画─
.movie-wrap
*********************/
.movie-wrap {
height: auto;
position: relative;
text-align: left;
margin: 20px auto;
width: 100%;
max-width: 500px;
aspect-ratio: 16/9;
background-color: #000;
}
@media only screen and (max-width: 768px) {
.movie-wrap {
margin: 1rem auto;
}
}
/********************
─カード画像ボックス─
.card-img-box
*********************/
.card-img-box {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
height: auto;
aspect-ratio: 1/1;
margin: 0 auto 1.6em;
}
.card-img-box .card-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
.card-img-box .group {
position: relative;
}
.card-img-box .card-copyright {
text-align: right;
margin: 0.4em auto 0;
position: absolute;
font-size: 10px;
top: 100%;
left: 0;
right: 0;
line-height: 1;
}
@media only screen and (max-width: 768px) {
.card-img-box .card-copyright {
font-size: 0.8rem;
}
}
/********************
─カード国際ブランド─
.card-brands
*********************/
.card-brands {
margin: 0.2em auto;
text-align: center;
}
.card-brands .brand-img {
display: inline-block;
width: auto;
height: auto;
max-width: 3em;
max-height: 3em;
vertical-align: middle;
}
/********************
from "slick-theme.css"
.slick-next ,
.slick-prev
.slick-dots
"font-family: 'slick';"
*********************/
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25;
}
.slick-prev:before,
.slick-next:before {
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: '←';
}
[dir='rtl'] .slick-prev:before {
content: '→';
}
.slick-next {
right: -25px;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: '→';
}
[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
/********************
( override "slick-theme.css" )
.slide-wrap *
.slick-next ,
.slick-prev
.slick-dots
*********************/
/* Arrows */
.slide-wrap .slick-next,
.slide-wrap .slick-prev {
background: no-repeat center / contain;
width: 36px;
height: 102px;
z-index: 10;
}
.slide-wrap .slick-next::before,
.slide-wrap .slick-prev::before {
color: transparent;
}
.slide-wrap .slick-next {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/arrow-slide-next.png);
right: 0;
}
.slide-wrap .slick-prev {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/arrow-slide-prev.png);
left: 0;
}
/* Dots */
.slide-wrap .slick-dots {
bottom: auto;
margin: 0 auto;
padding-top: 10px;
position: relative;
width: auto;
}
.slide-wrap .slick-dots li {
margin: 4px 6px;
box-sizing: border-box;
width: auto;
height: auto;
}
.slide-wrap .slick-dots>li button {
border: 2px solid #053371;
border-radius: 50%;
background-color: #fff;
margin: auto;
width: 22px;
height: 22px;
}
.slide-wrap .slick-dots li button:before {
color: transparent;
}
.slide-wrap .slick-dots>li.slick-active button {
background-color: #053371;
}
.slide-wrap .slick-dotted.slick-slider {
margin-bottom: 40px;
}
@media only screen and (max-width: 768px) {
.slide-wrap .slick-next,
.slide-wrap .slick-prev {
width: 24px;
height: 68px;
}
.slide-wrap .slick-dots {
padding-top: 0.6rem;
}
.slide-wrap .slick-dots li {
margin: 0.4rem 0.6rem;
}
.slide-wrap .slick-dots>li button {
border-width: 2px;
width: 1.7rem;
height: 1.7rem;
}
.slide-wrap .slick-dotted.slick-slider {
margin-bottom: 1.5rem;
}
}
.slide-wrap:not(:has(.slick-initialized)) {
visibility: hidden;
}
/********************
─カードスライド─
.slide-wrap.-card
*********************/
.slide-card-heading {
position: relative;
z-index: 1;
margin-bottom: -2rem;
}
.slide-wrap.-card {
position: relative;
}
.slide-wrap.-card::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: no-repeat center/contain url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/bg-circle.png);
}
.slide-card:not(.slick-initialized){
visibility: hidden;
height: 25em;
}
.slide-wrap.-card .slick-track {
display: flex;
align-items: stretch;
}
.slide-wrap.-card .slide-item {
padding: 0 5em;
height: auto !important;
width: 100%;
display: flex;
align-items: stretch;
}
@media only screen and (max-width: 768px) {
.slide-wrap.-card::before {
background-size: 110%;
margin: 2rem -5vw -5vw -2vw;
background-position: left top;
}
.slide-wrap.-card .slide-item {
padding: 0 3em;
}
}
/********************
─カード紹介─
.card-slide-box
*********************/
.card-slide-box {
background-color: #fff;
border-radius: 50% 50% 0 0 ;
border-radius: 50% 50% 0 0/ 14em 14em 0 0;
padding: 15% 1em 1em;
width: 100%;
box-shadow:
0.4em 0.45em 0 0 #ffff9b ,
-0.4em -0.45em 0 0 #75c3db;
margin: 1em auto;
text-align: center;
display: flex;
flex-direction: column;
position: relative;
}
.card-slide-box::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6em;
background: repeat radial-gradient(#bae1ed 12%,transparent 14%) left -0.5em bottom -0.5em/1.3em 1.3em;
}
.card-slide-box > .content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
z-index: 1;
}
.card-slide-box .card-name {
font-size: 30px;
font-weight: bold;
line-height: 1.3;
margin-bottom: 0.2em;
min-height: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-slide-box .card-name .sub-text {
display: block;
font-size: 70%;
}
.card-slide-box .card-img-box {
width: 50%;
max-width: 300px;
margin: auto auto 1em;
aspect-ratio: auto;
position: relative;
}
.card-slide-box .card-img-box .card-img {
margin: 0 auto 0.1em;
}
.card-slide-box .card-img-box.-vertical .card-img {
width: 44.28%;
}
.card-slide-box .card-img-box .card-copyright {
text-align: right;
}
.card-slide-box .card-appeal {
font-size: 20px;
font-weight: bold;
margin: auto;
}
.card-slide-box .card-apply {
justify-self: flex-end;
margin: 0.5em auto;
width: 100%;
}
.card-slide-box .card-apply .supple {
color: #053371;
font-weight: bold;
font-size: 20px;
}
.card-slide-box .btn {
font-size: 20px;
width: 300px;
max-width: 70%;
margin-top: 0.5em;
}
.card-slide-box .btn .design {
}
@media only screen and (max-width: 768px) {
.card-slide-box {
padding-top: 5rem;
border-radius: 50% 50% 0 0/ 13rem 13rem 0 0;
}
.card-slide-box .card-name {
font-size: 1.8rem;
}
.card-slide-box .card-appeal {
font-size: 1.2rem;
}
.card-slide-box .card-img-box {
width: 70%;
}
.card-slide-box .card-apply .supple {
font-size: 1.2rem;
}
.card-slide-box .btn {
font-size: 1.5rem;
}
.card-slide-box .btn::before {
}
}
/********************
─水平線─
.hr-*
*********************/
.hr {
height: 3px;
border: none;
margin: 2em auto;
background: repeat-x linear-gradient(to right, #F21D91 0%, #F21D91 50%, transparent 50%, transparent 100%) left center/ 12px 100%;
}
@media only screen and (max-width: 768px) {
.hr {
height: 3px;
}
}
/********************
.bnr-center
*********************/
.bnr-center {
margin: 1.5rem auto 3.8rem;
text-align: center;
width: 96%;
}
.bnr-center > a {
display: inline-block;
}
/********************
.first-visual
*********************/
.fv-section {
background-color: #75c3db;
}
.first-visual {
text-align: center;
padding: 0 10px;
}
.first-visual img {
display: block;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.first-visual {
padding: 0;
}
.first-visual img {
width: 100%;
}
}
/********************
メニュー（追従）
.menu-trigger
************************/
.menu-trigger {
appearance: none;
border: none;
cursor: pointer;
white-space: nowrap;
position: fixed;
top: 10px;
right: 10px;
z-index: 1010;
padding: 0.75em 0.5em;
background-color: #fff;
border-radius: 50%;
font-size: 12px;
font-style: italic;
font-weight: normal;
line-height: 1;
letter-spacing: 0.1em;
color: #053371;
min-width: 4.5em;
font-family: arial, sans-serif;
}
.menu-trigger ,
.menu-trigger .text {
display: flex;
flex-direction: column;
align-items: stretch;
}
.menu-trigger::before ,
.menu-trigger .text::before ,
.menu-trigger .text::after {
content: "";
display: block;
width: 70%;
background-color: currentColor;
order: -1;
height: 3px;
border-radius: 3px;
margin: 0 auto 6px;
}
@media only screen and (max-width: 768px) {
.menu-trigger {
font-size: 10px;
top: 4px;
right: 8px;
}
.menu-trigger::before ,
.menu-trigger .text::before ,
.menu-trigger .text::after {
height: 3px;
border-radius: 3px;
margin: 0 auto 4px;
}
}
/********************
メニュー
.overlay-menu
*********************/
.overlay-menu {
position: fixed;
display: none;
flex-direction: column;
justify-content: center;
}
.overlay-menu-list {
position: relative;
max-width: 700px;
text-align: center;
z-index: 10001;
width: 90%;
top: 0;
margin: auto;
padding: 6.5em 0 5em;
background-color: rgba(255,255,255,0.95);
border-radius: 0.75em;
box-shadow: 0.4em 0.4em 0 0 #ff9bf0;
font-size: 14px;
}
.overlay-menu-list > li {
margin: 0 auto;
max-width: 600px;
width: 90%;
}
.overlay-menu-list > li:not(.menu-close-wrap) + li {
margin-top: 2em;
}
.overlay-menu-list > li a {
display: block;
background-color: #fff;
border-radius: 3em/50%;
color: inherit;
padding: 1.5em 0.5em;
line-height: 1.2;
font-style: italic;
box-shadow: 0.1em 0.2em 0.2em 0 rgba(145, 145, 145, 0.45);
text-align: center;
}
.overlay-menu-list > li.merit a {
background-color: #75c3db;
}
.overlay-menu-list > li.point a {
background-color: #ff9bf0;
}
.overlay-menu-list > li.payment a {
background-color: #ffff9b;
}
.overlay-menu-list > li.service a {
background-color: #053371;
color: #fff;
}
.overlay-menu-list img.menu-text {
width: auto;
height: auto;
max-height: 2.4em;
max-width: 100%;
display: block;
margin: auto;
}
.overlay-menu-list > li.merit img.menu-text {
max-height: 2.2em;
}
.overlay-menu-list .menu-close-wrap {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
}
.overlay-menu-list .menu-close {
width: 100%;
height: 100%;
}
.overlay-menu-list .menu-close::before ,
.overlay-menu-list .menu-close::after {
content: "";
display: block;
width: 80%;
height: 0.4em;
background-color: #ffff9b;
border-radius: 0.25em/50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.overlay-menu-list .menu-close::before {
transform: rotate(45deg);
}
.overlay-menu-list .menu-close::after {
transform: rotate(-45deg);
}
html.-menu-open .overlay-menu {
content: "";
display: flex;
position: fixed;
background-color: rgba(117, 195, 219, 0.4);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
}
@media only screen and (max-width: 768px) {
.overlay-menu-list {
font-size: 1rem;
}
}
/********************
.menu-close
*********************/
.menu-close {
background-color: #053371;
color: transparent;
width: 3em;
height: 3em;
border-radius: 50%;
}
/********************
.security-banner
*********************/
.security-banner .contents-frame {
max-width: 1000px;
}
.security-banner a {
width: 1000px;
display: block;
max-width: 100%;
margin: 0 auto;
}
/********************
─冒頭アンカー─
.anchor-list
*********************/
.anchor-wrap {
background-color: #E7F5FF;
position: relative;
z-index: 1;
margin-top: 5rem;
}
.anchor-list {
display: flex;
align-items: stretch;
max-width: 800px;
margin: 0 auto;
}
.anchor-list > li {
flex-grow: 1;
text-align: center;
display: flex;
align-items: stretch;
width: 25%;
}
.anchor-list > li a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: inherit;
color: #053371;
width: 100%;
font-size: 160%;
font-weight: bold;
padding: 0.5em 0.2em 1.7em;
background-color: #75c3db;
}
.anchor-list > li a::after {
content: "";
display: block;
border: 0.2em solid currentColor;
border-top: none;
border-left: none;
position: absolute;
width: 0.5em;
height: 0.5em;
left: 0;
bottom: 0.7em;
right: 0;
margin: 0 auto;
transform: rotate(45deg);
}
.anchor-list > li a img {
width: auto;
height: auto;
max-width: 100%;
max-height: 2.7em;
}
.anchor-list > li.merit a {
background-color: #75c3db;
}
.anchor-list > li.point a {
background-color: #ff9bf0;
}
.anchor-list > li.payment a {
background-color: #ffff9b;
}
.anchor-list > li.service a {
background-color: #053371;
color: #fff;
}
@media only screen and (max-width: 768px) {
.anchor-wrap {
margin-top: 4rem;
box-shadow: 0 0 1em 0.2em rgba(127,127,127,0.5);
}
.anchor-list > li a {
font-size: 100%;
}
}
/********************
─グリッド背景─
.section.-bg-grid
*********************/
.section.-bg-grid {
position: relative;
}
.section.-bg-grid::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
background: repeat url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/bg-grid-blue.png) left 2rem/auto 35rem;
height: 39rem;
max-width: 1000px;
}
.section.-bg-grid.-bg1::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/bg-grid-white.png);
}
.section.-bg-grid.-bg2::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/bg-grid-blue.png);
}
.section.-bg-grid.-bg3::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/bg-grid-pink.png);
}
.section.-bg-grid.-op50::before {
opacity: 50%;
}
/********************
─イオンカードのメリット─
.section.-aeoncard-merit
*********************/
.section.-aeoncard-merit {
background-color: #bae1ed;
padding-bottom: 80px;
}
@media only screen and (max-width: 768px) {
.section.-aeoncard-merit {
padding-bottom: 4.0rem;
}
}
/********************
─ポイントのため方・使い方─
.section.-point-method
*********************/
.section.-point-method {
background-color: #ffe1fa;
padding-top: 70px;
}
@media only screen and (max-width: 768px) {
.section.-point-method {
padding-top: 4.0rem;
}
}
/********************
─カード申込リスト─
.card-apply-list
*********************/
.card-apply-list {
display: flex;
align-items: stretch;
}
.card-apply-list > li {
width: 31.5%;
margin: 1em auto;
display: flex;
flex-direction: column;
font-size: 12px;
}
.card-apply-list > li:nth-child(3n+1) {
margin-left: 0;
}
.card-apply-list .card-name {
text-align: center;
font-weight: bold;
}
.card-apply-list .card-img-box {
height: 9em;
aspect-ratio: auto;
max-width: 160px;
}
.card-apply-list .card-img-box .card-img {
border: 1px solid #eee;
border-radius: 0.4em;
}
.card-apply-list .btn-wrap {
margin-top: auto;
text-align: center;
}
.card-apply-list .btn-wrap .btn {
font-size: 12px;
font-size: 100%;
}
.card-apply-list .btn-wrap .btn .design {
padding-left: 0.7em;
background-color: #ffff9b;
border-width: 0.15em;
}
.card-apply-list.-column2 > li {
width: 48%;
font-size: 13px;
}
.card-apply-list.-column2 .card-name {
font-size: 120%;
}
.card-apply-list.-column2 .card-img-box {
height: 12em;
max-width: 200px;
}
.card-apply-list.-column2 .btn-wrap .btn .design {
padding-left: 1em;
}
@media only screen and (max-width: 768px) {
.card-apply-list > li {
font-size: 0.8rem;
}
.card-apply-list.-column2 > li {
font-size: 1.0rem;
}
.card-apply-list.-column2 .card-img-box {
height: 9em;
}
.card-apply-list .card-img-box {
height: 8rem;
}
.card-apply-list .card-copyright {
font-size: 0.7rem;
}
}
/*******************
.usj-movie-group
********************/
.usj-movie-group {
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0 auto;
max-width: 560px;
width: 96%;
}
.usj-movie {
width: 42%;
}
.usj-movie-text {
width: 51%;
margin-left: 6%;
}
.usj-movie-text img {
display: block;
margin: 0 auto;
}
.usj-movie-group .movie-wrap {
aspect-ratio: 9.1/16;
margin: 0;
}
.usj-movie-copyright {
margin: 1rem auto;
max-width: 94%;
text-align: center;
}
@media only screen and (max-width: 768px) {
.usj-movie-group {
max-width: 600px;
}
}
@media only screen and (max-width: 640px) {
.usj-movie {
width: 44%;
}
.usj-movie-text {
width: 53%;
margin-left: 3%;
}
}
/********************
─使いやすい豊富な決済手段─
.section.-payment-method
*********************/
.section.-payment-method {
background-color: #ffffcd;
}
@media only screen and (max-width: 768px) {
}
/********************
.app-flow
*********************/
.app-flow .heading {
font-size: 24px;
margin: 1em auto;
text-align: center;
font-weight: bold;
letter-spacing: 0.05em;
}
.app-flow .heading:nth-child(n+2) {
margin-top: 2.5em;
}
.app-flow .img-content-v-list .img-center-box {
margin: 40px auto;
}
.app-flow .img-content-v-list {
letter-spacing: 0.05em;
}
@media only screen and (max-width: 768px) {
.app-flow .heading {
font-size: 1.5rem;
}
.app-flow .img-content-v-list .img-center-box {
margin: 2rem auto;
}
}
/********************
─安心・安全なサービス─
.section.-secure-service
*********************/
.section.-secure-service {
background-color: #bae1ed;
}
@media only screen and (max-width: 768px) {
}
/********************
.secure-*
*********************/
.secure-text-1 ,
.secure-slide-box .mark-indent-list {
font-size: 1.1rem;
letter-spacing: 0.075em;
}
p.secure-text-1 ,
.secure-slide-box .mark-indent-list {
margin-top: 0.5rem;
}
.secure-fill-box {
background-color: #dcf0f6;
padding: 0.8rem 0.5rem;
}
@media only screen and (max-width: 768px) {
.secure-text-1 {
font-size: 1.2rem;
}
}
/********************
─安心・安全スライド─
.slide-wrap.-secure
*********************/
.slide-wrap.-secure {
margin-top: 2.5rem;
}
.slide-wrap.-secure .slick-arrow.slick-disabled {
visibility: hidden;
}
.slide-wrap.-secure .slick-track {
display: flex;
align-items: stretch;
}
.slide-wrap.-secure .slide-item {
padding: 0 3rem;
height: auto !important;
width: 100%;
display: flex;
align-items: stretch;
}
.slide-secure .slide-item {
align-items: stretch;
}
.secure-slide-box {
background-color: #fff;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: -0.2rem -0.2rem 0 0 #053371;
margin: 0.2rem 0;
padding: 2rem 1.6rem;
border-radius: 1rem;
text-align: center;
}
.secure-slide-box .secure-hdg {
position: relative;
font-size: 1.6rem;
font-weight: bold;
margin-top: 0.5em;
color: #053371;
}
.secure-slide-box > .secure-hdg:first-child {
margin-top: 0;
}
.secure-slide-box .secure-hdg.-has-icon::before {
content: "";
display: block;
height: 5.5em;
width: 100%;
margin-bottom: 0.5em;
background:no-repeat center/contain;
}
.secure-slide-box .secure-hdg.-has-icon.-icon-1::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/icon-secure-shopping.png);
}
.secure-slide-box .secure-hdg.-has-icon.-icon-2::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/icon-secure-compensation.png);
}
.secure-slide-box .secure-hdg.-has-icon.-icon-3::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/icon-secure-push.png);
}
.secure-slide-box .secure-hdg.-has-icon.-icon-4::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/icon-secure-3d.png);
}
@media only screen and (max-width: 768px) {
.slide-wrap.-secure .slide-item {
padding: 0 1.4rem;
}
.slide-wrap.-secure .slick-arrow {
width: 2rem;
height: 4rem;
top: 45%;
}
.slide-wrap.-secure .slick-prev {
left: -1.2rem;
}
.slide-wrap.-secure .slick-next {
right: -1.2rem;
}
}
/********************
.secure-shopping
*********************/
.secure-shopping .secure-text-1 {
font-size: 1.3rem;
line-height: 1.8;
}
@media only screen and (max-width: 768px) {
.secure-shopping .secure-text-1 {
font-size: 1.2rem;
}
}
/********************
.secure-app-wallet
*********************/
.secure-app-wallet {
display: flex;
align-items: stretch;
justify-content: center;
margin: 0.5rem auto;
}
.secure-app-wallet::before {
content: "";
display: block;
background: no-repeat right top/contain url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/img-app-wallet.png);
margin-right: 1em;
width: 11em;
}
.secure-app-wallet .content-text {
text-align: left;
}
.secure-app-wallet .content-text > :first-child {
margin-top: 0;
}
.secure-app-wallet .secure-text-1 {
font-size: 1.2rem;
letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
.secure-app-wallet {
margin: 0.25rem auto;
}
.secure-app-wallet::before {
width: 8.25em;
}
}
/********************
.secure-info-notification
.secure-grid-list
*********************/
.secure-info-notification {
font-size: 1.3rem;
line-height: 1.6;
letter-spacing: 0;
font-weight: bold;
}
.secure-grid-list {
display: grid;
text-align: left;
max-width: 20em;
margin: 0 auto;
}
.secure-grid-list.-justify-stretch {
justify-content: stretch;
}
.secure-grid-list > li {
padding-right: 1em;
}
.secure-grid-list > li:nth-child(2n+1) {
grid-column-start: 1;
grid-column-end: 2;
}
.secure-grid-list > li:nth-child(2n) {
grid-column-start: 2;
grid-column-end: 3;
}
.secure-grid-list > li.w-full {
grid-column: 1 / 3;
padding-right: 0;
width: 100%;
}
@media only screen and (max-width: 768px) {
.secure-info-notification {
font-size: 1.5rem;
}
}
/********************
.secure-chatbot
*********************/
.secure-chatbot {
width: 92%;
}
.hdg-img-chatbot {
max-height: 2.1rem;
display: block;
margin: 0.4rem auto;
width: auto;
height: auto;
}
/********************
.insurance*
*********************/
.insurance-deco-smartphone {
text-align: center;
}
.insurance-deco-smartphone .content {
background: no-repeat url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/deco-smartphone.png) left top/auto 5em;
display: inline-block;
padding: 0 2em;
min-height: 5em;
}
.insurance-deco-smartphone .content > * {
margin-top: 0;
}
.insurance-content-text {
font-size: 20px;
font-weight: bold;
text-align: center;
}
@media only screen and (max-width: 768px) {
.hdg-insurance-wavebox {
font-size: 1.8rem;
}
.insurance-content-text {
font-size: 1.2rem;
}
.insurance-deco-smartphone .content {
background-size: auto 4.2em;
min-height: 4.2em;
padding: 0.5em 1.5em ;
}
}
/********************
─好きを持ち歩こう 選べるカードデザイン─
.section.-card-design
*********************/
.section.-card-design {
background-color: #ffe1fa;
}
@media only screen and (max-width: 768px) {
}
/********************
.card-accordion*
*********************/
.card-accordion {
box-shadow: 5px 5px 0 0 #ff9bf0;
background-color: #fff;
}
.card-accordion-trigger {
align-items: center;
appearance: none;
background-color: #053371;
border: solid #053371 3px;
display: flex;
text-align: center;
width: 100%;
color: #ffff9b;
font-size: 24px;
font-weight: bold;
letter-spacing: 0;
}
body.is-pc .card-accordion-trigger:hover ,
body.is-pc .card-accordion-trigger:focus {
opacity: 1 !important;
}
body.is-pc .card-accordion-trigger:hover .text ,
body.is-pc .card-accordion-trigger:hover .toggle-icon {
opacity: 0.7;
}
.card-accordion-trigger .text {
flex: 1;
padding: 0.5em 0.3em;
}
.card-accordion-trigger .toggle-icon {
flex-shrink: 0;
height: auto;
width: 2.4rem;
margin-left: 0.2rem;
margin: 0 0.3em 0 0.2rem;
}
.card-accordion-trigger .toggle-icon .an-line {
transition: transform 0.2s ease;
transform-origin: 50%;
}
.card-accordion.-is-open .toggle-icon .an-line {
transform: scaleY(0);
}
.card-accordion-trigger .label {
background-color: #ffff9b;
align-self: stretch;
margin: -3px;
padding: 1em 0.8em;
font-size: 60%;
color: #053371;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.card-accordion-trigger .label::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -0.25em;
margin: auto 0;
width: 0.5em;
height: 0.5em;
background-color: #ffff9b;
transform: rotate(45deg);
}
.card-accordion-trigger .label img {
width: 3em;
height: auto;
}
.card-accordion-content {
border: none;
background-color: #fff;
visibility: hidden;
height: 0;
overflow: hidden;
transition: padding 0.2s ease;
padding: 0 1.5em;
box-sizing: border-box;
}
.card-accordion.-is-open .card-accordion-content {
height: auto;
padding-top: 1em;
padding-bottom: 1em;
visibility: visible;
border: solid 4px #053371;
border-top-width: 0;
}
@media only screen and (max-width: 768px) {
.card-accordion-trigger {
font-size: 1.4rem;
}
.card-accordion::after {
box-shadow: -2px -2px 0 0 #053371 inset;
}
.card-accordion-content {
padding: 0 0.8em;
}
.card-accordion.-is-open .card-accordion-content {
border-width: 0 2px 2px 2px;
}
.card-accordion.-is-open::after {
margin-top: -2px;
}
}
/********************
─カードスペック・申込リスト─
.card-spec-list
*********************/
.card-spec-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.card-spec-list > .item {
display: flex;
flex-direction: column;
width: 50%;
padding: 2em 1em;
position: relative;
}
.card-spec-list > .item:nth-child(2n) {
padding-right: 0;
}
.card-spec-list > .item:nth-child(2n+1) {
padding-left: 0;
}
.card-spec-list > .item:nth-child(2n+1):not(:first-child)::before {
content: "";
display: block;
border-top: dotted currentColor 2px;
top: 0;
left: 0;
width: 200%;
position: absolute;
}
.card-spec-list .card-name {
text-align: center;
font-weight: bold;
margin: 0 auto;
min-height: 3em;
display: flex;
align-items: center;
letter-spacing: 0;
}
.card-spec-list .card-img-box {
width: 90%;
max-width: 200px;
height: 10em;
margin-top: 0.8em;
}
.card-spec-list .card-img {
margin: 0 auto;
border-radius: 0.4em;
border: 1px solid #eee;
}
.card-spec-list .appeal-label {
background-color: #ffff9b;
color: #053371;
padding: 0.5em 1em;
margin: 0.25em auto;
width: 100%;
text-align: center;
letter-spacing: 0;
font-weight: bold;
}
.card-spec-list .card-apply {
width: 100%;
text-align: center;
margin-top: auto;
}
.card-spec-list .card-brands {
margin: 0.5rem auto;
}
.card-spec-list .card-brands .brand-img {
max-width : 2.4em;
max-height: 2.4em;
margin: 0 0.2em;
}
.card-spec-list .card-apply .supple {
color: #053371;
border: solid 0.2em #053371;
max-width: 250px;
width: 96%;
margin: 10px auto 0;
border-radius: 0.4em;
font-weight: bold;
}
.card-spec-list .card-apply .btn {
width: 90%;
max-width: 250px;
letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
.card-spec-list > .item {
padding: 2em 0.4em;
}
.card-spec-list > .item:nth-child(1) ,
.card-spec-list > .item:nth-child(2) {
padding-top: 1em;
}
.card-spec-list .appeal-label {
font-size: 1.15rem;
text-align: left;
letter-spacing: 0;
padding: 0.5em 0.75em;
}
.card-spec-list .card-img-box {
height: 9em;
max-width: 300px;
}
.card-spec-list .card-apply .supple {
font-size: 1.2rem;
margin: 0.2em auto;
}
.card-spec-list .card-apply .btn {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.card-spec-list .card-apply .btn .design {
padding: 0.5em 2em 0.5em 1em;
}
}
/********************
─最短5分でカンタン申込み─
.section.-apply-method
*********************/
.section.-apply-method {
background-color: #ffffcd;
}
@media only screen and (max-width: 768px) {
}
/********************
.step-list
*********************/
.step-list-frame {
margin: 1.5rem auto 0;
width: 87%;
max-width: 600px;
}
.step-list > li {
display: flex;
margin: 1.7rem auto;
border-radius: 2.5em/50%;
background-color: #053371;
border: solid 2px #053371;
align-items: stretch;
overflow: hidden;
font-weight: bold;
}
.step-list > li .number {
flex-grow: 0;
flex-shrink: 0;
color: #fff;
padding: 0.6em 1.6em;
padding-left: 2em;
text-align: center;
letter-spacing: 0;
line-height: 1;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
}
.step-list > li .number .decimal {
display: block;
font-size: 200%;
}
.step-list > li .content {
background-color: #fff;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.4em 1em;
font-size: 22px;
line-height: 1.3;
min-height: 3.7em;
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.step-list-frame {
max-width: none;
}
.step-list > li {
border-radius: 2em/50%;
}
.step-list > li .number {
font-size: 1.0rem;
padding-left: 1.6em;
}
.step-list > li .content {
font-size: 1.2rem;
}
}
/********************
─タブエリア─
.tab-root
*********************/
.tab-root {
display: flex;
flex-wrap: wrap;
margin: 20px auto;
}
@media only screen and (max-width: 768px) {
}
/********************
.tab-selector
*********************/
.tab-selector {
flex: 1 1;
order: -1;
margin-left: 10px;
}
.tab-selector:first-of-type {
margin-left: 2px;
}
.tab-selector:last-of-type {
margin-right: 2px;
}
.tab-selector.-current {
z-index: 2;
}
.tab-selector input {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
appearance: none;
-webkit-appearance: none;
margin: 0;
padding: 0;
border: none;
background-color: transparent;
display: block;
}
.tab-selector ,
.tab-selector .design {
border-radius: 0.5em 0.5em 0 0;
}
.tab-selector .design {
display: block;
color: #fff;
background-color: #053371;
cursor: pointer;
padding: 0.7em 0.6em 0.5em;
border: solid 2px #053371;
border-width: 2px 2px 0 2px;
font-size: 28px;
font-weight: bold;
letter-spacing: 0.05em;
text-align: center;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.tab-selector :checked + .design {
background-color: #fff;
color: #053371;
}
.tab-selector .design {
box-shadow: 0 2px 0 0 #053371;
}
.tab-selector.-current .design {
box-shadow: 2px 0 0 0 #053371;
cursor: default;
}
.tab-selector.-current .design::after {
content: "";
display: block;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
position: absolute;
background: #fff;
}
.tab-selector:first-of-type.-current {
margin-left: 0;
}
.tab-selector:last-of-type.-current {
margin-right: 0;
}
@media only screen and (max-width: 768px) {
.tab-selector {
margin-left: 0.5rem;
}
.tab-selector .design {
font-size: 1.8rem;
}
}
/********************
.tab-content
*********************/
.tab-content {
width: 100%;
background-color: #fff;
padding: 2rem 1rem;
border: 2px solid #053371;
border-radius: 0.5rem;
display: none;
position: relative;
z-index: 1;
top: -2px;
box-shadow: 2px 2px 0 0 #053371;
text-align: center;
}
.tab-content:first-of-type {
border-top-left-radius: 0;
}
.tab-content:last-of-type {
border-top-right-radius: 0;
}
.tab-content.-current {
display: block;
}
@media only screen and (max-width: 768px) {
.tab-content {
border-radius: 5px;
}
}
/********************
─よくある質問─
.section.-faq
*********************/
.section.-faq {
background-color: #bae1ed;
padding-top: 5rem;
padding-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
}
/********************
.faq-list
.qa-box
*********************/
.faq-list {
margin: 20px auto;
font-size: 18px;
letter-spacing: 0.05em;
line-height: 1.6;
}
.faq-list p ,
.faq-list ul {
font-weight: bold;
}
.faq-list .qa-box {
text-align: left;
background-color: #fff;
border: solid #053371 3px;
border-radius: 0.4em;
margin: 20px auto;
margin: 1.5em auto;
box-shadow: 4px 6px 0px 0px #053371;
}
.faq-list .qa-question {
cursor: pointer;
padding: 0.75em;
}
.faq-list .question-heading {
position: relative;
padding-right: 3em;
font-weight: bold;
min-height: 3em;
display: flex;
align-items: center;
}
.faq-list .question-heading::after {
content: "";
display: block;
position: absolute;
background: no-repeat url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/icon-plus.png) center/contain;
width: 2em;
height: 2em;
top: 0.5em;
right: 0;
}
.faq-list .qa-box .qa-icon {
display: inline-block;
width: 2.25em;
height: 2.75em;
margin-right: 0.75em;
display: flex;
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
flex-grow: 0;
align-self: flex-start;
}
.faq-list .question-heading .qa-icon {
margin-top: 0.25em;
}
.faq-list .qa-box .qa-icon img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.faq-list .qa-answer {
margin-top: 10px;
visibility: hidden;
height: 0;
margin: 0 0.75em;
overflow: hidden;
padding: 0;
display: flex;
}
.faq-list .answer-text {
line-height: 1;
will-change: line-height;
transition: line-height 0.1s linear;
}
.faq-list .answer-text a {
color: #0b7ed4;
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-color: currentColor;
}
@media only screen and (max-width: 768px) {
.faq-list {
font-size: 1.5rem;
}
.faq-list .qa-box {
box-shadow: 2px 3px 0px 0px #053371;
}
}
@media only screen and (max-width: 319px){
.faq-list {
font-size: 4.375vw;
}
}
/********************
.faq-list
.-is-open
*********************/
.faq-list .qa-box.-is-open .question-heading::after {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_c/images/icon-minus.png);
}
.faq-list .qa-box.-is-open .qa-answer {
visibility: visible;
opacity: 1;
padding: 0.75em 0 1.25em;
height: auto;
border-top: dotted #053371 3px;
}
.faq-list .qa-box.-is-open .answer-text {
line-height: inherit;
}
/********************
─ページ下部─
.section.-pagebottom
*********************/
.section.-pagebottom {
padding: 1px 0;
background-color: #bae1ed;
}
@media only screen and (max-width: 768px) {
}
/********************
.to-pagetop-btn
*********************/
.to-pagetop-btn-wrap {
position: relative;
min-height: 100px;
}
.to-pagetop-btn {
position: absolute;
bottom: 30px;
right: 20px;
cursor: pointer;
z-index: 10;
text-align: center;
width: 60px;
visibility: hidden;
opacity: 0;
}
.to-pagetop-btn.-is-show {
opacity: 1;
visibility: visible;
}
.to-pagetop-btn.-is-show:hover {
opacity: 0.8;
}
.to-pagetop-btn.-fixed {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 90;
}
.to-pagetop-btn.-is-show {
transition: opacity 0.2s ease 0s, visibility 0s ease 0s;
}
.to-pagetop-btn:not(.-is-show) {
transition: opacity 0.2s ease 0s, visibility 0s ease 0.2s;
}
.to-pagetop-btn.-fixed.-is-show {
transition: opacity 0.2s ease 0s, visibility 0s ease 0s, bottom 0.2s ease 0s;
}
.to-pagetop-btn.-fixed:not(.-is-show) {
transition: opacity 0.2s ease 0s, visibility 0s ease 0.2s, bottom 0.2s ease 0s;
}
@media only screen and (max-width: 768px) {
.to-pagetop-btn-wrap {
min-height: 8rem;
}
.to-pagetop-btn {
width: 3.8rem;
}
.to-pagetop-btn.-is-show:hover {
opacity: 1;
}
}
/********************
─追従─
.follow-bottom
*********************/
.follow-bottom {
position: fixed;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 -10px 15px 5px rgba(0, 0, 0, 0.1);
left: 0;
right: 0;
bottom: 0;
height: auto;
z-index: 100;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease;
}
.follow-bottom-content {
padding: 1.5rem;
text-align: center;
}
.follow-bottom-content .anchor-img {
display: inline-block;
}
.follow-bottom-content .anchor-img img {
display: block;
margin: 0 auto;
width: auto;
height: auto;
max-height: 4.5rem;
}
.follow-bottom.-is-show {
visibility: visible;
opacity: 1;
}
.follow-bottom:not(.-is-show) {
transition-property: opacity, visibility;
transition-delay: 0, 0.2s;
}
@media only screen and (max-width: 768px) {
.follow-bottom {
box-shadow: 0 -4vw 6vw 2vw rgba(0, 0, 0, 0.1);
}
.follow-bottom-content .anchor-img img {
max-height: 5.5rem;
}
}