/* =========================
REINA HOSHI LP
========================= */
html {
    scroll-behavior: smooth;
}
#reinahoshi{
	margin:0 auto;
	overflow:hidden;
	width: 100vw;
    margin-left: calc(50% - 50vw);
}

#reinahoshi img{
	width:100%;
	height:auto;
	display:block;
}

#reinahoshi a{
	display:inline-block;
	text-decoration:none;
}

#reinahoshi ul{
	margin:0;
	padding:0;
	list-style:none;
}

/* =========================
Loading
========================= */

#loadingLP{
	position:fixed;
	inset:0;
	background:#fff;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:opacity .8s ease;
}
#loadingLP.hide{
	opacity:0;
	pointer-events:none;
}
.loader{
	width:80px;
	height:80px;
	position:relative;
}

.loader::before{
	content:"";

	position:absolute;
	inset:0;

	border-radius:50%;

	border:1px solid rgba(96,81,81,.15);
}

.loader::after{
	content:"";

	position:absolute;
	inset:0;

	border-radius:50%;

	border-top:1px solid #605151;

	animation:spin 1.2s linear infinite;
}

@keyframes spin{
	to{
		transform:rotate(360deg);
	}
}

/* =========================
Page Fade
========================= */

#reinahoshi{
	opacity:0;
	filter:blur(12px);
	transition:
		opacity 1.4s ease,
		filter 1.4s ease;
}

.loaded #reinahoshi{
	opacity:1;
	filter:blur(0);
}

/* =========================
TOP
========================= */

#topvisual{
	position:relative;
}
#topvisual .topvisual_main {
	background: url(https://5-fifth.com/user_data_sp/pi/img/20260610_reinahoshi/bg.webp) center center / cover no-repeat;
    display: grid;
    justify-content: center;
    position: relative;
    padding: 30px 0;
}
#topvisual .top-ttl{
	position: absolute;
    background: #fff;
    color: #605151;
    text-align: center;	
	opacity:0;
	filter:blur(40px);
	transform:translateY(100px);
	transition:2.5s cubic-bezier(.19,1,.22,1);
	padding: 30px 50px;
    bottom: 30px;
    left: calc(50vw - 390px);
}

#topvisual .top-ttl.show{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
}
.loaded .top-ttl{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
	transition-delay:.5s;
}
.top-ttl .top-ttl_season {
	font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
    display: block;
}
.top-ttl .top-ttl_name {
	font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
}
#top-movie{
	width: 360px;
    display: block;
}

/* =========================
Caption
========================= */

.caption .text_jp,
.caption .text_en{
	opacity:0;
	filter:blur(15px);
	transform:translateY(30px);
	transition:1.5s ease;
}

.caption .show{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
}

#topvisual .caption {
    text-align: center;
    padding: 5em 0;
	font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 36px;
	color: #605151;
}
.caption .text_jp {
	font-family: "Noto Serif JP", serif;
}
.caption .text_en {
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	padding: 2em 0 0 0;
}

/* =========================
TITLE
========================= */

.sub_ttl{
	font-family: "Cormorant Garamond", serif;
    font-size: 56px;
    font-weight: 300;
    text-align: center;
    letter-spacing: .1em;
    margin: 80px 0 20px;
    color: #605151;
    font-style: italic;
}
.item_ttl{
	font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    font-weight: 600;
    color: #605151;
    display: grid;
    justify-content: center;
    grid-template-columns: 2em 1em;
    align-items: start;
}
.ttl_no{
	font-family: "Noto Serif JP", serif;
    font-weight: 600;
    margin-top: -3px;
}

/* =========================
SPLIDE
========================= */

.slider-section{
	width: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(201, 202, 197, 1) 40%, rgba(255, 255, 255, 1) 100%);
    padding: 0 0 80px 0;
}

#auto-scroll-slider{
	max-width:1200px;
	margin:0 auto;
	overflow:visible;
}

.splide__slide{
	padding:0 10px;
	box-sizing:border-box;
	overflow:hidden;
	border-radius:10px;
}

.splide__slide img{
	transition:
		transform .8s ease,
		filter .8s ease;
}

.splide__slide a:hover img{
	transform:scale(1.02);
}

/* =========================
ITEM
========================= */

.itemBox{
	position:relative;
	padding:120px 0;
}

.item_img_temp1,
.item_img_temp2{
	width:1024px;
	max-width:100%;
	margin:0 auto;
	padding: 0 40px;
	display: grid;
	gap: 60px;
}

.itemlist01,
.itemlist02,
.itemlist03,
.itemlist04,
#profile img{
	opacity:0;
	filter:blur(25px);
	will-change:
		transform,
		filter,
		opacity;
}

/* =========================
item01
========================= */

.itemlist01{

	transform:scale(1.05);

	transition:
		opacity 1.5s ease,
		filter 1.5s ease,
		transform 1.5s ease;
}

.itemlist01.item-active{

	opacity:1;

	filter:blur(0);

	transform:scale(1);
}

/* =========================
item02
========================= */

.itemlist02{

	transform:translateY(-80px);

	transition:
		opacity 1.5s ease,
		filter 1.5s ease,
		transform 1.5s ease;
}

.itemlist02.item-active{

	opacity:1;

	filter:blur(0);

	transform:translateY(0);
}

/* =========================
item03
========================= */

.itemlist03{

	transform:translateY(80px);

	transition:
		opacity 1.5s ease,
		filter 1.5s ease,
		transform 1.5s ease;
}

.itemlist03.item-active{

	opacity:1;

	filter:blur(0);

	transform:translateY(0);
}

/* =========================
item04
========================= */

.itemlist04{

	transform:scale(1.05);

	transition:
		opacity 1.5s ease,
		filter 1.5s ease,
		transform 1.5s ease;
}

