@charset "utf-8";

/*------------------------------------------------------------
LP
------------------------------------------------------------*/
/*.scrollHeader #gHeader::before {
	background: rgba(255,255,255, 0);
}
.loadingLogo {
	position: absolute;
	left: 50%;
	top: 50%;
}*/
#mainContents {
	/*font-family: "yu-gothic-pr6n", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;*/
  font-family: "yu-gothic-pr6n", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt";
  font-optical-sizing: auto;
  font-weight: 500;/*Use a value from 100 to 900*/
  font-style: normal;
	padding-bottom: 0!important;
	font-size: 14px;
	font-weight: 500;
	color: #333333;
	letter-spacing: 1px;
	overflow: hidden;
	max-width: 2400px;
	margin: 0 auto;
}

#mainContents .num{
	font-family: roboto, sans-serif;
}

/*ヘッダーバナーを表示させる
---------------------*/
.header_banner_slider{
	z-index:10!important;
}

/*モーダル表示時に上に表示されるのを防ぐ
---------------------*/
.footer{
	z-index:1;
}

/*
@media screen and (max-width: 1200px) and (min-width: 768px) and (orientation: portrait) {
}*/

/*コンテンツ部分*/
/*#mainContents .mainBox {
  padding: 0px;
	position: relative;
	z-index: 2;
	overflow: hidden;
}*/


/*@media screen and (max-width: 1200px) and (min-width: 768px) and (orientation: portrait) {
}
*/

/*ページ表示時に全画面で動画を再生し、終了後フェードアウトさせる
------------------------------------------*/
/*#load_movie {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #ffcc00;
    z-index: 99999;
}*/



/*ページ表示時に全画面で動画を再生し、終了後フェードアウトさせる
------------------------------------------*/

/*動画表示を優先させるため、デフォルトの読み込みバーを非表示*/
#loading{
	display: none;
}


.loading_anm {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10000;
  background: #ffffff;
	width: 100vw;
  height: 100vh;
}
.loading_anm .anm_wrap{
	top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
	width: 214px;
	height: auto;
	position: relative;
	z-index: 998;
}
@media screen and (max-width: 767px) {
	.loading_anm .anm_wrap{
		width: calc(138/375 * 100vw);
		max-width: 214px;
	}
}

.loading_anm .anm_base{
	opacity: 0;
	width: 100%;
  animation: anm_base 0.5s linear;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;/*アニメーションの最後の状態を保持*/
	position: relative;
	z-index: 998;
}
.loading_anm .anm_2{
	opacity: 0;
	width: calc(42/214 * 100%);
  animation: anm_down 0.5s linear;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;/*アニメーションの最後の状態を保持*/
	position: absolute;
	top: calc(41/151 * 100%);
	left: calc(48/214 * 100%);
	z-index: 999;
}
.loading_anm .anm_5{
	opacity: 0;
	width: calc(40/214 * 100%);
  animation: anm_up 0.5s linear;
	animation-delay: 1.2s;
	animation-fill-mode: forwards;/*アニメーションの最後の状態を保持*/
	position: absolute;
	top: calc(40/151 * 100%);
	left: calc(92/214 * 100%);
	z-index: 999;
}
.loading_anm .anm_th{
	opacity: 0;
	width: calc(42/214 * 100%);
  animation: anm_down 0.5s linear;
	animation-delay: 1.9s;
	animation-fill-mode: forwards;/*アニメーションの最後の状態を保持*/
	position: absolute;
	top: calc(49/151 * 100%);
	left: calc(129/214 * 100%);
	z-index: 999;
}
.loading_anm .anm_anniv{
	opacity: 0;
	width: calc(188/214 * 100%);
  animation: anm_fade 0.5s linear;
	animation-delay: 2.6s;
	animation-fill-mode: forwards;/*アニメーションの最後の状態を保持*/
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 999;
}

@keyframes anm_base{
0%   {transform: scale(1.2) rotate(0) translate3d(0,0,0); opacity: 0;}
100% {transform: scale(1) rotate(0) translate3d(0,0,0); opacity: 1;}
}
@keyframes anm_down{
0%{opacity:0;transform:translate3d(0,-10px,0)}
100%{opacity:1;transform:none}
}
@keyframes anm_up{
0%{opacity:0;transform:translate3d(0,10px,0)}
100%{opacity:1;transform:none}
}

@keyframes anm_fade{
0%{opacity:0;}
100%{opacity:1;}
}
























/*! pc & tb 
------------------------------------------*/
/* スクリーンサイズが768px以上の場合に適用 */
@media screen and (min-width: 768px) {


	/*all
---------------------*/
.spView {
	display: none;
}

#mainContents img{
	width: 100%;
}
#mainContents a{
	cursor: pointer;
	opacity: 1;
}

/*LPテンプレート調整
---------------------*/
.footer{
	z-index: 9999;
}
.bottom-section.active{
	background-color: #ffffff;
}




/*section
---------------------*/
.sec{
/*	max-width: 1600px;*/
	margin: 0 auto;
	padding: 0;
	color: #333333;
	/*background-color: #f4f4f4;*/
	background-image: url("/photo/page/nojess/20250808/img/main_bg.jpg");
	background-size: cover;
	background-attachment: fixed;/*背景画像の固定*/
}
.sec_inner{
	width: calc(100% - 180px);/*両端の縦線にかぶらないようにする*/
	/*width: 90%;*/
	/*max-width: 1284px;*/
	margin: 0 auto;
	padding: 0;
}


