/*
Theme Name: Covers
Author: Covers Inc.
Description: Covers Inc. corporate landing page theme.
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: covers
*/

:root {
	--yellow: #fff941;
	--gray-text: #8a8a8a;
	--panel-black: #000000;
	--panel-brown: #3a3931;
	--card-gray: #d9d9d9;
	--font-en: 'Marcellus', serif;
	--font-mincho: 'Shippori Mincho', serif;
	--font-gothic: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-width: 1280px;
	background: #e3e3e3; /* 棒状グラフィックのグレー端と同色(先方指定) */
	color: #000;
	font-family: var(--font-gothic);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------- page wrapper / stair background */

/* NOTE: WP は固定ページの body に "page" クラスを付与するため、
   ラッパーは .page ではなく .site-wrap という名前にしている */
.site-wrap {
	position: relative;
	overflow: hidden;
}

.lp-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.lp-bg__band {
	position: absolute;
	left: 0;
	width: 100%;
	height: 114px;
	opacity: 0;
}

/* 1本ずつ順次ディゾルブ(ジンワリ)で出現 */
.lp-bg__band.is-on {
	opacity: 1;
	transition: opacity 1.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.lp-bg__band {
		opacity: 1;
	}
}

.site-header,
.lp,
.site-footer {
	position: relative;
	z-index: 1;
}

/* ---------------------------------- header */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.site-header__logo img {
	transition: filter 0.4s ease;
}

/* Inverted while the header overlaps a dark section */
.site-header.is-inverted .site-header__logo img {
	filter: brightness(0) invert(1);
}

.site-header.is-inverted .site-header__nav a {
	color: #fff;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1280px;
	margin: 0 auto;
	padding: 30px 48px 0;
}

.site-header__logo img {
	width: 200px;
	height: 51px;
	object-fit: contain;
}

.site-header__nav {
	display: flex;
	gap: 31px;
	padding-top: 0px;
	margin-top: -1px;
	font-family: var(--font-en);
	font-size: 16px;
	line-height: 1;
}

.site-header__nav a {
	transition: opacity 0.3s ease, color 0.4s ease;
}

.site-header__nav a:hover {
	opacity: 0.6;
}

/* ---------------------------------- hero */

.hero {
	position: relative;
	height: 798px;
}

.hero__title {
	position: absolute;
	top: 303px;
	left: 0;
	width: 100%;
	font-family: var(--font-en);
	font-size: 70px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}

/* FV text reveal: masked lines slide up in sequence */
.hero__line {
	display: block;
	overflow: hidden;
}

.hero__line-inner {
	display: block;
	transform: translateY(110%);
}

.hero.is-ready .hero__line-inner {
	animation: covers-slide-up 1.1s cubic-bezier(0.26, 0.27, 0.1, 1) both;
}

.hero__line:nth-child(2) .hero__line-inner {
	animation-delay: 0.18s;
}

@keyframes covers-slide-up {
	from {
		transform: translateY(110%);
	}
	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__line-inner {
		transform: none;
	}
	.hero.is-ready .hero__line-inner {
		animation: none;
	}
}

.hero__scroll {
	position: absolute;
	top: 616px;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	transition: opacity 0.8s ease 1s;
}

.hero.is-ready .hero__scroll {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll {
		opacity: 1;
	}
}

.hero__scroll-label {
	display: block;
	font-family: var(--font-en);
	font-size: 16px;
	line-height: 1;
}

.hero__scroll-line {
	display: block;
	position: relative;
	width: 1px;
	height: 150px;
	margin: 18px auto 0;
	background: #000;
}

.hero__scroll-line i {
	position: absolute;
	top: 0;
	left: -1px;
	width: 3px;
	height: 60px;
	background: #000;
	animation: covers-scroll-bar 2.4s ease-in-out infinite;
}

@keyframes covers-scroll-bar {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	70% {
		transform: translateY(90px);
		opacity: 1;
	}
	100% {
		transform: translateY(90px);
		opacity: 0;
	}
}

/* ---------------------------------- mission */

.mission {
	position: relative;
	height: 817px;
}

.mission__text {
	position: absolute;
	top: 145px;
	left: 50%;
	transform: translateX(-491px); /* 149px from 1280 design left edge */
	font-family: var(--font-mincho);
	font-size: 20px;
	font-weight: 500;
	line-height: 2.4;
	color: var(--gray-text);
	white-space: nowrap;
}

/* Characters flip from gray to black as the section scrolls (JS adds .mchar) */
.mission__text .mchar {
	transition: color 0.5s ease;
}

.mission__text .mchar.is-black {
	color: #000;
}

/* ---------------------------------- services */

.service {
	position: relative;
	border-radius: 50px 50px 0 0;
	background: var(--panel-black);
	color: #fff;
}

.service--01 {
	height: 845px;
}

.service--02 {
	height: 815px;
	margin-top: -49px;
	background: var(--panel-brown);
}

.service--03 {
	height: 736px;
	margin-top: -55px;
}

.service__inner {
	position: relative;
	width: 1280px;
	height: 100%;
	margin: 0 auto;
}

.service__num {
	position: absolute;
	top: 76px;
	left: 80px;
	font-family: var(--font-en);
	font-size: 30px;
	line-height: 1;
	color: var(--yellow);
}

.service__title {
	position: absolute;
	top: 195px;
	left: 80px;
	font-family: var(--font-mincho);
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
}

.service--03 .service__title {
	top: 186px;
	line-height: 1.6;
}

.service__desc {
	position: absolute;
	top: 264px;
	left: 80px;
	width: 546px;
	font-size: 16px;
	line-height: 1.8;
}

.service--03 .service__desc {
	top: 312px;
}

.service__sub {
	position: absolute;
	top: 556px;
	left: 80px;
	font-family: var(--font-mincho);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.service--03 .service__sub {
	top: 575px;
}

.service__tags {
	position: absolute;
	top: 604px;
	left: 80px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 1010px;
}

.service--03 .service__tags {
	top: 623px;
	width: 1120px; /* 5タグ(約1030px)を1行に収める。1010pxだと最後のタグが折り返す */
}

.service__tags li {
	border: 1px solid #fff;
	padding: 10px 9px 9px; /* +1px border keeps the 33px height / text+20px width of the comp */
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

/* SPでタグの折り返し位置を制御するダミー要素。PCでは非表示 */
.service__tags li.service__tags-break {
	display: none;
}

.service__media {
	position: absolute;
	top: 80px;
	left: 690px;
	width: 510px;
	height: 380px;
	border-radius: 20px;
	background: var(--card-gray);
}

.service--03 .service__media {
	top: 78px;
}

.service__illust {
	position: absolute;
}

.service__illust--01 {
	top: 28px;
	left: 41px;
	width: 428px;
	height: 324px;
}

.service__illust--02main {
	top: 85px;
	left: 30px;
	width: 380px;
	height: 295px;
	z-index: 2; /* the presenter + podium sit in front of the audience figures */
}

.service__illust--02a {
	top: 73px;
	left: 373px;
	width: 110px;
	height: 307px;
}

.service__illust--02b {
	top: 94px;
	left: 260px;
	width: 103px;
	height: 286px;
}

.service__illust--03 {
	top: 77px;
	left: 26px;
	width: 458px;
	height: 275px;
}

/* ---------------------------------- company */

.company {
	position: relative;
	padding-top: 140px;
}

.company__card {
	position: relative;
	width: 1184px;
	height: 910px;
	margin: 0 auto;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.company__title {
	position: absolute;
	top: 76px;
	left: 80px;
	font-family: var(--font-en);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
}

.company__table {
	position: absolute;
	top: 154px;
	left: 73px;
	width: 1031px;
}

.company__row {
	display: flex;
	padding: 24px 0 23px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	font-size: 16px;
	line-height: 1.5;
}

.company__row--last {
	border-bottom: none;
}

.company__row dt {
	flex: 0 0 331px;
	font-family: var(--font-mincho);
	font-weight: 500;
}

.company__row dd {
	flex: 1;
}

.company__row--last dd {
	line-height: 1.6;
}

.company__row a {
	text-decoration: underline;
}

.company__row a:hover {
	opacity: 0.6;
}

/* ---------------------------------- contact */

.contact {
	position: relative;
	height: 445px; /* タイトル削除分の99px(タイトルtop132→リードtop231の差)を詰めた */
	text-align: center;
}

.contact__title {
	position: absolute;
	top: 132px;
	left: 0;
	width: 100%;
	font-family: var(--font-en);
	font-size: 60px;
	font-weight: 400;
	line-height: 1;
}

.contact__lead {
	position: absolute;
	top: 129px;
	left: 0;
	width: 100%;
	font-family: var(--font-mincho);
	font-size: 20px;
	line-height: 1.8;
}

.contact__btn {
	position: absolute;
	top: 205px;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 300px;
	height: 70px;
	border: 1px solid #000;
	background: #000;
	color: #fff;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.contact__btn:hover {
	background: #fff;
	color: #000;
}

.contact__btn span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-en);
	font-size: 24px;
	line-height: 1;
}

.contact__btn-arrow {
	position: absolute;
	top: 31px;
	right: 18px;
	width: 40px;
	height: 8px;
}

.contact__privacy {
	position: absolute;
	top: 282px;
	left: 0;
	width: 100%;
	font-family: var(--font-mincho);
	font-size: 16px;
	line-height: 2;
}

.contact__privacy a {
	text-decoration: underline;
}

.contact__privacy a:hover {
	opacity: 0.6;
}

/* ---------------------------------- special thanks */

.thanks {
	position: relative;
	height: 397px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.thanks__inner {
	position: relative;
	width: 1280px;
	height: 100%;
	margin: 0 auto;
}

/* 左右2カラム(partnering / to)+中央の縦罫線 */
.thanks__title {
	position: absolute;
	top: 91px;
	left: 153px;
	font-family: var(--font-en);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
}

.thanks__title--to {
	left: 700px;
}

.thanks__list {
	position: absolute;
	top: 146px;
	width: 431px;
	font-family: var(--font-mincho);
	font-size: 16px;
	line-height: 2;
	text-align: justify;
}

.thanks__list--partnering {
	left: 149px;
}

.thanks__list--to {
	left: 700px;
}

.thanks__divider {
	position: absolute;
	top: 100px;
	left: 640px;
	width: 0;
	height: 198px;
	margin: 0;
	border: none;
	border-left: 1px solid rgba(0, 0, 0, 0.4);
}

/* ---------------------------------- footer */

.site-footer {
	height: 234px;
}

.site-footer__inner {
	position: relative;
	width: 1280px;
	height: 100%;
	margin: 0 auto;
	padding: 0 48px;
}

.site-footer__logo {
	position: absolute;
	top: 100px;
	right: 48px;
	width: 339px;
	height: 86px;
	object-fit: contain;
}

.site-footer__copy {
	position: absolute;
	top: 171px;
	left: 48px;
	font-size: 14px;
	line-height: 1;
}

/* ---------------------------------- privacy policy page */

.privacy {
	height: 1472px; /* + footer 234px = 1706px (Figma frame) */
}

.privacy__inner {
	position: relative;
	width: 1280px;
	height: 100%;
	margin: 0 auto;
}

.privacy__title {
	position: absolute;
	top: 228px;
	left: 48px;
	font-family: var(--font-en);
	font-size: 30px; /* Service見出し(30px)と同等に。旧80px */
	font-weight: 400;
	line-height: 1;
}

.privacy__policy-title {
	position: absolute;
	top: 490px;
	left: 149px;
	font-family: var(--font-mincho);
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
}

.privacy__policy-text {
	position: absolute;
	top: 549px;
	left: 149px;
	width: 982px;
	font-size: 16px;
	line-height: 1.8;
}

.privacy__item-title {
	position: absolute;
	left: 149px;
	font-family: var(--font-mincho);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.privacy__item-title--1 { top: 774px; }
.privacy__item-title--2 { top: 950px; }
.privacy__item-title--3 { top: 1126px; }
.privacy__item-title--4 { top: 1273px; }

.privacy__item-text {
	position: absolute;
	left: 149px;
	width: 982px;
	font-size: 16px;
	line-height: 1.8;
}

.privacy__item-text--1 { top: 823px; }
.privacy__item-text--2 { top: 999px; }
.privacy__item-text--3 { top: 1175px; }
.privacy__item-text--4 { top: 1322px; }

/* ---------------------------------- helpers */

.u-sp {
	display: none;
}

/* ================================================================
   SP (390px design)
   ================================================================ */
@media (max-width: 767px) {

	body {
		min-width: 0;
	}

	.u-sp {
		display: inline;
	}

	/* ------------------------------ header */

	.site-header__inner {
		width: 100%;
		padding: 20px 20px 0;
	}

	.site-header__logo img {
		width: 113px;
		height: 28px;
	}

	.site-header__nav {
		gap: 13px;
        padding-top: 1px;
        font-size: 13px;
	}

	/* ------------------------------ hero */

	.hero {
		height: 780px;
	}

	.hero__title {
		top: 308px;
		font-size: 34px;
	}

	.hero__scroll {
		top: 518px;
	}

	.hero__scroll-label {
		font-size: 14px;
	}

	/* ------------------------------ mission */

	.mission {
		height: 606px;
	}

	.mission__text {
		top: 9px;
        left: 20px;
        transform: none;
        font-size: 14px;
        line-height: 2.421;
	}

	/* ------------------------------ services */

	.service {
		border-radius: 20px 20px 0 0;
	}

	.service--01 {
		height: 1220px;
	}

	.service--02 {
		height: 1079px;
		margin-top: -30px;
	}

	.service--03 {
		height: 964px;
		margin-top: -37px;
	}

	.service__inner {
		width: 100%;
	}

	.service__num {
		top: 48px;
		left: 20px;
		font-size: 18px;
	}

	.service__title {
		top: 130px;
		left: 20px;
		font-size: 20px;
	}

	.service--03 .service__title {
		top: 124px;
		line-height: 1.6;
	}

	.service__desc {
		top: 169px;
		left: 20px;
		width: auto;
		right: 20px;
		font-size: 14px;
	}

	.service--03 .service__desc {
		top: 202px;
	}

	.service__sub {
		top: 745px;
		left: 20px;
		font-size: 16px;
	}

	.service--03 .service__sub {
		top: 749px;
		line-height: 1.6;
	}

	.service__tags {
		top: 780px;
		left: 20px;
		right: 20px;
		width: auto;
		gap: 10px 6px;
	}

	.service--03 .service__tags {
		top: 813px;
		row-gap: 0; /* 行間はservice__tags-break(高さ10px)が担う */
	}

	.service__tags li {
		padding: 8px 7px 7px;
		font-size: 10px;
	}

	/* タグを2個・2個・1個の3行に固定するための強制改行。高さ10pxがそのまま行間になる */
	.service__tags li.service__tags-break {
		display: block;
		flex-basis: 100%;
		height: 10px;
		padding: 0;
		border: none;
	}

	.service__media {
		top: 438px;
		left: 20px;
		right: 20px;
		width: auto;
		height: 260px;
	}

	.service--03 .service__media {
		top: 445px;
	}

	.service__illust--01 {
		top: 19px;
		left: 28px;
		width: 294px;
		height: 222px;
	}

	.service__illust--02main {
		top: 58px;
		left: 21px;
		width: 260px;
		height: 202px;
	}

	.service__illust--02a {
		top: 50px;
		left: 256px;
		width: 76px;
		height: 210px;
	}

	.service__illust--02b {
		top: 64px;
		left: 178px;
		width: 71px;
		height: 196px;
	}

	.service__illust--03 {
		top: 53px;
		left: 18px;
		width: 314px;
		height: 188px;
	}

	/* ------------------------------ company */

	.company {
		padding-top: 100px;
	}

	.company__card {
		width: calc(100% - 40px);
		height: 1072px;
	}

	.company__title {
		top: 48px;
		left: 20px;
		font-size: 20px;
	}

	.company__table {
		top: 103px;
		left: 20px;
		width: calc(100% - 40px);
	}

	.company__row {
		display: block;
		padding: 25px 0 22.6px;
		font-size: 14px;
	}

	.company__row dt {
		margin-bottom: 7px;
		font-size: 16px;
		line-height: 1.5;
	}

	.company__row dd {
		line-height: 1.6;
	}

	/* ------------------------------ contact */

	.contact {
		height: 332px; /* Figma: companyカード下端5754→thanks上端6086 */
	}

	.contact__title {
		top: 96px;
		font-size: 30px;
	}

	.contact__lead {
		top: 89px;
		font-size: 16px;
		line-height: 2;
	}

	.contact__btn {
		top: 141px;
		width: 260px;
		height: 60px;
	}

	.contact__btn-arrow {
		top: 27px;
        right: 10px;
        width: 45px;
        height: 8px;
	}

	.contact__privacy {
		top: 212px;
		font-size: 14px;
	}

	/* ------------------------------ special thanks */

	.thanks {
		height: 484px;
	}

	.thanks__inner {
		width: 100%;
	}

	/* SPは縦積み(横罫線で仕切り) */
	.thanks__title {
		top: 73px;
		left: 20px;
		font-size: 18px;
	}

	.thanks__title--to {
		top: 256px;
		left: 20px;
	}

	.thanks__list {
		top: 117px;
		left: 20px;
		right: 20px;
		width: auto;
		font-size: 14px;
		line-height: 1.6;
		text-align: left;
	}

	.thanks__list--to {
		top: 300px;
	}

	.thanks__divider {
		top: 213px;
		left: 20px;
		width: calc(100% - 40px);
		height: 0;
		border-left: none;
		border-top: 1px solid rgba(0, 0, 0, 0.4);
	}

	/* ------------------------------ privacy policy page */

	.privacy {
		height: 1629px; /* + footer 212px = 1841px (Figma frame) */
	}

	.privacy__inner {
		width: 100%;
	}

	.privacy__title {
		top: 174px;
		left: 20px;
		font-size: 20px; /* SP時のService見出し(20px)と同等に。旧40px */
	}

	.privacy__policy-title {
		top: 325px;
		left: 20px;
		font-size: 20px;
	}

	.privacy__policy-text {
		top: 365px;
		left: 20px;
		right: 20px;
		width: auto;
		font-size: 14px;
	}

	.privacy__item-title {
		left: 20px;
		right: 20px;
		font-size: 16px;
		line-height: 1.6;
	}

	.privacy__item-title--1 { top: 701px; }
	.privacy__item-title--2 { top: 908px; }
	.privacy__item-title--3 { top: 1141px; }
	.privacy__item-title--4 { top: 1324px; }

	.privacy__item-text {
		left: 20px;
		right: 20px;
		width: auto;
		font-size: 14px;
	}

	.privacy__item-text--1 { top: 742px; }
	.privacy__item-text--2 { top: 975px; }
	.privacy__item-text--3 { top: 1208px; }
	.privacy__item-text--4 { top: 1391px; }

	/* ------------------------------ footer */

	.site-footer {
		height: 212px;
	}

	.site-footer__inner {
		width: 100%;
		padding: 0;
	}

	.site-footer__logo {
		top: 80px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: 170px;
		height: 43px;
	}

	.site-footer__copy {
		top: 169px;
		left: 0;
		width: 100%;
		text-align: center;
	}
}