@charset "UTF-8";

div#title { 
	margin: 80px auto 40px; 
	text-align: center; 
}
div#title h1 {
	font-size: 4.0rem; 
}
div.top-img{
	width: 100%;
	text-align: center;
}
div.top-img img{
	width: 100%;
}

div.top-img { margin-bottom: 40px; }
div#title h1 { margin-bottom: 32px; }
div#title strong { font-size: 2.4rem; }

@media screen and (max-width: 767px) {
	div#title h1 { 
		font-size: 2.4rem; 
	}
	article{
		padding: 0 10px;
	}
	
	div#title h1 { margin-bottom: 18px; }
	div#title strong { font-size: 1.8rem; }
	
}

/* --------------------------------------------------
	section
-------------------------------------------------- */

section{
	width: 960px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	section{
		width: 100%;
	}
}

/* --------------------------------------------------
	section01
-------------------------------------------------- */
h2{
	font-size: 2.4rem;
	text-align: center;
	padding-top: 80px;
	margin-bottom: 40px;
}
section#s01{
	margin-bottom: 80px;
}
section#s01 p{
	line-height: 2.0;
}

section#s01 p { margin-bottom: 30px; }
section#s01 div.wrapper { margin: 0 auto; width: 720px; }
section#s01 div.wrapper div { padding-top: 56.25%; width: 100%; position: relative; }
section#s01 div.wrapper iframe { width: 100% !important; height: 100% !important; position: absolute; top: 0; right: 0; }

@media screen and (max-width: 767px) {
section#s01 div.wrapper { width: 100%; max-width: 560px; }
}

/* --------------------------------------------------
	section02
-------------------------------------------------- */
section#s02{
	display: flex;
	justify-content: space-between;
}
section#s02 div.ksupo{
	width: 440px;
}

section#s02 div.ksupo { color: #008bcd; }

section#s02 div.zsupo{
	width: 440px;
}

section#s02 div.zsupo { color: #e87722; }

section#s02 h3{
	color: #fff;
	font-size: 3.2rem;
	text-align: center;
	padding: 12px 0;
	margin-bottom: 80px;
}
section#s02 div.ksupo h3{
	background-color: #008bcd;
}
section#s02 div.zsupo h3{
	background-color: #e87722;
}

section#s02 ul.post-list { margin: 0; text-align: center; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
section#s02 ul.post-list li { margin-bottom: 60px; width: 200px; }
section#s02 ul.post-list li a, ul.post-list li span.image { margin-bottom: 12px; width: 200px; height: 200px; display: block; position: relative; overflow: hidden; }
section#s02 ul.post-list div.panel { width: 100%; height: 200px; position: absolute; left: 0; top: 0; }
section#s02 ul.post-list div.panel div { width: 100%; height: 200px; position: relative; }
section#s02 ul.post-list div.panel img { width: 100%; height: 200px; position: absolute; z-index: 1; position: static; }

section#s02 ul.post-list div.panel_ { width: 100%; height: 200px; position: absolute; left: 0; top: 0; }
section#s02 ul.post-list div.panel_ div { width: 100%; height: 200px; position: relative; }
section#s02 ul.post-list div.panel_ img { width: 100%; height: 200px; position: absolute; z-index: 1; position: static; }

section#s02 ul.post-list div.front { z-index: 2; }
section#s02 ul.post-list div.back { z-index: 1; }
section#s02 ul.post-list strong { padding-left: 24px; font-weight: normal; display: inline-block; position: relative; }
section#s02 ul.post-list strong.more::before { content: ''; width: 20px; height: 20px; border-radius: 10px; position: absolute; left: 0; }
section#s02 div.ksupo strong.more::before { background: #008bcd; }
section#s02 div.zsupo strong.more::before { background: #e87722; }

section#s02 div.ksupo span.new { margin-left: 5px; padding: 0 5px; background: #008bcd; color: #fff; font-size: 1.4rem; display: inline-block; position: absolute; right: 0; bottom: 0; z-index: 3; }
section#s02 div.zsupo span.new { margin-left: 5px; padding: 0 5px; background: #e87722; color: #fff; font-size: 1.4rem; display: inline-block; position: absolute; right: 0; bottom: 0; z-index: 3; }

section#s02 ul.post-list strong.more::after { content: ''; width: 0; height: 0; border-left: solid 8px #fff; border-top: solid 4px transparent; border-bottom: solid 4px transparent; position: absolute; left: 7px; top: 6px; }

@media screen and (max-width: 767px) {
	section#s02{
		display: block;
	}
	section#s02 div.ksupo{
		width: 100%;
	}
	section#s02 div.zsupo{
		width: 100%;
	}
	section#s02 h3{
		font-size: 2.4rem;
		margin-bottom: 40px;
	}
	section#s02 ul{
		padding: 20px;
	}
	
	section#s02 ul.post-list li { width: 150px; }
	section#s02 ul.post-list li a, ul.post-list li span.image { width: 150px; height: 150px; }
	section#s02 ul.post-list div.panel { height: 150px; }
	section#s02 ul.post-list div.panel div { height: 150px; }
	section#s02 ul.post-list div.panel img { height: 150px; }
  
  section#s02 ul.post-list div.panel_ { height: 150px; }
	section#s02 ul.post-list div.panel_ div { height: 150px; }
	section#s02 ul.post-list div.panel_ img { height: 150px; }
	
}

div.detail { margin: 0 auto; width: 800px; height: 80%; background: #fff; color: #111; display: none; position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 101; overflow: auto; }
div.detail div.gallery { width: 800px; height: 530px; }
div.detail div.inner { padding: 70px 90px; }
div.detail div.image { margin-bottom: 70px; text-align: center; }
div.detail div.image img { width: 100%; max-width: 300px; height: auto; }
div.detail div.athlete {}
div.detail div.athlete strong { font-size: 2.4rem; text-align: center; display: block; }
div.detail div.profile {}
div.detail div.profile strong { margin: 1em 0; font-size: 1.8rem; text-align: center; display: block; }
div.detail div.profile p {}
div.detail div.comment {}
div.detail div.comment strong { margin: 1em 0; font-size: 1.8rem; text-align: center; display: block; }
div.detail div.comment p {}
div.detail div.more { text-align: right; }
div.detail a.close { margin: 40px auto 0; padding: 8px 0; width: 300px; background: #000; border: solid 3px #000; color: #fff; text-align: center; display: block; }
div.detail a.close:hover { background: #fff; color: #000; text-decoration: none; }
div.overlay { width: 100%; height: 0; background: rgba(0,0,0,0.4); position: fixed; top: 0; left: 0; z-index: 100; }

@media screen and (max-width: 767px) {
div.detail { width: 90%; }
div.detail div.gallery { width: 100%; height: auto; }
div.detail div.inner { padding: 30px; }
}