/*メイン
-----------------*/
.main_wrap{
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2,1fr);
	width: 100%;
/*	margin-bottom: 200px;*/
}
.main_box_txt{
	background-color: #b32a2c;
	position: relative;
}
.main_box_txt:before {
	content: "";
	display: block;
	padding-top: 112.571%;/* sec2_innerの高さ788px÷横幅700px×100*/
}
.main_ttl{
	width: calc(383/700 * 100%);
	position: absolute;
	top: calc(85/788 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
}
.main_season{
	width: calc(230/700 * 100%);
	position: absolute;
	bottom: calc(136/788 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
}
.main_frame{
	width: calc(502/700 * 100%);
	position: absolute;
	bottom: calc(55/788 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
}
.main_ttl img, .main_season img, .main_frame img{
	width: 100%;
}

/*story カード
---------------------*/
.story_wrap{
	position: relative;
	padding-top: 160px;
	background-color: #f4f4f4;
}

.story_box{
/*	opacity: 0;*/
	width: 100%;
  border-radius: 20px;
	background: url("/photo/page/nojess/20250808/img/story_bg.jpg");
	background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
	position: relative;
	z-index: 999;
}

.story_box::before{
  content: "";
  display: block;
	position: absolute;
  left: calc(30/1160*100%);
  top: 40px;
  width: calc(550/1160 * 100% - 64px);/*中央に入れるタイトルの横幅108px÷2＝54px＋余白10px*/
	height: 60px;
  background: url("/photo/page/nojess/20250808/img/story_bg_left.svg");
  background-size: 668px 9px;/*実際のサイズ*/
	background-position: 0 0;
  background-repeat: no-repeat;
  z-index: -99999;
}
.box_bg{
	position: relative;
}
.box_bg::before{
  content: "";
  display: block;
	position: absolute;
  right: calc(30/1160* 100%);
  top: 40px;
  width: calc(550/1160 * 100% - 64px);/*中央に入れるタイトルの横幅108px÷2＝54px＋余白10px*/
	height: 60px;
  background: url("/photo/page/nojess/20250808/img/story_bg_right.svg");
  background-size: 657px 9px;
	background-position: 100% 0;
  background-repeat: no-repeat;
  z-index: -99999;
}
.story_ttl{
	position: absolute;
	top: 22px;
  right: 0;
  left: 0;
  margin: 0 auto;
	width: 108px;
}
.story_ttl img{
	width: 100%;
}
.story_txt{
	width: 90%;
	margin: 0 auto;
	max-width: 750px;
	padding-top: 500px;
	color: #ffffff;
	line-height: 2;
	padding-bottom: 35px;
	font-size: 14px;
	text-align: center;
}
/* 画面サイズが768px以上、960px以上の設定 */
@media screen and (min-width: 960px){
  .story_txt .tbView {
    display: none;
  }
}


/*Line up
---------------------*/
.lineup_wrap{
	margin: 0 auto;
	padding: 170px 0 120px;
	background-color: #f4f4f4;
}

.lineup_ttl{
	width: 112px;
	margin: 0 auto 50px;
}

/*画像の切り替わり*/
.lineup-image-container {
  position: relative;
  width: 100%; /* 適宜調整 */
  height:100%; /* 適宜調整 */
	aspect-ratio: 1 / 1;
  overflow: hidden;
	border-radius: 50%;
}
.lineup-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がContainerに収まるように */
  opacity: 0; /* 初期状態は非表示 */
  transition: opacity 0s; /* フェードなし */
}
.lineup-image-container img.lineup-active {
  opacity: 1;
}


.lineup_menu{
	width: 80%;
	max-width: 790px;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	padding: 0;
}
.menu_box{
	width: calc(230/790 * 100%);
}
.menu_box a{
	display: block;
}
.menu_txt{
	width: calc(128/230 * 100%);
	margin: 0 auto;
	padding: 20px 0 15px;
}
.menu_arrow_wrap {
	text-align: center;
	margin: 0 auto;
}
.menu_arrow {
  position: relative;
  display: inline-block;
  width: 15.1px;
  height: 8.1px;
}

.menu_arrow::before,
.menu_arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 11px;/*辺の長さ*/
  border-radius: 9999px;
  background-color: #b12426;
	background-color: #B32A2C;
  transform-origin: 50% calc(100% - 0.5px);
}
.menu_arrow::before {
  transform: rotate(45deg);
}
.menu_arrow::after {
  transform: rotate(-45deg);
}


/*アイテム画像一覧
-----------------*/
.sec_items_wrap{
	width: 80%;
	max-width: 1054px;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	padding: 0;
}
.itemimg_box{
	width: calc(50% - 7px);
	margin-bottom: 14px;
}
.item_main_txt{
	margin: 0 auto;
	padding: 50px 0 110px;
	text-align: center;
	color: #FFFFFF;
	line-height: 2;
}
.sec_main_txt{
	margin: 0 auto;
	padding: 50px 0 120px;
	text-align: center;
	color: #FFFFFF;
	line-height: 2;
	font-size: 14px;
}



/*Limited Edition
---------------------*/
.limited_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 215px 0 140px;
}

