@charset "UTF-8";

/* rin-homeFullTopWrapper */
.rin-homeFullTopWrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 895px;
	background: url(/resona_in/specialty/images/index_bg_01.png) calc(50% + 302px) -256px no-repeat;
}
.rin-homeFullTopWrapper:has(.rin-headerMenu.show),
.rin-homeFullTopWrapper.introStart {
	background: none;
}
.rin-homeFullTopWrapper > .rin-homeFullTopWrapperInner {
	transition: background 3s cubic-bezier(0.16, 1, 0.3, 1);
	background: rgba(255,255,255,1.0);
}
.rin-homeFullTopWrapper.introFinish > .rin-homeFullTopWrapperInner {
	background: rgba(255,255,255,0);
}

/* header */
.rin-homeBody .rin-headerInner {
	box-shadow: none;
	background: transparent;
}
.rin-homeFullTopWrapper:has(.rin-headerMenu.show) .rin-headerInner {
	background: #fff;
}

/* rin-homeMv */
.rin-homeMv {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	transition: opacity 3s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0;
}
.rin-homeFullTopWrapper.introFinish .rin-homeMv {
	opacity: 1;
}
.rin-labelMiddleHome01 {
	margin-top: 171px;
	padding: 10px 18px;
	border: solid 1px #000;
	color: #000;
}
.rin-homeMvText01 {
	margin: 0 0 0 -30px;
}
.rin-homeMvText02 {
	margin: 10px 0 0;
	font-size: 2.0rem;
}
.rin-homeMvBtnBlock01 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 30px;
}
.rin-homeMvBtn02 .rin-btn02 {
	font-size: 2.2rem;
	text-align: left;
}

/* rin-homeHead */
.rin-homeHead01 {
	margin-bottom: 70px;
	vertical-align: baseline;
	text-align: center;
	font-weight: bold;
}
.rin-homeHead01 > span {
	vertical-align: text-bottom;
}
.rin-homeHead01 img {
	vertical-align: text-bottom;
}
.rin-homeHead01 .rin-homeHeadInner01 {
	font-size: 2.8rem;
}
.rin-homeHead01 .rin-homeHeadInner02 {
	display: block;
	font-size: 5.2rem;
}
.rin-homeHead01 .rin-homeHeadIcon01 {
	width: 77px;
}
.rin-homeHead01 .rin-homeHeadIcon02 {
	width: 78px;
}
.rin-homeHead01 .rin-homeHeadIcon03 {
	width: 238px;
	vertical-align: sub;
}


/* rin-homeFull */
.rin-homeFullBg01 {
	position: relative;
	padding: 56px 0;
	background-image: url(/resona_in/specialty/images/index_bg_04.png), url(/resona_in/specialty/images/index_bg_05.png);
	background-position: 50% 0, 50% 100%;
	background-repeat: repeat-x, repeat-x;
}
.rin-homeFullBgInner01 {
	padding-top: 25px;
	background-color: #feef68;
}
.rin-homeFullBgInner01 .rin-carouselWrap {
	margin-bottom: -60px;
}
.rin-homeFullBgInner01 .bx-viewport {
	z-index: 2;
}
.rin-homeFullBgInner01 .bx-prev,
.rin-homeFullBgInner01 .bx-next {
	z-index: 3;
}

.rin-homeFullBg02 {
	background: url(/resona_in/specialty/images/index_bg_07_pc.png) 50% 50% no-repeat;
}

/* rin-homeNewCampaign01 */
.rin-homeNewCampaign01::before {
	content: '';
	display: block;
	position: absolute;
	top: -68px;
	left: 40px;
	width: 298px;
	height: 655px;
	background: url(/resona_in/specialty/images/index_bg_02_pc.png) 0 0 no-repeat;
}
.rin-homeNewCampaign01::after {
	content: '';
	display: block;
	position: absolute;
	top: 2px;
	right: 40px;
	width: 350px;
	height: 676px;
	background: url(/resona_in/specialty/images/index_bg_03_pc.png) 0 0 no-repeat;
}
.rin-homeNewCampaign01 .rin-mainInner {
	z-index: 1;
	position: relative;
}

/* rin-homeBlock01 */
.rin-homeBlock01 .rin-homeFullBgInner01 {
	background: #feef68 url(/resona_in/specialty/images/index_bg_06_pc.png) 50% 0 no-repeat;
}

