@charset "utf-8";

/********************************************************************************
/*
/* root
/*
/*******************************************************************************/
:root {
	/* カラーパレット */
	--color: #fff;
	--blue: #00A5F8;
	--green: #279BA5;
	--gray: #71767B;

	/* 特定カラー */
	--at: #FE8A9E; /*注意喚起*/
	--link: #00A5F8;
	--txtf: #279BA5;

	/* フォントファミリー */
	--font: "Noto Sans JP",'YakuHanJPs','Noto Sans JP', 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'Osaka', 'MS PGothic', -apple-system, BlinkMacSystemFont, arial, helvetica, sans-serif;

	/* 大枠 */
	--html-font-size: 62.5%;
	--body-bg: #000;
	--body-font-size: 1.6rem;
	--body-letter-spacing: 0;
	--body-line-height: 1.5;
	/*22px：1.5、28px：1.95、35px：2.4*/
	--body-text-align: left;
	--vw-rem: 0.26875rem;
	--px-rem: 0.0625rem;
	/*--px-spvw: calc( 1 /  375 );*/

	/* セレクタ */
	--sup-font-size: 45%;
	--sup-top: -1em;
	--sub-font-size: 45%;
	--placeholder: #7f7f7f;

	/* クラス */
	--kome-padding-left: 1.5em;
	--kome-text-indent: -1.5em;
	--komeblock-padding-left: 1.5em;
	--komeblock-text-indent: -1.5em;
	--hosoku: 1.3rem;
	--txtl: 120%;
	--txtm: 100%;
	--txtms: 90%;
	--txts: 70%;
	--sent: 0.3em;
}


/********************************************************************************
/*
/* reset
/*
/*******************************************************************************/
/***
    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
ul, ol, li
:where(:not(audio,canvas,html,iframe,img,svg,video):not(svg,symbol)){all:unset;display:revert}*,:after,:before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}menu,ol,summary,ul{list-style:none}ol{counter-reset:revert}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}::-webkit-details-marker{display:none}

/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
大枠 */

:where(:not(a, audio, canvas, html, iframe, img, svg, video):not(svg, symbol)) {vertical-align: bottom}
html{font-size:var(--html-font-size);-moz-text-size-adjust:none;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-y:scroll;margin:0;padding:0;border:0;text-align:left;}
body,select{font-family:var(--font);color:var(--color);background: var(--body-bg);font-size:var(--body-font-size);letter-spacing:var(--body-letter-spacing);line-height:var(--body-line-height);overflow-wrap:break-word;word-wrap:break-word;word-break:normal;text-align:var(--body-text-align)}
body{margin:0;padding:0;border:0;}
#wrapper{position:relative;overflow:hidden}
*,:after,:before{font-size: 3.721vw !important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}




/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
セレクタ */

/*------------------------------------------------------------------------------
個別セレクタ */

table{border-spacing:0;width:100%}
a,a dd,a div,a img,a li,a p,a:hover,a:hover div,a:hover img,a:hover p{-webkit-backface-visibility:hidden;backface-visibility:hidden}
a:focus{outline:0}
img{width:100%;height:auto;margin:0;padding:0;display:block}
sup{font-size:var(--sup-font-size);vertical-align:top;position:relative;top:var(--sup-top)}
sub{font-size:var(--sub-font-size);vertical-align:baseline;position:relative}	
.bold,.strong{font-weight:700}
a{display:inline-block;text-decoration:underline;color:var(--link) !important;opacity:1;transition:.5s ease}
a img{backface-visibility:hidden}
canvas.apng-image{width:100%}


/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
クラス */

