@charset "utf-8";
/* topics detail css */

/* 【★注意★】管理画面＞TOPICS＞プレビュー画面でも読み込んでいます。（記事プレビュー再現のため）
　　なるべくbodyのidなど使用して影響ないよう記述してください */



/* ページタイトル */
#pagettl_wrap:after {
	background: rgba(0,0,0,.65);
	z-index: -1;
}
#pagettl_wrap .report-ttl {
    text-align: center;
    line-height: 1.2;	
}
#pagettl_wrap .report-ttl p,
#pagettl_wrap .report-ttl .ttl{
	font-weight: bold;
	letter-spacing: 0.2rem;
	width: 80%;
	margin: 0 auto;
	font-size: calc(100vw / ( 1900 / 40 ));
	font-family: inherit;
}
#pagettl_wrap .report-ttl .ttl{
	margin-top: 0.5rem;
	line-height:inherit;
}

/* sectionのタイトル */
section h2 {
	margin-bottom: 1.5rem;
	letter-spacing: 0.2rem;
}

/*=========================================
		シェアボタン
=========================================*/
#share-area dt {
    background: #9f8d39;
    padding: 0.5rem;
	text-align: center;
	color: #fff;
}
#share-area dt p { 
	letter-spacing: 0;
	display: inline-block;
}
#share-area dt p i {
	width: 20%;
    margin-right: 3px;
    display: inline-block;
}
#share-area img { vertical-align: baseline; }
#share-area dd { 
	background: #fff;
	padding: 1rem;
	text-align: center;
}
#share-area dd ul li { 
	width: 35px;
	height: 35px;
}
#share-area dd ul li a {
	width: 35px;
    height:35px;
	padding: 0.5rem;
	display: flex;
    align-items: center;
    justify-content: center;
}
#share-area .btn-x a { background: #000; }
#share-area .btn-x a svg { width: 80%; }
#share-area .btn-fb a { background: #315096; }
#share-area .btn-fb a img { width: 52%; }
#share-area .btn-copylink a { background: #007564; }
#share-area .btn-copylink a img { width: 76%; }
#share-area .tooltip { position: relative; }
#share-area .tooltip:after {
    content: 'リンクコピー完了';
    background: rgba(0,0,0,.9);
    display: inline-block;
    color: #fff;
    border-radius: .4rem;
    position: absolute;
    left: 50%;
    bottom: -2.8rem;
    transform: translate(-50%, 0);
    font-size: 10px;
	font-size: 1rem;
    padding: 4px 10px 6px 10px;
    animation: fade-tooltip .5s 2s 1 forwards;
    white-space: nowrap;
}

#topicsdetail_wrap {
  position: relative;
}

/*=========================================
		コンテンツエリア
=========================================*/
#content-area { width: 100%; }
#main > * { min-width: 0; }
#content-area section { margin-top: 4rem; }
#content-area .content {
	background: #fff;
	padding:4rem 6rem;
	line-height: 2;
	color: rgba(2,65,76,.7);
}
#content-area .content img,
#content-area .content > .flex-parents p img{
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}
#content-area .content > p a { 
	text-decoration: underline;
	color: rgba(2,65,76,.7);
	display: inline;
}
#content-area .img-block li { margin-top: 3rem; }
#content-area .update-block {
	margin-top: 2rem;
	display:flex;
	justify-content:flex-end;
}
#topicsdetail_wrap #content-area .content .update-block {
	width: 100%;
	float: right;
}

/* 記事内装飾調節（23/6月～） */
#content-area .content > *{
	max-width: 100%;
	height: auto;
}
#content-area .content h1,
#content-area .content h2,
#content-area .content h3{
	font-family:inherit;
}
#content-area .content h1,
#content-area .content h2,
#content-area .content h3,
#content-area .content h4,
#content-area .content h5,
#content-area .content h6{
	font-weight: bold;
	color: rgba(2,65,76,.7);
}
#content-area .content h1,
#content-area .content h2,
#content-area .content h3,
#content-area .content h4,
#content-area .content h5,
#content-area .content h6,
#content-area .content p{
	margin-bottom:1.5rem;
	word-wrap: break-word;
}
#content-area .content p:last-of-type{
	margin-bottom:0;
}
#content-area .content h1{
	font-size:3rem;
	line-height: 1.7;
}
#content-area .content h2{
	font-size:2.8rem;
	line-height: 1.7;
	letter-spacing: 0;
}
#content-area .content h3{
	font-size:2rem;
}
#content-area .content h4{
	font-size: 1.8rem;
	margin-bottom:1rem;
}
#content-area .content h5{
	font-size: 1.6rem;
	margin-bottom:0.5rem;
}
#content-area .content h6{
	font-size: 1.3rem;
	margin-bottom:0.5rem;
}
#content-area .content strong{
	font-size:inherit;
	line-height: inherit;
	color: inherit;
}
#content-area .content span{
	display: inline;
}
#content-area .content iframe{
	max-width: 100%;
	height: auto;
}
#content-area .content iframe[title="YouTube video player"]{
	aspect-ratio: 16 / 9;
}

