@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.member-kind-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 12px;
	background: #f6f9f7;
	border: 1px solid #e2efe7;
	margin: 0 0 16px
}


.member-kind-card .mk-left {
	flex: 0 0 auto
}

.member-kind-card .mk-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	background: #e5f7ea;
	color: #117a2a
}

.member-kind-card.is-paid .mk-badge {
	background: #ffe9e5;
	color: #a0311b
}

.member-kind-card.is-free .mk-badge {
	background: #e5f7ea;
	color: #117a2a;
	font-size: 16px;
}

.member-kind-card.is-none .mk-badge {
	background: #f1f1f1;
	color: #666
}



.member-kind-card .mk-text {
	margin: 0;
	color: #555
}

/* Join button */
.form-actions--center {
	display: flex;
	justify-content: center
}

.btn-join {
	
    margin: 20px;
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	background: #57d18c;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.1;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(87, 209, 140, .35);
	transition: transform .05s ease, box-shadow .2s ease
}

.btn-join:hover {
	box-shadow: 0 6px 16px rgba(87, 209, 140, .45)
}

.btn-join:active {
	transform: translateY(1px)
}

.btn-join:disabled {
	opacity: .5;
	cursor: not-allowed
}

/*
Theme Name: KMC Custom (Cocoon Child)
Description: Cocoon を親テーマにしたカスタム子テーマ。ヘッダー/フッター/Front/Categoryを自作。
Author: KMC
Template: cocoon
Version: 1.0.0
*/

/* 最低限のレイアウト */
.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0px
}

/* Front page background */
body.page-template-front-page,
body.home {
	background-image: url('https://ailife.kmccorp.jp/wp-content/uploads/2025/08/22679784.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed
}

/* Hero */
.hero {
	color: #fff;
	background-size: cover;
	background-position: center;
	position: relative
}

.hero__inner {
	padding: 80px 0
}

.hero__title {
	font-size: 40px;
	margin: 0 0 8px
}

.hero__desc {
	opacity: .9;
	margin: 0 0 16px
}

.hero__cta {
	display: inline-block;
	background: #111;
	color: #fff;
	padding: 10px 16px;
	border-radius: 4px;
	text-decoration: none
}

/* Video Hero */
.hero--video {
	position: relative
}

.hero--video .hero__media {
	position: relative;
	overflow: hidden
}

.hero--video .hero__video {
	display: block;
	width: 100%;
	height: 60vh;
	object-fit: cover
}

.hero--video .hero__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 2
}

.hero--video .hero__logo {
	display: block;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6))
}

/* Section titles */
.section-title {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 32px;
	text-align: center;
	color: #333
}

/* Branding (logo + title) */
.site-branding {
	display: flex;
	align-items: center;
	gap: 12px
}

.custom-logo {
	border-radius: 8px
}

.site-branding .brand-text {
	font-weight: 700;
	color: #fff;
	font-size: 18px
}

/* タイトルリンクのスタイル */
.brand-text-link {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease
}

.brand-text-link:hover {
	opacity: 0.8
}

.features--slider {
	position: relative
}

.features--slider .section-title {
	color: #fff
}

.features__viewport {
	position: relative;
	overflow: hidden;
	padding: 0 10vw
}

.features__track {
	display: flex;
	gap: 16px;
	transition: transform .35s ease;
	will-change: transform
}

.feature-card {
	position: relative;
	flex: 0 0 calc((100% - 16px*3)/4);
	min-height: 360px;
	background-size: cover;
	background-position: center;
	border-radius: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18)
}

.feature-card--large {
	min-height: 480px;
	transform: scale(1.04)
}

.features__viewport::before,
.features__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10vw;
	pointer-events: none
}

.features__viewport::before {
	left: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
}

.features__viewport::after {
	right: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
}

.feature-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .75) 100%)
}

.feature-card__link {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
	text-decoration: none;
	padding: 16px
}

.feature-card__cat {
	display: inline-block;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .36);
	border-radius: 14px;
	padding: 4px 8px;
	font-size: 12px;
	margin: 0 0 8px
}

.feature-card__title {
	margin: 0;
	color: #fff;
	font-size: 18px;
	line-height: 1.5;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8)
}

.features__arrow {
	position: absolute;
	right: 16px;
	bottom: 12px;
	transform: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .6);
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	z-index: 3
}

.features__arrow--prev {
	right: 64px
}

.features__arrow--next {
	right: 16px
}

/* Grid */
.features__grid,
.posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px
}

.feature,
.post-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease
}

.feature:hover,
.post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15)
}

.feature a {
	text-decoration: none;
	color: inherit;
	display: block
}

.feature__content {
	padding: 16px
}

.feature__title {
	font-size: 18px;
	margin: 0 0 8px;
	color: #333
}