.limited_main{
	width: 48%;
	max-width: 650px;
	/*width: calc(100% - 180px);*//*両端の縦線にかぶらないようにする*/
	/*width: 90%;*/
	/*max-width: 1284px;*/
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.limited_main:before {
	content: "";
	display: block;
	padding-top: 125.39%;/* limited_mainの高さ785px÷横幅626px×100*/
}
.limited_main_img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.limited_ttl{
	position: absolute;
	width: calc(874/626 * 100%);
	top: calc(-72/785 * 100%);
  left: 50%;
  transform: translateX(-50%);
	z-index: 101;
}
.limited_frame_left{
	position: absolute;
	width: calc(440/626 * 100%);
	top: calc(270/785 * 100%);
	left: calc(-320/626 * 100%);
	margin: 0 auto;
}
.limited_frame_right{
	position: absolute;
	width: calc(440/626 * 100%);
	top: calc(270/785 * 100%);
	right: calc(-320/626 * 100%);
	margin: 0 auto;
}
.limited_wrap .sec_main_txt{
		padding-bottom: 50px;
	}

.limited_btn {
	width: 80%;
	max-width: 840px;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	padding: 0 0 120px;

}
.limited_btn a{
	display: block;
	margin: 0 auto;
	width: calc(376/840 *100%);
	margin: 0 auto 0;
	/*font-family: "Forum", serif;*/
	font-weight: 400;
	/*font-style: normal;*/
	color: #ffffff;
	text-align: center;
	line-height: 62px;
	letter-spacing:1.5px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 5px;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_white.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	border: 1px solid #ffffff;
}
.limited_btn .btn_box:hover{
	text-align: center;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_red.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	background-color: #ffffff;
	color: #b32a2c;
	opacity: 1!important;
}


/*video
---------------------*/
.video_wrap{
	padding: 160px 0;
	
}

/*動画：再生ボタンのみ表示*/
.video_box {
  position: relative;
	width: calc(100% - 180px);
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}
.video_box:after {
	content: "";
	display: block;
	padding-top: 56.3%;/* video_boxの高さ563px÷横幅1000px×100*/
}
.video_box video {
	width: 102%;/*	上下左右に出る線をはみ出させる;*/
	aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	filter: drop-shadow(0px 0px rgba(0,0,0,0));
	outline: none;
	border: none;
}
video#self_play {
/*	width: 100%;
  display: block;
  margin: 0 auto;
	border-radius: 245px;*/
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; /* Optional: マウスカーソルをポインターに変更 */
	width: 120px;
}



/*Pocket Ring
---------------------*/
.pocket_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 215px 0 120px;
}