/* 記事内レイアウト左右分割 */
#content-area .content .flex-parents{
	gap: 1rem;
}
#content-area .content .flex-parents > br{
	display:none;
}
#content-area .content .flex-parents > p{
	width:100%;
}

/*=========================================
		サイドメニュー
=========================================*/
#side-area section { 
	margin-bottom: 1.5rem;
	background: #fff;
}
#side-area .block-ttl {
	background: #9f8d39;
    align-items: flex-start;
	padding: 1.5rem 2rem;	
	color: #fff;
}
#side-area .block-ttl h3 {
	font-size: 23px;
	font-size: 2.3rem;
	line-height: 1.2;
}

/* NEXT MATCH */
#side-area #next-match h3 {
	font-size: 23px;
	font-size: 2.3rem;
}
#side-area #next-match .block-date { padding: 2rem; }
#side-area #next-match .block-date p {
	font-size: 38px;
	font-size: 3.8rem;
}
#side-area #next-match .block-date p span {
	font-size: 20px;
	font-size: 2rem;
}
#side-area #next-match .block-content { padding: 2rem 1.5rem; }
#side-area #next-match .block-content p {
	font-size: 14px;
	font-size: 1.4rem;
}
#side-area #next-match .block-content .match-name { 
	text-align: left;
	margin-bottom: 1.5rem;
}
#side-area #next-match .block-content .vs p {
	font-size: 28px;
	font-size: 2.8rem;
}
#side-area #next-match .block-info_wrap { padding: 0; }
#side-area #next-match .block-info {
	font-size: 12px;
	font-size: 1.2rem;
	padding: 1.5rem 2rem 2rem;
}
#side-area #next-match .btn { margin-top: 2rem; }

/* LAST MATCH */
#side-area #last-match .block-content { 
	text-align: center;
	padding: 1.5rem 2rem 2rem;
}
#side-area #last-match .block-content > p,
#side-area #last-match .result { 
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
}
#side-area #last-match .result { margin: 1.5rem 0 1.5rem; }
#side-area #last-match .result ul { 
	width: 100%;
	justify-content: center;
	align-items: flex-start;
}
#side-area #last-match ul .team-cell { 
	width: 100px;
	padding: 0;
}
#side-area #last-match ul .hyphen-cell { 
	align-self: flex-start;
	margin-top:10%;
}
#side-area #last-match .result .point-cell { 
	border-color: rgba(0,0,0,.2);
	width: 60%;
    margin: 0 auto;
}
#side-area #last-match .team-name {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
	margin-top: 0.5rem;
}
#side-area #last-match .result .point {
	font-size: 250%;
	font-weight: 600;
}
#side-area #last-match .result_pk{
	margin-top:1rem;
	display: inline-block;
    min-width: 50%;
	padding-right:0;
}
#side-area #last-match .result_pk > dl dt > span{
	font-size: 1.6rem;
    letter-spacing: 0.1rem;
    padding: 0.7rem 1rem 0.8rem;
	background:#02414D;
    color: #fff;
    line-height: 1;
}
#side-area #last-match .result_pk > dl{
	align-items: center;
}
/* PK */
#side-area #last-match .result_pk .pk-point{
	font-size:1.8rem;
}
#side-area #last-match .result_pk .pk-point span.kameron{
	font-size:2.7rem;
	font-weight:bold;
}