.feature__excerpt {
	font-size: 14px;
	color: #666;
	margin: 0;
	line-height: 1.5
}

.post-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

.no-thumb {
	background: #f3f3f3;
	height: 160px
}

.post-card__meta {
	display: flex;
	gap: 8px;
	font-size: 13px;
	color: #ffffff;
	padding: 0px 6px;
	background: white;
	width: fit-content;
	color: black;
	font-weight: bold;
}

.post-card__title {
	font-size: 18px;
	margin: 0;
	padding: 0 12px 8px
}

.post-card__title a {
	text-decoration: none;
	color: #333
}

.post-card__excerpt {
	font-size: 14px;
	color: #444;
	padding: 0 12px 16px;
	margin: 0
}

/* Features full width grid */
.features--full {
	margin: 0;
}

.features--full .section-title {
	color: #fff
}

.features__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
	padding: 0 16px
}

.feature-card {
	position: relative;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	border-radius: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18)
}

.feature-card--large {
	grid-column: span 6;
	min-height: 520px
}

.features__grid .feature-card {
	grid-column: span 3
}


.feature-card__link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 16px;
	color: #fff;
	text-decoration: none
}

.feature-card__cat {
	display: inline-block;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .36);
	border-radius: 14px;
	padding: 4px 8px;
	font-size: 12px;
	margin: 0 0 8px
}

.feature-card__title {
	margin: 0;
	color: #fff;
	font-size: 18px;
	line-height: 1.5;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8)
}

.features__scroll::-webkit-scrollbar {
	height: 8px
}

.features__scroll::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px
}

/* Category nav (親カテゴリ) - overlap under hero */
.category-nav {
	position: relative;
	margin-top: -41px;
	z-index: 5
}

.cat-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center
}

.cat-pill a {
	display: inline-block;
	background: #11111100;
	color: #fff;
	border: 0;
	padding: 8px 14px;
	border-radius: 0;
	text-decoration: none;
	font-size: 14px
}

.cat-pill a:hover {
	background: #ffffff42;
}

.cat-pill li {
	width: 200px;
	text-align: center;
}

/* Categories */
.categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px
}

.category-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease
}

.category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15)
}

.category-card__title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
	color: #333
}

.category-card__count {
	font-size: 14px;
	color: #666;
	margin: 0
}

/* Latest posts: row layout + sidebar */
.latest-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 28px;
	align-items: start
}

.post-row {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 20px;
	background: black;
	border: 0px;
	border-radius: 0;
	overflow: visible;
	margin-bottom: 44px;
	padding: 0 0 44px;
	border-bottom: 1px solid;
}

.post-row__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;

}

.post-row__thumb {
	height: 200px
}

.post-row__body {
	padding: 0px 16px
}

.post-row__title {
	margin: 4px 0 8px;
	font-size: 20px
}

.post-row__title a {
	text-decoration: none;
	color: white
}

.post-row__excerpt {
	margin: 0;
	color: white;
	line-height: 1.78571;
	width: 100%;
	font-size: .875rem;
}

.latest-sidebar {
	position: static;
	top: auto
}

.sidebar-title {
	margin: 0 0 12px;
	font-weight: 700;
	font-size: 16px
}

.popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px
}

.popular-item {
	background: black;
	border: 0px;
	border-radius: 0;
	overflow: visible
}

.popular-link {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	padding: 0px
}

.popular-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0
}

.popular-body {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.popular-meta {
	display: block;
	font-size: 12px;
	color: #fff;
	opacity: .9;
	margin: 0
}

.popular-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 1.5
}

/* Horizontal scroll for latest posts */
.posts--hscroll {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 8px
}

.posts--hscroll .post-card {
	min-width: 280px;
	flex: 0 0 auto;
	scroll-snap-align: start
}

.posts--hscroll::-webkit-scrollbar {
	height: 8px
}

.posts--hscroll::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px
}

/* Header/Footer */
.site-header {
	background: transparent;
	border-bottom: 0px;
}

.site-footer {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .2);
	border-bottom: none;
	padding: 24px 0
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px
}

.menu a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

/* Header layout: logo left, menu right */
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px
}

.custom-logo-link img {
	display: block;
	height: 36px;
	width: auto
}

.site-title {
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	color: #fff
}

.global-nav .menu {
	align-items: center
}

/* Override: keep header normal on front page */
.page-template-front-page .site-header {
	position: static
}

.page-template-front-page .menu a {
	color: #fff
}

/* Footer layout */
.site-footer .footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: 40px;
	padding: 40px 0
}

.footer-brand .footer-logo {
	margin: 0px
}

.footer-address {
	font-style: normal;
	color: #fff;
	line-height: 1.8
}

.footer-cta {
	display: grid;
	gap: 12px;
	margin-top: 16px
}

