@charset "utf-8";
:root {
--scrollbar: 0;
--shadow-color:#ced7dc;
--red:#cf072b;
--fs-70: min(9.33vw,70px);
--fs-68: min(9.06vw,68px);
--fs-64: min(8.5vw,64px);
--fs-60: min(8vw,60px);
--fs-54: min(7.2vw,54px);
--fs-50: min(6.6vw,50px);
--fs-48: min(6.4vw,48px);
--fs-46: min(6.13vw,46px);
--fs-44: min(5.86vw,44px);
--fs-42: min(5.6vw,42px);
--fs-40: min(5.33vw,40px);
--fs-38: min(5.06vw,38px);
--fs-36: min(4.8vw,36px);
--fs-34: min(4.53vw,34px);
--fs-32: min(4.26vw,32px);
--fs-30: min(4vw,30px);
--fs-28: min(3.73vw,28px);
--fs-26: min(3.46vw,26px);
--fs-24: min(3.2vw,24px);
--fs-22: min(3.2vw,22px);
--fs-20: min(2.93vw,20px);
--fs-16: min(2.13vw,16px);
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("font/NotoSansJP-Medium.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("font/NotoSansJP-Bold.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url("font/NotoSansJP-Black.woff") format("woff");
}

html, body, div, span, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  abbr, address, cite, code,  del, dfn, em, img, ins, kbd, q, samp,  small, strong, sub, sup, var,  b, i,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary,  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html,body{height: 100%}
html[lang="ja"],button {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
html{
  scroll-behavior: smooth;
}
body {
  line-height: 1;
}
article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, picture {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,  q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}

ul,ol{list-style: none; padding: 0}

img{max-width: 100%; height: auto; vertical-align: bottom;}

/* ====================================
#header/#footer
===================================== */
#header{background: #fff; position: relative; z-index: 2}
#header .container,#footer .container{display: flex; align-items: center;}
#logo{display: block; line-height: 1}

#footer{background: var(--red);}
.footer-copy{ color: #fff; font-style: normal;}

.pagetop{ opacity: 0; display: flex; align-items: center; justify-content: center; background-color: var(--main-color); position: fixed; bottom: 20px; z-index: 50; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; transition: opacity 0.3s ease;}
.pagetop.visible{opacity: 1;}
.pagetop:hover{opacity: 0.6;}
.pagetop:before{content: ""; display: block; width: 26%; height: 26%; border-width: 3px 3px 0 0; border-color: #fff; border-style: solid; transform: rotate(-45deg); margin-top: 13%;}
.pagetop-txt{display: none;}

@media (min-width: 1360px) {
.pagetop{ right: calc((100vw - 1150px)/2 - 100px);}
}
@media (min-width: 768px) and (max-width: 1359px) {
.pagetop{ right: 10px;}
}
@media (min-width: 768px) {
	#header .container{width: 910px; height: 80px;}
	#logo{ width: 250px; height: 25px;}
  .pagetop{ width: 80px; height: 80px;}
 #footer .container{width: 832px; height: 70px; justify-content: space-between}
 .footer-logo{ width: 140px; height: 14px;}
 .footer-copy{ font-size: 0.75rem;}
}
@media (max-width: 767px) {
	#header .container{ height: 13.3vw; max-height: 100px;}
	#logo{ width: 47.4%;}
  .pagetop{ width: min(13.3vw,100px); height: min(13.3vw,100px);}
.pagetop{ right: 0; bottom: 30vw; transition: bottom 0.8s ease;}
.pagetop.footerArea{bottom: 20px;}

 #footer .container{ height: 12vw; max-height: 90px; justify-content:center; flex-direction: column;}
 .footer-logo{ width: min(27.4vw,206px); height: min(2.6vw,20px); margin-bottom: min(2vw,14px)}
 .footer-copy{ font-size: min(2.5vw,19px);}
}

/* ====================================
layout
===================================== */
.container{margin: 0 auto; position: relative; box-sizing: border-box;}

.reverce{ flex-direction: row-reverse;}
.d-flex{display: flex; justify-content: space-between;}

@media (min-width: 768px) {
body{min-width: 1150px;}
.container{width: 1150px;}
.section{padding: 50px 0 70px;}
.d-flex-lg{display: flex; justify-content: space-between;}
.reverce-lg{ flex-direction: row-reverse;}
.pc-only{display: block;}
.sp-only{display: none;}
}
@media (max-width: 767px) {
.container{width: 89.3%}
.section{ padding: min(11.4vw,86px) 0 min(14.6vw,110px)}
.d-flex-sp{display: flex; justify-content: space-between;}
.pc-only{display: none;}
.sp-only{display: block;}
}

/* ====================================
keyvisual
===================================== */
#keyvisual{position: relative;}
.kv-ttl.fv,.kv-card.fv, .kv-lead.fv,.kv-words.fv{opacity: 0}
.kv-ttl{line-height: 1;}
.kv-card{ position: relative; z-index: 3; overflow: hidden;}
/*
.kv-card img{ filter: drop-shadow(10px 10px 5px rgba(0,0,0,.3))}
*/
.kv-lead-wrap{ position: absolute; z-index: 2;}
.kv-lead{ font-weight: 700; color: #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; white-space: nowrap;}

/* anm-line:after */
.anm-line:after{content: ""; width: 100%; height: 100%; display: block; z-index: 2; background-color: var(--main-color); position: absolute; left: 0; top: 0;}

.kv-ttl.anm-line:after,.kv-lead-wrap.anm-line:after{transform: translateX(-100vw);}
.kv-ttl.anm-line:after{transform: translateX(-150%); animation: anm-line 1.3s ease-in forwards;}
.kv-lead-wrap.anm-line:after{transform: translateX(-150%); animation: anm-line 0.8s 0.5s ease-in forwards;}
.kv-lead{box-sizing: border-box;}

@keyframes anm-line{
  0% {transform: translateX(-100vw);}
  100% { transform: translateX(100vw)}
}

.kv-card.anm-line:after{transform: translateX(-100%); animation: anm-card-line 0.8s 2.2s ease-in forwards;}

@keyframes anm-card-line{
  0% {transform: translateX(-100%);}
  100% { transform: translateX(100%)}
}

/* anm-clip */
.anm-clip{ width: 0; overflow: hidden; animation: anm-clip 0.8s 1.5s ease-in forwards;}
.kv-card .anm-clip{animation-delay: 2s;}

@keyframes anm-clip{
  0% {width: 0;}
  100% { width: 100%}
}

.kv-lead:before{ opacity: 0; display: block; content: ""; background: url(../image/kv-card-shadow.png) 0 0 no-repeat; position: absolute; top: 0; left: 0; animation: anm-show 0.8s 2.8s ease-in forwards;}

@keyframes anm-show{
  0% { opacity: 0;}
  100% { opacity: 1;}
}

.btnArea{display: flex; align-items: center; justify-content: center; color: #fff;}

.kv-words{ background: #fff; border: 1px solid #b1bfc8; overflow: hidden; position: absolute; z-index: 4; transition: height 0.5s ease;}
.kv-words-btn{border: none; background-color: transparent; outline: none; cursor: pointer; line-height: 1; display: flex; width: 100%; align-items: center; position: relative; color: #000;}
.kv-words-btn:after{content: ""; display: block; background: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23213370" d="m24,0C10.75,0,0,10.75,0,24s10.75,24,24,24,24-10.75,24-24S37.25,0,24,0Zm11.06,26.12h-8.94v8.94h-4.24v-8.94h-8.94v-4.24h8.94v-8.94h4.24v8.94h8.94v4.24Z"/></svg>') no-repeat 0 0; position: absolute; top: 0; bottom: 0; margin: auto 0;}
.kv-words.active .kv-words-btn:after{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> <path fill="%23213370" d="m24,0C10.75,0,0,10.75,0,24s10.75,24,24,24,24-10.75,24-24S37.25,0,24,0Zm11.06,26.12H12.94v-4.24h22.12v4.24Z"/></svg>');}

.kv-words-list{ opacity: 0; height: 0; list-style: none; position: relative; box-sizing: border-box; overflow: hidden;}
.kv-words-list{ transition: opacity 0.5s ease;}
.kv-words-list li{position: absolute;}
.kv-words.active .kv-words-list{ opacity: 1;}
.kv-words a{text-decoration: none; display: inline-block; transition: opacity 0.5s ease}
.kv-words a:hover{opacity: 0.5}
.kv-words .fs-ss,.kv-words .fs-sm{ font-weight: 500}
.kv-words .fs-md,.kv-words .fs-lg{ font-weight: 700}
.kv-words .fs-ss{ line-height: 1.25}
.kv-words .fs-sm{line-height: 1.13;}
.kv-words .fs-md{line-height: 1.21}

.kv-txt{margin: 0 auto;}
#keyvisual .notice{ text-align: center}

.t-v{-ms-writing-mode: tb-rl; writing-mode: vertical-rl;}

.btnAreaDl{text-align: center;}

@media (min-width: 768px){
#keyvisual{ height: 768px; overflow: hidden}
#keyvisual > .container{height: 690px; padding: 156px 10px 0;}
.kv-ttl{position: absolute; left: 10px; top: 6px; z-index: 1}

.kv-lead-wrap{ position: absolute; top:295px; left: 227px; width: calc(930px + (100vw - var(--scrollbar) - 1150px)/2);}
.kv-lead{ font-size: 2.375rem; height: 160px;}
.kv-lead-txt{ padding-left: 422px;}
.kv-lead:before{ width: 366px; height: 160px;}

.kv-card{ margin:0 0 75px 132px;}
.kv-card,.kv-card figure{ width: 420px; height: 265px;}
.kv-txt{margin-bottom: 14px;}

.kv-words{width: 439px; border-radius: 20px; top: 158px; right: 30px;}
.kv-words-btn{padding: 0 22px; font-size: 1.0625rem; height: 40px;}
.kv-words-btn:after{width: 24px; height: 24px; right: 10px;}
.kv-words.active{height: 336px;}
.kv-words.active .kv-words-list{margin: 22px; height: 250px;}
.kv-words .fs-ss{ font-size: 0.9375rem}
.kv-words .fs-sm{ font-size: 1.25rem}
.kv-words .fs-md{ font-size: 1.4375rem}
.kv-words .fs-lg{ font-size: 2.625rem}

.notice{font-size: .75rem; line-height: 1.66}

.btnArea{height: 78px;}
.sp-only.btnArea{display: none;}
.btnArea > .container{display: flex; justify-content: center; align-items: center;}
.btnArea .btn{ margin: 0; width: 297px; box-shadow: 3px 3px 0 #910625;}
.btnArea .btn-md:hover{ box-shadow: 0 0 0 #910625;}

.txt-nebiki{ margin-right: 22px; line-height: 1}
.btnAreaDl{width: 297px; width: 100%;}
.btnArea .btnAreaDl + .btnAreaDl{margin-left: 16px}
.btnAreaDl dt{ font-size: 0.875rem; margin-bottom: 6px;}

.hasSideAside .btnAreaDl{ margin-top: 24px}
}
@media (max-width: 767px){
#keyvisual{height: min(182vw,1372px);}
#keyvisual > .container{padding-top: min(21vw,158px); width: 100%; padding-bottom: var(--fs-50); overflow: hidden;}

.kv-words{ top: var(--fs-38); left: 5.35%; width: 89.3%; border-radius: var(--fs-38); margin: 0 auto var(--fs-42)}
.kv-words-btn{ padding: 0 1em; height: min(10.4vw,78px); font-size: var(--fs-34);}
.kv-words-btn:after{ width: min(6.4vw,48px); height: min(6.4vw,48px); right: min(1.6vw,12px)}
.kv-words.active{height: min(67.46vw,506px);}
.kv-words.active .kv-words-list{margin: 1em; height: min(51.4vw,386px);}

.kv-ttl{ margin: 0 auto var(--fs-30); position: relative;}
.kv-ttl,.kv-ttl-img{width: min(97.3vw,730px);}
.kv-card{ margin-bottom: min(26.6vw,200px)}
.kv-card,.kv-card figure{width: min(77.3vw,580px);}

.kv-lead-wrap{ position: absolute; top: min(81vw,607px); right: 0; width: 88.8%;}
.kv-lead{ height: min(25.86vw,194px); font-size: var(--fs-44); align-items: flex-start; padding-top: var(--fs-70);}
.kv-lead:before{ background-image: url(../image/kv-card-shadow-sp.png); background-size: 100% 100%; width: min(71vw,538px); height: min(11.7vw,88px);}
.kv-lead-txt{ padding-left: min(13.3vw,100px);}

.kv-txt{ width: 78.1%;}
.notice{margin-top: min(1.86vw,14px); font-size: var(--fs-20); line-height: 1.5}

.btnArea{padding: min(1.3vw,10px) 0 var(--fs-16); width: 100%;}

.btnArea.fixed{position: fixed; bottom: 0; left: 0; z-index: 10; transform: translateY(32.8vw); animation: btnArea 0.8s ease forwards;}
.sp-only.btnArea{width: 89.3%; margin: min(10.6vw,80px) auto;}
.sp-only.btnArea .container{width: 95%;}
.btnAreaDl {margin-bottom: 1em}
.btnAreaDl dt{margin-bottom: 0.5em;}

/*
.btnArea:not(.fixed){ width: min(38vw,285px);}
*/
.txt-nebiki{ margin: 0 auto min(1.86vw,14px); text-align: center}
.btnArea .btn{box-shadow: 3px 3px 0 #930625}
.kv-words .fs-ss{ font-size: var(--fs-24);}
.kv-words .fs-sm{ font-size: var(--fs-32)}
.kv-words .fs-md{ font-size: var(--fs-36)}
.kv-words .fs-lg{ font-size: var(--fs-64)}
}

@keyframes btnArea{
  0% {transform: translateY(32.8vw)}
  100% { transform: translateY(0)}
}

/* ====================================
btn
===================================== */
.btn,.btn span{ position: relative;}
.btn{ margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; color: #fff; overflow: hidden; cursor: pointer;}
.btn span,.btn:before{z-index: 2}
.btn:before,.btn:after{content: ""; display: block; position: absolute; top: 0;}
.btn:before{background:url("../image/icn-arrow-r-w.svg") no-repeat 0 0; background-size: 100% auto; bottom: 0; margin: auto 0;}
.btn:after{ width: 0; height: 100%; background: rgba(0,0,0,.5); left: -5%; transform: skewX(30deg); transition: width 0.3s ease-out;}
.btn:hover:after{ width: 110%;}
.btn:hover{ box-shadow: 0 0 0 var(--shadow-color);}

.btn{ width: 100%;}

@media (min-width: 768px){
.btn{ box-shadow: 3px 3px 0 var(--shadow-color); transition: box-shadow 0.3s ease-out;}
.btn:before{ width: 10px; height: 12px; right: 12px;}

.btn-md{ height: 50px;}
.btn-lg{ height: 70px; max-width: 418px; font-size: 1.25rem;}
}
@media (max-width: 767px){
.btn{ font-size: var(--fs-34); box-shadow: 3px 3px 0 var(--shadow-color);}
.btn:before{ width: min(3.46vw,26px); height: min(4vw,30px); right: var(--fs-28);}

.btn-md{ height: min(13.6vw,102px);}
.btn-lg{ height: min(16.2vw,122px);}
.btn span{margin-right: auto; text-align: center; display: block; width: 92%;}
}

/* ====================================
headline
===================================== */
h2,h3{ font-weight: 700}
h2{ font-weight: 700; text-align: center;}
@media (min-width: 768px){
#main h2{ font-size: 2.5rem;}
}
@media (max-width: 767px){
#main h2{ font-size: var(--fs-42);}
}
/* ====================================
sec01
===================================== */
.sec01-nav{ margin: 0 auto;}
.sec01-nav a{ display: block; text-align: center; position: relative; padding-top: 1px; box-shadow: 3px 3px 0 #ccd5da;}
.sec01-nav a:after{ content: ""; display: block; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.61 18.71"><polygon fill="%23cd072b" points="21.61 0 18.03 0 10.81 12.51 3.58 0 0 0 10.81 18.71 21.61 0"/></svg>') no-repeat 0 0; background-size: 100% auto; position: absolute;}
.sec01-nav picture{ display: block}

.sec01-nav .sec01-nav-txt{ display: block; text-align: center;}

h2.type02 span{display:inline-block;position:relative;padding-inline:1em}
h2.type02 span:after,h2.type02 span:before{position:absolute;bottom:0}
h2.type02 span:before{content:"＼";left:0}
h2.type02 span:after{content:"／";right:0}

.bannerArea{text-align: center;}

@media (min-width: 768px){
 .bannerArea {padding-bottom: 70px;}
 #main #sec01 .bannerArea h2.type02 {margin-bottom: 20px;}
.sec01-nav{width: 743px; margin-top: 50px; display: flex; justify-content: space-between;}
.sec01-nav a{width: 220px; height: 220px; transition: box-shadow 0.3s ease-out,transform 0.3s ease;}
.sec01-nav a:hover{box-shadow: 0 0 0 var(--shadow-color); transform: scale(1.1);}
.sec01-nav a:after{width: 22px; height: 19px; left: 0; right: 0; margin: 0 auto; bottom: 18px; transition: bottom 0.3s ease-out;}
.sec01-nav a:hover:after{bottom: 8px;}

.sec01-nav .sec01-nav-txt{ font-size: 1.5rem; line-height: 1.41}

}
@media (max-width: 767px){
 .bannerArea {padding-bottom: min(14.6vw,110px);}
 #main #sec01 .bannerArea h2.type02{margin-bottom: min(3.2vw, 28px); font-size: var(--fs-54);}
#main #sec01 h2{ font-size: var(--fs-64); margin-bottom: min(7.4vw,56px)}
.sec01-nav a{ height: min(16.26vw, 122px);}
.sec01-nav a:after{width: min(4vw,30px); height: min(3.46vw,26px); bottom: 18px; transition: bottom 0.3s ease-out; top: 0; bottom: 0; right: min(3.46vw,26px); margin: auto 0;}
}

/* ====================================
icn
===================================== */
.icn{
  display: inline-block;
}
.icn-mask{
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
.icn-mask.icn-money{
  -webkit-mask-image:url("../image/icn-money.svg");
  mask-image: url("../image/icn-money.svg");
}
.icn-mask.icn-etc{
  -webkit-mask-image:url("../image/icn-etc.svg");
  mask-image: url("../image/icn-etc.svg");
}
.icn-mask.icn-family{
  -webkit-mask-image:url("../image/icn-family.svg");
  mask-image: url("../image/icn-family.svg");
}
.icn-mask.icn-car{
  -webkit-mask-image:url("../image/icn-car.svg");
  mask-image: url("../image/icn-car.svg");
}
.icn-mask.icn-book{
  -webkit-mask-image:url("../image/icn-book.svg");
  mask-image: url("../image/icn-book.svg");
}
.icn-mask.icn-security{
  -webkit-mask-image:url("../image/icn-security.svg");
  mask-image: url("../image/icn-security.svg");
}
.icn-mask.icn-app{
  -webkit-mask-image:url("../image/icn-app.svg");
  mask-image: url("../image/icn-app.svg");
}
.icn-mask.icn-pay{
  -webkit-mask-image:url("../image/icn-settlement.svg");
  mask-image: url("../image/icn-settlement.svg");
}
.icn-mask.icn-settlement{
  -webkit-mask-image:url("../image/icn-pay.svg");
  mask-image: url("../image/icn-pay.svg");
}
.icn-mask.icn-shopbag{
  -webkit-mask-image:url("../image/icn-shopbag.svg");
  mask-image: url("../image/icn-shopbag.svg");
}
.icn-mask.icn-shop{
  -webkit-mask-image:url("../image/icn-shop.svg");
  mask-image: url("../image/icn-shop.svg");
}
.icn-mask.icn-desk{
  -webkit-mask-image:url("../image/icn-desk.svg");
  mask-image: url("../image/icn-desk.svg");
}
.icn-mask.icn-cashback{
  -webkit-mask-image:url("../image/icn-cashback.svg");
  mask-image: url("../image/icn-cashback.svg");
}
.icn-drive-on{ background: url("../image/icn-drive-on.svg") no-repeat 0 0; background-size: 100% auto;}

.icn-mask.icn-house{
  -webkit-mask-image:url("../image/icn-house.svg");
  mask-image: url("../image/icn-house.svg");
}
.icn-mask.icn-sports{
  -webkit-mask-image:url("../image/icn-sports.svg");
  mask-image: url("../image/icn-sports.svg");
}
.icn-mask.icn-art{
  -webkit-mask-image:url("../image/icn-art.svg");
  mask-image: url("../image/icn-art.svg");
}
.icn-mask.icn-oversea{
  -webkit-mask-image:url("../image/icn-oversea.svg");
  mask-image: url("../image/icn-oversea.svg");
}
.icn-mask.icn-domestic{
  -webkit-mask-image:url("../image/icn-domestic.svg");
  mask-image: url("../image/icn-domestic.svg");
}
.icn-mask.icn-guard{
  -webkit-mask-image:url("../image/icn-guard.svg");
  mask-image: url("../image/icn-guard.svg");
}

@media (min-width: 768px){
.icn-etc{ width: 26px; height: 38px}
.icn-family{ width: 32px; height: 32px}
.icn-car{ width: 36px; height: 26px}
.icn-book{ width: 43px; height: 30px}
.icn-security{ width: 35px; height: 29px}
.icn-app{ width: 34px; height: 34px}
.icn-settlement{ width: 34px; height: 21px;}
.icn-pay{ width: 26px; height: 43px;}
.icn-shopbag{ width: 32px; height: 37px;}
.icn-shop{ width: 35px; height: 30px;}
.icn-desk{ width: 43px; height: 34px;}
.icn-cashback{ width: 40px; height: 24px;}
.icn-drive-on{width: 72px; height: 72px;}
.icn-house{width: 33px; height: 27px;}
.icn-sports{width: 20px; height: 42px;}
.icn-art{width: 40px; height: 30px}
.icn-oversea{width: 34px; height: 34px;}
.icn-domestic{width: 48px; height: 15px;}
.icn-guard{width: 39px; height: 25px}
}

/* ====================================
hasSideWrap
===================================== */
@media (min-width: 768px){
.hasSideWrap .container{ display: flex; align-items: flex-start; justify-content: space-between; position: relative; max-width: 1014px; padding-bottom: 46px;}
.hasSideAside{ position: sticky; top: 0; text-align: center; width: 240px;}
.hasSideAside .side-txt,.hasSideAside .btn{margin-top: 16px}
.hasSideAside,.hasSideMain{ padding-top: 50px;}
.hasSideMain{ width: 740px;}
}
@media (max-width: 767px){
.hasSideAside{display: none}
}

/* ====================================
貯まる・使える
===================================== */
.tamaru-01-dl dt{color: var(--main-color); background: #f0d2d7; text-align: center; padding: 1em; font-weight: 700}

.tamaru .tab-nav a{font-weight: 700;}
.tamaru .tab-nav li:first-child a{ color: var(--red);}
.tamaru .tab-nav li:last-child a{ color: #213370;}

.tamaru .link p{ font-weight: 500; margin: 1em 0;}

.tamaru dl dt,.tamaru dl dd{box-sizing: border-box;}

.tamaru-02-dl dt{ background:var(--second-color); color: #fff; font-weight: 700}
.tamaru-02-dl dd{ font-weight: 500}
 .link-detail{text-align: right; margin-top: 1em}
 
@media (min-width: 768px){
  .tamaru .icn-service{ width: 83px; height: 83px;}

 .tamaru .tab-nav a{ font-size: 2rem}
 .tamaru dl,.tamaru .link-detail{ max-width: 640px; margin: 0 auto;}
 .tamaru dl{ display: flex; justify-content: space-between;}
 .tamaru dl dt{display: flex; align-items: center; justify-content: center;}
 
 .tamaru dl.tamaru-01-dl{ margin-bottom:26px;}
 .tamaru-01-dl dt{ width: 43%; flex-direction: column;}
 .tamaru-01-dl dd{width: 49.3%}
 .tamaru-01-dl .txt-point{ width: 110px; height: 44px; margin-top: 8px;}
 
 .tamaru .link{padding: 32px 0 0; text-align: center; border-top: 1px solid #e8ebed;}
 .tamaru .link figure{margin: 0 auto 24px;}
 .tamaru .link p{ line-height: 2;}
 
 .tamaru .tab-content{padding: 60px 0}
 .tamaru-02-dl{ border: 1px solid var(--second-color);}
 .tamaru dl.tamaru-02-dl + .tamaru-02-dl{margin-top: 30px;}
 .tamaru-02-dl dt{ width: 32.5%; font-size: 1.125rem;}
 .tamaru-02-dl dd{ padding: 1em 0.5em 1em 1em; width: 67.5%;}
 .tamaru-02-dl dd p{line-height: 2;}
 
 .logo-pointjyutou{width: 18.7%;}
 .logo-pointjyutou + p{width: 79.5%; font-feature-settings: "palt";}
}
@media (max-width: 767px){
  .tamaru .icn-service{ width: min(13vw,98px); height: min(13vw,98px)}
 .tamaru .tab-nav a{ font-size: var(--fs-50)}
 .tamaru .tab-content{ padding: min(6.4vw,48px) 8.64%;}
 .tamaru .tab-lead{ text-align: left; margin-bottom: var(--fs-34); line-height: 1.78; font-feature-settings: "palt";}
 
 .tamaru-01-dl dt{padding: min(3.2vw,24px); margin-bottom: var(--fs-32)}
 .txt-point{width: 45.4%; margin: 10px auto 0;}
 .tamaru dl dd.notice{margin-top: var(--fs-30)}
 
 .tamaru .link{margin-top: var(--fs-46)} 
 .tamaru .link p,.tamaru-02-dl dd{font-size: var(--fs-28); line-height: 1.78}
 
 .tamaru-02-dl dt{ font-size: var(--fs-40); margin-bottom: var(--fs-28); padding: 0.4em 0.5em}
 .tamaru-02-dl +.tamaru-02-dl{ margin-top: var(--fs-42)}
 
 .special .tamaru-02-dl dt{ font-size: var(--fs-34); padding-left: 0; text-align: center;}
 .special .tamaru-02-dl dd{font-feature-settings: "palt";}
 
 .logo-pointjyutou{width: 47.9%; margin: 0 auto; text-align: center;}
 }

/* ====================================
tokuten
===================================== */
#tokuten{position: relative;}
#tokuten > .container{z-index: 2;}
#tokuten + section{position: relative; z-index: 2}

#tokuten_content .section{padding: 0;}
#tokuten_content .section-inner{background: #fff;}
.lead{font-weight: 500; text-align: center;}
#tokuten_content .inner{margin: 0 auto;}
#tokuten_content h3.hasIcon .icn-money{border-radius: 50%;}

@media (min-width: 768px){
#tokuten .bg-triangle{display: block; position: absolute; top: 0; left: 0; z-index: 1; aspect-ratio:1/1; width: 70.9%; z-index: 1;}
#tokuten .bg-triangle.fixed{position: fixed;}

#tokuten_content .section{ border-radius: 40px 40px 0 0;}
#tokuten_content .section:not(:first-child){margin-top: 50px}
#tokuten_content .section-inner{padding-top: 24px;}

.lead{ font-size: 1.25rem; line-height: 1.8;}
#tokuten_content .inner{ margin: 0; padding: 44px 80px 44px 114px;}
#tokuten_content h3.hasIcon{margin-bottom: 40px;}
#tokuten_content h3.hasIcon .txt{ font-size: 1.5rem; line-height: 1.4}
#tokuten_content h3.hasIcon .icn{margin-right: 14px;}
#tokuten_content h3.hasIcon span,#tokuten_content h3.hasIcon svg{display: inline-block; vertical-align: middle}
#tokuten_content .inner > picture{margin: 0 auto;}
#tokuten_content .inner > picture:not(:last-child){margin-bottom: 30px;}
}
@media (max-width: 767px){
.section{overflow: hidden;}
#tokuten .bg-triangle{display: none}
#tokuten_content{ padding-top: 1px; padding-bottom: min(15.2vw,114px)}
#tokuten_content .section{ border-radius: 10px; margin-top: min(14.66vw,110px); padding-bottom: var(--fs-60)}
#tokuten_content .section-inner{ padding-bottom: var(--fs-60); margin-bottom: calc(var(--fs-60) * -1);}
.lead{ margin-bottom: min(8vw,60px); padding-top: var(--fs-42); font-size: var(--fs-30); line-height: 1.93;}

}

/* ====================================
tab
===================================== */
.tab-nav a,.tab-content{ position: relative}
.tab-nav{ display: flex;}
.tab-nav li{line-height: 1;}
.tab-nav a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 1; box-sizing: border-box;}
.tab-nav a.active{z-index: 3}
.tab-nav a figure{display: inline-block;}

.tab-content{display: none; z-index: 2; box-sizing: border-box;}
.tab-content.active{display: block}

.tab-lead{ font-weight: 500; text-align: center}

@media (min-width: 768px){
.tab{margin-top: 30px;}
.tab-nav{  justify-content: center;}
.tab-content{padding: 50px 0 0; margin-top: -2px;}
.tab-lead{ line-height: 2; margin-bottom: 26px;}
}
@media (max-width: 767px){
.tab,.tab + .btn{ width: 88%;}
.tab{ margin: 0 auto;}
.tab-nav{ justify-content: space-between;}
.tab-nav a.active:before{content: ""; display: block; background-color: #fff; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; z-index: 4;}
.tab + .btn{margin-top: var(--fs-38)}
.tab-content{border-radius: 0 0 10px 10px; margin-top: -2px; width: 100%;}
}

/* ====================================
sec-nebiki
===================================== */
.special .sec-nebiki .inner{background: #fff;}
.special #tokuten_content .sec-nebiki h3{background: #0d0d0d; color: #fff;}
.sec-nebiki .icn-money{ background-color: var(--red)}

@media (min-width: 768px){
.sec-nebiki .icn-money{width: 72px; height: 72px;}
.sec-nebiki .icn-service{ width: 86px; height: 86px;}
.special #tokuten_content .sec-nebiki .inner{ margin-top: 38px; padding: 0;}
.special #tokuten_content .sec-nebiki .inner +  .inner{ margin-top: 16px;}
.special #tokuten_content h3.hasIcon{margin-bottom: 0}
.special #tokuten_content .sec-nebiki .inner h3{ padding: 10px 0 10px 142px;}
.special #tokuten_content .sec-nebiki .acd-content{ padding: 35px 0 40px; width: 446px; margin: 0 auto;}
.sec-nebiki picture + picture,.sec-nebiki .notice{margin-top: 30px;}
}
@media (max-width: 767px){
.sec-nebiki h3.hasIcon .icn{ width: min(12vw,90px); height: min(12vw,90px);}
}

/* ====================================
sec-premium
===================================== */
.premium-box{ background: #0d0d0d; box-shadow: 3px 3px 0 #4d5966;}
.premium-box h3{color: #fff; text-align: center; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: 400;}
.premium-box .acd-content{ color: #c1c6cd}
.premium-box h4{text-align: center; font-weight: 400;}

@media (min-width: 768px){
.sec-premium .icn-service{ width: 66px; height: 86px;}

.premium-box{ padding: 0 0 50px;}
.premium-box + .premium-box{margin-top: 18px;}
.premium-box .acd-content{ justify-content: center; width: 518px; margin: 0 auto;}
.premium-box h3{ font-size: 1.25rem; padding-top: 48px; margin-bottom: 34px;}
.premium-box h4{margin-bottom: 20px;}
.premium-box .d-flex-lg + h4{margin-top: 48px;}
.premium-box p{text-align: center; line-height: 2;}
.premium-img{width: 240px;}
.premium-txt{width: 254px; margin-left: 20px; font-feature-settings: "palt";}
.premium-txt p{text-align: left;}
}
@media (max-width: 767px){
.sec-premium h2{margin-bottom: min(12vw,90px)}
.sec-premium .icn-service{ width: min(11.2vw,84px); height: min(14.5vw,109px);}
.premium-box{width: 88.3%; margin-left: auto; margin-right: auto;}
.premium-box + .premium-box{margin-top: var(--fs-38);}
.premium-box.acd-sp .acd-trigger{ font-size: var(--fs-32); height: min(21.3vw,160px); justify-content: center; position: relative;}
.premium-box.acd-sp .acd-trigger:before{content: ""; display: block; width: min(21.3vw, 160px); height: min(21.3vw, 160px); position: absolute; top: 0; left: 0; background-position: 50% 50%; background-repeat: no-repeat;}
.premium-box.acd-sp .acd-trigger span{width: 100%}

.premium-box-lounge .acd-trigger:before{ background-image: url("../image/premium-bg-lounge-sp.png"); background-size: 100% auto}
.premium-box-car .acd-trigger:before{ background-image: url("../image/premium-bg-car-sp.png"); background-size: 100% auto}
.premium-box-amex .acd-trigger:before{ background-image: url("../image/premium-bg-amex-sp.png"); background-size: 100% auto}

.premium-box.acd-sp .acd-content{padding: 0 var(--fs-40) var(--fs-68);}
.premium-box h4{margin-bottom: 1em;}
.premium-box .d-flex-lg + h4{margin-top: min(6.9vw,52px);}
.premium-box p{ font-size: var(--fs-28); line-height: 1.57;}
.premium-txt p{ margin-bottom: var(--fs-40)}
.premium-img{width: 71.1%; margin: 0 auto}
}

/* ====================================
merit
===================================== */
@media (min-width: 768px){
 .sec-merit {padding: 46px 0 50px;}
 .sec-merit h2{margin-bottom: 40px;}
 .sec-merit .sec05-ttl{width: 246px; height: 66px; margin-top: 16px;}
}
@media (max-width: 767px){
 .sec-merit .sec05-ttl{ width: 37.2%;}
}

/* ====================================
info
===================================== */
.special #info h2{ font-weight: 500;}

#info_content section,#info_content .acd{background: #fff}
#info_content .acd-content{display: none}
.acd .acd-trigger{ cursor: pointer; display: flex; align-items: center; justify-content: flex-start;}
.acd .acd-trigger:after{display: inline-block; content: ""; margin-left: auto;}
#info_content .acd-content h4{font-weight: 700; line-height: 1.58;}

#info .icn-wrap{ display: flex; align-items: center; justify-content: center; border-radius: 50%;}
@media (min-width: 768px){
 #info_side{padding-top: 100px;}
 #info_content section{ margin-bottom: 60px; padding: 50px 0 1px}
 #info_content section > .btn:last-child{margin: 30px auto 50px;}
 #info_content h2{margin-bottom: 16px;}
 
 .special #info_content h2{ font-size: 1.875rem}
 .special #info_content .acd + h2{margin-top: 50px;}
 
 #info_content h2 + .acd{ border-top: 1px solid #213370}
#info_content .acd{ border-bottom: 1px solid #213370}
#info_content .acd:last-child{margin-bottom: -1px;}

 .special #sec06 .acd{ border-bottom: 1px solid #464646}
 .special #sec06 .acd + .acd{border-top: none}
 
 #info_content .acd-trigger{ padding: 20px 60px 20px 44px; font-size: 1.25rem;}
 #info_content .acd-content{ padding: 0 0 40px 152px}
 #info_content .acd-content > p{width: 440px;}
 #info_content .acd-content h4{margin-bottom: 1em;}
 #info_content .acd-content .acd-img{width: 200px}
 #info_content .acd-content .acd-txt{ width: 320px}
 #info_content .acd-content p{line-height: 2}
 #info .icn-wrap{width: 68px; height: 68px; margin-right: 34px;}
 #info .icn{width: 36px; height: 36px;}
 #info .acd-img{text-align: center;}

.apollostation #info_content .acd-content .acd-img.sec06-img-01,
.gold #info_content .acd-content .acd-img.sec06-img-01{width: 260px;}
.apollostation #info_content .acd-content .acd-img.sec06-img-01 + .acd-txt,
.gold #info_content .acd-content .acd-img.sec06-img-01 + .acd-txt{width: 300px;}
.apollostation .acd-img.sec06-img-01{margin-right: 20px;}

 .acd .acd-trigger:after{ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.2 14.9"><polygon fill="%23213370" points="17.2 14.9 14.35 14.9 8.6 4.94 2.85 14.9 0 14.9 8.6 0 17.2 14.9"/></svg>') no-repeat 0 0; background-size: 100% auto; width: 18px; height: 15px; transform: rotate(180deg); transition: transform 0.3s ease;} 
.acd .acd-trigger.active:after{transform: rotate(0)}
}
@media (max-width: 767px){
 #info_content section{padding: min(13.3vw,100px) 0 min(14.6vw,110px)}
 #info_content section > .btn:last-child{margin: var(--fs-60) auto 0;}
 
 #info_content h2{ margin-bottom: 1.19em;}
 .special #info_content .acd + h2{margin-top: min(9.3vw,70px);}
 
 #info_content .acd,.acd-sp{border: 2px solid #213370; box-shadow: 3px 3px 0 var(--shadow-color);}
 #info_content .acd + .acd{ margin-top: var(--fs-38);}
 #info_content .acd-trigger,.acd-sp .acd-trigger{ padding: 0.47em 0.38em 0.47em 0.76em; font-size: var(--fs-42);}

 #info .icn-wrap{width: min(15.2vw,114px); height: min(15.2vw,114px); margin-right: var(--fs-44);}
 #info .icn{width: 36px; height: 36px;}
 #info_content .acd-trigger .txt{ width: min(49.3vw,370px); line-height: 1.28}
 #info_content .acd-trigger .txt.narrow{font-feature-settings: "palt";}
 #info_content .acd-trigger .txt .small{ display: block; margin-top: min(2.4vw,18px); font-size: min(2.6vw,20px)}

#tokuten_content .inner.acd-sp{ width: 88%; margin: var(--fs-38) auto 0;}
.acd-sp .acd-trigger{ cursor: pointer; display: flex; align-items: center; justify-content: flex-start;}
.acd-sp .acd-trigger:after{display: inline-block; content: ""; margin-left: auto;}
 
 .acd .acd-trigger:after,
 .acd-sp .acd-trigger:after{ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23213370" d="m24,0C10.75,0,0,10.75,0,24s10.75,24,24,24,24-10.75,24-24S37.25,0,24,0Zm11.06,26.12h-8.94v8.94h-4.23v-8.94h-8.94v-4.24h8.94v-8.94h4.23v8.94h8.94v4.24Z"/></svg>') no-repeat 0 0; background-size: 100% auto; width: min(6.4vw,48px); height: min(6.4vw,48px);}
 .acd .acd-trigger.active:after,
 .acd-sp .acd-trigger.active:after{ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23213370" d="m24,0C10.75,0,0,10.75,0,24s10.75,24,24,24,24-10.75,24-24S37.25,0,24,0Zm11.06,26.12H12.94v-4.24h22.12v4.24Z"/></svg>');}
 
 .acd-sp .acd-trigger .icn{margin-right: 0.5em;}
 .acd-sp .acd-trigger .txt{ font-size: var(--fs-36); font-feature-settings: "palt"; line-height: 1.35}
 
 #info_content .acd-content{padding: var(--fs-20) var(--fs-44) var(--fs-42);}
 #info_content .acd-content h4{font-size: var(--fs-34); margin-bottom: 0.58em;}
 #info_content .acd-content p{font-size: var(--fs-28); line-height: 1.57}
 
 #info .acd-img{margin: 0 auto var(--fs-46);}
.apollostation .acd-img.sec06-img-01 img,
.gold  .acd-img.sec06-img-01 img{width: 100%;}
}

/* ====================================
accordion
===================================== */
.txt-link{text-decoration: underline; color: #000}
.btnArea .txt-link{ color: #fff;}
.btnAreaDl .txt-link{ display: block; margin-top: 0.5em; font-size: 80%;}
.txt-link:hover{text-decoration: none}

@media (max-width: 767px){
.acd-sp .acd-trigger{cursor: pointer;}
.acd-sp .acd-content{ display: none}
.btnAreaDl .txt-link{ font-size: 70%;}
}

/* ====================================
flow
===================================== */
.special #flow h2{font-weight: 500}
.flow-box{box-sizing: border-box;}
#flow h3{ text-align: center;}
.flow-num{display: block; margin: 0 auto;}
.flow-img{width: 100%; display: flex; justify-content: center; align-items: center;}
.flow-img-01 .cls-2,.flow-img-03 .cls-2 {fill-rule: evenodd;}
.flow-box p a{color: var(--main-color);}

.slick-arrow.slick-disabled{display: none!important;}

@media (min-width: 768px){
 #flow{padding: 52px 0 48px;}
 #flow h2{margin-bottom: 40px;}
 #flow h3{ font-size: 1.125rem; margin-bottom: 28px;}
 .flow-wrap{ display: flex; justify-content: space-between; align-items: stretch;}
 .flow-box{background: #fff; border-radius: 12px; padding: 30px 18px 14px; width: 24.2%;}
 .flow-box p{ font-size: 0.75rem; line-height: 1.66}
 
 .flow-num{margin-bottom: 12px; height: 25px;}
 .flow-num-01{width: 7px;}
 .flow-num-02{width: 15px;}
 .flow-num-03{width: 16px;}
 .flow-num-04{width: 17px;}
 
 .flow-img{height: 146px; margin-bottom: 22px;}
 .flow-img-01 svg{width: 156px;}
 .flow-img-02 svg{width: 87px;}
 .flow-img-03 svg{width: 213px;}
 .flow-img-04 svg{width: 135px;}
}
@media (max-width: 767px){
 #flow{padding: min(13.3vw,100px) 0 min(20vw,150px)}
 #flow .container{width: 100%;}
 #flow h2{margin-bottom: min(6.9vw,52px);}
 #flow h3{ font-size: var(--fs-34); margin-bottom: var(--fs-42);}
 
 .flow-box{ padding: min(8.8vw,66px) min(10.6vw,80px) var(--fs-44); height: 100%;}
 
.slick-track,.slick-initialized .slick-slide{display: flex;}
.slick-track{ align-items: stretch;}
.slick-slide{float: none; background: #fff; border-radius: 10px; height: inherit;}

 .flow-num{margin-bottom: var(--fs-24); height: var(--fs-40);}
 .flow-num-01{width: min(1.6vw,12px);}
 .flow-num-02{width: var(--fs-24);}
 .flow-num-03{width: min(3.3vw,25px);}
 .flow-num-04{width: var(--fs-28);}
 
 .flow-img{height: min(33.6vw,252px); margin-bottom: min(10.4vw,78px)}
 .flow-img-01 svg{width: 57.9%;}
 .flow-img-02 svg{width: 32.3%;}
 .flow-img-03 svg{width: 83.2%;}
 .flow-img-04 svg{width: 48.8%;}

.flow-box p{ font-size: var(--fs-28); line-height: 1.78}
 
 .slick-next{right: 1%}
 .slick-prev{left: 1%}
 .slick-prev,.slick-prev:hover{ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.16 66"><polygon fill="%23b1bfc8" points="57.16 0 57.16 10.93 18.94 33 57.16 55.07 57.16 66 0 33 57.16 0"/></svg>');}
 .slick-next,.slick-next:hover{ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.16 66"><polygon fill="%23b1bfc8" points="0 0 0 10.93 38.22 33 0 55.07 0 66 57.16 33 0 0"/></svg>');}
 .slick-arrow{ background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto; width: min(7.7vw,58px); height: min(8.8vw,66px); z-index: 3}
 .slick-arrow:before{content: "";}
 .slick-list{z-index: 2}
 .slick-slide{margin:0 5.35vw}
 
 .slick-dots{line-height: 0}
 .slick-dots li{ margin: 0 min(1.6vw,12px); width: var(--fs-20); height: var(--fs-20);}
 .slick-dots li button,.slick-dots li button:before{width: 100%; height: 100%;}
 .slick-dots li button{padding: 0; border-radius: 50%; background-color: #fff; display: block;}
 .slick-dots li button:before{ content: "";}
}


/* ====================================
bnr-list
===================================== */
.bnr-list{justify-items: center; width: 100%;}
@media (min-width: 768px){
 #banner{ padding: 50px 0}
 #banner .container{width: 870px;}
 .bnr-list {
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-column-gap: 50px;
 grid-row-gap: 50px;
 }
.bnr-list.bnr-single{grid-template-columns: repeat(1, 1fr);}
.bnr-list.bnr-single li{max-width: 410px;}
 #banner .notice{margin-top: 50px;}
}
@media (max-width: 767px){
#banner{ padding: min(10.6vw,80px) 0 0}
.bnr-list li + li{margin-top: var(--fs-36)}

}

/* アニメーション
======================================== */
@media screen {
    .js-scroll {
        opacity: 0;
        transition: all 1s;
    }
    .js-scroll-in {
        opacity: 1;
    }
    .js-scroll-y {
        opacity: 0;
        transition: all 1s;
        transform: translate(0px, 60px) scale(1);
    }
    .js-scroll-y-in {
        opacity: 1;
        transform: translate(0px, 0px) scale(1);
    }
    .js-scroll-l {
        opacity: 0;
        transition: all 1s;
        transform: translate(-60px, 0) scale(1);
    }
    .js-scroll-l-in {
        opacity: 1;
        transform: translate(0px, 0px) scale(1);
    }
    .js-scroll-r {
        opacity: 0;
        transition: all 1s;
        transform: translate(60px, 0) scale(1);
    }
    .js-scroll-r-in {
        opacity: 1;
        transform: translate(0px, 0px) scale(1);
    }
    .js-line .ttl-line:after{
        transition: all 1s;
        width: 0;
    }
    .js-line-in .ttl-line:after{
        width: 100%;
    }
}