@charset "utf-8";
/**
 * layout pc
 */


/* import
--------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap");
@import "init.css";


/* html, body
--------------------------------------------------*/

html,body{
	min-width:1200px;
}


/* 全体設定 */
main {
	position:relative;
	width:100%;
	min-width:1200px;
	min-height:100%;
	margin:0;
	text-align:left;
	font-family: Verdana,"メイリオ","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
	font-feature-settings:"palt";
	letter-spacing:0.15em;
	-webkit-text-size-adjust:none;
	color:#000000;
	opacity: 0;              /* 最初は見えない */
	transition: opacity 1s ease; /* フェードイン用 */
	/*opacity: 1;               デバッグ用 */
}

main.active {
	opacity: 1; /* フェードイン */
}



/* 左側バー */
.trp_left_bar{
	position:absolute;
	width:29px;
	height:100%;
	top:0;
	left:0;
	background:url("../images/left_bar_pc.jpg");
	background-color:#2aa9e0;
	z-index:2;
}

/* 右側バー */
.trp_right_bar{
	position:absolute;
	width:29px;
	height:100%;
	top:0;
	right:0;
	background:url("../images/right_bar_pc.jpg");
	background-color:#ffe14f;
	z-index:2;
}




/* 初回アニメ */
.white-cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 10; /* mainの上に表示 */
	transform: translateY(0);
	transition: transform 0.6s ease; /* アニメーション時間 */
	display:none; /* デバッグ用 */
}
.white-cover.active {
	transform: translateY(100%); /* 下にスライドして消える */
}




/* メイン画像 */
.trp_main {
	position: relative;
	width: 100%;
	height: 80vh;
	max-height: 770px;   /* 縦の最大値 */
	overflow: hidden;    /* はみ出した部分を隠す */
}

.trp_main_img {
	position: absolute;         /* 相対位置の親を基準に配置 */
	top: 0;
	left: 50%;                  /* 親の中央を基準 */
	transform: translateX(-50%);/* 画像自身の半分を戻す */
	height: 100%;               /* 親の高さにフィット */
	width: auto;                /* 横幅は比率維持で自動 */
	max-width: none !important; /* グローバルの max-width:100% を打ち消し */
}





/* リード部分 */
.trp_read{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
	text-align:center;
	font-weight:bold;
	padding-top:120px;
	padding-bottom:205px;
	z-index:5;
	mix-blend-mode: multiply; /* 乗算 バッジ用 */
}


.main_text {
	position: relative;
	display: block;
	white-space: nowrap;
	opacity: 0; /* ← 最初は非表示に */
	transition: opacity 0.4s ease;
	font-size:16px;
	line-height:2.5;
}

.main_text.is-active {
	opacity: 1; /* ← JSで表示開始 */
}

.main_text .char {
	display: inline-block;
	transform: scale(1);
	opacity: 0;
	transition:
		opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1),
		transform 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition-delay: calc(0.01s * var(--i));
}

.main_text.is-active .char {
	transform: scale(1);
	opacity: 1;
}


.trp_read_bg_set{
	position:absolute;
	width:100%;
}



.trp_read_bg01 {
	position: absolute;
	top: -60px;
	left: 50%;
	margin-left: -543px;
}

.trp_read_bg02 {
	position: absolute;
	top: 28px;
	left: 50%;
	margin-left:-442px;
}

.trp_read_bg03 {
	position: absolute;
	top: 83px;
	left: 50%;
	margin-left:-520px;
}

.trp_read_bg04 {
	position: absolute;
	top: 205px;
	left: 50%;
	margin-left:-420px;
}

.trp_read_bg05 {
	position: absolute;
	top: 270px;
	left: 50%;
	margin-left:-505px;
}

.trp_read_bg06 {
	position: absolute;
	top: -65px;
	left: 50%;
	margin-left:405px;
}

.trp_read_bg07 {
	position: absolute;
	top: -12px;
	left: 50%;
	margin-left:330px;
}

.trp_read_bg08 {
	position: absolute;
	top: 84px;
	left: 50%;
	margin-left:437px;
}

.trp_read_bg09 {
	position: absolute;
	top: 163px;
	left: 50%;
	margin-left:365px;
}

.trp_read_bg10 {
	position: absolute;
	top: 272px;
	left: 50%;
	margin-left:470px;
}




.poyon{
	transform: scale(0); /* 初期は消えている感じ */
}


.poyon.active {
	animation: poyonInitial 0.8s ease forwards; /* アニメーションを発動 */
}


@keyframes poyonInitial {
	0% {
		transform: scale(0.2);
	}
	40% {
		transform: scale(1.2);
	}
	60% {
		transform: scale(1);
	}
	80% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}




