@charset "UTF-8";

/* mv */
.mv{
	text-align: center;
}
.mv img{
	border-radius: 40px;
	width: 1000px;
}
@media only screen and (max-width: 736px){
	.mv img{
		border-radius: 0;
		width: 100%;
	}
}

/*アコーディオン*/
.c_red{color: #dd1313;}


/*アコーディオン*/
.accordion_wrap{
	padding: 2%;
}
.accordion_wrap .accordion_ttl{
	padding: 1em;
}


/*申込みボタン*/
.btn_base.red a{
	background-color: #c10e2d;
	border: 1px solid #c10e2d;
}

/*同時に使えるキャンペーン・特典*/
.sonota_campaign{
	background-color: #fff;
	border-radius: 20px;
	padding: 5%;
	text-align: center;
}
.sonota_campaign img{
	border-radius: 20px;
}
@media only screen and (min-width: 737px){
	.sonota_campaign{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		border-radius: 10px;
	}
	.sonota_campaign .bnr{
		width: calc(100% / 2 - 50px);
	}
}
/*ふきだし*/
.sonota_campaign .balloon {
	position: relative;
	display: inline-block;
	margin: 0 0 1em;
	padding: 2% 5%;
	min-width: 120px;
	max-width: 100%;
	color: #fff;
	font-size: 16px;
	background: #e651a5;
	border-radius: 99em;
}
.sonota_campaign .balloon:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -13px;
    border: 13px solid transparent;
    border-top: 8px solid #e651a5;
}
.sonota_campaign .balloon p {
	margin: 0;
	padding: 0;
}
@media only screen and (min-width: 737px){
	.sonota_campaign .balloon {
		padding: 2% 7%;
	}
	.sonota_campaign .balloon:before{
		margin-left: -10px;
		border: 10px solid transparent;
    	border-top: 6px solid #e651a5;
	}
}


/*注意事項*/
.list_normal{
	margin-left: 10px;
}
.list_normal li {
	text-indent: -5px;
	list-style-type: none;
}
.list_normal li::before {
	margin-right: 0 !important;
}

/*文字下線*/
.under{
	background: linear-gradient(transparent 60%, #ffbbbe 60%);}

/*クーポンコード*/
.coupon{
	background-color: #fff;
	border-radius: 20px;
	padding: 20px 30px;
	text-align: center;
	width: 70%;
	margin: 0 auto;
}
@media only screen and (max-width: 737px){
	.coupon{
		width: 100%;
		padding: 5%;
	}
}
.coupon h3{
	text-align: center;
	font-size: 20px;
	color: #e651a5;
}
.coupon .campaign_code_box{
	width: 80%;
    margin: 0 auto;
}

/*クーポンコード 「コピーしました！」*/
.copycode {
	position: relative;    /* バルーンを表示するための基準値とする */
	display: block; /* インラインブロック要素にする */
	width: 100%;
	margin-bottom: 10px;
}
.copycode span {
	opacity: 0;            /* 最初は透明にして見えなくする */
	position: absolute;    /* 表示を相対位置にする */
	color: #eaeaea;           /* 文字色を白に指定 */
	background: #ffa2d080;  /* 背景色を半透明の黒にする */
	padding: 5px 15px;             /* 適度な余白を指定 */
	bottom: -7em;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    border-radius: 20px;
}
.copycode input{
	border: none;
	width: 95%;
	text-align: center;
	padding: 3%;
    border-radius: 10px;
	font-size: 20px;
	margin: 0 auto;
	display: block!important;
	background-color: #eaeaea;
}
.copycode input:focus + span {
	animation: fade-out 2s ease-in; /* inputが選択状態になったときにだけアニメーションを1回実行する */
	color: inherit;
}
.copycode + .copycode_btn{
    color: #fff;
}
.copycode + .copycode_btn button{
	border: none;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	display: inline-block;
	background-color: #e651a5;
    border-radius: 99em;
    padding: 1.5% 5%;
	font-size: 14px;
}
@media screen and (max-width:640px) {
	.copycode span {
		top: 8em;
		font-size: 70%;
		padding: 1%;
		left: 50%;
		right: 10px;
		transform: translate(-50%, -50%);
	}
	.copycode input{
		font-size: 100%;
		width: 100%;
	}
	.copycode + .copycode_btn button{
		padding: 1.5% 8%;
		font-size: 80%;
	}
}
@keyframes fade-out {
  0% {visibility: visible; opacity: 1;}  /* 最初は表示して、 */
  100% {visibility: hidden; opacity: 0;} /* フェードアウトする */
}

/*申込みボタン部分*/
.cta_block {
	display: block;
	max-width: 450px;
	margin: 0 auto;
	text-align: center;
}

/*申込みボタン部分_斜め線見出し*/
h3.cta_txt {
    position: relative;
    padding: .5rem 1.5rem 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
	display: inline-block;
}
h3.cta_txt::before,
h3.cta_txt::after {
    position: absolute;
    top: 0.8rem;
    height: 1.8rem;
    content: '';
	border-radius: 99em;
}
h3.cta_txt::before {
    border-left: solid 3px;
    left: 0;
    transform: rotate(-30deg);
}
h3.cta_txt::after {
    border-right: solid 3px;
    right: 0;
    transform: rotate(30deg);
}


/*FV部分のCP内容説明*/
.main_info{
	background-color: #f6cbd4;
	border-radius: 40px;
	padding: 0 0 60px; 
}
@media screen and (max-width:640px) {
	.main_info{
		border-radius: 0;
		padding: 0;
		background-color: transparent;
	}
}

/*タブの切り替え*/
.campaign_tab {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
	margin: 0 auto;
	gap: 16px;
	justify-content: center;
	align-items: center;
}
.campaign_tab > label {
	flex: 0 0 290px;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .9em 1em;
    background-color: #f2f2f2;
    color: #999;
    font-size: 1.2em;
	font-weight: 700;
    line-height: 1.3em;
    text-align: center;
    cursor: pointer;
	margin-bottom: 10px;
	border-radius: 20px;
	align-self: stretch;
	align-content: center;
}
.campaign_tab > label:hover,
.campaign_tab label:has(:checked) {
    background-color: #e651a5;
    color: #fff;
}
.campaign_tab label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #e651a5;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.campaign_tab input {
    display: none;
}
.campaign_tab > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
}
.campaign_tab label:has(:checked) + div {
    display: block;
}
@media screen and (max-width:640px) {
	.campaign_tab {
		gap: 10px;
	}
	.campaign_tab > label {
		flex: 1 1;
	}
}

