/*
Theme Name:	ParaSports_Magazine
Author:		Masakazu Hori @ SenSyuSya
Author URI:	https://www.sensyusya.co.jp/
Version:	1.0.1
*/

:root {
	--pcWidth:				1000px;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px; 
	color: #333333;
}

a { 		text-decoration: none; }
a:hover {	text-decoration: underline; }

a { color: #222222; }
a:hover { color: #000000; }

.clearfix::after, 
header::after, 
main::after, 
aside::after, 
footer::after,
section::after { 
	content: ""; 
	display: block; 
	clear: both; 
} 

.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }

.opts {
	color: #888888;
	font-size: 80%;
}

img { 
	max-width: 100%; 
	height: auto; 
} 


.news		{ background: #EA0015; } 
.column		{ background: #057e10; } 
.interview	{ background: #7E6803; } 
.magazine	{ background: #0015EA; } 
.federation	{ background: #461C93; } 
.sdgs		{ background: #146c7f; } 
.other		{ background: #666666; } 

.h1_news		{ border-bottom: 1px solid #EA0015; } 
.h1_column		{ border-bottom: 1px solid #057e10; } 
.h1_interview	{ border-bottom: 1px solid #7E6803; } 
.h1_magazine	{ border-bottom: 1px solid #0015EA; } 
.h1_federation	{ border-bottom: 1px solid #461C93; } 
.h1_sdgs		{ border-bottom: 1px solid #146c7f; } 
.h1_other		{ border-bottom: 1px solid #666666; } 

html {
	height: 100%;
	box-sizing: border-box;
}

body { 
	position: relative;
	text-align: center; 
	margin: 0px auto; 
	width: 100%;
} 

aside,
footer { 
	width: 100%; 
} 

main {
	width: var(--pcWidth);
	margin: 0px auto;
	padding: 130px 0px 0px 0px;
}

header ul, 
footer ul,
header ol, 
footer ol { 
	list-style-type: none;
} 

#header.moveUp {
	animation: animateUp 0.5s forwards;
}

@keyframes animateUp {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-100px);
	}
}

#header.moveDw{
	animation: animateDw 0.5s forwards;
}
@keyframes animateDw {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#header {
	position: fixed;
	z-index: 10;
	width: 100%;
	height: calc(80px + 30px);
	background: rgba(255, 255, 255, 0.95);
}

#header nav:nth-of-type(1) {
	width: var(--pcWidth);
	height: calc(80px - 20px - 20px);
	padding: 20px 0px 20px 0px;
	margin: 0px auto;
}

#header h1.site-title a,
#header  p.site-title a {
	display: block;
	width: calc(318.75px + 9.25px);
	height: 40px;
	background-image: url(./assets/psm_logo.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-indent: -9999px;
	float: left;
}

#header p.site-descrpt {
	text-align: left;
	font-size: 87.5%;
	width: 170px;
	height: 40px;
	float: left;
}

#globalMenu {
	display: none;
	width:  40px;
	height: 40px;
	background-image: url(./assets/menu_navs.svg);
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	float: right;
}

#snsprd-menuT {
	margin: 0px;
	padding: 0px;
	width: calc((40px + 2px + 2px + 3px) * 5);
	height: 40px;
	float: right;
}

#snsprd-menuT li {
	display: inline;
	margin: 0px 2px;
}

#globalMenuDl {
	display: block;
	opacity: 1;
	
	z-index: 100;
	background: #D9D9D9;
	width: 100%;
	height: 30px;
	line-height: 30px;

}

#globalMenuDl div {
	width: var(--pcWidth);
	margin: 0px auto;
	position: relative;
	
}

#globalMenuDl div ul {
	width: calc(100% - 150px);
	height: 30px;
	text-align: left;
}

#globalMenuDl div ul li a {
	border-bottom: 1px solid transparent;
}

#globalMenuDl div ul li a {
	display: inline-block;
	width: calc(100% / 8 - 4px - 6px);
	padding: 0px 3px;
	height: 30px;
	overflow: hidden;
	text-align: center;
	float: left;
}

#globalMenuDl div ul li a:hover {
	text-decoration: none;
	background: #AAAAAA;
}

#header-menu .current_page_item a {
	background: #222222;
	color: #FFFFFF;
}



#globalMenuDl div form {
	width: 150px;
	height: 30px;
