@charset "UTF-8";

/*
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* ========BASIC======== */
html * { max-height:1000000px; }

* {
	-webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを有効化 */
	scrollbar-width: thin;             /* Firefox用に細いスクロールバーを適用 */
	scrollbar-color: rgba(255,255,255,0.3) transparent; /* Firefox用に色を指定 */}
}

*::-webkit-scrollbar {
	width: 6px;  /* 縦スクロールバーの太さ */
	height: 6px; /* 横スクロールバーの太さ */
}



html {
/*   overflow-y:scroll; */
   height:100%;
}


body {
	margin:0;
	padding:0;
	line-height:1.3;
	letter-spacing:1px;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size:16px;
	color:#fff;
	background:#141426;
	overflow-y:scroll;
}

body.sc {
	background:#0f0e0e;
}


a {
	color:#ddd;
	text-decoration:underline;
}

a:hover {
	color:#fff;
}

.dnone {
	display:none;
}

img {
	max-width:100%;
	pointer-events: none;
}

.textindent {
	text-indent:-1em;
	margin-left:1em;
}


.font-sbold { font-weight: 600; }
.font-mbold { font-weight: 500; }
.font-bold { font-weight: 700; }

.flex1 { flex:1; }
.flex2 { flex:2; }
.flex3 { flex:3; }
.flex4 { flex:4; }
.flex5 { flex:5; }
.flex6 { flex:6; }
.flex7 { flex:7; }
.flex8 { flex:8; }
.flex9 { flex:9; }
.flex10 { flex:10; }
.flex11 { flex:11; }
.flex12 { flex:12; }

.font06 { font-size:0.6rem; }
.font07 { font-size:0.7rem; }
.font08 { font-size:0.8rem; }
.font10 { font-size:1.0rem; }
.font11 { font-size:1.1rem; }
.font12 { font-size:1.2rem; }
.font13 { font-size:1.3rem; }
.font14 { font-size:1.4rem; }
.font15 { font-size:1.5rem; }
.font16 { font-size:1.6rem; }
.font17 { font-size:1.7rem; }
.font18 { font-size:1.8rem; }
.font19 { font-size:1.9rem; }
.font20 { font-size:2.0rem; }
.font21 { font-size:2.1rem; }
.font22 { font-size:2.2rem; }
.font23 { font-size:2.3rem; }
.font24 { font-size:2.4rem; }
.font25 { font-size:2.5rem; }
.font26 { font-size:2.6rem; }
.font27 { font-size:2.7rem; }
.font28 { font-size:2.8rem; }
.font29 { font-size:2.9rem; }
.font30 { font-size:3.0rem; }

.font-color0 { color:#fff; }
.font-color1 { color:#bbb; }


.btn-01 {
	background-color:#ff6700;
	border-color:#ff6700;
	color:#fff;
}

.btn-01:hover {
	background-color:#ef5700 !important;
	border-color:#ef5700 !important;
	color:#fff;
}

.btn-01:focus-visible {
	background-color:#ef5700 !important;
	border-color:#ef5700 !important;
	color:#fff !important;
	opacity:0.8 !important;
}


.btn-02 {
	border-color:rgba(255,103,0,0.4);
	color:rgba(255,103,0,0.4);
}

.btn-02:hover {
	background-color:rgba(255,103,0,0.4) !important;
	border-color:rgb(255,103,0) !important;
	color:#fff;
}

.btn-02-ac {
	background-color:rgba(255,103,0,0.4) !important;
	border-color:rgb(255,103,0) !important;
	color:#fff;
}

input.postinput::placeholder {
	color: rgba(255,255,255,0) !important;
}

input.postinput:focus::placeholder {
	color: rgba(255,255,255,0.5) !important;
}


.scrollx {
	width:100%;
	overflow:auto;
	-webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを有効化 */
	scrollbar-width: thin;             /* Firefox用に細いスクロールバーを適用 */
	scrollbar-color: rgba(255,255,255,0.3) transparent; /* Firefox用に色を指定 */}
}

.scrollx::-webkit-scrollbar {
	width: 6px;  /* 縦スクロールバーの太さ */
	height: 6px; /* 横スクロールバーの太さ */
}

/* スクロールバーの背景（トラック） */
.scrollx::-webkit-scrollbar-track {
	background: transparent; /* 背景を透明にする */
}

/* スクロールバーのつまみ（サム） */
.scrollx::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3); /* 半透明の黒にする */
	border-radius: 10px;          /* 角を丸くしてスマホっぽくする */
}

