@charset "utf-8";
/***************
--- var ---
****************/
:root {
--shadow-base: 0 0 15px 0 rgba(5, 51, 113, 0.15);
--gradient-base: linear-gradient(135deg, #d3b7f9, #a9d8fb);
}
@media only screen and (max-width: 768px) {
:root {
--shadow-base: 0 0 0.5rem 0 rgba(5, 51, 113, 0.15);
}
}
/***************
--- 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;
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
****************/
.mh-auto {
margin-right: auto;
margin-left: auto;
}
.block-center {
width: fit-content;
margin-left : auto;
margin-right: auto;
}
.ta-left {
text-align: left !important;
}
.ta-center {
text-align: center !important;
}
.ta-right {
text-align: right !important;
}
.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;
}
.text-num {
font-family: sans-serif;
}
.text-link {
display: inline-block;
color: #053371;
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-color: currentColor;
}
/***************
display
****************/
.inline-block {
display: inline-block;
}
.block {
display: block;
}
@media only screen and (min-width: 769px) {
.pc-none {
display: none !important;
}
.pc-block {
display: block;
}
.pc-inline-block {
display: inline-block;
}
}
@media only screen and (max-width: 768px) {
.sp-none {
display: none !important;
}
.sp-block {
display: block;
}
.sp-inline-block {
display: inline-block;
}
}
/***************
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)
*********************/
.mb05rem { margin-bottom: 0.5rem !important; }
.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; }
/********************
.mr* : *rem
(margin horizontal)
*********************/
.mr1rem { margin-right: 1rem !important; }
.mr2rem { margin-right: 2rem !important; }
.mr3rem { margin-right: 3rem !important; }
.mr4rem { margin-right: 4rem !important; }
.mr5rem { margin-right: 5rem !important; }
/********************
.ml* : *rem
(margin horizontal)
*********************/
.ml1rem { margin-left: 1rem !important; }
.ml2rem { margin-left: 2rem !important; }
.ml3rem { margin-left: 3rem !important; }
.ml4rem { margin-left: 4rem !important; }
.ml5rem { margin-left: 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%; }
/********************
.fs-*rem
*********************/
.fs-10rem { font-size: 1.0rem; }
.fs-11rem { font-size: 1.1rem; }
.fs-12rem { font-size: 1.2rem; }
.fs-13rem { font-size: 1.3rem; }
.fs-14rem { font-size: 1.4rem; }
.fs-15rem { font-size: 1.5rem; }
.fs-16rem { font-size: 1.6rem; }
/********************
.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-gradient {
background: var(--gradient-base);
}
/********************
─文字色─
.fc-*
*********************/
.fc-inherit {
color: inherit;
}
.fc-default {
color: #130f21;
}
.fc-red {
color: #ff0000;
}
.fc-blue {
color: #053371;
}
.fc-yellow {
color: #fffec1;
}
.fc-pink {
color: #dc0695;
}
/********************
─字間─
.ls-*
*********************/
.ls-narrow {
letter-spacing: -0.025em !important;
}
.ls-0 {
letter-spacing: 0 !important;
}
.ls-0025em {
letter-spacing: 0.025em;
}
.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, #fffec1 0.5em, transparent 0.5em, transparent 100%);
}
.text-marker-2 {
background: linear-gradient(to top, #d4ebfd 0.5em, transparent 0.5em, transparent 100%);
}
/********************
.callout-text
*********************/
.callout-text {
display: inline-block;
padding: 0 1.5em;
position: relative;
}
.callout-text::before ,
.callout-text::after {
content: "";
display: block;
width: 1px;
height: 1.2em;
position: absolute;
bottom: 0;
margin-bottom: 0.25em;
background-color: currentColor;
transform-origin: center bottom;
}
.callout-text::before {
left: 1.4em;
transform: rotate(-45deg);
}
.callout-text::after {
right: 1.4em;
transform: rotate(45deg);
}
/********************
─インライン画像─
.img-inline-*
*********************/
.img-inline {
display: inline-block;
width: auto;
height: auto;
max-width: 100%;
vertical-align: baseline;
overflow: visible;
}
.img-inline.-middle {
vertical-align: middle;
}
.img-inline.-bottom {
vertical-align: bottom;
}
.img-inline.-baseline {
vertical-align: baseline;
}
.img-inline.-maxh-0125em {
max-height: 1.25em;
}
.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.-maxh-0225em {
max-height: 2.25em;
}
.img-inline.-maxh-0250em {
max-height: 2.50em;
}
.img-inline.-maxh-0275em {
max-height: 2.75em;
}
.img-inline.-maxh-0300em {
max-height: 3.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;
overflow: visible;
}
.img-inline.-mh10 {
margin-right: 0.1em;
margin-left : 0.1em;
}
/********************
img.balloon-popout
*********************/
img.balloon-popout {
display: block;
width: auto;
height: auto;
max-height: 1.5em;
max-width: 100%;
margin-top: -1.5em;
overflow: visible;
}
/********************
.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_hokkaido/images/illust-register.png);
margin-top: 0.5em;
}
.img-content-list > li.img-2::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/images/illust-terminal.png);
}
.img-content-list > li.img-3::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/images/illust-smcard.png);
}
.img-content-list > li.img-4::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/images/illust-payment.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;
}
}
/********************
.pict-texts
*********************/
.pict-texts {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.pict-texts .picture {
max-width: 28%;
margin-right: 1em;
}
.pict-texts .texts {
}
@media only screen and (max-width: 768px) {
.pict-texts {
display: flex;
align-items: flex-start;
font-size: 1.2rem;
}
}
/********************
--- 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;
background-color: #edeefd;
}
@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 .design::before
└●
.btn .design::after
└＞
*********************/
.btn {
display: inline-block;
position: relative;
color: #fff;
font-size: 16px;
min-width: 40%;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
.btn .design {
display: block;
background-color: #053371;
padding: 0.6em 1.8em 0.6em 1.2em;
position: relative;
font-weight: bold;
}
.btn .design .text {
margin-left: 0.25em;
}
.btn .design::before ,
.btn .design::after {
content: "";
display: block;
position: absolute;
}
.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: #fff;
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 #053371;
border-width: 0 0.2em 0.2em 0;
transform: rotate(-45deg);
}
@media only screen and (max-width: 768px) {
.btn {
font-size: 1.5rem;
}
}
/********************
─ボタンオプション
.-down
.-arrow-simple
.-square
.-gradient
.-wide
.-shadow
*********************/
.btn.-down .design::after {
transform: rotate(45deg);
margin-right: -0.08em;
bottom: 0.16em;
}
.btn.-square .design {
border-radius: 0.25em;
}
.btn.-arrow-simple .design::before {
display: none;
}
.btn.-arrow-simple .design::after {
border-color: currentColor;
}
.btn.-arrow-simple .design {
padding-right: 1.4em;
padding-left: 1.0em;
}
.btn.-gradient .design {
background: var(--gradient-base);
color: #053371;
border: 0.05em solid #fff;
}
.btn.-wide {
width: 100%;
max-width: 600px;
}
.btn.-shadow .design {
box-shadow: 0 0.3em 0.6em 0 rgba(5, 51, 113, 0.25);
}
/********************
─ボックス─
.box
.-border-*
.-rounded
*********************/
.box {
margin: 3rem auto 0.8rem;
background-color: #fff;
box-shadow: 0 0 15px 0 rgba(5, 51, 113, 0.15);
}
.box + .box {
margin-top: 2.5rem;
}
.box-inner {
padding: 2rem 1.6rem;
}
.box-inner:last-child > :last-child {
margin-bottom: 1rem;
}
.adjust-box-frame {
padding: 0 1.6rem;
}
.box.-rounded {
border-radius: 1.4rem;
}
.box.-border-yellow {
border: 2px solid #fffec1;
}
.box.-bg-blue {
background-color: #e6f4f8;
}
.box.-shadow-none {
box-shadow: none;
}
.nega-margin-box-left {
margin-left: -1.6rem;
}
@media only screen and (max-width: 768px) {
.box {
margin: 1.8em auto 0.8em;
}
.box-inner {
padding: 2rem 1.2rem;
}
.nega-margin-box-left {
margin-left: -1.2rem;
}
}
/********************
.box-heading
*********************/
.box-heading {
text-align: center;
font-size: 26px;
font-weight: bold;
color: #053371;
border-bottom: solid 4px #053371;
line-height: 1.33;
padding-bottom: 0.25em;
}
@media only screen and (max-width: 768px) {
.box-heading {
font-size: 1.8rem;
border-bottom-width: 0.1rem;
}
}
/********************
─見出し─
.hdg-basic
*********************/
.hdg-basic {
position: relative;
text-align: center;
margin: 4rem auto 2rem;
color: #053371;
font-size: 28px;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 1.3;
}
.hdg-basic.-topLine {
border-top: solid 1.5px #053371;
padding-top: 0.8em;
}
.hdg-basic.-bottomLine {
border-bottom: solid 5px #053371;
padding-bottom: 0.5em;
}
@media only screen and (max-width: 768px) {
.hdg-basic {
font-size: 1.8rem;
}
.hdg-basic.-topLine {
border-top-width: 1.5px;
}
.hdg-basic.-bottomLine {
border-bottom-width: 5px;
}
}
/********************
─見出し（破線）─
.hdg-dashed
*********************/
.hdg-dashed {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #053371;
margin: 1rem auto 0.5rem;
}
.hdg-dashed .text {
flex-grow: 0;
margin: 0 0.5em;
font-weight: bold;
max-width: calc(100% - 4em);
}
.hdg-dashed::before ,
.hdg-dashed::after {
content: "";
display: block;
box-sizing: content-box;
border-top: dashed 0.1em currentColor;
flex-grow: 1;
}
@media only screen and (max-width: 768px) {
.hdg-dashed .text {
font-size: 1.2rem;
}
}
/********************
.hdg-fill-round
*********************/
.hdg-fill-round {
text-align: center;
font-size: 24px;
color: #053371;
margin: 1.2rem auto 0.8rem;
}
.hdg-fill-round .design {
display: inline-block;
background: var(--gradient-base);
padding: 0.5em 1.6em;
border-radius: 1.2em/50%;
line-height: 1.3;
letter-spacing: 0;
font-weight: bold;
width: 93%;
}
.box .hdg-fill-round .design {
width: 100%;
}
@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: 22px;
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: 22px;
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: 20px;
}
.text-appeal.-small-2 {
font-size: 18px;
}
.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;
}
}
/********************
─アコーディオン─
.accordion*
*********************/
.accordion-wrap {
color: #053371;
border: solid 2px currentColor;
background-color: #fff;
margin: 1.5rem auto;
}
.accordion-wrap.-color-2 {
color: #dc0695;
}
.accordion-trigger {
appearance: none;
cursor: pointer;
display: block;
text-align: center;
width: 100%;
padding: 0.8em 2.2em 0.8em 1.2em;
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.3rem;
}
.accordion-wrap.-is-open .accordion-content {
padding: 1em 1em;
}
}
/********************
─カード画像ボックス─
.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;
font-family: HelveticaNeue,Helvetica Neue,Arial,Hiragino Sans,メイリオ,Meiryo,sans-serif;
top: 100%;
left: 0;
right: 0;
line-height: 1;
}
.card-img-box .card-img {
border: 1px solid #eee;
border-radius: 0.35em;
}
.card-img-box.-auto-aspect {
aspect-ratio: auto;
}
@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;
}
/********************
.card-accordion*
*********************/
.card-accordion {
box-shadow: var(--shadow-base);
background-color: #fff;
}
.card-accordion-trigger {
align-items: center;
appearance: none;
background-color: #053371;
border: solid #053371 4px;
display: flex;
text-align: center;
width: 100%;
color: #fffec1;
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-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;
border-width: 2px;
}
.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-link-list
*********************/
.card-link-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.card-link-list > .item {
display: flex;
flex-direction: column;
width: 44.7%;
position: relative;
margin: auto;
}
.card-link-list > .item:nth-child(2n) {
margin-left: 1.5%;
}
.card-link-list > .item:nth-child(2n+1) {
margin-right: 1.5%;
}
.card-link-list .card-img-box {
width: 100%;
}
.card-link-list .card-img-box .card-copyright {
font-size: 12px;
}
.card-link-list .card-name {
text-align: center;
font-weight: bold;
margin: 0 auto;
min-height: 3em;
letter-spacing: 0;
font-size: 24px;
}
.card-link-list .card-apply {
width: 100%;
text-align: center;
margin-top: auto;
}
.card-link-list .card-apply .btn {
width: 90%;
max-width: 250px;
letter-spacing: 0;
margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
.card-link-list .card-name {
font-size: 1.5rem;
}
.card-link-list .card-img-box .card-copyright {
font-size: 0.9rem;
}
.card-link-list .card-apply .btn {
font-size: 1.4rem;
width: 100%;
max-width: none;
}
}
/********************
─カードスペック・申込リスト─
.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;
flex-direction: column;
align-items: center;
justify-content: center;
letter-spacing: 0;
font-size: 16px;
}
.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;
}
.card-spec-list .appeal-label {
background-color: #fffec1;
color: #053371;
padding: 0.5em 1em;
margin: 0.25em auto;
width: 100%;
text-align: center;
letter-spacing: 0;
font-size: 14px;
font-weight: bold;
}
.card-spec-list .appeal-text {
font-size: 14px;
font-weight: bold;
letter-spacing: 0.05em;
}
.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;
overflow: visible;
line-height: 1;
}
.card-spec-list .card-apply .supple {
color: #053371;
border: solid 0.1em #053371;
max-width: 250px;
width: 96%;
margin: 10px auto 0;
border-radius: 0.4em;
}
.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 .card-name {
font-size: 1.2rem;
}
.card-spec-list .appeal-label {
font-size: 1.25rem;
text-align: left;
letter-spacing: 0;
padding: 0.5em 0.75em;
}
.card-spec-list .appeal-text {
font-size: 1.2rem;
}
.card-spec-list .appeal-label + .appeal-text {
margin-top: 0.5em;
}
.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;
}
}
/********************
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_hokkaido/images/arrow-slide-next.png);
right: 0;
}
.slide-wrap .slick-prev {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/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;
text-align: center;
margin: 2rem auto -2rem;
}
.slide-wrap.-card {
position: relative;
}
.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: var(--shadow-base);
margin: 1em auto;
text-align: center;
display: flex;
flex-direction: column;
position: relative;
}
.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: 28px;
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: 18px;
font-weight: bold;
margin: auto;
}
.card-slide-box .card-apply {
justify-self: flex-end;
margin: 0.5em auto 0;
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: 4rem;
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: 60%;
}
.card-slide-box .card-brands .brand-img {
max-width: 2.6em;
max-height: 2.6em;
}
.card-slide-box .card-apply {
margin-top: 0.25rem;
}
.card-slide-box .card-apply .supple {
font-size: 1.2rem;
}
.card-slide-box .btn {
font-size: 1.5rem;
}
}
/********************
─水平線─
.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;
}
}
/********************
.first-visual
*********************/
.fv-section {
background: linear-gradient(90deg,#d3b7f9 0%,#d3b7f9 48%, #a9d7fb 52%, #a9d7fb 100%);
}
.first-visual {
text-align: center;
padding: 0 10px;
}
.first-visual img {
display: block;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.fv-section {
background: linear-gradient(135deg, #d3b7f9, #a9d7fb);
}
.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-open {
opacity: 0.5;
}
.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: var(--shadow-base);
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: #fffec1;
border-radius: 3em/50%;
color: #053371;
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 img.menu-text {
width: auto;
height: auto;
max-height: 2.4em;
max-width: 100%;
display: block;
margin: auto;
}
.overlay-menu-list > li.rankup 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%;
}
/********************
.slide-wrap.-banner
*********************/
.slide-wrap.-banner .slide-banner {
margin: 0 auto 3rem;
max-width: 480px;
}
.slide-wrap.-banner .slide-banner .slide-item {
padding: 0 48px;
text-align: center;
}
.slide-wrap.-banner .slide-banner a img {
border: solid 1px #eee;
}
@media only screen and (max-width: 768px) {
}
/********************
.othercards-apply*
*********************/
.othercards-apply {
margin: 0 auto;
max-width: 960px;
}
.othercards-apply-list {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
margin: 2rem auto 1rem;
}
.othercards-apply-list > li {
margin: 0 2%;
flex-shrink: 1;
box-shadow: 0.2rem 0.2rem 0 0 #053371;
}
@media only screen and (max-width: 768px) {
.othercards-apply-list > li {
margin: 0;
box-shadow: none;
}
}
/********************
─冒頭アンカー─
.anchor-list
*********************/
.anchor-wrap {
background-color: #053371;
position: relative;
z-index: 1;
margin-top: 4rem;
box-shadow: 0 0.5em 0.5em 0 rgba(127,127,127,0.2);
}
.anchor-list {
display: flex;
align-items: stretch;
max-width: 800px;
margin: 0 auto;
background-color: #fffec1;
}
.anchor-list > li {
flex-grow: 1;
text-align: center;
display: flex;
align-items: stretch;
width: 25%;
position: relative;
}
.anchor-list > li + li::before {
content: "";
display: block;
position: absolute;
width: 2px;
height: auto;
top: 0.5em;
bottom: 0.5em;
left: -1px;
background-color: #053371;
z-index: 1;
}
.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: #fffec1;
}
.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;
overflow: visible;
}
@media only screen and (max-width: 768px) {
.anchor-wrap {
margin-top: 2.5rem;
background-color: transparent;
}
.anchor-list > li + li::before {
width: 1px;
left: -0.5px;
}
.anchor-list > li a {
font-size: 100%;
}
}
/********************
─人気のカードはこちら─
.section.-card-popular
*********************/
.section.-card-popular {
padding-bottom: 1rem;
}
.contents-frame.-card-popular {
max-width: 700px;
}
@media only screen and (max-width: 768px) {
}
/********************
─ゴールドカードにランクアップ─
.section.-goldcard-rankup
*********************/
.section.-goldcard-rankup {
padding-top: 1em;
}
@media only screen and (max-width: 768px) {
.section.-goldcard-rankup {
}
}
/********************
.travel-appeal-list
*********************/
.travel-appeal-list > .group {
text-align: center;
padding: 1rem;
}
.travel-appeal-list > .group + .group {
border-top: 2px solid #edeefd;
}
.travel-appeal-list > .group > .heading {
font-weight: bold;
color: #053371;
font-size: 22px;
margin-bottom: 0.5em;
}
.travel-appeal-list > .group > .content a {
color: #0b7ed4;
text-decoration: underline;
text-underline-offset: 0.25em;
text-decoration-color: currentColor;
}
@media only screen and (max-width: 768px) {
.travel-appeal-list > .group > .heading {
font-size: 1.5rem;
}
.travel-appeal-list > .group > .content {
font-size: 1.2rem;
}
}
/********************
─ゴールドカードになる近道─
.section.-goldcard-shortcut
*********************/
.section.-goldcard-shortcut {
padding-top: 1rem;
padding-bottom: 2rem;
}
/********************
─ポイントがたまる・使える─
.section.-point-method
*********************/
.section.-point-method {
padding-top: 2rem;
padding-bottom: 1rem;
}
/********************
─カード申込リスト─
.card-apply-list
*********************/
.card-apply-list {
display: flex;
align-items: stretch;
}
.card-apply-list > li {
width: 31%;
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;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex-grow: 1;
}
.card-apply-list .card-img-box {
height: 9em;
aspect-ratio: auto;
max-width: 160px;
margin-bottom: 1.5em;
}
/*
.card-apply-list .card-img-box .card-img {
border: 0.5px 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;
margin: 0.8em auto;
width: 90%;
}
.card-apply-list .btn-wrap .btn .design {
border-width: 0.15em;
}
.card-apply-list.-column2 > li {
width: 48%;
font-size: 13px;
}
@media only screen and (max-width: 768px) {
.card-apply-list > li {
font-size: 0.8rem;
}
.card-apply-list .card-img-box {
height: 8rem;
margin-bottom: 1em;
}
.card-apply-list .card-copyright {
font-size: 0.7rem;
}
.card-apply-list .btn-wrap .btn {
font-size: 1.0rem;
}
}
/********************
.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 {
padding-top: 2rem;
}
/********************
.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: #d4ebfd;
padding: 0.6rem 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: flex-start;
box-shadow: 0 0 15px 0 rgba(5, 51, 113, 0.15);
margin: 0.2rem 0;
padding: 1.6rem;
border-radius: 1rem;
text-align: center;
}
.secure-slide-box .secure-hdg ,
.secure-slide-box .secure-slide-hdg {
font-size: 24px;
font-weight: bold;
color: #053371;
}
.secure-slide-box .secure-hdg {
margin-top: 0.5em;
}
.secure-slide-box > .secure-hdg:first-child {
margin-top: 0;
}
.secure-slide-box .secure-slide-hdg {
position: relative;
border-bottom: dotted currentColor 0.2rem;
min-height: 2.8em;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 0 0.2em 2.6em;
justify-self: flex-start;
line-height: 1.3;
}
.secure-slide-box .secure-slide-hdg::before {
content: "";
display: block;
width: 2.4em;
height: 2.4em;
position: absolute;
background:no-repeat center/contain;
top: 0;
left: 0;
}
.secure-slide-box .secure-slide-hdg.-icon-1::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/images/icon-secure-shopping.png);
}
.secure-slide-box .secure-slide-hdg.-icon-2::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/images/icon-secure-compensation.png);
}
.secure-slide-box .secure-slide-hdg.-icon-3::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/images/icon-secure-push.png);
}
.secure-slide-box .secure-slide-hdg.-icon-4::before {
background-image: url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/images/icon-secure-3d.png);
}
.secure-slide-box .secure-slide-hdg::after {
content: "";
display: block;
flex-grow: 0.3;
}
.secure-slide-box .secure-slide-hdg .text {
display: block;
flex-grow: 0.7;
text-align: center;
}
.secure-slide-box .secure-slide-contents {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
@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-slide-box .secure-hdg ,
.secure-slide-box .secure-slide-hdg {
font-size: 1.55rem;
}
}
/********************
.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 center/contain url(/-/media/AeonCard/campaign/lp/credit_debut_hokkaido/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: 7.5rem;
}
}
/********************
.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;
}
}
/********************
─その他のカード─
.section.-card-other
*********************/
.section.-card-other {
padding-top: 1rem;
padding-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
}
/********************
─最短5分でカンタン申込み─
.section.-apply-method
*********************/
.section.-apply-method {
padding-top: 2rem;
}
@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;
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.-current .design {
box-shadow: var(--shadow-base);
cursor: default;
}
.tab-selector.-current .design::after {
content: "";
display: block;
bottom: -1px;
bottom: -1em;
left: 0;
right: 0;
height: 2px;
height: 1em;
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-radius: 0.5rem;
display: none;
position: relative;
z-index: 1;
top: -2px;
box-shadow: 2px 2px 0 0 #053371;
box-shadow: var(--shadow-base);
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.-pagebottom
*********************/
.section.-pagebottom {
padding: 1px 0;
}
@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: 1rem;
text-align: center;
}
.follow-bottom.-is-show {
visibility: visible;
opacity: 1;
}
.follow-bottom:not(.-is-show) {
transition-property: opacity, visibility;
transition-delay: 0, 0.2s;
}
.follow-bottom-content .btn {
font-size: 22px;
line-height: 1.166;
letter-spacing: 0.1em;
margin-top: 0;
margin-bottom: 0.5rem;
}
body.is-pc .follow-bottom-content .btn:hover {
opacity: 0.75 !important;
}
@media only screen and (max-width: 768px) {
.follow-bottom {
box-shadow: 0 -4vw 6vw 2vw rgba(0, 0, 0, 0.1);
}
.follow-bottom-content .btn {
font-size: 1.6rem;
max-width: 95%;
}
.follow-bottom-content .btn .design {
padding-top: 0.4em;
padding-bottom: 0.4em;
line-height: 1.166;
}
}