/* layout sp
--------------------------------------------------*/
@media screen and (max-width: 768px) {

html{
	overflow-x:hidden;
}

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

main {
	position:relative;
	width:100%;
	min-width:320px;
	height:100%;
	text-align:left;
	-webkit-text-size-adjust: none;
}


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

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




/* メイン画像 */
.trp_main {
	position: relative;
	width: calc(100% - 5vw);
	margin-left:2.5vw;
	height: auto;
	max-height: auto;
	overflow: visible;
}

.trp_main_img {
	position: relative;
	top: 0;
	left: 0;
	transform: translateX(0);
	height: auto;
	width: 100%;
}





/* リード部分 */
.trp_read{
	position:relative;
	width:calc(100% - 5vw);
	margin:0 auto 0;
	text-align:center;
	font-weight:bold;
	padding-top:14vw;
	padding-bottom:14vw;
	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:3.2vw;
	line-height:2;
	letter-spacing:0.05em;
}

.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:-9vw;
	left: 50%;
	margin-left:-44vw;
	width:10vw;
	height:auto;
}

.trp_read_bg02 {
	position: absolute;
	top:16.8vw;
	left: 50%;
	margin-left:-45.1vw;
	width:10vw;
	height:auto;
}

.trp_read_bg03 {
	position: absolute;
	top:25vw;
	left: 50%;
	margin-left:-40.5vw;
	width:6vw;
	height:auto;
}

.trp_read_bg04 {
	position: absolute;
	top:50vw;
	left: 50%;
	margin-left:-41.6vw;
	width:9.6vw;
	height:auto;
}

.trp_read_bg05 {
	position: absolute;
	top:60vw;
	left: 50%;
	margin-left:-30.4vw;
	width:5.8vw;
	height:auto;
}

.trp_read_bg06 {
	position: absolute;
	top:-3.4vw;
	left: 50%;
	margin-left:35.2vw;
	width:7.4vw;
	height:auto;
}

.trp_read_bg07 {
	position: absolute;
	top:4.2vw;
	left: 50%;
	margin-left:38.9vw;
	width:6.1vw;
	height:auto;
}

.trp_read_bg08 {
	position: absolute;
	top:17vw;
	left: 50%;
	margin-left:32.7vw;
	width:9vw;
	height:auto;
}

.trp_read_bg09 {
	position: absolute;
	top:26.6vw;
	left: 50%;
	margin-left:37.9vw;
	width:5.8vw;
	height:auto;
}

.trp_read_bg10 {
	position: absolute;
	top:49vw;
	left: 50%;
	margin-left:34.9vw;
	width:7.7vw;
	height:auto;
}




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

.trp_bar01{
	height:11.5vw;
}

.trp_bar01_inner{
	height:11.5vw;
}


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

.trp_bar01_shadow{
	height:11.5vw;
}

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

.trp_bar01_shadow_inner{
	height:11.5vw;
}




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

.trp_cm01_label{
	position:relative;
	left:50%;
	margin-left:-44.6vw;
	margin-top:23.6vw;
	width:21.3vw;
}


.trp_cm_title{
	position:absolute;
	width:100%;
	height:auto;
	top:-6vw;
	left:0;
	margin-left:0;
	z-index:4;
}

 /* CM 1つ目 */
.trp_cm01_set{
	position:relative;
	margin-top:2vw;
}

.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:0;
	left:2vw;
	margin-left:0;
	display:inline-block;
	width:66.6vw;
	height:auto;
}

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

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

.trp_cm01_text_set{
	position:relative;
	top:4vw;
	left:9vw;
	margin-left:0;
	
}

.trp_cm01_title{
	width:35.4vw;
	height:auto;
}

.trp_cm01_text{
	margin-top:5vw;
	margin-left:0;
	font-size:3.2vw;
	font-weight:bold;
	line-height:2;
	letter-spacing:0.05em;
	
}



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