/* スクロールバーのつまみ（サム） */
.scrollx::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.8); /* 半透明の黒にする */
	border-radius: 10px;          /* 角を丸くしてスマホっぽくする */
}





label {
	color:#fff !important;
}

input ,textarea ,select {
	background-color: rgba(20 ,20 ,38 ,0.75) !important;
	color:#fff !important;
}

::placeholder {
	color: #c6c6c6 !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

label.checkbox:has(input[type=checkbox]) {
	position:relative;
	margin:0;
	padding-left:0.4em;
}

label.checkbox:has(input[type=checkbox]):before {
	content: "\f0c8";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#999;
}

label.checkbox:has(input[type=checkbox]:disabled):before {
	content: "\f0c8";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#ccc;
}

label.checkbox:has(input[type=checkbox]:checked):before {
/*
	content: "\f14a";
*/
	content: "\f0c8";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#fff;
}

label.checkbox:has(input[type=checkbox]:checked):after {
/*
	content: "\f14a";
*/
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-solid);
	color:#ff6700;
	position:absolute;
	top:-0.05em;
	left:0.35em;
	font-size:1.2em;
}

label.checkbox:has(input[type=checkbox]:disabled) {
	opacity:0.6;
}

label.checkbox input[type=checkbox] {
	width:1px;
	opacity:0;
}


label.radio:has(input[type=radio]) {
	position:relative;
	margin:0;
	padding-left:0.4em;
}

label.radio:has(input[type=radio]):before {
	content: "\f111";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#999;
}

label.radio:has(input[type=radio]:disabled):before {
	content: "\f111";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#ccc;
}

label.radio:has(input[type=radio]:checked):before {
/*
	content: "\f058";
*/
	content: "\f111";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#fff;
}

label.radio:has(input[type=radio]:checked):after {
	content: "\f111";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-solid);
	color:#ff6700;
	position:absolute;
	top:0.9em;
	left:1.3em;
	font-size:0.5em;
}

label.radio:has(input[type=radio]:disabled) {
	opacity:0.6;
}

label.radio input[type=radio] {
	opacity:0;
	width:1px;
}

.checkbtn:before {
	content: "\f0c8";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#999;
}

.checkbtn-check:before {
	content: "\f14a";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-solid);
	color:#009;
}


.radiobtn:before {
	content: "\f111";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-regular);
	color:#999;
}

.radiobtn-check:before {
	content: "\f058";
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-solid);
	color:#009;
}


.tfilediv {
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:5em;
	background-color:#eee;
	border:1px solid #ccc;
}

.tfiledivfull {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:100%;
	height:100vh;
	z-index:1000;
	opacity:0;
}


.tfilediv .filecmt {
	color:#aaa;
}

.tfilediv input[type=file] {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
}


#contents {
	position:relative;
	width:100%;
	min-width:1280px;
	min-height:100svh;
	margin:0 auto;
	padding:0;
}

#main {
	position:relative;
	width:100%;
	padding:54px 0.1em 0 0.1em;
	padding:0.1em;
	min-height: calc(100svh - 65px);
}

#mainsub {
	position:relative;
	width:100%;
	padding:54px 0.1em 0 0.1em;
	padding:0 0.1em 0 0.1em;
	min-height: calc100svh;
}

#main.spwaku {
	margin:0 auto;
	max-width:575px;
}

#mainsub.spwaku {
	margin:0 auto;
	max-width:575px;
}



#header {
	position:fixed;
	top:0;
	right:0;
	height:60px;
	padding:5px 0;
	z-index:100;
}



.headerlogo img {
	height:50px;
}