/* NEW TOPICS */
#side-area #new-topics .block-ttl {
	padding: 1.5rem 1rem 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
	height: 6.4rem;
}
#side-area #new-topics .btn {
	width: 72px;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0;
}
#side-area #new-topics .btn a { 
	padding: 0.6rem 1rem 0.6rem 0.6rem;
	color: #fff;
	border-color: #fff;
}
#side-area #new-topics .btn.btn-border_b:before {
	background: #fff;
}
#side-area #new-topics .btn a:after {
	width: 5px;
    height: 5px;
	border-width: 1px;
	right: 0.8rem;
	border-color: #fff;
}
#side-area #new-topics a {
	display: flex;
	width: 100%;
	padding-right: 1.5rem;
	position: relative;
}
#side-area #new-topics li { border-bottom: 1px solid #eeeeee; }
#side-area #new-topics li a:after {
	content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #063740;
    border-right: 2px solid #063740;
    position: absolute;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    display: inline-block;
    right: 1rem;
    top: 50%;
}
#side-area #new-topics .img-block {
	width: 105px;
	padding-bottom: 67.8px;
	min-width: 105px;
	background: #EEEEEE;
}
#side-area #new-topics .ttl-block { padding: 0.6rem 1rem 0.6rem 0.6rem; }
#side-area #new-topics .ttl-block p {
	height: 3.2em;
	position: relative;
	overflow: hidden;
	padding-right: 2em;
}
#side-area #new-topics .ttl-block p:before {
	content: "...";
	position: absolute;
	right: 1rem;
	bottom: 0;
	display: inline-block;
	width: 1em;
}
#side-area #new-topics .ttl-block p::after {
	ontent: "";
	position: relative;
	right: -1em;
	float: right;
	width: 1em;
	height: 100%;
	background-color: inherit;
}	
#side-area #new-topics .ttl-block .update-block {
	margin-top: 1rem;
	letter-spacing: 0.05rem;
}
.type-match .img-block:after,
.type-note .img-block:after,
.type-movie .img-block:after {
	width: 20px;
	height: 22px;
}

/*=========================================
		試合レポート
=========================================*/
.cate-matchreport #content-area #report .img_wrap,
.cate-matchreport #content-area #report .content p { margin-bottom: 2rem; }

/*=========================================
		COMMENT
=========================================*/
#comment-area { padding-bottom: 2.5rem; }
#comment-area ul li {
    background: #fff;
    position: relative;
	padding-bottom: 2.2rem;
	margin-top: 1.5rem;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.12);
}
#comment-area ul li:first-of-type { margin-top: 0; }
#comment-area .img-block{
    position: relative;
}
#comment-area .position-name{
	text-align: center;
	margin: 0;
	padding: 0.5rem 1rem;
	position:absolute;
	left: 0;
	top: 0;
	color: #000000;
	font-size: 27px;
	font-size: 2.7rem;
	letter-spacing: 0.2rem;
	min-width: 8rem;	
}
#comment-area .position-name.position-staff {
	font-size: 20px;
	font-size: 2rem;
	font-size: calc(2rem + ((1vw - 0px) * 0.3125));
}
.position-name.position-df { background: rgba(255,234,42,1); }
.position-name.position-gk { background: rgba(224,65,65,1); }
.position-name.position-mf { background: rgba(97,224,250,1); }
.position-name.position-fw { background: rgba(0,194,87,1); }
.position-name.position-coach,
.position-name.position-staff { 
	background: rgba(67,176,154,1);
	letter-spacing: 0;
	font-size: 23px;
	font-size: 2.3rem;
}
#comment-area .txt-block { margin: 1rem 2rem 2rem 1.5rem; }
#comment-area .txt-block h4 { margin-bottom: 0.5rem; }
#comment-area .txt-block .txt {
	color: rgba(0,0,0,.7);
	font-size: 13px;
	font-size: 1.3rem;
	margin: 0 !important;
	letter-spacing: 0.1rem;
}
#comment-area ul li .txt-trigger { height: 2.2rem; }
#comment-area ul li .txt-trigger:before {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid #02414c;
	border-right: 2px solid #02414c;
	position: absolute;
	-webkit-transform: translateX(-50%) rotate(135deg);
	transform: translateX(-50%) rotate(135deg);
	display: inline-block;
	top: 0.5rem;
	left: 50%;
}
#comment-area ul li .txt-trigger.is-show:before {
	-webkit-transform: translateX(-50%) rotate(-45deg);
	transform: translateX(-50%) rotate(-45deg);
	top: 0.8rem;
}
#comment-area .txt { padding-right: 0.8em; }
#comment-area ul li .txt-trigger:hover {
	transition: all .2s ease;
	background: #F6F6F6;	
}
#comment-area ul li .txt-trigger:hover:before { border-color: #81A0A6; }
#comment-area ul li .btn-engate {
    display: inline-block;
    position: absolute;
    top: 1rem;
    right: 3rem;
}
#comment-area ul li .btn-engate a {
    color: #ff973a;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0;
    border: 1px solid #ff973a;
    padding: 0.8rem;
}
#comment-area ul li .btn-engate a i { width: 2rem; }
#comment-area ul li .btn-engate a:before {
    background: #ff973a;
    opacity: 0.3;
}
#comment-area ul li .btn-engate a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: “alpha( opacity=100 )”;
}
#comment-area ul li .btn-engate a p { padding-right: 0.2rem; }