.trp_cm01_bg01 {
	position: absolute;
	top:67.1vw;
	left: 50%;
	margin-left:30.9vw;
	width:9.3vw;
	height:auto;
}

.trp_cm01_bg02 {
	position: absolute;
	top:59.6vw;
	left: 50%;
	margin-left:26.9vw;
	width:6.9vw;
	height:auto;
}

.trp_cm01_bg03 {
	position: absolute;
	top:78.3vw;
	left: 50%;
	margin-left:13.9vw;
	width:8.3vw;
	height:auto;
}



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

.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:26vw;
	margin-left:0;
	display:inline-block;
	width:66.6vw;
	height:auto;
}

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

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


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


.trp_cm02_text_set{
	position:relative;
	top:4vw;
	left:50%;
	margin-left:-1vw;
}


.trp_cm02_title{
	width:41.4vw;
	height:auto;
}

.trp_cm02_text{
	margin-top:5vw;
	margin-left:0;
	font-size:3.2vw;
	font-weight:bold;
	line-height:2;
	letter-spacing:0.05em;
}


.trp_cm_read01{
	position:relative;
	margin-top:10vw;
	margin-bottom:0;
	text-align:center;
	font-size:3.2vw;
	font-weight:bold;
	line-height:2;
	letter-spacing:0.05em;
}

.trp_cm_read02{
	margin-top:2vw;
	margin-bottom:10vw;
}


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

.trp_cm02_bg01 {
	position: absolute;
	top:-93.9vw;
	left: 50%;
	margin-left:-41.3vw;
	width:7.2vw;
	height:auto;
}

.trp_cm02_bg02 {
	position: absolute;
	top:-32.5vw;
	left: 50%;
	margin-left:-40.0vw;
	width:6.4vw;
	height:auto;
}

.trp_cm02_bg03 {
	position: absolute;
	top:-23.3vw;
	left: 50%;
	margin-left:-22.1vw;
	width:8.5vw;
	height:auto;
}




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

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

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

.trp_attention_title{
	position:relative;
	width:35.3vw;
	height:auto;
}

.trp_attention01_set{
	position:relative;
	margin-top:0;
	margin-left:0;
	height:auto;
}

.trp_attention01_caption{
	position:relative;
	width:73.7vw;
	height:auto;
	margin:8vw auto 5vw;
	
}

.trp_attentionp01_text{
	position:relative;
	width:70vw;
	margin:0 auto 8vw;
	font-size:3.2vw;
	line-height:1.8;
	font-weight:bold;
}

.trp_attention01_img{
	position:relative;
	top:0;
	right:auto;
	width:75vw;
	height:auto;
	margin:auto;
}


 /* アコーディオン01 */
.trp_attention01_ac_box01_set{
	position:relative;
	width:73.6vw;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: flex-start; /* ← stretch から変更 */
	margin:5vw auto 0;
}

.trp_attention01_ac_box01_set img{
	width:100%;
	height:auto;
}

.trp_attention01_ac_box01_set .trp_attention01_img_caption{
	width:55.3vw;
	height:auto;
}

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

.trp_attention01_ac_box01 img{
	margin-top:5vw
}

.trp_attention01_ac_box01.open {
	height: auto; /* ← JSでは使わないが指定しておくと安心 */
}
 /* アコーディオン01 */
 
 
 /* アコーディオン05 */
.trp_attention05_ac_box01_set{
	position:relative;
	width:73.6vw;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: flex-start; /* ← stretch から変更 */
	margin:5vw auto 5vw;
}

.trp_attention05_ac_box01_set img{
	width:100%;
	height:auto;
}

.trp_attention05_ac_box01_set .trp_attention05_img_caption{
	width:54.1vw;
	height:auto;
}

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

.trp_attention05_ac_box01 img{
	margin-top:5vw;
}

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

 /* アコーディオン02 */