.menubar {
	position:absolute;
	top:0;
	left:0;
	width:7vw;
	max-width:38px;
	padding:0.2em;
	z-index:1001;
}

.menubarclose {
	position:fixed;
	top:8px;
	right: 12px;
	width:7vw;
	max-width:38px;
	padding:0.2em;
	z-index:1;
}


#headermenu {
	position:fixed;
	top:0;
	right: 0;
	margin-right:-460px;
	background-color:#141426;
	width:80vw;
	max-width:460px;
	height:100vh;
	padding-top:60px;
	opacity:0;
	overflow:auto;
	z-index:-1;
	scrollbar-width: none;
	transition: all 0.3s;
}

#headermenu.sc {
	background:#0f0e0e;
}

#headermenu::-webkit-scrollbar {
	display: none;
}


#headermenu.open {
	margin-right:0;
	opacity:1;
	z-index:1000;
}

#headerbg {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100vh;
	background-color:rgba(0,0,0,0.4);
	z-index:999;
	transition: all 0.3s;
}

#headerbg.none {
	z-index:-1;
	background-color:rgba(0,0,0,0);
}

.headermenubtn {
	position:relative;
	display:block;
	width:7vw;
	max-width:38px;
	padding:0.2em;
}

#headermenu .userface {
	width:15vw;
	max-width:86px;
	aspect-ratio: 1 / 1;
	border-radius:50%;
	border:2px solid #fff;
	overflow:hidden;
}

#headermenu .userface img {
	width:100%;
	height:100%;
	object-fit:cover;
}

#headermenu .menukoumoku {
	min-height:544px;
}

#headermenu ul {
	list-style:none;
	margin:0;
	padding:0;
	border-top:1px solid #777;
}

#headermenu ul li {
	margin:0;
	padding:0 10px;
	border-bottom:1px solid #777;
}

#headermenu ul li a {
	position:relative;
	display:block;
	padding:20px 40px 20px 20px;
	color:#fff;
	font-size:1.2em;
	text-decoration:none;
}

#headermenu ul li a:hover {
	color:#fff;
	text-decoration:none;
}

#headermenu ul li a:after {
	content:"";
	position:absolute;
	top:50%;
	right:5px;
	margin-top:-0.7em;
	width:1.5em;
	height:1.5em;
	background:url(../images/common_icon_right.png) center right no-repeat;
	background-size:0.8em;
	opacity:0.8;
}

.logoutbtn {
	color:#ff6700;
}


.footermenu {
	position:fixed;
	bottom:0;
	left: 0;
	padding-top:5px;
	padding-bottom:50px;
	height: 100svh;
	width:240px;
	margin:0;
	background-color:#141426;
	overflow:auto;
	z-index:100;
	scrollbar-width: none;
}

.footermenu::-webkit-scrollbar {
	display: none;
}


.footermenu-sc {
	background:#0f0e0e;
}

.footermenu2 {
	height: 20vw;
	max-height:65px;
}

.footermenu ul {
	display:block;
	list-style:none;
	margin:0;
	padding:0;
}

.footermenu ul li {
	position:relative;
	display:block;
	width:100%;
	margin:30px 0;
	padding:0 10px;
}

.footermenu ul li a {
	display:block;
	max-width:240px;
	text-align:left;
	text-decoration:none;
	transition: all 0.3s;
}

.footermenu ul li a:hover {
	opacity:0.8;
}

.footmenutext {
	color:#fff;
}

.footer-text01 {
	color:#49526d;
}

.footlogout {
	position:absolute;
	bottom:0;
	left:0;
	width:240px;
	height:50px;

}

.footlogout .logoutbtn {
	color:#fff;
	text-decoration:none;
}




.alertpoint {
	position:absolute;
	top:2px;
	right:2px;
	width:12px;
	z-index:1;
}

.alertpointfooter {
	position:absolute;
	top:-2px;
	right:50%;
	margin-right:-20px;
	width:12px;
	z-index:1;
}


.posttitle-l ,.posttitle-r {
	width:15%;
	min-width:40px;
	white-space:nowrap;
}

.posttitle-l {
	text-align:left;
}

.posttitle-r {
	text-align:right;
}


