@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
株式会社サンロイヤル新潟　カスタム対応
	ver.2025.05.30.Custom-SunroyalNiigata
	ホーム　スタイルシート
────────────────────────────────────────
FileName:		/resources/css/index.css
Editor:			TRUSTEC
Description:	ホーム　スタイルシート。
────────────────────────────────────────
2025/05/30:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* ::::: [CUSTOM PROPERTIES] ::::: */
:root {

	/* Fonts
	--------- --------- --------- ------- */
}





/* ::::: [COMMON-HEADER: OVER WRITE] ::::: */

/* Sticky Page Top
--------- --------- --------- ------- */
#sticky-page-top {
}

#sticky-page-top .sticky-page-top-transition {
}



/* ::::: [COMMON-HEADER: OVER WRITE] ::::: */
/* ::::: [IMAGE-STYLES] ::::: */

/* Picture Portrait
--------- --------- --------- ------- */
.portrait {
}

/* Picture Landscape
--------- --------- --------- ------- */
.landscape {
}

/* @media
--------- --------- --------- ------- */
/*	DisplayWidth < SM	*/
@media (max-width: 767px) {

	/* Picture
	--------- --------- --------- ------- */
	.common-picture {
	}

	/* Picture Portrait
	--------- --------- --------- ------- */
	.portrait {
	}

	/* Picture Landscape
	--------- --------- --------- ------- */
	.landscape {
	}

	img.common-picture.landscape,
	.common-picture.landscape img {
		aspect-ratio: 16 / 9;
	}
}



/* ::::: [COMMON-PARTS: OVER WRITE] ::::: */
/* :::::  [TEXT-STYLES: SIGNATURE] ::::: */

/* Setting
--------- --------- --------- ------- */
.signature {
	justify-content: flex-end;
}

/* @media
--------- --------- --------- ------- */
/*	DisplayWidth < SM	*/
@media (max-width: 767px) {

	/* Setting
	--------- --------- --------- ------- */
	.signature {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start
	}
}





/* ::::: [] ::::: */
.index-section-headline {
	color: #404040;
	font-size: max(1.75rem, 2.6vw);
	line-height: var(--common-line-height);
}

.index-section-caption {
	color: #404040;
	font-size: 1.2rem;
	line-height: var(--common-line-height);
}





/* ::::: [INDEX-EYECATCH] ::::: */

/* Setting
--------- --------- --------- ------- */
#index-eyecatch {
    width: 100%;
    height: 100%;
}

#index-eyecatch.eyecatch {
	background: #ffffff url("../images/index/index-eyecatch-video-20250609.mp4") no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	color: #ffffff;
	background-color: #ffffff;
	position: relative;
    height: 100%;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media(min-width: 992px){
	#index-eyecatch,
	#index-eyecatch.eyecatch {
		max-height: 980px;
	}
}
#index-eyecatch.eyecatch .eyecatch-wrapper {
}

/*	Centering Block	*/
#index-eyecatch.eyecatch .eyecatch-centering {
	width: 95%;
	max-width: initial;
}

/*	EyeCatch Picture	*/
#index-eyecatch.eyecatch .elecatch-picture {
}
#index-eyecatch.eyecatch .elecatch-picture img {
}

/*	EyeCatch Video	*/
#index-eyecatch.eyecatch .elecatch-video{
    width: 100%;
    height: 100%;
	background-size: cover;
	align-items: center;
	border: none;
	vertical-align: middle;
    max-height: 800px;
}
@media(min-width: 992px){
	#index-eyecatch.eyecatch .elecatch-video{
		max-height: 980px;
	}
}
#index-eyecatch.eyecatch .elecatch-video video{
    width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
}

