@charset "utf-8";

#bread{padding: 113px 0 0;}
#bread ol{padding: 0 45px;}

h3.h3 {padding: 0; line-height: 111%;}
h3.h3 span{line-height: 111%;}
.flex{display: flex;}

#detail{padding: 58px 0 0; overflow: hidden;}
#detail .title_box{width: 1000px; margin: 0 auto; }
#detail .title_box p.tag{ line-height: 143%; border-bottom: 1px solid #DEDEDE; padding: 0 0 26px}
#detail .title_box p.tag .tag_2{border-radius: 100px; border: 1px solid #707070; font-size: 14px; text-align: center; padding: 9px 24px; width: auto; line-height: 143%;margin: 0 17px 0 0; display: inline-block;}
#detail .title_box p.tag .deta{font-size: 14px; line-height: 143%; display: inline-block;padding: 9px 0;}
#detail .title_box h2{ font-family: 'Noto Sans Japanese bold'; font-size: 36px; line-height: 167%; padding: 20px 0 0;}

#detail .main_img{ position: relative; width: 100%; margin: 70px auto 0; max-width: 1448px; }
#detail .main_img .img{position: relative;padding: 0 24px;}
#detail .main_img .img img{width: 100%; height: auto; position: relative; z-index: 1;}
#detail .main_img .img:before,
#detail .main_img .img:after{content: ""; position: absolute;  width: 586px; height: 520px; }
#detail .main_img .img:before{clip-path: polygon(0 0, 100% 0, 0% 100%); top: -20px; left: 0px;background: linear-gradient( 35deg, #00A7E0 , #4461B1, #00AE7C); }
#detail .main_img .img:after{clip-path: polygon(0 100%, 100% 0, 100% 100%); bottom: -20px; right: 0px;background: linear-gradient( -125deg, #00A7E0 , #4461B1, #00AE7C); }
#detail .content{width: 1000px; margin: 0 auto; }
#detail .content .content_box .big_tt{font-size: 28px; line-height: 143%;font-family: 'Noto Sans Japanese bold'; padding: 90px 0 20px; border-bottom: 1px solid #DEDEDE;}
#detail .content .content_box p.text{font-size: 18px; line-height: 234%; padding: 35px 0 0;}

#detail .content .content_box p.text span{font-size: 18px;}
#detail .content .content_box p.text span[data-bold="1"]{font-family: 'Noto Sans Japanese bold';}
#detail .content .content_box p.text span.ql-size-small{font-size: 12px;}
#detail .content .content_box p.text span.ql-size-large{font-size: 24px;}

#detail .content .content_box .img{padding: 114px 0 0;}
#detail .content .content_box .img img{max-width: 100%; height: auto;}
#detail .content .content_box .art_imgtext p.mini{font-size: 12px; color: #585858; line-height: 160%; padding: 12px 0 0;}
#detail .content .share{margin: 130px 0 0; padding: 41px 0 36px; border-bottom: 1px solid #DEDEDE; border-top: 1px solid #DEDEDE;}
#detail .content .share .flex{align-items: center;}
#detail .content .share .flex p{font-family: 'JosefinSans-BoldItalic'; font-weight: 600; padding: 0 49px 0 0;}
#detail .content .share .flex ul{align-items: center;}
#detail .content .share .flex ul li:not(:last-child){padding: 0 50px 0 0;}
#detail .content .content_box .btn{padding: 50px 0 0;}
#detail .content .content_box .btn a{background:url(../images2/common/btn_2.svg) 97% center no-repeat , linear-gradient( to right , #4461B1, #00AE7C); color: #fff; position: relative;}

#detail .content .content_box .youtube{position: relative; margin: 110px 0 0;}
#detail .content .content_box .youtube::before { content: ''; width: 100%; padding-top: 56%; display: block;}
#detail .content .content_box .youtube iframe { width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0; }

#detail .content .content_box .iframe-embed{position: relative; margin: 110px 0 0;}
#detail .content .content_box .iframe-embed iframe { width: 100%; height: 385px; border: 0; }

/* ------------------------------------------------------------ .news */
#detail.news .content .content_box {padding: 78px 0 0;}
#detail.news .content .content_box .img { padding: 0;}
#detail.news .content .content_box .img img { width: 100%; height: auto;}
#detail.news .content .content_box .text{}

#detail.news .content .content_box .link_btn{padding: 91px 0 0;}

#detail.news .content .content_box .btn{padding: 0px;}
#detail.news .content .content_box .youtube{ margin: 0;}
/* ------------------------------------------------------------ #other_articles */
#other_articles{padding: 128px 0 0;}
#other_articles h3 span{letter-spacing: 0;}
#other_articles .other_articles_inner{width: 1100px; height: auto; margin: 0 auto;}
#other_articles ul.content_box{padding: 75px 0 0; flex-wrap: wrap;}
#other_articles ul.content_box li{width: 333px; height: auto;}
#other_articles ul.content_box li:not(:nth-child(3n)){margin-right: 50px;}
#other_articles ul.content_box li.empty{margin: 0 auto;text-align: center;}
#other_articles ul.content_box li .text_box{padding: 21px 0 0; justify-content: space-between; align-items: center;}
#other_articles ul.content_box li .text_box p.text{font-size: 17px; font-family: 'Noto Sans Japanese medium'; padding: 0 0 28px; border-bottom: 1px solid #DEDEDE;}
#other_articles ul.content_box li .text_box .tag{padding: 14px 0 0; line-height: 143%;}
#other_articles ul.content_box li .text_box .tag span.tag_2{ border-radius: 100px; border: 1px solid #707070; font-size: 14px; text-align: center; padding: 9px 24px; line-height: 143%; display: inline-block; }
#other_articles ul.content_box li .text_box .tag span.deta{font-size: 14px; line-height: 143%; display: inline-block; float: right; padding: 10px 0 0 10px;}
#other_articles .top_page{padding: 120px 0 99px;}
#other_articles .top_page .btn{padding: 0px;}

