@charset "UTF-8";

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { width: 100%; height: auto; vertical-align: bottom; }
ul, li { list-style: none; }
a { text-decoration: none; color: inherit; }
input, button, select, textarea { font-family: inherit; font-size: 100%; vertical-align: middle; }

/* clearfix */
.clearfix::after {
    content: ""; display: block; clear: both;
}

/* font  ━━━━━━━━━━━━ */
body {
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
	letter-spacing: 0.1rem;
	color: #222; background-color: #f0f0f0;
}
body,h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 600; }
@media screen and (max-width: 600px) { body { letter-spacing: 0; } }

/* image  ━━━━━━━━━━━━ */
.image_mobile { display: none; }
@media screen and (max-width: 600px) {
	.image_mobile { display: block; }
	.image_pc { display: none; }
}

/* space   ━━━━━━━━━━━━ */
.space-topbottom { padding: 100px 0; }
.space-top { padding: 100px 0 0 0; }
.space-bottom { padding: 0 0 100px 0; }
.space-topbottom50 { padding: 50px 0; }
.space-top50 { padding: 50px 0 0 0; }
.space-bottom50 { padding: 0 0 50px 0; }
.space-topbottom30 { padding: 30px 0; }
.space-top30 { padding: 30px 0 0 0; }
.space-bottom30 { padding: 0 0 30px 0; }
.space-top20 { padding: 20px 0 0 0; }
.space-bottom20 { padding: 0 0 20px 0; }
.space-bottom5 { padding: 0 0 5px 0; }
@media screen and (max-width: 600px) {
	.space-topbottom { padding: 50px 0; }
}

/* フッターを最下部に維持するためのFlexboxレイアウト */
body { min-height: 100vh; display: flex; flex-direction: column; }
/* 可変領域 */
.main-content { flex: 1; padding-top: 100px; /*padding-bottom: 60px;*/ }

.container {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}

/* copy ━━━━━━━━━━━━ */
.title01 { font-size: 2rem; line-height: 1.8; }
.copy01 {
	font-size: 1.2rem; line-height: 2.2; text-align: justify;
}
.copy02 {
	font-size: 0.8rem; line-height:1.8; text-align: justify;
}
@media screen and (max-width: 600px) {
	.title01 { font-size: 1.6rem; }
}

/* tabele ━━━━━━━━━━━━ */