.pocket_main{
	width: 58%;
	max-width: 800px;
	/*width: calc(100% - 180px);*//*両端の縦線にかぶらないようにする*/
	/*width: 90%;*/
	/*max-width: 1284px;*/
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.pocket_main:before {
	content: "";
	display: block;
	padding-top: 80.0%;/* pocket_mainの高さ1144px÷横幅1430px×100*/
}
.pocket_main_img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.pocket_ttl{
	position: absolute;
	width: calc(656/782 * 100%);
	top: calc(-74/625 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 101;
}
.pocket_frame_left{
	position: absolute;
	width: calc(287/782 * 100%);
	top: calc(246/625 * 100%);
	left: calc(-244/782 * 100%);
	margin: 0 auto;
}
.pocket_frame_right{
	position: absolute;
	width: calc(287/782 * 100%);
	top: calc(246/625 * 100%);
	right: calc(-244/782 * 100%);
	margin: 0 auto;
}



/*Love the feeling
---------------------*/
.love_bg_wrap{
	width: 100%;
	height: 55px;
	background: url("/photo/page/nojess/20250808/img/bg_love.jpg");
	background-position: center;
  background-size: 278px 55px;
  background-repeat: repeat-x;
}



/*interval
---------------------*/
.interval_wrap{
	width: 100%;
	padding: 100px 0;
	margin: 0 auto;
	background-color: #f4f4f4;
}
.interval_inner{
	width: 61%;
	max-width: 840px;
	/*width: calc(100% - 180px);*//*両端の縦線にかぶらないようにする*/
	/*width: 90%;*/
	/*max-width: 1284px;*/
	margin: 0 auto;
	position: relative;
}
.interval_inner:before {
	content: "";
	display: block;
	padding-top: 88.80%;/* 画像2枚の最大高さ746px÷最大横幅840px×100*/
}
.interval_box1{
	width: calc(498/840*100%);
	height: auto;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 99;
}
.interval_box2{
	width: calc(840/840*100%);
	height: auto;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 98;
}


/*Silver Cake
---------------------*/
.silver_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 215px 0 120px;
}

.silver_main{
	width: 58%;
	max-width: 800px;
	/*width: calc(100% - 180px);*//*両端の縦線にかぶらないようにする*/
	/*width: 90%;*/
	/*max-width: 1284px;*/
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.silver_main:before {
	content: "";
	display: block;
	padding-top: 80.0%;/* silver_mainの高さ1144px÷横幅1430px×100*/
}
.silver_main_img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.silver_ttl{
	position: absolute;
	width: calc(334/782 * 100%);
	top: calc(-80/625 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 101;
}
.silver_frame_left{
	position: absolute;
	width: calc(287/782 * 100%);
	top: calc(246/625 * 100%);
	left: calc(-244/782 * 100%);
	margin: 0 auto;
}
.silver_frame_right{
	position: absolute;
	width: calc(287/782 * 100%);
	top: calc(246/625 * 100%);
	right: calc(-244/782 * 100%);
	margin: 0 auto;
}


/*last
---------------------*/
.last_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 0 0 120px;
}

.last_logo{
	width: 215px;
	margin: 0 auto;
	padding: 0 0 50px;
}

.last_btn {
	width: 80%;
	max-width: 840px;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	padding: 0;

}
.last_btn a{
	display: block;
	margin: 0 auto;
	width: calc(368/770 *100%);
	margin: 0 auto 0;
	/*font-family: "Forum", serif;*/
	font-weight: 400;
	/*font-style: normal;*/
	color: #ffffff;
	text-align: center;
	line-height: 62px;
	letter-spacing:1.5px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 5px;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_white.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	border: 1px solid #ffffff;
}
.last_btn .btn_box:hover{
	text-align: center;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_red.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	background-color: #ffffff;
	color: #b32a2c;
	opacity: 1!important;
}


/*最後の画像
---------------------*/
.footerimg_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #ffffff;
}

.footerimg_box{
	width: 100%;
	max-width: 2000px;
	margin: 0 auto;
}







/*「＋」ボタン
-----------------*/
.plusBtn a{
	width: 63px;
	height: 63px;
	line-height:63px;
	border-radius: 50%;
	display: block;
	color: rgba(255,255,255,0.8);
	background-color: #988666;
	font-family: "deuterium-variable", sans-serif;
	font-variation-settings: "wght" 100;
	font-size: 25px;
	font-weight: 100;
	cursor: pointer;
	text-align: center;
	position: absolute;
	bottom: calc(22/648 * 100%);
	right: calc(22/518 * 100%);
}

/*ボタンの背景色＆フォントカラー個別設定
-----------------*/
.plusBtn a:hover{
	background-color: #ffffff;
	color: #aa9a77;
	animation: btnAnime 1.5s linear;
}
@keyframes btnAnime{
  0%{ opacity: 0.25}
 50%{ opacity: 1.0;}
100%{ opacity: 0.25;}
}

.main_img_inner{
	position: relative;
}
.itemimg_box{
	position: relative;
}
.plusBtn-lim a{
	position: absolute;
	bottom: calc(30/782 * 100%);
	right: calc(30/624 * 100%);
	z-index: 99;
}
.plusBtn-main a{
	position: absolute;
	bottom: calc(30/572 * 100%);
	right: calc(30/715 * 100%);
	z-index: 99;
}





}/*! //pc & tb */



















































/*! sp 
------------------------------------------*/
@media screen and (max-width: 767px) {
  .pcView {
    display: none;
  }
	.tbView {
    display: none;
  }
/*sp all
---------------------*/
	.bottom-section{
		background-color: #ffffff;
	}
	body {
  min-width: inherit;
  }

	#mainContents {
		overflow: hidden;
	}
	#mainContents a:hover {
		opacity: 1 !important;
	}

/*	.mainBox{
		padding-top: 0 !important;
	}*/



	/*端末が横長の場合*/
@media (orientation: landscape){

}

/*スクロール時にページ最下部の背景画像が見切れるのを防ぐ JSにも指定 start*/
/*.removeBg:before{
	height: 0vh!important;
}
.removeBg img{
	width: 0vw!important;
  height: 0vh!important;
}*/
#gFooter{
	z-index: 100;
}
/*スクロール時にページ最下部の背景画像が見切れるのを防ぐ JSにも指定 end*/


.footer{
	z-index: 9999;
}
/*.bottom-section.active{
	background-color: #ffffff;
}*/



