@charset "utf-8";


/* ----------------------------------------------------------------------- fv */
#fv{ position: relative; }
.fv_img{ width: 84%; margin: 0 0 0 auto; }
.fv_img img{ width: 100%; height: auto; }

.title_box{ position: absolute; left: 5%; top: 50%; transform: translate(0,-50%); }
.fv_title{ padding: 0 0 15px; font-size: 50px; font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-style: normal; }
.fv_text{ font-size: 18px; line-height: 2; }


/* ----------------------------------------------------------------------- blog */
#blog-wrap{ width: 1100px; margin: 0 auto; padding: 65px 50px 130px; box-sizing: content-box; display: flex; justify-content: space-between; }
#blog { width: 60%; }

/* 共通 */
.article_link{ display: block; }
.article_body{ padding: 20px 0 0; }
.article_area { padding: 0 0 10px; display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.article_tag { background-color: #F39801; color: #fff; font-size: 12px; font-family: 'Noto-Sans-JP-Bold'; padding: 5px 12px; }

.article_picture{ width: 100%; }
.article_picture img{ width: 100%; height: auto; }
.article_author { position: relative; padding-left: 20px; font-size: 12px; color: #A3A3A3; }
.article_author::before { position: absolute; content: ""; width: 10px; height: 11px; left: 0; top: 0; background: url(../images/blog/icn_person.svg) center/cover no-repeat;; }

.article_title { margin: 0 0 10px; line-height: 1.6; }
.article_date { font-size: 12px; }

/* hero */
.blog-hero { margin-bottom: 50px; }
.blog-hero .article_title { font-size: 18px; }
.blog-hero .article_picture img { width: 100%; height: auto; object-fit: cover; }

/* Grid */
.blog-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 40px 50px; }
.blog-grid article{ width: calc(100% / 2 - 25px); }


/* pager */
.pager{ display: flex; align-items: stretch; justify-content: center; gap: 10px; padding: 50px 0 0; }
.pager a{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #F39801; }
.pager a.active{ background: #F39801; color: #fff; }


/* ----------------------------------------------------------------------- aside */
#aside{ width: 33%; }

/* Ribbon */
.aside-ribbon { text-align: center; margin-bottom: 24px; }

/* PICK UP */
.aside-block:not(:last-of-type){ padding: 0 0 80px; }
.pickup-list_item { border-bottom: 1px solid #e0e0e0; }
.pickup-list_link { display: flex; align-items: center; gap: 20px; padding: 20px 0 30px; }
.pickup-list_picture { width: 40%; flex-shrink: 0; }
.pickup-list_picture img { width: 100%; height: auto; object-fit: cover; }

.pickup-list_info { flex: 1; }
.pickup-list_info > div { padding: 0 0 5px; display: flex; align-items: center; gap: 10px; }
.pickup-list_title { font-size: 14px; line-height: 1.5; }
.pickup-list_tag{ padding: 5px 12px; font-size: 12px; color: #fff; background: #F39801; }
.pickup-list_date{ font-size: 12px; }

/* CATEGORY */
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list_item { border-bottom: 1px solid #e0e0e0; }
.category-list_link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; text-decoration: none; color: inherit; }
.category-list_num { background-color: #F8F7F1; width: 66px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 100px; }

.category-list_link:hover .category-list_title { color: #f5a623; transition: color 0.2s ease; }

/* TAG */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a { display: inline-block; border: 1px solid #DBDBDB; border-radius: 20px; padding: 5px 15px; font-size: 14px; color: #919191; }
.tag-list a:hover { background-color: #919191; border-color: #DBDBDB; color: #fff; transition: all 0.2s ease; }


/* ----------------------------------------------------------------------- detail */
.article_header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 20px; border-bottom: 1px solid #D9D9D9; }
.article_meta { display: flex; align-items: center; gap: 16px; }
.article_topic { padding: 13px 0 26px; font-size: 18px; line-height: 1.5; }
.article_thumbnail { margin: 0 0 70px; }
.article_thumbnail img { width: 100%; height: auto; display: block; }

/* Body */
.article_detail { padding: 0 0 60px; }
.article_heading { position: relative; font-size: 20px; padding: 0 0 15px 40px; margin: 0 0 30px; border-bottom: 1px solid #F39801; }
.article_heading::before { position: absolute; content: ""; width: 30px; height: 30px; left: 0; top: -6px; background: url(../images/common/icn_favicon.svg) center / cover no-repeat; }
.article_text { line-height: 2; padding: 0 0 24px; }
.article_img { padding: 50px 0 70px; }
.article_img img { width: 100%; height: auto; }

/* おすすめ記事 */
.article_recommend { margin: 0 0 30px; }
.article_recommend-title { font-size: 20px; padding: 0 0 10px; border-bottom: 1px solid #D6D6D6; }
.article_recommend-list { padding: 25px 0 0; }
.article_recommend-list li { padding: 0 0 15px 19px; position: relative; }
.article_recommend-list li::before { content: "・"; position: absolute; left: 0; }
.article_recommend-list li a { text-decoration: none; color: inherit; }
.article_recommend-list li a:hover { color: #F39801; transition: color 0.2s ease; }

/* CTA */
.article_cta { text-align: center; margin: 0 0 65px; }
.article_cta-btn { display: inline-block; width: 256px; background: #FEA100; color: #fff!important; padding: 15px; border-radius: 100px; font-size: 16px; }
.article_cta-btn:hover { opacity: 0.8; transition: opacity 0.2s ease; }

/* SNSシェア */
.article_share { display: flex; align-items: stretch; justify-content: center; gap: 5px; padding: 25px 15px 27px; margin: 0 0 100px; background: #F8F7F1; }
.article_share-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 1px solid #BCBCBC; border-radius: 100px; text-decoration: none; color: inherit; font-size: 14px; background: #fff; width: calc(100% / 3); height: 45px; }
.article_share-btn img { position: absolute; left: 15px; top: 50%; transform: translate(0,-50%); }
.article_share-btn:hover { opacity: 0.8; transition: opacity 0.2s ease; }

/* 関連記事 */
.blog-article_related { }


.article_detail .sns-container {display: flex; align-items: center;justify-content: center; padding: 50px 0 20px;}
	.article_detail .youtube{width: 100%;height: 500px; padding: 50px 0 20px; }
	.article_detail .youtube iframe{width: 100%;height: 100%;}
	.article_detail .article_cta{ padding: 50px 0 0px; }

.article_detail .article_text span{font-weight: bold;font-family: 'Noto-Sans-JP-Regul';}

@media only screen and (max-width: 768px) {

/* ----------------------------------------------------------------------- fv */
	.fv_title { padding: 0 0 10px; font-size: 26px; }
	.fv_text { font-size: 13px; }
	
	.title_box { position: initial; transform: none; width: 90%; margin: 20px auto 0; }
	.fv_img { width: 85%; width: 95%; }
	.fv_img img { height: 200px; object-fit: cover; }


/* ----------------------------------------------------------------------- blog */
	#blog-wrap { width: 90%; flex-direction: column; padding: 40px 0 60px; box-sizing: border-box; }
	#blog { width: 100%; padding: 0 0 60px; }
	
	.blog-hero { margin-bottom: 30px; }
	.blog-hero .article_title { font-size: 16px; }
	
	.blog-grid { gap: 30px; }
	.blog-grid article { width: 100%; }
	
	.article_title { font-size: 14px; }
	.article_date { font-size: 11px; }
	.article_tag { font-size: 11px; padding: 4px 10px; }
	.article_author { font-size: 10px; }
	
	.pager { padding: 40px 0 0; }
	.pager a { width: 36px; height: 36px; font-size: 14px; }

/* ----------------------------------------------------------------------- aside */
	#aside { width: 100%; padding: 50px 0 0; }
	
	/* PICK UP */
	.aside-block:not(:last-of-type){ padding: 0 0 60px; }
	.pickup-list_link{ gap: 15px; padding: 15px 0 20px; }
	.pickup-list_picture{ width: 35%; }
	
	.pickup-list_title { font-size: 13px; }
	.pickup-list_tag { font-size: 11px; padding: 4px 10px; }
	.pickup-list_date { font-size: 11px; }
	
	/* CATEGORY */
	.category-list_title { font-size: 14px; }
	.category-list_num { font-size: 13px; width: 54px; }
	
	/* TAG */
	.tag-list{ gap: 5px; }
	.tag-list a { font-size: 13px; }


/* ----------------------------------------------------------------------- detail */
	.article_header { padding: 0 0 15px; }
	.article_topic { padding: 13px 0 20px; font-size: 15px; }
	.article_thumbnail { margin: 0 0 30px; }
	.article_heading { font-size: 16px; padding: 0 0 13px 30px; margin: 0 0 16px; }
	.article_heading::before { width: 20px; height: 20px; top: -2px; }
	.article_text { padding: 0 0 18px; font-size: 14px; }
	.article_img { padding: 25px 0 40px; }
	
	/* Body */
	.article_detail { padding: 0 0 30px; }
	
	/* おすすめ記事 */
	.article_recommend-title { font-size: 17px; padding: 0 0 12px; }
	.article_recommend-list { padding: 18px 0 0; }
	.article_recommend-list li { padding: 0 0 10px 16px; font-size: 14px; line-height: 1.5; }
	.article_recommend { margin: 0 0 25px; }
	
	/* CTA */
	.article_cta-btn { font-size: 14px; }
	.article_cta { margin: 0 0 40px; }
	
	/* SNSシェア */
	.article_share { margin: 0 0 70px; padding: 25px 5% 27px; flex-direction: column; }
	.article_share-btn { width: 100%; height: 50px; }
	.article_share-btn img { left: 10%; }



}