@charset "utf-8";
/* -------------------------------
TITLE
------------------------------- */
h1.title {
	font-family:"Kaisei Decol", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #fff;
	text-shadow: 2px 2px 10px #8BD0DF,
	  			 -2px -2px 10px #8BD0DF,
				 2px 2px 10px #8BD0DF,
	  			 -2px -2px 10px #8BD0DF,
				 0 0 1px #000000;	
	background-image: url(../images/background01.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

/* -------------------------------
ARTICLE
------------------------------- */
/* 概要
------------------------------- */
#container {
	background: #fff;
}
#contents .contArea .txt {
	width: 100%;
	transform: translateY(10px);
	opacity: 0;
	transition: all 1s ease;
	position: relative;
	padding: 5rem 1rem;
	background: #fff;	
	margin: 0 auto;
}
#contents .contArea.in .txt {
	transform: translateY(0);
	opacity: 1;
}
#contents .contArea .txt .inn {
	width: 70%;
	font-size: 1.8rem;
	line-height: 3.2rem;
	margin: 0.7em auto 0;
}
@media screen and (max-width: 768px) {
	#contents {
		margin: auto;
		padding: 0;
	}
	#contents .contArea .txt {
		padding: 2em 1em;
	}
	#contents .contArea .txt h2 {
		font-size: 2.7rem;
		line-height: 3.6rem;
	}
	#contents #article .txt .inn {
		width: 90%;
		margin: 0 auto;
	}
	#contents .contArea .txt p {
		margin: auto;
	}
}
.post {
	width: 100%;
}

/* 詳細
------------------------------- */
/* 日付 */
.post__time {
	color: #999;
}

/* タイトル */
.post__title {
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 4.8rem;
	padding: 0.5em 0;
}

/* タイトル（副題） <span class="subtitle">で追記 */
.subtitle {
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 3.0rem;
	position: relative;
  	display: inline-block;
  	padding: 0 55px;
}
.subtitle:before, .subtitle:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: #6fb92d;
}
.subtitle:before {
	left:0;
}
.subtitle:after {
	right: 0;
}

/* リード文 */
.post__lead {
	border-bottom: 6px solid;
	border-image: linear-gradient(to right, #6fb92d, #94ccd8) ;
	border-image-slice: 1;
	padding-bottom: 0.75em;
}

/* 小見出し（通常　文字色：黒、左端水色） */
.subheading {
	font-size: 2.0rem;
	line-height: 3.4rem;
	font-weight: 700;
	padding: 0.1em 0.2em 0;
	border-left: 4px solid #94ccd8;
	margin-bottom: 0.3em;
}

/* 小見出し（装飾　文字色：緑、囲いあり） */
.strongSubheading {
	color: #6fb92d;
	font-size: 2.4rem;
	line-height: 4.0rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}
.strongSubheading::before {
	content: '【 ';
	position: relative;
}
.strongSubheading::after {
	content: ' 】 ';
	position: relative;
}

/* キャプション写真 */
.hero-image {
	display: block;
	width: 100%;
	object-fit: cover;
	margin: 1.5em auto 0;
}

/* 記事詳細 */
.post-detail {
	margin-top: 0.75em;
}

/* 記事のブロック */
.p-wrap {
	margin-top: 1.5em;
}

/* 記事内リンク <a href="外部ページへのURL" target="_blank" rel="noopener noreferrer" class="post-link">で挿入 */
.post-link {
	display: inline-block;
	color:	#6fb92d!important;
}
.post-link:hover {
	color: #999!important;;
}

/* 写真グループ 　写真*/
.imgGroup {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.8em;
	margin-top: 4em;
}
.imgGroup img {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* 写真グループ 　説明 */
/* 中央揃え */
.imgGroup p {
	margin-top: 0.4em;
	font-size: 1.4rem;
	text-align: center;
}
/* 右揃え　class="img-desc"を追記 */
.img-desc {
	font-size: 1.4rem;
	text-align: end;
}

/* リンク */
.link {
	color: #3e3a39;
	margin-top: 4em;
}
.link__title {
	font-weight: 700;
	font-size: 2.0rem;
	line-height: 4.0rem;
}
.link__nav {
	text-decoration: underline;
}
.link__nav a:hover {
 	color:#6fb92d;
}
@media screen and (max-width: 768px) {
	/* リード文 */
	#contents .contArea .txt .post__lead {
    	margin-top: 0.5em;
	}
	/* 記事詳細 */
	.post-detail {
		margin-top: 1.5em;
	}
	/* 記事のブロック */
	#contents .contArea .txt .p-wrap {
		margin-top: 0.5em;
	}
	/* リンク */
	#contents .contArea .txt .link__nav {
		margin-top: 0.5em;
	}
}