/*	EyeCatch Lead	*/
#index-eyecatch.eyecatch .eyecatch-lead-1{
    font-size: max(1.3rem, 2.6vw);
    text-shadow: rgba(13, 13, 13, 0.4) 0 0 10px;
	font-weight: var(--common-font-weight);
    letter-spacing: -0.05em;
	line-height: 1.3em;
	margin-bottom: 0.3em;
}
#index-eyecatch.eyecatch .eyecatch-lead-2{
    font-size: max(0.9rem, 1.25vw);
	line-height: 1.6em;
	letter-spacing: var(--common-letter-spacing);
	font-weight: var(--common-font-weight-light);
    text-shadow: rgba(13, 13, 13, 0.4) 0 0 10px;
    margin-bottom: 0;
}
.eyecatch-title{
    font-size: max(3.9rem, 8vw);
	font-weight: var(--common-font-weight-black);
    letter-spacing: -0.07em;
    text-shadow: rgba(13, 13, 13, 0.4) 0 0 10px;
	line-height: 0.9em;
	margin-bottom: 0.2em;
}
@media(max-width: 992px){
	#index-eyecatch.eyecatch .eyecatch-lead-1{
		margin-bottom: 0.5em;
	}
}
@media(max-width: 767px){
	#index-eyecatch.eyecatch .eyecatch-lead-1{
		line-height: 1.3em;
		margin-bottom: 0.4em;
	}
	#index-eyecatch.eyecatch .eyecatch-lead-2{
		line-height: 1.4em;
		margin-bottom: 0.4em;
	}
	.eyecatch-title{
		line-height: 1em;
	}
}
#index-eyecatch.eyecatch .color2{
	color: #8bbf73;
}
#index-eyecatch.eyecatch .eyecatch-lead-1 .color2{
	text-shadow: rgb(124 56 173 / 46%) 0 0 10px;
}

/* @media
--------- --------- --------- ------- */
/*	画面が横向き（横長）	*/
@media (orientation: landscape){
	#index-eyecatch.eyecatch .eyecatch {
	}
}
/*	画面が縦向き（縦長）	*/
@media (orientation: portrait){
	#index-eyecatch.eyecatch .eyecatch {
	}
}

/* ::::: [INDEX-TOPICS] ::::: */


/* List
--------- --------- --------- ------- */
#index-topics ul ,
#index-topics li {
	list-style: none;
	margin: 0;
	padding: 0.3em 0;
	width: 100%;
}
.topics-none{
	width: 100%;
}
.annotation-topics-none{
    color: var(--common-article-title-color1);
    font-size: max(1rem, 1.1vw);
}
#index-topics .index-topics-list {
    display: flex;
    align-items: center;
}

#index-topics .index-topics-list-item {
}

#index-topics .index-topics-list-item a {
    width: 95%;
    padding: 0.5em 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5em;
	margin: auto;
    position: relative;
	transition: all 0.3s ease-out;
}

.index-topics-list-item a:hover {
	transition: all 0.3s ease-out !important;
	padding-left: 5px !important;
}
#index-topics .index-topics-list-item a::after{
	background-color: #5e8c51;
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .5s;
	width: 100%;
	z-index: 2;
}
#index-topics .index-topics-list-item a::before{
	background-color: #5e8c51;
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
	opacity: .6;
}
#index-topics .index-topics-list-item a:hover::after {
	  transform-origin: left top;
	  transform: scale(1, 1);
}
@media (max-width: 767px) {
	#index-topics .index-topics-list-item a  {
		flex-direction: column;
		gap: 0.25em;
	}
}

#index-topics .index-topics-list-item .item-data {
	margin-bottom: 0.3em;
    color: var(--common-accent-color);
	font-size: max(1.2rem, 1.1vw);
    letter-spacing: var(--common-letter-spacing-title);
	font-weight: 900;
	font-family: var(--common-title-font);
}

#index-topics .index-topics-list-item .item-text {
    flex-grow: 1;
    overflow: hidden;
    min-width: 0;
    color: var(--common-color);
    font-size: max(1.2rem, 1.1vw);
    font-family: var(--common-title-font);
    letter-spacing: var(--common-letter-spacing-title);
    font-weight: 500;
    margin-bottom: 0.5em;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}






/* ::::: [INDEX-BUSINESS] ::::: */