/* TVCM斜めバー */
.trp_bar01_box{
	position:relative;
}

.trp_bar01{
	position:absolute;
	width:120%;
	height:135px;
	top:0;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:3;
}

.trp_bar01_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(-10deg);
	/*background:url("../images/bar01_bg.jpg");*/
	background:#0063ff;
	background-position:top center;
}


.trp_bar01_shadow_box{
	position:relative;
	z-index:1;
}

.trp_bar01_shadow{
	position:absolute;
	width:120%;
	height:135px;
	top:15px;
	top:0;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:1;
	transition: all 0.4s ease; /* duration: 1.5s */
}

.trp_bar01_shadow.active{
	transform: translateY(15px); /* Y方向に20px移動 */
}

.trp_bar01_shadow_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(-10deg);
	/*
	background:url("../images/bar01_shadow_bg.jpg");
	background-position:top center;
	*/
	background:#000000;
}




/* CMタイトル */
.trp_cm{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
	z-index:4;
	padding-top:80px;
}


.trp_cm_title{
	position:absolute;
	top:-78px;
	left:50%;
	margin-left:175px;
	z-index:4;
}

.trp_cm01_label{
	position:relative;
	left:50%;
	margin-left:-547px;
	margin-top:195px;
}


 /* CM 1つ目 */
.trp_cm01_set{
	position:relative;
}

.trp_cm01_img,
.trp_cm01_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.trp_cm01_img.active,
.trp_cm01_bg.active {
	opacity: 1;
	transform: scale(1);
}


.trp_cm01_img{
	position:relative;
	top:24px;
	left:50%;
	margin-left:-543px;
	display:inline-block;
}

.trp_cm01_bg{
	position:absolute;
	top:108px;
	left:50%;
	margin-left:-72px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}

.trp_cm01_text_set{
	position:absolute;
	top:25px;
	left:50%;
	margin-left:107px;
}

.trp_cm01_title{
}

.trp_cm01_text{
	margin-top:40px;
	margin-left:160px;
	font-size:12px;
	font-weight:bold;
	line-height:2.2;
}

 /* CM 1つ目バッジ */
.trp_cm01_bg_set{
	position:relative;
}

.trp_cm01_bg01 {
	position: absolute;
	top: 310px;
	left: 50%;
	margin-left: 430px;
}

.trp_cm01_bg02 {
	position: absolute;
	top: 367px;
	left: 50%;
	margin-left:385px;
}

.trp_cm01_bg03 {
	position: absolute;
	top: 455px;
	left: 50%;
	margin-left:-385px;
}




 /* CM 2つ目 */
.trp_cm02_set{
	position:relative;
	margin-top:120px;
}

.trp_cm02_img,
.trp_cm02_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.trp_cm02_img.active,
.trp_cm02_bg.active {
	opacity: 1;
	transform: scale(1);
}


.trp_cm02_img{
	position:relative;
	top:0;
	left:50%;
	margin-left:-70px;
	display:inline-block;
}

.trp_cm02_bg{
	position:absolute;
	top:109px;
	left:50%;
	margin-left:-208px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}


/* 回転アニメーション定義 */
@keyframes rotateLoop {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}


.trp_cm02_text_set{
	position:absolute;
	top:38px;
	left:50%;
	margin-left:-445px;
}

.trp_cm02_text{
	margin-top:40px;
	margin-left:40px;
	font-size:12px;
	font-weight:bold;
	line-height:2.2;
}


.trp_cm_read01{
	position:relative;
	margin-top:160px;
	text-align:center;
	font-size:16px;
	line-height:2.5;
	font-weight:bold;
}

.trp_cm_read02{
	margin-top:20px;
	margin-bottom:120px;
}

 /* CM 2つ目バッジ */
.trp_cm02_bg_set{
	position:relative;
}

.trp_cm02_bg01 {
	position: absolute;
	top: 105px;
	left: 50%;
	margin-left: -496px;
}

.trp_cm02_bg02 {
	position: absolute;
	top: 162px;
	left: 50%;
	margin-left:-446px;
}

.trp_cm02_bg03 {
	position: absolute;
	top: 246px;
	left: 50%;
	margin-left:384px;
}






/* 要注意部分グラフなど */
.trp_attention{
	position:relative;
	width:calc(100% - 58px);
	margin:120px auto 0;
}

.trp_attention_box{
	position:relative;
	width:1012px;
	margin:0 auto 0;
	border-radius:60px;
	box-shadow: 7px 7px 0px rgba(0,0,0,1);
	overflow:hidden;
	padding-bottom:70px;
}

.trp_attention_box02{
	padding-bottom:0;

}

.trp_caption_set{
	position:relative;
	width: 100%;
	background: #fee101;
	display: flex;          /* Flexbox有効化 */
	align-items: center;    /* 縦方向中央揃え */
	justify-content: center;/* 横方向中央揃え（必要なら） */
	height:113px;
}