/*sp section
---------------------*/
#mainContents{
	position: relative;
  overflow: hidden; /* overflow: hidden;を追加 */
}
.background-image{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background-image: url("/photo/page/nojess/20250808/img/main_bg_sp.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1; /* コンテンツの下に配置 */
  clip-path: inset(0); /* 全画面表示 */
}
.sec{
	margin: 0 auto;
	padding: 0;
	color: #333333;
  position: relative; /* z-indexを有効にするため */
  z-index: 1; /* background-imageより上に配置 */
/*	background-image: url("/photo/page/nojess/20250808/img/main_bg_sp.jpg");
	background-size:cover;
	background-attachment: fixed;
	background-position: center;*/
}

	
.sec_inner{
	margin: 0 auto;
	padding: 0;
}


/*sp メイン
-----------------*/
.main_wrap{
	position: relative;
}

.main_ttl{
	display: block;
	width: calc(444/750 * 100%);
	position: absolute;
	bottom: calc(215/1334 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 999;
}
.main_ttl img{
	display: block;
	width: 100%;
}
.main_season{
	width: calc(334/750 * 100%);
	position: absolute;
	bottom: calc(134/1334 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 999;
}
.main_frame{
	width: calc(680/750 * 100vw);
/*	height: calc(72/750 * 100vw);*/
	position: absolute;
	bottom: calc(35/1334 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 999;
}


/*sp トップ画面のあしらいアニメーション
------------------------------------------*/
.top-image-container {
	width: calc(680/750 * 100vw);
	height: calc(72/750 * 100vw);
  position: relative;
  overflow: hidden;
	margin: 0 auto;
}

.top-image-container div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	z-index: 999;
 /* backface-visibility: hidden;*/ /* 裏面を非表示 */
}

.top-image .frame1{
}
.top-image.frame-active .frame1{
	animation: active1 1.5s ease-out forwards;
	animation-delay: 4.3s;
}
@keyframes active1 {
  0% {transform: rotate3d(0,1,0,0deg); opacity: 1;}
	70% {transform: rotate3d(0,1,0,0deg); opacity: 1;}
  100% {transform: rotate3d(0,1,0,90deg); opacity: 0;}
}

.top-image .frame2{
	opacity: 0;
}
.top-image.frame-active .frame2{
	animation: active2 1.5s ease-out forwards;
	animation-fill-mode: forwards;
	animation-delay: 4.8s;
}
@keyframes active2 {
  0% {transform: rotate3d(0,1,0,90deg); opacity: 0;}
	30% {transform: rotate3d(0,1,0,90deg); opacity: 0;}
  100% {transform: rotate3d(0,1,0,0deg); opacity: 1;}
}




/*sp story カード
---------------------*/
.story_wrap{
	padding-top: 32vw;
	background-color: #f4f4f4;
}
.story_box{
	width: calc(670/750 *100vw);
	height: 177vw;
	margin: 0 auto;
  border-radius: 3.33vw;
	background: url("/photo/page/nojess/20250808/img/story_bg_sp.jpg");
	background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
	position: relative;
}

.story_ttl{
	position: absolute;
  width: calc(173/680 * 100%);
	top: 4.67vw;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.story_bg_left{
	position: absolute;
	left: calc(32/680 * 100%);
  top: 6.9vw;
  width: calc(100/680 * 100%);
	z-index: 999;
}
.story_bg_right{
	position: absolute;
	right: calc(32/680 * 100%);
  top: 6.9vw;
  width: calc(144/680 * 100%);
	z-index: 999;
}
.story_ttl img, .story_bg_left img, .story_bg_right img{
	width: 100%;
}
.story_txt{
	width: calc(670/680 * 100%);
	margin: 0 auto;
	padding-top: 115vw;
	color: #ffffff;
	line-height: 2;
	font-size: 14px;
	font-size: 3.6vw;
	text-align: center;
	letter-spacing: -0.15vw;
}


/*sp Line up
---------------------*/
.lineup_wrap{
	margin: 0 auto;
	padding: 35vw 0 22vw;
	background-color: #f4f4f4;
}

.lineup_ttl{
	width: calc(228/750 * 100vw);
	margin: 0 auto 8vw;
}

/*画像の切り替わり*/
.lineup-image-container {
  position: relative;
  width: 100%; /* 適宜調整 */
  height:100%; /* 適宜調整 */
	aspect-ratio: 1 / 1;
  overflow: hidden;
	border-radius: 50%;
}
.lineup-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がContainerに収まるように */
  opacity: 0; /* 初期状態は非表示 */
  transition: opacity 0s; /* フェードなし */
}
.lineup-image-container img.lineup-active {
  opacity: 1;
}


.lineup_menu{
	width: calc(696/750 * 100vw);
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	padding: 0;
}
.menu_box{
	width: calc(232/750 * 100vw);
	padding: 0 calc(12/750 * 100vw) 10vw;
}
.menu_box a{
	display: block;
}
.menu_txt{
	width: calc(131/232 * 100%);
	margin: 0 auto;
	padding: 3.5vw 0 4vw;
}
.menu_arrow_wrap {
	text-align: center;
	margin: 0 auto;
	line-height: 1;
}
.menu_arrow {
  position: relative;
  display: inline-block;
  width: 15.1px;
  height: 8.1px;
}

.menu_arrow::before,
.menu_arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 11px;/*辺の長さ*/
  border-radius: 9999px;
  background-color: #b12426;
	background-color: #B32A2C;
  transform-origin: 50% calc(100% - 0.5px);
}
.menu_arrow::before {
  transform: rotate(45deg);
}
.menu_arrow::after {
  transform: rotate(-45deg);
}


/*sp Limited Edition
---------------------*/
.limited_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 41.2vw 0 12vw;
}

.limited_main{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.limited_main:before {
	content: "";
	display: block;
	padding-top: 125.33%;/* limited_mainの高さ940px÷横幅750px×100*/
}
.limited_main_img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.limited_ttl{
	position: absolute;
	width: calc(348/750 * 100vw);
	top: calc(-166/940 * 100vw);
  left: 50%;
  transform: translateX(-50%);
	z-index: 101;
}
.limited_frame_left{
	position: absolute;
	width: calc(210/750 * 100vw);
	top: calc(-151/750 * 100vw);
	left: calc(20/750 * 100vw);
	margin: 0 auto;
}
.limited_frame_right{
	position: absolute;
	width: calc(210/750 * 100vw);
	top: calc(-151/750 * 100vw);
	right: calc(20/750 * 100vw);
	margin: 0 auto;
}
.limited_wrap .sec_main_txt{
	padding-bottom: calc(90/750 * 100vw);
}
.limited_btn {
	width: 80%;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	padding: 0 0 24vw;

}
.limited_btn a{
	display: block;
	margin: 0 auto 4vw;
	width: calc(626/750 *100vw);
	/*font-family: "Forum", serif;*/
	font-weight: 400;
	/*font-style: normal;*/
	color: #ffffff;
	text-align: center;
	line-height: 62px;
	letter-spacing:1.5px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 5px;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_white.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	border: 1px solid #ffffff;
}
.limited_btn .btn_box:hover{
	text-align: center;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_red.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	background-color: #ffffff;
	color: #b32a2c;
	opacity: 1!important;
}




/*sp 「＋」ボタン
-----------------*/
.plusBtn a{
	width: calc(82/750 * 100vw);
	height: calc(82/750 * 100vw);
	line-height:calc(82/750 * 100vw);
	border-radius: 50%;
	display: block;
	color: rgba(255,255,255,0.8);
	background-color: #988666;
	font-family: "deuterium-variable", sans-serif;
	font-variation-settings: "wght" 100;
	font-size: 4.5vw;
	font-weight: 100;
	cursor: pointer;
	text-align: center;
	position: absolute;
	bottom: calc(32/628 * 100%);
	right: calc(32/785 * 100%);
}

/*ボタンの背景色＆フォントカラー個別設定
-----------------*/
.plusBtn a:hover{
	background-color: #ffffff;
	color: #aa9a77;
	animation: btnAnime 1.5s linear;
}
@keyframes btnAnime{
  0%{ opacity: 0.25}
 50%{ opacity: 1.0;}
100%{ opacity: 0.25;}
}

.main_img_inner{
	position: relative;
}
.itemimg_box{
	position: relative;
}
.plusBtn-lim a{
	position: absolute;
	bottom: calc(32/750 * 100%);
	right: calc(32/940 * 100%);
	z-index: 99;
}
.plusBtn-main a{
	position: absolute;
	bottom: calc(32/750 * 100%);
	right: calc(32/940 * 100%);
	z-index: 99;
}


/*sp アイテム画像一覧
-----------------*/
.sec_items_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.itemimg_box{
	width: calc(628/750 * 100vw);
	margin-bottom: calc(32/750 * 100vw);
}
/*.pocket_wrap .itemimg_box, .silver_wrap .itemimg_box{
	margin-bottom: calc(80/750 * 100vw);
}*/
.itemimg_box:nth-child(even){
	margin-left: auto;
	margin-right: 0;
}
.sec_main_txt{
	width: calc(630/750 * 100vw);
	margin: 0 auto;
	padding: 16vw 0 24vw;
	text-align: left;
	color: #FFFFFF;
	line-height: 2;
	font-size: 3.6vw;
}


/*sp video
---------------------*/
.video_wrap{
	padding: 63vw 0;
}

/*動画：再生ボタンのみ表示*/
/*.video_box {
	width: 100%;
}*/
.video_box {
  position: relative;
	width: calc(670/750 * 100vw);
	height: calc(377/750 * 100vw);
	margin: 0 auto;
	overflow: hidden;
/*	border-radius: calc(315/750 * 100vw);*/
	background: url("/photo/page/nojess/20250808/img/movie_yoko_bg.jpg");
	background-size: 102% 102%;
	background-position: center center;
}
.video_box video {
	width: 102%;/*	上下左右に出る線をはみ出させる;*/
	aspect-ratio: 1 / 1;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	filter: drop-shadow(0px 0px rgba(0,0,0,0));
	outline: none;
	border: none;
}
	
video#self_play {

}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; /* Optional: マウスカーソルをポインターに変更 */
	width: calc(130/750 * 100vw);
}