.index-business-picture{
	aspect-ratio: 1.414 / 1;
    overflow: hidden;
	width: 100%;
}
.business-content-caption{
	letter-spacing: var(--common-letter-spacing-wide);
}
.business-text{
	letter-spacing: var(--common-letter-spacing-wide);
}
@media(max-width: 575px){
	.business-text{
		line-height: var(--common-line-height);
		letter-spacing: 0;
	}
}


/* ::::: [INDEX-PRODUCTION] ::::: */
#index-business-production-slider{
}
#index-business-production-slider li{
	height: 50vh;
}
.index-business-production-picture{
	aspect-ratio: 4 / 3;
    overflow: hidden;
	width: 95%;
}
.index-business-production-picture img{
	height: 98%;
}
.index-business-production-none{
    background-color: rgba(153, 153, 153, 0.1);
	border-radius: 6px;
	height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.index-business-production-none .text{
    width: fit-content;
    margin: auto;
}
.index-business-production-title{
}
.slider{
    padding: 0;
    width: 100% !important;
}

/* ::::: [INDEX-INFORMATION] ::::: */

/* Setting
--------- --------- --------- ------- */
#index-information {
	/*background-color: rgba(0, 0, 0, 0.1);*/
}
.index-information-wrapper {
}

.index-information-wrapper .article-intro{
	text-align: center;
}
@media(max-width: 767px){
	.index-information-wrapper .article-intro{
		text-align: start;
	}
}





/* ::::: [INDEX-INFORMATION-COMPANY] ::::: */

/* Setting
--------- --------- --------- ------- */
#index-information-company {
}
.index-information-picture{
	aspect-ratio: 4 / 3;
    overflow: hidden;
	width: 60%;
	margin: auto;
	border-radius: 6px;
}
@media(max-width: 991px){
	.index-information-picture{
		width: 100%;
	}
}

/* Office Wrapper
--------- --------- --------- ------- */
.index-information-office-wrapper {
	background-color: rgba(0, 0, 0, 0.05);
	padding: clamp(1rem, 1vw, 2rem);
}

/*	Company Office	*/
.company-office {
}

/* DL Office
--------- --------- --------- ------- */
.dl-office {
	margin: 0;
	padding: 0;
}

/*	Item	*/
.dl-office .dl-office-item {
	margin: 0;
	padding: 0;
}
.dl-office .dl-office-item + .dl-office-item {
	margin-top: 1em;
}
.dl-office-item {
}

/*	Item Title	*/
.dl-office-title {
	color: #404040;
	font-size: 1.2rem;
	font-weight: var(--common-font-weight-bold);
	line-height: var(--common-line-height);
	margin: 0;
}

/*	Item Data	*/
.dl-office-data {
	margin: 0;
}

/* History Wrapper
--------- --------- --------- ------- */
.index-information-history-wrapper {
    background-color: rgba(153, 153, 153, 0.1);
    margin: 1rem;
    border-radius: 6px;
}
/* フローチャートブロック
--------- --------- --------- ------- */
#history-ul{
    justify-content: center;
	margin: 3rem auto;
	width: fit-content;
}
@media(max-width: 991px){
	.history-text{
		flex-direction: column;
	}
	.index-information-history-wrapper {
		margin: 1rem 0.5rem;
		border-radius: 6px;
	}
	#history-ul{
		padding: 0 1rem;
	}
	.history-decorate{
		margin-right: 2rem;
	}
	.history-text dt{
		padding-right: 0;
	}
}
@media(max-width: 767px){
	.index-information-history-wrapper {
		background-color: rgba(153, 153, 153, 0.1);
		margin: 1rem 0;
		border-radius: 0px;
	}
}


/* Media Query
--------- --------- --------- ------- */

