/* CSS Document */


/*- menu -*

変更領域, fv

* filetop *
------------------------------------------------------------------------------------------------------------------------------------------*/

/*- File name [ style.css ] -*/

/*------------------------------------------------------------------------------------------------------------------------------------------

* 変更領域

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/

.m-plus-rounded-1c {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-style: normal;
}

.noto-sans-jp {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.noto-serif-jp {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/*- body -*/
body,
body * {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	color: #333;
}

/*- footer -*/
footer .inner {
	background: #003364;
	padding: clamp(36px, 12.5vw, 160px) clamp(10px, 2.6041vw, 20px) clamp(80px, 8.75vw, 112px);
}

/* footer .inner::before{
	content: "";
	display: block;
	background: url("../img/index/footer/present_box.png") no-repeat center;
	background-size: auto 100%;
	min-width: 100%;
	height: clamp(64px, 9.21875vw, 118px);
	width: 100%;
	transform: translateY(-75%);
	position: absolute;
	left: 0;
	top: 0;
} */

footer .inner p {
	color: #FFFFFF;
}

/*- main -*/
main {}

/*- title -*/
h3.title span {
	border-color: #000000;
	font-weight: 700;
}

/*- box_center -*/
.box_center {
	padding-inline: clamp(10px, 2.6041vw, 20px);
}

.box_center>* {}

/*- top -*/
#top {}

/*- btm -*/
#btm {}

/*- rule -*/


/*- method -*/


/* returnTop */
#returnTop {
	bottom: calc(clamp(64px, 16vw, 126px) + 10px);
}


/* ar_sp */
.ar_sp a {
	/* background-color: #006FB1;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 900; */
}





/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {

	/*- rule -*/


	/*- method -*/


}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {

	/* returnTop */
	#returnTop {
		bottom: 10px;
	}

}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {

	/* returnTop */
	#returnTop {
		bottom: 20px;
	}

}







/*------------------------------------------------------------------------------------------------------------------------------------------

* box_border

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
*[class*="box_border"] {
	position: relative;
}

*[class*="box_border"]::before {
	content: "";
	display: block;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: auto 100% !important;
	min-width: 100%;
	height: clamp(12px, 1.875vw, 24px);
	width: 100%;
	transform: translateY(-50%);
	position: absolute;
	left: 0;
	top: 0;
}

.box_border_dd3730::before {
	/* background-image: url("../img/index/border01.png"); */
}

.box_border_e4b740::before {
	/* background-image: url("../img/index/border02.png"); */
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {}







/*------------------------------------------------------------------------------------------------------------------------------------------

* fv

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
.fv .fv_box {
	background: url("../img/index/fv/pc_bg.png") no-repeat center;
	background-size: auto 100%;
}

.fv .fv_box img {
	margin-right: auto;
	margin-left: auto;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {}







/*------------------------------------------------------------------------------------------------------------------------------------------

* about

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#about {
	background-color: #002459;
	padding-bottom: clamp(35px, 5.46875vw, 70px);
}

#about>.inner {
	padding-inline: clamp(10px, 2.6041vw, 20px);
}

#about>.inner .image img {
	margin-inline: auto;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {

	#about>.inner {
		/*background: url("../img/index/about/bg.png") no-repeat center top;*/
		padding-inline: 0;
	}

}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {}







/*------------------------------------------------------------------------------------------------------------------------------------------

* ar_playing

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#ar_playing {
	background: url("../img/index/bg01.jpg") no-repeat center;
	background-size: cover;
}

#ar_playing>* {
	padding: clamp(32px, 5.46875vw, 70px) clamp(10px, 2.6041vw, 20px);
}

#ar_playing>*>*+* {
	margin-top: clamp(32px, 5.46875vw, 70px);
}

#ar_playing>* h3 img {
	margin-inline: auto;
	width: clamp(280px, 41.40625vw, 530px);
}

#ar_playing>* div.image img {
	margin-inline: auto;
}



.brd_gold {
	position: relative;
	padding-top: 5px;
	/* 擬似要素分の余白（必要に応じて調整） */
}

.brd_gold::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(3px, 2.171px + 0.221vw, 5px);
	/* 好きな太さに変更可能 */
	background: linear-gradient(to right,
			#F1C92E,
			#F8F1C5,
			#C39429,
			#F3E6AF);
}