/* rin-homeImageColumn01 */
.rin-homeImageColumn01 {
	display: flex;
	flex-direction: row-reverse;
	width: 1120px;
	margin: 150px auto 0;
}
*[class*="rin-homeFeatures"] {
	position: relative;
}
.rin-mainInner > .rin-homeImageColumn01:first-child {
	margin-top: 0;
}
.rin-homeImageColumn01 > .rin-homeColumnText01 {
	width: 560px;
	padding: 50px 39px 0 39px;
	box-sizing: border-box;
	border-radius: 25px;
	background: #fff;
}
.rin-homeImageColumn01 > .rin-homeColumnImage01 {
	width: 560px;
}
.rin-homeImageColumn01 > .rin-homeColumnImage01 > img {
	border-radius: 25px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.rin-homeFeaturesIcon01 {
	position: absolute;
	top: -59px;
	left: calc(50% - 59px);
}
.rin-homeFeaturesIcon01::before {
	content: '';
	position: absolute;
	top: -30px;
	left: calc(50% - 190px);
}
.rin-homeFeatures01 .rin-homeFeaturesIcon01::before {
	top: -40px;
	left: calc(50% - 170px);
	transform: rotate(-18deg);
	width: 122px;
	height: 58px;
	background: url(/resona_in/specialty/images/index_txt_02.png) 0 0 no-repeat;
}
.rin-homeFeatures02 .rin-homeFeaturesIcon01::before {
	transform: rotate(-10deg);
	width: 122px;
	height: 58px;
	background: url(/resona_in/specialty/images/index_txt_02.png) 0 0 no-repeat;
}
.rin-homeFeatures03 .rin-homeFeaturesIcon01::before {
	transform: rotate(-8deg);
	width: 123px;
	height: 58px;
	background: url(/resona_in/specialty/images/index_txt_03.png) 0 0 no-repeat;
}
.rin-homeFeatures04 .rin-homeFeaturesIcon01::before {
	transform: rotate(4deg);
	width: 123px;
	height: 58px;
	background: url(/resona_in/specialty/images/index_txt_03.png) 0 0 no-repeat;
}
.rin-homeFeatures05 .rin-homeFeaturesIcon01::before {
	transform: rotate(1deg);
	width: 123px;
	height: 58px;
	background: url(/resona_in/specialty/images/index_txt_03.png) 0 0 no-repeat;
}
.rin-homeFeaturesLink01 {
	position: absolute;
	bottom: -36px;
	left: calc(50% + 95px);
	width: 370px;
	text-align: center;
}

.rin-homeImageColumn01 h3 {
	margin-bottom: 12px;
	line-height: 1.4;
	font-size: 3.0rem;
	font-weight: bold;
}

/* rin-homeFeatures05 */
.rin-homeFeatures05 {
	width: 1120px;
	margin: 150px auto 0;
	padding: 70px 48px 60px;
	box-sizing: border-box;
	border-radius: 25px;
	background: #fff;
}

/* rin-homeColumn */
.rin-homeColumn01 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rin-homeColumn02 {
	display: flex;
	align-items: space-between;
	justify-content: center;
	text-align: center;
}

/* rin-homeDetailsList01 */
.rin-homeDetailsList01 {
	margin-top: 70px;
	text-align: center;
}
.rin-homeDetailsList01 > dt {
	font-size: 3.6rem;
	font-weight: bold;
}

/* rin-homeList01 */
.rin-homeList01 {
	display: flex;
	justify-content: space-around;
	position: relative;
	width: 1100px;
	margin: 0 auto;
}
.rin-homeList01 > li {
	margin-right: -30px;
}
.rin-homeListEtc01 {
	position: absolute;
	right: -2em;
	bottom: 20px;
	font-size: 3.1rem;
	font-weight: bold;
}


/*-------------------------------------------
イントロ
-------------------------------------------*/
body {
 /*	margin: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: #f0f0f0;全体の背景色 */
}

.rin-homeIntroWrap {
	scale: 1.5;
	position: absolute;
	top: 80px;
	left: 17%;
	overflow: hidden;
	width: 66%;
	height: 750px;
	margin: 0 auto;
	background-color: #fff;
}

.rin-homeIntroBlurCircle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 335px;
	height: 335px;
	background-color: rgba(255, 255, 255, 0.3); /* 透明な白 */
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(0px); /* ブラーの強度はお好みで調整 */
	backdrop-filter: blur(5px); /* iOS14非対応 */
	z-index: 10;
}

.rin-homeIntroText {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #000;
	font-size: 3.0rem; /* フォントサイズはお好みで */
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	z-index: 11; /* マークの上に表示 */
	white-space: nowrap; /* テキストが改行されないように。brを使うため */
}
.rin-homeIntroText.hidden {
	opacity: 0;
	pointer-events: none; /* クリックイベントを無効化 */
}
.rin-homeIntroTextInitial {
	width: 250px;
}
.rin-homeIntroTextFinal {
	width: 280px;
}