.btn-rect {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 6px;
	text-decoration: none;
	color: #fff;
	background: rgba(0, 0, 0, .2)
}

.footer-columns {
	margin-bottom: 20px;
}

.footer-col__title {
	font-weight: 700;
	margin: 0;
	font-size: 18px;
	color: #fff
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links a {
	text-decoration: none;
	color: #fff
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .2);
	padding: 12px 0
}

.footer-policy {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px
}

.footer-policy a {
	text-decoration: none;
	color: #fff;
	font-size: 12px
}

.copyright {
	color: #fff;
	font-size: 12px;
	margin: 8px 0 0
}

.back-to-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(255, 255, 255, .3);
	text-decoration: none;
	color: #fff
}

.back-to-top__icon {
	font-size: 18px;
	line-height: 1
}

/* Feature Slider (new structure) */
.feature-slider {
	position: relative;
	max-width: 100%;
	margin: 50px auto
}

.feature-slider .viewport {
	overflow: hidden
}

.feature-slider .track {
	display: flex;
	gap: 0;
	transition: transform .45s ease;
	will-change: transform
}

.feature-slider .slide {
	flex: 0 0 calc(100% / 5);
	position: relative;
	padding: 0 13px
}

.feature-slider .slide img {
	display: block;
	width: 100%;
	height: 54vh;
	object-fit: cover;
}

.feature-slider .slide__link {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none
}

.feature-slider .slide__overlay {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	padding: 12px;
	background: 0px;
	color: #fff;
	border-radius: 6px
}

.feature-slider .slide__cat {
	display: inline-block;
	background: white;
	border: 0px;
	border-radius: 0;
	padding: 4px 8px;
	font-size: 12px;
	margin: 0 0 8px;
	color: black;
	font-weight: bold;
}

.feature-slider .slide__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	background: #000000;
	width: fit-content;
	padding: 0 9px;
}

/* arrows */
.feature-slider .prev,
.feature-slider .next {
	position: absolute;
	right: 16px;
	bottom: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .6);
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-slider .prev {
	right: 64px
}

.feature-slider .prev.disable,
.feature-slider .next.disable {
	pointer-events: none;
	opacity: .5
}

/* numeric dots */
.feature-slider .dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 12px
}

.feature-slider .dots .dot {
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 14px;
	border: 1px solid #bbb;
	background: #f5f5f5;
	color: #333;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center
}

.feature-slider .dots .dot.current-slide {
	background: #333;
	color: #fff;
	border-color: #333
}

.feature-slider .dots .dot.disable {
	pointer-events: none;
	opacity: .6
}

/* current-left (左端の1枚を大きく) */
.feature-slider .slide--current-left img {
	transform: scale(1.06);
	transition: transform .3s ease
}

/* Slider UI bar */
.feature-slider .slider-ui {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	background: #00000000;
	color: #fff;
	height: 44px;
	margin: 0px 0px 0px 100px;
	max-width: 420px
}

.feature-slider .slider-ui .prev,
.feature-slider .slider-ui .next {
	position: static;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 0px;
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

.feature-slider .slider-ui .prev.disable,
.feature-slider .slider-ui .next.disable {
	opacity: .4;
	pointer-events: none
}

.feature-slider .slider-ui .counter {
	font-weight: 700;
	letter-spacing: .04em
}

/* 左から2番目だけ拡大用 */
.feature-slider .slide.is-big {
	z-index: 2
}

.feature-slider .slide.is-big img {
	transform: scale(1.2);
	transition: transform .3s ease;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
	height: 430px;
}

.is-big {
	margin: 0 30px;
}

.viewport {
	height: 473px;
}

/* Tags section */
.tags-section {
	background: black;
	color: #fff;
	border-radius: 8px;
	margin: 0 0 0 600px;
}

.tags-section .container {
	position: relative;
	top: -82px;
}

.tags-head {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	margin: 100px 0 14px 0;
}

.tags-aside {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 800;
	letter-spacing: .08em;
	font-size: 18px;
	opacity: .9
}

.tags-title {
	font-size: 44px;
	font-weight: 800;
	color: #fff;
	margin: 0
}

.tags-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px
}

.tag-pill {
	display: inline-block;
	padding: 3px 13px;
	border: 1px solid #fff;
	border-radius: 28px;
	background: transparent;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
}

.tag-pill:hover {
	background: #fff;
	color: #000
}

/* New Articles side label */
.latest-posts .new-articles-head {
	position: relative;
	height: 100%;
	display: flex;
	align-items: flex-start
}

.latest-posts .new-articles-aside {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 800;
	letter-spacing: .08em;
	font-size: 18px;
	color: #fff;
	margin-top: 8px
}

.latest-posts .latest-layout {
	margin-left: 0px
}