.campaign_tab .campaign_contents{
	background-color: #fffaf4;
	border: 5px solid #e651a5;
	border-radius: 40px;
	padding: 50px 50px 40px 50px;
	color: #505050;
	position: relative;
	margin-top: 30px;
	}
.campaign_tab .campaign_contents.item2{
	padding: 80px 50px 40px 50px;
}

.campaign_tab .campaign_contents h3.tab_ttl{
	background-color: #e651a5;
	border-radius: 20px;
	border: 4px solid #e651a5;
	position: absolute;
	top: -30px;
    left: 50%;
  	transform: translateX(-50%);
	text-align: center;
	color: #fff;
	width: 80%;
	padding: 10px 50px;
	line-height: 1.3em;
	font-weight: 700;

}
.campaign_tab .campaign_contents > p:first-of-type{
		font-weight: 700;
		font-size: 22px;
		text-align: center;
	}
.campaign_tab .campaign_contents .pink{
	color: #e651a5;
}
.campaign_tab .campaign_contents .under{
	background: linear-gradient(transparent 50%, #e651a53b 50%);
}
@media screen and (max-width:640px) {
	.campaign_tab .campaign_contents{
		border-radius: 20px;
		padding: 14% 6% 7%;
	}
	.campaign_tab .campaign_contents.item2{
		padding: 17% 6% 7%;
	}
	.campaign_tab .campaign_contents > p:first-of-type{
		font-size: 16px;
		line-height: 1.3em;
	}
	.campaign_tab .campaign_contents h3.tab_ttl{
		padding: 2% 5%;
		font-size: 16px;
		width: 80%;
	}
}

/*ステップエリア*/
/* ラベル */
.campaign_tab .campaign_contents .step_title{
	display:inline-block;
    padding:10px 28px;
    background:#e651a5;
    color:#fff;
    font-weight:bold;
    font-size: 18px;
    text-align:center;
    border-radius:24px 24px 0 0;
    line-height:1;
	margin-bottom: 0;
}
.campaign_tab .campaign_contents .step_title_boder{
	position:relative;
	margin-bottom: 10px;
}
.campaign_tab .campaign_contents .step_title_boder::after{
    content:"";
    position:absolute;
    left:0;
    bottom: 0;
    width:100%;
    height:3px;
    background:#e651a5;
}

@media screen and (max-width:640px) {
	.campaign_tab .campaign_contents .step_title{
		font-size: 15px;
		border-radius:12px 12px 0 0;
	}
}
.step_area .step_contents{
	background-color: #fff;
	border-radius: 10px;
	padding: 30px 40px;
	border: 1px solid #e651a5;
}
@media screen and (max-width:640px) {
	.step_area .step_contents{
		padding: 5% 6%;
	}
}
/* ボタン */
.step_area .step_contents .step_btn a{
    background-color: #505050;
    border-radius: 99em;
    color: #fff;
    display: block;
    padding: 8px;
    position: relative; /* position: relative;で矢印の位置を基点とさせます */
    text-align: center;
    text-decoration: none;
    width: 300px;
	transition: 0.3s ease-in-out;
	margin: 0 auto;
}
.step_area .step_contents .step_btn a::after{
    content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); /* rotate(45deg)で矢印を回転（向きを変更）させる */
}
.step_area .step_contents .step_btn a:hover{
    background-color: #c0c0c0;
}
@media screen and (max-width:640px) {
	.step_area .step_contents .step_btn a{
		width: 95%;	
		font-size: 16px;
		padding: 2% 7% 2% 5%
	}
	.step_area .step_contents .step_btn a::after{
		width: 6px;
    	height: 6px;
	}
}

