@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");

/*------------------------------------------------------------
GIFT GUIDE
------------------------------------------------------------*/
/*! pc & tb 
------------------------------------------*/
@media screen and (min-width: 768px) {
	/*all
---------------------*/
	.spView {
		display: none;
	}

	/*セクション
---------------------*/
	.sec_wrap {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 150px;
	}

	/*ジュエリー診断ページ
---------------------*/
	.qa_wrap {
		width: 100%;
		padding-bottom: 130px;
	}
	.qa_wrap h2 {
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		height: 350px;
		background: url("/photo/page/20251121/img/main_pc.jpg") center center no-repeat;
		text-indent: -9999px;
		position: relative;
	}
	.qa_num {
		display: flex;
		justify-content: center;
		font-size: 50px;
		width: 140px;
		margin: 0 auto 40px;
		padding-top: 60px;
	}
	.qa_question {
		text-align: center;
		margin: 0 auto;
		padding-bottom: 60px;
		font-size: 20px;
		line-height: 2;
		font-weight: 600;
		font-style: normal;
		letter-spacing: 0.3em;
		color: #666666;
	}

	/*診断　質問ボタン
--------*/
	.qa_btn_wrap {
		width: 700px;
		margin: 0 auto;
	}
	ul.qa_btn_wrap::after {
		content: "";
		display: block;
		clear: both;
	}
	ul.qa_btn_wrap li.q1_odd {
		display: flex;
		justify-content: center;
	}
	ul.qa_btn_wrap li.q1_odd .btn {
		width: 300px;
	}
	ul.qa_btn_wrap li.q_odd {
		float: left;
		width: 50%;
		border-right: 1px solid #bfbcbc;
	}
	ul.qa_btn_wrap li.q_even {
		float: right;
		width: 50%;
	}
	ul.qa_btn_wrap li.q_even .qa_btn {
		margin-left: auto;
		margin-right: 0;
	}

	.qa_btn {
		width: 100%;
		max-width: 300px;
		background-color: black;
		font-weight: 500;
		font-style: normal;
		color: #ffffff;
		text-align: center;
		display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
		font-size: 15px;
		border-radius: 7px;
		letter-spacing: 0.15em;
	}

	.qa1_btn {
		height: 70px;
	}

	.qa_btn:not(.btn_reset):hover {
		animation: qabtnAnime 1.5s linear;
	}
	@keyframes qabtnAnime {
		0% {
			color: #ffffff;
			opacity: 1;
		}
		50% {
			color: #ffffff;
			opacity: 0.7;
		}
		100% {
			color: #ffffff;
			opacity: 0.7;
		}
	}

	/*診断　結果
--------*/
	.ans_ttl {
		text-align: center;
		margin: 0 auto;
		padding: 80px 0 80px;
		font-size: 23px;
		line-height: 2.5;
		font-weight: 400;
		font-style: normal;
		letter-spacing: 0.2em;
		color: #666666;
	}
	.qa_item3_wrap {
		width: 100%;
		max-width: 780px;
		margin: 0 auto 70px;
		display: flex;
		flex-wrap: wrap; /*改行許可*/
		justify-content: space-between; /*両端配置・間隔なし*/
		align-items: flex-end;
	}
	.qa_item4_wrap {
		width: 100%;
		max-width: 1050px;
		margin: 0 auto 70px;
		display: flex;
		flex-wrap: wrap; /*改行許可*/
		justify-content: space-between; /*両端配置・間隔なし*/
		align-items: flex-end;
	}
	.qa_item3_wrap .qa_item {
		width: calc(240 / 780 * 100%);
	}
	.qa_item4_wrap .qa_item {
		width: calc(240 / 1050 * 100%);
	}
	.qa_item_info {
		text-align: center;
		color: #555555;
		font-size: 13px;
		padding-top: 20px;
	}
	.ans_btn_wrap {
		width: 360px;
		margin: 0 auto 40px;
	}
	.ans_btn_wrap .qa_btn {
		max-width: 360px;
		letter-spacing: 0.1em;
	}
	.ans_btn_wrap .btn_other {
		letter-spacing: 0.05em;
	}
	.ans_btn_wrap .btn_reset {
		background-color: #ffffff;
		border: 1px solid black;
		color: black;
		margin-top: 30px;
	}
	.ans_btn_wrap .btn_reset:hover {
		background-color: black;
		color: #ffffff;
		margin-top: 30px;
	}
} /*! //pc & tb */