.kome{padding-left:var(--kome-padding-left);text-indent:var(--kome-text-indent)}
.kome_block{padding-left:var(--komeblock-padding-left);text-indent:var(--komeblock-text-indent);display:block}
.kome *{text-indent:0}
.hosoku{font-size:var(--hosoku)}
.txtl,.txtm,.txtms,.txts{vertical-align:baseline}
.txtl{font-size:var(--txtl)}
.txtm{font-size:var(--txtm)}
.txtms{font-size:var(--txtms)}
.txts{font-size:var(--txts)}
.txtf{color:var(--txtf)}
.sent .pstyle+.pstyle,.sent p+.pstyle,.sent p+p{margin-top:var(--sent)}
.txt_none{text-indent:100%;white-space:nowrap;overflow:hidden;display:inline-block}
[class*=" iconfont_"]:before,[class^="iconfont_"]:before{vertical-align:baseline;text-decoration:none}
[class*=iconfont_],[class^=iconfont_]{line-height:inherit}


/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
option */

.tal{text-align:left!important}.tar{text-align:right!important}.tac{text-align:center!important}
.disp_b{display:block!important}.disp_ib{display:inline-block!important}.disp_in{display:inline!important}
.mb00{margin-bottom:0!important}.mt00{margin-top:0!important}
.pb00{padding-bottom:0!important}.pt00{padding-top:0!important}
.clearfix:after,.container:after{content:'';clear:both;display:block;height:0;font-size:0;visibility:hidden}



/*オリジナル*/
.inner {
	padding: 0 1rem;
}

.pc-main {
	display: none;
}

.tab_menu_head {
	border: 1px solid #2f3336;
	border-width: 1px 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	box-shadow: 0 calc(2 * var(--px-rem)) calc(4 * var(--px-rem)) rgba(14, 44, 47, 0.1);
}

.tab_menu_head > li {
	height: 12.3vw;
	display: grid;
	justify-content: center;
	align-items: center;
	align-content: center;
	justify-items: center;
	color: #fff;
	position: relative;
}

.tab_menu_head > li:before {
	position: absolute;
	content: "";
	height: 2px;
	background: var(--green);
	width: calc(155 * var(--px-rem));
	bottom: 0.05rem;
	left: 50%;
	transform: translate(-50%, 0%);
	transition: 0.5s ease;
	opacity: 0;
}

.tab_menu_head > li.is_active {
	color: var(--green);
	font-weight: 700;
}

.tab_menu_head > li.is_active:before {
	opacity: 1;
	transition: 0.5s ease;
}

.js_tab_content {
	display: none;
}

.js_tab_content.is_active {
	display: block;
}

.tab_con {
	padding: 1rem 0;
}

.tw_box {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 0.5rem;
	position: relative;
	padding-bottom: 1.5rem;
}

.tw_box .txt_block .name {
	font-weight: 700;
	position: relative;
}

.tw_box .txt_block .name_w_offi:after {
	position: absolute;
	content: "";
	background: url(../img/icon_official.png) no-repeat center center / contain;
	width: 1.125rem;
	height: 100%;
}

.tw_box .txt_block .icon {
	width: 1rem;
	display: inline-block;
	padding: 0 0.2rem;
	vertical-align: -0.1rem;
}

.tw_box .txt_block .img_block {
	margin-top: 1rem;
}

.tw_box .txt_block .img_block a {
	color: var(--gray) !important;
}

.tw_box .txt_block .img_block .img {
	overflow: hidden;
	border-radius: 1rem;
	box-shadow: 0 0 calc(4 * var(--px-rem)) rgba(14, 44, 47, 0.2);
}

.tw_box .txt_block .img_block .img + p {
	font-size: calc(13 * var(--px-rem)) !important;
	margin-top: 0.3rem;
}