/*	DisplayWidth < MD	*/
@media (max-width: 991px) {

	.tile-checker {
	}
	.tile-checker-item {
	}
	.tile-checker-item img {
		aspect-ratio: 2 / 1;
	}

	.centering-outer {
		width: auto;
		height: auto;

		position: initial;
	}
	.centering-inner {
		width: auto;
/*		padding: 0;*/
		padding-top: 0;
		padding-bottom: 0;

		position: initial;
		top: auto;
		left: auto;
		transform: translate(0, 0);
	}
}


#index-contact{
	padding: 5rem;
}
#index-contact .article-title .title{
	color: #ffffff;
}
#index-contact .article-title .title-short{
	color: #ffffff;
}
#index-contact .article-title .title:before,
#index-contact .article-title .title:after {
	content: "-";
	margin: 0 0.5em;
	color: #ffffff;
}
.contact-background{
    padding: 3rem 4rem;
    background-color: #ffffff7A;
    border-radius: 6px;
    margin: auto;
}
@media (max-width: 1200px) {
	#index-contact{
		padding: 4rem;
	}
}
@media (max-width: 767px) {
	#index-contact{
		padding: 4rem 0;
	}
	.contact-background{
		padding: 3rem 1rem;
		border-radius: 0px;
	}
}
#index-inside-our-facility{
	background-color: #e1f1e6;
	padding-top: clamp(3rem, 1vw, 5rem);
	padding-bottom: clamp(5rem, 9.1vw, 10rem);
	margin: 0;
}

.indoor-col{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#index-inside-our-facility-section-content,
#index-youtube-section-content{
	margin-top: clamp(2.5rem, 1.2vw, 4rem);
}
.youtube-col{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#exterior-title,
#inside-title{
    color: var(--common-article-title-color1);
    font-size: max(1.4rem, 1.7vw);
    letter-spacing: var(--common-letter-spacing-title);
    text-align: center;
    display: flex;
    align-items: center;
    font-weight: 900;
    font-family: var(--common-title-font);
}
#exterior-caption,
#inside-caption{
    font-size: max(.9rem, 1.1vw);
    font-weight: 500;
}




/* ::::: [LOADING ANIMATION] ::::: */

:root {
	--loader-background-color: #000000;
	--loader-color: #ffffff;
}

/* Setting
--------- --------- --------- ------- */
#index-loading {
	background-color: var(--loader-background-color);
	color: var(--loader-color);

	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: block;

	position: absolute;
	top: 0;
	left: 0;

	z-index: 99999;
	opacity: 0;
	animation-name: fadeIn-index-loading;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

/*	loader Animation	*/
@keyframes fadeIn-index-loading {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*	スピナー	*/
#index-loading .loader {
}

/*
 * Single Element CSS Spinners
 * https://projects.lukehaas.me/css-loaders/
 */
.loader,
.loader:before,
.loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}
.loader {
	color: var(--loader-color);
	font-size: 10px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after {
	content: "";
	position: absolute;
	top: 0;
}
.loader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 3.5em;
}

/*	loader Animation	*/
@keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}



.index-facility-col,
.index-room-guide-col {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 80vh;
    padding: 5%;
	position: relative;
	overflow: hidden;
}

@media (max-width: 991px) {
	.index-facility-col,
	.index-room-guide-col {
		padding-left: 5%;
		padding-right: 5%;
		padding-top: clamp(1rem, 15%, 3rem);
		padding-bottom: clamp(1rem, 15%, 3rem);
		height: 70vh;
		max-height: 500px;
	}
}

.index-facility-col-background {
	transition: all 0.3s ease-out;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
}
.index-room-guide-col-background {
	transition: all 0.3s ease-out;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
}
.btn-background-img{
    position: absolute;
    bottom: 0;
    right: 0;
}