/*! sp 
------------------------------------------*/
@media screen and (max-width: 767px) {
	.pcView {
		display: none;
	}
	/*sp all
---------------------*/
	body {
		min-width: inherit;
	}
	/*#main .removeBg{
	opacity: 0;
	}*/
	#main {
		padding-bottom: 0;
		overflow: hidden;
	}
	#main a:hover {
		opacity: 1 !important;
	}

	/* sp lp_contents
---------------------*/
	.lp_contents {
		padding: 27vw 0 0;
	}

	/*sp セクション
---------------------*/
	.sec_wrap {
		width: 100%;
		margin: 0 auto;
	}

	/*sp ジュエリー診断ページ
---------------------*/
	.qa_wrap {
		width: 100%;
		margin-top: 18vw;
	}
	.qa_wrap h2 {
		width: 92vw;
		max-width: 1000px;
		margin: 0 auto;
		height: 61.5vw;
		background: url("/photo/page/20251121/img/main_sp.jpg") center top no-repeat;
		background-size: 100% auto;
		text-indent: -9999px;
		position: relative;
	}
	.qa_num {
		display: flex;
		justify-content: center;
		font-size: 30px;
		width: 25%;
		margin: 0 auto 10vw;
		padding-top: 20vw;
	}
	.qa_question {
		text-align: center;
		margin: 0 auto;
		padding-bottom: 10vw;
		font-size: 4.5vw;
		line-height: 2;
		font-weight: 600;
		font-style: normal;
		letter-spacing: 0.2em;
		color: #666666;
	}

	/*sp 診断　質問ボタン
--------*/
	.qa_btn_wrap {
		width: 92vw;
		margin: 0 auto;
	}

	ul.qa_btn_wrap li {
		width: 70%;
		margin: 0 auto 5vw;
	}

	.qa_btn {
		width: 100%;
		max-width: 320px;
		background-color: black;
		font-weight: 600;
		font-style: normal;
		color: #ffffff;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 14vw;
		font-size: 3.8vw;
		border-radius: 7px;
		letter-spacing: 0.15em;
	}

	.qa1_btn {
		height: 18vw;
	}

	/*sp 診断　結果
--------*/
	.ans_ttl {
		width: 92vw;
		text-align: center;
		margin: 0 auto;
		padding: 20vw 0 12vw;
		font-size: 4.2vw;
		line-height: 2.5;
		font-weight: 600;
		font-style: normal;
		letter-spacing: 0.15em;
		color: #666666;
	}

	.qa_item3_wrap,
	.qa_item4_wrap {
		width: 92vw;
		max-width: 1000px;
		margin: 0 auto 4vw;
		display: flex;
		flex-wrap: wrap; /*改行許可*/
		justify-content: space-around; /*等間隔に配置 余白がないときは、centerと同じ*/
		/* align-items: flex-end; */
	}

	#gift_a5 .qa_item4_wrap {
		align-items: flex-end;
	}

	.qa_item {
		width: 45%;
		padding-bottom: 6vw;
	}

	.qa_item_info {
		text-align: center;
		color: #555555;
		font-size: 3.4vw;
		padding-top: 2.5vw;
	}
	.ans_btn_wrap {
		width: 360px;
		margin: 0 auto 40px;
	}
	.ans_btn_wrap .qa_btn {
		width: 90%;
		max-width: 360px;
		margin: 0 auto;
		letter-spacing: 0.05em;
		line-height: 14vw;
	}
	.ans_btn_wrap .btn_other {
		letter-spacing: 0.05em;
	}
	.ans_btn_wrap .btn_reset {
		background-color: #ffffff;
		border: 1px solid black;
		color: black;
		margin-top: 8vw;
	}
	.qa_logo {
		width: 50%;
		max-width: 239px;
		margin: 30vw auto 0;
	}
} /*! //sp */

/*! all
------------------------------------------*/

/*トップへ戻るボタンの余白
---------------------*/
.whiteSpace {
	background-color: #ffffff;
	padding: 40px 0 0;
}
/*タイトル タイピングアニメーション start
=========================*/
.eachTextAnime span {
	opacity: 0;
}
.seasonTtl .eachTextAnime.appeartext span {
	animation: text_anime_on1 0.5s ease-out forwards;
}
.line1 .eachTextAnime.appeartext span {
	animation: text_anime_on1 1s ease-out forwards;
}
.line2 .eachTextAnime.appeartext span {
	animation: text_anime_on2 3s ease-out forwards;
}
@keyframes text_anime_on1 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes text_anime_on2 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*タイトル タイピングアニメーション end
=========================*/

/*   ふわっと表示 start
=========================*/
/* ----- effects ----- */
.effFI,
.effFIU,
.effFID,
.effFIR,
.effFIL {
	opacity: 0;
}
.effFI.effanm {
	-webkit-animation: effFI 2.5s both;
	animation: effFI 2.5s both;
}
.effFIU.effanm {
	-webkit-animation: effFIU 1.5s both;
	animation: effFIU 1.5s both;
}
.effFID.effanm {
	-webkit-animation: effFID 1.5s both;
	animation: effFID 1.5s both;
}
.effFIR.effanm {
	-webkit-animation: effFIR 1.5s both;
	animation: effFIR 1.5s both;
}
.effFIL.effanm {
	-webkit-animation: effFIL 1.5s both;
	animation: effFIL 1.5s both;
}

/*その場でフェードイン*/
@-webkit-keyframes effFI {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes effFI {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*下から上へフェードイン*/
@-webkit-keyframes effFIU {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes effFIU {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*上から下へフェードイン*/
@-webkit-keyframes effFID {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes effFID {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*右から左へフェードイン*/
@-webkit-keyframes effFIR {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(25px, 0, 0);
		transform: translate3d(25px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes effFIR {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(25px, 0, 0);
		transform: translate3d(25px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*右から左へフェードイン*/
@-webkit-keyframes effFIL {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes effFIL {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
/*   ふわっと表示 end
=========================*/