/*sp Pocket Ring
---------------------*/
.pocket_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 41vw 0 12vw;
}

.pocket_main{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.pocket_main:before {
	content: "";
	display: block;
	padding-top: 125.33%;/* pocket_mainの高さ940px÷横幅750px×100*/
}
.pocket_main_img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.pocket_ttl{
	position: absolute;
	width: calc(276/750 * 100vw);
	top: calc(-170/750 * 100vw);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 101;
}
.pocket_frame_left{
	position: absolute;
	width: calc(168/750 * 100vw);
	top: calc(-134/750 * 100vw);
	left: calc(28/750 * 100vw);
	margin: 0 auto;
}
.pocket_frame_right{
	position: absolute;
	width: calc(168/750 * 100vw);
	top: calc(-134/750 * 100vw);
	right: calc(28/750 * 100vw);
	margin: 0 auto;
}


/*sp Love the feeling
---------------------*/
.love_bg_wrap{
	width: 100%;
	height: calc(112/750 * 100vw);
	background: url("/photo/page/nojess/20250808/img/bg_love_sp.jpg");
	background-position: center;
  background-size: calc(493/750 * 100vw) calc(112/750 * 100vw);
  background-repeat: repeat-x;
}



/*sp interval
---------------------*/
.interval_wrap{
	width: 100%;
	padding: 34vw 0 34vw;
	margin: 0 auto;
	background-color: #f4f4f4;
}
.interval_inner{
	width: calc(630/750 * 100vw);
	margin: 0 auto;
	position: relative;
}
.interval_inner:before {
	content: "";
	display: block;
	padding-top: 107.619%;/* 画像2枚の最大高さ678px÷最大横幅630px×100*/
}
.interval_box1{
	width: calc(454/750*100vw);
	height: auto;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 99;
}
.interval_box2{
	width: calc(630/750*100vw);
	height: auto;
	position: absolute;
  top: calc(50% + 35px);
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 98;
}


/*sp Silver Ring
---------------------*/
.silver_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 41vw 0 25vw;
}