.new {
	display: flex;
}

/* after line under vertical labels */
.latest-posts .new-articles-aside::before {
	content: "";
	background-color: white;
	content: "";
	display: inline-grid;
	width: 1px;
	height: 50px;
	margin: 15px 0px;

}

.popular-articles-aside::before {
	content: "";
	background-color: white;
	content: "";
	display: inline-grid;
	width: 1px;
	height: 50px;
	margin: 15px 0px;
}

/* Events: flex row with label */
.events-row {
	display: flex;
	align-items: flex-start;
	gap: 100px
}

.events-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 800;
	letter-spacing: .08em;
	font-size: 14px;
	color: #fff;
	position: relative;
	padding-top: 8px
}

.events-label::before {
	content: "";
	display: block;
	width: 1px;
	height: 50px;
	background: #fff;
	margin: 15px 0
}

.events-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 50px
}

.event-link {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 70px;
	text-decoration: none;
	color: inherit;
	align-items: center
}

.event-item {
	padding: 0px 0 50px 0;
	border-bottom: 1px solid;
}

.event-thumb {
	aspect-ratio: 3 / 4;
}


.event-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.event-title {
	margin: 0 0 12px;
	font-size: 40px;
	font-weight: 800;
	color: #fff
}

.event-meta {
	margin: 0;
	font-size: 18px;
	color: #fff;
	opacity: .9
}








/* Popular Articles side label */
.latest-sidebar {
	position: relative
}

.popular-articles-aside {
	position: absolute;
	left: -32px;
	top: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 800;
	letter-spacing: .08em;
	font-size: 18px;
	color: #fff
}

/* Events vertical label using new-articles-* (match latest section) */
.events-section .new-articles-head {
	position: relative;
	height: 100%;
	display: flex;
	align-items: flex-start
}

.events-section .new-articles-aside {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 800;
	letter-spacing: .08em;
	font-size: 18px;
	color: #fff;
	margin-top: 8px
}

.events-section .new-articles-aside::before {
	content: "";
	background-color: white;
	display: inline-grid;
	width: 1px;
	height: 50px;
	margin: 15px 0px
}

/* Grow events list next to the label */
.events-section .events-list {
	flex: 1
}

.latest-main {
	margin: 0 50px 0 0;
}

/* Sidebar INFO (STORE) */
.sidebar-info {
	position: relative;
	margin-top: 70px;
	padding-left: 0;
}

.sidebar-info .info-aside {
	position: absolute;
	left: -32px;
	top: 0;
	height: 139px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 800;
	letter-spacing: .08em;
	font-size: 18px;
	color: #fff
}

.sidebar-info .info-aside::before {
	content: "";
	background-color: #fff;
	display: inline-grid;
	width: 1px;
	height: 50px;
	margin: 15px 0
}

.info-card {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
	background: transparent;
	padding: 0
}

.info-thumb {
	width: 100%;
	height: 300px;
}

.info-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.info-caption {
	position: relative;
	left: 0;
	bottom: 0;
	margin: 0;
	background: #000;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	width: fit-content
}


.info-body {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.info-title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	color: #fff;
	opacity: .9
}

.info-text {
	font-size: 13px;
	line-height: 1.5;
	color: #fff
}

/* Background color adjustments (override) */
html:not(.wp-admin) body.page-template-front-page,
html:not(.wp-admin) body.home,
html:not(.wp-admin) body {
	background: #272626 !important;
	background-image: none !important
}

.site-header {
	background: #272626
}

.site-footer {
	background: #272626
}

.tags-section {
	background: #272626
}

.post-row {
	background: #272626
}

.popular-item {
	background: #272626
}

.feature-slider .slide__title {
	background: #272626
}

.info-caption {
	background: #272626
}

.event-date {
	background: #272626
}

/* Single (post) */
.single .single-bg {
	background: #F3F3F3
}

.single .single-head {
	padding: 14px 0 8px;
}

.single .single-meta {
	display: flex;
	gap: 12px;
	align-items: center;
	color: #333030;
	opacity: .9
}

.single .single-date {
	font-size: 14px
}

.single .single-cat {
	font-size: 12px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 14px;
	padding: 3px 8px
}

.single .single-title {
	margin: 8px 0 0;
	color: #333030;
	font-size: 38px;
	font-weight: 800
}

.single .single-hero img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover
}

.single .single-layout {
	display: grid;
	grid-template-columns: 64px minmax(0, 1.25fr) 320px;
	gap: 32px;
	align-items: start
}

.single .single-main {
	background: #fff;
	padding: 24px;
}

.single .toc {
	border: 1px #c5c5c5 solid;
	background: #ffffff;
	margin: 0 0 20px;
	padding: 0;
	width: 100%;
}

