@charset "UTF-8";

/* -----PCとSP表示切り替え----- */
.pc { display: none !important; }
.sp .hamburger { display: block !important; }





/* -----エフェクト----- */
.scroll-fade{opacity: 0; transition: all 1s/*処理にかかる時間*/;}

.scroll-up{opacity: 0; transform: translatey(25px)/*スクロールアップする距離*/; transition: all 1s/*処理にかかる時間*/;}

.scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}

.load-fade {opacity : 0; transition : all 1.5s/*処理にかかる時間*/;}

.load-up{opacity: 0; transform: translateY(50px)/*スクロールアップする距離*/; transition: all 1.5s/*処理にかかる時間*/;}

.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}





/* -----マージン----- */
* {	margin: 0px;
	padding: 0px;}

/* -----FONT----- */
body	{font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	text-align: left;
	color: #000000;
	line-height: 1.8;
	letter-spacing: 0.1em;
}



/* -----header----- */
.header	{position: relative;
	margin-bottom:20%;
}

.header h1	{position: relative;
	top: 25px;
	left: 7%;
	width: 93%;
	z-index: 100;
}

.header a	{
	text-decoration: none;
	color: #111;
}

.name-e	{font-family: 'Inter', sans-serif;
	font-weight:500;
	display: block;
	font-size: 15px;
	letter-spacing: 0.1em;}

.name-j	{font-family: 'Noto Sans JP', sans-serif;
	font-weight:100;
	display: block;
	font-size: 12px;
	letter-spacing: 0.52em;}

.header h2	{position: relative;
	margin-top: 97%;
	left: 7%;
	width: 93%;
	z-index: 101;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:300;
	font-size: 5vw;
	letter-spacing: 0.00em;}

.main-visual	{position: absolute;
	margin-top:15%;
	width: 100%;
	height: auto;}


/* ###-----scroll line-----### */
.scroll-line	{
	height: 50px;
	overflow: hidden;
	margin-bottom:10%;
}

.scroll-line:after{
	content:"";
	display: block;
	width: 1px;
	border-left:1px #000 solid;
	animation:scroll 2s ease 0s infinite normal;
	margin-left: 15%;}

@keyframes scroll{
	0%{
	height: 0;}

	50%{
	height: 50px;
	margin-top: 0;}

	100%{
	margin-top: 100px;
	height: 0px;}
	}










/* -----menu----- */
.sp {/* メニューを隠す */
	position: fixed;
	top: 0;
	width: 100vw; 
	height: 100vh;
	padding-top: 60px;
	background-color: #fff;
	transition: all .3s;
	z-index: 200;
	opacity: 0;
	visibility: hidden;
}

.hamburger {/* バーガーの位置 */
	position: absolute;
	right: 0;
	top: 22px;
	width: 60px; 
	height: 60px; 
	z-index: 300;
}
.global-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.global-nav__item {
	text-align: center;
}
.global-nav__item a {
font-family: 'Inter', sans-serif;
	display: block;
	padding: 15px 0;
	text-decoration: none;
	color: #111;
}
.global-nav__item a:hover {
  background-color: #FFF231;
}
.hamburger__line {
  position: absolute;
  left: 11px;
  width: 28px;
  height: 2px;
  background-color: #000;
  transition: all .3s;
}
.hamburger__line--1 {
  top: 10px;
}
.hamburger__line--2 {
  top: 16px;
}
.hamburger__line--3 {
  top: 22px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
}
/* 表示された時用のCSS */
.nav-open .sp {
  right: 0;
  opacity: .8;
  visibility: visible;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;

}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
	background :#fff;}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
	background :#fff;}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
	background :#fff;}









/* -----service----- */
.service	{
	position: relative;
	margin-bottom: 25%;}

.service h1	{
	font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size: 24px;
	margin-left: 62%;}

.service-inner	{
	display: flex;
	width: 100%;}

.service-l	{
	width: 60%;
	margin-right: 3%;}

.service-r	{
	width: 37%;}

.service-01	{
	width: 85%;
	margin-top: -25%;
	margin-right: 15%;
	margin-bottom: 7%;}

.service-02	{
	width: 60%;
	margin-left: 35%;
	padding-top: 0;}

.service-03	{padding-top: 15px;
	width: 100%;}

.service-arrow	{
	position: absolute;
	bottom: 0%;
	right: 5%;
	width: 15vw;
}

.service::after {
	content: '';
	display: block;
	position: absolute;
	top: 7%;
	left: 0;
	width: 80%;
	height: 70%;
	background-color: #FFF231;
	z-index: -100;}