.step_area .step_contents .image_area{
	padding: 35px 40px 30px;
	background-color: #f0f0f0;
	position: relative;
	margin: 30px auto 10px;
	border-radius: 20px;
}
@media screen and (max-width:640px) {
	.step_area .step_contents .image_area{
		padding: 6% 8% 5%;
		border-radius: 10px;
	}
	.step_area .step_contents .image_area .txt p{
		line-height: 1.2em;
    	font-style: italic;
	}
}
/* 吹き出し */
.step_area .step_contents .image_area .ballon_are{
	position: absolute;
	top: -45px;
    left: 0;
    right: 0;
	margin: 0 auto;
	text-align: center;
}
@media screen and (max-width:640px) {
	.step_area .step_contents .image_area .ballon_are{
		top: -40px;
	}
}
.step_area .step_contents .image_area .balloon {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 7px 30px;
	min-width: 120px;
	max-width: 100%;
	color: #fff;
	font-size: 16px;
	background: #f0f0f0;
	border-radius: 99em;
}
.step_area .step_contents .image_area .balloon p {
	margin: 0;
	padding: 0;
	color: #505050;
	font-weight: 700;
}
@media screen and (max-width:640px) {
	.step_area .step_contents .image_area .balloon {
		padding: 1% 5%;
	}
}

/*さらに*/
@media screen and (max-width:640px) {
	.campaign_tab .campaign_contents .sarani img{
		width: 110px;
	}
}

/* 斜め線つきテキスト */
.other_cp_ttl {
    display: inline-block;
    position: relative;
    padding-inline: 30px;
	font-size: 20px!important;
    font-weight: 700;
	text-align: center;
	color: #e651a5;
}
.other_cp_ttl::before,.other_cp_ttl::after {
    content: "";
    height: 100%;
    width: 3px;
    background-color: #e651a5;
    position: absolute;
    top: 0;
}
.other_cp_ttl::before {
    left: 0;
    transform: rotate(-30deg);
}
.other_cp_ttl::after {
    right: 0;
    transform: rotate(30deg);
}
@media screen and (max-width:640px) {
	.other_cp_ttl {
		font-size: 17px!important;
		padding-inline: 20px;
	}
	.other_cp_ttl::before {
		transform: rotate(-22deg);
	}
	.other_cp_ttl::after {
		transform: rotate(22deg);
	}
}



/*フッターのボタン部分*/
.btn_icon a{
	padding: 2em 1em 2em 3em;
}
.btn_block3col p{
	margin: 0 .5em 0;
	width: calc(100% / 3 - 1em);
}
.btn_block3col .btn_icon a {
	text-align: center;
	min-height: 161px;
	min-width: auto;
	padding: 0;
}
.btn_block3col .btn_icon a .btn_security_2col{
	display: block;
	padding: 0;
	margin: 0;
}
.btn_block3col .btn_icon a .btn_security_2col span{
	display: block;
	padding: 0;
}
.btn_block3col .btn_security a:after, .btn_icon a:after{
	right: 6%;
}
@media screen and (max-width:640px) {
	.btn_block3col .btn_icon a{
		min-height: 110px;
		padding: 2em 1em 2em 3em;
	}
	.btn_block3col {
		display: block;
	}
	.btn_block3col .btn_icon.sp_vertical{
		width: 100%;
		margin: 0;
	}
	.btn_block3col .btn_icon.sp_vertical a .btn_security_2col{
		flex-wrap: nowrap;
		display: flex;
	}
	.btn_block3col .btn_icon.sp_vertical a .btn_security_2col span{
		text-align: left;
        font-weight: 700;
		font-size: 130%;
		margin-top: 0;
		display: inline;
	}
	.btn_block3col .btn_icon.sp_vertical a .btn_security_2col img{
		margin-right: 10px;
	}
}

/*FVの余白*/
@media screen and (max-width:640px) {
	.inner_u39{
		width: 100%!important}	
}