/*------------------------------------
styles
--------------------------------------*/
html {
scroll-behavior: smooth;
--txt-black: #3a3e3f;
--clr-navy: #48587e;
--clr-lightBlue: #e7fcff;
--clr-red: #e50b18;
--clr-blue: #00bcd4;
--clr-yellow: #ecbb48;
--clr-highlight: #fafe3b;
--clr-bg-body: #d1f3f7;
--clr-bg-contents: #f6feff;
}
body {
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
color: var(--txt-black);
line-height: 1.5;
background: var(--clr-bg-body);
img {
max-width: 100%;
}
}
main {
max-width: 640px;
margin: 0 auto;
background: var(--clr-bg-contents);
box-sizing: border-box;
@media screen and (max-width: 768px) {
overflow-x: hidden;
}
}
a {
transition: all 0.3s;
&:hover {
opacity: 0.8;
}
}
.red {
color: var(--clr-red);
}
b {
font-weight: bold;
}
@keyframes blinking {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*------------------------------------
Top
--------------------------------------*/
.Top {
overflow: hidden;
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: grid;
place-items: center;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
}
/* 大見出し */
.SectionTitle {
color: #fff;
font-size: 20px;
font-weight: 700;
background: var(--clr-blue);
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
&:before,
&:after {
content: "";
display: block;
height: 2px;
background: white;
width: 100%;
position: absolute;
}
&:before {
top: 2px;
}
&:after {
bottom: 2px;
}
}
/* 小見出し */
.Heading {
color: var(--clr-navy);
font-size: 18px;
font-weight: 700;
line-height: 20px;
border-bottom: 3px solid var(--clr-yellow);
padding-bottom: 12px;
margin-top: 16px;
width: 100%;
}
/* 共通スペースとレイアウトリズムを定義 */
.Wrapper {
display: grid;
place-items: center;
gap: 16px;
padding: 16px 16px 32px;
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* かんたん検索 */
.Search {
padding: 16px;
.inner {
border: 1px solid var(--clr-blue);
border-radius: 4px;
overflow: hidden;
background: white;
}
.box_title {
background: var(--clr-blue);
font-size: 14px;
font-weight: 900;
text-align: center;
padding-block: 8px;
color: white;
}
.box_in {
padding: 24px 16px;
}
#step_area html {
line-height: 1;
}
#step_area ol,
#step_area ul {
list-style: none;
}
#step_area table {
border-collapse: collapse;
border-spacing: 0;
}
#step_area caption,
#step_area th,
#step_area td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
#step_area q,
#step_area blockquote {
quotes: none;
}
#step_area q:before,
#step_area q:after,
#step_area blockquote:before,
#step_area blockquote:after {
content: "";
content: none;
}
#step_area a img {
border: none;
}
#step_area article,
#step_area aside,
#step_area details,
#step_area figcaption,
#step_area figure,
#step_area footer,
#step_area header,
#step_area hgroup,
#step_area main,
#step_area menu,
#step_area nav,
#step_area section,
#step_area summary {
display: block;
}
#step_area html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
#step_area body {
font-family: "Noto Sans JP", sans-serif;
color: #696969;
}
#step_area input,
#step_area select,
#step_area textarea,
#step_area button,
#step_area option {
font-family: "Noto Sans JP", sans-serif;
color: #696969;
font-size: 1rem;
}
#step_area button {
cursor: pointer;
}
#step_area a {
text-decoration: none;
color: #696969;
}
#step_area input[type="submit"] {
-webkit-appearance: none;
}
:root {
--main-color: #5bb75b;
--sub-color: #ff7e0e;
}
#step_area {
background: #fff;
position: relative;
}
#step_area .step_title {
font-size: 16px;
text-align: center;
margin: 0 0 10px;
}
#step_area .step_title span.__small{
font-size: 12px;
}
#step_area .step_count {
padding: 0.5rem;
}
#step_area .step_count ul {
display: flex;
justify-content: center;
margin: 0 0 6px;
}
#step_area .step_count ul li {
background: #b0b0b0;
padding: 0.5rem;
border-radius: 50%;
color: #ffffff;
position: relative;
}
#step_area .step_count ul li.active {
background: #ffd940;
color: #666;
font-weight: bold;
}
#step_area .step_count ul li.active:not(:first-of-type):before {
background: #ffd940;
}
#step_area .step_count ul li:not(:first-of-type) {
margin-left: 1rem;
}
#step_area .step_count ul li:not(:first-of-type):before {
content: "";
display: block;
background: #b0b0b0;
height: 2px;
position: absolute;
left: -1rem;
width: 1rem;
top: 50%;
transform: translateY(-50%);
}
#step_area .step_body {
}
#step_area .step_body .step {
display: none;
flex-wrap: wrap;
}
#step_area .step_body .step.open {
display: flex;
justify-content: flex-start;
}
#step_area .step_body .step .label_wrap {
flex-basis: calc((100% - 12px) / 3);
padding: 0;
box-sizing: border-box;
}
#step_area .step_body .step .label_wrap:nth-child(3n-1) {
margin: 0 6px 6px 6px;
}
#step_area .step_body .step.column2 .label_wrap {
flex-basis: calc((100% - 5px) / 2);
}
#step_area .step_body .step .label_wrap:nth-child(3n-1) {
margin: 0 5px 5px 5px;
}
#step_area .step_body .step.column2 .label_wrap:nth-child(3n-1) {
margin: 0 0px 5px 0px;
}
#step_area .step_body .step.column2 .label_wrap:nth-child(odd) {
margin: 0 5px 5px 0;
}
#step_area .step_body .step .label_wrap label span {
font-size: 14px;
font-weight: bold;
color: #666;
padding: 0.5rem;
box-sizing: border-box;
width: 100%;
display: block;
text-align: center;
border: 1px solid var(--sub-color);
border-radius: 5px;
transition: 0.5s background-color, color;
position: relative;
background: #fff4eb;
}
#step_area .step_body .step .label_wrap label span:after {
position: absolute;
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 14px;
right: 5px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
color: var(--sub-color);
}
#step_area .step_body .step .label_wrap label input[type="radio"],
#step_area .step_body .step .label_wrap label input[type="checkbox"] {
display: none;
}
#step_area
.step_body
.step
.label_wrap
label
input[type="radio"]:checked
+ span,
#step_area
.step_body
.step
.label_wrap
label
input[type="checkbox"]:checked
+ span {
background: var(--sub-color);
color: #ffffff;
}
#step_area .step_body .step .button_wrap {
flex: 100%;
padding: 0.5rem 0;
display: flex;
justify-content: space-evenly;
}
#step_area .step_body .step .button_wrap .button,
#step_area .step_body .step .button_wrap button {
padding: 0.2rem 2rem;
font-size: 14px;
border: 1px solid #e7e7e7;
border-radius: 10px;
font-size: 10px;
}
#step_area button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
#step_area .step_body .step .button_wrap button.search_start {
background: #ff4b4b;
color: #fff;
}
.grad-btn {
z-index: 2;
position: absolute;
right: 0;
bottom: 0px;
left: 0;
width: 130px;
margin: auto;
padding: 4px 0;
border-radius: 4px;
background: var(--sub-color);
color: #fff;
font-size: 14px;
text-align: center;
cursor: pointer;
transition: 0.2s ease;
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
font-weight: bold;
}
.grad-btn i {
margin: 0 6px 0 0;
}
.step_inner {
background: #fff;
position: relative;
overflow: hidden;
height: 160px;
}
.step_inner:before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
/*グラデーションで隠す高さ*/
background: -webkit-linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.9) 50%,
#fff 100%
);
background: linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.9) 50%,
#fff 100%
);
content: "";
z-index: 1;
}
.grad-trigger {
display: none;
/*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
display: none;
/*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ .step_inner {
height: auto;
/*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .step_inner:before {
display: none;
/*チェックされていたら、grad-itemのbeforeを非表示にする*/
}
}
/* 人気クレジットカードTOP3 */
.Selection {
padding: 0 16px 32px;
.pop_title {
margin-top: 15px;
text-align: center;
font-size: 16px;
color: var(--clr-navy);
font-weight: 700;
}
.pop_title span {
display: block;
font-size: 28px;
font-weight: 700;
}
.pop_subtitle {
margin-top: 16px;
text-align: center;
}
.pop_image {
margin-top: -70px;
img {
display: block;
}
}
.pop_subtitle span {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 30px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: var(--clr-navy);
background-color: var(--clr-highlight);
border-radius: 100vh;
}
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
text-decoration: none;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.link {
text-decoration: none;
}
}
/* クレジットカードの選び方・作り方 */
.Points {
margin-top: 32px;
background: #f6feff;
display: grid;
place-items: center;
padding-bottom: 32px;
.SectionTitle {
width: 100%;
}
.heading {
color: var(--clr-navy);
font-size: 14px;
font-weight: 700;
border-bottom: 2px solid var(--clr-blue);
padding: 16px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-direction: column;
.HighLight {
font-size: 26px;
line-height: 1.4;
}
}
.text {
font-weight: 400;
line-height: 28px;
/* 175% */
padding: 16px 16px 8px;
}
img {
width: 100%;
max-width: 400px;
margin-inline: auto;
margin-top: 8px;
}
}
/* 上記3つのポイントを満たすオススメクレジットカードは…？ */
.Recommend {
.title {
font-size: 22px;
font-weight: 900;
color: var(--clr-navy);
text-align: center;
padding: 16px;
display: grid;
place-items: center;
gap: 16px;
&:after {
display: block;
content: "";
width: 24px;
height: 26px;
background: url('data:image/svg+xml,');
}
}
.wrapper {
position: relative;
padding: 40px 16px 0;
&:before {
content: "";
display: block;
background: url(../img/img_confetti.png);
width: 100%;
height: 190px;
background-size: contain;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
}
.card {
background: white;
padding: 32px 16px;
border-radius: 8px;
display: grid;
gap: 16px;
.card_title {
font-size: 24px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
img {
display: block;
width: 36px;
margin-left: -24px;
}
}
.card_subTitle {
span {
color: var(--clr-red);
font-weight: bold;
}
}
.card_heading {
font-size: 20px;
font-weight: 700;
color: var(--clr-navy);
border-bottom: 2px solid var(--clr-blue);
padding: 20px 10px 10px;
text-align: center;
}
.image {
width: 100%;
overflow-x: hidden;
position: relative;
--swiper-pagination-bottom: 0;
--swiper-theme-color: var(--clr-blue);
--swiper-navigation-size: 20px;
.swiper {
padding-bottom: 20px;
}
.swiper-slide {
text-align: center;
}
}
.rank_table {
width: 100%;
margin-top: 16px;
}
.rank_table th,
.rank_table td {
width: 33.33%;
padding: 10px 3px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
font-size: 12px;
}
.rank_table th {
font-weight: bold;
background-color: var(--clr-lightBlue);
border: solid 1px #d5ebee;
}
.rank_table td {
min-height: 64px;
border: solid 1px #d5ebee;
sup{
font-size: 10px;
font-weight: normal;
}
}
.rank_table td img {
max-height: 16px;
margin: 5px 1px;
}
.accent {
color: var(--clr-red);
font-weight: 700;
font-size: 14px;
}
.tags {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
li {
color: var(--clr-navy);
font-size: 12px;
font-weight: 500;
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
border-radius: 100vh;
border: 1px solid var(--clr-navy);
}
}
.point {
display: grid;
width: 100%;
gap: 16px;
}
.point_wrapper {
position: relative;
&.is-mask {
height: 250px;
overflow-y: hidden;
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 150px;
width: 100%;
z-index: 2;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
#fff 53.5%,
#fff 100%
);
}
}
}
.point_item {
display: grid;
gap: 4px;
}
.point_title {
color: var(--clr-navy);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
&:before {
content: "";
display: block;
background: center/cover no-repeat url(../img/ico_check.svg);
width: 20px;
height: 20px;
}
}
.point_text {
font-size: 14px;
font-weight: 400;
}
.readMore {
color: var(--clr-blue);
font-size: 14px;
font-weight: 700;
display: block;
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.recommend {
display: grid;
gap: 16px;
}
.recommend_item {
font-weight: 700;
position: relative;
color: var(--clr-navy);
display: flex;
align-items: center;
gap: 8px;
&:before {
content: "";
display: block;
background: center/cover no-repeat url(../img/ico_check.svg);
width: 20px;
height: 20px;
}
}
.reviews_slide {
width: 100%;
overflow-x: hidden;
position: relative;
margin-bottom: 20px;
--swiper-pagination-bottom: 0;
--swiper-theme-color: var(--clr-blue);
.swiper {
padding-bottom: 30px;
}
}
.reviews_area {
background: var(--clr-lightBlue);
border-radius: 4px;
padding: 16px;
display: grid;
gap: 10px;
font-size: 14px;
p {
line-height: 1.7;
}
}
.reviews_title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--clr-navy);
&.red {
color: var(--clr-red);
opacity: 0.8;
}
}
.reviews_image {
background: white;
border-radius: 100%;
width: 36px;
height: 36px;
display: grid;
place-items: center;
img {
width: 20px;
}
}
}
}
/* 特徴から探す */
.Feature {
margin-top: 32px;
.inner {
padding: 16px;
}
.feature_area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.feature_area li {
width: 100%;
margin: 0;
}
.feature_area li a {
position: relative;
border-radius: 4px;
border: 1px solid #48587e;
background: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
color: #48587e;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 12px;
/* 85.714% */
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.feature_area li a:before {
display: none;
}
.feature_area li a:after {
content: "";
display: block;
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #48587e;
border-right: solid 2px #48587e;
transform: rotate(45deg);
}
}
}
/*------------------------------------
即日発行
--------------------------------------*/
.Speedy {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: grid;
place-items: center;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
color: var(--clr-navy);
font-size: 22px;
font-weight: 700;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
}
/* 小見出し */
.Heading {
color: var(--clr-navy);
font-size: 18px;
font-weight: 700;
line-height: 20px;
border-bottom: 3px solid var(--clr-yellow);
padding-bottom: 12px;
margin-top: 16px;
width: 100%;
}
/* 共通スペースとレイアウトリズムを定義 */
.Wrapper {
display: grid;
place-items: center;
gap: 16px;
padding: 16px 16px 32px;
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
.Kv {
margin-bottom: 16px;
}
/* タイマー */
.Timer {
padding: 0 16px 32px;
display: none;
.card {
border-radius: 8px;
background: #fff;
box-shadow: 0px 4px 4px 2px #afdde3;
.title {
background: #fafe3b;
color: var(--clr-navy);
font-size: 16px;
font-weight: 900;
display: flex;
padding: 10px 0px;
justify-content: center;
align-items: center;
}
.contents {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 10px;
padding: 18px 16px 24px;
.icon {
width: 38px;
}
.values {
display: flex;
align-items: flex-end;
gap: 6px;
.text {
color: #48587e;
font-size: 14px;
font-weight: 900;
}
.value {
color: #00bcd4;
font-size: 42px;
font-weight: 900;
line-height: 100%; /* 42px */
letter-spacing: -2.1px;
}
}
}
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 人気クレジットカードTOP3 */
.Selection {
.inner {
padding: 24px 16px 16px;
}
.pop_title {
margin-top: 15px;
text-align: center;
font-size: 16px;
color: var(--clr-navy);
font-weight: 700;
}
.pop_title span {
display: block;
font-size: 28px;
font-weight: 700;
}
.pop_subtitle {
margin-top: 16px;
text-align: center;
}
.pop_image {
margin-top: -70px;
img {
display: block;
}
}
.pop_subtitle span {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 30px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: var(--clr-navy);
background-color: var(--clr-highlight);
border-radius: 100vh;
}
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
text-decoration: none;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.link {
text-decoration: none;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
/* クレカ発行の流れ */
.Flow {
margin-top: 16px;
padding-bottom: 24px;
.wrapper {
padding: 16p 16px 24px;
max-width: 358px;
margin-inline: auto;
.text {
color: #3a3e3f;
font-size: 14px;
font-weight: 500;
margin-top: 16px;
}
.image1 {
margin-top: 24px;
display: block;
}
.image2 {
margin-top: 10px;
display: block;
}
}
}
/* 特徴から探す */
.Feature {
margin-top: 32px;
.inner {
padding: 16px;
}
.feature_area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.feature_area li {
width: 100%;
margin: 0;
}
.feature_area li a {
position: relative;
border-radius: 4px;
border: 1px solid #48587e;
background: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
color: #48587e;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 12px;
/* 85.714% */
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.feature_area li a:before {
display: none;
}
.feature_area li a:after {
content: "";
display: block;
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #48587e;
border-right: solid 2px #48587e;
transform: rotate(45deg);
}
}
}
/*------------------------------------
初心者向けページ
--------------------------------------*/
.Beginner {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: grid;
place-items: center;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
}
/* 大見出し */
.SectionTitle {
color: #fff;
font-size: 20px;
font-weight: 700;
background: var(--clr-blue);
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
&:before,
&:after {
content: "";
display: block;
height: 2px;
background: white;
width: 100%;
position: absolute;
}
&:before {
top: 2px;
}
&:after {
bottom: 2px;
}
}
/* テキスト装飾 */
.Lead {
color: white;
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: white;
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* 小見出し */
.Heading {
color: var(--clr-navy);
font-size: 18px;
font-weight: 700;
line-height: 20px;
border-bottom: 3px solid var(--clr-yellow);
padding-bottom: 12px;
margin-top: 16px;
width: 100%;
}
/* 共通スペースとレイアウトリズムを定義 */
.Wrapper {
display: grid;
place-items: center;
gap: 16px;
padding: 16px 16px 32px;
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 初めてのクレジットカードにおすすめ */
.First {
padding: 24px 16px 16px;
display: grid;
gap: 16px;
.secTitle {
color: var(--txt-black);
text-align: center;
font-size: 14px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
animation: blinking 0.7s infinite alternate;
&:before,
&:after {
height: 1rem;
background: var(--txt-black);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
.card {
border-radius: 16px;
overflow: hidden;
border: 2px solid #d1f3f7;
.header {
background: var(--clr-lightBlue);
display: grid;
place-items: center;
padding: 8px;
.lead {
font-size: 14px;
font-weight: 700;
color: var(--clr-red);
display: flex;
align-items: center;
gap: 4px;
img {
width: 20px;
}
}
.title {
font-size: 28px;
font-weight: 700;
}
.text {
font-weight: 500;
}
}
.body {
padding: 16px;
display: grid;
gap: 16px;
.text {
font-weight: 500;
}
.image {
padding-right: 8px;
flex: 1;
}
.info {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
}
table {
text-align: center;
width: 100%;
th,
td {
border: 1px solid #d5ebee;
padding: 4px 2px;
font-weight: 700;
font-size: 11px;
line-height: 1.3;
}
th {
background: var(--clr-lightBlue);
}
td {
padding-block: 16px;
}
.mark {
color: var(--clr-red);
img {
width: 18px;
}
}
.description {
margin-top: 4px;
font-weight: 700;
white-space: nowrap;
}
.red {
color: var(--clr-red);
}
}
}
}
}
.accordion {
padding: 16px;
padding-bottom: 32px;
display: grid;
gap: 8px;
}
.point3_accordion {
border: solid 1px #3a3e3f;
overflow: hidden;
position: relative;
&:after {
position: absolute;
top: 21px;
right: 14px;
content: "";
display: block;
background: #00bcd4;
width: 23px;
height: 23px;
border-radius: 100%;
z-index: 0;
}
}
.point3_accordion__title {
padding-left: 70px;
color: var(--txt-black);
background-color: #fff;
cursor: pointer;
position: relative;
height: 58px;
display: flex;
align-items: center;
font-weight: bold;
padding-block: 4px;
position: relative;
}
.point3_accordion__title::before {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.2s;
z-index: 1;
}
.point3_accordion__title::after {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.2s;
z-index: 1;
}
img.point3_accordion__title_icon {
position: absolute;
width: 40px;
left: 16px;
top: 50%;
transform: translateY(-55%);
}
.point3_accordion__title.show::before {
opacity: 0;
}
.point3_accordion__title.show::after {
transform: translateY(-50%) rotate(180deg);
}
.point3_accordion__content {
display: none;
padding: 20px;
font-size: 15px;
background: white;
line-height: 1.8;
border-top: 1px solid #3a3e3f;
}
.points {
display: grid;
gap: 16px;
margin-top: 24px;
.item {
border-radius: 4px;
border: 2px solid #00bcd4;
background: #fff;
position: relative;
.number {
position: absolute;
top: -12px;
left: -2px;
}
.content {
display: flex;
align-items: center;
gap: 24px;
padding: 8px 16px 16px 16px;
.texts {
display: grid;
gap: 4px;
.title {
color: #48587e;
font-size: 16px;
font-weight: 700;
}
.text {
color: #48587e;
font-size: 14px;
line-height: 1.6;
}
}
}
}
}
.steps {
display: grid;
gap: 11px;
margin-block: 16px;
.item {
border-radius: 8px;
border: 3px solid #00bcd4;
position: relative;
height: 93px;
padding-inline: 80px;
display: flex;
align-items: center;
.number {
position: absolute;
top: -8px;
left: 10px;
}
.title {
color: #3a3e3f;
font-size: 18px;
font-weight: 900;
line-height: 1.4;
}
.image {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
}
}
.Recommend {
.wrapper {
position: relative;
padding: 40px 16px 0;
background: white;
&:before {
display: none !important;
}
.card {
border: unset;
padding: unset;
}
}
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
.pop_table .accent {
color: var(--clr-red);
}
a.pop_table_card_link {
color: var(--txt-black);
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
background-color: var(--clr-red);
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: var(--clr-blue);
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px var(--clr-blue);
border-right: solid 2px var(--clr-blue);
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
}
}
/*------------------------------------
海外旅行向けページ
--------------------------------------*/
.Travel {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px 0;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* 小見出し */
.Heading {
color: var(--clr-navy);
font-size: 18px;
font-weight: 700;
line-height: 20px;
border-bottom: 3px solid var(--clr-yellow);
padding-bottom: 12px;
margin-top: 16px;
width: 100%;
}
.Title {
font-size: 20px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* 共通スペースとレイアウトリズムを定義 */
.Wrapper {
display: grid;
place-items: center;
gap: 16px;
padding: 16px 16px 32px;
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* 券面スライダー */
.CardSlider {
padding-block: 16px;
width: 100%;
.items {
display: none;
}
.items.slick-initialized {
display: block;
/* slickが実行完了したら表示 */
}
@media screen and (min-width: 769px) {
display: flex;
justify-content: center;
gap: 10px;
.items {
display: block;
}
img {
height: 38px;
}
}
.slick-slide {
margin: 0 4px;
}
}
/* 比較表 */
.Selection {
padding-bottom: 36px;
.contents {
padding: 24px 16px;
display: grid;
grid-template-columns: repeat(3, 326px);
overflow-x: scroll;
gap: 10px;
.card {
border-radius: 32px;
overflow: hidden;
border: 1px solid #d5ebee;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-bottom: 1px dashed var(--clr-navy);
padding-bottom: 8px;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: grid;
grid-template-columns: 1fr 1fr;
.image {
padding-right: 8px;
flex: 1;
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
b {
color: var(--clr-red);
font-weight: bold;
}
}
}
.cardTable {
text-align: center;
width: 100%;
margin-bottom: 8px;
th,
td {
border: 1px solid #d5ebee;
padding: 4px 2px;
font-weight: 700;
font-size: 12px;
line-height: 1.3;
}
th {
background: var(--clr-lightBlue);
}
td {
padding-block: 12px;
small {
font-size: 8px;
vertical-align: text-top;
}
}
.mark {
color: var(--clr-red);
img {
width: 24px;
}
}
.description {
margin-top: 4px;
font-weight: 700;
white-space: nowrap;
}
.red {
color: var(--clr-red);
}
}
.small {
opacity: 0.5;
font-size: 10px;
margin-block: -16px 8px;
}
}
}
}
.originalContents {
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
margin-top: 24px;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
a.pop_table_card_link {
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
p.__fee_notice {
text-align: left;
}
.__fee_text {
font-size: 15px;
font-weight: bold;
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 11px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
}
/* タイプ別 */
.Type {
padding-bottom: 24px;
.anker {
padding: 24px 16px 16px;
.list {
display: grid;
gap: 16px;
max-width: 400px;
margin-inline: auto;
.listItem:has(.show) {
border: 1px solid var(--txt-black);
border-radius: 10px;
overflow: clip;
}
.expand {
display: flex;
align-items: center;
border: 2px solid #fd9426;
background: #fff6ed;
padding: 8px 16px;
gap: 10px;
font-weight: 700;
color: var(--txt-black);
text-decoration: none;
border-radius: 10px;
position: relative;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
width: 100%;
font-size: 16px;
text-align: left;
&:after {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%) rotate(90deg);
content: "";
display: block;
width: 10px;
height: 16px;
transition: all 0.2s;
background: center/cover no-repeat
url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
}
&.show {
background: white;
box-shadow: unset;
border: 2px solid var(--clr-blue);
border: unset;
transition: all 0.2s;
&:after {
transform: translateY(-50%) rotate(-90deg);
}
}
}
}
}
.wrapper {
padding: 24px 16px;
background: #fff6ed;
display: none;
}
.contents {
border-radius: 8px;
border: 2px solid var(--clr-blue);
padding: 16px 16px 0 16px;
background: white;
max-width: 400px;
margin-inline: auto;
.header {
display: grid;
place-items: center;
gap: 16px;
.image {
}
}
.item + .item {
padding-top: 24px;
}
.item {
overflow: hidden;
padding-block: 16px 32px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: unset;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: flex;
gap: 10px;
.image {
padding-right: 8px;
flex: 1;
img {
max-width: 120px;
}
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
line-height: 1.8;
span.__red {
color: var(--clr-red);
font-weight: bold;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
b {
font-weight: bold;
}
}
}
}
}
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
}
/*------------------------------------
ETC
--------------------------------------*/
.Etc {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
overflow: hidden;
position: relative;
&:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
.ExtraCtaButtonWrapper {
max-width: 500px;
margin: 0 auto 24px;
padding: 0 20px;
}
.ExtraCtaButton {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
color: white;
background: var(--clr-blue);
border-radius: 8px;
border: 1px solid #fff;
box-shadow: 2px 3px 0 0 rgba(72, 88, 126, 0.25);
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
font-size: 14px;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 券面スライダー */
.CardSlider {
padding-block: 8px 8px;
width: 100%;
.items {
display: none;
}
.items.slick-initialized {
display: block;
/* slickが実行完了したら表示 */
}
@media screen and (min-width: 769px) {
display: flex;
justify-content: center;
gap: 10px;
.items {
display: block;
}
img {
height: 38px;
}
}
.slick-slide {
margin: 0 4px;
}
}
/* ETC付帯クレカ選び3つのポイント */
.Point {
.contents {
padding: 16px;
padding-bottom: 32px;
display: grid;
gap: 8px;
}
.point3_accordion {
border: solid 1px #3a3e3f;
overflow: hidden;
position: relative;
&:after {
position: absolute;
top: 21px;
right: 14px;
content: "";
display: block;
background: #00bcd4;
width: 23px;
height: 23px;
border-radius: 100%;
z-index: 0;
}
}
.point3_accordion__title {
padding-left: 80px;
color: var(--txt-black);
background-color: #fff;
cursor: pointer;
position: relative;
height: 58px;
display: flex;
align-items: center;
font-weight: bold;
padding-block: 4px;
position: relative;
}
.point3_accordion__title::before {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.2s;
z-index: 1;
}
.point3_accordion__title::after {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.2s;
z-index: 1;
}
img.point3_accordion__title_icon {
position: absolute;
width: 58px;
left: 10px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.point3_accordion__title.show::before {
opacity: 0;
}
.point3_accordion__title.show::after {
transform: translateY(-50%) rotate(180deg);
}
.point3_accordion__content {
display: none;
width: calc(100% - 80px);
margin: 20px auto 20px;
padding: 20px;
font-size: 15px;
background: white;
font-weight: bold;
line-height: 2;
border: 1px solid var(--clr-yellow);
}
}
/* 上記条件にピッタリの厳選カード3枚 */
.Selection {
padding-bottom: 36px;
.contents {
padding: 24px 16px;
display: grid;
grid-template-columns: repeat(3, 326px);
overflow-x: scroll;
gap: 10px;
.card {
border-radius: 32px;
overflow: hidden;
border: 1px solid #d5ebee;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-bottom: 1px dashed var(--clr-navy);
padding-bottom: 8px;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: grid;
grid-template-columns: 1fr 1fr;
.image {
padding-right: 8px;
flex: 1;
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
b {
color: var(--clr-red);
font-weight: bold;
}
}
}
.cardTable {
text-align: center;
width: 100%;
margin-bottom: 8px;
th,
td {
border: 1px solid #d5ebee;
padding: 4px 2px;
font-weight: 700;
font-size: 12px;
line-height: 1.3;
}
th {
background: var(--clr-lightBlue);
}
td {
padding-block: 12px;
small {
font-size: 8px;
vertical-align: text-top;
}
}
.mark {
color: var(--clr-red);
img {
width: 24px;
}
}
.description {
margin-top: 4px;
font-weight: 700;
white-space: nowrap;
}
.red {
color: var(--clr-red);
}
}
.small {
opacity: 0.5;
font-size: 10px;
margin-block: -16px 8px;
}
}
}
}
.originalContents {
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
margin-top: 24px;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
text-align: start;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
font-weight: bold;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
a.pop_table_card_link {
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
p.__fee_notice {
text-align: left;
}
.__fee_text {
font-size: 15px;
font-weight: bold;
sup{
font-size: 12px;
}
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
}
/* ETCカード発行までの流れ */
.Flow {
padding-bottom: 36px;
.text {
padding: 16px;
}
.image {
max-width: 400px;
margin-inline: auto;
img {
width: 100%;
}
}
}
/* タイプ別 */
.Type {
padding-bottom: 24px;
.anker {
padding: 24px 16px 16px;
.list {
display: grid;
gap: 16px;
max-width: 400px;
margin-inline: auto;
.listItem:has(.show) {
border: 1px solid var(--txt-black);
border-radius: 10px;
overflow: clip;
}
.expand {
display: flex;
align-items: center;
border: 2px solid #fd9426;
background: #fff6ed;
padding: 8px 16px;
gap: 10px;
font-weight: 700;
color: var(--txt-black);
text-decoration: none;
border-radius: 10px;
position: relative;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
width: 100%;
font-size: 16px;
text-align: left;
&:after {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%) rotate(90deg);
content: "";
display: block;
width: 10px;
height: 16px;
transition: all 0.2s;
background: center/cover no-repeat
url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
}
&.show {
background: white;
box-shadow: unset;
border: 2px solid var(--clr-blue);
border: unset;
transition: all 0.2s;
&:after {
transform: translateY(-50%) rotate(-90deg);
}
}
}
}
}
.wrapper {
padding: 24px 12px;
background: #fff6ed;
display: none;
}
.contents {
border-radius: 8px;
border: 2px solid var(--clr-blue);
padding: 16px 16px 0 16px;
background: white;
max-width: 400px;
margin-inline: auto;
.header {
display: grid;
place-items: center;
gap: 16px;
.labels {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.label {
border-radius: 1000px;
border: 1px solid #fd9426;
background: #fff6ed;
display: flex;
align-items: center;
padding: 10px 16px;
gap: 4px;
font-size: 12px;
font-weight: 700;
}
.image {
}
}
.item + .item {
padding-top: 24px;
}
.item {
overflow: hidden;
padding-block: 16px 32px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: unset;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: flex;
gap: 10px;
.image {
padding-right: 0px;
flex: 1;
img {
max-width: 108px;
}
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 13px;
line-height: 1.8;
span.__red {
color: var(--clr-red);
font-weight: bold;
}
b {
font-weight: bold;
}
}
}
}
}
}
}
.Merit {
background: white;
.contents {
display: grid;
place-items: center;
gap: 8px;
margin-top: 16px;
img {
max-width: 359px;
}
.text {
margin-top: 8px;
padding: 0 16px 24px;
line-height: 32px; /* 200% */
}
}
}
}
/*------------------------------------
学生向け
--------------------------------------*/
.Student {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
.thumb {
position: absolute;
bottom: 0;
right: 0;
img {
display: block;
}
}
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 14px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* Header */
.Header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: white;
.toggle {
position: relative;
width: 20px;
height: 16px;
display: block;
span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 0;
height: 2px;
border-radius: 2px;
background: var(--clr-navy);
width: 100%;
}
span:nth-of-type(1) {
top: 0;
}
span:nth-of-type(2) {
top: 7px;
}
span:nth-of-type(3) {
bottom: 0;
}
&.is-active {
span:nth-of-type(1) {
transform: translateY(8px) rotate(-45deg);
}
span:nth-of-type(2) {
opacity: 0;
}
span:nth-of-type(3) {
transform: translateY(-6px) rotate(45deg);
}
}
}
.navigation {
display: none;
background: #0d5eb5;
position: absolute;
top: 56px;
left: 0;
width: 100%;
z-index: 9999;
}
.navigation__list {
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.navigation__list-item {
border-bottom: solid 1px #1585dc;
}
.navigation__list-item:first-child {
border-top: solid 1px #1585dc;
}
.navigation__link {
color: #fff !important;
font-weight: 700;
text-decoration: none;
display: block;
padding: 24px 0;
transition: 0.5s;
}
@media screen and (min-width: 769px) {
.navigation {
max-width: 640px;
left: 50%;
transform: translateX(-50%);
}
}
@media (hover: hover) and (pointer: fine) {
.navigation__link:hover {
background: #1585dc;
}
}
}
/* 券面スライダー */
.CardSlider {
padding-block: 16px 16px;
width: 100%;
.items {
display: none;
}
.items.slick-initialized {
display: block;
/* slickが実行完了したら表示 */
}
@media screen and (min-width: 769px) {
display: flex;
justify-content: center;
gap: 10px;
.items {
display: block;
}
img {
height: 38px;
}
}
.slick-slide {
margin: 0 4px;
}
}
/* 上記条件にピッタリの厳選カード3枚 */
.Selection {
padding-bottom: 36px;
.contents {
padding: 24px 16px;
display: grid;
grid-template-columns: repeat(3, 326px);
overflow-x: scroll;
gap: 10px;
.card {
border-radius: 32px;
overflow: hidden;
border: 1px solid #d5ebee;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-bottom: 1px dashed var(--clr-navy);
padding-bottom: 8px;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: grid;
grid-template-columns: 1fr 1fr;
.image {
padding-right: 8px;
flex: 1;
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
b {
color: var(--clr-red);
font-weight: bold;
}
}
}
.cardTable {
text-align: center;
width: 100%;
margin-bottom: 8px;
th,
td {
border: 1px solid #d5ebee;
padding: 4px 2px;
font-weight: 700;
font-size: 12px;
line-height: 1.3;
}
th {
background: var(--clr-lightBlue);
}
td {
padding-block: 12px;
small {
font-size: 8px;
vertical-align: text-top;
}
}
.mark {
color: var(--clr-red);
img {
width: 24px;
}
}
.description {
margin-top: 4px;
font-weight: 700;
white-space: nowrap;
}
.red {
color: var(--clr-red);
}
}
.small {
opacity: 0.5;
font-size: 10px;
margin-block: -16px 8px;
}
}
}
}
.originalContents {
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
margin-top: 24px;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
a.pop_table_card_link {
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
p.__fee_notice {
text-align: left;
}
.__fee_text {
font-size: 15px;
font-weight: bold;
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
}
/* タイプ別 学生向け人気のクレカ */
.Type {
padding-bottom: 24px;
.anker {
padding: 24px 16px 16px;
.list {
display: grid;
gap: 16px;
max-width: 400px;
margin-inline: auto;
.listItem:has(.show) {
border: 1px solid var(--txt-black);
border-radius: 10px;
overflow: clip;
}
.expand {
display: flex;
align-items: center;
border: 2px solid #fd9426;
background: #fff6ed;
padding: 8px 16px;
gap: 10px;
font-weight: 700;
color: var(--txt-black);
text-decoration: none;
border-radius: 10px;
position: relative;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
width: 100%;
font-size: 16px;
text-align: left;
&:after {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%) rotate(90deg);
content: "";
display: block;
width: 10px;
height: 16px;
transition: all 0.2s;
background: center/cover no-repeat
url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
}
&.show {
background: white;
box-shadow: unset;
border: 2px solid var(--clr-blue);
border: unset;
transition: all 0.2s;
&:after {
transform: translateY(-50%) rotate(-90deg);
}
}
}
}
}
.wrapper {
padding: 24px 16px;
background: #fff6ed;
display: none;
}
.contents {
border-radius: 8px;
border: 2px solid var(--clr-blue);
padding: 16px 16px 0 16px;
background: white;
max-width: 400px;
margin-inline: auto;
.header {
display: grid;
place-items: center;
gap: 16px;
.labels {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.label {
border-radius: 1000px;
border: 1px solid #fd9426;
background: #fff6ed;
display: flex;
align-items: center;
padding: 10px 16px;
gap: 4px;
font-size: 12px;
font-weight: 700;
}
.image {
}
}
.item + .item {
padding-top: 24px;
}
.item {
overflow: hidden;
padding-block: 16px 32px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: unset;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: flex;
gap: 10px;
.image {
padding-right: 8px;
flex: 1;
img {
max-width: 120px;
}
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
line-height: 1.8;
span.__red {
color: var(--clr-red);
font-weight: bold;
}
b {
font-weight: bold;
}
}
}
}
}
}
}
}
/*------------------------------------
最強の2枚
--------------------------------------*/
.Strongest {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
&.-exsmall {
font-size: 14px;
padding: 12px 0px;
width: calc(100% - 40px);
max-width: 180px;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
.thumb {
position: absolute;
bottom: 0;
right: 0;
img {
display: block;
}
}
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 比較表 */
.Compare {
margin-top: 24px;
background: white;
margin-bottom: 24px;
.contents {
max-width: 390px;
margin-inline: auto;
}
.header {
display: grid;
grid-template-columns: 50% 50%;
position: relative;
overflow: hidden;
padding-bottom: 16px;
&:after {
content: "";
display: block;
height: 1px;
background: var(--clr-blue);
width: 1px;
height: 100%;
position: absolute;
left: calc(50% - 1px);
top: 111px;
}
.item {
display: grid;
gap: 8px;
.title {
display: flex;
justify-content: center;
img {
height: 111px;
}
}
.image {
display: flex;
justify-content: center;
height: 78px;
img {
height: 78px;
display: block;
}
}
.link {
color: var(--clr-blue);
font-size: 15px;
font-weight: bold;
text-align: center;
}
}
}
.table {
.heading {
background: var(--clr-blue);
color: white;
font-size: 16px;
font-weight: 700;
text-align: center;
padding: 4px;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
position: relative;
padding: 16px 8px;
font-weight: 700;
text-align: center;
gap: 16px;
align-items: flex-start;
&:after {
content: "";
display: block;
height: 1px;
background: var(--clr-blue);
width: 1px;
height: 100%;
position: absolute;
left: calc(50% - 1px);
top: 0;
}
.info {
background: #e7fcff;
padding: 12px;
font-size: 12px;
text-align: left;
margin-top: 8px;
font-weight: normal;
}
.notice{
font-size: 10px;
text-align: left;
margin: 8px 0 0;
color: #444;
font-weight: normal;
}
.list {
display: grid;
gap: 8px;
text-align: left;
font-size: 13px;
padding-inline: 8px;
padding-bottom: 16px;
.item {
display: flex;
align-items: flex-start;
gap: 8px;
img {
display: block;
margin-top: 4px;
width: 15px;
}
}
}
small {
font-size: 70%;
}
}
}
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 14px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* タイプ別 */
.Type {
padding-bottom: 24px;
.anker {
padding: 24px 16px 16px;
.list {
display: grid;
gap: 16px;
max-width: 400px;
margin-inline: auto;
.listItem:has(.show) {
border: 1px solid var(--txt-black);
border-radius: 10px;
overflow: clip;
}
.expand {
display: flex;
align-items: center;
border: 2px solid #fd9426;
background: #fff6ed;
padding: 8px 16px;
gap: 10px;
font-weight: 700;
color: var(--txt-black);
text-decoration: none;
border-radius: 10px;
position: relative;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
width: 100%;
font-size: 16px;
text-align: left;
&:after {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%) rotate(90deg);
content: "";
display: block;
width: 10px;
height: 16px;
transition: all 0.2s;
background: center/cover no-repeat
url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
}
&.show {
background: white;
box-shadow: unset;
border: 2px solid var(--clr-blue);
border: unset;
transition: all 0.2s;
&:after {
transform: translateY(-50%) rotate(-90deg);
}
}
}
}
}
.wrapper {
padding: 24px 16px;
background: #fff6ed;
display: none;
}
.contents {
border-radius: 8px;
border: 2px solid var(--clr-blue);
padding: 16px 16px 0 16px;
background: white;
max-width: 400px;
margin-inline: auto;
.header {
display: grid;
place-items: center;
gap: 16px;
.labels {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.label {
border-radius: 1000px;
border: 1px solid #fd9426;
background: #fff6ed;
display: flex;
align-items: center;
padding: 10px 16px;
gap: 4px;
font-size: 12px;
font-weight: 700;
}
.image {
}
}
.item + .item {
padding-top: 24px;
}
.item {
overflow: hidden;
padding-block: 16px 32px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: unset;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: flex;
gap: 10px;
.image {
padding-right: 8px;
flex: 1;
img {
max-width: 120px;
}
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
line-height: 1.8;
span.__red {
color: var(--clr-red);
font-weight: bold;
}
b {
font-weight: bold;
}
}
}
}
}
}
}
.Point {
.contents {
padding: 16px;
padding-bottom: 32px;
display: grid;
gap: 8px;
}
.point3_accordion {
border: solid 1px #3a3e3f;
overflow: hidden;
position: relative;
&:after {
position: absolute;
top: 21px;
right: 14px;
content: "";
display: block;
background: #00bcd4;
width: 23px;
height: 23px;
border-radius: 100%;
z-index: 0;
}
}
.point3_accordion__title {
padding-left: 80px;
padding-right: 38px;
color: var(--txt-black);
background-color: #fff;
cursor: pointer;
position: relative;
height: 58px;
display: flex;
align-items: center;
font-weight: bold;
padding-block: 4px;
position: relative;
}
.point3_accordion__title::before {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.2s;
z-index: 1;
}
.point3_accordion__title::after {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.2s;
z-index: 1;
}
img.point3_accordion__title_icon {
position: absolute;
width: 58px;
left: 10px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.point3_accordion__title.show::before {
opacity: 0;
}
.point3_accordion__title.show::after {
transform: translateY(-50%) rotate(180deg);
}
.point3_accordion__content {
display: none;
width: calc(100% - 80px);
margin: 20px auto 20px;
padding: 20px;
font-size: 15px;
background: white;
font-weight: bold;
line-height: 2;
border: 1px solid var(--clr-yellow);
}
.point3_accordion__content.ft13 {
font-size: 13px;
}
.__content_list{
list-style-type: disc;
padding: 0 0 0 20px;
}
}
}
/*------------------------------------
JCB
--------------------------------------*/
.JCB {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
.Kv {
img {
display: block;
}
margin-bottom: 16px;
}
/* JCBカードシリーズの強み */
.Point {
.contents {
padding: 16px;
padding-bottom: 32px;
display: grid;
gap: 8px;
}
.point3_accordion {
border: solid 1px #3a3e3f;
overflow: hidden;
position: relative;
background: #fff6ed;
&:after {
position: absolute;
top: 21px;
right: 14px;
content: "";
display: block;
background: #00bcd4;
width: 23px;
height: 23px;
border-radius: 100%;
z-index: 0;
}
}
.point3_accordion__title {
padding-left: 62px;
color: var(--txt-black);
background-color: #fff;
cursor: pointer;
position: relative;
height: 58px;
display: flex;
align-items: center;
font-weight: bold;
padding-block: 4px;
position: relative;
font-size: 14px;
}
.point3_accordion__title::before {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.2s;
z-index: 1;
}
.point3_accordion__title::after {
content: "";
display: inline-block;
width: 13px;
height: 3px;
background-color: #fff;
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.2s;
z-index: 1;
}
img.point3_accordion__title_icon {
position: absolute;
width: 46px;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.point3_accordion__title.show::before {
opacity: 0;
}
.point3_accordion__title.show::after {
transform: translateY(-50%) rotate(180deg);
}
.point3_accordion__content {
display: none;
margin: 16px;
}
.point3_accordion__content_inner {
padding: 16px;
font-size: 14px;
background: white;
font-weight: 600;
line-height: 2;
border: 1px solid var(--clr-navy);
.info {
border-top: 1px dashed var(--clr-navy);
margin-top: 12px;
padding: 16px 8px 0;
display: grid;
place-items: center;
.info_title {
border: 1px solid #04a7bc;
display: flex;
padding: 4px 16px;
justify-content: center;
align-items: center;
color: var(--clr-navy);
font-size: 12px;
margin-bottom: 16px;
}
.items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 16px;
.item {
max-width: 78px;
a {
color: var(--clr-blue);
font-size: 11px;
display: grid;
place-items: center;
line-height: 1.2;
text-align: center;
gap: 4px;
}
img {
max-width: 76px;
}
}
}
}
small {
color: #888;
font-size: 10px;
font-weight: 400;
display: block;
margin-top: 12px;
}
}
}
/* ポイント還元率の高いサービス一覧 */
.Service {
padding: 16px;
background: var(--clr-blue);
display: grid;
place-items: center;
gap: 10px;
margin-bottom: 32px;
.list {
background: white;
padding: 16px;
position: relative;
&.is-mask {
height: 250px;
overflow-y: hidden;
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 150px;
width: 100%;
z-index: 2;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
#fff 53.5%,
#fff 100%
);
}
}
.items {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px 10px;
li {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 102px;
.value {
font-size: 12px;
font-weight: 600;
display: flex;
align-items: baseline;
line-height: 1;
img {
height: 20px;
display: block;
margin-right: 4px;
}
b {
font-size: 20px;
color: var(--clr-red);
font-weight: bold;
}
}
.logo {
width: -webkit-fill-available;
height: 55px;
border: 1px solid lightgray;
padding: 8px;
img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
}
.name {
font-size: 12px;
font-weight: bold;
line-height: 1.2;
text-align: center;
}
}
}
.readMore {
color: var(--clr-blue);
font-size: 14px;
font-weight: 700;
display: block;
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
}
}
/* 神コスパのJCBカード3枚 */
.Selection {
padding-bottom: 36px;
.contents {
padding: 24px 16px;
display: grid;
grid-template-columns: repeat(3, 326px);
overflow-x: scroll;
gap: 10px;
.card {
border-radius: 32px;
overflow: hidden;
border: 1px solid #d5ebee;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-bottom: 1px dashed var(--clr-navy);
padding-bottom: 8px;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: grid;
grid-template-columns: 1fr 1fr;
.image {
padding-right: 8px;
flex: 1;
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
b {
color: var(--clr-red);
font-weight: bold;
}
}
}
.cardTable {
text-align: center;
width: 100%;
margin-bottom: 8px;
th,
td {
border: 1px solid #d5ebee;
padding: 4px 2px;
font-weight: 700;
font-size: 12px;
line-height: 1.3;
}
th {
background: var(--clr-lightBlue);
}
td {
padding-block: 12px;
small {
font-size: 8px;
vertical-align: text-top;
}
}
.mark {
color: var(--clr-red);
img {
width: 24px;
}
}
.description {
margin-top: 4px;
font-weight: 700;
white-space: nowrap;
}
.red {
color: var(--clr-red);
}
}
.small {
opacity: 0.5;
font-size: 10px;
margin-block: -16px 8px;
}
}
}
}
.originalContents {
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
margin-top: 24px;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
a.pop_table_card_link {
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
p.__fee_notice {
text-align: left;
}
.__fee_text {
font-size: 15px;
font-weight: bold;
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
}
}
/*------------------------------------
高還元
--------------------------------------*/
.Point {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
.Kv {
margin-bottom: 16px;
img {
display: block;
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 還元率の高いカード最強の3枚 */
.Selection {
padding-bottom: 36px;
.originalContents {
padding-inline: 8px;
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
margin-top: 16px;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
display: grid;
place-items: center;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: var(--clr-blue);
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px var(--clr-blue);
border-right: solid 2px var(--clr-blue);
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.popup {
position: relative;
&:after {
position: absolute;
bottom: -46px;
left: 50%;
display: block;
content: "";
width: 96px;
height: 46px;
background: center/cover no-repeat url(../img/txt-point.svg?ver1.1);
z-index: 2;
transform: translateX(-50%);
}
}
.pt {
td {
padding-block: 40px 20px;
}
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
}
}
/*------------------------------------
年会費無料
--------------------------------------*/
.Free {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 年会費無料カード最強の3枚 */
.Selection {
padding-bottom: 36px;
margin-top: 16px;
.contents {
padding: 24px 16px;
display: grid;
grid-template-columns: repeat(3, 326px);
overflow-x: scroll;
gap: 10px;
.card {
border-radius: 32px;
overflow: hidden;
border: 1px solid #d5ebee;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
padding: 24px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-bottom: 1px dashed var(--clr-navy);
padding-bottom: 8px;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: grid;
grid-template-columns: 1fr 1fr;
.image {
padding-right: 8px;
flex: 1;
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
b {
color: var(--clr-red);
font-weight: bold;
}
}
}
.cardTable {
text-align: center;
width: 100%;
margin-bottom: 8px;
th,
td {
border: 1px solid #d5ebee;
padding: 4px 2px;
font-weight: 700;
font-size: 12px;
line-height: 1.3;
}
th {
background: var(--clr-lightBlue);
}
td {
padding-block: 12px;
small {
font-size: 8px;
vertical-align: text-top;
}
}
.mark {
color: var(--clr-red);
img {
width: 24px;
}
}
.description {
margin-top: 4px;
font-weight: 700;
white-space: nowrap;
}
.red {
color: var(--clr-red);
}
}
.small {
opacity: 0.5;
font-size: 10px;
margin-block: -16px 8px;
}
}
}
}
.originalContents {
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
margin-top: 24px;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
a.pop_table_card_link {
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
p.__fee_notice {
text-align: left;
}
.__fee_text {
font-size: 15px;
font-weight: bold;
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
}
}
/*------------------------------------
ステータスカード
--------------------------------------*/
.Status {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: grid;
place-items: center;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
}
/* 大見出し */
.SectionTitle {
color: #fff;
font-size: 20px;
font-weight: 700;
background: var(--clr-blue);
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
&:before,
&:after {
content: "";
display: block;
height: 2px;
background: white;
width: 100%;
position: absolute;
}
&:before {
top: 2px;
}
&:after {
bottom: 2px;
}
}
/* 小見出し */
.Heading {
color: var(--clr-navy);
font-size: 18px;
font-weight: 700;
line-height: 20px;
border-bottom: 3px solid var(--clr-yellow);
padding-bottom: 12px;
margin-top: 16px;
width: 100%;
}
/* 共通スペースとレイアウトリズムを定義 */
.Wrapper {
display: grid;
place-items: center;
gap: 16px;
padding: 16px 16px 32px;
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
font-size: 14px;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 最高のゴールド・プラチナカード3選ぶ */
.Selection {
padding: 0 0 32px;
.inner {
padding-inline: 8px;
}
.pop_image {
margin-block: 16px;
width: 100%;
img {
width: 100%;
display: block;
}
}
.pop_subtitle span {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 30px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: var(--clr-navy);
background-color: var(--clr-highlight);
border-radius: 100vh;
}
.pop_table {
width: 100%;
border: solid 1px #e7f3fe;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
background: white;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
&.middle {
vertical-align: middle;
}
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
.__fee_text {
font-size: 15px;
font-weight: bold;
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
ul.__treatment_list {
display: inline-block;
text-align: left;
font-size: 11px;
padding: 10px 0 0 12px;
}
ul.__treatment_list li {
font-weight: bold;
position: relative;
line-height: 1.2;
margin: 0 0 8px;
}
ul.__treatment_list li:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f058";
color: #55bf9f;
left: -13px;
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
text-decoration: none;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.link {
text-decoration: none;
}
}
.notice {
color: gray;
font-size: 10px;
padding: 8px;
}
/* 特徴から探す */
.Feature {
margin-top: 32px;
.inner {
padding: 16px;
}
.feature_area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.feature_area li {
width: 100%;
margin: 0;
}
.feature_area li a {
position: relative;
border-radius: 4px;
border: 1px solid #48587e;
background: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
color: #48587e;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 12px;
/* 85.714% */
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.feature_area li a:before {
display: none;
}
.feature_area li a:after {
content: "";
display: block;
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #48587e;
border-right: solid 2px #48587e;
transform: rotate(45deg);
}
}
}
/*------------------------------------
審査不安
--------------------------------------*/
.Screening {
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
overflow: hidden;
position: relative;
&:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
&.-small {
font-size: 16px;
padding: 8px 48px;
width: max-content;
margin-inline: auto;
}
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid var(--clr-blue);
border-bottom: 2px solid var(--clr-blue);
color: var(--clr-navy);
font-size: 22px;
font-weight: 700;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
.Title {
font-size: 20px;
font-weight: 700;
color: var(--clr-navy);
}
/* 小見出し */
.Heading {
color: var(--clr-navy);
font-size: 18px;
font-weight: 700;
line-height: 20px;
border-bottom: 3px solid var(--clr-yellow);
padding-bottom: 12px;
margin-top: 16px;
width: 100%;
}
/* 共通スペースとレイアウトリズムを定義 */
.Wrapper {
display: grid;
place-items: center;
gap: 16px;
padding: 16px 16px 32px;
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
.Kv {
img {
display: block;
}
}
/* リード文 */
.Info {
background: white;
padding-block: 24px 16px;
display: grid;
place-items: center;
overflow: clip;
.title {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border-bottom: 3px solid #ecbb48;
width: 100%;
padding-bottom: 12px;
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
width: 90%;
}
.title.__payafter {
font-size: 20px;
padding-bottom: 0px;
border-bottom: none;
}
.mainImage {
width: calc(100% - 40px);
margin: 12px auto 0;
display: block;
img {
width: 100%;
}
}
.box {
background: #fff6ed;
padding: 16px 0 0 0;
width: 100%;
margin-top: -10px;
.wrapper {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 18px;
}
.image {
width: 98px;
margin-bottom: -4px;
}
.text {
flex: 1;
text-shadow: 0px 0px 4px white;
font-size: 14px;
font-weight: 600;
line-height: 28px; /* 200% */
max-width: 400px;
margin-right: 16px;
margin-bottom: 16px;
}
}
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
/* 人気クレジットカードTOP3 */
.Selection {
padding-bottom: 36px;
.inner {
padding: 16px 32px;
}
.pop_title {
margin-top: 15px;
text-align: center;
font-size: 16px;
color: var(--clr-navy);
font-weight: 700;
}
.pop_title span {
display: block;
font-size: 28px;
font-weight: 700;
}
.pop_subtitle {
margin-top: 16px;
text-align: center;
}
.pop_image {
margin-top: -70px;
img {
display: block;
}
}
.pop_subtitle span {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 30px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: var(--clr-navy);
background-color: var(--clr-highlight);
border-radius: 100vh;
}
.pop_table {
margin-top: 24px;
width: 100%;
border: solid 1px #e7f3fe;
background: white;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 5px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #fff;
border-right: none;
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-lr;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
width: 30%;
font-size: 12px;
border: solid 1px #e7f3fe;
position: relative;
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.cvBtn-s a:after {
content: "";
display: block;
width: 20px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: rgba(255 255 255 / 0.6);
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
margin-left: -5px;
letter-spacing: 0;
color: #333;
text-decoration: none;
}
.pop_table .link a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.link {
text-decoration: none;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
p.__fee_notice {
text-align: left;
}
.__fee_text {
font-size: 15px;
font-weight: bold;
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
/* 特徴から探す */
.Feature {
margin-top: 32px;
.inner {
padding: 16px;
}
.feature_area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.feature_area li {
width: 100%;
margin: 0;
}
.feature_area li a {
position: relative;
border-radius: 4px;
border: 1px solid #48587e;
background: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
color: #48587e;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 12px;
/* 85.714% */
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.feature_area li a:before {
display: none;
}
.feature_area li a:after {
content: "";
display: block;
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #48587e;
border-right: solid 2px #48587e;
transform: rotate(45deg);
}
}
/* タイプ別 */
.Type {
padding-bottom: 24px;
.anker {
padding: 24px 16px 16px;
.list {
display: grid;
gap: 16px;
max-width: 400px;
margin-inline: auto;
.listItem:has(.show) {
border: 1px solid var(--txt-black);
border-radius: 10px;
overflow: clip;
}
.expand {
display: flex;
align-items: center;
border: 2px solid #fd9426;
background: #fff6ed;
padding: 8px 16px;
gap: 10px;
font-weight: 700;
color: var(--txt-black);
text-decoration: none;
border-radius: 10px;
position: relative;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
width: 100%;
font-size: 16px;
text-align: left;
&:after {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%) rotate(90deg);
content: "";
display: block;
width: 10px;
height: 16px;
transition: all 0.2s;
background: center/cover no-repeat
url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
}
&.show {
background: white;
box-shadow: unset;
border: 2px solid var(--clr-blue);
border: unset;
transition: all 0.2s;
&:after {
transform: translateY(-50%) rotate(-90deg);
}
}
}
}
}
.wrapper {
padding: 24px 16px;
background: #fff6ed;
display: none;
}
.contents {
border-radius: 8px;
border: 2px solid var(--clr-blue);
padding: 16px 16px 0 16px;
background: white;
max-width: 400px;
margin-inline: auto;
.header {
display: grid;
place-items: center;
gap: 16px;
.labels {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.label {
border-radius: 1000px;
border: 1px solid #fd9426;
background: #fff6ed;
display: flex;
align-items: center;
padding: 10px 16px;
gap: 4px;
font-size: 12px;
font-weight: 700;
}
.image {
}
}
.item + .item {
padding-top: 24px;
}
.item {
overflow: hidden;
padding-block: 16px 32px;
display: grid;
gap: 16px;
background: white;
.header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: unset;
img {
width: 30px;
margin-left: -15px;
}
.title {
font-size: 20px;
font-weight: 900;
}
}
.body {
display: grid;
gap: 16px;
.info {
display: flex;
gap: 10px;
.image {
padding-right: 8px;
flex: 1;
img {
max-width: 120px;
}
a {
color: var(--clr-blue);
text-decoration: underline;
font-size: 12px;
display: block;
text-align: center;
}
}
.text {
font-weight: 400;
font-size: 14px;
line-height: 1.8;
span.__red {
color: var(--clr-red);
font-weight: bold;
}
b {
font-weight: bold;
}
}
}
}
}
}
}
}
/*------------------------------------
デビットカード
--------------------------------------*/
.Debit {
.Kv {
position: relative;
.date {
position: absolute;
color: #48587e;
font-weight: bold;
left: 21.2%;
top: calc(160px * (100vw / 640px)); /* 640pxまでは相対的 */
text-align: center;
font-size: calc(16px * (100vw / 640px)); /* 640pxまでは相対的 */
line-height: 1.1;
}
@media screen and (min-width: 641px) {
.date {
top: 153px;
left: 21.3%;
font-size: 16px;
}
}
}
.Button {
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
display: grid;
place-items: center;
text-decoration: none;
padding: 16px;
margin-inline: 16px;
}
/* 大見出し */
.SectionTitle {
background: white;
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
border-top: 2px solid #48587e;
border-bottom: 2px solid #48587e;
position: relative;
z-index: 1;
}
.Feature {
position: relative;
}
.Feature:after,
.Feature:before {
content: "";
position: absolute;
display: block;
width: 50%;
height: 100%;
top: 0;
z-index: 0;
}
.Feature:before {
background: #ffe5ca;
}
.Feature:after {
background: #e0faf1;
right: 0;
}
.Feature_list {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
position: relative;
z-index: 1;
max-width: 370px;
margin: 0 auto;
}
.Feature_item {
width: 100%;
display: grid;
place-items: center;
padding: 24px 0;
}
.Feature_item_header {
display: grid;
place-items: center;
grid-template-columns: 1fr 1fr;
padding: 0 16px;
gap: 12px;
width: 100%;
}
.Feature_item_header_block {
display: grid;
place-items: center;
gap: 15px;
width: 100%;
}
.Feature_label {
width: 163px;
height: 34px;
display: grid;
place-items: center;
font-size: 18px;
font-weight: bold;
text-align: center;
color: white;
border-radius: 8px;
overflow: hidden;
}
.Feature_label-orange {
background: #fcab55;
}
.Feature_label-green {
background: #54d9ac;
}
.Feature_content {
border-radius: 4px;
overflow: hidden;
margin: 10px 10px 0;
}
.Feature_content_title {
background: #00bcd4;
color: white;
font-weight: bold;
font-size: 16px;
text-align: center;
height: 31px;
line-height: 31px;
}
.Feature_content_texts {
display: grid;
grid-template-columns: 1fr 1fr;
opacity: 0.8;
background: white;
}
.Feature_content_text {
padding: 16px;
font-size: 14px;
line-height: 1.6;
display: grid;
gap: 8px;
}
.Feature_content_text_title {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.Feature_content_info {
background: white;
padding: 10px 16px;
font-size: 14px;
}
.Feature_content_info_text {
margin-top: 4px;
}
/* テキスト装飾 */
.Lead {
color: var(--clr-navy);
text-align: center;
font-size: 15px;
font-weight: 700;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
&:before,
&:after {
height: 1rem;
background: var(--clr-navy);
width: 2px;
content: "";
display: block;
}
&:before {
transform: rotate(-30deg);
}
&:after {
transform: rotate(30deg);
}
}
/* 小見出し */
.Heading {
color: var(--clr-navy);
font-size: 18px;
font-weight: 700;
line-height: 20px;
border-bottom: 3px solid var(--clr-yellow);
padding-bottom: 12px;
margin-top: 16px;
width: 100%;
}
.Title {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
&.-hasLabel {
display: flex;
justify-content: center;
gap: 4px;
}
.label {
border-radius: 4px;
background: #fd9426;
padding: 2px 6px;
color: white;
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
}
/* 共通スペースとレイアウトリズムを定義 */
.Wrapper {
display: grid;
place-items: center;
gap: 16px;
padding: 16px 16px 32px;
}
/* テキストハイライト */
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}
/* 券面スライダー */
.CardSlider {
padding-block: 16px;
width: 100%;
.items {
display: none;
}
.items.slick-initialized {
display: block;
/* slickが実行完了したら表示 */
}
@media screen and (min-width: 769px) {
display: flex;
justify-content: center;
gap: 10px;
.items {
display: block;
}
img {
height: 38px;
}
}
.slick-slide {
margin: 0 4px;
}
}
/* 比較表 */
.Selection {
padding-bottom: 36px;
.originalContents {
padding: 16px 0 8px;
overflow-x: auto;
overflow-y: hidden;
position: relative;
&:after {
background: center/cover no-repeat url(../img/img-table-next.png);
content: "";
display: block;
position: absolute;
width: 43px;
height: 121px;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
opacity: 1;
transition: opacity 0.3s ease;
}
&.is-scrolled:after {
opacity: 0;
}
.scroll {
color: #3a3e3f;
font-size: 14px;
font-weight: 700;
margin: 0 8px 4px;
}
.pop_table {
border: solid 1px #e7f3fe;
background: white;
width: 100%;
table-layout: auto;
position: relative;
}
.pop_table th,
.pop_table td {
padding: 10px 5px 10px;
text-align: center;
}
.pop_table th {
padding: 6px 10px 6px;
width: 10%;
vertical-align: middle;
letter-spacing: 0.5em;
font-size: 13px;
font-weight: bold;
background-color: #e7f3fe;
border: solid 1px #7bafc7;
border-left: unset;
@media screen and (max-width: 768px) {
width: 5%;
}
}
.pop_table th span {
white-space: pre;
writing-mode: vertical-rl;
display: inline-block;
}
.pop_table th.th-s {
letter-spacing: 0.1em;
font-size: 12px;
}
.pop_table td {
min-width: 200px;
font-size: 12px;
border: solid 1px #7bafc7;
position: relative;
@media screen and (max-width: 768px) {
min-width: 100px;
width: 100px;
}
}
.pop_table tr.middle td {
vertical-align: middle;
font-weight: bold;
.pt_notice {
background: #ffe5ca;
font-size: 10px;
margin: 6px 0 0;
}
}
.pop_table .crown {
max-width: 32px;
margin: 0 auto 8px;
}
.pop_table .card {
width: 90%;
margin: 0 auto;
}
a.pop_table_card_link {
}
a.card_title_link {
text-decoration: underline;
}
.pop_table .card_title {
margin-top: 5px;
font-weight: bold;
}
.evaluation {
max-width: 28px;
margin: 0 auto 2px;
}
.cvBtn-s a {
display: block;
padding: 15px 2px;
letter-spacing: 0.1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
border-bottom: solid 4px #b7000b;
background-color: #e50916;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.pop_table .link a {
position: relative;
display: inline-block;
margin-top: 8px;
letter-spacing: 0;
color: #3a3e3f;
}
.pop_table td span.__yellow {
background: linear-gradient(transparent 50%, #ffe8a7 50%);
color: #000;
font-weight: bold;
}
.__fee_wrap {
background: #f5f5f5;
padding: 12px 0px;
position: relative;
margin: 0 0 24px;
border-radius: 8px;
}
.__fee_wrap:first-of-type:not(:last-of-type):after {
position: absolute;
content: "";
display: inline-block;
height: 2px;
width: 80%;
background-color: #eee;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__fee_wrap:last-of-type {
margin: 0;
}
.__fee_label {
font-weight: bold;
color: #444;
}
.__fee_label:before,
.__fee_label:after {
content: "-";
}
p.__fee_notice {
text-align: left;
}
.__fee_text {
font-size: 15px;
font-weight: bold;
}
.__fee_text span.__red {
color: #e50916;
}
.small {
font-size: 12px;
opacity: 0.7;
padding: 8px 0 0 8px;
}
}
}
.Ranking {
background: var(--clr-blue);
}
/* キャンペーン */
.Campaign {
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
.human {
text-align: center;
}
.human img {
max-width: 70%;
vertical-align: bottom;
}
.campaign_title {
padding: 10px 3px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #fd9426;
border-radius: 10px 10px 0 0;
}
.campaign_in {
padding: 24px 16px;
background-color: #fff6ed;
border: solid 1px #fd9426;
border-top: none;
border-radius: 0 0 10px 10px;
}
.campaign_main {
line-height: 1.3;
letter-spacing: 0;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.campaign_time {
margin-top: 5px;
text-align: center;
}
.campaign_main span.num {
font-size: 24px;
}
.campaign_main span.__small {
font-size: 14px;
color: #666;
}
}
}
/*------------------------------------
共通
--------------------------------------*/
/* Header */
.Header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
.toggle {
position: relative;
width: 20px;
height: 16px;
display: block;
span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 0;
height: 2px;
border-radius: 2px;
background: var(--clr-navy);
width: 100%;
}
span:nth-of-type(1) {
top: 0;
}
span:nth-of-type(2) {
top: 7px;
}
span:nth-of-type(3) {
bottom: 0;
}
&.is-active {
span:nth-of-type(1) {
transform: translateY(8px) rotate(-45deg);
}
span:nth-of-type(2) {
opacity: 0;
}
span:nth-of-type(3) {
transform: translateY(-6px) rotate(45deg);
}
}
}
.navigation {
display: none;
background: #0d5eb5;
position: absolute;
top: 56px;
left: 0;
width: 100%;
z-index: 9999;
}
.navigation__list {
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.navigation__list-item {
border-bottom: solid 1px #1585dc;
}
.navigation__list-item:first-child {
border-top: solid 1px #1585dc;
}
.navigation__link {
color: #fff !important;
font-weight: 700;
text-decoration: none;
display: block;
padding: 24px 0;
transition: 0.5s;
}
@media screen and (min-width: 769px) {
.navigation {
max-width: 640px;
left: 50%;
transform: translateX(-50%);
}
}
@media (hover: hover) and (pointer: fine) {
.navigation__link:hover {
background: #1585dc;
}
}
}
/* Navi */
.Navi {
padding: 16px 16px 24px;
.wrapper {
border-radius: 16px;
background: #f6f6f6;
padding: 24px 36px;
}
.title {
color: #48587e;
text-align: center;
font-weight: 700;
border-bottom: 3px solid #ecbb48;
padding-bottom: 8px;
margin-bottom: 8px;
}
.list {
display: grid;
gap: 8px;
padding: 8px;
a {
text-decoration: none;
color: #48587e;
font-size: 14px;
font-weight: 700;
span {
text-decoration: underline;
}
}
}
}
/* クレジットカード おすすめランキング */
.Ranking {
background: var(--clr-blue);
padding: 16px;
display: grid;
place-items: center;
gap: 20px;
.title {
font-size: 20px;
font-weight: 900;
color: #fff;
text-align: center;
position: relative;
padding: 0 30px;
span {
color: #fafe3b;
font-size: 26px;
display: block;
}
&:before,
&:after {
content: "";
display: block;
position: absolute;
background: center/cover no-repeat url(../img/ico_star.png);
}
&:before {
width: 31.249px;
height: 31.249px;
transform: rotate(17.545deg);
left: 0;
top: 10px;
}
&:after {
width: 25.408px;
height: 25.408px;
transform: rotate(-34deg);
right: 0;
bottom: 3.115px;
}
}
.card {
background: white;
padding: 32px 16px;
border-radius: 8px;
display: grid;
gap: 16px;
position: relative;
.card_title {
font-size: 24px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
img {
display: block;
width: 36px;
margin-left: -24px;
}
}
.card_subTitle {
span {
color: var(--clr-red);
font-weight: bold;
}
}
.card_heading {
font-size: 20px;
font-weight: 700;
color: var(--clr-navy);
border-bottom: 2px solid var(--clr-blue);
padding: 20px 10px 10px;
text-align: center;
}
.image {
width: 100%;
overflow-x: hidden;
position: relative;
--swiper-pagination-bottom: 0;
--swiper-theme-color: var(--clr-blue);
--swiper-navigation-size: 20px;
.swiper {
padding-bottom: 20px;
}
.swiper-slide {
text-align: center;
img{
width: 200px;
}
}
}
.rank_table {
width: 100%;
margin-top: 16px;
}
.rank_table th,
.rank_table td {
width: 33.33%;
padding: 10px 3px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
font-size: 12px;
}
.rank_table th {
font-weight: bold;
background-color: var(--clr-lightBlue);
border: solid 1px #d5ebee;
}
.rank_table td {
min-height: 64px;
border: solid 1px #d5ebee;
font-weight: bold;
sup{
font-size: 10px;
font-weight: normal;
}
}
.rank_table td img {
max-height: 16px;
margin: 5px 1px;
}
.accent {
color: var(--clr-red);
font-weight: 700;
font-size: 14px;
}
.tags {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex-wrap: wrap;
li {
color: var(--clr-navy);
font-size: 12px;
font-weight: 500;
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
border-radius: 100vh;
border: 1px solid var(--clr-navy);
}
}
.point {
display: grid;
width: 100%;
gap: 16px;
}
.point_wrapper {
position: relative;
&.is-mask {
height: 250px;
overflow-y: hidden;
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 150px;
width: 100%;
z-index: 2;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
#fff 53.5%,
#fff 100%
);
}
}
}
.point_item {
display: grid;
gap: 4px;
}
.point_title {
color: var(--clr-navy);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
&:before {
content: "";
display: block;
background: center/cover no-repeat url(../img/ico_check.svg);
width: 20px;
height: 20px;
}
}
.point_text {
font-size: 14px;
font-weight: 400;
}
.readMore {
color: var(--clr-blue);
font-size: 14px;
font-weight: 700;
display: block;
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.recommend {
display: grid;
gap: 16px;
}
.recommend_item {
font-weight: 700;
position: relative;
color: var(--clr-navy);
display: flex;
align-items: center;
gap: 8px;
&:before {
content: "";
display: block;
background: center/cover no-repeat url(../img/ico_check.svg);
width: 20px;
height: 20px;
}
span{
display: inline !important;
}
}
.reviews_slide {
width: 100%;
overflow-x: hidden;
position: relative;
margin-bottom: 20px;
--swiper-pagination-bottom: 0;
--swiper-theme-color: var(--clr-blue);
.swiper {
padding-bottom: 30px;
}
}
.reviews_area {
background: var(--clr-lightBlue);
border-radius: 4px;
padding: 16px;
display: grid;
gap: 10px;
font-size: 14px;
p {
line-height: 1.7;
}
}
.reviews_title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--clr-navy);
&.red {
color: var(--clr-red);
opacity: 0.8;
}
}
.reviews_image {
background: white;
border-radius: 100%;
width: 36px;
height: 36px;
display: grid;
place-items: center;
img {
width: 20px;
}
}
}
}
/* よくある質問 */
.Faq {
margin-top: 36px;
padding-bottom: 36px;
.toggle {
display: none;
}
.SectionTitle {
margin-bottom: 8px;
color: #fff;
font-size: 20px;
font-weight: 700;
background: var(--clr-blue);
display: grid;
gap: 2px;
position: relative;
padding: 16px;
text-align: center;
}
.accordion {
position: relative;
border-bottom: 1px solid var(--clr-blue);
background: white;
}
.accordion_title,
.accordion_content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.accordion_title {
padding: 1.5em 2em 1.5em 1em;
display: block;
font-weight: bold;
color: var(--clr-navy);
cursor: pointer;
}
.accordion_title::after,
.accordion_title::before {
content: "";
position: absolute;
right: 1.25em;
top: calc(50% - 5px);
width: 2px;
height: 0.75em;
background-color: var(--clr-navy);
transition: all 0.3s;
}
.accordion_title::after {
transform: rotate(90deg);
}
.accordion_content {
max-height: 0;
overflow: hidden;
}
.toggle:checked + .accordion_title + .accordion_content {
max-height: 10000px;
transition: all 1.5s;
}
.toggle:checked + .accordion_title::before {
transform: rotate(90deg) !important;
}
.faq_title {
position: relative;
padding-left: 30px;
}
.faq_title .qa {
position: absolute;
top: calc(50% - 17px);
left: 0;
font-size: 22px;
}
.faq_txt {
position: relative;
margin: 0 1em 1.5em 1em;
padding-left: 30px;
}
.faq_txt .qa {
position: absolute;
top: -6px;
left: 0;
font-size: 22px;
font-weight: bold;
color: #e50916;
}
.faq_txt p {
margin-top: 10px;
}
}
/* footer */
.Footer {
padding: 40px 0;
text-align: center;
color: #fff;
background-color: var(--clr-blue);
a {
color: #fff;
text-decoration: none;
}
small {
display: block;
margin-top: 20px;
letter-spacing: 0;
font-size: 11px;
}
}
/*search_step
---------------------------------------------------------------------------*/
#step_area html {
line-height: 1;
}
#step_area ol,
#step_area ul {
list-style: none;
}
#step_area table {
border-collapse: collapse;
border-spacing: 0;
}
#step_area caption,
#step_area th,
#step_area td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
#step_area q,
#step_area blockquote {
quotes: none;
}
#step_area q:before,
#step_area q:after,
#step_area blockquote:before,
#step_area blockquote:after {
content: "";
content: none;
}
#step_area a img {
border: none;
}
#step_area article,
#step_area aside,
#step_area details,
#step_area figcaption,
#step_area figure,
#step_area footer,
#step_area header,
#step_area hgroup,
#step_area main,
#step_area menu,
#step_area nav,
#step_area section,
#step_area summary {
display: block;
}
#step_area html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
#step_area body {
font-family: "Kosugi Maru", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
color: #696969;
}
#step_area input,
#step_area select,
#step_area textarea,
#step_area button,
#step_area option {
font-family: "Kosugi Maru", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
color: #696969;
font-size: 1rem;
}
#step_area button {
cursor: pointer;
}
#step_area a {
text-decoration: none;
color: #696969;
}
#step_area input[type="submit"] {
-webkit-appearance: none;
}
:root {
--main-color: #5bb75b;
--sub-color: #ff7e0e;
}
#step_area {
background: #fff;
position: relative;
}
#step_area .step_title {
font-size: 12px;
text-align: center;
margin: 0 0 10px;
}
#step_area .step_title b{
font-size: 16px;
}
#step_area .step_count {
padding: 0 0.5rem 0;
}
#step_area .step_count ul {
display: flex;
justify-content: center;
margin: 0 0 6px;
}
#step_area .step_count ul li {
background: #b0b0b0;
padding: 0.4rem;
border-radius: 50%;
color: #ffffff;
position: relative;
font-size: 12px;
}
#step_area .step_count ul li.active {
background: #ffd940;
color: #666;
font-weight: bold;
}
#step_area .step_count ul li.active:not(:first-of-type):before {
background: #ffd940;
}
#step_area .step_count ul li:not(:first-of-type) {
margin-left: 1rem;
}
#step_area .step_count ul li:not(:first-of-type):before {
content: "";
display: block;
background: #b0b0b0;
height: 2px;
position: absolute;
left: -1rem;
width: 1rem;
top: 50%;
transform: translateY(-50%);
}
#step_area .step_body {
}
#step_area .step_body .step {
display: none;
flex-wrap: wrap;
}
#step_area .step_body .step.open {
display: flex;
justify-content: flex-start;
}
#step_area .step_body .step .label_wrap {
flex-basis: calc((100% - 12px) / 3);
padding: 0;
box-sizing: border-box;
}
#step_area .step_body .step .label_wrap:nth-child(3n-1) {
margin: 0 6px 6px 6px;
}
#step_area .step_body .step.column2 .label_wrap {
flex-basis: calc((100% - 5px) / 2);
}
#step_area .step_body .step .label_wrap:nth-child(3n-1) {
margin: 0 5px 5px 5px;
}
#step_area .step_body .step.column2 .label_wrap:nth-child(3n-1) {
margin: 0 0px 5px 0px;
}
#step_area .step_body .step.column2 .label_wrap:nth-child(odd) {
margin: 0 5px 5px 0;
}
#step_area .step_body .step .label_wrap label span {
font-size: 12px;
font-weight: bold;
color: #666;
padding: 0.5rem;
box-sizing: border-box;
width: 100%;
display: block;
text-align: center;
border: 1px solid var(--sub-color);
border-radius: 5px;
transition: 0.5s background-color, color;
position: relative;
background: #fff4eb;
}
#step_area .step_body .step.column2 .label_wrap label span{
font-size: 14px;
}
#step_area .step_body .step .label_wrap label span:after {
position: absolute;
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 14px;
right: 5px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
color: var(--sub-color);
}
#step_area .step_body .step .label_wrap label input[type="radio"],
#step_area .step_body .step .label_wrap label input[type="checkbox"] {
display: none;
}
#step_area
.step_body
.step
.label_wrap
label
input[type="radio"]:checked
+ span,
#step_area
.step_body
.step
.label_wrap
label
input[type="checkbox"]:checked
+ span {
background: var(--sub-color);
color: #ffffff;
}
#step_area .step_body .step .button_wrap {
flex: 100%;
padding: 0.5rem 0;
display: flex;
justify-content: space-evenly;
}
#step_area .step_body .step .button_wrap .button,
#step_area .step_body .step .button_wrap button {
padding: 0.4rem 2rem;
font-size: 14px;
border: 1px solid #D2D2D2;
border-radius: 100px;
font-size: 10px;
}
#step_area button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
#step_area .step_body .step .button_wrap button.search_start {
background: #ff4b4b;
color: #fff;
}
#step_area .step_body .step .button_wrap button.next {
background: #32CD69;
color: #fff;
font-weight: bold;
}
.grad-btn {
z-index: 2;
position: absolute;
right: 0;
bottom: 0px;
left: 0;
width: 130px;
margin: auto;
padding: 4px 0;
border-radius: 4px;
background: var(--sub-color);
color: #fff;
font-size: 14px;
text-align: center;
cursor: pointer;
transition: 0.2s ease;
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
font-weight: bold;
}
.grad-btn i {
margin: 0 6px 0 0;
}
.step_inner {
background: #fff;
position: relative;
overflow: hidden;
height: 138px;
}
.step_inner:before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
/*グラデーションで隠す高さ*/
background: -webkit-linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.9) 50%,
#fff 100%
);
background: linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.9) 50%,
#fff 100%
);
content: "";
z-index: 1;
}
.grad-trigger {
display: none;
/*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
display: none;
/*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ .step_inner {
height: auto;
/*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .step_inner:before {
display: none;
/*チェックされていたら、grad-itemのbeforeを非表示にする*/
}
.search_step_box {
padding: 0px 16px 0;
margin: 0 0 32px;
}
.CardSlider +.inner .search_step_box{
margin: 0 0 16px;
}
.search_step_box_title {
text-align: center;
line-height: 1;
padding: 16px 0;
font-weight: bold;
background: var(--clr-blue);
color: #fff;
border-radius: 8px 8px 0 0;
}
.search_step_box_inner {
padding: 16px;
border: solid 1px var(--clr-blue);
border-radius: 0 0 8px 8px;
}
/*other
---------------------------------------------------------------------------*/
p.notes {
padding: 0 16px;
margin: 0 0 32px;
}
// 点滅
.Blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
75% {
opacity: 0;
}
}
.__summary_title{
display: block;
border-bottom: solid 1px var(--clr-blue);
padding: 0 0 8px;
font-weight: bold;
}
.summary_wraper{
padding: 0 16px;
margin: 0 0 32px;
}
p.summary{
font-size: 14px;
padding: 16px;
margin: 0 auto;
background: #fff;
border-radius: 8px;
}
a.__summary_link{
color: #0d5eb5;
}
/*section_category
---------------------------------------------------------------------------*/
.feature_wrap {
padding: 0 8px;
}
.feature_title {
position: relative;
margin: 30px 0 35px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: var(--clr-navy);
}
.feature_title::after {
content: "";
width: 40px;
height: 4px;
display: inline-block;
background-color: var(--clr-blue);
position: absolute;
bottom: -10px;
left: calc(50% - 20px);
}
.feature_area {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
width: 100%;
}
.feature_area li {
width: calc((100% - 8px) / 2);
margin-left: 8px;
margin-top: 10px;
}
.feature_area li:nth-child(2n-1) {
margin-left: 0;
}
.feature_area li a {
position: relative;
display: block;
padding: 20px 8px;
letter-spacing: 0;
font-weight: bold;
color: #0d5eb5;
border: solid 1px var(--clr-blue);
border-radius: 4px;
background: #fff;
/* line-height: ; */
}
.feature_area li a:before {
content: "";
width: 5px;
height: 5px;
border: 0;
border-top: solid 2px #0d5eb5;
border-right: solid 2px #0d5eb5;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 8px;
bottom: 0;
margin: auto;
}
.feature_area li img {
max-width: 24px;
margin-right: 5px;
vertical-align: text-bottom;
}
.__amazon,
.__doutor,
.__starbucks,
.__seven,
.__lawson{
font-size: 14px;
font-weight: bold;
line-height: 1;
}
.__amazon:before {
display: inline-block;
content: "";
width: 16px;
height: 16px;
background-image: url(../img/cre_service_logo_amazon.png);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin: 0 3px 0 0;
}
.__doutor:before {
display: inline-block;
content: "";
width: 28px;
height: 28px;
background-image: url(../img/cre_service_logo_doutor.png);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin: 0 3px 0 0;
}
.__starbucks:before {
display: inline-block;
content: "";
width: 22px;
height: 22px;
background-image: url(../img/cre_service_logo_starbucks.png);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin: 0 3px 0 0;
}
.__seven:before {
display: inline-block;
content: "";
width: 18px;
height: 18px;
background-image: url(../img/cre_conveni_seven.png);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin: 0 2px 0 0;
}
.__lawson:before {
display: inline-block;
content: "";
width: 18px;
height: 18px;
background-image: url(../img/cre_conveni_lawson.png);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin: 0 2px 0 0;
}
.pop_table tr td:first-of-type {
border-right: solid 2px #fd9426 !important;
border-left: solid 2px #fd9426 !important;
}
.pop_table tr:first-of-type td:first-of-type {
border-top: solid 2px #fd9426 !important;
}
.pop_table tr:last-of-type td:first-of-type {
border-bottom: solid 2px #fd9426 !important;
}
.__baloon_first {
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__baloon_first_inner {
background: #fd9426;
font-size: 12px;
white-space: nowrap;
line-height: 1;
padding: 6px;
font-weight: bold;
color: #fff;
border-radius: 4px;
position: relative;
}
.__baloon_first_inner:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
border-style: solid;
border-color: #fd9426 transparent transparent transparent;
border-width: 6px 4px 0 4px;
z-index: 1;
}
@keyframes fuwafuwa {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.anime01 {
animation: 2s fuwafuwa infinite;
}
.Recommend {
margin-bottom: 32px;
.HighLight {
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: 900;
}
.title {
font-size: 22px;
font-weight: 900;
color: var(--clr-navy);
text-align: center;
padding: 16px;
display: grid;
place-items: center;
gap: 8px;
&:after {
display: block;
content: "";
width: 24px;
height: 26px;
background: url('data:image/svg+xml,');
}
}
.wrapper {
position: relative;
padding: 40px 16px 0;
&:before {
content: "";
display: block;
background: url(../img/img_confetti.png);
width: 100%;
height: 190px;
background-size: contain;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
}
.card {
border: 2px solid #04a7bc;
background: white;
padding: 32px 16px;
border-radius: 8px;
display: grid;
gap: 16px;
.card_title {
font-size: 24px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
img {
display: block;
width: 36px;
margin-left: -24px;
}
}
.card_subTitle {
span {
color: var(--clr-red);
font-weight: bold;
}
}
.card_heading {
font-size: 20px;
font-weight: 700;
color: var(--clr-navy);
border-bottom: 2px solid var(--clr-blue);
padding: 20px 10px 10px;
text-align: center;
}
.image {
width: 100%;
overflow-x: hidden;
position: relative;
--swiper-pagination-bottom: 0;
--swiper-theme-color: var(--clr-blue);
--swiper-navigation-size: 20px;
.swiper {
padding-bottom: 20px;
}
.swiper-slide {
text-align: center;
}
}
.rank_table {
width: 100%;
margin-top: 16px;
}
.rank_table th,
.rank_table td {
width: 33.33%;
padding: 10px 3px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
font-size: 12px;
}
.rank_table th {
font-weight: bold;
background-color: var(--clr-lightBlue);
border: solid 1px #d5ebee;
}
.rank_table td {
min-height: 64px;
border: solid 1px #d5ebee;
sup{
font-size: 10px;
font-weight: normal;
}
}
.rank_table td img {
max-height: 16px;
margin: 5px 1px;
}
.accent {
color: var(--clr-red);
font-weight: 700;
font-size: 14px;
}
.tags {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
li {
color: var(--clr-navy);
font-size: 12px;
font-weight: 500;
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
border-radius: 100vh;
border: 1px solid var(--clr-navy);
}
}
.point {
display: grid;
width: 100%;
gap: 16px;
}
.point_wrapper {
position: relative;
&.is-mask {
height: 250px;
overflow-y: hidden;
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 150px;
width: 100%;
z-index: 2;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
#fff 53.5%,
#fff 100%
);
}
}
}
.point_item {
display: grid;
gap: 4px;
}
.point_title {
color: var(--clr-navy);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
&:before {
content: "";
display: block;
background: center/cover no-repeat url(../img/ico_check.svg);
width: 20px;
height: 20px;
}
}
.point_text {
font-size: 14px;
font-weight: 400;
}
.readMore {
color: var(--clr-blue);
font-size: 14px;
font-weight: 700;
display: block;
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.recommend {
display: grid;
gap: 16px;
}
.recommend_item {
font-weight: 700;
position: relative;
color: var(--clr-navy);
display: flex;
align-items: center;
gap: 8px;
&:before {
content: "";
display: block;
background: center/cover no-repeat url(../img/ico_check.svg);
width: 20px;
height: 20px;
}
}
.reviews_slide {
width: 100%;
overflow-x: hidden;
position: relative;
margin-bottom: 20px;
--swiper-pagination-bottom: 0;
--swiper-theme-color: var(--clr-blue);
.swiper {
padding-bottom: 30px;
}
}
.reviews_area {
background: var(--clr-lightBlue);
border-radius: 4px;
padding: 16px;
display: grid;
gap: 10px;
font-size: 14px;
p {
line-height: 1.7;
}
}
.reviews_title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--clr-navy);
&.red {
color: var(--clr-red);
opacity: 0.8;
}
}
.reviews_image {
background: white;
border-radius: 100%;
width: 36px;
height: 36px;
display: grid;
place-items: center;
img {
width: 20px;
}
}
}
}
p.__fee_notice {
text-align: left;
}
span.__inlineblock {
display: inline-block;
}
.__red {
color: var(--clr-red);
}
.__left {
text-align: left !important;
}
.Annotation {
padding: 0 16px;
margin-bottom: 16px;
p {
background: #fff;
padding: 16px;
border: solid 2px #fd9426;
position: relative;
font-size: 14px;
span.__yellow {
background: linear-gradient(transparent 60%, #fee0c1 60%);
}
}
}
.__center {
text-align: center;
}
.type_baloon {
font-size: 22px;
font-weight: 700;
color: var(--clr-navy);
text-align: center;
padding: 8px;
display: inline-block;
position: relative;
}
.type_baloon:before,.type_baloon:after{
position: absolute;
bottom: 0;
height: 1.6rem;
content: '';
}
.type_baloon:before{
border-left: solid 3px var(--clr-navy);
left: -20px;
top: 50%;
transform: translateY(-50%) rotate(-20deg);
-webkit-transform: translateY(-50%) rotate(-20deg);
-ms-transform: translateY(-50%) rotate(-20deg);
}
.type_baloon:after{
border-left: solid 3px var(--clr-navy);
right: -20px;
top: 50%;
transform: translateY(-50%) rotate(20deg);
-webkit-transform: translateY(-50%) rotate(20deg);
-ms-transform: translateY(-50%) rotate(20deg);
}
.type_baloon span.HighLight {
font-weight: 900;
}
span.__CampaignShortNotice{
display: block;
background: #FFEFED;
color: #FF442D;
text-align: center;
padding: 4px 0px;
margin: 8px 0 0 ;
border-radius: 3px;
font-size: 11px;
}
.feature_wrap.__top{
margin: 0 0 16px;
}
.feature_wrap.__top .feature_area li a{
padding: 12px 8px;
font-size: 14px;
}
.feature_wrap.__top .feature_area li img{
max-width: 20px;
}
@keyframes reflect {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.__baloon_first-ranking {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.__baloon_first-ranking_inner {
background: #e50b18;
font-size: 14px;
white-space: nowrap;
line-height: 1;
padding: 8px 16px;
font-weight: bold;
color: #fff;
border-radius: 4px;
position: relative;
}
.__baloon_first-ranking_inner:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
border-style: solid;
border-color: #e50b18 transparent transparent transparent;
border-width: 6px 4px 0 4px;
z-index: 1;
}
.title span.__inlineblock {
display:inline;
}
.__campaign_notice{
margin: 16px 0 0;
@media screen and (max-width: 768px) {
font-size:12px;
}
}
span.__campaigndate_text{
display: inline-block;
text-align: left;
@media screen and (max-width: 768px) {
font-size:12px;
}
}
span.__speedsup{
@media screen and (max-width: 768px) {
font-size:10px;
font-weight:normal;
}
}
.Result{
box-sizing: border-box;
width: 100%
}
.__ResultHeader_Wrap{
padding: 0 16px;
}
.__ResultHeader{
background: #fff;
padding: 16px;
border-radius: 8px;
margin: 0 0 32px;
border: solid 2px var(--clr-blue);
width: auto;
}
.__ResultHeader_Header{
display: flex;
justify-content: space-between;
align-items: center;
}
.__ResultHeader_Title{
font-size: 20px;
color: #888;
position: relative;
padding-left: 28px;
margin: 20px 0 10px;
}
.__ResultHeader_Title:before{
content: '\f1de';
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0px;
}
ul.__ResultHeader_Items{
}
ul.__ResultHeader_Items li{
padding: 12px 10px 10px 20px;
border: solid 2px var(--clr-blue);
color: var(--clr-blue);
font-weight: 600;
margin: 0 10px 10px 0;
position: relative;
display: inline-block;
font-size: 20px;
line-height: 1;
border-radius: 4px;
}
ul.__ResultHeader_Items li:before{
position: absolute;
content: '\f0da';
font-family: "Font Awesome 5 Free";
font-weight: 900;
left: 5px;
color: var(--clr-blue);
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.__ResultHeader_Header_Counter{
font-size: 24px;
}
.__ResultHeader_Header_Counter span.color{
color: #ff4b4b;
font-weight: bold;
}
.__ResultHeader_Header_ChangeButton{
color: #888;
font-weight: bold;
font-size: 20px;
padding: 15px 10px;
background: #f4f4f4;
border-radius: 6px;
line-height: 1;
border: solid 2px #ccc;
}
.__ResultHeader_Header_ChangeButton i{
margin: 0 10px 0 0 ;
}
.__ResultHeader_Header a{
text-decoration: none;
}
@media screen and (max-width: 768px) {
.Result{
}
.__ResultHeader_Wrap{
}
.__ResultHeader{
margin: 0 0 16px;
border: solid 1px var(--clr-blue);
}
.__ResultHeader_Header{
}
.__ResultHeader_Title{
font-size: 12px;
padding-left: 16px;
margin: 10px 0 10px;
}
.__ResultHeader_Title:before{
}
ul.__ResultHeader_Items{
}
ul.__ResultHeader_Items li{
padding: 5px 5px 6px 12px;
border: solid 1px var(--clr-blue);
margin: 0 5px 5px 0;
font-size: 12px;
border-radius: 4px;
}
ul.__ResultHeader_Items li:before{
font-size: 10px;
}
.__ResultHeader_Header_Counter{
font-size: 14px;
}
.__ResultHeader_Header_Counter span.color{
}
.__ResultHeader_Header_ChangeButton{
font-size: 10px;
padding: 8px 6px;
border-radius: 6px;
border: solid 2px #ccc;
}
.__ResultHeader_Header_ChangeButton i{
margin: 0 10px 0 0 ;
}
.__ResultHeader_Header a{
text-decoration: none;
}
}
section.notice_result{
text-align: center;
padding: 20px;
margin: 0 auto 12px;
border-radius: 10px;
background: #FFF4EB;
border: solid 2px #ff7e0e;
}
h3.notice_result_title{
font-size: 20px;
}
h3.notice_result_title:before{
content: '\f058';
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #00cc99;
margin: 0 5px 0 0;
}
p.notice_result_description{
font-size: 20px;
text-align: left;
}
section.notice_result.result_none{
background: #fff;
}
section.notice_result.result_none h3.notice_result_title:before{
color: #ff4b4b;
}
@media screen and (max-width: 768px) {
section.notice_result{
padding: 10px;
margin: 0 0 10px;
border-radius: 5px;
border: solid 1px #ff7e0e;
}
h3.notice_result_title{
font-size: 12px;
}
h3.notice_result_title:before{
margin: 0 3px 0 0;
}
p.notice_result_description{
font-size: 12px;
}
section.notice_result.result_none{
}
section.notice_result.result_none h3.notice_result_title:before{
}
}
.Result .Ranking{
padding-top: 90px;
position: relative;
}
.Result .Ranking:after{
position: absolute;
content: '';
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 60px 320px 0px 320px;
border-color:var(--clr-bg-contents) transparent transparent transparent;
}
.Result .pr{
position: absolute;
color: #fff;
top: 22px;
right: 20px;
border: solid 1px #fff;
line-height: 1;
padding: 4px 8px;
font-size: 12px;
border-radius: 4px;
}
.Result .HushTags{
display: flex;
flex-wrap: wrap;
gap:6px;
}
.Result .HushTags li{
font-size: 11px;
line-height: 1;
padding: 8px;
border-radius: 4px;
background-color: #FD8100;
color: #fff;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.Result .Ranking{
padding-top: 60px;
}
.Result .Ranking:after{
border-width: 30px 50vw 0px 50vw;
border-color:var(--clr-bg-contents) transparent transparent transparent;
}
}
span.__label_type{
background: #ff9933;
color: #fff;
display: inline-block;
line-height: 1;
padding: 6px 6px;
border-radius: 3px;
font-size: 11px;
}
span.__label_type.__type02{
background: #66cdaa;
}
p.__type_notes{
font-size: 12px;
}
.pop_table td sup{
font-size: 10px;
vertical-align: text-top;
}
.Screening.Paylater {
& .Info {
.mainImage {
width: calc(100%);
}
}
}
.Screening.Paylater {
& .Info {
.box {
background: #fff6ed;
padding: 16px 0 0 0;
width: 100%;
margin-top: 0;
}
}
}
.Screening {
& .Selection {
.pop_table td {
span.__small{
font-size: 10px;
}
}
}
}
.Screening.Paylater {
.__campaign_notice {
@media screen and (max-width: 768px) {
font-size: 12px;
color:#666;
margin:0;
}
}
}
/*kizi
---------------------------------------------------------------------------*/
.Kizi{
section.Column{
padding: 16px 16px 16px;
background: #fff;
}
/* 大見出し (H2) */
.TitleBig {
font-size: 1.3em;
font-weight: 700;
border-top: 6px double #fff;
border-bottom: double #fff 6px;
padding: 0.6em 0.4em;
margin: 1.5em 0 1em 0;
background: #444;
color: #fff;
}
/* 中見出し (H3) */
.TitleMiddle {
font-size: 1.0em;
font-weight: 600;
color: #333333; /* 濃いグレー文字 */
border-left: 4px solid #999999; /* 明るめグレー */
padding: 0.3em 0.6em;
margin: 24px 0 12px 0;
}
/* 小見出し (H4) */
.TitleSmall {
font-size: 1.2em;
font-weight: 500;
color: #555555; /* 中間グレー文字 */
margin: 1em 0 0.6em 0;
}
/* 本文テキスト (p) */
.Text {
font-size: 1em;
line-height: 1.8;
color: #444444;
margin: 0 0 24px 0;
}
/* 画像 (幅100%、中央寄せ) */
.Thumb {
display: block;
max-width: 100%;
height: auto;
margin: 1em auto;
border: 1px solid #cccccc;
border-radius: 4px;
}
/* 表組み */
.Table01 {
width: 100%;
border-collapse: collapse;
margin: 0 0 16px;
font-size: 0.8em;
}
.Table01.Evenly{
table-layout: fixed
}
.Table01 th {
background-color: #666666; /* グレー背景 */
color: #ffffff; /* 白文字 */
font-weight: 600;
border: 1px solid #999999;
padding: 0.6em;
text-align: center;
vertical-align: middle;
}
.Table01 td {
border: 1px solid #cccccc;
padding: 0.6em;
text-align: left;
background-color: #f7f7f7;
font-weight: bold;
}
.Table01.td-White td,.Table01.td-White tr:nth-child(even) td {
background-color: #fff;
}
.Table01 tr:nth-child(even) td {
background-color: #eeeeee; /* 偶数行の薄いグレー */
}
ul.caroucel {
width: 100%;
padding: 8px 0 10px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
white-space: nowrap;
scroll-snap-type: x mandatory;
margin: 0 0 16px;
}
li.caroucel-item{
scroll-snap-align: start;
margin: 0 16px 0 0px;
display: inline-block;
width: 68%;
white-space: normal;
vertical-align: top;
border-radius: 10px;
text-align: center;
position: relative;
}
/* 施設名 */
.facility-name {
margin-top: 0px;
font-size: 13px;
font-weight: 500;
}
/* テーブルラッパー全体 */
.TableWrapper {
position: relative;
margin: 1.5em 0;
}
/* テーブルを一部表示 */
.TableContainer {
position: relative; /* 疑似要素配置用 */
overflow: hidden;
transition: max-height 0.5s ease;
}
/* 折りたたみ時のみグラデーション */
.TableContainer.collapsed::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px; /* フェードの高さ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%);
pointer-events: none; /* クリック透過 */
}
/* 折りたたみ状態: 2行程度が見える高さに */
.TableContainer.collapsed {
max-height: 200px;
}
/* 展開状態: 高さ制限を解除 */
.TableContainer.expanded {
max-height: 1000px; /* 任意に調整 */
}
/* ボタンスタイル */
.ExpandButton {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
display: block;
width: 30%;
margin-top: 0.5em;
padding: 10px;
font-size: 14px;
color: #fff;
background-color: #00008B; /* グレーベース */
border: none;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.ExpandButton:hover {
background-color: #777777;
}
ul.CheckLists{
border: 1px solid #fd9426;
padding: 16px;;
background-color: #fff6ed;
margin: 0 0 24px;
}
ul.CheckLists li{
position: relative;
padding: 0 0 0 20px;
}
ul.CheckLists li:not(:last-child){
margin: 0 0 16px;
}
ul.CheckLists li:before{
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f058";
font-weight: 700;
left: -6px;
font-size: 18px;
color: #fd9426;
}
.yellow{
background: linear-gradient(transparent 60%, #FCFE94 60%);
}
.red{
color: #FF4314;
}
.big{
font-size: 1.2em;
}
span.block-circle{
display: block;
padding: 0 0 0 20px;
position: relative;
}
span.block-circle:before{
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f061";
font-weight: 700;
left: 0;
}
a.LinkButton{
display: block;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 700;
border-radius: 100vh;
background: #e50b18;
text-decoration: none;
padding: 16px;
overflow: hidden;
position: relative;
}
a.LinkButton span.ButtonSmallText{
display: inline-block;
font-size: 12px;
}
}
.point_text span.small{
font-size: 12px;
}