/*=========================================
		試合結果
=========================================*/
.cate-matchreport #content-area #result_title{
	font-family:inherit;
	color: rgba(255,255,255,.9);
	border-bottom: 1px solid rgba(255,255,255,.8);
	padding-bottom: 1rem;
	font-weight: bold;
	text-align: center;
}

/*=========================================
		試合データ
=========================================*/
/* 得点 */
.cate-matchreport #content-area #data{
	margin-top:2rem;
}
.cate-matchreport #content-area #data .content { 
	background: linear-gradient(270deg,#F3F8F9 0%,#F3F8F9 50%,#ffffff 50%,#ffffff 100%);
	color: #02414c;
	padding: 3.008% 0;
}
.cate-matchreport #content-area #data .result > ul {
	width: auto;
	margin: 0 1rem;
}
.cate-matchreport #content-area #data .result .info-group .place { 
	width: 100%;
	line-height: 1.2;
}
.cate-matchreport #content-area #data .result .info-group .place .home { background: #C6D5D8; }
.cate-matchreport #content-area #data .result .info-group .place .away { background: #ddd; }
.cate-matchreport #content-area #data .result .info-group .place dt {
	width: 5em;
	text-align: center;	
}
.cate-matchreport #content-area #data .result .info-group .place dt,
.cate-matchreport #content-area #data .result .info-group .place dd{
	padding: 0.5rem;
}
.cate-matchreport #content-area #data .result .info-group .place dt{
	white-space:nowrap;
}
.cate-matchreport #content-area #data .result .info-group ul { 
	justify-content: space-between;
	margin-top: 1rem;
	align-items: center;
}
.cate-matchreport #content-area #data .result .logo-cell { 
	width: 300px;
	text-align: center;
	align-self: flex-start;
	overflow:hidden;
}
.cate-matchreport #content-area #data .result .logo-cell .team-name {
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-top: 1.5rem;
}
.cate-matchreport #content-area #data .result .point-cell { 
	width: 70px;
	border-color: rgba(0,0,0,.2);
}
.cate-matchreport #content-area #data .result .point-cell p { font-weight: bold; }
.cate-matchreport #content-area #data .result #breakdown { 
	justify-content: space-around;
	margin-top: 1.5rem;
	align-items: flex-start;
}
.cate-matchreport #content-area #data .result #breakdown .playername-list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 1rem;
	margin: 0 auto;
	width: 15%;
	max-width: 150px;
	word-wrap: break-word;
	vertical-align: middle;
}
.cate-matchreport #content-area #data .result #breakdown .playername-list ul {
	display: inline-block;
	margin: 0 auto;
	width: auto;
}
.cate-matchreport #content-area #data .result #breakdown .playername-list ul li { padding: 0; }
.cate-matchreport #content-area #data .result #breakdown table td { 
	text-align: center;
	padding: 0 1rem;
	vertical-align: middle;
}
.cate-matchreport #content-area #data .result #breakdown table .game-cell {
	white-space: nowrap;	
}
.cate-matchreport #content-area #data .result #breakdown table .game-cell p {
	border: 1px solid #cfd9d7;
	border-radius: 50px;
	line-height: 1;
	padding: 0.5rem 1rem;
}
.cate-matchreport #content-area #data .result #breakdown table td:first-of-type,
.cate-matchreport #content-area #data .result #breakdown table td:last-of-type {
	font-size: 16px;
	font-size: 1.6rem;
}
.cate-matchreport #content-area .update-block { margin-right: 3.008%; }