.single .toc__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
	color: #333030;
	background: #f0f0f0;
	padding: 8px 12px;
	border-radius: 4px
}

.single .toc__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 2px
}

.single .toc__item {
	margin: 10px 0
}

.single .toc__link {
	text-decoration: none;
	color: #333030;
	display: inline-flex;
	gap: 10px;
	align-items: baseline
}

.single .toc__item.is-h2 .toc__link::before {
	content: attr(data-n);
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e83e8c;
	color: #fff;
	font-weight: 800;
	font-size: 12px
}

.single .toc__item.is-h3 .toc__link {
	color: #666;
	padding-left: 34px;
	position: relative;
	display: block;
	border-bottom: 1px solid #ddd;
	padding-bottom: 6px
}

.single .toc__item.is-h3:last-child .toc__link {
	border-bottom: none
}

.single .toc__item.is-h3 .toc__link::before {
	content: attr(data-n);
	position: absolute;
	left: 0;
	top: 2px;
	color: #e83e8c;
	font-weight: 700
}

.single .single-hero.in-main {
	aspect-ratio: 4 / 3;
	width: 100%;
	overflow: hidden;
	background: #eee;
	border-radius: 6px;
	margin: 0 0 16px
}

.single .single-hero.in-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center
}

.single .share-bar {
	position: sticky;
	top: 96px;
	height: 1px
}

.single .share-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px
}

.single .share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 50%;
	background: #fff
}

.single .share-btn img {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain
}

.single .share-btn.copy {
	width: 44px
}

.single .single-main .entry-content {
	color: #333030;
	line-height: 1.9;
	font-size: 16px
}

/* Headings colors override */
.single .entry-content h2 {
	background: #272626;
	color: #fff;
	padding: 10px 12px;
}

.single .entry-content h3 {
	color: #272626;
	border-bottom: 1px solid #c1c1c1;
}

.single .post-nav {
	margin: 40px 0
}

.single .post-nav__grid {
	display: flex;
	justify-content: space-between;
	gap: 16px
}

.single .post-nav a {
	color: #333030;
	text-decoration: none
}



.breadcrumb {
	padding: 8px 0 12px
}

.breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.breadcrumb__item a {
	color: #333030;
	text-decoration: none;
	opacity: .9
}

.breadcrumb__item.is-current {
	color: #888;
	opacity: .8
}

.breadcrumb__list .breadcrumb__item+.breadcrumb__item::before {
	content: ">";
	margin: 0 8px;
	color: #888
}

/* Related posts */
.single .related-section {
	margin: 40px 0
}

.single .related-heading {
	font-size: 24px;
	font-weight: 800;
	color: #333030;
	margin: 0 0 16px
}

.single .related-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}

.single .related-card {
	background: #ffffff00;
	overflow: hidden
}

.single .related-link {
	display: block;
	color: inherit;
	text-decoration: none
}

.single .related-thumb {
	aspect-ratio: 4 / 3;
	width: 100%;
	display: block;
	overflow: hidden;
	background: #eee
}

.btn .btn-join {
	margin: 30px 0 0 0;
}



.single .related-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center
}

.single .related-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 8px 12px;
	color: #666;
	font-size: 12px
}

.single .related-title {
	display: block;
	padding: 0 12px 14px;
	font-weight: 700;
	color: #333030
}

/* Swipe hint arrow (mobile) */
.swipe-hint {
	display: none
}