.tw_box .txt_block .link_area {
	margin-top: 0.8rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.tw_box .txt_block .link_area *,
.tw_box .txt_block .promotion {
	font-size: calc(15* var(--px-rem)) !important;
	color: var(--gray) !important;
}

.tw_box .txt_block .link_area > li > *,
.tw_box .txt_block .promotion {
	position: relative;
	padding-left: 1.4rem;
}

.tw_box .txt_block .link_area > li > *:before,
.tw_box .txt_block .promotion:before {
	position: absolute;
	content: "";
	background: url(../img/icon_comment.png) no-repeat center center / contain;
	width: 1.125rem;
	height: 100%;
	top: 0.05rem;
	left: 0;
}

.tw_box .txt_block .link_area > li.retweet > *:before {
	background-image: url(../img/icon_retweet.png);
}

.tw_box .txt_block .link_area > li.heart > *:before {
	background-image: url(../img/icon_heart.png);
}

.tw_box .txt_block .link_area > li.view > *:before {
	background-image: url(../img/icon_view.png);
}

.tw_box .txt_block .promotion:before {
	background-image: url(../img/icon_promotion.png);
}

.tw_box .txt_block .link_area > li.heart span {
	color: var(--green) !important;
}

.tw_box .txt_block .link_area a {
	text-decoration: none;
}

.tw_box .txt_block .promotion {
	margin-top: 0.4rem;
}

.tw_block:not(.tw_block_recom) .tw_box:not(:last-of-type):before {
	position: absolute;
	content: "";
	z-index: 10;
	background: url(../img/dot.png) repeat-y center top / 0.125rem auto;
	height: calc(100% - 2.5rem);
	top: 2.5rem;
	width: 0.125rem;
	left: 1.125rem;
}

.tw_box .txt_block .txt_m {
	margin-top: 1.4rem !important;
}

.tw_box .txt_block .hash {
	padding-right: 0.2em;
}

.tw_box .txt_block p:has(.hash) {
	font-size: calc(15* var(--px-rem)) !important;
}

.tw_box .txt_block .txt_indent {
	padding-left: 1.4rem;
	text-indent: -1.4rem
}

.tl_lv01 {
	font-weight: 700;
	padding-bottom: 2rem;
}

.back_btn a {
	display: block;
	font-weight: 700;
	text-decoration: none;
	color: var(--color) !important;
	padding: 0.9rem 1rem;
	border-top: 1px solid #2f3336;
	margin-bottom: -1rem;
	position: relative;
}

.back_btn a:before {
	position: absolute;
	content: "";
	background: url(../img/icon_return.png) no-repeat center center / contain;
	width: calc(15 * var(--px-rem));
	aspect-ratio: 1 / 1;
	top: 50%;
	right: 1rem;
	transform: translate(0%, -50%);
}

#floatingButton {
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 0;
	line-height: 1;
	background: #fff;
	z-index: 100;
}

#floatingButton * {
	bottom: 0;
	left: 0;
	font-size: 0;
	line-height: 1;
	display: block;
}

footer {
	border-top: 1px solid #2f3336;
	padding-bottom: 4rem;
	text-align: center;
}

footer small {
	font-size: calc(12 * var(--px-rem)) !important;
	display: block;
	padding: 1.094rem;
}

@media screen and (min-width: 640px) {
	.pc-main {
		position: fixed;
		width: calc(50% - 215px);
		height: 100vh;
		align-content: center;
		display: grid;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
		justify-content: center;
	}
	.sp-main {
		width: 430px;
		box-shadow: 0 0 10px rgb(0 0 0 / .2);
		background: var(--body-bg);
		margin: 0 auto;
		min-height: 100dvh;
		border-left: 1px solid #2f3336;
		border-right: 1px solid #2f3336;
	}
	.side_logo {
		width: 228px;
	}
	*,
	 :after,
	 :before {
		font-size: 16px !important;
	}
	body {
		background: #000;
	}
	.tab_menu_head > li {
		height: 53px;
	}
	a,
	.tab_menu_head > li {
		opacity: 1;
		transition: 0.5s ease;
		cursor: pointer;
	}
	a:hover,
	.tab_menu_head > li:hover {
		opacity: 0.6;
		transition: 0.5s ease;
	}
	#floatingButton {
		width: 430px;
		bottom: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
}

@media screen and (min-width: 640px) and (max-width: 960px) {
	.sp-main {
		margin: 0 20px 0 auto;
	}
	.pc-main {
		width: calc(100% - 450px);
	}
	.side_logo {
		width: 25vw;
	}
	#floatingButton {
		left: inherit;
		right: 20px;
		transform: inherit;
	}
}