/*　公式記録へのリンクボタン　*/
#data .content .btn-border{
	margin:4rem auto 1rem;
	width: calc(100% - 4rem);
	max-width: 40rem;
	background:#fff;
}

/* ページャー　*/
.cate-matchreport .page-liner_wrap { margin-top: 6rem; }

/*=========================================
		MEMBER
=========================================*/
#statistics{ 
	letter-spacing: 0;
	padding:3rem 2rem 0;
	margin-top: 3rem;
	border-top:1px solid #ddd;
}
#statistics dl { margin-top: 2rem; }
#statistics .flex-parents:first-of-type .block-side dl:first-of-type{ margin-top: 0; }
#statistics dl dt{
	color: rgba(0,0,0,.2);
	text-align: center;
	letter-spacing: 0;
	line-height: 1.2;
	font-weight: 900;
	margin-bottom: 0.5rem;
	font-size: 24px;
	font-size: 2.4rem;
}
#statistics > .flex-parents { justify-content: space-between; }
#statistics .block-side{
	width:23%;
}
/*
#statistics .block-side dl dd{
	border: 1px solid #ccc;
	padding:1rem 1.5rem;
	font-size: 1.4rem;
}
*/
#statistics dl dd table {
    border-top: 1px solid #DFDFDF;
    border-bottom: 1px solid #DFDFDF;
    margin-top: 0.5rem;
    line-height: 1.4;
    font-size: 14px;
    font-size: 1.4rem;
	width: 100%;
}
#statistics dl dd table tr:nth-of-type(odd) { background: rgba(217,217,217,.35); }
#statistics dl dd table td { padding: 1rem 0.5rem; }
#statistics dl dd table td:empty{height:2.5em;}
#statistics dl dd table th { 
	text-align: center;
	font-weight: 400;
	width: 4em;
	padding: 0.5rem;
}
#statistics .headcoach dd{
	border-top: 1px solid #DFDFDF;
	border-bottom: 1px solid #DFDFDF;
	background: rgba(217,217,217,.35);
	padding: 1rem;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
}
#statistics .headcoach dd:empty{height:2.5em;}

/* block-center */
#statistics #block-center { 
	width: calc(100% - 46%);
	margin: 0 2.124%;
}
#statistics #block-center .statistics-table {
	text-align: center;
	margin-top:0;
}
#statistics #block-center .statistics-table td {
	letter-spacing: 0.3rem;
}
#statistics #block-center table td.ttl-cell{
	font-size: 15px;
	font-size: 1.5rem;
	background: #02414D;
	color: #eeeeee;
	text-align: center;
	width: 100px;
	min-width: 100px;
	font-weight: 500; 	
}
#statistics #block-center table tr:nth-of-type(odd) .ttl-cell {
	background: #4D767E;
}
#statistics #block-center .memberchange table tr td.ttl-cell {
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 0.3rem;
}
#statistics #block-center .memberchange table td {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 400;
	vertical-align: middle;
	padding: 0;
}
#statistics #block-center .memberchange table td table,
#statistics #block-center .memberchange table td table tr,
#statistics #block-center .memberchange table td table td {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
}
#statistics #block-center .memberchange table tr td{ padding: 1rem; }
#statistics #block-center .memberchange table td div { border-top: 1px solid rgba(0,0,0,.08); }
#statistics #block-center .memberchange table td div:first-of-type { border: none; }

/*=========================================
		PHOTO GALLERY
=========================================*/
#gallery-area{
	overflow:hidden;
	margin:3rem auto auto;
}
#gallery-area ul{
	flex-wrap: wrap;
	gap: 2rem;
	width: calc(100% + 2rem);
}
#gallery-area ul li {
    width:calc(25% - 2rem);
}
#gallery-area ul .img-autosize { background: #fff; }

/*=========================================
		HIGHLIGHT VIDEO
=========================================*/
#highlight-area > ul{
	gap:2rem;
}
#highlight-area > ul li {
	width:calc(25% - 1rem);
}

/*=========================================
		ACTIVE PLAYER
=========================================*/
#player-area #pickup{
	gap: 3rem;
}
#player-area #pickup .position-name { background: none; }
@media screen and (min-width:1000px) and (max-width:1300px){
	#player-area #pickup .position-name {
		font-size: 5rem;
	}
}
@media screen and (max-width: 480px) {
	#player-area #pickup .position-name {
		font-size: 38px;
		font-size: 3.8rem;
		font-size: calc(3.4rem + ((1vw - 0px) * 0.3125)); 
		letter-spacing: 0.1rem;
	}
	#player-area #pickup .player-name { 
		font-size: 30px;
		font-size: 3rem;
		font-size: calc(100vw / ( 767 / 38 ));
	}
}