.itemlist04.item-active{

	opacity:1;

	filter:blur(0);

	transform:scale(1);
}

/* =========================
STYLE01 GRID
========================= */

#item01{
	position:relative;
	overflow:hidden;
}
.item_img_temp1 .area01 {
	display: grid;
    grid-template-columns: 30% 1fr;
    align-items: center;
}
.item_img_temp2 .area01 {
    display: grid;
    grid-template-columns: 1fr 30%;
    align-items: center;
}
	.item_img_temp2 .area01 .iteitemlist01 {
		order: 1;
	}
	.item_img_temp2 .area01 .item_ttl {
		order: 2;
	}
.item_img_temp1 .area02,
.item_img_temp2 .area02 {
	display: flex;
  	align-items: flex-start;
}
	.item_img_temp1 .area02 .itemlist02 {
		margin-right: -45px;
	}
	.item_img_temp1 .area02 .itemlist03 {
		margin-left: -45px;
		margin-top: 330px;
	}
	.item_img_temp2 .area02 .itemlist02 {
		margin-right: -45px;
		margin-top: 330px;
	}
	.item_img_temp2 .area02 .itemlist03 {
		margin-left: -45px;
	}
.item_img_temp1 .area03,
.item_img_temp2 .area03 {
	display: grid;
    width: 70%;
    margin: 0 auto;
    gap: 30px;
}

#item01 .itemlist_credit{
}

/* =========================
CREDIT
========================= */

.itemlist_credit{
	margin-top:30px;
}

.itemlist_name{
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.8;
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
}
.itemlist_name a {
	color: #5e5e5e;
}
.itemlist_name_point{
	font-size: 10px;
    margin-left: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    padding: 0 10px;
}
.itemlist_credit {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.itemlist_credit.item-active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
PROFILE
========================= */

#profile{
    margin: 160px auto 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(201, 202, 197, 1) 40%, rgba(255, 255, 255, 1) 100%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
#profile .profile_inner {
	width: 1024px;
	margin: 0 auto;
	padding: 0 40px;
}
.profile_img {
	width: 70%;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
	margin-bottom: 50px;
}
#profile img{
	transform:translateY(20px);
	transition:
		opacity 1.8s ease,
		filter 1.8s ease,
		transform 1.8s ease;
}

#profile img.item-active{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
}
.profile_info{
	width: 70%;
    margin: 0 auto 10%;
    text-align: left;
}
.profile_info h4{
    font-size: 24px;
    margin-bottom: 1em;
    font-family: "Noto Serif JP", serif;
    color: #605151;
    line-height: 36px;
    letter-spacing: 0.1em;
    font-weight: 600;
	text-align: center;
}
.profile_info .en{
	display: block;
    font-size: 16px;
    font-family: "Cormorant Garamond", serif;
    margin-top: -0.25em; 
}
.profile_info p{
	font-size: 14px;
    line-height: 2.3;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.03em;
	color: #605151;
}
.profile_sns{
	margin-top:30px;
}
.profile_sns a {
	font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    background: url(https://5-fifth.com/user_data_sp/pi/img/20260610_reinahoshi/Instagram.png) center left no-repeat;
    background-size: 20px 20px;
    padding-left: 30px;
}

/* =========================
Link Hover
========================= */

.itemlist_name a{

	position:relative;

	display:inline-block;
}

.itemlist_name a::after{

	content:"";

	position:absolute;

	left:0;
	bottom:-2px;

	width:100%;
	height:1px;

	background:#5e5e5e;

	transform:scaleX(0);

	transform-origin:left center;

	transition:transform .8s ease;
}

.itemlist_name a:hover::after{

	transform:scaleX(1);
}


/* SP */
@media screen and (max-width: 767px) {
  #reinahoshi {
    margin-left: inherit;
  }
  #auto-scroll-slider {
    padding: 0;
  }
  #topvisual .top-ttl {
	display: none;
  }
  #topvisual .caption {
	padding: 2em 0;
    font-size: 14px;
  }
  .caption .text_en {
	padding: 1em 0 0 0;
    font-size: 14px;
  }
  .sub_ttl {
	margin: 50px 0 20px;
	font-size: 36px;
  }
  .slider-section {
    padding: 0 0 40px 0;
  }
  .itemBox {
	padding: 50px 0 30px 0;
  }
  .item_img_temp1 .area03, .item_img_temp2 .area03 {
	gap: 1em;
  }
  .item_img_temp1, .item_img_temp2 {
    padding: 0;
  }
  .item_img_temp1 .area02 .itemlist03 {
	margin-top: 40%;
    margin-left: 5%;
  }
  .item_img_temp1 .area02 .itemlist02 {
    margin-right: -14%;
  }
  .item_img_temp2 .area02 .itemlist02 {
    margin-right: -14%;
    margin-top: 40%;
  }
  .item_img_temp2 .area02 .itemlist03 {
    margin-left: 5%;
  }
  .itemlist_name {
	font-size: 11px;
    padding: 0;
	font-weight: 300;
  }
  .itemlist_name_point {
	display: none;
  }
  #profile {
	margin-left: 0;
	margin: 100px auto 0;
  }
  #profile .profile_inner {
	width: 100%;
    padding: 0;
  }
  .profile_img {
	padding: 10px;
    margin-bottom: 2em;
  }
  .item_ttl {
	font-size: 20px;
  }
  .itemlist_credit {
    gap: 0.5em;
  }
  .profile_info {
	width: 80%;
  }
  .profile_info h4 {
	font-size: 18px;
  }
  .profile_info .en {
	line-height: 1em;
    font-size: 14px;
    margin: 0;
  }
  .profile_info p {
	font-size: 10px;
  }
}