/* -----works----- */
.works	{
	position: relative;
	margin-bottom: 25%;}

.works h1	{
	font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size: 24px;
	margin-left: 5%;
}

.works-inner	{
	display: flex;
	position: relative;
	width: 100%;}

.works-color	{
	width: 20%;
	margin-right: 2.5%;
	background-color: #FFF231;}

.works-list	{
	margin-right: 2.5%;
}

.work img{
	width: 100%;
	margin-top: 5%;
}


.works-arrow		{
	position: absolute;
	bottom: -4%;
	right: 5%;
	width: 15vw;}







/* -----about----- */
.about	{
	position: relative;
	margin-bottom: 25%;}

.about-inner	{
	display: flex;
	width: 100%;
	margin: 0 auto;}

.about-l	{
	width: 55%;
	margin-right: 5%;}

.about-r	{
	width: 40%;}

.about-01	{
	width: 100%;
	margin-top: -25%;}

.about-02	{
	width: 90%;
	padding-top: 10%;}

.about h1	{
	font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size: 24px;
	margin-left: 65%;}

.about-arrow	{
	position: absolute;
	bottom: -20%;
	right: 5%;
	width: 15vw;}

.about::after {
	content: '';
	display: block;
	position: absolute;
	top: 12%;
	left: 0;
	width: 90%;
	height: 70%;
	background-color: #FFF231;
	z-index: -100;}

#photo {
    position: relative;
}

#photo img {
    position: absolute;
}




/* -----contact----- */
.contact	{
	margin-bottom: 30%;
	text-align: center;}

.contact h1	{font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size: 24px;
	margin-bottom:0%;}

.contact-inner	{
	position: relative;}


.contact p	{
	line-height: 1.2;
	letter-spacing: 0em;
	font-size: 11px;}

.contact-f img	{
	width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}

.contact-inner::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: #FFF231;
	z-index: -100;}



/* -----footer----- */
.footer	{margin-bottom: 50px;}



.footermenu	{
	margin-left: 10%;}

.footermenu ul	{margin: 0px;
	padding: 0;
	list-style: none;}

.footermenu li a	{display: block;
	color: #000000;
	padding: 2px;
	font-size: 14px;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight:500;}


.copyrignt	{
	margin-left: 10%;
	margin-top: 20%;}


.copyrignt p	{font-size: 8px;
	margin-top: 0.5%;}