/*	overflow: hidden; */
	position: absolute;
	right: 0;
	top: 0;

}

#globalMenuDl div form * {
	font-size: 80%;
}

.Search-form-style input {
	width:  calc(100% - 4px - 8px);
	height: calc(100% - 10px);
	padding: 3px 4px 0px 4px;

	border: 1px solid #888888;
	border-radius: 5px;

}

.dashicons.dashicons-search {
	font-size: 12px;
}

.Search-form-style button {
	appearance: none;
	-webkit-appearance: none;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	border: 1px solid #888888;
	background: #EEEEEE;
}

#globalMenuDl.fadeIn {
	animation: animateFadeIn 0.5s forwards;
}

@keyframes animateFadeIn {
	from {
		opacity: 0.0;
	}
	to {
		opacity: 1.0;
	}
}

#globalMenuDl.fadeOut {
	animation: animateFadeOut 0.5s forwards;
}
@keyframes animateFadeOut {
	from {
		opacity: 1.0;
	}
	to {
		opacity: 0.0;
	}
}

footer {
	background: #EDEDED;
	margin-top: 60px;
}

footer ul {
	margin: 0px auto 10px auto;
}

footer li {
	display: inline;
}

footer #footer-menu li {
	margin: 0px 15px;
}

#snsprd-menuB {
	display: none;
}

footer #snsprd-menuB li {
	margin: 0px 5px;
}

/*
footer li a {
	white-space: nowrap;
}
*/

/*
footer p a {
	display: inline-block;
	background-image: url(./assets/jncojp.svg);
	background-repeat: no-repeat;
	padding-left: 25px;
}
*/ 

#snsprd-menuT a[href*="facebook.com"],
#snsprd-menuB a[href*="facebook.com"],
#snsprd-menuT a[href*="twitter.com"],
#snsprd-menuB a[href*="twitter.com"],
#snsprd-menuT a[href*="x.com"],
#snsprd-menuB a[href*="x.com"],
#snsprd-menuT a[href*="instagram.com"],
#snsprd-menuB a[href*="instagram.com"],
#snsprd-menuT a[href*="youtube.com"],
#snsprd-menuB a[href*="youtube.com"],
#snsprd-menuT a[href*="threads.net"],
#snsprd-menuB a[href*="threads.net"],
#snsprd-menuT a[href*="threads.com"],
#snsprd-menuB a[href*="threads.com"],
#snsprd-menuT a[href*="spotify.com"],
#snsprd-menuB a[href*="spotify.com"] {
	display: inline-block;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
}

#snsprd-menuT a[href*="facebook.com"],
#snsprd-menuB a[href*="facebook.com"] {		background-image: url(./assets/cicon_facebook.svg); 	}

#snsprd-menuT a[href*="twitter.com"],
#snsprd-menuB a[href*="twitter.com"] {		background-image: url(./assets/cicon_xtwitter.svg); 	}

#snsprd-menuT a[href*="x.com"],
#snsprd-menuB a[href*="x.com"] {		background-image: url(./assets/cicon_xtwitter.svg); 	}

#snsprd-menuT a[href*="instagram.com"],
#snsprd-menuB a[href*="instagram.com"] {	background-image: url(./assets/cicon_instagram.svg); 	}

#snsprd-menuT a[href*="youtube.com"],
#snsprd-menuB a[href*="youtube.com"] {		background-image: url(./assets/cicon_youtube.svg); 		}

#snsprd-menuT a[href*="threads.net"],
#snsprd-menuB a[href*="threads.net"],
#snsprd-menuT a[href*="threads.com"],
#snsprd-menuB a[href*="threads.com"] {		background-image: url(./assets/cicon_threads.svg); 		}

#snsprd-menuT a[href*="spotify.com"],
#snsprd-menuB a[href*="spotify.com"] {		background-image: url(./assets/cicon_spotify.svg); 		}

.aCredit {
	width: 100%;
	padding-bottom: 30px;
}

.aCredit div {
	width: 50%;
	float: left;
	text-align: left;
}

.sharesns {
	list-style-type: none;
}

.sharesns li {
	display: inline-block;
	float: right;
	margin: 0px 5px;
}

.sharesns li a[href*="pinterest.jp"],
.sharesns li a[href*="facebook.com"],
.sharesns li a[href*="twitter.com"],
.sharesns li a[href*="x.com"],
.sharesns li a[href*="line.me"],
.sharesns li a[href*="b.hatena.ne.jp"] {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
}