.trp_attention02_ac_box01_set{
	position:relative;
	width:73.6vw;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: flex-start; /* ← stretch から変更 */
	margin:5vw auto 0;
}

.trp_attention01_ac_box02_set img{
	width:100%;
	height:auto;
}

.trp_attention02_img_caption{
	width:31.8vw;
	height:auto;
}

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

.trp_attention02_ac_box01 img{
	margin-top:5vw;
}



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


 /* アコーディオン02 */

.trp_attention02_set{
	position:relative;
	margin-top:8vw;
	margin-left:0;
	height:auto;
}

.trp_attentionp02_text{
	position:relative;
	width:70vw;
	margin:0 auto 8vw;
	font-size:3.2vw;
	line-height:1.8;
	font-weight:bold;
}

.trp_attention02_caption{
	position:relative;
	width:73.8vw;
	height:auto;
	margin:8vw auto 5vw;
	
}

.trp_attention02_img{
	position:relative;
	top:0;
	right:auto;
	width:73.2vw;
	height:auto;
	margin:auto;
}

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

.trp_attention01_bg01 {
	position: absolute;
	top:-80.8vw;
	left: 50%;
	margin-left:-34.1vw;
	width:7.5vw;
	height:auto;
}

.trp_attention01_bg02 {
	position: absolute;
	top:-38.3vw;
	left: 50%;
	margin-left:-42.1vw;
	width:7.5vw;
	height:auto;
}

.trp_attention01_bg03 {
	position: absolute;
	top:-73.1vw;
	left: 50%;
	margin-left:33.1vw;
	width:5.9vw;
	height:auto;
}

/* データで見る交通安全バッジ */
.trp_attention01_bg04 {
	position: absolute;
	top:-5vw;
	left: 50%;
	margin-left:28.7vw;
	width:7.5vw;
	height:auto;
}

.trp_attention01_bg05 {
	position: absolute;
	top:153.0vw;
	left: 50%;
	margin-left:-44.8vw;
	width:4.8vw;
	height:auto;
}

.trp_attention01_bg06 {
	position: absolute;
	top:178.0vw;
	left: 50%;
	margin-left:39.3vw;
	width:5vw;
	height:auto;
}



/* サイネージ */
.trp_signage{
	position:relative;
	width:calc(100% - 5vw);
	margin:12vw auto 7vw;
}

.trp_signage_label{
	position:relative;
	left:50%;
	margin-left:-45.2vw;
	margin-top:0;
	width:21.3vw;
	height:auto;
}


.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:-2vw;
	left:50%;
	margin-left:-44.8vw;
	width:34vw;
	height:auto;
	
	/* 回転の中心を中央に */
	transform-origin: center center;

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

.trp_signage_photo{
	position:relative;
	left:0;
	margin-left:0;
	margin-top:8.6vw;
	width:100%;
	height:auto;
	
}

.trp_signage_btn{
	width:44vw;
	height:auto;
}

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


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

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

.trp_signage_list{
	width:100%;
	height:auto;

}





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

.trp_signage_bg01 {
	position: absolute;
	top:-5vw;
	left: 50%;
	margin-left:38.6vw;
	width:4.2vw;
	height:auto;
}

.trp_signage_bg02 {
	position: absolute;
	top:-2vw;
	left: 50%;
	margin-left:35.2vw;
	width:2.6vw;
	height:auto;
}

.trp_signage_bg03 {
	position: absolute;
	top:71.7vw;
	left: 50%;
	margin-left:-44.8vw;
	width:5.8vw;
	height:auto;
}

.trp_signage_bg04 {
	position: absolute;
	top:77.9vw;
	left: 50%;
	margin-left:-37.3vw;
	width:3.2vw;
	height:auto;
}







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

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

.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:2.5vw;
	margin-left:0;
	display:inline-block;
	width:66.6vw;
	height:auto;
}


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

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

.trp_make01_text_set{
	position:relative;
	top:0;
	left:2.5vw;
	margin-left:0;
}

