/* ========================================
   HIDESIGN TOP
======================================== */


/* ========================================
   MAIN
======================================== */

.wp-site-blocks {
	background: #fafafa;
}

.top-main {
	width: 100%;
	max-width: none !important;

	margin: 0;

	background: #fafafa;
}

/* ========================================
   HERO
======================================== */

.top-hero {
	display: grid;
	grid-template-columns: 35% 65%;

	width: 100%;
	min-height: 560px;

	background: #f7f7f7;
}


.top-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	padding:
		70px
		clamp(50px, 6vw, 105px);

        background: #ebebeb;
}


.top-hero__content > .hidesign-button {
	align-self: flex-end;
}


.top-hero__title {
	margin: 0;

	font-family: var(--font-jp);
	font-size: 22px;
	font-weight: 400;
	line-height: 2;

	letter-spacing: 0.05em;

	color: var(--color-main);
}


.top-hero__line {
	width: 58px;
	height: 1px;

	margin: 34px 0 28px;

	background: #999999;
}


.top-hero__description {
	margin: 0 0 34px;

	font-family: var(--font-jp);
	font-size: 12px;
	font-weight: 400;
	line-height: 2;

	letter-spacing: 0.02em;

	color: var(--color-text);
}


/* ========================================
   HERO VISUAL
======================================== */

.top-hero__visual {
	position: relative;
	overflow: hidden;

	min-width: 0;

	background: #dddddd;
}


.top-hero__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 7px;

	width: 100%;
	height: 100%;
	min-height: 560px;

	font-family: var(--font-en);
	font-size: 13px;

	letter-spacing: 0.08em;

	color: #777777;

	background:
		linear-gradient(
			135deg,
			#dedede,
			#c8c8c8
		);
}


.top-hero__placeholder small {
	font-family: var(--font-jp);
	font-size: 10px;

	letter-spacing: 0;

	color: #888888;
}


/* ========================================
   COMMON TOP SECTION LABEL
======================================== */

.top-section-label {
	margin: 0 0 8px;

	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;

	letter-spacing: 0.02em;

	color: var(--color-main);
}


/* ========================================
   PROCESS
======================================== */

.top-process {
	display: grid;
	grid-template-columns: 28% 72%;

	width: 100%;
	min-height: 220px;

	background: #fafafa;

	border-bottom: 1px solid #dddddd;
}


.top-process__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;

	padding:
		34px
		30px
		34px
		clamp(50px, 4vw, 70px);

	border-right: 1px solid #eeeeee;
}


.top-process__title {
	margin: 0;

	font-family: var(--font-jp);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;

	color: var(--color-main);
}


.top-process__button {
	width: 190px;
}


/* ========================================
   PROCESS STEPS
======================================== */

.top-process__steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));

	min-width: 0;
}


.top-process__item {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 0;

	padding: 28px 10px 25px;

	text-align: center;

	border-right: 1px solid #eeeeee;
}


.top-process__item:last-child {
	border-right: none;
}


.top-process__item:not(:last-child)::after {
	content: "›";

	position: absolute;
	top: 50%;
	right: -5px;

	z-index: 2;

	transform: translateY(-50%);

	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: 200;
	line-height: 1;

	color: #cccccc;

	background: #fafafa;
}


.top-process__number {
	margin: 0 0 10px;

	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;

	color: var(--color-main);
}


.top-process__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin-bottom: 12px;

	background: #ffffff;
}


.top-process__icon span {
	font-family: var(--font-en);
	font-size: 10px;
	font-weight: 500;

	color: #555555;
}


.top-process__item-title {
	margin: 0 0 5px;

	font-family: var(--font-jp);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;

	color: var(--color-main);
}


.top-process__text {
	margin: 0;

	font-family: var(--font-jp);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;

	color: var(--color-text);
}


/* ========================================
   WORKS
======================================== */

.top-works {
	display: grid;
	grid-template-columns: 28% 72%;

	width: 100%;

	background: #fafafa;

	border-bottom: 1px solid #dddddd;
}


.top-works__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;

	padding:
		34px
		30px
		34px
		clamp(50px, 4vw, 70px);

	border-right: 1px solid #eeeeee;
}


.top-works__title {
	margin: 0;

	font-family: var(--font-jp);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;

	color: var(--color-main);
}