@media screen and (min-width: 768px) {
	/*=========================================
			試合レポート
	=========================================*/
	/* 得点 */
	.cate-matchreport #content-area #data .result > ul > li { margin: 0 1rem; }
	.cate-matchreport #content-area #data .result .logo-cell .img-autosize { 
		width: 48.276%;
		padding-bottom: 32.591%;
	}

	/*=========================================
			ACTIVE PLAYER
	=========================================*/
	#player-area #pickup li {
		width:calc((100% / 3) - 3rem);
	}
}



@media screen and (min-width: 1000px) {
	#main { padding-left: 80px; }
	#topicsdetail_wrap { margin-bottom: 4rem; }

	/*=========================================
			サイドメニュー
	=========================================*/
	#side-area { 
		width: 20.588%;
		min-width: 250px;
	}

	#content-area { 
		padding-right: 3rem;
		min-width: 0;
		width: calc(100% - 20.588%);
	}
	
	/*=========================================
			シェアボタン
	=========================================*/
	#share-area { 
		width: 55px;
		position: absolute;
	}	
	#share-area dd ul li { margin: 1rem auto 0; }
	#share-area dd ul li:first-of-type { margin-top: 0; }

	/*=========================================
			試合データ
	=========================================*/
	/* 得点 */
	.cate-matchreport #content-area #data .result .info-group { max-width: 300px; }
	.cate-matchreport #content-area #data .result #breakdown .playername-list { width: 300px; }
	.cate-matchreport #content-area #data .result #breakdown table td:first-of-type,
	.cate-matchreport #content-area #data .result #breakdown table td:last-of-type { width: 70px; }

	/*=========================================
			サイドメニュー
	=========================================*/
	#side-area #new-topics { padding-bottom: 1rem; }
	#side-area #new-topics .ttl-block .update-block {
		font-size: 8px;
		font-size: 0.8rem;
	}
}



@media screen and (max-width:1300px) and (min-width: 768px){
	/*=========================================
			COMMENT調節
	=========================================*/
	#comment-area > ul li > .img-block{
		display: flex;
    		flex-direction: column-reverse;
	}
	.cate-matchreport #content-area #report #comment-area .position-name{
		margin-bottom:0;
		position: relative;
		font-size: 2rem;
	}

}



@media screen and (max-width:1300px){
	/*=========================================
			ACTIVE PLAYER
	=========================================*/
	#player-area{
		overflow:hidden;
	}
	#player-area #pickup{
		width: calc(100% + 3rem);
	}
}



@media screen and (max-width: 999px) {
	#main { flex-wrap: wrap; }

	/*=========================================
			サイドメニュー
	=========================================*/
	#side-area {
		width: 100%;
		display: flex;
		margin-top: 5rem;
		flex-wrap: nowrap;
		gap: 2rem;
		margin-left: auto;
		margin-right: auto;
	}
	#next-match_wrap + #new-topics{
		width: calc(100%/3 *2 - 1rem);
	}
	
	/*=========================================
			シェアボタン
	=========================================*/
	#share-area { 
		width: 70%;
		margin: 4rem auto 0;
	}
	#share-area dd ul { 
		display: flex;
		justify-content: space-around;
	}
	
	/* ページャー */
	.cate-matchreport .page-liner_wrap { margin-top: 3.5rem; }
}



@media screen and (max-width: 999px) and (min-width: 481px) {
	/*=========================================
			サイドメニュー
	=========================================*/
	#share-area.pcpad { display: none !important; }
	#share-area.sp { display: block !important; }
	#side-area section {
		width: calc(100% / 3 - 1.3rem);
		margin: 0;
	}
	#side-area .block-ttl { min-height: 6.4rem; }

	/* NEW TOPICS */
	#side-area #new-topics .ttl-block p { height: 5em; }
}