.moviepostdialog {
	position:fixed;
	top:100vh;
	left:0;
	width:100%;
	height:100vh;
	z-index:5000;
	opacity:0;
	background-color:rgba(0,0,0,0.5);
	transition: opacity 0.3s ,top 0.3s;
}

.moviepostdialog-open {
	top:0;
	opacity:1;
}

.moviepostwaku {
	width:100%;
	height:100vh;
	max-width:800px;
	background-color:#141426;
}

.moviepostwaku-sc {
	background:#0f0e0e;
}

.moviepostclose ,.moviepostclose:hover ,.moviepostclose:active {
	font-size:2em;
	color:#fff !important;
}

.moviepostnext ,.moviepostnext:hover ,.moviepostnext:active {
	color:#ff6700 !important;
}

.moviepostnext:disabled {
	color:#df4700 !important;
	border:none;
}

.moviepostsubmit ,.moviepostsubmit:hover ,.moviepostsubmit:active {
	color:#ff6700 !important;
}

.moviepostsubmit:disabled {
	color:#df4700 !important;
	border:none;
}

.moviepostmain {
	position:relative;
	width:100%;
	height: calc(100svh - 65px);
	overflow:auto;
}

.mvmain {
	display:flex;
	jutify-content:center;
	align-items:center;
	margin:2px auto;
	width:100vw;
	max-width: 780px;
/*
	max-height: calc(50svh - 82.5px);
*/
/*
	border:1px solid #aaa;
*/
	aspect-ratio : 16 / 10;
}

.videowaku {
	width:100%;
	max-width:780px;
	height:auto;
	aspect-ratio : 16 / 10;
	overflow:hidden;
}


.mvmain video {
	width:100%;
	max-height:calc(50svh - 84px);
	aspect-ratio : 16 / 9;
	
}

.mvichiranmain {
	height: 0;
	overflow:auto;
	transition: all 0.3s;
}

.mvichiranmain-active {
	height: calc(50svh - 32.5px);
}

.mvichiranmain-full {
	height: calc(100svh - 65px);
}

.mvichiranwaku {
	height: calc(100svh - 65px);
	overflow:auto;
	transition: all 0.3s;
}

.mvichiranwaku-small {
	height: calc(50svh - 32.5px);
}

.mvichiranwaku-none {
	height: 0;
}

.mvfiledata {
	cursor:pointer;
}


.mvpostwaku {
	width:32%;
	margin:0.5%;
	aspect-ratio: 1 / 1;
	background-color:#ddd;
	cursor:pointer;
	overflow:hidden;
}

.mvpostwaku video {
	object-fit:cover;
	height:100%;
}


.mvpostwaku-dm {
	width:32%;
	margin:0.5%;
	aspect-ratio: 1 / 1;
}

.mvbtndata {
	position:fixed;
	right:50%;
	bottom:0;
	margin-right: -260px;
	padding-bottom:15px;
	padding-right:15px;
	text-align:right;
	z-index:5;
}

.mvpostline {
	margin-top:0.9em;
	border:1px solid #fff;
}



.mvbggray {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100vh;
	background-color:rgba(0,0,0,0.5);
	z-index:6000;
}

.alertwaku {
	width: 80vw;
	max-width:500px;
	border-radius:10px;
	border:1px solid #333333;
	background-color:#000;
}

.alertclbtn {
	width:100%;
	height:40px;
	color:#fff;
}

.alertline01 {
	border-top:1px solid #333333;
	border-right:1px solid #333333;
}

.alertline02 {
	border-top:1px solid #333333;
}

.alertsbbtn {
	width:100%;
	height:40px;
	color:#ff6700;
}

.alertsbbtn:hover ,.alertsbbtn:active {
	color:#ff6700 !important;
}

.mvalertwaku {
	width: 80vw;
	max-width:500px;
	padding:15px;
	color:#000;
	border-radius:12px;
	background-color:rgba(255,255,255,0.8);
	cursor:pointer;
}

.mvalertwaku2 {
	width: 80vw;
	max-width:500px;
	padding:15px;
	color:#000;
	border-radius:12px;
	background-color:rgba(255,255,255,0.8);
}