.index-point-title-wrapper{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/index/index-intro-background.jpg);
}
@media(max-width: 767px){
	.index-point-title-wrapper{
		background-image: url(../images/index/index-intro-background-mobile.jpg);
        padding-top: 1rem !important;
	}
}
#index-intro-title{
    color: var(--common-article-title-color1);
    letter-spacing: var(--common-letter-spacing-title);
    text-align: start;
    display: flex;
    align-items: center;
	font-weight: 900;
	font-family: var(--common-title-font);
	line-height: 2.5em;
}
.index-intro-title-1{
    font-size: max(1.5rem, 2.4vw);
}
.index-intro-title-2{
    font-size: max(1rem, 1.6vw);
}
@media(max-width: 767px){
	#index-intro-title{
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}
}
#index-intro-text{
    color: var(--common-article-title-color1);
    letter-spacing: var(--common-letter-spacing-title);
    text-align: start;
	font-weight: 900;
	font-family: var(--common-title-font);
    font-size: max(1rem, 1.2vw);
	line-height: 2.5em;
    text-shadow: #ffffff 0px 0px 5px, #ffffff 0px 0px 5px;
    margin-bottom: clamp(3rem, 7vw, 8rem) !important;
}
#index-point{
	margin-bottom: calc(var(--common-margin-width) * 2);
}

.index-point-title-wrapper .article-title-col {
	margin-top: clamp(4rem, 9vw, 10rem);
	margin-bottom: clamp(3.5rem, 5vw, 7rem);
}
.index-point-picture {
    overflow: hidden;
	height: 100%;
	border-top-right-radius:  0.5rem;
	border-bottom-right-radius:  0.5rem;
}
.point-2 .point-picture-col .index-point-picture {
	height: 100%;
	border-top-right-radius:  0;
	border-bottom-right-radius:  0;
	border-top-left-radius:  0.5rem;
	border-bottom-left-radius:  0.5rem;
}

.index-point-title {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    letter-spacing: var(--common-letter-spacing-title);
	font-family: var(--common-title-font);
	font-size: max(1.1rem, 1.5vw);
	font-weight: 900;
    line-height: 1.6em;
	margin-left: 1rem;
}
.index-point-title .numbering {
	color: #00813d;
	margin-top: 2.5em;
	margin-bottom: 0.5em;
}
.index-point-title .numbering .num {
    font-size: 1.5em;
}
.index-point-title .point{
	margin-bottom: 0.5em;
}
.index-point-text {
	width: 70%;
}
@media(max-width: 991px){
	.index-point-text {
		width: 90%;
        padding-top: 2rem;
	}
}
@media(max-width: 767px){
	.index-point-text {
		width: 95%;
	}
	.index-point-picture {
		border-radius:  0.5rem !important;
		margin: 0 0.5rem;
	}
	.index-point-title .numbering {
		margin-top: 1.5em;
	}
}
.index-point-text .contents {
	font-size: max(0.9rem, 1vw);
    letter-spacing: var(--common-letter-spacing-title);
    line-height: 1.5em;
	margin-left: 1rem;
    margin-bottom: 0;
}
.point-text-col{
    display: flex;
    align-items: flex-end;
	padding-left: 1.5rem !important;
}
.point-2 .point-text-col{
	display: flex;
    align-items: flex-end;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
	justify-content: flex-end;
}
@media(max-width: 767px){
	.index-point-text {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        padding-top: 0rem;
	}
}

.index-point-section-content {
	position: relative;
}

.index-point-section-content .point-background-col {
    background-color: #e1f1e6;
    height: 100%;
    width: 90%;
    position: absolute;
    top: 15%;
    z-index: -10;
	border-top-right-radius:  0.5rem;
	border-bottom-right-radius:  0.5rem;
}

.point-2 .point-background-col {
    background-color: #e1f1e6;
    height: 100%;
    width: 90%;
    position: absolute;
    top: 15%;
	right: 0;
    z-index: -10;
	border-top-left-radius:  0.5rem;
	border-bottom-left-radius:  0.5rem;
}
@media(max-width: 991px){
	.index-point-section-content .point-background-col {
		width: 98%;
		top: 8%;
		height: 110%;
	}
}
@media(max-width: 767px){
	.index-point-section-content .point-background-col {
        width: 100%;
        top: 8%;
        height: 100%;
        border-radius: 0;
	}
}

