@charset "UTF-8";
@import url(reset.css);
/*------------------------------------------
	fonts
-------------------------------------------*/
@font-face {
	font-family: "NotoSansJP";
	src:
	local("NotoSansJP"),
	url("../../fonts/NotoSansJP-Medium.woff") format("woff");
	font-weight: normal; 
	font-style: normal;
}
@font-face {
	font-family: "NotoSansJP";
	src:
	local("NotoSansJP"),
	url("../../fonts/NotoSansJP-Bold.woff") format("woff");
	font-weight: bold; 
	font-style: normal;
}
@font-face {
	font-family: "FuturaPTHeavy";
	src:
	local("FuturaPTHeavy"),
	url("../../fonts/FuturaPTHeavy.woff") format("woff");
	font-weight: 900; 
	font-style: normal;
}


* html body {
	background: url(null) fixed;
}
html, body {
	width: 100%;
	margin: 0;
	padding: 0;
}
html {
	overflow-x: hidden;
	font-size: 10px;
}
body {
	position: relative;
	font-family: "NotoSansJP";
	font-weight: normal;
	font-size: 1.6rem;
	line-height: 1.6;
	color: #222;
	overflow: hidden;
	background-color: #fff;
	-webkit-text-size-adjust: 100%;
}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-backface-visibility: hidden;
}
*:focus {
	outline: none;
}
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}
a {
	display: block;
	color: #222;
	text-decoration: none;
	transition: 0.6s;
}
a:hover {
	text-decoration: none;
	opacity: 0.8;
	transition: 0.4s;
}
a img:hover {
	text-decoration: none;
	opacity: 0.6;
	transition: 0.4s;
}
main {
}

.pcnone {
	display: none;
}
@media (max-width: 890px) {
	.pcnone {
		display: block;
	}
	.spnone {
		display: none;
	}
}
/*------------------------------------------
	flox
-------------------------------------------*/
.f-mgb-mini {
	margin-bottom: 25px;
}
.f-mgb-small {
	margin-bottom: 30px;
}
.f-mgb-mid {
	margin-bottom: 50px;
}
.f-mgb-lage {
	margin-bottom: 80px;
}
.u-flex_sb {
	display: flex;
	justify-content: space-between;
}
/*------------------------------------------
	effect
-------------------------------------------*/
[data-load=loaded1] {
	animation: fade-up 0.6s cubic-bezier(0.3, 0.09, 0.37, 0.77) 0.6s forwards;
}
[data-load=loaded2] {
	animation: fade-up 0.8s cubic-bezier(0.3, 0.09, 0.37, 0.77) 0.8s forwards;
}
[data-load=loaded3] {
	animation: fade-up 1.0s cubic-bezier(0.3, 0.09, 0.37, 0.77) 1.0s forwards;
}
[data-target=on] {
	animation: fade-up 1.2s cubic-bezier(0.3, 0.09, 0.37, 0.77) 1.0s forwards;
}
[data-load=loadedr] {
	animation: fade-in-right 0.8s cubic-bezier(0.3, 0.09, 0.37, 0.77) forwards
}
[data-load=loadedl] {
	animation: fade-in-left .6s cubic-bezier(0.3, 0.09, 0.37, 0.77) forwards
}
@keyframes fade-in {
  0% {
    opacity: 0;
    visibility: hidden
  }
  100% {
    opacity: 1;
    visibility: visible
  }
}
@keyframes fade-up {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 1.6em)
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0)
  }
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-10%, 0)
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0)
  }
}
@keyframes fade-in-right {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate(10%, 0)
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0)
  }
}

.fadein {
	opacity : 0;
	transform : translate(0, 60px);
	transition : all 800ms;
	}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
.fadeinleft {
	opacity : 0;
	transform : translate(-100px, 0);
	transition : all 1000ms ease-out;
	}
.fadeinleft.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
.fadeinright {
	opacity : 0.1;
	transform : translate(100px, 0);
	transition : all 1000ms ease-out;
	}
.fadeinright.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
/*------------------------------------------
	header
-------------------------------------------*/
header {

}


