@charset "utf-8";
/* CSS Document */

/* トップページ */

.jirei-hero {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto 60px;
}

.article_box {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding: 80px 40px;
	background-color: #EEF5EC;
	font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 600px) {
.article_box {
	padding: 50px 0;
}	
}

.article_box h1 {
	font-size: 30px;
	color: #666666;
	text-align: center;
	padding: 20px 50px;
	display: block;
	margin: 0 auto 50px;
	width: 400px;
	position: relative;
}

@media screen and (max-width: 1000px) {
.article_box h1 {
	font-size: 22px;
	padding: 20px 40px;
	width: 310px;
}	
}



.article_box h1::before {
	content: "";
	position: absolute;
	width: 47px;
	height: 72px;
	background-image: url("../img/article/ttl-icon-left.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	left: 0;
	bottom: 0;
}

.article_box h1::after {
	content: "";
	position: absolute;
	width: 47px;
	height: 72px;
	background-image: url("../img/article/ttl-icon.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	right: 0;
	bottom: 0;
}


.article_box ul {
	display: flex;
	flex-wrap: wrap;
}

.article_box ul li {
	width: 30%;
	margin: 0 1.5% 30px;
}

@media screen and (max-width: 1000px) {
.article_box ul li {
	width: 46%;
	margin: 0 2% 30px;
}	
}

@media screen and (max-width: 600px) {
.article_box ul li {
	width: 90%;
	margin: 0 auto 30px;
}	
}

.article_box ul li a {
	display: inline-block;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background-color: #FFF;
}

.article_list_text {
	padding: 20px 20px 10px;
}

.article_case {
	padding: 1px 15px;
	background-color: #4A6535;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	font-size: 14px;
}

.article_list_text h2 {
	color: #666666;
	font-size: 21px;
	margin: 0 0 15px;
}

.article_case_read {
	color: #666666;
}

.case-2 {
	background-color: #4D5088;
}

.case-3 {
	background-color: #734D33
}

.case-4 {
	background-color: #7E8739
}

.case-5 {
	background-color: #BB7A23
}



/* ----------------------------------------------------
   article
------------------------------------------------------- */




#case-contents {
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  max-width: 1250px;
  margin: 0 auto;
	color: #666666;
}

.case-title{
  padding:20px 0;
	max-width: 1100px;
  margin: 0 auto;
}

.case-label{
  display:inline-block;
  background:#4A6535;
  color:#fff;
  padding:4px 18px;
  font-size:23px;
  font-weight:600;
  letter-spacing:1px;
	margin: 0 0 10px;
}

@media screen and (max-width: 768px) {
.case-label{
  padding:2px 12px;
  font-size:18px;
	margin: 0 0 5px;
}	
}



/* case別カラー */
.case1 .case-label{
  background:#4A6535;
}

.case2 .case-label{
  background:#4D5088;
}

.case3 .case-label{
  background:#734D33;
}

.case4 .case-label{
  background:#7E8739;
}

.case5 .case-label{
  background:#BB7A23;
}

/* case共通 */
/*.case-read-ttl,
.case-box-ttl{
  color:#4A6535;
}*/

/* case1 */
.case1 .case-label{
  background:#4A6535;
}

.case1 .case-read-ttl,
.case1 .case-box-ttl{
  color:#4A6535;
}

/* case2 */
.case2 .case-label{
  background:#4D5088;
}

.case2 .case-read-ttl,
.case2 .case-box-ttl{
  color:#4D5088;
}

/* case3 */
.case3 .case-label{
  background:#734D33;
}

.case3 .case-read-ttl,
.case3 .case-box-ttl{
  color:#734D33;
}

/* case4 */
.case4 .case-label{
  background:#7E8739;
}

.case4 .case-read-ttl,
.case4 .case-box-ttl{
  color:#7E8739;
}

/* case5 */
.case5 .case-label{
  background:#BB7A23;
}

.case5 .case-read-ttl,
.case5 .case-box-ttl{
  color:#BB7A23;
}

/* case別カラーEND */


.case-label span {
  font-size:29px;
}

@media screen and (max-width: 768px) {
.case-label span {
  font-size:24px;
}	
}

.case-area{
  margin-top:15px;
  font-size:28px;
  color:#666666;
  font-weight:500;
}

@media screen and (max-width: 768px) {
.case-area{
  margin-top:15px;
  font-size:20px;
}	
}


.case-main {
	padding: 10px 0 0;
	margin: 0 auto 100px;
	max-width: 1100px;
}

@media screen and (max-width: 768px) {
.case-main {
	padding: 10px 0 0;
	margin: 0 auto 30px;
}	
}

.case-read-ttl {
	font-size: 40px;
	color: #666666;
	line-height: 1.4;
	letter-spacing: 0.01rem;
	font-weight: 400;
	margin: 0 0 15px;
}

@media screen and (max-width: 768px) {
.case-read-ttl {
	font-size: 22px;
	margin: 0 0 15px;
	line-height: 1.9;
}	
}


.rubi {
	position: relative;
	z-index: 1;
	min-width: 48px;
}

.rubi span {
	position: absolute;
	font-size: 14px;
	text-align: center;
	top: -15px;
	left: 0;
	right: 0;
	min-width: 48px;
}

@media screen and (max-width: 768px) {
.rubi span {
	font-size: 10px;
	top: -10px;
}	
}

.case-box .case-read {
	font-size: 20px;
}

@media screen and (max-width: 768px) {
.case-box .case-read {
	font-size: 17px;
}	
}

.case-box {
	margin: 0 0 108px;
}

.case-box-ttl {
	font-size: 28px;
	font-weight: 500;
	color: inherit;
	display: inline-block;
	padding: 0 40px 0 0;
	margin: 0 0 25px;
	position: relative;
	line-height: 1.5;
}

@media screen and (max-width: 768px) {
.case-box-ttl {
	font-size: 23px;
	padding: 0 40px 0 0;
}	
}
	



.case-box-ttl::after {
	content: "";
	position: absolute;
	height: 72px;
	width: 47px;
	background-image: url("../img/article/ttl-icon.png") !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	right: -10px;
	bottom: -10px;
}

@media screen and (max-width: 768px) {
.case-box-ttl::after {
	content: "";
	position: absolute;
	height: 62px;
	width: 47px;
	right: -10px;
	bottom: 0px;
}	
}



.case-box-text {
	font-size: 16px
}

@media screen and (max-width: 768px) {
.case-box-text {
	font-size: 15px
}	
}

.case-img {
	max-width: 720px;
	margin: 0 auto 108px
}


@media screen and (max-width: 768px) {
.case-img {
	margin: 0 auto 35px;
}	
}

.case-img img {
	margin: 0 0 5px;
}


@media screen and (max-width: 768px) {
	.case-img figcaption {
		font-size: 12px;
		
	}
}

.episode-ttl {
	max-width: 600px;
	margin: 0 auto 108px;
	padding: 32px 0;
	text-align: center;
	font-weight: 500;
	color: #51633C;
	font-size: 28px;
	position: relative;
	z-index: 3;
}

@media screen and (max-width: 768px) {
.episode-ttl {
	max-width: 600px;
	margin: 0 auto 50px;
	padding: 25px 0;
	font-size: 21px;

}	
}


.episode-ttl::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #EEF5EC;
	z-index: -1;
	border: 1px solid #51633C;
}