/* -------------------------------
LIST COMPONENT
------------------------------- */

/* リスト全体を水色点線で囲む */
.list-wrap--dashed {
	padding: 1.5em;
	border: dashed 3px #94ccd8;
}

/* リスト要素の前に水色の点を入れる */
.list-item::before {
	content: "";
	width: 6px;
	height: 6px;
	display: inline-block;
	background-color: #94ccd8;
	position: relative;
	top: -4px;
	margin: 0 10px;
}

/* リスト　役職・人物紹介　class="personnel"で<p>を囲む */
.personnel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-weight: 600;
}
.personnel p {
	margin: 1em;
}
@media screen and (max-width: 768px) {
	.personnel {
		display: block;
	}
}

/* -------------------------------
BUTTON COMPONENT
------------------------------- */

/* リンクボタン　背景色：ピンク、文字色：白　<div class="contact-btn">の追記。*/
.contact-btn {
	display: block;
	width: 100%;
	text-align: center;
	margin: 6.0rem auto;
}
.contact-btn a {
    display: inline-block;
    width: 60.0rem;
    height: 8.0rem;
    color: #fff;
    font-size: 2.6rem;
    line-height: 8.0rem;
    background: #ee86a4;
	box-shadow: 0 5px 5px rgba(0,0,0,0.2), 0 -5px 6px -3px #f3678f inset;
    border-radius: 2.0rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
	font-weight: 700;
	margin: auto;
}
.contact-btn a:hover {
	background: #F097B0;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
@media screen and (max-width: 768px) {
	.contact-btn a {
		width: 100%;
		height: 6.0rem;
		font-size: 1.8rem;
		line-height: 5.8rem;
	}
}

/* -------------------------------
OTHER ARTICLE COMPONENT
------------------------------- */

/* <span class="linemarker">で本文に黄色いマーカーを引く */
.linemarker {
	display: inline;
	background: linear-gradient(transparent 50%,#ffff00 50%);
}
/* <span class="text-bold">で本文の文字を太くする */
.text-bold {
	font-weight: 600;
}
/* <span class="text-end">で右揃えにする */
.text-end {
	display: block;
	text-align: end;
}
/* <div class="postscript">で文末に追伸を追記する */
.postscript {
	margin-top: 2.0em;
	display: grid;
	grid-template-columns: 10% 90%;
}
@media screen and (max-width: 768px) {
	.postscript {
		display: block;
	}
}
/* <br>非表示　タブレット・スマホ版 */
@media screen and (max-width: 768px) {
	.br-switch {
		display: none;
	}
}

/* -------------------------------
CEREMONY COMPONENT
------------------------------- */
/* 共通 */
.winner-comments h3, .chaperone-comments h4 {
	font-size: 2.0rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}
.winner-comments p, .chaperone-comments p {
	font-size: 1.6rem;
}
/* 受賞者のコメント（右）と写真（左） */
.winner-area {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #3e3a39;
	padding: 1.5em 0;
	width: 100%;
}
.winner-comments {
	margin-right: 1em;
	padding: 0.1em 1em 0.1em 0.1em;
}
.winnerImg_S {
	display: block;
	object-fit: cover;
	background-color: #94ccd8;
	width: 250px;
	height: 250px;
}
/* 指導者のコメント */
.chaperone-comments {
	border-bottom: 1px solid #3e3a39;
	margin-top: 1.5em;
	padding-bottom: 1.5em;
}
/* 受賞写真（大） */
.winnerImg_L {
	display: block;
	width: 100%;
	object-fit: cover;
}
@media screen and (max-width: 768px) {
	.winner-comments {
		padding: 0;
	}
	.winnerImg_S {
		display: none;
	}
}

/* -------------------------------
FLYER COMPONENT
------------------------------- */
/* 共通 */
.flyer-area {
	display: flex;
	justify-content: space-around;
	padding: 0.3em 0 0.6em;
}
.flyer {
	padding: 0.5em;
}
/* 画像とリンク */
.flyer > a {
	display: block;
}
.flyer__img {
	width: 100%;
}
.flyer__img:hover {
	opacity: 50%;
}
/* キャプション */
.flyer__caption {
	text-align: center;
	padding-top: 0.3em;
}
.flyer__caption a:hover {
	color: #6fb92d;
}