.silver_main{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.silver_main:before {
	content: "";
	display: block;
	padding-top: 125.33%;/* silver_mainの高さ940px÷横幅750px×100*/
}
.silver_main_img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.silver_ttl{
	position: absolute;
	width: calc(276/750 * 100vw);
	top: calc(-170/750 * 100vw);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 101;
}
.silver_frame_left{
	position: absolute;
	width: calc(168/750 * 100vw);
	top: calc(-134/750 * 100vw);
	left: calc(28/750 * 100vw);
	margin: 0 auto;
}
.silver_frame_right{
	position: absolute;
	width: calc(168/750 * 100vw);
	top: calc(-134/750 * 100vw);
	right: calc(28/750 * 100vw);
	margin: 0 auto;
}


/*sp last
---------------------*/
.last_wrap{
	width: 100%;
	background-color: #b32a2c;
	margin: 0 auto;
	padding: 0 0 12vw;
}

.last_logo{
	width:calc(296/750 * 100vw);
	margin: 0 auto;
	padding: 0 0 12vw;
}

.last_btn {
	width: 80%;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	padding: 0;

}
.last_btn a{
	display: block;
	margin: 0 auto 4vw;
	width: calc(630/750 *100vw);
	/*font-family: "Forum", serif;*/
	font-weight: 400;
	/*font-style: normal;*/
	color: #ffffff;
	text-align: center;
	line-height: 62px;
	letter-spacing:1.5px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 5px;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_white.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	border: 1px solid #ffffff;
}
.last_btn .btn_box:hover{
	text-align: center;
	position: relative;
	background: url("/photo/page/nojess/20250808/img/btn_arr_red.svg") no-repeat;
	background-size: 12%;
	background-position: 95% center;
	background-color: #ffffff;
	color: #b32a2c;
	opacity: 1!important;
}


/*最後の画像
---------------------*/
.footerimg_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #ffffff;
}

.footerimg_box{
	width: 100%;
	max-width: 2000px;
	margin: 0 auto;
}




























































}/*! //sp */










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

/*section
---------------------*/


/*トップへ戻るボタンの余白
---------------------*/
.whiteSpace{
	background-color: #ffffff;
	/*padding: 40px 0 0;*/
	padding: 0;
}





/*円回転アニメーション start
=========================*/
.circleAnmTrigger{}
.circleAnmActive{
	animation: lotate_anm2 3s ease-out 1;
}
@keyframes lotate_anm2 {
0%   { transform: rotate(-20deg); opacity: 0.6; }
100% { transform: rotate(0deg); opacity: 1;}
}
/*円回転アニメーション end
=========================*/



/*画像回転アニメーション start
=========================*/
.itemAnmTrigger {
	opacity: 0;
}
.itemAnmActive {
	opacity: 1;
}

.secImgWide .itemAnmActive{
	animation: item_anm_zoom 3s ease 1;
}

/*左から右に移動・透過あり・はみ出さない*/
@keyframes item_anm_left {
0%   {transform: scale(1) rotate(0) translateX(-50px); opacity: 0;}
100% {transform: scale(1) rotate(0) translateX(0); opacity: 1;}
}
/*右から左に移動・透過あり・はみ出さない*/
@keyframes item_anm_right {
0%   { transform: scale(1) rotate(0) translateX(50px); opacity: 0;}
100% { transform: scale(1) rotate(0) translateX(0); opacity: 1;}
}
/*その場で縮小表示*/
@keyframes item_anm_zoom {
0%   {transform: scale(1.2) rotate(0) translate3d(0,0,0); opacity: 0;}
100% {transform: scale(1) rotate(0) translate3d(0,0,0); opacity: 1;}
}
/*下から上に移動・透過あり・はみ出さない*/
@keyframes item_anm_up {
0%   {opacity:0;transform:translate3d(0,50px,0);}
100% {opacity:1;transform:translate3d(0,0,0);}
}


.imgFrame{
	overflow: hidden;
}
.imgFrame img{
	overflow: hidden;
}
/*画像回転アニメーション end
=========================*/





/*ページ読み込み時のローディングアニメーション//
=========================*/
#cover {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: #bfe037;*/
    background: #92b326;
    transition: .8s .4s ease;
    transform-origin: right center;
}
.loaded #cover {
	opacity: 1;
	visibility: visible;
	transform: rotateY(90deg);
}
#mainContents {
	opacity: 0;
	transition: .8s .4s ease;
}
.hideCover #mainContents {
	opacity: 1;
}
/*//ページ読み込み時のローディングアニメーション
=========================*/

















