@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: url(../images/background01.png) no-repeat center bottom / cover;
}
/* -------------------------------
ARTICLE
------------------------------- */
#contents .contArea .txt {
	width: 100%;
	transform: translateY(10px);
	opacity: 0;
	transition: all 1s ease;
	position: relative;
	padding: 5rem 1em;
	background: #fff;	
	margin: 0 auto;
}
#contents .contArea.in .txt {
	transform: translateY(0);
	opacity: 1;
}
#contents .contArea .txt .inn {
	width: 100%;
}
/* -------------------------------
CHANGED
------------------------------- */
#container {
	background-color: #fff;
}
#contents #article .txt .inn {
	width: 70%;
	font-size: 1.8rem;
	margin: 0.7em auto 0;
}

/* article */
.article {
	line-height: 1.5;
	border: 1px solid #666;
	padding: 1em;
	margin-top: 2em;
}
.article__inner {
	background-image: url(../images/background-rev.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: top;
}
.article__header {
	position: relative;
	background-color: #93cbd8;
}
.article__lead {
	color: #fff;
	font-size: 2.0rem;
	font-weight: 700;
	background-color: #555;
	padding: 0.25em 0.25em 0.25em 0.8em;
}
.article__title {
	color: #fff;
	font-size: 5.2rem;
	font-weight: 800;
	line-height: 1.2;
	-webkit-text-stroke: 2px #333;
  	text-stroke: 2px #333;
  	paint-order: stroke;
	text-shadow: 6px 6px 2px #333, -1px -1px 1px #333;
	padding: 0.1em 0.5em;
}
.article__title--em {
	color: #ffe009;
	font-size: 160%;
}
.article__title--lg {
	font-size: 130%;
}
.article__title--sm {
	position: absolute;
	top: 1em;
	right: 1.5em;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
}
.article__seal {
	position: absolute;
	bottom: -10%;
	right: 1em;
}
.article__body {
	background-image: url(../images/background.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: bottom;
}
.article__contents {
	padding: 1em 1.5em;
}
.article__item {
	margin-bottom: 0.5em;
}
.article__sub-title {
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	background-color: #29adba;
	border-radius: 5px;
	padding: 0.4em 1em 0.3em 1em;
}
.article__sub-title2 {
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	background-color: #6fb92d;
	border-radius: 5px;
	padding: 0.4em 0 0.3em 1em;
}
.article__text {
	font-size: 1.6rem;
	margin: 0.5em 0;
	padding-left: 1em;
}
.article__text--bold {
	font-weight: 600;
}
.article__text--center {
	text-align: center;
	padding: 0;
}

/* intro */
.article__point {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 0.8em;
}
.article__intro {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
}
.intro__item {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
}
.intro__avatar {
	display: block;
	width: 10vw;
	margin-left: 0.8em;
}
.intro__text {
	font-size: clamp(9px, 1.2vw, 14px);
	line-height: normal;
	font-weight: 500;
	letter-spacing: 0.1em;
}
.intro__name {
	font-size: clamp(12px, 1.8vw, 18px);
	line-height: normal;
	padding-top: 0.4em;
}

/* announce */
.announce {
	width: 100%;
	color: #fff;
	background-color: #334053;
	padding: 1em;
}
.announce__title {
	display: inline-block;
}
.announce__title--frame {
	border: 1px solid #fff;
}
.announce__text {
	text-align: center;
	margin-top: 0.5em;
}

/* detail */
.detail__date {
	display: block;
	border-bottom: 1px solid #fff;
}
.detail__text--md {
	font-size: 3.2rem;
	font-weight: 600;
}
.detail__text--lg {
	font-size: 4.8rem;
	font-weight: 600;
}
.detail__text {
	padding: 0.3em 0;
	font-weight: 600;
}
.detail__text--under-line {
	border-bottom: 1px solid #fff;
}

/* article__footer */
.article__footer {
	margin-top: 1em;
}
.info-wrapper {
	display: flex;
	gap: 1.5em;
	align-items: center;
	margin-bottom: 1em;
}
.logo-wrapper {
	text-align: center;
}
.logo__img {
	width: 300px;
	max-width: 100%;
}
.info__inner {
	display: flex;
}
.info__title {
	font-size: 1.2em;
	font-weight: 600;
}
.info__text {
	color: #333;
	font-size: 1.5rem;
}
.info__text a {
	color: #333;
	text-decoration: none;
}
.info__text a:hover {
	color: #6fb92d;
	text-decoration: underline;
}
.pdf-wrapper {
	text-align: center;
	margin-top: 2em;
}
.pdf {
	display: inline-block;
	font-size: 1.2em;
	border: 1px solid currentColor;
	padding: 0 0.3em;
}
.pdf:hover,
.pdf:focus {
	color:#6FBA2C;
	text-decoration: none;
}

/* post */
.post {
	width: 100%;
}
.post__time {
	color: #999;
}
.post__title {
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 4.8rem;
	padding: 0.5em 0;
}
.post__lead {
	line-height: 1.7;
	border-bottom: 6px solid;
	border-image: linear-gradient(to right, #6FBA2C, #8BD0DF) ;
	border-image-slice: 1;
	padding-bottom: 0.5em;
}
.hero-image {
	width: 100%;
	object-fit: cover;
	margin: 1.5em auto 0;
}
.content {
	margin-top: 1.5em;
}
.content__header {
	font-size: 2.3rem;
	font-weight: bold;
	color: #6FBA2C;
	margin-bottom: 0.3em;
}
.content__text {
	line-height: 2em;
}
.img-area {
	display: flex;
	justify-content: space-around;
	margin-top: 1.5em;
}
.img-area__inner {
	width: 30%;	
	margin-top: 0.5em;
}
.img-area__img {
	width: 100%;
	object-fit: cover;
}
.img-area__caption {
	font-size: 1.8rem;
	text-align: center;
	padding-top: 0.3em;
}

.link {
	color: #000000;
	margin-top: 4em;
}
.link__title {
	font-weight: 700;
	font-size: 2rem;
	line-height: 4rem;
}
.link__navigation {
	text-decoration: underline;
}
.link__navigation a:hover {
 color:	#6FBA2C;
}

@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: 1.4;
	}
	#contents #article .txt .inn {
		width: 100%;
	}
	#contents .contArea .txt p {
		margin-top: 0.5em;
	}
	.article {
		padding: 0.5em;
	}
	.article__contents {
		padding: 1em 0.5em;
	}
	#contents .contArea .txt h3.article__lead {
		font-size: 1.625rem;
	}
	#contents .contArea .txt h2.article__title {
		font-size: 2.7rem;
	}
	.article__seal {
		bottom: 3%;
    	right: 0.2em;
	}
	.article__text {
		margin: 0.5em 0.3em;
		padding-left: 0;
	}
	.article__text--left {
		text-align: left;
	}
	.article__point {
		display: block;
	}
	.article__intro {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-around;
	}
	.intro__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		text-align: center;
		margin-top: 1em;
	}
	.intro__avatar {
		width: 150px;
	}
	.intro__text {
		font-size: 1.4rem;
	}
	.intro__name {
		padding: 0;
		font-size: 1.8rem;
	}
	.announce__inner {
		display: block;
	}
	.info-wrapper {
		display: block;
	}
	.info__text {
		font-size: 1.4rem;
	}
	#contents .contArea .txt .post__lead {
		line-height: 1.5;
    	margin-top: 0.5em;
	}
	.img-area__caption {
		font-size: 1.2rem;
	}
	#contents .contArea .txt .content {
		margin-top: 1.2em;
	}
	#contents .contArea .txt .content__text {
		margin-top: 0.5em;
	}
	.img-area {
		display: block;
	}
	.img-area__inner {
		width: 100%;	
	}
	#contents .contArea .txt .link__navigation {
		margin-top: 0.5em;
	}
}
/* -------------------------------
ARTICLE COMPONENT
------------------------------- */
/* <span class="linemarker">で本文に黄色いマーカーを引く */
.linemarker {
	background: linear-gradient(transparent 50%,#ffff00 50%);
}
.text-bold {
	font-weight: 600;
}
/* <br>非表示　タブレット・スマホ版 */
@media screen and (max-width: 768px) {
	.br-switch {
		display: none;
	}
}
.right {
	flex: 1;
}
.left {
	flex: 1;
}
.btn-wrapper {
	text-align: center;
}
.btn--circle {
	display: inline-block;
	font-size: 2.5rem;
	font-weight: 700;
	width: 100%;
	color:#6FBA2C !important;
	background-color: #fff;
	text-align: center;
	border: 3px solid currentColor;
	border-radius: 20px;
	margin-top: 0.5em;
	padding: 0.2em 0.3em;
}
.btn--circle:hover,
.btn--circle:hover {
	color: #fff !important;
	background-color: #6FBA2C;
	text-decoration: none;
}
.btn--blue {
	color:#8BD0DF !important;
}
.btn--blue:hover {
	background-color: #8BD0DF;
}
@media screen and (max-width: 768px) {
	.btn--circle {
		font-size: 2.2rem;
	}
}