@charset "UTF-8";


/* column-section */
@media all {
	#home .column-section,
	#lifestyle .column-section {background-color: var(--gray);}
	.column-section-header-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}
	.column-section-lead {
		font-weight: 500;
		text-align: center;
	}
	.column-content {
		position: relative;
	}
	.column-ttl {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: bold;
	}
	.column-excerpt {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		padding-right: 1px;
	}
	.column-item a::after {
		content: '';
		display: block;
		background: center / contain no-repeat url(../img/common/circle-arrow.png);
	}
	.column-thumb {
		aspect-ratio: 31 / 21;
		overflow: hidden;
	}
	.column-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.column-viewmore {text-align: center;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.column-section {
			padding-bottom: 70rem;
		}
		.column-section-header-image {
			height: 200rem;
		}
		.column-section-ttl {
			margin-top: 50rem;
		}
		.column-section-lead,
		.column-content {
			margin-top: 30rem;
			padding: 0 20rem;
		}
		.column-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.column-item {
			width: 47%;
		}
		.column-item:nth-child(n+3) {margin-top: 30rem;}
		.column-thumb {border-radius: 8rem;}
		#column .column-excerpt {display: none;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.column-section {
			padding-bottom: 50rem;
		}
		#home .column-section::before {
			content: 'Japanese Lifestyle';
			position: absolute;
			left: calc(50% - 677rem);
			bottom: 110rem;
			writing-mode: vertical-rl;
			font-size: 80rem;
			font-weight: bold;
			color: #fff;
		}
		.column-section-header-image {
			height: 324rem;
		}

		.column-content {
			margin: 0 auto;
			padding: 0 20rem;
			max-width: 1040rem;
		}

		.column-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.column-list::after {
			content: '';
			display: block;
			width: 31%;
		}
		.column-item {
			width: 31%;
		}

		.column-item a::after {
			position: absolute;
			bottom: 9rem;
			right: 0;
			width: 36rem;
			height: 36rem;
		}
		.column-thumb {border-radius: 10rem;}
		.column-thumb img {transition: all .3s;}
		a:hover .column-thumb img {scale: 1.05;}
		.column-ttl {
			margin-top: .75em;
			padding-right: 42rem;
			min-height: 52rem;
			line-height: 1.75;
		}
		a:hover .column-ttl {opacity: .8;}
	}
}