.rin-homeIntroMarksWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 290px; /* 円と同じくらい */
	height: 290px; /* 円と同じくらい */
	z-index: 2; /* 文字の下、円の上 */
}

.rin-homeIntroMark {
	position: absolute;
	object-fit: contain;
	/* transform-origin: center center; はデフォルト */
}
.rin-homeIntroExclamation {
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rin-homeIntroMark.hidden {
	display: none; /* JavaScriptで切り替える */
}

/* 各マークの初期配置（ヤジロベーの開始位置） */
/* 具体的な位置は画像の重なり方を考慮して調整してね */
.rin-homeIntroQuestion {scale: 1.3;}
.rin-homeIntroQuestion.q1 { width: 80px; height: 87px; top: 44%; left: 15%; }
.rin-homeIntroQuestion.q2 { width: 69px; height: 87px; top: 27%; right: 37%; }
.rin-homeIntroQuestion.q3 { width: 55px; height: 82px; bottom: 14%; left: 44%; }
.rin-homeIntroQuestion.q4 { width: 44px; height: 76px; bottom: 30%; right: 25%; }

/* --- アニメーションの定義 --- */

/* 1. ヤジロベー回転アニメーション（0-1s） */
@keyframes sway {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	75% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

/* 2. 文字フェードアウト＆マーク中央集結アニメーション（1-1.3s） */
@keyframes fadeOutText {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes gatherMarksQ1 {
	to {top: 53%;left: 53%;transform: translate(-50%, -50%) rotate(0deg);}
}
@keyframes gatherMarksQ2 {
	to {top: 53%;right: 20%;transform: translate(-50%, -50%) rotate(0deg);}
}
@keyframes gatherMarksQ3 {
	to {bottom: 20%;left: 52%;transform: translate(-50%, -50%) rotate(0deg);}
}
@keyframes gatherMarksQ4 {
	to {bottom: 20%;right: 28%;transform: translate(-50%, -50%) rotate(0deg);}
}

/* 4. マーク拡大＆4隅へ移動、文字フェードイン（1.4-1.7s） */
@keyframes spreadOutEnlarged {
	from {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	to {
		/* 拡大しつつ4隅へ移動する最終位置 */
		/* 具体的な位置は画面サイズとマークのサイズに合わせて調整 */
		top: -50px; /* 画面外の左上寄り */
		left: -50px;
		transform: translate(0, 0) scale(5.0); /* 拡大 */
		opacity: 1;
	}
}
/* 4隅への移動は、各マークのクラスで微調整が必要になることが多い */
/* 例: */
.rin-homeIntroMark.e1 { scale: 0.47; width: 105px; height: 232px; top: 10%; left: 34%; } /* 左上 */
.rin-homeIntroMark.e2 { scale: 0.56; width: 61px; height: 184px; top: 18%; right: 37%; left: auto; } /* 右上 */
.rin-homeIntroMark.e3 { scale: 0.56; width: 116px; height: 176px; bottom: 18%; left: 31%; top: auto; } /* 左下 */
.rin-homeIntroMark.e4 { scale: 0.49; width: 142px; height: 216px; bottom: 9%; right: 20%; left: auto; top: auto; } /* 右下 */

.rin-homeIntroMark.spread-out {
	scale: 1.0;
}
.rin-homeIntroMark.e1.spread-out { top: -50px; left: -50px; } /* 左上 */
.rin-homeIntroMark.e2.spread-out { top: -50px; right: -50px; left: auto; } /* 右上 */
.rin-homeIntroMark.e3.spread-out { bottom: -50px; left: -50px; top: auto; } /* 左下 */
.rin-homeIntroMark.e4.spread-out { bottom: -50px; right: -50px; left: auto; top: auto; } /* 右下 */


@keyframes fadeInText {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 6. 全体フェードアウト（2.7-3s） */
@keyframes fadeOutContainer {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* アニメーションクラス（JavaScriptで付与/削除） */
.animate-sway {
	animation: sway 2s infinite alternate cubic-bezier(0.16, 1, 0.3, 1); /* 往復で揺れる */
}

.animate-text-fade-out {
	animation: fadeOutText 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
/* ?アイコン */
.animate-marks-gatherQ1 {
	animation: gatherMarksQ1 0.6s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-marks-gatherQ2 {
	animation: gatherMarksQ2 0.6s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-marks-gatherQ3 {
	animation: gatherMarksQ3 0.6s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-marks-gatherQ4 {
	animation: gatherMarksQ4 0.6s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
/* !アイコン拡大 */
.animate-marks-spread {
	animation: spreadOutEnlarged 0.6s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-text-fade-in {
	animation: fadeInText 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-container-fade-out {
	animation: fadeOutContainer 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1);
}