@media screen and (min-width: 481px) {
	/*=========================================
			試合レポート
	=========================================*/
	/* 得点 */
	.cate-matchreport #content-area #data .result .point-cell p { font-size: 286%; }
	.cate-matchreport #content-area #data .result .logo-cell .img-autosize {
		margin: 0 auto;
	}

	/*=========================================
			STATISTICS
	=========================================*/
	/* block-center */
	#statistics #block-center dl > dd > table > tbody > tr > td {
		font-size: 20px;
		font-size: 2rem;
		width: 50%;
	}

	/*=========================================
			COMMENT
	=========================================*/
	#comment-area .img-block {
		width: 19.428%;
		float: left;
		display: inline-block;
	}
	#comment-area .txt-block {
		width: calc((100% - 19.428%) - 3.5rem);
		display: inline-block;
		float: left;
	}
}




@media screen and (max-width: 767px){
	/* ページタイトル */
	#pagettl_wrap .report-ttl { padding-top: 1rem; }
	#pagettl_wrap .report-ttl p {
		font-size: 22px;
		font-size: 2.2rem;
	}
	#pagettl_wrap .report-ttl .ttl {
		font-size: 28px;
		font-size: 2.8rem;
	}

	/*=========================================
			コンテンツエリア
	=========================================*/
	#content-area .content{ padding:2rem; }

	/* 記事内装飾調節（23/6月～） */
	#content-area .content h1{
		font-size:2.5rem;
	}
	#content-area .content h2{
		font-size:2.3rem;
	}

	/*=========================================
			試合レポート
	=========================================*/
	/* 得点 */
	.cate-matchreport #content-area #data .result .logo-cell{
		max-width: 15rem;
		width: 100%;
	}
	.cate-matchreport #content-area #data .result .logo-cell .img-autosize { 
		width:100%;
	}
	.cate-matchreport #content-area #data .result .logo-cell .team-name{
		margin-top: 1rem;
	}
	.cate-matchreport #content-area #data .result #breakdown .playername-list{
		width: 100%;
		max-width: unset;
	}

	/*=========================================
			サイドメニュー
	=========================================*/
	#side-area{
		margin-top: 2rem;
		flex-wrap:wrap;
	}
	#side-area section{
		width: calc(50% - 1rem);
	}
	#side-area #new-topics{
		width:100%;
	}
	#next-match_wrap + #new-topics{
		width: calc(50% - 1rem);
	}
	#new-topics .type-match .img-block img,
	#new-topics .type-note .img-block img {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	/*=========================================
			ACTIVE PLAYER＋関連記事
	=========================================*/
	#player-area #pickup,
	#related-area > ul{
		width: 100%;
		flex-wrap: wrap;
		gap:2rem;
	}
	#related-area .topics-list_wrap > li.type-match,
	#related-area .topics-list_wrap > li.type-note{
		width:calc(50% - 1rem);
	}
}



@media screen and (max-width: 767px) and (min-width: 481px) {
	/*=========================================
			COMMENT調整
	=========================================*/
	#comment-area .img-block .img-autosize{
		margin-top: 3rem;
	}
}



@media screen and (max-width: 600px) and (min-width: 501px) {
	/*=========================================
			サイドメニュー
	=========================================*/
	#next-match_wrap + #new-topics .ttl-block .update-block .date,
	#next-match_wrap + #new-topics .ttl-block .update-block .category{
		display:block;
	}
	#next-match_wrap + #new-topics .ttl-block .update-block .category{
		padding-left: 0;
		margin-top: 5px;
	}
}



@media screen and (max-width: 500px){
	/*=========================================
			サイドメニュー
	=========================================*/
	#side-area { flex-wrap: wrap; }
	#side-area section,
	#next-match_wrap + #new-topics{
		width: 100%;
	}


	/*=========================================
			関連記事
	=========================================*/
	#related-area .topics-list_wrap > li.type-match,
	#related-area .topics-list_wrap > li.type-note{
		width:100%;
	}
}