.top-works__button {
	width: 190px;
}


/* ========================================
   WORKS LIST
======================================== */

.top-works__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: clamp(22px, 3vw, 46px);

	align-items: center;

	min-width: 0;

	padding:
		28px
		clamp(30px, 4vw, 58px);
}


.top-works__card {
	min-width: 0;
}


/* 仮画像 */
.top-works__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	aspect-ratio: 1.55 / 1;

	background: #a5a5a5;

	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 500;

	color: #ffffff;
}


/* ========================================
   NEWS
======================================== */

.top-news {
	display: grid;
	grid-template-columns: 28% 72%;
	grid-template-rows: repeat(3, 60px);

	width: 100%;
	height: 180px;

	background: #fafafa;

	border-bottom: 1px solid #dddddd;
}


/* WordPress shortcode block reset */
.wp-block-shortcode {
	width: 100%;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* ========================================
   NEWS LEFT
======================================== */

.top-news__intro {
	grid-column: 1;
	grid-row: 1 / span 3;

        position: relative;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;

	min-width: 0;

	padding:
		16px
		30px
		16px
		clamp(50px, 4vw, 70px);

	border-right: 1px solid #eeeeee;
}


.top-news__title {
	margin: 0;

	font-family: var(--font-jp);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;

	color: var(--color-main);
}


.top-news__button {
	width: 190px;

	justify-content: flex-start;
	text-align: left;
}

.top-news__button .hidesign-button__arrow {
	margin-left: auto;
}



/* ========================================
   NEWS ITEMS
======================================== */

.top-news__item {
	all: unset;
	box-sizing: border-box;

	grid-column: 2;

	display: grid;
	grid-template-columns: 145px minmax(0, 1fr);
	align-items: center;

	min-width: 0;

	padding: 0 28px;

	border-bottom: 1px solid #dddddd;

	cursor: pointer;
}


/* NEWSを3行に固定 */
.top-news__item:nth-of-type(1) {
	grid-row: 1;
}

.top-news__item:nth-of-type(2) {
	grid-row: 2;
}

.top-news__item:nth-of-type(3) {
	grid-row: 3;
}


.top-news__item:last-of-type {
	border-bottom: none;
}


.top-news__item:focus-visible {
	outline: 2px solid var(--color-main);
	outline-offset: -2px;
}


.top-news__date {
	display: block;

	margin: 0;
	padding: 0;

	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;

	color: var(--color-main);

	white-space: nowrap;

}


.top-news__headline {
	display: block;

	min-width: 0;

	margin: 0;
	padding: 0;

	overflow: hidden;

	font-family: var(--font-jp);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;

	color: var(--color-text);

	white-space: nowrap;
	text-overflow: ellipsis;

}


.top-news__empty {
	grid-column: 2;
	grid-row: 1 / span 3;

	display: flex;
	align-items: center;

	padding: 0 28px;

	font-family: var(--font-jp);
	font-size: 14px;

	color: var(--color-text);
}


/* ========================================
   CONTACT
======================================== */

.top-contact {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 300px;

	padding: 40px 30px;

	background: #fafafa;

	border-bottom: 1px solid #dddddd;
}


.top-contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;
}


.top-contact__label {
	margin: 0 0 10px;

	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;

	color: var(--color-main);
}


.top-contact__text {
	margin: 0 0 20px;

	font-family: var(--font-jp);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;

	color: var(--color-text);
}


.top-contact__button {
	width: 200px;
}


/* ========================================
   TOP CONTENT MAX WIDTH
======================================== */

.top-process,
.top-works,
.top-news,
.top-contact {
	width: 100%;
	max-width: 1440px;

	margin-left: auto;
	margin-right: auto;
}


/* ========================================
   SECTION BUTTON ALIGN
======================================== */

@media screen and (min-width: 1001px) {

	.top-process__button,
	.top-works__button {
		align-self: flex-end;
		margin-left: auto;
	}

	.top-news__button {
		position: absolute;
		right: 30px;
		bottom: 16px;

		margin: 0;
	}
}