/* column-section home&lifestyle = :not(#column) */
@media all {
	.column-item a {
		position: relative;
		display: block;
	}
	/* sp */
	@media only screen and (max-width: 767px) {
		body:not(#column) .column-item:nth-child(n+2) {
			margin-top: 30rem;
		}
		body:not(#column) .column-item:first-child {
			width: 100%;
		}
		body:not(#column) .column-item:first-child .column-thumb {
			position: relative;
			width: 100%;
			aspect-ratio: 3 / 2;
		}
		body:not(#column) .column-item:first-child .column-thumb::before {
			content: 'Latest Post';
			position: absolute;
			z-index: 1;
			top: 0;
			right: 0;
			display: block;
			padding-bottom: 1em;
			width: 28rem;
			height: 100%;
			background-color: var(--red);
			border-radius: 0 10rem 10rem 0;
			font-family: 'Montserrat', sans-serif;
			font-size: 14rem;
			color: #fff;
			writing-mode: vertical-rl;
			text-align: center;
		}
		body:not(#column) .column-item:first-child img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		body:not(#column) .column-item:first-child .column-ttl {
			margin: 10rem 0 0;
			padding: 0;
			font-size: 16rem;
		}
		body:not(#column) .column-item:first-child .column-excerpt {
			margin-top: 6rem;
			font-size: 13rem;
			-webkit-line-clamp: 2;
		}
		body:not(#column) .column-item:nth-child(n+2) .column-excerpt {display: none;}
		body#column .column-item .column-excerpt {display: none;}
		.column-viewmore {margin-top: 60rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		body:not(#column) .column-section-ttl {
			margin-top: 80rem;
		}
		.column-section-lead {
			margin-top: 60rem;
			font-size: 14rem;
		}
		body:not(#column) .column-item:nth-child(n+2) {
			margin-top: 60rem;
		}
		body:not(#column) .column-item:first-child {
			position: relative;
			margin-top: 255rem;
			width: 100%;
			height: 265rem;
			padding-right: 23rem;
			text-align: right;
		}
		body:not(#column) .column-item:first-child::before {
			content: 'Latest Post';
			position: absolute;
			z-index: 1;
			top: 0;
			right: 0;
			display: block;
			padding-bottom: 1em;
			width: 24rem;
			height: 266rem;
			background-color: var(--red);
			border-radius: 0 10rem 10rem 0;
			font-family: 'Montserrat', sans-serif;
			font-size: 14rem;
			color: #fff;
			writing-mode: vertical-rl;
			text-align: center;
		}
		body:not(#column) .column-item:first-child a {
			position: static;
			display: inline-block;
			width: 470rem;
			height: 100%;
			padding: 35rem 70rem 0 40rem;
		}
		body:not(#column) .column-item:first-child a::before {
			content: '';
			position: absolute;
			bottom: 0;
			right: 23rem;
			display: block;
			width: 447rem;
			height: 100%;
			background-color: #fff;
			border-radius: 10rem 0 0 10rem;
			z-index: 2;
		}
		body:not(#column) .column-item:first-child a::after {
			position: absolute;
			z-index: 2;
			bottom: 20rem;
			right: 70rem;
		}
		body:not(#column) .column-item:first-child a > * {
			position: relative;
			z-index: 2;
		}
		body:not(#column) .column-item:first-child .column-thumb {
			position: absolute;
			bottom: 60rem;
			left: 0;
			display: block;
			width: 700rem;
			height: 400rem;
			border-radius: 10rem;
			z-index: 1;
		}
		body:not(#column) .column-item:first-child img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		body:not(#column) .column-item:first-child .column-ttl,
		body:not(#column) .column-item:first-child .column-excerpt {position: relative;}
		body:not(#column) .column-item:first-child .column-excerpt {
			margin-top: 1em;
			font-size: 14rem;
			line-height: 2.143;
		}
		body:not(#column) .column-item:first-child .column-ttl {
			margin: 0;
			padding: 0;
			font-size: 18rem;
		}
		body:not(#column) .column-item:nth-child(n+2) .column-excerpt {display: none;}
		body#column .column-item .column-excerpt {display: none;}
		.column-viewmore {margin-top: 60rem;}
	}
}


/* column-section column */
@media all {
	.column-content .noposts {
		text-align: center;
	}
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		body#column .column-section-lead {display: none;}
		body#column .column-item {margin-top: 60rem;}
		.column-content .noposts {
			margin-top: 40rem;
		}
	}
}



/* single-column.php */
@media all {
	.single .article-ttl {
		line-height: 1.64;
	}
	/* sp */
	@media only screen and (max-width: 767px) {
		.single article {
			margin-top: 30rem;
			padding: 0 20rem;
		}
		.single .article-thumb + .article-info {
			margin-top: 20rem;
		}
		.single .article-info {
			font-size: 12rem;
			color: var(--font-gray);
		}
		.single .article-ttl {
			margin-top: 16rem;
			font-size: 16rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.single article {
			margin: 60rem auto 0;
			width: 750rem;
		}
		.single .article-thumb + .article-info {
			margin-top: 30rem;
		}
		.single .article-info {
			font-size: 14rem;
			color: var(--font-gray);
		}
		.single .article-ttl {
			margin-top: 16rem;
			font-size: 22rem;
		}
		/* tab */
		@media screen and (max-width: 1024px) {
			.single article {
				padding: 0 50rem;
				width: 100%;
				max-width: 850rem;
			}
		}
	}
}