.index-point-section-content{
	margin-top: 10rem;
}
@media(max-width: 767px){
	.index-point-section-content{
		margin-top: 4rem;
	}
}

.btn-index-room-guide,
.btn-index-facility {
    display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.btn-index-room-guide,
.btn-index-facility {
    color: #ffffff !important;
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	text-align: center;
	vertical-align: baseline;
	letter-spacing: var(--button-letter-spacing);
    width: 13em;
	padding: 0;
	height: fit-content;
	border-radius: 0.5em;
	pointer-events: none;
}

/*	normal	*/
.btn-index-room-guide:hover,
.btn-index-room-guide:focus,
.btn-index-room-guide:active,
.btn-index-facility:hover,
.btn-index-facility:focus,
.btn-index-facility:active{
	box-shadow: none;
}

.btn-index-room-guide .href-txt,
.btn-index-facility .href-txt{
    padding: 0 1.5em 0 .8em;
	border: 2px solid #ffffff;
	border-radius: 0.5em;
	display: block;
    width: 13em;
	position: relative;
    line-height: 3em;
	pointer-events: auto;
}
.btn-index-room-guide .href-txt:after,
.btn-index-facility .href-txt:after{
	content: '\f054';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	right: 30px;
	top: 0;
}
.btn-index-room-guide::before,
.btn-index-facility::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #00813d;
  border-radius: 0.5em;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

@media screen and (max-width: 1000px) {
	.btn-index-room-guide:active::before,
	.btn-index-facility:active::before {
	  transform: scaleX(1);
	  transform-origin: left;
	  border-radius: 0.5em;
	}
	.btn-index-facility:active + .index-facility-col-background,
	.btn-index-room-guide:active + .index-facility-col-background{
		transform: scale(1.02);
		transition: all 0.2s ease-out;
	}
}
/* PCの時は:hover */
@media screen and (min-width: 1001px) {
	.btn-index-room-guide:hover::before,
	.btn-index-facility:hover::before {
	  transform: scaleX(1);
	  transform-origin: left;
	  border-radius: 0.5em;
	}
	.btn-index-facility:hover + .index-facility-col-background,
	.btn-index-room-guide:hover + .index-facility-col-background{
		transform: scale(1.02);
		transition: all 0.3s ease-out;
	}
}
.index-guide-button-wrapper {
	width: fit-content;
	max-width: 80%;
}
.guide-buttons-title{
    color: #ffffff;
    font-size: max(1.8rem, 2.1vw);
    letter-spacing: var(--common-letter-spacing-wide);
    text-align: start;
    font-weight: 900;
    font-family: var(--common-title-font);
	margin-bottom: 0.5em;
	width: fit-content
}
.guide-buttons-text{
    color: #ffffff;
    font-size: max(1rem, 1vw);
    letter-spacing: var(--common-letter-spacing);
	text-shadow: #777777 1px 0 10px;
    text-align: start;
	margin-bottom: 2rem;
	width: 100%;
}




/* ::::: [SECTION: MAIN] ::::: */

/* Setting
--------- --------- --------- ------- */
#index-point-title,
#index-point-short-title,
#index-point-line-1,
#index-point-line-2,
#index-point-line-3,
#index-point-1-picture,
#index-point-1-title,
#index-point-1-text,
#index-point-2-picture,
#index-point-2-title,
#index-point-2-text,
#index-point-3-picture,
#index-point-3-title,
#index-point-3-text,
#index-inside-our-facility-title,
#index-topics-article,
#index-topics-article-list,
#index-facility-line-1,
#index-facility-line-2,
#index-facility-line-3 {
	filter: opacity(0);
	transition: all 0.8s;
	will-change: opacity;
}


#index-intro-title,
#index-intro-text,
#index-guide-button-facility,
#index-guide-button-room{
	opacity: 0;
}

#exterior-title,
#exterior-line-1,
#exterior-line-2,
#exterior-line-3,
#inside-title,
#inside-line-1,
#inside-line-2,
#inside-line-3{
	opacity: 1;
}