/*ーーーー フォント設定 ーーーー*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*ーーーー 全体設定 ーーーー*/
html{ scroll-behavior: smooth;}

body{
	background-color: #FFF;
	font-family: 'Noto Sans JP', sans-serif;
	color: #252525;
}

img{
	vertical-align:top;
}

h1{
	
}
h2{
	
}
p{

}

.sp_container{
	max-width: ;
	margin: 0 auto;
}

/*ー横並びー*/
.flex{
	display: flex;
}

/*ータイトルー*/
.title{
	
}
/*ーサブタイトルー*/
.sub{
	
}
/*ー本文ー*/
.text{
	
}

/*ーーーー ファーストビュー ーーーー*/
.fv{
	height: 100%;
	background-image: url('./image/fvbg.webp');
	background-size: cover;
	background-position: center;
	padding: 40px 20px;
}
.fv_blue_bubble{
	width: 214px;
	margin: 0 auto;
}
.fv_yellow_bubble{
	width: 223.5px;
	margin: 0 auto;
}

/*ーーーー 結果発表 ーーーー*/
.result{
	position: relative;
	padding: 50px 20px;
	background-image: url('./image/result_bg.webp');
	background-size: cover;
	background-position: center;
}
.result_mark{
	position: absolute;
	left: 20%;
	bottom: 1.5%;
	width: 80px;
}
.result_title{
	width: 227.5px;
	margin: 0 auto;
}
.result_title,.result_mark {
	animation-name:updown1;   /* アニメーション名の指定 */
	animation-delay:0s;   /* アニメーションの開始時間指定 */
	animation-duration: 3s;   /* アニメーション動作時間の指定 */
	animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
	animation-iteration-count: infinite; 
}
@keyframes updown1 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}
.result_text{
	color: #FFF;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-align: center;
	margin-top: 5px;
}

.result_contentscrm{
	display: flex;
	gap: 15px;
	margin-top: 20px;
}
.result_contentscrm_left,.result_contentscrm_right{
	width: 50%;
}
.result_contentscrm_right{
	margin-top: 30px;
}
.result_contentscrm_mt{
	margin-top: 15px;
}