.mvprecate {
	position:absolute;
	right:3px;
	top:3px;
	color:#fff;
	font-size:0.6em;
	background-color:rgba(0,0,0,0.5);
	line-height:0.6em;
	padding:0.5em;
	border-radius: 1.2em;
}

.mvprewaku {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:60%;
	background-image:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0));
}


.movieface {
	width:10vw;
	max-width:57px;
	aspect-ratio: 1 / 1;
	border-radius:50%;
	overflow:hidden;
	border:2px solid #fff;
}

.movieface img {
	width:100%;
	height:100%;
	object-fit: cover;
}


#pceditwaku {
	position:fixed;
	top:0;
	left:0;
	width:0;
	height:0;
	overflow:auto;
	z-index:1
	background-color:#141426;
	opacity:0;
	transition: all 0.3s;
}

#pceditwaku.open {
	width:100%;
	height:100vh;
	opacity:1;
	background-color:#141426;
	z-index:1000;
}

#pceditwaku.pceditwaku-sc {
	background-color:#0f0e0e;
}

#pceditwaku iframe {
	margin:0 auto;
	border:0;
	width:100%;
	height:100vh;
	border:none;
}



/* パソコンonly用 */
@media screen and (min-width:576px){
	.sponly { display:none; }
	
	#contents {
/*
		background:url(../images/bg_common.webp) bottom center no-repeat;
		background-attachment: fixed;
		background-size:575px;
*/
	}
	
	#main {
		width: calc(100% - 240px);
		min-width:1040px;
		margin-left:240px;
		padding-top:40px;
		min-height: calc(100vh - 40px);
	}
	
	#main.spwaku {
		min-width:575px;
	}
	
	.alertpointfooter {
		position:absolute;
		top:-2px;
		left:55px;
		right:auto;
		margin-right:0;
		width:12px;
		z-index:1;
	}
	
	.mvbtndata {
		margin-right: -400px;
	}
	
}

/* スマホ用 */
@media screen and (max-width:575px){
	.pconly { display:none; }
	
	body {
	   font-size:3.2vw;
	}
	
	#contents {
		min-width:100%;
		background:url(../images/bg_common.webp) bottom center no-repeat;
		background-attachment: fixed;
		background-size:100%;
	}
	
	#contents.kanri {
		min-width:1280px;
	}
	
	#main {
		position:relative;
		width:100%;
		min-width:100%;
		min-height: calc(100svh - 20vw);
		padding:5px 0.1em 20vw 0.1em;
	}
	
	
	.menubarclose {
		right: 8px;
	}
	
	#header {
		position:sticky;
		top:0;
		left:0;
		width:100%;
		background-color:#141426;
	}
	
	#header.sc {
		background:#0f0e0e;
	}
	
	#headermenu {
		right:0;
		margin-right:-80vw;
	}
	
	#headermenu ul li a {
		padding:20px 40px 20px 20px;
	}
	
	.headerlogo img {
		height:40px;
	}
	
	
	.footermenu {
		left: 0;
		width:100%;
		height:20vw;
		margin:0 auto;
		padding-bottom:0;
	}
	
	.footermenu-sc {
		background:#0f0e0e;
	}
	
	.footermenu ul {
		display:flex;
		justify-content:space-between;
		list-style:none;
		margin:0;
		padding:0;
	}
	
	.footermenu ul li {
		position:relative;
		display:block;
		width:100%;
		margin:0;
		padding:0;
	}
	
	.footermenu ul li a {
		display:block;
		width: calc(20vw - 5px);
		max-width:115px;
		text-align:center;
		text-decoration:none;
		transition: all 0.3s;
	}
	
	.footermenu ul li a:hover {
		opacity:0.8;
	}
	
	.footmenutext {
		color:#fff;
		font-size:0.65rem;
	}
	
	
	.mvbtndata {
		position:fixed;
		right:0;
		bottom:0;
		margin-right: 0;
		padding-bottom:15px;
		padding-right:15px;
		text-align:right;
		z-index:5;
	}
	
	
}