.trp_attention_box02 .trp_caption_set{
	background: #eb3d3f;
}

.trp_attention01_set{
	position:relative;
	margin-top:70px;
	margin-left:60px;
}

.trp_attentionp01_text{
	position:relative;
	width:325px;
	margin-top:50px;
	font-size:15px;
	line-height:2;
	font-weight:bold;
}

.trp_attention01_img{
	position:absolute;
	top:12px;
	right:40px;
}

.trp_attention01_img_text{
}


 /* アコーディオン01 */
.trp_attention01_ac_box01_set{
	position:relative;
	margin-top:70px;
	margin-bottom:20px;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: left;  
}

.trp_attention01_img_caption{
}

.trp_attention01_ac_box01 {
	overflow: hidden;
	height: 0;
	transition: height 0.4s ease; /* ← CSSで滑らかに */
	box-sizing:border-box;
}

.trp_attention01_ac_box01 img {
	margin-top:15px;
}

.trp_attention01_ac_box01.open {
	height: auto; /* ← JSでは使わないが指定しておくと安心 */
}
 /* アコーディオン01 */
 
 

 /* アコーディオン02 */
.trp_attention02_ac_box01_set{
	position:relative;
	margin-top:130px;
	margin-bottom:20px;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: left;  
}

.trp_attention02_ac_box01 img {
	margin-top:15px;
}

.trp_attention02_ac_box01 {
	overflow: hidden;
	height: 0;
	transition: height 0.4s ease; /* ← CSSで滑らかに */
}

.trp_attention02_ac_box01.open {
	height: auto; /* ← JSでは使わないが指定しておくと安心 */
}
 /* アコーディオン02 */




  /* アコーディオン05 */
.trp_attention05_ac_box01_set{
	position:relative;
	margin-bottom:60px;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: left;  
}


.trp_attention05_ac_box01 img {
	margin-top:15px;
}

.trp_attention05_ac_box01 {
	overflow: hidden;
	height: 0;
	transition: height 0.4s ease; /* ← CSSで滑らかに */
}

.trp_attention05_ac_box01.open {
	height: auto; /* ← JSでは使わないが指定しておくと安心 */
}
 /* アコーディオン05 */
 
  /* アコーディオン06 */
.trp_attention06_ac_box01_set{
	position:relative;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: left;  
}


.trp_attention06_ac_box01 img {
	margin-top:15px;
}

.trp_attention06_ac_box01 {
	overflow: hidden;
	height: 0;
	transition: height 0.4s ease; /* ← CSSで滑らかに */
}

.trp_attention06_ac_box01.open {
	height: auto; /* ← JSでは使わないが指定しておくと安心 */
}
 /* アコーディオン05 */
 




.trp_attention02_set{
	position:relative;
	margin-top:40px;
	margin-left:60px;
}

.trp_attentionp02_text{
	position:relative;
	width:354px;
	margin-top:50px;
	font-size:15px;
	line-height:2;
	font-weight:bold;
}

.trp_attention02_img{
	position:absolute;
	top:50px;
	right:145px;
}

 /* 要注意部分グラフなど バッジ */
.trp_attention01_bg_set{
	position:relative;
}

.trp_attention01_bg01 {
	position: absolute;
	top: 43px;
	left: 50%;
	margin-left:451px;
	z-index:1;
}

.trp_attention01_bg02 {
	position: absolute;
	top: 507px;
	left: 50%;
	margin-left:-549px;
	z-index:1;
}

.trp_attention01_bg03 {
	position: absolute;
	top: 609px;
	left: 50%;
	margin-left:-505px;
	z-index:1;
}

.trp_attention01_bg04 {
	position: absolute;
	top: 1098px;
	left: 50%;
	margin-left:493px;
	z-index:1;
}

.trp_attention01_bg05 {
	position: absolute;
	top: 1155px;
	left: 50%;
	margin-left:449px;
	z-index:1;
}

.trp_attention01_bg06 {
	position: absolute;
	top: 1641px;
	left: 50%;
	margin-left:-532px;
	z-index:1;
}




/* サイネージ */
.trp_signage{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 80px;
}

.trp_signage_label{
	position:relative;
	left:50%;
	margin-left:-547px;
	margin-top:128px;
}


.trp_signage_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.trp_signage_bg.active {
	opacity: 1;
	transform: scale(1);
}

.trp_signage_bg{
	position:absolute;
	top:-40px;
	left:50%;
	margin-left:-515px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}

.trp_signage_photo{
	position:relative;
	left:50%;
	margin-left:-375px;
	margin-top:68px;
	
}