/* ========================================
   RESPONSIVE
======================================== */

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

	/* HERO */
	.top-hero {
		grid-template-columns: 45% 55%;
	}


	/* PROCESS */
	.top-process {
		grid-template-columns: 1fr;
	}


	.top-process__intro {
		flex-direction: row;
		align-items: flex-end;

		padding: 34px 40px;

		border-right: none;
		border-bottom: 1px solid #eeeeee;
	}


	.top-process__steps {
		grid-template-columns: repeat(3, 1fr);
	}


	.top-process__item {
		min-height: 190px;

		border-bottom: 1px solid #eeeeee;
	}


	.top-process__item:nth-child(3) {
		border-right: none;
	}


	.top-process__item:nth-child(4),
	.top-process__item:nth-child(5),
	.top-process__item:nth-child(6) {
		border-bottom: none;
	}


	.top-process__item:not(:last-child)::after {
		display: none;
	}


	/* WORKS */
	.top-works {
		grid-template-columns: 1fr;
	}


	.top-works__intro {
		flex-direction: row;
		align-items: flex-end;

		padding: 34px 40px;

		border-right: none;
		border-bottom: 1px solid #eeeeee;
	}


}


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

	/* HERO */
	.top-hero {
		grid-template-columns: 1fr;
	}


	.top-hero__content {
		padding: 60px 30px;
	}


	.top-hero__visual,
	.top-hero__placeholder {
		min-height: 420px;
	}


	/* PROCESS */
	.top-process__intro {
		flex-direction: column;
		align-items: flex-start;

		gap: 28px;

		padding: 36px 30px;
	}


	.top-process__steps {
		grid-template-columns: 1fr;
	}


	.top-process__item {
		display: grid;
		grid-template-columns: 35px 55px 1fr;
		grid-template-rows: auto auto;

		align-items: center;

		min-height: auto;

		padding: 22px 30px;

		text-align: left;

		border-right: none;
		border-bottom: 1px solid #eeeeee;
	}


	.top-process__item:nth-child(4),
	.top-process__item:nth-child(5) {
		border-bottom: 1px solid #eeeeee;
	}


	.top-process__item:last-child {
		border-bottom: none;
	}


	.top-process__number {
		grid-column: 1;
		grid-row: 1 / 3;

		margin: 0;
	}


	.top-process__icon {
		grid-column: 2;
		grid-row: 1 / 3;

		margin: 0;

		width: 42px;
		height: 42px;
	}


	.top-process__item-title {
		grid-column: 3;
		grid-row: 1;

		margin: 0;
	}


	.top-process__text {
		grid-column: 3;
		grid-row: 2;
	}


	/* WORKS */
	.top-works__intro {
		flex-direction: column;
		align-items: flex-start;

		gap: 28px;

		padding: 36px 30px;
	}


	.top-works__list {
		grid-template-columns: 1fr;

		gap: 18px;

		padding: 30px;
	}


	.top-works__placeholder {
		aspect-ratio: 16 / 9;
	}


}


/* ========================================
   TOP NEWS HOVER
======================================== */

.top-news__item .top-news__date,
.top-news__item .top-news__headline {
    transition: color 0.3s ease;
}

@media (hover: hover) {
    .top-news__item:hover .top-news__date,
    .top-news__item:hover .top-news__headline {
        color: #aaaaaa;
    }
}


/* ========================================
   TOP CONTACT BUTTON HOVER
======================================== */