.sharesns a[href*="pinterest.jp"] {	background-image: url(./assets/cicon_pinterest.svg); }
.sharesns a[href*="facebook.com"] {	background-image: url(./assets/cicon_facebook.svg); }
.sharesns a[href*="twitter.com"] {	background-image: url(./assets/cicon_xtwitter.svg); }
.sharesns a[href*="x.com"] {		background-image: url(./assets/cicon_xtwitter.svg); }
.sharesns a[href*="line.me"] {		background-image: url(./assets/cicon_line.svg); }
.sharesns a[href*="b.hatena.ne.jp"] {	background-image: url(./assets/cicon_hatebu.svg); }

#topTopBtn {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(./assets/pagetop_n.svg);
}

#topTopBtn:hover {
	background-image: url(./assets/pagetop_h.svg);
}

#topTopBtn:focus,
button:focus {
	outline: none;
}

#topTopBtn.show {
	animation: show .25s linear 0s;
}

#topTopBtn.hide {
	animation: hide .01s linear 0s;
}

#topicspath {
	text-align: left;
	margin: 0px 0px 20px 0px;
}

#topicspath,
#topicspath * {
	color: #888888;
}

h1.page-title {
	margin: 30px 0px 10px 0px;
	padding: 0 0 5px 0;
}

h1.page-title,
h1.page-title * {
	font-size: 175%;
}

p.page-descript {
	margin-bottom: 30px;
}

.lcst {
	width: 100%;
}

.lcst dt,
.scst dt {
	display: block;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-indent: -9999px;
}

.lcst dt {
	aspect-ratio: 1000 / 520;
}

.scst dt {
	aspect-ratio: 1 / 1;
}

.lcst dt a,
.scst dt a {
	display: block;
	width: 100%;
	height: 100%;
}

.lcst dd {
	width: calc(50% - 10px);
	margin: 15px 0px 0px 0px;
	text-align: left;
}

.scst dd {
	text-align: left;
}

.lcst dd:nth-of-type(1) { float:  left; }
.lcst dd:nth-of-type(2) { float: right; }

.scst dd {
	width: 100%;
}

.lcst dd:nth-of-type(2),
.scst dd:nth-of-type(2) { 
	padding-top: 5px;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 87.5%;
}

.list {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}

.list:nth-of-type(even) {
	background: #FFFFFF;
}

.list:nth-of-type(odd) {
	background: #EEEEEE;
}

.list dt,
.list dd {
	display: block;
	vertical-align: middle;
}

.list dt { 
	font-weight: bold;
	width: calc(100% - 150px - 100px);
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-align: left;
}

.list dd:nth-of-type(1) { 
	width: 150px;
}

.list dd:nth-of-type(1) a {
	font-size: 87.5%;
}

.list dd:nth-of-type(2) { 
	width: 100px;
}

.list dd:nth-of-type(2) .tlabel { 
	display: none;
}

.list dd:nth-of-type(2) .tlabel a {
	color: #222222;
}

.clabel li,
.clabel li.dlabel {
	display: inline-block;
	margin: 2px;
}

.llabel li,
.tlabel {
	display: block;
	margin: 2px;
}

.clabel a,
.llabel a {
	display: block;
	color: #FFFFFF;
	font-size: 75%;
	padding: 0px 4px 2px 4px;
}

.clabel li.dlabel a { 
	display: block; 
	color: #222222;
	font-size: 80%;
	padding: 0px 4px 2px 4px;
}

.h2idxv {
	margin: 40px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
	color: #FFFFFF;
	text-align: left;
	padding-left: 1rem;
	font-size: 150%;
}

.h2idxd {
	height: 0px;
	margin: 0px; 0px 0px 0px;
	text-indent: -9999px;
}

#pArticle {
	text-align: left;

}

#pArticle * {
	color: #555555;
}

#pArticle strong,
#pArticle h2,
#pArticle h3,
#pArticle h4,
#pArticle h5 {
	color: #333333;
}

#pArticle h2 { font-size: 150%; margin: 40px 0px 15px 0px; text-align: left; }
#pArticle h3 { font-size: 125%; margin: 40px 0px 15px 0px; text-align: left; }
#pArticle h4 { font-size: 100%; margin: 30px 0px 15px 0px; text-align: left; }
#pArticle h5 { font-size: 100%; margin: 20px 0px 15px 0px; text-align: left; }