/*ー（紫）恋愛・人間関係編ー*/
.result_contentscrm_purple{
	position: relative;
	background: #8049EC;
	padding: 10px 5px 5px 5px;
	border: 2px solid #8049EC;
	border-radius: 15px;
	box-shadow: 5px 5px #E3D5FF;
}
.result_contentscrm_purple:hover{
	transform: translateY(-4px);
	opacity: 0.5;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.contentscrm_link{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none; /* 下線を消す */
	color: inherit; /* 文字色を継承 */
}
.result_contentscrm_title{
	color: #FFF;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
}
.result_contentscrm_whitecrm{
	background: #FFF;
	padding: 12.5px 8px;
	border: 2px solid #8049EC;
	border-radius: 15px;
	text-align: center;
	margin-top: 9px;
}
.result_contentscrm_whitetitle{
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
}
.result_contentscrm_white_orangetext{
	color: #FF510A;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	margin-top: 10px;
}
.result_contentscrm_white_versus{
	display: inline-block;
	background: #252525;
	color: #FFF;
	font-weight: 800;
	padding:3px 5px;
	border-radius: 100px;
	margin: 5px 0;
}
.result_contentscrm_white_bluetext{
	color: #006BCF;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
}
.purple_btn{
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: 40px;
}

/*ー（緑）あるある・日常編ー*/
.result_contentscrm_green{
	background: #40D3BA;
	border: 2px solid #06BFA0;
	box-shadow: 5px 5px #C4EBE4;
	margin-top: 15px;
}
.result_contentscrm_whitecrm_green{
	border: 2px solid #06BFA0;
}

/*ー（ピンク）ー*/
.result_contentscrm_pink{
	background: #FF92A4;
	border: 2px solid #FF6E86;
	box-shadow: 5px 5px #FFF;
}
.result_contentscrm_whitecrm_pink{
	border: 2px solid #FF6E86;
}

/*ー（青）意識・価値観編ー*/
.result_contentscrm_blue{
	background: #40C2D3;
	border: 2px solid #00B0C7;
	box-shadow: 5px 5px #B5E0E6;
	margin-top: 15px;
}
.result_contentscrm_whitecrm_blue{
	border: 2px solid #00B0C7;
}

.purple_btn:hover{
	transform: translateY(-4px);
	opacity: 0.5;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.result_contentscrm_white_orangetext_min{
	font-size: 14px;
}

/*ーーーー 続編があるかも!? ーーーー*/
.continuation{
	padding: 40px 20px;
	background-image: url('./image/continuation_bg.webp');
	background-size: cover;
	background-position: center;
}
.past{
	background-image: url('./image/past_bg.webp');
}
.continuation_title{
	width: 241px;
	margin: 0 auto;
}

.past_title{
	width: 243px;
	margin: 0 auto;
	margin-top: 20px;
}

/*ーーーー CTA ーーーー*/
.cta{
	padding: 40px 20px;
	background-image: url('./image/cta_bg.webp');
	background-size: cover;
	background-position: center;
	text-align: center;
}
.cta_text{
	display: inline-block;
	position: relative;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
}
.cta_text::before{
	position: absolute;
	content: "";
	top: 70%;
	left: -40px;
	width: 22.5px;
	height: 3px;
	background-color: #252525;
	transform: rotate(70deg);
}
.cta_text::after{
	position: absolute;
	content: "";
	top: 70%;
	right: -40px;
	width: 22.5px;
	height: 3px;
	background-color: #252525;
	transform: rotate(-70deg);
}
.ctabtn{
	width: 300px;
	margin: 0 auto;
	margin-top: 10px;
}
.ctabtn:hover{
	transform: translateY(-4px);
	opacity: 0.5;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

/*ーーーー TIMES ーーーー*/
.times{
	padding: 50px 20px;
	background-image: url('./image/times_bg.webp');
	background-size: cover;
	background-position: center;
	text-align: center;
}
.times_title{
	width: 286.5px;
	margin: 0 auto;
}
.times_text{
	color: #FFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.71;
	margin-top: 10px;
}

/*ーーーー フッター ーーーー*/
footer{
	padding: 40px 20px;
}
.times_logo{
	width: 150px;
	margin: 0 auto;
	padding: 20px 0;
}
.times_logo:hover{
	transform: translateY(-4px);
	opacity: 0.5;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.sns_text{
	font-size: 14px;
	font-weight: 900;
	margin-top: 40px;
}
.sns_crm{
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 15px;
}
.x{
	width: 40px;
}
.x_top{
	width: 26.5px;
}
.line{
	width: 30px;
}
.insta{
	width: 30px;
}

.pc_only{
	display: none;
}

footer{
	text-align: center;
}

.footer_text{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 900;
	text-align: center;
}
.footer_text::before{
	position: absolute;
	content: "";
	top: 70%;
	left: -25px;
	width: 22.5px;
	height: 2px;
	background-color: #252525;
	transform: rotate(70deg);
}
.footer_text::after{
	position: absolute;
	content: "";
	top: 70%;
	right: -25px;
	width: 22.5px;
	height: 2px;
	background-color: #252525;
	transform: rotate(-70deg);
}

@media screen and (min-width: 450px) {
	/* 960px以上に適用されるCSS（PC用） */
	.sp_container{
		max-width: 100%;
	}
	.sp_only{
		display: none!important;
	}
	.pc_only{
		display: block;
	}

	/*ーーーー ファーストビュー ーーーー*/
	.fv{
		height: 100vh;
		background-image: url('./image/detail/pc_detail_fvbg.webp');
		background-size: cover;
		background-position: center;
		padding: 70px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.fv_crm{
		display: flex;
		align-items: center;
	}
	.fv_blue_bubble{
		width: 27%;
		height: auto;
		margin-top: 200px;
	}
	.fv_title{
		width: 34%;
	}
	.fv_yellow_bubble{
		width: 30%;
		height: auto;
		margin-bottom: 200px;
	}

	/*ーーーー 結果発表 ーーーー*/
	.result{
		padding: 9% 0;
		background-image: url('./image/pc_result_bg.webp');
	}
	.result02{
		background-image: url('./image/pc_result_bg02.webp');
	}
	.result_title{
		width: 455px;
	}
	.result_text{
		font-size: 32px;
		margin-top: 3%;
	}
	.result_contentscrm{
		max-width: 1100px;
		margin: 0 auto;
		margin-top: 4%;
	}
	.result_contentscrm02{
		margin-top: 2%;
	}
	.pc_result_contentscrm{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 35px;
		max-width: 1100px;
		margin: 0 auto;
		width: 100%;
	}
	.pc_result_contentscrmmt{
		margin-top: 40px;
	}
	.result_contentscrm_left{
		display: flex;
		justify-content: center;
		gap: 35px;
		align-items: flex-start;
		width: 100%;
		flex-wrap: wrap;
	}
	.result_contentscrm_right{
		display: flex;
		justify-content: center;
		gap: 35px;
		align-items: flex-start;
		margin-top: 50px;
		width: 100%;
		flex-wrap: wrap;
	}
	.result_contentscrm_purple{
		padding: 20px 10px 10px 10px;
	}
	.result_contentscrm_title{
		font-size: 24px;
	}
	.result_contentscrm_whitetitle{
		font-size: 18px;
		line-height: 1.66;
	}
	.result_contentscrm_white_orangetext{
		font-size: 24px;
	}
	.result_contentscrm_white_versus{
		margin: 10px 0;
	}
	.result_contentscrm_white_bluetext{
		font-size: 24px;
	}
	.purple_btn{
		width: 75px;
		right: -20px;
		bottom: -20px;
	}
	.result_mark{
		left: 10%;
		top: 31.5%;
		width: 151px;
	}
	.result_contentscrm_green,.result_contentscrm_blue{
		margin-top: 0px;
	}
	.result_contentscrm_white_orangetext_min{
		font-size: 18px;
	}
	.result_contentscrm_mt{
		margin-top: 0px;
	}
	.pc_questioncrm{
		width: 22%;
	}
	.pc_questioncrmmt{
		margin-top: 30px;
	}

	/*ーーーー 続編があるかも ーーーー*/
	.continuation{
		padding: 6% 0;
		background-image: url('./image/pc_continuation_bg.webp');
	}
	.past{
		background-image: url('./image/pc_past_bg.webp');
	}
	.continuation_title{
		width: 482px;
	}

	.past_title{
		width: 455px;
		margin-top: 50px;
	}

	/*ーーーー CTA ーーーー*/
	.cta{
		padding: 6% 0;
	}
	.cta_text{
		font-size: 32px;
	}
	.ctabtn{
		width: 600px;
		margin-top: 20px;
	}
	.cta_text::before{
		width: 48.5px;
		left: -60px;
	}
	.cta_text::after{
		width: 48.5px;
		right: -60px;
	}
	.sns_text{
		font-size: 18px;
		margin-top: 60px;
	}
	.sns_crm{
		gap: 40px;
		margin-top: 30px;
	}
	.x{
		width: 43px;
	}
	.x_top{
		width: 50px;
	}
	.line{
		width: 55px;
	}
	.insta{
		width: 55px;
	}

	/*ーーーー TIMES ーーーー*/
	.times{
		padding: 8% 0;
		background-image: url('./image/pc_times_bg.webp');
	}
	.times_title{
		width: 425px;
	}
	.times_text{
		font-size: 28px;
		line-height: 1.96;
	}

	.footer_text::before{
		width: 21.5px;
		left: -35px;
	}
	.footer_text::after{
		width: 21.5px;
		right: -35px;
	}
}

@media screen and (min-width:450px) and ( max-width:959px) {
	/*　画面サイズが768pxから959pxまではここを読み込む　*/
	.fv{
		height: initial;
	}
	.result_title{
		width: 300px;
	}
	.pc_result_contentscrm{
		width: 100%;
		gap: 20px;
		flex-wrap: wrap;
	}
	.result_contentscrm{
		padding: 0 20px;
	}
	.pc_questioncrm{
		width: 46%;
	}
	.times_text{
		font-size: 22px;
	}
	.fv_blue_bubble{
		margin-top: 0px;
	}
	.fv_yellow_bubble{
		margin-bottom: 0px;
	}

}