.trp_signage_btn_set{
	position:relative;
	margin-top:30px;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: center;  
}


.trp_signage_btn_set_box {
	margin-top:45px;
	overflow: hidden;
	height: 0;
	transition: height 0.4s ease; /* ← CSSで滑らかに */
}

.trp_signage_btn_set_box.open {
	height: auto; /* ← JSでは使わないが指定しておくと安心 */
}








/* メイキング */
.trp_make{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
}

 /* メイキング 1つ目 */
.trp_make01_set{
	position:relative;
	margin-top:420px;
}

.trp_make01_img,
.trp_make01_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.trp_make01_img.active,
.trp_make01_bg.active {
	opacity: 1;
	transform: scale(1);
}


.trp_make01_img{
	position:relative;
	top:0;
	left:50%;
	margin-left:-533px;
	display:inline-block;
}

.trp_make01_bg{
	position:absolute;
	top:-117px;
	left:50%;
	margin-left:-103px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}

.trp_make01_text_set{
	position:absolute;
	top:69px;
	left:50%;
	margin-left:110px;
}

.trp_make01_text{
	margin-top:48px;
	margin-left:0;
	font-size:15px;
	font-weight:bold;
	line-height:2;
}


 /* サイネージ バッジ */
.trp_signage_bg_set{
	position:relative;
}

.trp_signage_bg01 {
	position: absolute;
	top: calc(-100px);
	left: 50%;
	margin-left:calc(356px + 114px);
	z-index:1;
}

.trp_signage_bg02 {
	position: absolute;
	top: calc(-60px);
	left: 50%;
	margin-left:calc(320px + 114px);
	z-index:1;
}

.trp_signage_bg03 {
	position: absolute;
	top: 622px;
	left: 50%;
	margin-left:-526px;
	z-index:1;
}

.trp_signage_bg04 {
	position: absolute;
	top: 692px;
	left: 50%;
	margin-left:-434px;
	z-index:1;
}





 /* メイキング バッジ */
.trp_make_bg_set{
	position:relative;
}

.trp_make_bg01 {
	position: absolute;
	top: 77px;
	left: 50%;
	margin-left:-388px;
	z-index:3;
}

.trp_make_bg02 {
	position: absolute;
	top: 154px;
	left: 50%;
	margin-left:-485px;
	z-index:1;
}

.trp_make_bg03 {
	position: absolute;
	top: 303px;
	left: 50%;
	margin-left:337px;
	z-index:1;
}

.trp_make_bg04 {
	position: absolute;
	top: 360px;
	left: 50%;
	margin-left:385px;
	z-index:1;
}

.trp_make_bg05 {
	position: absolute;
	top: 765px;
	left: 50%;
	margin-left:-262px;
	z-index:1;
}

.trp_make_bg06 {
	position: absolute;
	top: 1141px;
	left: 50%;
	margin-left:-438px;
	z-index:1;
}




/* インタビュー */
.trp_interview{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
}

 /* インタビュー 1つ目 */
.trp_interview01_set{
	position:relative;
	margin-top:120px;
}

.trp_interview01_img,
.trp_interview01_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.trp_interview01_img.active,
.trp_interview01_bg.active {
	opacity: 1;
	transform: scale(1);
}


.trp_interview01_img{
	position:relative;
	top:0;
	left:50%;
	margin-left:-70px;
	display:inline-block;
}

.trp_interview01_bg{
	position:absolute;
	top:111px;
	left:50%;
	margin-left:-213px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}

.trp_interview01_text_set{
	position:absolute;
	top:58px;
	left:50%;
	margin-left:-518px;
}

.trp_interview01_text{
	margin-top:48px;
	margin-left:0;
	font-size:15px;
	font-weight:bold;
	line-height:2;
}







/* ライン */
.trp_line01_bg{
	position:relative;
	left:50%;
	margin-left:-493px;
	margin-bottom:170px;
	z-index:1;
	mix-blend-mode: multiply; /* 乗算 バッジ用 */
}


/* 斜めバー02 */
.trp_bar02_box{
	position:relative;
}

.trp_bar02{
	position:absolute;
	width:120%;
	height:135px;
	top:0;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:3;
}

.trp_bar02_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(8deg);
	/*background:url("../images/bar01_bg.jpg");*/
	background:#e50014;
	background-position:top center;
}


.trp_bar02_shadow_box{
	position:relative;
	z-index:1;
}

.trp_bar02_shadow{
	position:absolute;
	width:120%;
	height:135px;
	top:15px;
	top:0;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:1;
	transition: all 0.4s ease; /* duration: 1.5s */
}

.trp_bar02_shadow.active{
	transform: translateY(15px); /* Y方向に20px移動 */
}