/* lists */
#ar_playing .lists {
	border-radius: clamp(10px, 1.40625vw, 18px);
	background-color: #FFFFFF;
	padding: clamp(16px, 2.5vw, 32px) clamp(10px, 2.5vw, 32px);
	margin-inline: auto;
}

#ar_playing .lists * {
	color: #583f00;
}

#ar_playing .lists>*+* {
	margin-top: clamp(24px, 3.125vw, 40px);
}

#ar_playing .lists section>*+* {
	margin-top: 5px;
}

#ar_playing .lists section h4 {
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 700;
}

#ar_playing .lists section ul>li {
	text-indent: calc(clamp(1.2rem, 1.25vw, 1.6rem) * -1);
	padding-left: clamp(1.2rem, 1.25vw, 1.6rem);
	font-size: clamp(1.2rem, 1.25vw, 1.6rem);
}

#ar_playing .lists section ul>li+li {
	margin-top: 5px;
}

.clm2 {
	display: flex;
	flex-direction: column-reverse;
}

.movie {
	text-align:center;
}

.btn_ar{
	display:inline-block;
	max-width:270px;
	margin: 34px auto 0 auto;
}

.v_item {
	position: relative;
	width: clamp(138px, 86.619px + 13.702vw, 262px);
	padding-top: 10px;
	background: #000;
	margin: 34px auto 0 auto;
}

.v_item+p {
	color: #fff;
	margin-top: 0.5em;
	font-size: 1.4rem;
	text-align: center;
}

.v_item>video {
	width: 94%;
	display: block;
	height: auto;
	margin: 0 auto;
}


.v_item .frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {

	/* lists */
	#ar_playing .lists {
		width: clamp(340px, 70.3125vw, 900px);
	}

}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {

	.clm2 {
		width: 978px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: row;
	}

	.movie {

	}

	.btn_ar{
		display:none;
	}

	.v_item {
		margin-top:0;
		padding-top: 15px;
	}

	.v_item+p {
		text-align: left;
	}

	.v_item>video {}


	.v_item .frame {}

}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {}







/*------------------------------------------------------------------------------------------------------------------------------------------

* friend

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#friend {
	background: url("../img/index/bg02.jpg") repeat center;
	padding: clamp(32px, 5.46875vw, 70px) clamp(10px, 2.6041vw, 20px);
}

#friend .contents {
	border: clamp(2px, 0.3125vw, 4px) solid #AB1E2C;
	border-radius: clamp(18px, 2.5vw, 32px);
	background-color: #FFFFFF;
	padding: clamp(28px, 5vw, 64px) clamp(16px, 2.1875vw, 28px) clamp(20px, 3.28125vw, 42px);
	margin-inline: auto;
	width: clamp(340px, 70.3125vw, 900px);
}

#friend .contents img {
	margin-inline: auto;
}

#friend .contents p.btn_newmember {
	text-align: center;
	margin-top: clamp(24px, 2.5vw, 32px);
}

#friend .contents p.btn_newmember * {
	display: inline-block;
}

#friend .contents p.btn_newmember a:hover {
	opacity: 0.7;
}

#friend .contents .about,
#friend .contents .about ul {
	margin-top: clamp(24px, 5vw, 64px);
}

#friend .contents .about ul {
	display: grid;
	row-gap: clamp(16px, 3.75vw, 48px);
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {}







/*------------------------------------------------------------------------------------------------------------------------------------------

* banner

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#banner {
	background: url("../img/index/bg03.jpg") repeat center;
}

#banner>* {
	margin-inline: auto;
	max-width: 1040px;
	padding: clamp(35px, -4.365px + 10.497vw, 130px) clamp(36px, 5.46875vw, 70px);
}

#banner>*>*+* {
	margin-top: 14px;
}

#banner>* img {
	margin-inline: auto;
}

#banner>* h3 img {
	width: clamp(250px, 39.0625vw, 500px);
}

#banner>* div img {
	width: clamp(300px, 65.625vw, 840px);
}

#banner>* div a:hover {
	opacity: 0.7;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {}







/*------------------------------------------------------------------------------------------------------------------------------------------

* Add Sample Code

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 768px) {}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1024px) {}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,
screen and (min-width: 1280px) {}