/* 基本設定
----------------------------------------------------*/
:root {
	--base-Container: 1487;
	/* ブレークポイント */
	--bp-s: 480;
	--bp-m: 770;
	--bp-l: 1240;
	--bp-ll: 1600;
	scroll-behavior: smooth;
}
body {
	--fs-s: 14;
	--fs-e: 18;
	color: #121212;
	font-family: "Noto Sans JP", serif;
}

/* ブレイクポイント出し分け
----------------------------------------------------*/
/* スクリーンリーダー用 */
.for-ScreenReader {display: none;}

.distribute {
  display: none;
  /* 未満 */
  &.under480 {
    @media (width < 480px) {
      display: block;
    }
  }
  &.under770 {
    @media (width < 770px) {
      display: block;
    }
  }
  &.over480 {
    @media (480px <= width) {
      display: block;
    }
  }
}

/* 汎用クラス
----------------------------------------------------*/
.c2 {
	background-color: #ccc;
	--end-size: calc(var(--e-size) / 2);
}
.tac{ text-align: center;}

/* ボタン */
.btn {
	display: inline-block;
	--px-s: 32;
	--px-e: 40;
	--py-s: 16;
	--py-e: 20;
	background-color: #353535;
	color: #efefef;
	border-radius: 5px;
	text-decoration: none;
	transition-property: background-color,color;
	transition-duration: 0.3s;
	&:hover {
		background-color: #efefef;
		color: #353535;
	}
}


/* レイアウト
----------------------------------------------------*/
.innerContainer {
	--px-s: 12;
	--px-e: 24;
	--pt-s: 60;
	--pt-e: 160;
	--pb-s: 60;
	--pb-e: 160;
	max-width: calc(var(--base-Container) * 1px);
	margin-inline: auto;
}

/* スクロールトリガー
----------------------------------------------------*/
/* .fp-viewing-access [data-area="access"],
.fp-viewing-profile [data-area="profile"] {
	background-color: #f9f9f9;
	transition-property: background-color;
	transition-duration: 3s;
} */
[data-area="philosophy"],
[data-area="access"],
[data-area="profile"] {
	background-color: #f9f9f9;
}

/* ヘッダー
----------------------------------------------------*/
header {
	position: sticky;
	top: 0;
	z-index: 95;
	background-color: rgb(255 255 255 / 0.9);
	& .innerContainer {
		--pt-s: 8;
		--pt-e: 20;
		--pb-s: 8;
		--pb-e: 20;
		& > div {
			position: relative;
		}
		& h1 {
			width: 40%;
			max-width: 349px;
			@media (width > 770px) {
				width: 100%;
			}
		}
	}
}
& nav {
	& .menuButton {
		position: absolute;
		right: 0;
		top: 0.4vw;
		z-index: 99;
		& #menuBtn {
			display: block;
			width: 36px;
			height: 36px;
			background: url(../img/menu.svg) no-repeat center center/cover;
			text-indent: -9998px;

		}
		@media (width > 770px) {
			display: none;
		}
	}
	& .gnav {
		& li {
			text-transform: uppercase;
			& a {
				text-decoration: none;
				color: #353535;
				&:hover {
					color: coral;
					text-decoration: underline;
				}
			}
		}
		@media (width <= 770px) {
			background: #ccc;
			position: fixed;
			left: 0;
			top: -100dvh;
			width: 100dvw;
			height: 100dvh;
			z-index: 80;
			display: flex;
			flex-direction: column;
			row-gap: 1.5em;
			justify-content: center;
			align-items: center;
		}
		@media (width > 770px) {
			display: flex;
			justify-content: flex-end;
			column-gap: 1em;
			--fs-s: 12;
			--fs-e: 16;
		}
	}
}

/**/
.menuOpen {
	height: 100vh;
	overflow: hidden;

	& .menuButton {
		position: fixed;
		right: 20px;
		top: 20px;
		& #menuBtn {
			width: 32px;
			height: 32px;
				filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(299deg) brightness(103%) contrast(101%);
			background-image: url(../img/close.svg);
		}
	}

	& .gnav {
		left: 0;
		top: 0dvh;
		transition-property: top;
		transition-duration: 0.4s;

	}

}


/* フッター
----------------------------------------------------*/
footer {
	background-color: #353535;
	color: #efefef;
	& .innerContainer {
		--pt-s: 12;
		--pt-e: 24;
		--pb-s: 12;
		--pb-e: 24;
	}
}

/* セクション共通
----------------------------------------------------*/
section {
	position: relative;
	& h2 {
		--mb-s: 40;
		--mb-e: 80;
		text-transform: uppercase;
		--fs-s: 24;
		--fs-e: 72;
		& .ja {
			display: block;
			--fs-s: 16;
			--fs-e: 24;
		}
	}
}
.onColor {
	background-color: aliceblue;
}
/* .onImage {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	&.fix {
		background-attachment: fixed;
	}
	&.umi {
		background-image: url(../img/A7C00560.jpg);
	}
} */

/* ヒーロー
----------------------------------------------------*/
.heroSection {
	& .hero img {
		width: 100%;
		object-fit: cover;
	}
}


/* PHILOSOPHY
----------------------------------------------------*/
.philosophySection {
	& h2 {
	}
	& .philosophy {
		--fs-s: 16;
		--fs-e: 36;
		font-weight: 700;
		margin-bottom: 1.2em;
	}
	& .explanation {
		line-height: 2em;
	}
}