.copyrignt a{
	text-decoration: none;
	color: #111;}





















































/* ##########  tablet 500px - 799px  ########## */
@media (min-width: 500px) {

/* -----PCとSP表示切り替え----- */
.pc { display: block !important; }
.sp, .hamburger { display: none !important; }



/* -----header----- */
.header	{
	margin-bottom:30%;}

.header h1	{
	top: 40px;
	left: 10%;
	width: 90%;
}

.name-e	{
	font-weight:400;
	font-size: 16px;
	letter-spacing: 0.025em;}

.name-j	{
	font-size: 12px;
	letter-spacing: 0.52em;}


.header h2	{
	margin-top: 250px;
	left: 10%;
	width: 90%;
	font-size: 22px;
	letter-spacing: 0.1em;}

.main-visual	{
	margin-top: 0%;
	top: 0;
	right: 0;
	width: 58%;}



/* -----menu----- */
.pc	{
	margin-bottom: 0%;
	padding-bottom: 100px;}

.pc ul	{margin-top: 200px;
	padding-left: 10%;
	list-style: none;}

.pc li a	{display: inline-block;
	padding-right: 80px;
	font-size: 1.5vw;
	font-family: 'Inter', sans-serif;
	font-weight:400;
	color: #000000;	/* マウスオーバーアニメーション対象の初期設定の値 */
	transition: 0.3s;	/* マウスオーバーアニメーションの指定 */
	text-decoration: none;
}

.pc ul a:hover	{
	color: #E8E8E8;}/* マウスオーバーアニメーション最終状態（到達点）の設定を */

.pc ul:after	{content: "";
	display: block;
	clear: both;}

.pc li	{float: left;
	width: auto;}




/* ###-----scroll line-----### */
.scroll-line	{
	height: 250px;
	overflow: hidden}

.scroll-line:after{
	content:"";
	display: block;
	width: 1px;
	border-left:1px #000 solid;
	animation:scroll 2s ease 0s infinite normal;
	margin-left: 80%;}

@keyframes scroll{
	0%{
	height: 0;}

	50%{
	height: 150px;
	margin-top: 0;}

	100%{
	margin-top: 200px;
	height: 0px;}
	}



/* -----service----- */
.service h1	{
	font-weight:400;
	font-size: 20px;
	margin-left: 65%;}

.service-inner	{
	display: flex;
	width: 80%;
	margin: 0 auto;}

.service-l	{
	width: 62%;
	margin-right: 3%;}

.service-r	{
	width: 35%;}

.service-01	{
	width: 85%;
	margin-top: -7%;
	margin-right: 15%;
	margin-bottom: 7%;}

.service-02	{
	width: 50%;
	margin-left: 50%;
	padding-top: 0;}

.service-03	{padding-top: 80px;
	width: 90%;
	margin-right: 10%;}

.service-arrow	{
	position: absolute;
	top: 1%;
	right: 5%;
	width: 5vw;}

.service::after {
	content: '';
	display: block;
	position: absolute;
	top: 7%;
	left: 0;
	width: 80%;
	height: 80%;
	background-color: #FFF231;
	z-index: -100;}






/* -----works----- */
.works	{
	position: relative;
	margin-bottom: 25%;}

.works h1	{
	font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size: 20px;
	margin-left: 15%;
}

.works-inner	{
	display: flex;
	position: relative;
	width: 90%;
	margin-top:0%;}

.works-color	{
	width: 25%;
	margin-right: 5%;
	background-color: #FFF231;}

.works-list	{
	width: 70%;
	margin-right: 0%;
}

.work{
	float: left;
	width: 47.5%;}

.work img{
	width: 100%;
	height:auto;}

.works-list .work:nth-child(odd) {
	padding-right: 2.5%;
	padding-bottom: 5%;}

.works-list .work:nth-child(even) {
	padding-left: 2.5%;
	padding-bottom: 5%;}




.works-arrow		{
	position: absolute;
	top: 1%;
	right: 5%;
	width: 5vw;}




/* -----about----- */
.about	{
	position: relative;
	margin-bottom: 25%;}

.about-inner	{
	display: flex;
	width: 80%;
	margin: 0 auto;}

.about-l	{
	width: 50%;
	margin-right: 5%;}

.about-r	{
	width: 45%;}

.about-01	{
	width: 90%;
	margin-top: -12%;}

.about-02	{
	width: 70%;
	padding-top: 10%;}

.about h1	{font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size: 20px;
	margin-left: 65%;}

.about-arrow	{
	position: absolute;
	top: 1%;
	right: 5%;
	width: 5vw;}

.about::after {
	content: '';
	display: block;
	position: absolute;
	top: 12%;
	left: 0;
	width: 90%;
	height: 75%;
	background-color: #FFF231;
	z-index: -100;}



/* -----contact----- */
.contact	{
	margin-bottom: 20%;
	text-align: center;}

.contact h1	{font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size: 20px;
	margin-bottom:1%;}

.contact-inner	{
	position: relative;}


.contact p	{
	line-height: 1.8;
	letter-spacing: 0.1em;
	font-size: 14px;}

.contact-f img	{
	width: 45%;
	margin-top: 60px;
	margin-bottom: 60px;}

.contact-inner::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 130%;
	background-color: #FFF231;
	z-index: -100;}



/* -----footer----- */
.footer	{margin-bottom: 100px;}


.footermenu	{float:left;
	margin-left: 10%;}

.footermenu ul	{margin: 0px;
	padding: 0;
	list-style: none;}

.footermenu li a	{display: block;
	padding: 10px;
	color: #000000;
	font-size: 20px;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight:500;}


.copyrignt	{float:right;
	margin-right: 14%;
	margin-top: 0%;}


.copyrignt p	{font-size: 13px;
	margin-top: 40%;}

.copyrignt a	{	text-decoration: none;
	color: #111;}


.footer::after {content: "";
	display: block;
	clear: both;}



}





/* ##########  PC 800px以上  ########## */
@media (min-width: 800px) {
/* 全体の横幅を固定 */
.header, .menu, .service, .works, .about, .contact, .footer;
	{
	margin-left: auto;
	margin-right: auto}


/* -----header----- */
.name-e	{
	font-size: 25px;}

.name-j	{
	font-size: 15px;}

.header h2	{
	font-size: 32px;}




/* -----service----- */
.service h1	{
	font-size: 30px;}



/* -----works----- */
.works h1	{
	font-size: 30px;}



/* -----about----- */
.about h1	{
	font-size: 30px;}



/* -----contact----- */
.contact h1	{
	font-size: 30px;}
}