@media only screen and (max-width:640px){
	
	#bread{padding: 77px 0 0;}
	#bread ol{padding: 0; width: 90%; margin: 0 auto;}

	.flex{display: block;}
	#detail img{width: 100%; height: auto;}
	#detail{padding: 49px 0 0;}
	#detail .title_box{width: 100%; margin: 0 auto; }
		
	#detail .title_box p.tag{ line-height: 143%; border-bottom: 1px solid #DEDEDE; padding: 0 0 16px}
	#detail .title_box p.tag .tag_2{font-size: 12px; padding: 5px 24px; line-height: 118%;}
	#detail .title_box p.tag .deta{font-size: 14px; line-height: 143%;}
	
	#detail .title_box h2{ font-size: 22px; padding: 15px 0 0;line-height: 137%;font-family: 'Noto Sans Japanese medium';}
	
	#detail .main_img{padding: 0; margin: 40px auto 0;}
	#detail .main_img .img{position: relative;padding:5% ; width: auto; margin: 0 auto; }
	#detail .main_img .img img { margin: 0 auto; width: 100%;display: block;}
	#detail .main_img .img:before,
	#detail .main_img .img:after{ width: 44.1%; height: auto; padding: 19.5% 0;}
	#detail .main_img .img:before{top: 0px; left: 0px;}
	#detail .main_img .img:after{bottom: 0px; right: 0px;}
	#detail .content{width: 90%; margin: 0 auto; }
	#detail .content .content_box p.big_tt{font-size: 20px; padding: 30px 0px 15px 0px;line-height: 150%;}
	#detail .content .content_box p.text{font-size: 16px; line-height: 200%; padding: 23px 0 0;}
	#detail .content .content_box .img{padding: 69px 0 0;}
	#detail .content .content_box .img p.mini{ font-size: 14px; padding: 1px 0 0;}
	#detail .content .share{margin: 35px 0 0; padding: 35px 0 34px; }
	#detail .content .share .flex{display: flex; justify-content: center;}
	#detail .content .share .flex p{ padding: 0 31px 0 0; font-size: 20px; line-height: 100%;}
	#detail .content .share .flex ul{align-items: center;}
	#detail .content .share .flex ul li.icn_1{width: 27px; height: auto;}
	#detail .content .share .flex ul li.icn_2{width: 13px; height: auto;}
	#detail .content .share .flex ul li.icn_3{width: 29px; height: auto;}
	#detail .content .share .flex ul li:not(:last-child){padding: 0 25px 0 0;}
    #detail .content .content_box .iframe-embed{margin: 50px 0 0;}
    #detail .content .content_box .iframe-embed iframe { height: 470px; }
	
	/* ------------------------------------------------------------ .news */
	#detail.news .content .content_box {padding: 30px 0 0;}
	#detail.news .content .content_box .img{}
	#detail.news .content .content_box .text{}
	#detail.news .content .content_box .btn{padding: 0px;margin: 0 auto; width: 90%; height: auto;}
	#detail.news .content .content_box .btn a{width: 100%; height: auto; background:url(../images2/common/btn_2.svg) 97% center no-repeat , linear-gradient( to right , #4461B1, #00AE7C); color: #fff; position: relative;height: 62px; line-height: 62px;}
	
	/* ------------------------------------------------------------ #about */
	#other_articles{padding: 69px 0 0;}
	#other_articles img{width: 100%; height: auto;}
	#other_articles h3 span{letter-spacing: 0;font-size: 32px;}
	#other_articles .other_articles_inner{width: 100%; height: auto; margin: 0 auto;}

	#other_articles ul.content_box{padding:20px 0 0 5%;}
	#other_articles ul.content_box li{width: 288px; height: auto; margin-right: 23px;}
	#other_articles ul.content_box li:not(:nth-child(3n)){margin-right: 23px;}
	#other_articles ul.content_box li .text_box{padding: 15px 0 0; justify-content: space-between; align-items: center;}
	#other_articles ul.content_box li .text_box p.text{font-size: 17px; padding: 0 0 12px; }
	#other_articles ul.content_box li .text_box .deta_box{padding: 19px 0 0; display: flex;}
	#other_articles ul.content_box li .text_box .deta_box p{padding: 0px;font-size: 12px;}
	#other_articles ul.content_box li .text_box .tag span.tag_2{font-size: 12px; padding: 7px 24px 8px; }
	#other_articles ul.content_box li .text_box .tag span.deta{font-size: 12px; padding: 6px 0 0 10px;}
	
	#other_articles .top_page{padding: 40px 0 80px;}
	#other_articles .top_page .btn{padding: 0px; margin: 0 auto; width: 70%; height: auto;}
	#other_articles .top_page .btn a{width: 100%; height: auto;}
}