@charset "utf-8";
/* =========================================================
   teppay キャンペーン詳細ページ 専用スタイル
   （style.css を読み込んだ上で追加で読み込む）
   ========================================================= */

/* ---- FV（黄色ヒーロー） ---- */
.cp-fv{
	position:relative;
	padding:60px 40px 64px;
	background-color:#fffcaf;
	background-image:radial-gradient(#fdf3a0 20%, transparent 22%);
	background-size:22px 22px;
	background-position:0 0;
	overflow:hidden;
}
.cp-fv-inner{position:relative;max-width:1240px;margin:0 auto;}
.cp-fv .campaigncon{position:relative;z-index:2;}
.cp-fv-char{position:absolute;bottom:0;z-index:1;width:134px;height:auto;}
.cp-fv-char--l{left:1.5%;bottom:8px;}
.cp-fv-char--r{right:1.5%;bottom:8px;width:132px;}

/* FV内コンテンツをカンプ比率に拡大（PCのみ。1080px以下は従来サイズ） */
@media screen and (min-width:1081px){
	.cp-fv .campaign-lead img{width:560px;max-width:88%;}
	.cp-fv .campaign-ribbon{max-width:1010px;margin:8px auto 0;}
	.cp-fv .campaign-desc{margin-top:-96px;font-size:32px;}
	.cp-fv .campaign-desc .small{font-size:24px;}
	.cp-fv .campaign-gauge{gap:34px;margin-top:-6px;}
	.cp-fv .gauge-label{font-size:27px;padding:9px 36px;}
	.cp-fv .gauge-before .gauge-num{font-size:118px;}
	.cp-fv .gauge-arrow{border-width:19px 0 19px 30px;}
	.cp-fv .gauge-after .gauge-num.zero{font-size:232px;}
	.cp-fv .gauge-num.zero:before{bottom:28px;height:22px;}
	.cp-fv .campaign-note{margin-top:14px;font-size:20px;}
	.cp-fv .campaign-note2{font-size:15px;}
}
/* FV内ゲージにキラキラ（4点星） */
.cp-fv .gauge-after{position:relative;}
.cp-fv .gauge-after .spark{position:absolute;display:block;background:#ffd02e;
	clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);}
.cp-fv .gauge-after .spark1{top:-14px;right:-30px;width:34px;height:34px;}
.cp-fv .gauge-after .spark2{top:34px;right:-52px;width:22px;height:22px;}
.cp-fv .gauge-after .spark3{top:74px;right:-26px;width:15px;height:15px;}

/* ---- FVの下〜詳細カード周り（淡いミント背景） ---- */
.cp-main{background:#e7f5f2;padding:54px 20px 90px;}
.cp-introcta{text-align:center;}
.cp-mainbtn{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:410px;max-width:92%;
	padding:23px 44px;
	background:#1cb5ae;color:#fff;
	font-size:25px;font-weight:bold;letter-spacing:1px;
	border-radius:9px;
	box-shadow:inset 0 -5px 0 #008384;
	text-decoration:none;
	transition:opacity .3s;
}
.cp-mainbtn::after{content:"";margin-left:18px;width:13px;height:13px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg);}
.cp-mainbtn:hover{opacity:.85;}