.trp_make01_title{
	position:absolute;
	top:-49.6vw;
	left:0;
	width:17.7vw;
	height:auto;
}



.trp_make01_text{
	margin-top:3vw;
	margin-left:0;
	font-size:2.6vw;
	font-weight:bold;
	line-height:2;
}

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

.trp_make_bg01 {
	position: absolute;
	top:6.9vw;
	left: 50%;
	margin-left:-29.9vw;
	width:4.5vw;
	height:auto;
}

.trp_make_bg02 {
	position: absolute;
	top:12.4vw;
	left: 50%;
	margin-left:-37.3vw;
	width:3.5vw;
	height:auto;
}

.trp_make_bg03 {
	position: absolute;
	top:60.8vw;
	left: 50%;
	margin-left:31.5vw;
	width:3.8vw;
	height:auto;
}

.trp_make_bg04 {
	position: absolute;
	top:66.7vw;
	left: 50%;
	margin-left:37.9vw;
	width:3.5vw;
	height:auto;
}

.trp_make_bg05 {
	position: absolute;
	top:122vw;
	left: 50%;
	margin-left:-39.3vw;
	width:5vw;
	height:auto;
}

.trp_make_bg06 {
	position: absolute;
	top:178.7vw;
	left: 50%;
	margin-left:-37.6vw;
	width:3.5vw;
	height:auto;
}



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

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

.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:-21.9vw;
	display:inline-block;
	width:66.6vw;
	height:auto;
}

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

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

.trp_interview01_text_set{
	position:relative;
	top:0;
	left:auto;
	right:2.5vw;
	margin-left:0;
}


.trp_interview01_title{
	position:absolute;
	top:-49.6vw;
	left:50%;
	margin-left:23.6vw;
	width:20.9vw;
	height:auto;
}



.trp_interview01_text{
	margin-top:3vw;
	margin-left:0;
	font-size:2.6vw;
	font-weight:bold;
	line-height:2;
	text-align:right;
}





/* ライン */
.trp_line01_bg{
	position:relative;
	left:0;
	margin:0 auto 16vw;
	z-index:1;
	mix-blend-mode: multiply; /* 乗算 バッジ用 */
	width:81vw;
	height:auto;
}



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

.trp_bar02{
	height:11.5vw;
}

.trp_bar02_inner{
	height:11.5vw;
}


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

.trp_bar02_shadow{
	height:11.5vw;
}

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

.trp_bar02_shadow_inner{
	height:11.5vw;
}


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


.trp_attention02_title{
	position:absolute;
	width:100%;
	height:auto;
	top:3.5vw;
	left:0;
	margin-left:0;
}

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


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

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


.trp_attention02_text{
	position:relative;
	padding-top:20vw;
	left:50%;
	margin-left:-34.9vw;
	font-weight:bold;
	font-size:3.2vw;
	line-height:2;
	letter-spacing:0.05em;
}



.trp_attention_box02{
	padding-bottom:0;
}

.trp_attention03_img{
	position:relative;
	left:0;
	margin:7vw auto 7vw;
	width:72.9vw;
}



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

.trp_attention02_bg01 {
	position: absolute;
	top:10.9vw;
	left: 50%;
	margin-left:31.2vw;
	width:5.9vw;
	height:auto;
}

.trp_attention02_bg02 {
	position: absolute;
	top:14.7vw;
	left: 50%;
	margin-left:-40.7vw;
	width:5.9vw;
	height:auto;
}

.trp_attention02_bg03 {
	position: absolute;
	top:38.4vw;
	left: 50%;
	margin-left:-42.7vw;
	width:4.8vw;
	height:auto;
}

.trp_attention02_bg04 {
	position: absolute;
	top:45.5vw;
	left: 50%;
	margin-left:-39.6vw;
	width:5.6vw;
	height:auto;
}

