@charset "utf-8";

/* ------------------------------------------------------------ blog-kv */
#blog-kv{ position: relative; padding: 30px 0 0; }
#blog-kv .fv__ja{ padding: 0 0 10px; }
.blog-kv__chach{ padding: 0 0 85px; text-align: center; }

.blog-kv__chach.avater:before{ width: 92px; height: 121px; bottom: 96px; left: calc(50% - 310px); left: calc(50% - 360px); background-image: url(../images/avater/cat-06.png); }
.blog-kv__chach.avater:after{ width: 92px; height: 121px; bottom: 96px; left: calc(50% + 230px); background-image: url(../images/avater/wolf-04.png); }

.blog-kv__slider:before{ z-index: -1; position: absolute; content: ""; top: -30px; left: 0; width: 87%; height: 425px; background-image: repeating-linear-gradient(122deg, #CCCCCC, #CCCCCC 1px, transparent 1px, transparent 5px); }
.blog-kv__item{ width: 780px; padding: 0 5px; }
.blog-kv__item a{ display: block; }
.blog-kv__media{ position: relative; width: 100%; }
.blog-kv__image{ width: 100%; height: auto; }
.blog-kv__badge{ position: absolute; right: 28px; bottom: -50px; width: 94px; height: auto; object-fit: contain; }
.blog-kv__body{ padding: 20px 0 0; }
.blog-kv__title{ margin: 0 0 18px; font-size: 24px; line-height: 1.5; font-family: 'Noto-Sans-JP-Bold'; }
.blog-kv__meta{ display: flex; align-items: center; gap: 15px; }

.tag{ display: inline-flex; align-items: center; justify-content: center; height: 29px; width: 110px; border-radius: 100px; font-size: 15px; line-height: 1; font-family: 'Noto-Sans-JP-Medium'; }
.tag--event{ background: var(--main-color); color: #fff; }
.blog-kv__date{ font-size: 15px; line-height: 1; font-family: 'Noto-Sans-JP-Medium'; color: #595959; }


#category{ padding: 60px 0 80px; }
.category-tabs{ display: flex; align-items: center; gap: 40px; height: 100px; padding: 30px 50px; border: 1px solid #D8D8D8; border-radius: 120px; position: relative; }
.category-tabs__label{ display: flex; align-items: center; gap: 10px; }
.category-tabs__en{ font-size: 36px; color: var(--main-color); font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; }
.category-tabs__ja{ font-family: 'Noto-Sans-JP-Bold'; }
.category-tabs__buttons{ display: flex; align-items: center; gap: 15px; }
.category-tabs__btn{ display: inline-flex; align-items: center; justify-content: center; width: 230px; height: 40px; border-radius: 100px; background: var(--main-color); color: #fff!important; font-size: 17px; }


/* ------------------------------------------------------------ column */
#column{ padding: 0 0 90px; }
.column-list{ display: flex; align-items: stretch; flex-wrap: wrap; gap: 47px 40px; }
.column-list .blog-kv__item{ width: calc(100% / 3 - 27px); padding: 0; }
.column-list .blog-kv__title{ margin: 0 0 16px; font-size: 20px; }
.column-list .tag{ height: 20px; width: 80px; padding: 0; font-size: 14px; accent-color: aliceblue; }
.column-list .blog-kv__date{ font-size: 14px; }

#onther-epi{ padding: 0 0 40px; }


/* ------------------------------------------------------------ details */
#blog{ padding: 60px 0 110px; }
.blog-inner{ width: 900px; margin: 0 auto; }

.blog__head{ padding: 0 0 53px; }
.blog__title{ padding: 0 0 16px; font-size: 34px; line-height: 1.5; font-family: 'Noto-Sans-JP-Bold'; border-bottom: 1px solid #E5E5E5; }
.blog__meta{ display: flex; align-items: center; justify-content: space-between; padding: 17px 0 0; }
.blog__meta-left{ display: flex; align-items: center; gap: 15px; width: 230px; }
.tag--event{ background: var(--main-color); color: #fff; }
.blog-kv__date{ font-size: 15px; color: #666; font-family: 'Noto-Sans-JP-Medium'; }
.blog-share{ display: flex; align-items: center; gap: 15px; width: 113px; }
.blog-share__btn{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: opacity .25s; }
.blog-share__btn:hover{ opacity: .7; }
.blog-share__btn img{ width: 22px; height: 22px; object-fit: contain; }
.blog__kv{ padding: 40px 0 0; }
.blog__kv img{ width: 100%; height: auto; display: block; }

.blog__h3{ position: relative; padding: 5px 0 5px 20px; margin: 60px 0 30px; font-size: 26px; font-family: 'Noto-Sans-JP-Bold'; line-height: 1.5; }
.blog__h3:before{ position: absolute; content: ""; left: 0; top: 0; width: 9px; height: 100%; background: var(--main-color); }
.blog__h3:first-of-type{ margin-top: 0; }

.blog__text{ margin: 20px 0; font-size: 18px; line-height: 2.2; }
.blog__list{ margin: 20px 0; padding: 0 0 10px; }
.blog__list li{ margin-bottom: 15px; font-size: 18px; line-height: 1.5; }
.blog__iframe{ width: 100%; margin: 60px 0 70px; }
.blog__btn{ margin: 20px 0; }
.blog__link{ display: flex; align-items: center; justify-content: center; width: 425px; height: 75px; margin: 0 auto; font-size: 25px; border-radius: 100px; color: #fff!important; background: var(--main-color); box-shadow: 0px 7px 0px 0px #A5000A; }



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
/* ------------------------------------------------------------ blog-kv */
	#blog-kv{ padding: 20px 0 0; }
	.blog-kv__chach{ overflow: hidden; padding: 0 0 40px; }
	
	.blog-kv__chach.avater::before { width: 75px; height: 99px; bottom: 48px; left: -20px; }
	.blog-kv__chach.avater::after { bottom: 51px; width: 75px; height: 99px; left: initial; right: -12px; }
	
	.blog-kv__slider:before{ width: 85%; height: 140px; top: -15px; }
	.blog-kv__item{ width: 300px !important; }
	.blog-kv__badge{ bottom: -20px; right: 0; width: 70px; }
	.blog-kv__body{ padding: 25px 0 0; }
	.blog-kv__title{ font-size: 17px; margin: 0 0 10px; }
	.blog-kv__meta{ gap: 10px; }
	.blog-kv__date{ font-size: 12px; }
	.tag{ width: 100px; height: 25px; font-size: 12px; }
	
	#category{ padding: 30px 0 50px; }
	.category-tabs{ flex-direction: column; justify-content: center; align-items: center; gap: 15px; height: auto; padding: 25px 5%; border-radius: 10px; }
	.category-tabs__label{ width: 100%; gap: 8px; }
	.category-tabs__en{ width: 50%; text-align: right; font-size: 22px; }
	.category-tabs__ja{ font-size: 14px; }
	.category-tabs__buttons{ width: 100%; gap: 10px; }
	.category-tabs__btn{ width: 100%; height: 35px; font-size: 13px; }


/* ------------------------------------------------------------ column */
	 #column{ padding: 0 0 50px; }
	
	.column-list{ flex-direction: column; gap: 30px; }
	.column-list .blog-kv__body{ padding: 15px 0 0; }
	.column-list .blog-kv__item{ width: 100%!important; }
	.column-list .blog-kv__title{ margin: 0 0 10px; font-size: 17px; }
	.column-list .tag{ width: 100px; height: 24px; padding: 0 14px; font-size: 12px; }
	.column-list .blog-kv__date{ font-size: 12px; }
	
	#onther-epi .title{ padding: 0 0 30px; }


/* ------------------------------------------------------------ details */
	#blog{ padding: 20px 0 50px; }
	.blog-inner{ width: 90%; }

	.blog__head{ padding: 0 0 28px; }
	.blog__title{ padding: 0 0 15px; font-size: 22px; text-align: center; }
	.blog__meta{ gap: 14px; padding: 12px 0 0; }
	.blog__meta-left{ gap: 7px; }
	
	.blog__kv{ padding: 18px 0 0; }
	.blog-kv__date{ font-size: 12px; }
	
	.blog-share{ justify-content: flex-end; gap: 0; }
	.blog-share__btn{ width: 30px; height: 30px; }
	.blog-share__btn img{ width: 20px; height: 20px; }
	
	.blog__h3{ margin: 38px 0 18px; padding: 4px 0 4px 14px; font-size: 18px; line-height: 1.5; }
	.blog__h3:before{ width: 6px; }
	.blog__text{ margin: 10px 0; font-size: 14px; }
	
	.blog__list{ margin: 10px 0; }
	.blog__list li{ margin-bottom: 10px; font-size: 14px; }
	.blog__iframe{ margin: 30px 0 40px; }
	.blog__link{ width: 100%; height: 55px; font-size: 16px; }

		
	
}