@media (max-width: 960px) {
	.single .related-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

@media (max-width: 960px) {
	.single .single-layout {
		grid-template-columns: 1fr
	}

	.single .share-bar {
		display: none
	}
}

/* Author box */
.single .author-box {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 0;
	padding: 16px;
	margin: 0
}

.single .author-section {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	padding: 20px;
	margin: 32px 0
}

.single .author-heading {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 800;
	color: #333030
}

.single .author-box .author-avatar img {
	display: block;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #e1e1e1;
}

.single .author-box .author-name {
	font-weight: 800;
	color: #333030;
	margin: 0 0 4px
}

.single .author-box .author-bio {
	color: #333030;
	opacity: .9;
	margin: 0;
	font-size: 16px;
}

/* Single-only background overrides */
html:not(.wp-admin) body.single {
	background: #F3F3F3 !important;
	background-image: none !important
}

body.single .site-header {
	background: #272626 !important
}

body.single .site-footer {
	background: #272626 !important
}

body.single .menu a {
	color: #fff
}

body.single .site-title,
body.single .brand-text {
	color: #fff
}

body.single .hamburger__bar {
	background: #fff
}

body.single .footer-links a,
body.single .footer-policy a,
body.single .copyright {
	color: #fff
}

body.single .popular-articles-aside,
main.single .popular-articles-aside {
	color: #333030
}

body.single .popular-articles-aside::before,
main.single .popular-articles-aside::before {
	background: #333030
}

body.single .sidebar-info .info-aside,
main.single .sidebar-info .info-aside {
	color: #333030
}

body.single .sidebar-info .info-aside::before,
main.single .sidebar-info .info-aside::before {
	background: #333030
}

/* Single: sidebar card colors */
.single .latest-sidebar {
	background: transparent
}

.single .popular-item {
	background: #fff;
	border: 1px solid #eee;
}

.single .popular-title {
	color: #333030
}

.single .popular-meta {
	color: #666;
	opacity: .9
}

.single .popular-link {
	color: #333030
}

.single .sidebar-info .info-aside {
	color: #333030
}

.single .info-caption {
	background: transparent;
	color: #333030
}

/* Mobile header (hamburger) */
.hamburger {
	display: none
}

.nav-overlay {
	display: none
}

.toc-title {
	font-weight: bold;
	text-align: left;
	background: #F3F3F3;
	padding: 10px 20px;
}

.toc-checkbox:checked~.toc-content {
	padding: 10px 30px;
	width: 100%;
}

.toc li {
	font-weight: bold;
	font-size: 16px;
}

.open ol li a {
	font-weight: normal;
}

@keyframes hintBlink {

	0%,
	100% {
		opacity: .2;
		transform: rotate(45deg) translateX(0)
	}

	50% {
		opacity: 1;
		transform: rotate(45deg) translateX(4px)
	}
}

/* クリックできる画像のズーム（全デバイス対応） */
/* よく使われるサムネのコンテナにオーバーフロー抑制 */
.post-row__thumb,
.popular-thumb,
.post-card__thumb,
.event-thumb,
.feature-slider .slide {
	overflow: hidden
}

/* リンク内画像のズームトランジション */
a img {
	transition: transform .35s ease;
	transform-origin: center center
}

a:hover img {
	transform: scale(1.05)
}

/* スライダーの拡大中スライドはホバーでさらに少し拡大 */
.feature-slider .slide.is-big a:hover img {
	transform: scale(1.24)
}

/* Multi-line sweep underline (all devices) */
.menu a,
.post-row__title a,
.footer-links a,
.footer-policy a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-size: 0% 1px;
	background-repeat: no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: 2px;
	transition: background-size .25s ease
}

.menu a:hover,
.post-row__title a:hover,
.footer-links a:hover,
.footer-policy a:hover {
	background-size: 100% 1px
}

/* Disable previous ::after underline animation to avoid double lines */
.menu a::after,
.post-row__title a::after,
.footer-links a::after,
.footer-policy a::after {
	content: none !important
}

/* Archive (category/tag) */
.archive-header {
	padding: 24px 0 8px;
	margin: 0 0 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.archive-title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	color: #fff;
	text-align: center;
}

.archive-description {
	margin-top: 8px;
	color: #ddd;
	line-height: 1.7
}

.archive .posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px
}

/* ダーク背景に馴染むカード調整 */
.archive .post-card {
	background: #111;
	border: 1px solid #222
}

.archive .post-card__title a {
	color: #fff
}

.archive .post-card__excerpt {
	color: #ccc
}

.posts__grid--3cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}
.archive .post-card {
	border-radius: 0;
}

.mk-title {
	margin: 0 0 0;
    font-size: 17px;
	color: #333030;
	background: #00000000;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

@media (max-width: 1200px) {
	.feature-card {
		flex-basis: calc((100% - 16px*3)/4)
	}

	/* 投稿ページ用*/
	.archive .posts__grid {
		margin: 20px;
	}

}

@media (max-width: 1200px) {
	.single-bg {
		margin: 0 30px;
	}

	.single .single-layout {
		display: block;
	}

	.single .single-main {
		margin: 0 0 0 40px;
	}

	body.single .latest-sidebar,
	main.single .latest-sidebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 40px 0 40px 40px;
		gap: 40px;
	}


}

@media (max-width: 1024px) {

	.latest-sidebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 40px 0 40px 40px;
		gap: 40px;
	}

	.latest-layout {
		grid-template-columns: 1fr
	}

	.hero--video .hero__logo {
		max-width: 100%
	}

	.feature-slider .slide__overlay {
		padding: 0;
	}

	.feature-slider .slide__title {
		font-size: 14px;
	}

	.latest-sidebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 40px 0 40px 40px;
	}

	.sidebar-info {
		margin-top: 0;
	}

	.new-articles-head {
		position: absolute;
	}

	.latest-posts .new-articles-head {
		height: 0;
	}

	.info-card {
		width: 300px;
	}

	.latest-posts .new-articles-aside {
		height: 250px;
	}

	.latest-main {
		margin: 0;
	}

	.feature-card {
		flex-basis: calc((100% - 16px*2)/3)
	}

	.latest-layout {
		display: block;
	}
}