.trp_attention02_bg05 {
	position: absolute;
	top:85.6vw;
	left: 50%;
	margin-left:37.3vw;
	width:4.5vw;
	height:auto;
}



/* アテンションバー */
.trp_bar03_box{
	position:relative;
}

.trp_bar03{
	top:19.3vw;
	height:11.5vw;
}

.trp_bar03_inner{
	height:11.5vw;
}


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

.trp_bar03_shadow{
	height:11.5vw;
	top:19.3vw;
}

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

.trp_bar03_shadow_inner{
	height:11.5vw;
}



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

.trp_rule_title{
	position:absolute;
	top:19.3vw;
	margin-top:5.5vw;
	left:0;
	margin-left:0;
	z-index:4;
	width:100vw;
	height:auto;
}

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


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

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


.trp_rule_img{
	position:relative;
	top:19.3vw;
	left:50%;
	margin-left:-18.9vw;
	z-index:4;
	width:36.7vw;
	height:auto;
	
}


.trp_rule_read01{
	position:relative;
	top:22vw;
	left:0;
	margin-left:0;
	font-size:3.2vw;
	line-height:2;
	font-weight:bold;
	text-align:center;
	letter-spacing:0.05em;
}


.trp_rule01_set{
	position:relative;
	top:0;
	padding-top:15vw;
	text-align:center;
}

.trp_rule01_text01{
	position:relative;
	font-size:3vw;
	line-height:1;
	font-weight:bold;
	color:#2421d2;
	letter-spacing:0.05em;
}

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

.trp_rule_btn01{
	position:relative;
	margin:1vw auto 0;
	width:62vw;
	height:auto;
	display:block;
}

.trp_rule_btn01 img{
	width:100%;
	height:auto;
}


/* 応募要項 */
.trp_rule02_set{
	position:relative;
	top:0;
	margin-top:5vw;
	text-align:center;
}


.trp_rule02_caption{
	text-align:center;
	font-size:3.2vw;
	font-weight:bold;
	line-height:1;
	letter-spacing:0.05em;
}

.trp_rule02_text01{
	text-align:left;
	width:73vw;
	font-size:3vw;
	font-weight:bold;
	margin:3vw auto 9vw;
	line-height:2;
	letter-spacing:0.05em;
}

.trp_rule02_img01{
	position:relative;
	left:0;
	margin:0 auto 10vw;
	width:100%;
	height:auto;
}




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

.trp_rule_bg01 {
	position: absolute;
	top:35.8vw;
	left: 50%;
	margin-left:31.5vw;
	width:6.7vw;
	height:auto;
	z-index:3;
}

.trp_rule_bg02 {
	position: absolute;
	top:40vw;
	left: 50%;
	margin-left:38.6vw;
	width:3.5vw;
	height:auto;
	z-index:3;
}

.trp_rule_bg03 {
	position: absolute;
	top:59.7vw;
	left: 50%;
	margin-left:-42.4vw;
	width:5.3vw;
	height:auto;
	z-index:3;
}

.trp_rule_bg04 {
	position: absolute;
	top:87.7vw;
	left: 50%;
	margin-left:35.2vw;
	width:4.5vw;
	height:auto;
	z-index:3;
}

.trp_rule_bg05 {
	position: absolute;
	top:-8.3vw;
	left: 50%;
	margin-left:-39.5vw;
	width:4.0vw;
	height:auto;
	z-index:3;
}

.trp_rule_bg06 {
	position: absolute;
	top:5vw;
	left: 50%;
	margin-left:-42.5vw;
	width:4.0vw;
	height:auto;
	z-index:3;
}

.trp_rule_bg07 {
	position: absolute;
	top:8vw;
	left: 50%;
	margin-left:-39.5vw;
	width:4.0vw;
	height:auto;
	z-index:3;
}






/* Xキャンペーンバー */
.trp_bar04_box{
	position:relative;
}

.trp_bar04{
	height:11.5vw;
}

.trp_bar04_inner{
	height:11.5vw;
}


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