.trp_bar02_shadow_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(8deg);
	/*
	background:url("../images/bar01_shadow_bg.jpg");
	background-position:top center;
	*/
	background:#000000;
}




/* 要注意部分グラフなど2 */
.trp_attention02{
	position:relative;
	width:calc(100% - 58px);
	margin:80px auto 0;
}


.trp_attention02_title{
	position:absolute;
	top:70px;
	left:50%;
	margin-left:110px;
	z-index:4;
}

.trp_attention02_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}


.trp_attention02_bg{
	position:absolute;
	top:-110px;
	left:50%;
	margin-left:200px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}


.trp_attention02_text{
	position:relative;
	padding-top:140px;
	left:50%;
	margin-left:-427px;
	font-weight:bold;
	font-size:15px;
	line-height:3;
}



.trp_attention03_img{
	position:relative;
	margin:60px auto 60px;
}


 /* 要注意部分グラフ02など バッジ */
.trp_attention02_bg_set{
	position:relative;
}

.trp_attention02_bg01 {
	position: absolute;
	top: 69px;
	left: 50%;
	margin-left:420px;
	z-index:3;
}

.trp_attention02_bg02 {
	position: absolute;
	top: 228px;
	left: 50%;
	margin-left:-505px;
	z-index:1;
}

.trp_attention02_bg03 {
	position: absolute;
	top: 321px;
	left: 50%;
	margin-left:-524px;
	z-index:1;
}

.trp_attention02_bg04 {
	position: absolute;
	top: 486px;
	left: 50%;
	margin-left:460px;
	z-index:1;
}

.trp_attention02_bg05 {
	position: absolute;
	top: 787px;
	left: 50%;
	margin-left:-515px;
	z-index:1;
}





/* 斜めバー03 */
.trp_bar03_box{
	position:relative;
}

.trp_bar03{
	position:absolute;
	width:120%;
	height:185px;
	top:185px;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:3;
}

.trp_bar03_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(-6deg);
	/*
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	background:#fcde00;
}


.trp_bar03_shadow_box{
	position:relative;
	z-index:1;
}

.trp_bar03_shadow{
	position:absolute;
	width:120%;
	height:135px;
	top:185px;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:1;
	transition: all 0.4s ease; /* duration: 1.5s */
}

.trp_bar03_shadow.active{
	transform: translateY(15px); /* Y方向に20px移動 */
}

.trp_bar03_shadow_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(-6deg);
	/*
	background:url("../images/bar01_shadow_bg.jpg");
	background-position:top center;
	*/
	background:#000000;
	
}




/* ルール */
.trp_rule{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
	padding-top:200px;
}

.trp_rule_title{
	position:absolute;
	top:250px;
	left:50%;
	margin-left:-570px;
	z-index:4;
}

.trp_rule_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}


.trp_rule_bg{
	position:absolute;
	top:-110px;
	left:50%;
	margin-left:200px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}


.trp_rule_img{
	position:relative;
	top:0;
	left:50%;
	margin-top:25px;
	margin-left:-302px;
	z-index:4;
	
}

.trp_rule_read01{
	position:absolute;
	top:205px;
	left:50%;
	margin-left:90px;
	font-size:15px;
	line-height:2.5;
	font-weight:bold;
}


.trp_rule01_set{
	position:relative;
	margin-top:55px;
	text-align:center;
}

.trp_rule01_text01{
	position:relative;
	font-size:16px;
	line-height:1;
	font-weight:bold;
	color:#2421d2;
}

.trp_rule01_text02{
	position:relative;
	margin-top:10px;
	font-size:18px;
	line-height:1;
	font-weight:bold;
	color:#ffffff;
	display:inline-block;
	background:#2421d2;
	padding:2px 4px 4px;
}

.trp_rule_btn01{
	position:relative;
	margin:-5px auto 40px;
	width:575px;
	display:block;
}


/* Xキャンペーン */
.trp_campaign_btn01{
	position:relative;
	margin:-5px auto 40px;
	width:728px;
	display:block;
}




/* 応募要項 */
.trp_rule02_set{
	position:relative;
	text-align:center;
}


.trp_rule02_caption{
	text-align:center;
	font-size:16px;
	font-weight:bold;
	line-height:1;
}

.trp_rule02_text01{
	text-align:left;
	width:520px;
	font-size:16px;
	font-weight:bold;
	margin:20px auto 65px;
	line-height:2;
}

.trp_rule02_img01{
	position:relative;
	left:50%;
	margin-left:-302px;
}

 /* ルール バッジ */
.trp_rule_bg_set{
	position:relative;
}

.trp_rule_bg01 {
	position: absolute;
	top: calc(-11px + 60px);
	left: 50%;
	margin-left:293px;
	z-index:3;
}