.table01 { width: 100%; border-collapse: collapse; }
.table01 tr { border-top: 2px solid #999; }
.table01 tr:last-child { border-bottom: 2px solid #999; }

.table01 th, .table01 td { vertical-align: middle; padding: 30px; }
.table01 th {
	width: 30%; font-size: 1.2rem; text-align: left;
}
.table01 td {
	width: 70%; font-size: 1rem; line-height: 1.8; text-align: justify;
}
.table01 td span { display: inline-block; }
.table01 td ul {
	display: grid; grid-template-columns: repeat(3, 1fr); /* 3列均等配置 */
	gap: 15px; list-style: none;
}
.table01 td ul li {
	font-size: 1rem; line-height: 1.5; text-align: center;
	white-space: nowrap; background-color: #fff; padding: 5px 0;
}
.ceo-name {
	display: block; font-size: 1.2rem; padding: 0 0 10px 0;
}

@media screen and (max-width: 900px) {
	.table01 th { width: 35%; }
	.table01 td { width: 65%; }
	.table01 td ul {
		grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
  }
}
@media screen and (max-width: 600px) {
	.table01, .table01 tbody, .table01 tr, .table01 th, .table01 td {
		display: block; width: 100%;
	}
	.table01 th, .table01 td { padding: 20px 0; }
	.table01 td ul { padding: 0 15px; ap: 10px; }
	.table01 td ul li {
		white-space: normal; /* 改行を許可 */
  }
}

.table01 td a { position: relative; display: inline-block; padding:  0 0 10px 0; }
.table01 td a::after {
	content: "";
	position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
	display: block; width: 100%; height: 2px; background-color: #999;
	transition: width 0.2s ease;
}
@media screen and (min-width: 1025px) {
	.table01 td a:hover::after { width: 110%; }
}


/* header ━━━━━━━━━━━━ */
.header {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100px;
	background-color: #fff;
	backdrop-filter: blur(4px);
	transition: height 0.3s ease;
	z-index: 100;
}
.header.is-scrolled { height: 50px; }

.header__inner {
	position: relative;
	width: 90%; max-width: 1100px; height: 100%; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	z-index: 120;
}
.header__logo { transform: translateY(-2px); }
.header__logo a {
	font-size: 1.3rem; letter-spacing: 0.05rem;
}
.footer__logo a { text-align: center; padding: 50px 0 0 0; }
@media screen and (max-width: 600px) {
	.header__logo a { font-size: 1.1rem; }
}

/*menu-btn*/
.menu-btn {
	width: 54px; height: 54px;
	background: none; border: none; cursor: pointer;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	gap: 9px; padding: 0;  position: relative; z-index: 130;
	transform: translateX(10px);
}
.menu-btn__line {
	display: block; width: 34px; height: 3px;
	background-color: #222;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-btn.is-active .menu-btn__line:nth-child(1) { transform: translateX(10px); }
.menu-btn.is-active .menu-btn__line:nth-child(2) { transform: translateX(-10px); }

/* global-nav */
.global-nav {
	position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
	display: flex; justify-content: center; align-items: center;
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 110;
	background-color: #f0f0f0;
}
.global-nav.is-open { opacity: 1; visibility: visible; }

/* global-nav__list */
.global-nav__list {
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	width: 100%;
}
.global-nav__list li {
	display: flex; flex-direction: column; align-items: center;
	width: 100%;
}
.global-nav__list a {
	position: relative; display: inline-block;
	color: #222; font-size: 1.4rem; letter-spacing: 0.1em; text-align: center;
	padding: 10px 0;
}
@media screen and (min-width: 1025px) {
	.global-nav__list a::after {
		content: "";
		position: absolute; bottom: 0; left: 0; right: 0; margin: auto;
		display: block; width: 0; height: 2px; background-color: #222;
		transition: width 0.2s ease;
	}
	.global-nav__list a:hover::after { width: 100%; }
}
@media screen and (max-width: 600px) {
	.global-nav__list a { font-size: 1.2rem; }
}



/* footer ━━━━━━━━━━━━ */
.footer {
	background-color: #fff;  padding: 100px 0;
}

.footer-nav {
	display: flex; flex-direction: column; align-items: center;
	gap: 50px;
}

/*footer-nav__link*/
.footer-nav__link {
	display: flex;  justify-content: center; align-items: center; flex-wrap: wrap;
	gap: 20px;
}
.footer-nav__link li a {
	display: inline-flex; justify-content: center; align-items: center;
	width: 350px; line-height: 60px; height: 60px;
	font-size: 1.2rem; color: #fff;
	position: relative; overflow: hidden; padding-bottom: 2px;
	z-index: 1;
}
.footer-nav__link li a::after {
		content: "";
		position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
		display: block; width: 100%; height: 100%;
		background-color: #222;
		transition: width 0.2s ease;
		z-index: -1;
	}
@media screen and (min-width: 1025px) {
	.footer-nav__link li a:hover::after { width: 90%; }
}

/*footer-nav__list*/
.footer-nav__list {
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
	padding: 20px 0 0 0;
}
.footer-nav__list li { display: flex; align-items: center; }
.footer-nav__list li + li::before {
	content: "";
	display: inline-block; width: 1px; height: 12px;
	background-color: #222;
	margin: 0 30px;
}
.footer-nav__list a { font-size: 1.1rem; color: #222; }
@media screen and (min-width: 1025px) {
	.footer-nav__list a { position: relative; }
	.footer-nav__list a::after {
		display: block; width: 0; height: 2px;
		content: ""; position: absolute; left: 0; right: 0; bottom: -10px; margin: auto;
		transition: width 0.2s ease; background: #222;
	}
	.footer-nav__list a:hover::after { width: 100%; }
}
@media screen and (max-width: 900px) {
	.footer-nav__list, .footer-nav__list li {
		flex-direction: column; align-items: center; width: 100%;
	}
	.footer-nav__list li + li::before {
		width: 40px; height: 1px; margin: 15px 0; 
	}
}

.footer__logo {
	font-size: 1.2rem; letter-spacing: 0.05rem;
	text-align: center; padding: 100px 0 0 0;
}
@media screen and (max-width: 600px) {
	.footer__logo { font-size: 1rem; }
}

/*main_full*/
.main-full {
	position: relative; width: 100%; overflow: hidden;
	height: calc(100vh - 100px); /*旧ブラウザ対応*/
	height: calc(100svh - 100px);
}

.main-top {
	display: flex; justify-content: center; align-items: flex-end;
	position: relative; width: 100%; height: 100%;
	background-color: #fff;
}
.main-top__back {
	position: absolute; top: 0; left: 0;
	display: block; width: 100%; height: 100%; background-color: #e6e6e6;
	transition: width 0.2s ease; z-index: 1;
}
.main-top__image {
	width: 100%; height: 100%;
	display: flex; justify-content: center; align-items: flex-end;
}
.main-top__image img {
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: bottom center;
}
.main-top__design {
	position: absolute; bottom: 6%; right: 15%; width: 25vw;
}
.main-top__design img {
	width: 100%; height: auto;
}
.main-top__back { z-index: 1; }
.main-top__image { z-index: 2; }
.main-top__design { z-index: 3; }
@media screen and (max-width: 1050px) {
	.main-top__image img {
		height: 100%; max-height: 85%;
		object-position: bottom center;
	}
	.main-top__design {
    	top: 30px; bottom: auto; left: 0; right: 0; margin: auto;
		width: clamp(100px, 50vw, 280px);
	}
}
@media screen and (max-width: 500px) {
	.main-top__image img {
		height: 80%; max-height: none;
		object-fit: cover;
		object-position: bottom center;
	}
}
@media screen and (max-width: 380px) {
	.main-top__design {
    	top: 15px;  width: 40vw;
	}	
}

/*gallery*/

.gallery01 {
	display: grid; grid-template-columns: repeat(5, 1fr);
	gap: 30px; 
}
@media screen and (max-width: 600px) {
	.gallery01 {
		display: grid; grid-template-columns: repeat(4, 1fr);
	}
}

.gallery02 {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 30px; 
}
.gallery02 li { background-color: #fff; padding: 10px; transition: transform 0.3s ease; }
.gallery02 li p { font-size: 0.7rem; text-align: center; padding: 5px 0 0 0; }
@media screen and (min-width: 1025px) {
	.gallery02 li:hover {
		cursor: pointer; transform: scale(1.1); 
	}
}
@media screen and (max-width: 1024px) {
	.gallery02 { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 600px) {
	.gallery02 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/*privacy ━━━━━━━━━━━━*/

.privacy { font-size: 1rem; line-height: 2.2; text-align: justify; }
.privacy ul { padding: 20px 0 0 0; }
.privacy h2 {
	font-size: 1.2rem; line-height: 1.8; padding: 30px 0 20px 0;
}
.privacy p {  }

.privacy ul li { /*list-style: inside;*/ }
@media screen and (max-width: 600px) {
	.privacy h2 { font-size: 1rem; }
	.privacy { font-size: 0.8rem; }
}

/*design-policy ━━━━━━━━━━━━*/

.contents3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr); gap: 50px;
}
.contents3 section { position: relative; padding: 20px 0 30px 0;; }
.contents3 section::before {
	content: "";
	position: absolute; top: 0; left: 0;
	display: block; width: 100px; height: 3px;
	background-color: #222;
}
.contents3-1 h3 { font-size: 2rem; padding: 0 0 15px 0; }
.contents3-1 p { font-size: 1.2rem; line-height: 1.6; }
.contents3-2 h3 { font-size: 1.8rem; padding: 0 0 15px 0; }
.contents3-2 p { font-size: 1rem; line-height: 1.6; }
.contents3-2 img { width: 70%; padding: 20px 0 0 0; }

@media screen and (max-width: 900px) {
	.contents3 { grid-template-columns: repeat(2, 1fr); text-align: center; }
	.contents3 section:nth-child(3) {
		grid-column: 1 / -1;
		width: 50%; margin: 0 auto;
	}
	.contents3 section::before { right: 0; margin: auto; }
}
@media screen and (max-width: 600px) {
	.contents3 {
		grid-template-columns: 1fr;
	}
	.contents3 section:nth-child(3) {
    	grid-column: auto; width: 100%;
	}
}

/*thanks ━━━━━━━━━━━━*/

.thanks { width: 260px; margin: 200px auto; }
@media screen and (max-width: 600px) { .thanks { width: 70%; margin: 150px auto; } }

/* motion ━━━━━━━━━━━━*/

.motion01 { transform: scale(0.5); transition: 1s cubic-bezier(0.87, 0, 0.13, 1); opacity: 0; }
.motion01.motion_fix { transform: scale(1);  opacity: 1; }

.motion02 { transform: translateX(-100%); transition: 1s cubic-bezier(0.87, 0, 0.13, 1); transform-origin: left; }
.motion02.motion_fix { transform: translateX(0); }

.motion03 { transform: translateY(30%); transition: 1s ease-in-out; }
.motion03.motion_fix { transform: translateY(0); }