.trp_bar04_shadow{
	height:11.5vw;
}

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

.trp_bar04_shadow_inner{
	height:11.5vw;
}




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


.trp_goods_title{
	position:absolute;
	top:3.5vw;
	left:0;
	margin-left:0;
	z-index:4;
	width:100vw;
	height:auto;
}

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


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

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

.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;
}




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

.trp_entry02{
	position:relative;
	width:calc(100% - 5vw);
	margin:0 auto 0;
	padding-top:53.7vw;
}



.trp_entry_caption{
	text-align:center;
	font-size:3.2vw;
	font-weight:bold;
	line-height:1;
	letter-spacing:0.05em;
}


.trp_entry_text01{
	position:relative;
	text-align:left;
	font-size:3.2vw;
	font-weight:bold;
	margin-top:0;
	margin-bottom:0;
	line-height:2;
	left:7.4vw;
	margin-left:0;
	letter-spacing:0.05em;
}


.trp_entry_text02{
	text-align:left;
	width:73vw;
	font-size:3vw;
	font-weight:bold;
	margin:3vw auto 9vw;
	line-height:2;
	letter-spacing:0.05em;
}



.trp_entry_img{
	position:relative;
	left:0;
	margin:0 auto 16.8vw;
	z-index:4;
	width:100%;
	height:auto;
	
}

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


/* Xキャンペーン */
.trp_campaign_btn01{
	position:relative;
	margin:5vw auto 5vw;
	width:79vw;
	height:auto;
	display:block;
}

.trp_campaign_btn01 img{
	width:100%;
	height:auto;
}




/* ライン */
.trp_line02_bg{
	position:relative;
	left:0;
	margin:0 auto 9.3vw;
	z-index:1;
	mix-blend-mode: multiply; /* 乗算 バッジ用 */
	width:85vw;
	height:auto;
}

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

.trp_campaign_bg01 {
	position: absolute;
	top:10.3vw;
	left: 50%;
	margin-left:18.4vw;
	width:6.4vw;
	height:auto;
	z-index:3;
}

.trp_campaign_bg02 {
	position: absolute;
	top:15.6vw;
	left: 50%;
	margin-left:12.4vw;
	width:6.7vw;
	height:auto;
}

.trp_campaign_bg03 {
	position: absolute;
	top:36.8vw;
	left: 50%;
	margin-left:32.9vw;
	width:5.1vw;
	height:auto;
}

.trp_campaign_bg04 {
	position: absolute;
	top:84.8vw;
	left: 50%;
	margin-left:39.6vw;
	width:4.0vw;
	height:auto;
}

.trp_campaign_bg05 {
	position: absolute;
	top:93.9vw;
	left: 50%;
	margin-left:35.2vw;
	width:4.0vw;
	height:auto;
}

.trp_campaign_bg06 {
	position: absolute;
	top:135.5vw;
	left: 50%;
	margin-left:-37.6vw;
	width:4.5vw;
	height:auto;
}

.trp_campaign_bg07 {
	position: absolute;
	top:144.3vw;
	left: 50%;
	margin-left:-42.1vw;
	width:5.1vw;
	height:auto;
}

.trp_campaign_bg08 {
	position: absolute;
	top:158.9vw;
	left: 50%;
	margin-left:38.4vw;
	width:4.0vw;
	height:auto;
}

.trp_campaign_bg09 {
	position: absolute;
	top:223.5vw;
	left: 50%;
	margin-left:-38.1vw;
	width:4.3vw;
	height:auto;
}




/* ポスターコンクール */
/* 追加分 */
.trp_cmp_read_set{
	position:relative;
	display:flex;
	width:74.1vw;
	margin:6vw auto 6vw;
	display: block;          /* Flexbox有効化 */
	align-items: center;    /* 縦方向中央揃え */
	justify-content: center;/* 横方向中央揃え（必要なら） */
}


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