.trp_rule_bg02 {
	position: absolute;
	top: calc(43px + 60px);
	left: 50%;
	margin-left:344px;
	z-index:1;
}

.trp_rule_bg03 {
	position: absolute;
	top: 260px;
	left: 50%;
	margin-left:-444px;
	z-index:1;
}

.trp_rule_bg04 {
	position: absolute;
	top: calc(439px + 163px);
	left: 50%;
	margin-left:434px;
	z-index:1;
}

.trp_rule_bg05 {
	position: absolute;
	top: 863px;
	left: 50%;
	margin-left:-408px;
	z-index:1;
}

.trp_rule_bg06 {
	position: absolute;
	top: 49px;
	left: 50%;
	margin-left:-489px;
	z-index:3;
}

.trp_rule_bg07 {
	position: absolute;
	top: 95px;
	left: 50%;
	margin-left:-435px;
	z-index:3;
}









/* 斜めバー04 */
.trp_bar04_box{
	position:relative;
}

.trp_bar04{
	position:absolute;
	width:120%;
	height:135px;
	top:0;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:3;
}

.trp_bar04_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(8deg);
	background:url("../images/bar01_bg.jpg");
	background:#0063ff;
	background-position:top center;
}


.trp_bar04_shadow_box{
	position:relative;
	z-index:1;
}

.trp_bar04_shadow{
	position:absolute;
	width:120%;
	height:135px;
	top:15px;
	top:0;
	left:0;
	margin-left:-10%;
	/* 中心を軸に回転させたい場合はデフォルトで大丈夫ですが、調整するなら
	transform-origin: center;
	background:url("../images/bar01_bg.jpg");
	background-position:top center;
	*/
	z-index:1;
	transition: all 0.4s ease; /* duration: 1.5s */
}

.trp_bar04_shadow.active{
	transform: translateY(15px); /* Y方向に20px移動 */
}

.trp_bar04_shadow_inner{
	position:relative;
	width:100%;
	height:135px;
	transform: rotate(8deg);
	background:url("../images/bar01_shadow_bg.jpg");
	background-position:top center;
}




/* グッズ */
.trp_goods{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
	padding-top:200px;
}


.trp_goods_title{
	position:absolute;
	top:61px;
	left:50%;
	margin-left:56px;
	z-index:4;
}

.trp_goods_bg{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease;
}


.trp_goods_bg{
	position:absolute;
	top:144px;
	left:50%;
	margin-left:-515px;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

	/* アニメーション適用 */
	animation: rotateLoop 30s linear infinite;
}

.trp_goods01{
	position:absolute;
	top:190px;
	left:50%;
	margin-left:-285px;
}

.trp_goods02{
	position:relative;
	top:177px;
	left:50%;
	margin-left:40px;
	margin-bottom:260px;
}




/* 斜めバー05 */
.trp_bar05_box{
	position:relative;
}

.trp_bar05{
	position:absolute;
	width:120%;
	height:35px;
	top:0;
	left:0;
	margin-left:-10%;
	z-index:3;
}

.trp_bar05_inner{
	position:relative;
	width:100%;
	height:35px;
	transform: rotate(5deg);
	/* background:url("../images/bar01_bg.jpg"); */
	background:#0063ff;
	background-position:top center;
}

.trp_bar06_box{
	position:relative;
}

.trp_bar06{
	position:absolute;
	width:120%;
	height:35px;
	top:0;
	left:0;
	margin-left:-10%;
	z-index:3;
}

.trp_bar06_inner{
	position:relative;
	width:100%;
	height:35px;
	transform: rotate(-5deg);
	/* background:url("../images/bar01_bg.jpg"); */
	background:#fee101;
	background-position:top center;
}




/* 応募する */
.trp_entry{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
	padding-top:50px;
}

.trp_entry02{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 0;
	padding-top:180px;
}



.trp_entry_caption{
	text-align:center;
	font-size:16px;
	font-weight:bold;
	line-height:1;

}


.trp_entry_text01{
	position:relative;
	text-align:left;
	font-size:15px;
	font-weight:bold;
	margin-top:235px;
	margin-bottom:80px;
	line-height:2.5;
	left:50%;
	margin-left:-120px;
}


.trp_entry_text02{
	text-align:left;
	width:520px;
	font-size:16px;
	font-weight:bold;
	margin:20px auto 40px;
	line-height:2;
}


.trp_entry_img{
	position:relative;
	left:50%;
	margin-left:-191px;
	margin-bottom:106px;
	z-index:4;
	
}

.yellow{
	display: inline-block;
	margin: 0 4px;
	padding: 2px 4px 3px; /* 文字と背景の余白も調整したい場合 */
	background:#fde000;
	line-height:1;
}



 /* キャンペーン バッジ */
.trp_campaign_bg_set{
	position:relative;
}