@media (max-width: 1024px) {
	.posts__grid--3cols {
		grid-template-columns: repeat(2, 1fr)
	}
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/* モバイル表示でのヘッダータイトル調整 */
@media (max-width: 768px) {
	.site-branding {
		gap: 8px
	}

	.site-branding .brand-text {
		font-size: 18px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 120px
	}

	.custom-logo-link img {
		height: 32px;
		width: auto
	}
}

@media (max-width: 768px) {

	.tags-title {
		font-size: 32px
	}

	/* Sidebar (popular + info) */
	.sidebar-info {
		margin-top: 36px
	}

	.sidebar-info .info-aside {
		left: -30px;
		font-size: 16px
	}

	.sidebar-info .info-thumb {
		height: 220px
	}

	/* Feature slider UI compact (slidesは5枚のまま) */
	.feature-slider .slider-ui {
		margin: 0
	}

	.feature-slider .slide {
		flex: 0 0 calc(100% / 4);
	}

	.feature-slider .slide img {
		height: 46vh
	}

	.feature-slider {
		height: 320px;
	}

	.is-big a span .slide__overlay {
		bottom: 97px;
	}

	.latest-posts {
		margin: 50px;
	}

	.post-row__thumb {
		width: 280px;
		height: 190px;
	}

	.post-row {
		grid-template-columns: 280px 227px 1fr;
	}

	.latest-layout {
		grid-template-columns: 580px 283px 1fr;
	}

	.events-section {
		margin: 30px 3px;
	}

	.footer-grid {
		margin: 0 50px;
	}


}

@media (max-width: 768px) {

	/* General spacing */
	.container {
		padding: 0 10px
	}

	/* Header adjustments for mobile */
	.site-header .container {
		padding: 8px 10px
	}

	.global-nav {
		display: none
	}

	.global-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.9);
		z-index: 1000
	}

	.global-nav.is-open .menu {
		flex-direction: column;
		padding: 16px
	}

	.global-nav.is-open .menu li {
		margin: 8px 0
	}

	.global-nav.is-open .menu a {
		color: #fff;
		font-size: 16px;
		padding: 8px 0;
		display: block
	}

	.hamburger {
		display: block
	}

	.nav-overlay.is-active {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999
	}

	/* Posts */
	.post-row__thumb {
		height: 180px
	}

	.post-row__body {
		padding: 8px 0px
	}

	.post-row__title {
		font-size: 18px
	}

	/* Events */
	.events-row {
		gap: 0;
	}

	.event-title {
		font-size: 24px
	}

	.event-meta {
		font-size: 13px
	}

	/* Tags */
	.tags-title {
		font-size: 28px
	}

	/* Sidebar labels */
	.popular-articles-aside {
		left: -32px;
		font-size: 18px;
	}

	.sidebar-info .info-aside {
		left: -32px;
		font-size: 18px
	}

	.sidebar-info .info-thumb {
		height: 200px
	}

	.info-caption {
		font-size: 14px
	}

	/* Feature slider image heightのみ縮小（V=5は維持） */
	.feature-slider .slide img {
		height: 330px;
		width: 253px;
	}

	/* Tags */
	.tags-section {
		margin: 0 0 0 30px !important;
	}

	.tags-section .container {
		top: 0;
		padding: 0;
	}

	.viewport {
		position: absolute;
	}

	.feature-slider .slide {
		flex: 0 0 calc(100% / 1);
	}

	.feature-slider .slider-ui {
		margin: 20px 0 0 0;
		position: absolute;
		top: 330px;
		left: 103px;
	}

	.feature-slider {
		width: 100%;
		margin: 50px 0;
	}

	.viewport {
		width: 100%;
	}

	.tags-aside {
		writing-mode: initial;
	}

	.tags-title {
		text-align: left;
	}

	.latest-posts {
		margin: 30px 3px;
	}

	.info-card {
		width: 280px;
	}
}