/* ---- キャンペーン詳細カード ---- */
.cp-detail{
	max-width:1180px;margin:50px auto 0;
	background:#fff;border-radius:24px;
	padding:58px 80px 70px;
}
.cp-detail-ttl{text-align:center;font-size:34px;font-weight:900;color:#2f3b4a;letter-spacing:3px;margin-bottom:14px;}
.cp-row{margin-top:34px;}
.cp-row-head{
	background:#eceef0;border-radius:6px;
	text-align:center;padding:15px 10px;
	font-size:23px;font-weight:bold;color:#1ab4ae;letter-spacing:2px;
}
.cp-row-body{padding:22px 6px 0;font-size:17px;line-height:1.95;color:#2f3b4a;}
.cp-row-body p{margin:0;}
.cp-row-body p + p{margin-top:.2em;}

/* 番号付きリスト（対象 1〜4） */
.cp-list{margin:0;padding:0;list-style:none;}
.cp-list li{padding-left:1.6em;text-indent:-1.6em;}

/* ※注釈ブロック */
.cp-notes{margin-top:8px;}
.cp-notes .hr{border:0;border-top:1px solid #d9dee1;margin:30px 0 26px;}
.cp-notes p{padding-left:1.45em;text-indent:-1.45em;}
.cp-notes p.indent{padding-left:1.45em;text-indent:0;}      /* ※の続き（マークなし） */
.cp-notes p.bullet{padding-left:2.6em;text-indent:-1.15em;}  /* ・サブ項目 */

/* 図版（手数料無料適用期間） */
.cp-figure{margin:34px 0 6px;}
.cp-figure img{display:block;width:100%;max-width:760px;margin:0 auto;height:auto;}

/* ---- フッター直前の商標バンド（CTAバンド内・teal） ---- */
.cp-trademark{margin-top:48px;color:#fff;font-size:15px;line-height:1.95;text-align:left;}
.cp-trademark p{margin:0;padding-left:1em;text-indent:-1em;}

/* ---- CPフッター：リンクを2カラム（カンプ準拠） ---- */
.cp-footer .footercon>dl>dd{width:auto;}
.cp-footer .footercon>dl>dd>ul{display:block;column-count:2;column-gap:90px;width:auto;}
.cp-footer .footercon>dl>dd>ul>li{margin:0 0 16px;line-height:1.4;white-space:nowrap;break-inside:avoid;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (min-width:781px) and (max-width:1080px){
	.cp-fv-inner{max-width:900px;}
	.cp-fv .campaign-lead img{width:430px;max-width:80%;}
	.cp-fv .campaign-ribbon{max-width:780px;margin:6px auto 0;}
	.cp-fv .campaign-desc{margin-top:-66px;font-size:25px;}
	.cp-fv .campaign-desc .small{font-size:19px;}
	.cp-fv .campaign-gauge{gap:24px;margin-top:-4px;}
	.cp-fv .gauge-label{font-size:21px;padding:6px 26px;}
	.cp-fv .gauge-before .gauge-num{font-size:88px;}
	.cp-fv .gauge-arrow{border-width:14px 0 14px 22px;}
	.cp-fv .gauge-after .gauge-num.zero{font-size:165px;}
	.cp-fv .gauge-num.zero:before{bottom:20px;height:16px;}
	.cp-fv .campaign-note{margin-top:12px;font-size:16px;}
	.cp-fv .campaign-note2{font-size:13px;}
	.cp-fv-char{width:110px;}
	.cp-fv-char--l{left:1%;bottom:14px;}
	.cp-fv-char--r{width:126px;right:1%;bottom:22px;}
	.cp-fv .gauge-after .spark1{top:-10px;right:-22px;width:24px;height:24px;}
	.cp-fv .gauge-after .spark2{top:24px;right:-38px;width:16px;height:16px;}
	.cp-fv .gauge-after .spark3{top:52px;right:-20px;width:11px;height:11px;}
	.cp-mainbtn{font-size:24px;min-width:360px;padding:20px 38px;}
	.cp-detail{padding:48px 44px 56px;}
	.cp-detail-ttl{font-size:30px;}
	.cp-row-head{font-size:21px;}
}
@media screen and (max-width:780px){
	.cp-fv{padding:26px 12px 32px;background-size:18px 18px;}
	.cp-fv .campaign-lead img{max-width:60%;}
	.cp-fv-char{width:17vw;}
	.cp-fv-char--l{left:-1vw;bottom:auto;top:18px;}
	.cp-fv-char--r{right:-1vw;bottom:auto;top:34px;width:16.5vw;}
	.cp-fv .campaign-ribbon{max-width:94%;margin-left:auto;margin-right:auto;}
	.cp-fv .campaign-desc{margin-top:8px;}
	.cp-fv .gauge-after .spark1{top:-3vw;right:-6vw;width:7vw;height:7vw;}
	.cp-fv .gauge-after .spark2{top:6vw;right:-10vw;width:4.6vw;height:4.6vw;}
	.cp-fv .gauge-after .spark3{top:14vw;right:-5vw;width:3vw;height:3vw;}

	.cp-main{padding:34px 14px 56px;}
	.cp-mainbtn{min-width:0;width:100%;font-size:5.6vw;padding:4.6vw 4vw;border-radius:9px;}
	.cp-detail{margin-top:30px;border-radius:16px;padding:34px 18px 40px;}
	.cp-detail-ttl{font-size:7vw;letter-spacing:2px;margin-bottom:6px;}
	.cp-row{margin-top:24px;}
	.cp-row-head{font-size:5vw;padding:13px 8px;}
	.cp-row-body{font-size:3.9vw;line-height:1.85;padding:16px 2px 0;}
	.cp-list li{padding-left:1.5em;text-indent:-1.5em;}
	.cp-figure{margin:22px 0 4px;}
	.cp-figure img{width:100%;}
	.cp-footer .footercon>dl>dd>ul{column-gap:30px;}
	.cp-footer .footercon>.p01{margin-top:34px;}
	.cp-trademark{font-size:3.4vw;}
}


/* === CTAバンドをTOPデザインに統一（白×黄枠ボックス） === */
/*.indexfive{padding:80px 40px;}
.indexfivecon{padding-top:0;}
.indexfivecon .cp-ctabox{margin:0 auto;padding:14px 28px;font-size:26px;color:#2f3b4a;font-weight:bold;text-align:center;background:#fff;border:3px solid #fff000;border-radius:10px;display:inline-block;line-height:1.55;}
.indexfivecon .cp-ctabox>span{display:block;color:#00a99d;font-size:24px;font-weight:bold;white-space:nowrap;}
.indexfivecon .cp-ctabox>span>em{font-size:13px;font-weight:bold;font-style:normal;color:#00a99d;}
@media screen and (max-width:780px){
	.indexfive{padding:44px 20px 56px;}
	.indexfivecon .cp-ctabox{font-size:4.8vw;padding:12px 16px;white-space:nowrap;}
	.indexfivecon .cp-ctabox>span{font-size:4.2vw;}
	.indexfivecon .cp-ctabox>span>em{font-size:3.6vw;}
}*/

.indexfive{position:relative;padding:80px 40px;background:#1cb5ae url(../img/bg01.png)repeat-x top;}
.indexfive:after{position:absolute;bottom:0;left:0;content:"";width:100%;height:20px;background: url(../img/bg01.png)repeat-x bottom;}
.indexfivecon{padding-top:40px;text-align:center;line-height:1;/*background:url(../img/bg02.jpg)no-repeat center center;background-size:cover;*/}
.indexfivecon>h3{font-size:44px;color:#fff;letter-spacing:2px;}
.indexfivecon>h3>span{font-size:50px;}
.indexfivecon>h2{margin-top:20px;font-size:46px;color:#ffff00;line-height:1.2;font-family:"Outfit", sans-serif;}
.indexfivecon>h2>span{position:relative;z-index:1;}
.indexfivecon>h2>span:before{display:none;position:absolute;bottom:7px;left:0;z-index:1;content:"";width:100%;height:10px;background:#008384;}
.indexfivecon>h2>span>em{position:relative;z-index:2;}
.indexfivecon>div{margin-top:80px;text-align:left;color:#fff;}
.indexfivecon>div>p{display:flex;justify-content:space-between;font-size:16px;line-height:1.6;}
.indexfivecon>div>p>span{width:18px;}
.indexfivecon>div>p>em{width:calc(100% - 18px);}
@media screen and (max-width:1520px){
	.indexfive{padding:60px 20px;}
	.indexfive:after{height:18px;}
	.indexfivecon{padding-top:30px;}
	.indexfivecon>h3{font-size:30px;letter-spacing:3px;}
	.indexfivecon>h3>span{font-size:40px;}
	.indexfivecon>h2{margin-top:40px;font-size:34px;}
	.indexfivecon>h2>span>em{letter-spacing:1px;}
	.indexfivecon>div{margin-top:40px;}
	.indexfivecon>div>p{font-size:14px;}
	.indexfivecon>div>p>span{width:16px;}
	.indexfivecon>div>p>em{width:calc(100% - 16px);}
}
@media screen and (max-width:1080px){
	.indexfive{padding:50px 20px;}
	.indexfive:after{height:16px;}
	.indexfivecon{padding-top:25px;}
	.indexfivecon>h3{font-size:26px;letter-spacing:2px;}
	.indexfivecon>h3>span{font-size:34px;}
	.indexfivecon>h2{margin-top:30px;font-size:30px;}
	.indexfivecon>h2>span>em{letter-spacing:0px;}
	.indexfivecon>div{margin-top:30px;}
	.indexfivecon>div>p{font-size:14px;}
	.indexfivecon>div>p>span{width:14px;}
	.indexfivecon>div>p>em{width:calc(100% - 14px);}
}
@media screen and (max-width:780px){
	.indexfive{padding:40px 20px;background-size:auto 10px;}
	.indexfive:after{height:10px;background-size:auto 10px;}
	.indexfivecon{padding:40px 0px;/*background:url(../img/bg02.jpg)repeat center center;background-size:100% auto;*/}
	.indexfivecon>h3{font-size:20px;line-height:1.4;letter-spacing:1px;}
	.indexfivecon>h3>span{display:block;font-size:30px;}
	.indexfivecon>h2>br{display:block;}
	.indexfivecon>h2{margin-top:20px;font-size:24px;line-height:1.3;}
	.indexfivecon>h2>span:before{height:6px;bottom:4px;}
	.indexfivecon>div{font-size:12vw;line-height:1.2;}
	.indexfivecon>div>br{display:block;}
	.indexfivecon>p{font-size:5vw;letter-spacing:1px;}
	.indexfivecon>div>p{font-size:12px;}
	.indexfivecon>div>p>span{width:12px;}
	.indexfivecon>div>p>em{width:calc(100% - 12px);}
}


/* === FV：ビジュアルを1枚画像化（TOPと同様、数字込み）。注釈はHTMLのまま === */
.cp-fv-visual{margin:0 auto;text-align:center;line-height:0;}
.cp-fv-visual img{display:block;width:100%;height:auto;margin:0 auto;}
.cp-fv-visual .imgsp{display:none;}
@media screen and (max-width:780px){
	.cp-fv-visual .imgpc{display:none;}
	.cp-fv-visual .imgsp{display:block;}
}


/* === FV：正データ(.ai)から書き出した1枚画像（注釈含む）。PC/SP切替 === */
.cp-fv{padding:0;background:#fffcaf;overflow:hidden;}
.cp-fv-visual{margin:0;line-height:0;font-size:0;}
.cp-fv-visual img{display:block;width:100%;height:auto;margin:0 auto;}
.cp-fv-visual .imgsp{display:none;}
@media screen and (max-width:780px){
	.cp-fv-visual .imgpc{display:none;}
	.cp-fv-visual .imgsp{display:block;}
}