.trp_campaign_bg01 {
	position: absolute;
	top: 78px;
	left: 50%;
	margin-left:296px;
	z-index:3;
}

.trp_campaign_bg02 {
	position: absolute;
	top: 135px;
	left: 50%;
	margin-left:235px;
	z-index:3;
}

.trp_campaign_bg03 {
	position: absolute;
	top: 564px;
	left: 50%;
	margin-left:480px;
	z-index:3;
}

.trp_campaign_bg04 {
	position: absolute;
	top: 604px;
	left: 50%;
	margin-left:428px;
	z-index:3;
}

.trp_campaign_bg05 {
	position: absolute;
	top: 601px;
	left: 50%;
	margin-left:-480px;
	z-index:1;
}

.trp_campaign_bg06 {
	position: absolute;
	top: 655px;
	left: 50%;
	margin-left:-494px;
	z-index:1;
}

.trp_campaign_bg07 {
	position: absolute;
	top: 1200px;
	left: 50%;
	margin-left:326px;
	z-index:1;
}

.trp_campaign_bg08 {
	position: absolute;
	top: calc(1200px + 132px);
	left: 50%;
	margin-left:434px;
	z-index:1;
}

.trp_campaign_bg09 {
	position: absolute;
	top: calc(1200px + 297px);
	left: 50%;
	margin-left:-322px;
	z-index:1;
}

.trp_campaign_bg10 {
	position: absolute;
	top: calc(1200px + 385px);
	left: 50%;
	margin-left:-400px;
	z-index:1;
}

.trp_campaign_bg11 {
	position: absolute;
	top: calc(1200px + 431px);
	left: 50%;
	margin-left:347px;
	z-index:1;
}












/* ライン 02*/
.trp_line02_bg{
	position:relative;
	left:50%;
	margin-left:-510px;
	margin-top:150px;
	margin-bottom:150px;
	z-index:1;
	mix-blend-mode: multiply; /* 乗算 バッジ用 */
}



/* ポスターコンクール */

/* 追加分 */
.trp_cmp_read_set{
	position:relative;
	display:flex;
	width:774px;
	margin:60px auto 55px;
	display: flex;          /* Flexbox有効化 */
	align-items: center;    /* 縦方向中央揃え */
	justify-content: center;/* 横方向中央揃え（必要なら） */
}


.trp_cmp01_read_img01{
	flex-shrink: 0; /* 親の幅が狭くても縮ませない */
}

.trp_cmp01_read_text{
	position:relative;
	font-size:14px;
	line-height:2.2;
	font-weight:bold;
	margin-left:30px;
	text-align:left;
	letter-spacing:0.05em;
}


.trp_cmp{
	position:relative;
	width:calc(100% - 58px);
	margin:0 auto 65px;
}

.trp_cmp_box{
	position:relative;
	width:920px;
	margin:0 auto 0;
	border-radius:60px;
	box-shadow: 7px 7px 0px rgba(0,0,0,1);
	overflow:hidden;
	padding-bottom:60px;
}

.trp_cmp_caption_set {
	position:relative;
	width: 100%;
	background: #02b6cd;
	display: flex;          /* Flexbox有効化 */
	align-items: center;    /* 縦方向中央揃え */
	justify-content: center;/* 横方向中央揃え（必要なら） */
	height:134px;
}

.trp_cmp_set{
	position:relative;
}

.trp_cmp01_set{
	position:relative;
	left:50%;
	margin-left:-385px;
	width:400px;
}

.trp_cmp02_set{
	position:absolute;
	left:50%;
	margin-left:15px;
	width:400px;
}


.trp_cmp01_caption01{
	position:relative;
	font-size:16px;
	line-height:1;
	font-weight:bold;
	margin-bottom:50px;
	text-align:center;
}

.trp_cmp01_left_set{
	width:146px;
	float:left;
}

.trp_cmp01_right_set{
	float:right;
	width:235px;
	margin-top:-13px;
}

.trp_cmp01_text01{
	font-size:10px;
	line-height:1.6;
	font-weight:bold;
	text-align:center;
	margin-top:10px;
	letter-spacing:0.05em;
}

.trp_cmp01_text02{
	font-size:12px;
	line-height:1.8;
	font-weight:bold;
	text-align:left;
	margin-top:10px;
	white-space:nowrap;
	letter-spacing:0.05em;
}



.trp_cmp_other_title{
	font-size:18px;
	line-height:1;
	font-weight:bold;
	text-align:center;
	margin-top:95px;
	margin-bottom:30px;
}


.trp_cmp_other_ctn{
	position:relative;
	display: flex;          /* Flexbox有効化 */
	align-items: center;    /* 縦方向中央揃え */
	justify-content: center;/* 横方向中央揃え（必要なら） */
}