@media (max-width: 768px) {
	.latest-sidebar {
		display: block;
		margin: 0;
	}

	body.category .latest-sidebar {
		/* カテゴリ一覧だけ */
		margin: 40px 0 40px 40px;
	}

	body.tag .latest-sidebar {
		/* カテゴリ一覧だけ */
		margin: 40px 0 40px 40px;
	}

	body.single .latest-sidebar,
	main.single .latest-sidebar {
		display: block;
	}

	body.single .related-grid {
		display: block;
	}

	.single-bg {
		margin: 0;
	}

	body .single .single-main,
	main .single .single-main {
		margin: 0;
	}

	.sidebar-info {
		margin-top: 36px;
	}

	.site-header .container {
		position: relative;
		justify-content: flex-start;
		gap: 12px
	}

	.site-branding {
		flex: 1;
		min-width: 0;
		justify-content: flex-start
	}

	/* スマホ表示でもタイトルを表示 */
	.site-branding .brand-text {
		display: block;
		font-size: 18px;
		max-width: none;
		white-space: normal;
		overflow: visible;
		text-overflow: unset
	}

	/* 中央固定のタイトルリンク（ロゴ左・メニュー右に干渉しない） */
	.brand-text-link {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		padding: 0 56px;
		z-index: 1000
	}

	.global-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 78%;
		max-width: 360px;
		background: #272626;
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 1001;
		padding: 80px 24px
	}

	.global-nav.is-open {
		transform: translateX(0);
		height: 100vh;
		top: 0;
		left: auto;
	}

	.global-nav .menu {
		flex-direction: column;
		gap: 18px
	}

	.hamburger {
		display: inline-flex;
		flex-direction: column;
		gap: 6px;
		width: 40px;
		height: 40px;
		justify-content: center;
		align-items: center;
		background: transparent;
		border: 0;
		color: #fff;
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1002
	}

	.hamburger__bar {
		display: block;
		width: 22px;
		height: 2px;
		background: #fff
	}

	.nav-overlay {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 1000
	}

	.nav-overlay.is-active {
		display: block
	}

	html.is-locked,
	body.is-locked {
		overflow: hidden
	}

	.latest-layout {
		display: block;
	}

	.post-row {
		display: block;
		padding: 0 0 10px;
		margin-bottom: 13px;
	}

	.event-link {
		display: block;
	}

	.tags-head {
		display: block;
	}

	.latest-main {
		margin: 0;
	}

	.track {
		transform: translate3d(-674px, 0px, 0px);
	}

	.is-big {
		margin: 0 10px;
	}

	.feature-slider .slide.is-big img {
		height: 294px;
	}

	.author-heading {
		text-align: center;
	}

	.author-avatar {
		margin: 0 auto 20px auto;
	}

	.single .author-box {
		display: block;
		margin: 0 auto;
	}

	.author-section {
		text-align: center;
	}

	.single .author-box .author-avatar img {
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.swipe-hint {
		position: relative;
		height: 0
	}

	.swipe-hint::after {
		content: "";
		position: absolute;
		right: 12px;
		top: -28px;
		width: 18px;
		height: 18px;
		border-right: 2px solid #fff;
		border-top: 2px solid #fff;
		transform: rotate(45deg);
		animation: hintBlink 1s ease-in-out infinite;
		opacity: .9
	}

	.swipe-hint.is-hidden {
		display: none
	}
}

/* モバイル表示でのフッター調整 */
@media (max-width: 768px) {

	/* 新着記事（Latest）画像サイズ統一 */
	.post-row__thumb {
		height: 200px;
		width: 100%;
	}

	.post-row__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		aspect-ratio: 4 / 3;
	}

	/* EVENT画像を縦長で統一（比率 3:4） */
	.event-link {
		grid-template-columns: 1fr;
		/* 縦並びにしても崩れないよう保険 */
		gap: 16px;
	}

	.event-thumb {
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}

	.event-thumb img {
		width: 100%;
		aspect-ratio: 3 / 4;
		height: auto;
		object-fit: cover;
		object-position: center;
	}

	/* フッターのモバイル最適化 */
	.site-footer .footer-grid {
		display: block;
		padding: 24px 0;
	}

	.footer-brand {
		text-align: center;
		margin-bottom: 20px;
	}

	.footer-address {
		text-align: center;
	}


	.footer-col__title {
		text-align: center;
	}

	.footer-links {
		text-align: center;
	}
}

@media (min-width: 769px) {

	/* Footer: PC layout refinements */
	.site-footer .footer-grid {
		grid-template-columns: 1.2fr 1.2fr 1.2fr;
		gap: 48px;
		align-items: start;
		padding: 48px 0
	}

	.footer-brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start
	}

	.site-footer .custom-logo,
	.footer-brand .footer-logo img {
		display: block;
		height: 48px;
		width: auto
	}

	.footer-address {
		font-size: 18px;
		opacity: .9
	}

	/* 2カラムに最適化（現在の構造が2カラムのため） */
	.footer-columns {

		gap: 24px;
		text-align: left
	}

	.footer-links {
		gap: 10px
	}

	.footer-links a {
		opacity: .9
	}

	.footer-links a:hover {
		opacity: 1;
		text-decoration: underline
	}
}

@media (max-width: 600px) {
	.feature-card {
		flex-basis: calc((100% - 16px*1)/2)
	}

	.features__viewport {
		padding: 0 6vw
	}

	.hero--video .hero__logo {
		max-width: 300px;
	}
}

@media (max-width: 600px) {
	.posts__grid--3cols {
		grid-template-columns: 1fr
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}