.trp_cmp01_read_text{
	position:relative;
	margin-top:2.8vw;
	font-size:2.8vw;
	line-height:1.8;
	font-weight:bold;
	margin-left:0;
	text-align:left;
	letter-spacing:0.05em;
}


.trp_cmp{
	position:relative;
	width:calc(100% - 5vw);
	margin:0 auto 10vw;
}

.trp_cmp_box{
	position:relative;
	width:80vw;
	margin:0 auto 0;
	border-radius:4vw;
	box-shadow: 4px 4px 0px rgba(0,0,0,1);
	overflow:hidden;
	padding-bottom:10vw;
}

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

.trp_cmp_set{
	position:relative;
}

.trp_cmp_title{
	width:48.2vw;
	height:auto;
}

.trp_cmp01_set{
	position:relative;
	top:0;
	left:50%;
	margin-left:-37.6vw;
	width:74vw;
}

.trp_cmp02_set{
	position:relative;
	top:5vw;
	left:50%;
	margin-left:-37.6vw;
	width:74vw;
	clear:both;
	padding-top:3vw;
}


.trp_cmp01_caption01{
	position:relative;
	font-size:3.2vw;
	line-height:1;
	font-weight:bold;
	margin-bottom:5vw;
	text-align:center;
	letter-spacing:0.05em;
}

.trp_cmp01_left_set{
	position:relative;
	width:16.0vw;
	float:left;
}

.trp_cmp01_right_set{
	position:relative;
	float:left;
	width:50vw;
	margin-top:0;
}

.trp_cmp01_text01{
	position:absolute;
	width:100vw;
	top:0.5vw;
	left:0;
	margin-left:18.5vw;
	font-size:2.6vw;
	line-height:1;
	font-weight:bold;
	text-align:left;
	margin-top:0vw;
	letter-spacing:0.05em;
}

.trp_cmp01_img02{
	position:relative;
	width:14.4vw;
	height:auto;
	margin-top:6vw;
	margin-left:3vw;
}

.trp_cmp01_text02{
	position:absolute;
	top:6.5vw;
	left:0;
	margin-left:19.5vw;
	font-size:2.5vw;
	line-height:1.5;
	font-weight:bold;
	text-align:left;
	margin-top:0;
	display:block;
	width:31vw;
	letter-spacing:0.05em;
}



.trp_cmp_other_title{
	font-size:3.2vw;
	line-height:1;
	font-weight:bold;
	text-align:center;
	margin-top:7vw;
	margin-bottom:5vw;
	letter-spacing:0.05em;
}


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

.trp_cmp_other_text01{
	font-size:2vw;
	line-height:1.6;
	font-weight:bold;
	text-align:center;
	margin-top:2vw;
	letter-spacing:0;
	color:#0d6f5d;
	letter-spacing:0.05em;
}


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



.trp_cmp_other01_set{
	width:100%;
}

.trp_cmp_other_img{
	width:12vw;
	height:auto;
	margin:auto;
}




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

.trp_cmp_bg01 {
	position: absolute;
	top:10.8vw;
	left: 50%;
	margin-left:-41.1vw;
	width:6.4vw;
	height:auto;
	z-index:3;
}

.trp_cmp_bg02 {
	position: absolute;
	top:101.6vw;
	left: 50%;
	margin-left:38vw;
	width:4.0vw;
	height:auto;
	z-index:3;
}

.trp_cmp_bg03 {
	position: absolute;
	top:105.9vw;
	left: 50%;
	margin-left:41.7vw;
	width:4.5vw;
	height:auto;
	z-index:1;
}

.trp_cmp_bg04 {
	position: absolute;
	top:156.5vw;
	left: 50%;
	margin-left:-44.2vw;
	width:4.5vw;
	height:auto;
	z-index:1;
}

.trp_cmp_bg05 {
	position: absolute;
	top:161.3vw;
	left: 50%;
	margin-left:-41.3vw;
	width:7.5vw;
	height:auto;
	z-index:1;
}