#pArticle p {
	line-height: 175%;
	margin: 1rem 0 1.5rem 0;
}

#pArticle figure {
	text-align: center;
	margin: 5px auto 15px auto;
}

hr.non {
	border-width: 2px 0 0 0;
	border-style: dotted;
	border-color: #F0F0F0;
	margin: 40px 20px;
}

hr.eoc {
	display: block;
	position: relative;
	overflow: visible;
	text-align: center;
	border-width: 2px 0 0 0;
	border-style: dotted;
	border-color: #CCCCCC;
	height: 1em;
	line-height: 1.25em;
	margin: 40px 20px;
}

hr.eoc:after {
	position: absolute;
	width: 3rem;
	top: -0.75em;
	left: calc(50% - 1.5rem);
	display: inline-block;
	content: '🌐'; 
	color: #888888;
	background: #FFFFFF;
	margin: 0px auto;
	text-align: center;
}

#prblock li {
	list-style-type: none;
	aspect-ratio: 490 / 150;
	float: left;
	margin: 10px 0px;
}

#prblock li a {
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-indent: -9999px;
}

section.fedlist {
	text-align: left;
	line-height: 200%;
}

section.fedlist p {
	display: inline-block;
	float: left;
}

section.fedlist a {
	padding: 3px 0.5rem 3px 0px;
}

section.fedlist a:hover {
	text-decoration: none;
	background: #EEEEEE;
}

.pagination {
	margin: 40px auto;
}

.nav-links{
	display: flex;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-block;
	margin-right: 20px;
	padding: 15px 20px;
	color: #333;
	border-radius: 3px;
	box-shadow: 0 3px 3px #999;
	background: #F8F8F8;
}
.pagination .current {
	padding: 15px 20px;
	background: #69a4db;
	color: #FFFFFF;
}
.pagination .prev,
.pagination .next {
	background: transparent;
	box-shadow: none;
	color: #69a4db;
}
.pagination .dots {
	background: transparent;
	box-shadow: none;
}

dl.notfnd {
	margin: 20px 20px;
	padding: 20px 20px;
	border: 1px dotted #AAA;
	border-radius: 15px 0 15px 0;
	background: #F8F8F8;
}


dl.notfnd dt {
	font-weight: bold;
	margin-top: 20px;
}

dl.notfnd dt:nth-of-type(1) {
	margin-top: 0px;
}

dl.notfnd dd {
	padding-left: 2rem;
}


#inqform { width: 100%; }

#inqform .inqhead {
	text-align: center;
	background: #FFAAAA;
	border: 1px solid #FF6666;
	color: #000000;
	padding: 5px 0px;
}

#inqform dt { padding-left: 10px; margin-bottom: 5px; } 

#inqform dd { padding-left: 30px; margin-bottom: 15px; line-height: 150%; } 

#inqform dd p {
	color: #222222;
	font-weight: bold;
	font-size: 125%;
}

#inqform dd div {
	text-align: center;
	padding: 7px 0px 15px 0px;
}

#inqform span { font-size: 80%; }

#inqform input, 
#inqform textarea, 
#inqform select { 
	padding: 4px;
	border: 1px solid #444444;
	margin-bottom: 3px;
}

#inqform input[type="text"],
#inqform input[type="mail"],
#inqform select,
#inqform textarea { padding: 5px; }

#inqform textarea { 
	width: calc(100% - 10px);
	height: 150px; 
}

#inqform .rem_a { width: 15rem; }
#inqform .rem_b { width: 31rem; }
#inqform .rem_c { width: 25rem; }
#inqform .rem_d { width:  5rem; }
#inqform .rem_e { width: calc(100% - 10px); }

#inqform button[type="button"],
#inqform button[type="submit"] {
	border: none;
	width: calc(100% - 2px);
	height: 50px;
	border-radius: 3px;
	border: 1px solid #095596;
	background: #1a66a7;
	color: #FFFFFF;
	font-size: 16px;
}

input:invalid,
select:invalid,
textarea:invalid {
	background: #FFCCCC;
}

#inqform button[type="button"][disabled],
#inqform button[type="submit"][disabled] {
	background: #DDDDDD !important;
	color: #888888 !important;
	cursor: not-allowed !important;
}

dl.mbooth { 
	margin-top: 40px;
	float: left;
}