.episode-ttl::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	right: -10px;
	bottom: -10px;
	background-color: #EEF5EC;
	z-index: -2;
}

.merit {
	max-width: 990px;
	border: 2px solid #51633C;
	border-radius: 20px;
	padding: 70px 50px 20px;
	position: relative;
	margin: 0 auto 105px;
}

@media screen and (max-width: 768px) {
.merit {
	border: 2px solid #51633C;
	padding: 70px 15px 20px;
	margin: 40px 0 55px;
}	
}

.merit::after {
	content: "";
	position: absolute;
	bottom: 15px;
	right: 15px;
	height: 120px;
	width: 120px;
	background-image: url("../img/article/merit.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

@media screen and (max-width: 768px) {
.merit::after {
	bottom: 0px;
	right: 0px;
	height: 70px;
	width: 70px;
	border-radius: 30px;
}	
}

.merit-ttl {
	position: absolute;
	top: -27px;
	left: 50px;
	font-size: 28px;
	background-color: #368076;
	padding: 15px 40px;
	border-radius: 40px;
	color: #FFF;
}

@media screen and (max-width: 768px) {
.merit-ttl {
	position: absolute;
	top: -27px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 90%;
	max-width: 500px;
	font-size: 17px;
	background-color: #368076;
	padding: 12px 20px;
	border-radius: 20px;

}	
}


.merit p {
	font-weight: 500;
	position: relative;
	z-index: 3;
}

.profile {
	max-width: 990px;
	margin: 0 auto 108px;
	padding: 70px 70px;
	background-color: #EEF5EC;
	position: relative;
	font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 768px) {
.profile {
	padding: 40px 40px;
	margin: 0 0 60px;
}	
}

@media screen and (max-width: 500px) {
.profile {
	padding: 30px;
}	
}



.profile img {
	width: 150px;
	position: absolute;
	top: 70px;
	right: 80px;
}

.profile-ttl {
	font-size: 22px;
	color: #51633C;
	margin: 0 0 30px;
}

@media screen and (max-width: 768px) {
.profile-ttl {
	font-size: 20px;
	margin: 0 0 20px;
}	
}


.profile-ttl span {
	font-weight: 400 !important;
}

.profile p {
	font-weight: 500;
	color: #666666;
}


.data {
	max-width: 982px;
	margin: 0 auto 108px;
	padding: 93px 60px;
	background-color: #EEF5EC;
	display: flex;
}

@media screen and (max-width: 768px) {
.data {
	padding: 30px 20px;
	display: block;
}	
}



.data-ttl {
	font-size: 28px;
	font-family: "Noto Serif JP", serif;
	color: #51633C;
	font-weight: 400;
}

@media screen and (max-width: 768px) {
.data-ttl {
	font-size: 25px;
}	
}



.data-list {
	margin: 0 0 0 40px;
	padding: 0 0 0 40px;
	border-left: 1px solid #2B2E34;
	color: #666666;
}

@media screen and (max-width: 768px) {
.data-list {
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
	border-left: 0px solid #2B2E34;
	border-top: 1px solid #2B2E34;
}	
}


.other {
	max-width: 800px;
	margin: 0 auto 100px;
}

.shimen a {
	position: relative;
	padding: 0 30px 0 0;
	text-decoration: underline;
}

.shimen a::after {
	content: "";
	position: absolute;
	height: 20px;
	width: 20px;
	background-image: url("../img/article/icon_pdf.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	right: 0;
	bottom: 0;
}

.other img {
	margin: 20px 0 0;
}

#case-contents .case-img .caption {
	text-align: right;
	font-size: 14.5px;
}

/* 全リンク共通 */
a {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}

/* hover時だけ下線 */
a:hover,
a:focus {
  text-decoration: underline;
}

/* 強調したいリンクだけ色変える */
.article_box a,
.case-box a {
  color: #2a5db0;
}

/*// スマホの時だけ改行させるクラス*/
.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}

.br-pc {
    display: block;
}

@media (max-width: 600px) {
    .br-pc {
        display: none;
    }
}

.pc-space::before {
  content: "　"; /* 全角スペース */
}

/* スマホでは消す */
@media screen and (max-width: 768px) {
  .pc-space::before {
    content: "";
  }
}

a:focus,
button:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* PC（デフォルト） */
.youtube-wrap {
  width: 800px;
  height: 450px;
  margin: 0 auto; /* 中央寄せしたい場合 */
}

.youtube-wrap iframe {
  width: 100%;
  height: 100%;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .youtube-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}