/* 活動用 */

.trp_cmp_bg06 {
	position: absolute;
	top:calc(161.3vw + 45.5vw);
	left: 50%;
	margin-left:37.3vw;
	z-index:1;
	width:3.5vw;
	height:auto;
}

.trp_cmp_bg07 {
	position: absolute;
	position: absolute;
	top:calc(161.3vw + 125.5vw);
	left: 50%;
	margin-left:-42.3vw;
	z-index:1;
	width:5vw;
	height:auto;
}

.trp_cmp_bg08 {
	position: absolute;
	top:calc(161.3vw + 133.5vw);
	left: 50%;
	margin-left:-35.3vw;
	z-index:1;
	width:4vw;
	height:auto;
}

.trp_cmp_bg09 {
	position: absolute;
	top:calc(161.3vw + 125.5vw);
	left: 50%;
	margin-left:35vw;
	z-index:1;
	width:3.5vw;
	height:auto;
}





/* 活動 */
.trp_activity{
}


.trp_activity_title{
	position:relative;
	left:0%;
	margin-left:0px;
	margin-top:11.7vw;
	margin-bottom:5vw;
}

.trp_activity_title img{
	width:100%;
	height:auto;
}

.trp_activity_read{
	position:relative;
	text-align:center;
	margin-bottom:5vw;
	font-size:2.8vw;
	line-height:1.8;
	font-weight:bold;
	letter-spacing:0.05em;
}







/* スクロールボックス */
.scroll_box{
	position:relative;
	margin:-5vw auto 10vw;
	height:20vw;
	margin-inline: auto;
	overflow-y:scroll;
	padding-right:5vw;
	box-sizing:border-box;
	text-align:left;
	text-align:left;
	width:60vw;
	font-size:2.4vw;
	line-height:1.8;
}

.scroll_box02{
	margin:-5vw auto 10vw;
}



.over:hover img{
	filter:none; /* 明るくして白っぽく見せる */
	animation:none;
}


 /* SP用アコーディオン03 */
.trp_attention01_ac_box03_set{
	position:relative;
	width:73.6vw;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: flex-start; /* ← stretch から変更 */
	margin:7vw auto 5vw;
}

.trp_attention01_ac_box03_set img{
	width:100%;
	height:auto;
}

.trp_attention01_ac_box03_set .trp_attention01_ac_box03_btn{
	width:27.8vw;
	height:auto;
	margin:0;
}

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

.trp_attention01_ac_box03 img{
	margin-top:5vw;
}

.trp_attention01_ac_box03.open {
	height: auto; /* ← JSでは使わないが指定しておくと安心 */
}
 /* SP用アコーディオン03 */
 
 
 
  /* SP用アコーディオン04 */
.trp_attention01_ac_box04_set{
	position:relative;
	width:73.6vw;
	display: flex;          /* Flexbox有効化 */
	flex-direction: column;     /* 縦方向に並べる */
	align-items: flex-start; /* ← stretch から変更 */
	margin:5vw auto 0;
}

.trp_attention01_ac_box04_set img{
	width:100%;
	height:auto;
}

.trp_attention01_ac_box04_set .trp_attention01_ac_box04_btn{
	width:27.8vw;
	height:auto;
	margin:0;
}

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

.trp_attention01_ac_box04 img{
	margin-top:5vw;
}

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




/* 要注意部分02の注釈 */
.trp_attention02_annotation{
	position:relative;
	width:100%;
	margin:5vw auto 0;
}

.trp_attention02_annotation img{
	position:relative;
	width:100%;
	height:auto;
}






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

.splide img{
	position:relative;
	width:65vw;
	height:auto;
}


.custom-pagination {
	display: flex;
	justify-content: center;
	margin-top:5vw;
}

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

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






/* SP/PC用 */
.rps_del{
	display:none;
}
.rps_visible{
	display:block;
}




}