dl.mbooth dt {
	aspect-ratio: 16 / 9;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: auto 100px;
	position: relative;
}

dl.mbooth dt a {
	display: block;
	text-align: center;
	position: absolute;
	bottom: 5px;
	width: 100%;
	text-align: center;
	font-weight: bold;
	color: #222222 !important;
	text-decoration: underline;
}

dl.mbooth dd {
	height: 250px;
	text-indent: 1rem;
	font-size: 87.5%;
	padding: 10px;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
}

.iframe1609 {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	height: 0;
	overflow: hidden;
}

.iframe1609 iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (min-width: 1000px) { 
	section.fedlist p {
		width: calc(100% / 3);
	}

	dl.mbooth { 
		width: 33%;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 999px) { 
	#header nav:nth-of-type(1) {
		width: 100%;
	}
	
	#globalMenuDl div {
		width: 100%;
	}
	
	main {
		width: 100%;
	}

	section.fedlist p {
		width: calc(100% / 2);
	}

	dl.mbooth { 
		width: 33%;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 767px) { 
	body {
		width: calc(100% - 20px);
	}
	
	#header {
		width: calc(100% - 20px);
		height: 80px;
	}
	
	#header p.site-descrpt {
		display: none;
	}
	
	#snsprd-menuT {
		display: none;
	}
	
	#globalMenu {
		display: block;
	}
	
	#snsprd-menuB {
		display: block;;
	}
	
	#globalMenuDl {
		display: none; 
		opacity: 0;
		position: absolute;
		height: 100%;
		min-height: 100vh;
		min-height: calc(var(--vh, 1vh) * 100);
		overflow-x: none;
		overflow-y: auto;
		top: 80px;
		left: 0;
		background: rgba(255, 255, 255, 0.975);
	}
	
	#globalMenuDl div form {
		width: calc(100% - 20px);
		margin: 0px auto;
		float: none;
		position: static;
	}
	
	#globalMenuDl div ul {
		width: calc(100% - 6px);
		padding-top: 40px;
	}
	
	#globalMenuDl div ul li {
		display: block;
		text-align: center;
		height: 50px;
	}
	
	#globalMenuDl div ul li a {
		display: block;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #D9D9D9;
	}
	
	.list dt { 
		width: calc(100% - 110px);
		text-indent: 10px;
	}
	
	.list dd:nth-of-type(1) {
		width: 0px;
		display: none;
	}
	
	.list dd:nth-of-type(2) { 
		width: 120px;
	}
	
	.list dd:nth-of-type(2) .tlabel { 
		display: block;
	}
	
	main {
		width: 100%;
		padding: 100px 0px 0px 0px;
	}
	
	section.fedlist p {
		width: calc(100% / 1);
	}
	
	#inqform .rem_b { width: 15rem; }
	#inqform .rem_c { width: 15rem; }
	
	dl.mbooth { 
		width: 50%;
	}
}

@media (min-width: 661px) { 
	footer {
		padding: 20px 0px;
	}
	
	.scst {
		width: calc((100% - 20px - 20px) / 3);
		margin: 20px 0px;
		float: left;
	}
	
	.scst:nth-of-type(3n - 1) { 
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.scst:nth-of-type(3n + 1) { 
		clear: left;
	}
	
	#prblock li {
		width: calc(50% - 10px);
	}
	
	#prblock li:nth-of-type(odd) { 
		margin-right: 10px;
	}
	
	#prblock li:nth-of-type(even) { 
		margin-left: 10px;
	}

}

@media (max-width: 660px) { 
	#header h1.site-title a,
	#header  p.site-title a {
		display: block;
		width: calc(320px - 20px - 40px);
		height: 40px;
	}
	
	footer {
		padding: 20px 0px 60px 0px;
	}
	
	.scst {
		width: calc((100% - 20px) / 2);
		margin: 20px 0px;
		float: left;
	}
	
	.scst:nth-of-type(odd) { 
		margin-right: 10px;
		clear: left;
	}
	
	.scst:nth-of-type(even) { 
		margin-left: 10px;
	}
	
	.scst dd:nth-of-type(2) {
		display: none;
	}
	
	#prblock li {
		width: 100%;
	}
	
	.aCredit div {
		width: 100%;
	}
	
	.sharesns li {
		margin-top: 7px;
		float: left;
	}
	
	dl.mbooth { 
		width: 100%;
	}
}