/*------------------------------------------
見出し
-------------------------------------------*/
.inner {
	margin: 0 auto;
	max-width: 1100px;
	width: 95%;
}
.flex-sb_rw {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
/*------------------------------------------
もっと見るボタン
-------------------------------------------*/


/*------------------------------------------
トップページ
-------------------------------------------*/

    /* 上部セクション：人々の輪と理念 */
.home .top-section {
	position: relative;
	margin-bottom: 120px;
	width: 100%;
	height: auto;
	text-align: center;
}
@media (max-width: 890px) {
	.home .top-section {
		position: relative;
		margin-bottom: 60px;
		width: 100%;
		height: auto;
		text-align: center;
	}
}
.home .top-section > img {
	width: 100%;
	min-height: 900px;
	object-position: center;
}
@media (max-width: 890px) {
	.home .top-section > img {
		width: 100%;
		min-height: 690px;
		object-position: center;
	}
}
@keyframes turnleft {
  0% {
	transform: rotate(0)
  }
  100% {
	transform: rotate(-360deg);
  }
}
.home .turnright {
	animation: turnleft 20s linear infinite;
}
.home .main-copy-wrapper {
	position: absolute;
	margin: 0 auto 40px;
	top: 50%;
	left: 0;
	right: 0;
	width: 55%;
	height: auto;
	aspect-ratio:1/1;
	transform: translateY(-50%);
}
@media screen and (min-width:890px) and ( max-width:1300px) {
	.home .main-copy-wrapper {
		position: absolute;
		margin: 0 auto 40px;
		top: 50%;
		left: 50%;
		right: 0;
		max-width: 760px;
		width: 120%;
		transform: translate(-50%,-50%);
	}
}
@media (max-width: 890px) {
	.home .main-copy-wrapper {
		position: absolute;
		margin: 0 auto 40px;
		top: 50%;
		left: 50%;
		right: 0;
		max-width: 760px;
		width: 120%;
		transform: translate(-50%,-50%);
	}
}
.home .sub_texterea {
	position: absolute;
	top: calc(50% + 15px);
	left: 0;
	right: 0;
	transform: translateY(-50%);
}
.home .sub-copy {
	margin-bottom: 30px;
	font-size: clamp(1.5rem, 3.5vw, 1.9rem);
	font-weight: bold;
	line-height: 2;
}
@media (max-width: 890px) {
	.home .sub-copy {
		font-weight: bold;
		margin-bottom: 10px;
		line-height: 1.4;
	}
}
.home .sub-copy p {
	opacity: 0
}
.home .vertical-line {
	margin: 0 auto 10px;
	width: 2px;
	height: 40px;
	background-color: #222;
	
}
@media (max-width: 890px) {
	.home .vertical-line {
		margin: 0 auto 10px;
		width: 1px;
		height: 20px;
		background-color: #222;

	}
}
.home .scroll-text {
	font-size: 1.6rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}
@media (max-width: 890px) {
	.home .scroll-text {
		font-size: 1.2rem;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
}

    /* 中間セクション：OKAYA GHD 始動 */
.home .middle-section {
	margin-bottom: 100px;
	text-align: center;
	background-color: #fff;
}
@media (max-width: 890px) {
	.home .middle-section {
		margin-bottom: 40px;
		text-align: center;
		background-color: #fff;
	}
}
.home .ghd-title {
	margin-bottom: 86px;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
@media (max-width: 890px) {
	.home .ghd-title {
		margin: 0 auto 10px;
		width: 75%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: baseline;
		flex-flow: row wrap;
	}
}
.home .ghd-title .item {
	width: calc(100%/2 - 20px);
}
@media (max-width: 890px) {
	.home .ghd-title .item {
		margin-bottom: 30px;
		width: 100%;
	}
}

.home .company-logos {
	margin: 0 auto;
	max-width: 900px;
	width: 95%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.home .company-logos .company-name img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.home .company-logos.logoarea_a {
	margin-bottom: 30px;
}
@media (max-width: 890px) {
	.home .company-logos.logoarea_a {
		margin-bottom: 0;
	}
}
.home .company-logos.logoarea_b {
	margin: 0 auto;
	max-width: 685px;
	width: 95%;
}
@media (max-width: 890px) {
	.home .company-logos,
	.home .company-logos.logoarea_b {
		margin: 0 auto;
		min-width: 180px;
		width: 50%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
}
.home .company-logos .company-name {
	margin-left: 40px;
}
@media (max-width: 890px) {
	.home .company-logos .company-name {
		margin-left: 0;
		margin-bottom: 3vw;
	}
}
.home .company-logos .company-name:first-child {
	margin-left: 0px;
}
.home .company-logos .company_01 {
	width: 189px;
	height: auto;
	aspect-ratio: 189/31;
}
.home .company-logos .company_02 {
	width: 215px;
	height: auto;
	aspect-ratio: 215/29;
}
.home .company-logos .company_03 {
	width: 147px;
	height: auto;
	aspect-ratio: 147/32;
}
.home .company-logos .company_04 {
	width: 223px;
	height: auto;
	aspect-ratio: 223/21;
}
.home .company-logos .company_05 {
	width: 209px;
	height: auto;
	aspect-ratio: 209/20;
}
.home .company-logos .company_06 {
	width: 161px;
	height: auto;
	aspect-ratio: 161/20;
}
.home .company-logos .company_07 {
	width: 230px;
	height: auto;
	aspect-ratio: 230/15;
}
@media (max-width: 890px) {
	.home .company-logos .company_01 {
		max-width: 189px;
		width: 80%;
		height: auto;
		aspect-ratio: 268/44;
	}
	.home .company-logos .company_02 {
		max-width: 215px;
		width: 95%;
		height: auto;
		aspect-ratio: 306/41;
	}
	.home .company-logos .company_03 {
		max-width: 147px;
		width: 62%;
		height: auto;
		aspect-ratio: 208/45;
	}
	.home .company-logos .company_04 {
		max-width: 223px;
		width: 98%;
		height: auto;
		aspect-ratio: 317/30;
	}
	.home .company-logos .company_05 {
		max-width: 209px;
		width: 90%;
		height: auto;
		aspect-ratio: 297/28;
	}
	.home .company-logos .company_06 {
		max-width: 161px;
		width: 70%;
		height: auto;
		aspect-ratio: 230/28;
	}
	.home .company-logos .company_07 {
		max-width: 230px;
		width: 100%;
		height: auto;
		aspect-ratio: 326/68;
	}
	/*.home .company-logos .company_01 {
		width: 140px;
		height: auto;
		aspect-ratio: 268/44;
	}
	.home .company-logos .company_02 {
		width: 160px;
		height: auto;
		aspect-ratio: 306/41;
	}
	.home .company-logos .company_03 {
		width: 100px;
		height: auto;
		aspect-ratio: 208/45;
	}
	.home .company-logos .company_04 {
		width: 160px;
		height: auto;
		aspect-ratio: 317/30;
	}
	.home .company-logos .company_05 {
		width: 160px;
		height: auto;
		aspect-ratio: 297/28;
	}
	.home .company-logos .company_06 {
		width: 120px;
		height: auto;
		aspect-ratio: 230/28;
	}
	.home .company-logos .company_07 {
		width: 200px;
		height: auto;
		aspect-ratio: 326/68;
	}*/
}


/* 下部セクション：青空のメインビジュアル */
.home .hero-section {
	position: relative;
	padding: 50px 20px 50px;
	 color: #fff;
	text-align: center;
	background: url("../../img/top/hero-section_bg.jpg") top center no-repeat;
	background-size: cover;
}
@media (max-width: 890px) {
	.home .hero-section {
		position: relative;
		padding: 25px 20px 30px;
		 color: #fff;
		text-align: center;
		background: url("../../img/top/sp_hero-section_bg.jpg") top center no-repeat;
		background-size: cover;
	}
}

.home .start-date {
	margin-bottom: 70px;
	font-family: "FuturaPTHeavy";
	font-size: clamp(4.2rem, 8.0vw, 8.0rem); 
	font-weight: 900;
	letter-spacing: 2px;
	opacity: 0;
}
@media (max-width: 890px) {
	.home .start-date {
		margin-bottom: 50px;
		font-family: "FuturaPTHeavy";
		font-weight: 900;
		letter-spacing: 2px;
		opacity: 0;
	}
}
.home .message-box {
	margin-bottom: 80px;
	line-height: 2.2;
	font-weight: 500;
}
@media (max-width: 890px) {
	.home .message-box {
		margin-bottom: 50px;
		line-height: 2.1;
		font-weight: 500;
	}
}
.home .message-box p {
	opacity: 0;
}
.home .ghd-logo-white {
	margin-bottom: 40px;
	opacity: 0;
}
@media (max-width: 890px) {
	.home .ghd-logo-white {
		margin-bottom: 20px;
		opacity: 0;
	}
}
.home .ghd-logo-text {
	margin: 0 auto;
	width: 180px;
	width: clamp(140px, 60vw, 180px);
	height: auto;
}
@media (max-width: 890px) {
	.home .ghd-logo-text {
		margin: 0 auto;
		width: 140px;
		height: auto
	}
}
.home .representative {
	margin-bottom: 570px;
	opacity: 0
}
@media (max-width: 890px) {
	.home .representative {
		margin-bottom: 530px;
		opacity: 0
	}
}
.home .representative .campany {
	font-size: 1.2rem;
}
.home .representative .name {
   font-size: 1.9rem;
}
.home .representative .name span {
   font-size: 1.6rem;
}
@media (max-width: 890px) {
	.home .representative .name span {
	   font-size: 1.4rem;
	}
}
.home .coming-soon {
	font-size: clamp(3.4rem, 6.0vw, 6.0rem);
	font-weight: bold;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	line-height: 1.2;
}

    /* フッター */
footer {
	padding: 10px 0 15px;
	background-color: #222;
}
@media (max-width: 890px) {
	footer {
		padding: 20px 0 18px;
		background-color: #222;
	}
}
.footer_wrapper {
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: center;
	font-weight: bold;
	letter-spacing: 1px;
}
@media (max-width: 890px) {
	.footer_wrapper {
		color: #fff;
		display: flex;
		justify-content: space-around;
		flex-flow: row wrap;
		align-items: center;
		align-self: center;
	}
}
.footer-company {
	font-size: 1.9rem;
	font-weight: bold;
}
.contact-info {
	font-size: 1.6rem;
}
@media (max-width: 890px) {
	.footer-company {
		margin-bottom: 5px;
		font-size: 1.6rem;
		font-weight: bold;
	}
	.contact-info {
		font-size: 1.4rem;
		text-align: center;
		font-weight: normal;
	}
}

/*------------------------------------------
ドロップダウン
-------------------------------------------*/


/*------------------------------------------
title
-------------------------------------------*/