.trp_cmp_other_text01{
	font-size:12px;
	line-height:1.8;
	font-weight:bold;
	text-align:center;
	margin-top:10px;
	letter-spacing:0;
	color:#0d6f5d;
}


.trp_cmp_other_text01 .poster_icon {
	margin-left:5px;
	width:11px;
	height:auto;
	display: inline-block;  /* 念のため */
	vertical-align: -1px; /* 古いブラウザ対応 */
}



.trp_cmp_other01_set{
	width:160px;
}

.trp_cmp_other_img{
	width:138px;
	height:auto;
	margin:auto;
}


/* 活動 */
.trp_activity{
}


.trp_activity_title{
	position:relative;
	left:50%;
	margin-left:-283px;
	margin-top:70px;
	margin-bottom:25px;
}

.trp_activity_read{
	position:relative;
	text-align:center;
	margin-bottom:45px;
	font-size:16px;
	line-height:1.8;
	font-weight:bold;
}








 /* コンペ バッジ */
.trp_cmp_bg_set{
	position:relative;
}

.trp_cmp_bg01 {
	position: absolute;
	top: 37px;
	left: 50%;
	margin-left:-489px;
	z-index:3;
}

.trp_cmp_bg02 {
	position: absolute;
	top: 370px;
	left: 50%;
	margin-left:454px;
	z-index:3;
}

.trp_cmp_bg03 {
	position: absolute;
	top: 458px;
	left: 50%;
	margin-left:492px;
	z-index:1;
}

.trp_cmp_bg04 {
	position: absolute;
	top: 670px;
	left: 50%;
	margin-left:-497px;
	z-index:1;
}

.trp_cmp_bg05 {
	position: absolute;
	top: 714px;
	left: 50%;
	margin-left:-484px;
	z-index:1;
}

.trp_cmp_bg06 {
	position: absolute;
	top: 752px;
	left: 50%;
	margin-left:520px;
	z-index:1;
}

.trp_cmp_bg07 {
	position: absolute;
	top: calc(1351px + 70px);
	left: 50%;
	margin-left:-560px;
	z-index:1;
}

.trp_cmp_bg08 {
	position: absolute;
	top: calc(1398px + 70px);
	left: 50%;
	margin-left:-443px;
	z-index:1;
}

.trp_cmp_bg09 {
	position: absolute;
	top: calc(1367px + 70px);
	left: 50%;
	margin-left:493px;
	z-index:1;
}



/* スクロールボックス */
.scroll_box{
	position:relative;
	margin:-45px auto 80px;
	height:200px;
	margin-inline: auto;
	overflow-y:scroll;
	padding-right:30px;
	box-sizing:border-box;
	text-align:left;
	text-align:left;
	width:570px;
	font-size:11px;
	line-height:2;
	letter-spacing:0.05em;
	background:#eeeeee;
	padding:10px;
	border-radius:4px;
}

.scroll_box02{
	margin:-20px auto 65px;
}

.scroll_box::-webkit-scrollbar {
	width:12px;
}

.scroll_box::-webkit-scrollbar-thumb {
	background:#000000;
}

.scroll_box::-webkit-scrollbar-track {
	background:#cccccc;
}

.scroll_box_caption{
	font-weight:bold;
}




/* 要注意部分02の注釈 */
.trp_attention02_annotation{
	position:relative;
	width:900px;
	margin:30px auto 0;
}







/* フッタスライド */
.splide{
	position:relative;
	width:994px;
	margin:auto;
}

.splide img{
	position:relative;
	width:318px;
	height:auto;
}


.custom-pagination {
	display: flex;
	justify-content: center;
	margin-top: 55px;
}

.custom-pagination__item {
	width: 16px;
	height: 16px;
	background: #ccc;
	border-radius: 50%;
	margin: 0 12.5px;
	cursor: pointer;
	transition: background 0.3s;
}

.custom-pagination__item.is-active {
	background: #000;
}




/* 共通アニメ */
.fade {
	opacity: 0;
	transform: translateY(20px); /* 下から少し浮かせる感じ */
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade.active {
	opacity: 1;
	transform: translateY(0);
}

.over img{
	transition: filter 0.3s ease;
}

.over:hover img{
	filter: brightness(1.05); /* 明るくして白っぽく見せる */
	animation: poyon02 0.4s;
}

.over02 img{
	transition: opacity 0.3s ease;
}

.over02:hover img{
	opacity:0.6;
}

@keyframes poyon02 {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.02); } /* 最大膨張 */
	100% { transform: scale(1); } /* 最終的に少し大きめで止まる */
}



/* ここからテンプレートエリア */
.rps_visible{
    display:none;
}

.rps_del{
    display:block;
}