@media screen and (max-width: 480px) {
	/*=========================================
			コンテンツエリア
	=========================================*/
	#content-area section { margin-top: 3rem; }

	/* 記事内レイアウト左右分割（スマホでは幅100％レイアウトに） */
	#content-area .content > .flex-parents{
		flex-direction: column;
	}
	#content-area .content .flex-parents > p{
		width:100%;
	}

	/*=========================================
			試合レポート
	=========================================*/
	.cate-matchreport #content-area #gallery-area ul li,
	.cate-matchreport #content-area #highlight-area ul li{ 
		width: calc(50% - 1rem);
	}

	/* 得点 */
	.cate-matchreport #content-area #data .result{
		width:100%;
	}
	.cate-matchreport #content-area #data .result .logo-cell {
		width: calc((100% - 120px) / 2);
		text-align: center;
		padding: 1rem 0 0 0;
	}
	.cate-matchreport #content-area #data .result .logo-cell .team-name {
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.2;
		letter-spacing: 0;
	}
	.cate-matchreport #content-area #data .result .point-cell { width: 43px; }	
	.cate-matchreport #content-area #data .result .info-group {
		width: 120px;
		margin:0;
	}
	.cate-matchreport #content-area #data .result .info-group ul { margin-top: 0.5rem; }
	.cate-matchreport #content-area #data .result .info-group .place .home { width: 100%; }
	.cate-matchreport #content-area #data .result #breakdown{ gap: 0;}
	.cate-matchreport #content-area #data .result #breakdown .playername-list{
		width: 100%;
	}
	.cate-matchreport #content-area #data .result #breakdown .playername-list ul li {
		line-height: 1.2;
		margin-top: 1rem;
		letter-spacing: 0;
		font-weight: 500;
	}
	.cate-matchreport #content-area #data .result #breakdown .playername-list ul li:first-of-type { margin-top: 0; }
	.cate-matchreport #content-area #data .result #breakdown table td {
		padding: 0 0.5rem;
		word-break: keep-all;
	}
	.cate-matchreport #content-area #data .result #breakdown table td:first-of-type,
	.cate-matchreport #content-area #data .result #breakdown table td:last-of-type{
		font-size: 20px;
		font-size: 2rem;
	}

	/*=========================================
			STATISTICS
	=========================================*/
	#statistics { padding: 1.5rem 0; }
	#content-area #statistics > .flex-parents{
		flex-wrap: wrap;
		gap:0;
	}
	#statistics dl dt{
		margin: 0 0.5rem 0.5rem;
	}
	#statistics .block-side { width:50%; }
	#statistics .block-side td {
		display: block;
		width: 100%;
	}
	#statistics .block-side td:first-of-type { padding: 1rem 1rem 0.5rem 1rem; }
	#statistics .block-side td:last-of-type { padding: 0.5rem 1rem; }

	#statistics #block-center .statistics-table td{
		font-size: 20px;
		font-size: 2rem;
		vertical-align: middle;
		max-width: 50%;
	}
	
	/* block-center */
	#statistics #block-center {
		order: 3;
		width: 100%;
		margin: 0;
		margin-top: 3rem;
	}	
	#statistics #block-center dl > dd > table > tbody > tr > td  { width: 50%; }

	/*=========================================
			PHOTO GALLERY
	=========================================*/
	#gallery-area ul{
		width:100%;
	}

	/*=========================================
			HIGHLIGHT VIDEO
	=========================================*/
	#highlight-area > ul{
		    flex-wrap: wrap;
	}
	#highlight-area > ul li{
		width:calc(50% - 2rem);
	}

	/*=========================================
			COMMENT
	=========================================*/
	#comment-area .position-name { top: 1rem; }
}




/*=========================================
		管理画面用＞（TOPICS管理 - 編集 - 確認）
=========================================*/
body.app form table #content-area{
	font-size: 62.5%;
	letter-spacing: 1px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 16px;
	font-feature-settings: "palt";
}
body.app form table #content-area .content{
	padding:0;
	max-width:930px;
	line-height: 2;
}
body.app form table #content-area .content h1,
body.app form table #content-area .content h2,
body.app form table #content-area .content h3, 
body.app form table #content-area .content h4,
body.app form table #content-area .content h5,
body.app form table #content-area .content h6{
	line-height:inherit;
}
body.app form table #content-area .content p{
	margin-bottom: 0.9rem;
}
body.app form table #content-area .content img{
	width:100%;
}
body.app form table #content-area .content h2{
	font-size: 28px;
    line-height: 1.5;
}
body.app form table #content-area .content h3{
    font-size: 20px;
}
body.app form table #content-area .content h4{
	font-size:18px;
	margin-bottom: 10px;
}
body.app form table #content-area .content h5{
	font-size: 16px;
	margin-bottom: 5px;
}
body.app form table #content-area .content h6{
	font-size: 13px;
	margin-bottom: 5px;
}
body.app form table #content-area .content hr{
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
body.app form table #content-area .content > p a {
    font-weight: bold;
}