/* PROSPECTUS
----------------------------------------------------*/
.prospectusSection {
	& .innerContainer {
		max-width: 960px;
		& > section {
			padding-bottom: 2em;
			border-radius: 5px;
			box-shadow: 0px 0px 16px hsl(0deg 0% 8% / 18%);
			&:not(:last-of-type) {
				margin-bottom: 4.8em;
			}
			& > * {
				padding-inline: 2em;
				@media (width > 480px) {
					padding-inline: 2.98em;
				}
			}
			& > section {
				&:not(:last-of-type) {
					margin-bottom: 3.2em;
				}
				& > section {
					&:not(:last-of-type) {
						margin-bottom: 2.8em;
					}
					& > section {
						margin-bottom: 1.6em;
						/* & p {
							margin-bottom: 1.6em;
						} */
					}
				}
			}
		}
	}

	& h2 {
		--mb-s: 70;
		--mb-e: 100;

	}
	& h3 {
		--fs-s: 24;
		--fs-e: 36;
		position: relative;
		font-weight: 700;
		margin-bottom: 0.8em;
		background: #000000;
		color: #ffffff;
		padding: 30px 20px 30px;
		border-radius: 5px 5px 0 0;
		text-align: center;
		font-weight: 400;
		letter-spacing: 0.04em;
		& .circle {
			display: inline-block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #ffffff;
			text-align: center;
			line-height: 49px;
			color: black;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 27px;
			font-family: "Noto Serif JP", serif;
			box-shadow: 0px 0px 5px 5px rgba(95, 99, 104, .38);
		}
	}
	& h4 {
		--fs-s: 20;
		--fs-e: 30;
		font-weight: 600;
		position: relative;
		width: fit-content;
		margin: 4em auto 2em;
		padding:5px 18px;
		letter-spacing: 0.04em;
		text-align: center;
		& span {
			position: absolute;
			display: block;
			width: 100%;
			text-align: center;
			top: -56px;
			left: 0;
			color: #d6d6d6;
			font-size: 38px;
			font-weight: 300;
			text-transform: uppercase;
		}
		&::before, &::after {
			position: absolute;
			top: 0;
			content:'';
			width: 8px;
			height: 100%;
			display: inline-block;
		}
		&::before{
			border-left: solid 1px black;
			border-top: solid 1px black;
			border-bottom: solid 1px black;
			left: 0;
		}
		&::after{
			content: '';
			border-top: solid 1px black;
			border-right: solid 1px black;
			border-bottom: solid 1px black;
			right: 0;
		}
	}

	& h5 {
		--fs-s: 18;
		--fs-e: 22;
		font-weight: 700;
		margin-bottom: 0.5em;
	}
	& h6 {
		display: inline-block;
		margin-bottom: 0.5em;
		padding: 4px 10px;
		font-weight: 500;
		font-size: 15px;
        border-left: 3px solid #000;
        background: #eeeeee;
	}
	& p {
		margin-bottom: 1.6em;
		line-height: 1.6em;
	}
	& ul,ol {
		margin-bottom: 1.6em;
	}
	& dl {
		padding-bottom: 0.1em;
		& div {
			margin-bottom: 1.6em;
			& dt {
				--fs-s: 18;
				--fs-e: 22;
				font-weight: 700;
			}
			& dd {
				margin: 0.4em 0 0 0.8em;
			}
		}
	}
	& .graybox {
		background-color: #f9f9f9;
		padding: 1em 1.2em 0.1em;
		line-height: 1.8em;
	}
	& ol.graybox {
		padding-bottom: 1.2em;
	}
}


/* 横スクロール
----------------------------------------------------*/
.horizontal_scroll {
	--sticky-container-height: 100vh;
	height: var(--sticky-container-height);
	min-height: 100vh;
	box-sizing: border-box;
	& .sticky {
		position: sticky;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
	}
	& .scroller {
		display: flex;
		overflow: auto;
		padding-left: 36%;
		&.nobar {
			overflow: hidden;
		}
		& > * {
			flex-basis: 50%;
			flex-shrink: 0;
			aspect-ratio: 16 / 8;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: whitesmoke;
			padding-block: 1em;
			padding-inline: 2em;
			& > h3 {
				font-size: 32px;
				margin-bottom: 1em;
			}
		}
		& > *:not(:first-child) {
			margin-left: 4%;
		}
	}
}


/* プロフィール
----------------------------------------------------*/
.profileSection {
	& h2 {
		--mb-s: 20;
		--mb-e: 80;
	}
	& h3 {
		--fs-s: 24;
		--fs-e: 36;
		& span {
			--fs-s: 18;
			--fs-e: 28;
		}
	}
	& img {
		width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
	}
	& .profile {
		margin: 1em 0;
	}
	& .history li:not(:last-of-type) {
		margin-bottom: 0.4em;
	}
}


/* COMPANY
----------------------------------------------------*/
.companySection {
	& h2 {

	}
}
.companyTable {
	max-width: 940px;
	width: 96%;
	margin-inline: auto;
	& th {
		width: 8em;
		background-color: #f9f9f9;
		text-align: center;
		vertical-align: middle;
		padding: 0.8em;
		border: 1px solid #dedede;
	}
	& td {
		border: 1px solid #dedede;
		padding: 0.8em 1.2em;
	}
}


/* access
----------------------------------------------------*/
.accessSection {
	& h2 {
		--mb-s: 20;
		--mb-e: 80;
	}
}


/* contact
----------------------------------------------------*/
.contactSection {
	& .innerContainer {
		padding-bottom: 10px;
		& h2 {

		}
		& iframe {
			margin: 0 auto;
			display: block;
			width:100%;
			max-width:960px;
			height: 1400px;
			overflow: hidden;
			border: 0;
			background-color:transparent;
			@media (width < 480px) {
				height: 1320pxpx;
			}
		}
	}
}