/*   ふわっと表示 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
=========================*/


/*   ふわっと表示《カスタム》 start
=========================*/
/* ----- effects ----- */
.effFIU_visible{ opacity:1; }
.effFIU_long, .effFI_scroll { opacity:0; }

.effFIU_visible.effanm_cus { animation:effFIU_visible 1.5s both; }
.effFIU_long.effanm_cus { animation:effFIU_long 1.0s both; animation-delay: 0.5s;}

.effFI_scroll.effanm_rot { animation:effFI_scroll 2.0s both;}


/*下から上へフェードイン:最初から見えている*/
  @keyframes effFIU_visible {0%{opacity:1;transform:translate3d(0,0,0)}100%{opacity:1;transform:translate3d(0,-35px,0)}}

/*下から上へフェードイン:移動距離が長い*/
  @keyframes effFIU_long {0%{opacity:0;transform:translate3d(0,100px,0)}100%{opacity:1;transform:none;}}

/*その場でフェードイン:スクロールで表示*/
  @keyframes effFI_scroll {0%{opacity:0}100%{opacity:1}}

/*   ふわっと表示《カスタム》 end
=========================*/








/*カードアニメーション start
=========================*/
.cardAnmTrigger{}
.cardAnmActive{
	animation: card_anm 1.5s ease-out 1;
	animation-fill-mode:forwards;/*アニメーションを最後の状態で止める*/
}

@keyframes card_anm {
0%   { transform: rotate(30deg) translate(-800px, 500px); opacity: 1;}
30%   {  }
100% { transform: rotate(0deg) translate(0, 0); opacity: 1;}
}
/*カードアニメーション end
=========================*/




/*幕のように上から下に表示させるアニメーション start
=========================*/
.screen_box {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.screen_box:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(179, 42, 44, 1.0);
  /*transition: 1s cubic-bezier(.15,.65,.85,.65);*/
	transition: 0.7s cubic-bezier(0,0,1,1);/*linear（一定の速度）と同義*/
	z-index: 100;
}

.isPlay:before {
	transform: translate3d(0, 100%, 0);
}

/*幕のように上から下に表示させるアニメーション end
=========================*/


















/*ハート画像アニメーション start
=========================*/
.heartAnmTrigger{
	opacity: 0;
}
.heartAnmActive{
	animation: heart_anm 3.0s ease-out 1;
	animation-fill-mode:forwards;/*アニメーションを最後の状態で止める*/

}
@keyframes heart_anm {
0%   { transform: scale(1.0) translateY(15px); opacity: 0; }
25%   { transform: scale(0.85) translateY(15px) ; opacity: 0; }
50%   { transform: scale(1.1);}
100% { transform: scale(1.0) translateY(0); opacity: 1;}
}
/*ハート画像アニメーション end
=========================*/



/*   縦線アニメーション start
=========================*/
.line_box{
	width: 100%;
	max-width: 10px;
	height: 60px;
	margin: 0 auto;
	position: relative;
}
#sec0 .line_box{
	height: 80px;
}

/*for SP*/
@media screen and (max-width: 640px) {
	.line_box{
	height: 10.6vw;
	}
}/*for SP*/

.line_box .itemAnmTrigger{

}
/* スクロールダウンの位置 */
.line_box .itemAnmActive{
  position: absolute;
  right: 50%;
  top:0;
  writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.line_box .itemAnmActive::before {
  animation: scroll 2s;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;/*アニメーションを最後の状態で止める*/
/*  background-color: #978766;*/
  bottom: -60px;
  content: "";
  height: 60px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
	opacity: 0;
}
#sec0 .line_box .itemAnmActive::before {
	background-color: #978766;
	bottom: -80px;
  content: "";
  height: 80px;
	z-index: 99;
}
#sec1 .line_box .itemAnmActive::before {
	background-color: #ebdcb1;
}
#sec2 .line_box .itemAnmActive::before {
	background-color: #a2c0bf;
}
#sec3 .line_box .itemAnmActive::before {
	background-color: #de9c90;
}
#sec4 .line_box .itemAnmActive::before {
	background-color: #989db5;
	/*background-color: #ffcc00;*/
}
#sec5 .line_box .itemAnmActive::before {
	background-color: #c4c582;
}
#sec6 .line_box .itemAnmActive::before {
	background-color: #d1ac7d;
}
/*for SP*/
@media screen and (max-width: 640px) {
	.line_box .itemAnmActive::before {
  bottom: -10.6vw;
  content: "";
  height: 10.6vw;
	}
}


/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
		opacity: 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
		opacity: 1;
  }
}




/*SVGハートラインアニメーション start
=========================*/

.svg__anime {
  display: none;
}
.on .svg__anime {
  display: block;
}


#sec6 #heart_text {
  mask: url(#heart_mask);
}

#sec6 .handwriting {
  width: 100%;
  height: auto;
}
#sec6 .handwriting_text {
	fill: #8c7962;
}

.handwriting_mask_line {
  fill: none;
  stroke: #fff;
  stroke-width: 107;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4000px;
	animation: handwriting 4.5s linear;
	}
@keyframes handwriting {
  0% {
    stroke-dashoffset: 4000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/*SVGハートラインアニメーション end
=========================*/