@charset "utf-8";
#media_detail #media .date { font-size: 18px; line-height: 1; color: #a6a6a6; letter-spacing: 1px; margin-bottom: 10px; }

#media_detail #media h3.main_h3 { width: 100%; font-size: 30px; line-height: 173%; color: #111a41; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; }

.blog_image{text-align: center;margin: 30px 0 0 ; }
.blog_image img{display: inline-block; width: 100%; height:auto;}
.block-content #main {display: block;}

.blog_details .blog_title{margin: 30px 0 0 ; }
.blog_title { margin: 90px 0 0 ; font-size: 26px; line-height: 150%; color: #111a41; letter-spacing: -2px; word-break: normal; }
.blog_text { font-size: 18px; line-height: 180%; color: #434343; letter-spacing: -1.5px; margin: 30px 0 0 ; }
.blog_text a{border-bottom: 1px solid #EF8041;   color: #EF8041;  }
.blog_text span { font-family: 'Noto-Sans-JP-Bold';}
.blog_mover{width: 100%; height: auto; position: relative; padding: 56.25% 0 0; margin: 30px 0 0 ; }
.blog_mover iframe{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.blog_btn{ position: relative; display: block; width: 380px; padding: 25px 55px; background: #111a41; font-size: 20px; line-height: 120%; color: #fff!important; text-align: center; margin: 30px auto 0 ; }
.blog_btn::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: block; content: ""; background: #dcdcdc; width: 50px; height: 1px;}


/* ------------------------------------------------ .block-link ------------------------------------------------ */
#media_detail #media .block-link { max-width: 1100px; padding: 30px 0; text-align: center; background: #C2E8EF; margin: 82px auto;}
#media_detail #media .block-link a{ display: flex; justify-content: center; align-items: center; height: 80px; width: 100%; max-width: 650px; font-size: 18px; line-height: 80px; color: #ffffff; background: #1b1b1b url("../images/media/arrow_right.png") 95% center no-repeat; margin: 0 auto; transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s;}
#media_detail #media .block-link a:hover{background: #1b1b1b url("../images/media/arrow_right.png") 100% center no-repeat;}
#media_detail #media .block-link a img {margin-right: 12px;}

/* ------------------------------------------------ .related ------------------------------------------------ */
#media_detail #media .related{width: 1130px; margin-left: calc((100% - 1100px) / 2 - 30px);margin-bottom: 73px;}

#media_detail #media .related .section-h3 { text-align: center; font-size: 18px; line-height: 1; color: #434343; letter-spacing: 2px; padding-left: 44px; margin-bottom: 30px; }
#media_detail #media .related .section-span { font-family: 'CormorantGaramond-Light'; font-size: 40px; color: #111a41; letter-spacing: 5px; display: block; margin-bottom: 16px;}

#media_detail #media .related .item { width: 376px; padding: 0 30px; position: relative;float: left;}
#media_detail #media .related .item .date{ font-size: 16px; line-height: 40px; color: #a6a6a6; letter-spacing: 0.6px; position: absolute; top: 55px; right: -70px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg);}

#media_detail #media .related .item img{width: 100%; height: auto;}
#media_detail #media .related .item .date::before {content: ''; display: inline-block; width: 50px; height: 1px; background-color: #e6e6e6; margin-right: 10px; position: relative; top: -5px; }

#media_detail #media .related .item .item-tags {display: inline-block; min-width: 120px; font-size: 12px; line-height: 22px; color: #111a41; text-align: center; padding: 0 15px; border: 1px solid #111a41; margin-top: 18px; margin-bottom: 8px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px;}
#media_detail #media .related .item h4 { font-size: 22px; line-height: 155%; color: #434343; margin-bottom: 6px; }

#media_detail #media .related .item p { font-size: 16px; line-height: 163%; color: #434343; }


@media only screen and (max-width:640px) {
	#media .block-content {margin: 40px 0 70px;}
	#media_detail #media .date { font-size: 11px; }
	#media_detail #media h3.main_h3 { font-size: 22px;}
	.block-content #main {display: block;}
	.blog_details .blog_title{margin: 18px 0 0 ; }
	.blog_title { margin: 60px 0 0; font-size: 18px;}
	.blog_text { font-size: 11px; margin: 18px 0 0 ;}
	.blog_mover{ margin: 18px 0 0;}
	.blog_btn { width: 80%; padding: 18px 35px; font-size: 15px;}
	.blog_btn::after { width: 30px; height: 1px;}

	/* ------------------------------------------------ .block-link ------------------------------------------------ */
	#media_detail #media .block-link { padding: 20px 32px 23px; margin: 0 auto 35px;}
	#media_detail #media .block-link a{ height: 80px; width: 100%; font-size: 11px; line-height: 80px;background: #1b1b1b url("../images/media/arrow_right.png") 95% center no-repeat; background-size: 15px;}
	#media_detail #media .block-link a:hover{background: #1b1b1b url("../images/media/arrow_right.png") 100% center no-repeat;background-size: 15px;}
	#media_detail #media .block-link a img { width: 17px; height: auto; margin-right: 5px;}
	
	/* ------------------------------------------------ .related ------------------------------------------------ */
	#media_detail #media .related{ width: 100%; margin-left: auto;margin-bottom: 35px;}
	#media_detail #media .related .section-h3 { font-size: 12px; margin-bottom: 20px; padding-left: 0px; }
	#media_detail #media .related .section-span { font-size: 26px; margin-bottom: 3px;}
	#media_detail #media .related .item { padding: 0 17px 15px;}
	#media_detail #media .related .item .date{ font-size: 13px; line-height: 18px; top: 45px; right: -55px;}
	#media_detail #media .related .item .date::before { width: 26px; height: 1px; margin-right: 10px; top: -4px; }
	#media_detail #media .related .item .item-tags { width: 78px; font-size: 9px; line-height: 13px; margin: 13px 0 5px;}
	#media_detail #media .related .item h4 { font-size: 14px; line-height: 16px; letter-spacing: -1px;}
	#media_detail #media .related .item p { display: none;}
	
	#media_detail #media #aside.SP { width: 90%; float: none; margin: auto; }

}