.top-contact__button {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

@media (hover: hover) {
    .top-contact__button:hover {
        background-color: #222222;
        color: #ffffff;
        border-color: #222222;
    }

    .top-contact__button:hover .hidesign-button__arrow {
        color: #ffffff;
    }
}


/* ========================================
   TOP PROCESS ICONS
======================================== */

.top-process__icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 仮の「ICON」文字を非表示 */
.top-process__icon span {
    display: none;
}

/* 01〜06 アイコン画像 */
.top-process__item:nth-child(1) .top-process__icon {
    background-image: url("../images/icon/top_icon_01.png");
}

.top-process__item:nth-child(2) .top-process__icon {
    background-image: url("../images/icon/top_icon_02.png");
}

.top-process__item:nth-child(3) .top-process__icon {
    background-image: url("../images/icon/top_icon_03.png");
}

.top-process__item:nth-child(4) .top-process__icon {
    background-image: url("../images/icon/top_icon_04.png");
}

.top-process__item:nth-child(5) .top-process__icon {
    background-image: url("../images/icon/top_icon_05.png");
}

.top-process__item:nth-child(6) .top-process__icon {
    background-image: url("../images/icon/top_icon_06.png");
}


/* ========================================
   TOP BUTTON HOVER - BOTTOM LINE
======================================== */

.top-hero .hidesign-button,
.top-process .hidesign-button,
.top-works .hidesign-button,
.top-news .hidesign-button {
    background-image: linear-gradient(#222, #222);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 2px;
    transition: background-size 0.3s ease;
}

@media (hover: hover) {
    .top-hero .hidesign-button:hover,
    .top-process .hidesign-button:hover,
    .top-works .hidesign-button:hover,
    .top-news .hidesign-button:hover {
        background-size: 100% 2px;
    }
}

/* ========================================
   TOP WORKS LAYOUT FIX
======================================== */

/* 余分な段落が配置に影響しないようにする */
.top-works__intro > p,
.top-works__list > p {
    display: contents !important;
}

/* 不要な改行による空白を除去 */
.top-works__intro > br,
.top-works__intro > p > br,
.top-works__list > br,
.top-works__list > p > br {
    display: none !important;
}


/* ========================================
   TOP MAIN VISUAL - 2枚クロスフェード
   TOP専用 top.css の「一番下」に追記
======================================== */

/* 仮の「MAIN VISUAL」表示を消し、画像領域を確保 */
.top-hero__visual {
    min-height: 560px;
    background-color: #dddddd;
}

.top-hero__visual .top-hero__placeholder {
    display: none;
}

/* 2枚の画像を同じ位置に重ねる */
.top-hero__visual::before,
.top-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
}

/* 1枚目は常に下に配置 */
.top-hero__visual::before {
    background-image: url("../images/top/TOP-01.webp");
}

/* 2枚目を透明→表示→透明と変化させる */
.top-hero__visual::after {
    background-image: url("../images/top/TOP-02.webp");
    opacity: 0;
    animation: hidesign-hero-dissolve 12s ease-in-out infinite;
}

@keyframes hidesign-hero-dissolve {
    0%, 40%, 100% { opacity: 0; }
    50%, 90% { opacity: 1; }
}

/* スマートフォンでも画像を表示 */
@media screen and (max-width: 800px) {
    .top-hero__visual {
        min-height: 420px;
    }
}

/* 動きを減らすOS設定なら1枚目を静止表示 */
@media (prefers-reduced-motion: reduce) {
    .top-hero__visual::after {
        animation: none;
        opacity: 0;
    }
}


/* ========================================
   NEWS - RESPONSIVE REBUILD
   PCは既存の3行グリッドを維持。
   タブレット・スマホは固定行・固定高さを使わず
   上から自然な文書フローで積み重ねる。
======================================== */

/* 以前PCのNEWS文字位置を合わせるために入れた値はPCのみに限定 */
@media screen and (min-width: 1001px) {
    .top-news__date { transform: translateY(-20px); }
    .top-news__headline { transform: translateY(-25px); }
}

@media screen and (max-width: 1000px) {
    /* display:blockで、PC用のgrid-row指定を完全に無効化 */
    .top-news {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .top-news__intro {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 34px 40px;
        border-right: 0;
        border-bottom: 1px solid #ddd;
    }

    .top-news__button {
        position: static;
        align-self: flex-start;
        margin: 0;
        width: 190px;
    }

    .top-news__item,
    .top-news__empty {
        /* gridの行指定・Flexの伸長から切り離す */
        display: block;
        position: static;
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .top-news__item {
        padding: 20px 40px;
        border-bottom: 1px solid #ddd;
    }

    .top-news__date,
    .top-news__headline {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        transform: none;
        line-height: 1.65;
    }

    .top-news__date {
        margin-bottom: 6px;
        white-space: nowrap;
    }

    .top-news__headline {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .top-news__empty {
        padding: 20px 40px;
    }

    /* ショートコード出力で余分な空段落・改行が生じた場合だけ除外 */
    .top-news > br,
    .top-news > p:empty {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .top-news__intro { padding: 36px 30px; }
    .top-news__item { padding: 18px 30px; }
    .top-news__empty { padding: 18px 30px; }
    .top-news__date { font-size: 12px; }
    .top-news__headline { font-size: 14px; }
}