@charset "UTF-8";
:root {

/* Colors: */
--white: #FFFFFF;
--base-color: #C5E3D0;
--blue: #3B82C4;
--sub-color1: #E0F8E7;
--sub-color2: #BAE9E9;
--unnamed-color-707070: #707070;
--unnamed-color-909090: #909090;
--unnamed-color-dcdcdc: #DCDCDC;
--unnamed-color-d6e7ff: #D6E7FF;

/* Font/text values */
--unnamed-font-family-source-han-sans-jp: Source Han Sans JP;
--unnamed-font-family-fira-sans: Fira Sans;
--unnamed-font-style-normal: normal;
--unnamed-font-weight-300: 300px;
--unnamed-font-weight-normal: normal;
--unnamed-font-size-12: 12px;
--unnamed-font-size-15: 15px;
--unnamed-font-size-18: 18px;
--unnamed-font-size-28: 28px;
--unnamed-character-spacing-0: 0px;
--unnamed-line-spacing-21: 21px;
--unnamed-line-spacing-26: 26px;
--unnamed-line-spacing-33: 33px;
}


html {
    font-size: 100%;
}

main {
	text-align: center;
}


/* HEADER */
header {
	width: 100%;
	background-color: rgba(255, 255, 255, .9);
	height: 123px;
	position: fixed;
	z-index: 100;
}

.site-header__top {
	display: flex;
	justify-content: space-between;
}

.site-logo {
	display: inline-block;
	margin-top: 20px;
	color: var(--unnamed-color-707070);
	font-family: 'Fira Sans', sans-serif;
	font-style: var(--unnamed-font-style-normal);
	font-weight: var(--unnamed-font-weight-300);
	font-size: 30px;
	line-height: var(--unnamed-line-spacing-33);
	letter-spacing: var(--unnamed-character-spacing-0);
}

.header-line {
	border-top: 2px solid;
	margin-left: auto;
	margin-top: 5px;
	width: 100%;
	color: var(--blue);
}

.pc-navi ul {
	display: flex;
	margin-right: auto;
}


.pc-navi {
	display: inline-block;
	font-family: 'Fira Sans', sans-serif;
	font-size: 20px;
	color: var(--unnamed-color-707070);
	margin-top: 26px;
}

.pc-navi li {
	margin-left: 26px;
	position: relative;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.pc-navi li::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: all 0.3s ease 0s;
}

.pc-navi li:hover {
	cursor: pointer;
	color: var(--blue);
}

.pc-navi li:hover::after {
	width: 100%;
}


.header__bottom ul {
	display: flex;
	justify-content: flex-start;
}

.twitter {
	width: 25px;
	margin-top: 10px;
}


.youtube {
	width: 25px;
	margin-top: 10px;
	margin-left: 15px;
}

.wrapper {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 4%;
}

/* MAIN */
.mainvisual img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	margin-top: 123px;
}

/* Title fonts */

#title-font {
	display: inline-block;
	font-family: 'Fira Sans', sans-serif;
	font-style: var(--unnamed-font-style-normal);
	font-weight: var(--unnamed-font-weight-300);
	font-size: 34px;
	line-height: var(--unnamed-line-spacing-33);
	letter-spacing: var(--unnamed-character-spacing-0);
}

#title {
	display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
	padding: 34px 0;
}

#title:before, #title:after {
  border-top: 2px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
#title:before {
  margin-right: 1em; /* 文字の右隣 */
}
#title:after {
  margin-left: 1em; /* 文字の左隣 */
}

/* N-LABlance */

#nlablance {
	background-color: var(--blue);
	color: var(--white);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	padding-bottom: 21px;
}

#nlablance p {
	padding-bottom: 10px;
}

#nlablance span {
	padding: 34px 0;
	display: inline-block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
}

/* News */

#news {
	background-color: var(--white);
	color: #707070;
	font-family: 'Noto Sans JP', sans-serif;
	margin-bottom: 34px;
}

#news p {
	padding-bottom: 10px;
        font-size: 18px;
}

.caption {
        margin-bottom: 32px;
}

#news h3 {
	padding-bottom: 12px;
	font-size: 20px;
}

.movie-wrap {
	margin: 10px 0 30px 0;
}

.saisin {
	margin-bottom: 20px;
	color: #707070;
        font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
}

/* works */

#works {
	background-color: var(--blue);
	color: var(--white);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	padding-bottom: 21px;
}

#works span {
	padding-bottom: 34px;
	display: inline-block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
}


.worklist_wrapper {
	text-align: center;
	padding-bottom: 20px;
}

.worklist {
	list-style-type: circle;
	list-style-position: inside;
	display: inline-block;
	font-size: 14px;
}

.worklist li {
	padding-bottom: 18px;
}

#works h2 {
	padding-bottom: 5px;
}

#works a {
	border: 1px solid #000;
	background: var(--white);
	display: inline-block;
	margin: 20px;
	padding: 10px 50px 11px 50px;
	font-size: 18px;
	color: #707070;
	transition: all 0.3s ease 0s;
}

#works a:hover {
	background: var(--base-color);
	color: white;
}

/* Contact */

#contact {
	background-color: var(--white);
	color: #707070;
	font-family: 'Noto Sans JP', sans-serif;
	padding-bottom: 21px;
	font-size: 16px;
}

#contact h2 {
	padding-bottom: 5px;
}

.info {
	margin-bottom: 10px;
}

#contact a {
	font-size: 20px;
	display: inline-block;
	position: relative;
	text-decoration: none;
	margin: 15px 0;
	transition: all 0.3s ease 0s;
}

#contact a::after {
  position: absolute;
  content: '';
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: all 0.3s ease 0s;
}

#contact a:hover {
	cursor: pointer;
	color: var(--blue);
}

#contact a:hover::after {
	width: 100%;
}

form {
	border: 1px var(--blue) solid;
	padding: 2rem 1rem;
	margin: 1rem 8rem 3rem 8rem;
	text-align: center;
}

#name {
	width: 30rem;
}

#email {
	width: 30rem;
}

label {
	font-size: 16px;
	margin: 16px 0;
	color: #707070;
	display: block;
}

input[type="text"],
input[type="email"],
textarea {
	background: var(--white);
	border: 1px #707070 solid;
	padding: 10px;
	font-size: 12px;
}
input[type="text"],
input[type="email"],{
	width: 100%;
	max-width: 240px;
}
textarea {
	width: 100%;
	max-width: 480px;
	height:6rem;
}
input[type="submit"]{
	border: 1px #909090 solid;
	border-radius: 10px;
	cursor: pointer;
	background: var(--white);
	color: #707070;
	padding: 8px 18px;
	margin: 20px 0;
	transition: all 0.3s ease 0s;
  font-size: 14px;
}


input[type="submit"]:hover {
	background: var(--blue);
	color: white;
}

.error-msg {
  color: rgba(255,100,100);
  font-size: 14px;
  margin: 10px 0;
}

/* Notice */
#notice {
	background-color: var(--white);
	color: #707070;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	display: inline-block;
	margin-top: 123px;
}

#notice h2 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	margin: 2rem 0;
	line-height: 1.5;
}

.wrapper_2 {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 10%;
}

.info h3 {
	font-size: 20px;
	margin-bottom: 2rem;
}

.mustlist {
	text-align: left;
	list-style-type: circle;
	list-style-position: outside;

}

.mustlist li {
		margin-bottom: 2rem;
		line-height: 1.5;
}

.mustlist div {
	text-align: center;
	color: #707070;
	font-size: 18px;
	border: 1px var(--blue) solid;
	padding: 2rem 2rem;
	margin: 3rem 0;
}

.mustlist p {
	margin-bottom: 10px;
}

.warning {
	padding: 1rem;
	background: rgba(252,199,227, .2);
	line-height: 1.5;
	color: #707070;
	font-size: 18px
}


#notice a {
	font-size: 20px;
	display: inline-block;
	position: relative;
	text-decoration: none;
	margin-bottom: 3rem;
	transition: all 0.3s ease 0s;
}

#notice a::after {
  position: absolute;
  content: '';
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: all 0.3s ease 0s;
}

#notice a:hover {
	cursor: pointer;
	color: var(--blue);
}

#notice a:hover::after {
	width: 100%;
}


#confirm {
	color: #707070;
}

#confirm a{
  border: 1px #909090 solid;
  border-radius: 10px;
  cursor: pointer;
  background: var(--white);
  color: #707070;
  padding: 8px 18px;
  margin: 10px 0;
  transition: all 0.3s ease 0s;
  font-size: 14px;
  text-decoration: none;
}

#confirm a:hover {
	background: var(--blue);
	color: white;
}

#thanks {
  color: #707070;
  text-align: center;
  align-items:center;
  height: 100%;

}

#thanks h2 {
  font-size: 18px;
  margin-bottom: 60px;
}

#thanks a{
  border: 1px #909090 solid;
  border-radius: 10px;
  cursor: pointer;
  background: var(--white);
  color: #707070;
  padding: 8px 18px;
  transition: all 0.3s ease 0s;
  font-size: 14px;
  text-decoration: none;
}

#thanks a:hover {
	background: var(--blue);
	color: white;
}

/* FOOTER */
footer {
  background-color: var(--unnamed-color-909090);
  text-align: center;
  padding: 20px 0;
}
footer h1{
  color: var(--white);
  font-family: 'Fira Sans', sans-serif;
  font-size: 24px;
}
footer p {
  color: var(--white);
  font-family: 'Fira Sans', sans-serif;
  font-size: 0.875rem;
}

.sp-navi {
  display: none;
}

/* Mobile */
@media (max-width:770px) {

	.site-logo {
		margin-top: 15px;
		padding-bottom: 5px;
		color: var(--unnamed-color-707070);
		font-family: 'Fira Sans', sans-serif;
		font-style: var(--unnamed-font-style-normal);
		font-weight: var(--unnamed-font-weight-300);
		font-size: 30px;
		line-height: var(--unnamed-line-spacing-33);
		letter-spacing: var(--unnamed-character-spacing-0);
	}

	.header-line {
		border-top: 2px solid;
		margin-left: 0;
		margin-top: 5px;
		width: 75%;
		color: var(--blue);
	}



	.twitter {
		width: 25px;
		margin-top: 13px;
	}

	.youtube {
		width: 25px;
		margin-top: 13px;
		margin-left: 15px;
	}

	/* ハンバーガーメニュー */

	#hamburger {
		text-align: right;
    background-color: transparent;  /*透明の背景*/
    position: relative;             /*ハンバーガーの横線の位置を決めるための基準*/
    cursor: pointer;                /*リンクを示すカーソルを表示（指差しマーク）*/
    margin: 30px 0 -50px 0;             /*左側に余白を作り、ハンバーガーメニューを右端に配置*/
    height: 60px;                   /*ヘッダーの高さと同じ60px*/
    width: 60px;                    /*高さと同じ幅*/
  }

	.icon span {
    position: absolute;       /*親要素である#hamburgerを基準に位置を指定*/
    left: 15px;               /*#hamburger内の左がら15pxに横線を配置（幅が60pxなので右からも15px）*/
    width: 30px;              /*横線の幅が30px*/
    height: 2px;              /*横線の高さが4px*/
    background-color: var(--blue);  /*横線を白色*/
    border-radius: 2px;       /*横線の両端の角に丸みを持たせる*/
    transition: ease 0.3s;   /*変化の時間（easeは初期値）*/
		z-index: 110;
  }

	.icon span:nth-of-type(1) {
		top: 18px;
	}
	.icon span:nth-of-type(2) {
		top: 28px;
	}
	.icon span:nth-of-type(3) {
		bottom: 18px;
	}

	.close span:nth-of-type(1) {
	 	transform: rotate(45deg); /*反時計回りに45度回転*/
	 	top: 28px;
		background-color: var(--white);
 	}

 	.close span:nth-of-type(2) {
	 	opacity: 0;
		background-color: var(--white);
 	}

 	.close span:nth-of-type(3) {
		transform: rotate(-45deg); /*時計回りに45度回転*/
	 	top: 28px;
		background-color: var(--white);
 	}

	.sp-navi {
		background-color: var(--blue);
		height: 100%;
		position: fixed;
		width: 100%;
		z-index: 101;
		margin: 0 -4%;
	}

	.sp-navi li {
		padding: 20px;
		margin: 20px 0;
	}
	.navi_wrap {
		align-items:center;
	  display: flex;
	  height: 100%;
	  justify-content: center;
	  position: absolute;
	  width: 100%;
		color: var(--white);
		font-family: 'Fira Sans', sans-serif;
		font-size: 30px;

	}
	.pc-navi {
		display: none;
	}

	.mainvisual img {
		width: 100%;
		height: 250px;
		object-fit: cover;
		margin-top: 123px;
	}
	.movie-wrap {
		margin: 0;
		position: relative;
	  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	  height: 0;
	  overflow: hidden;
	}
	.movie-wrap iframe {
		position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}

	#title-font {
		display: inline-block;
		font-family: 'Fira Sans', sans-serif;
		font-style: var(--unnamed-font-style-normal);
		font-weight: var(--unnamed-font-weight-300);
		font-size: 28px;
		line-height: var(--unnamed-line-spacing-33);
		letter-spacing: var(--unnamed-character-spacing-0);
	}

	#nlablance {
		background-color: var(--blue);
		color: var(--white);
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 14px;
		padding-bottom: 21px;
	}

	#nlablance span {
		padding: 34px 0;
		display: inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 18px;
	}

	#news {
		background-color: var(--white);
		color: #707070;
		font-family: 'Noto Sans JP', sans-serif;
		padding-bottom: 21px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	#news p {
		padding-bottom: 10px;
                font-size: 16px;
	}

	.caption {
                margin-bottom: 32px;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 16px;
	}

        #news h3 {
	        font-size: 18px;
        }


	#works {
		background-color: var(--blue);
		color: var(--white);
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 14px;
		padding-bottom: 21px;
	}

	#works span {
		padding-bottom: 34px;
		display: inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 18px;
	}

	.worklist {
		list-style-type: circle;
		list-style-position: inside;
		display: inline-block;
		font-size: 12px;
	}

	/* Notice */
	#notice {
		background-color: var(--white);
		color: #707070;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 14px;
		display: inline-block;
		margin-top: 123px;
	}

	#notice h2 {
		font-size: 16px;
	}

	.info h3 {
		margin-bottom:2rem;
		font-size: 16px
	}

	.mustlist div {
		text-align: center;
		color: #707070;
		border: 1px var(--blue) solid;
		padding: 2rem 2rem;
		margin: 3rem 0;
		font-size: 16px;
	}


	.warning {
		padding:  1rem;
		background: rgba(252,199,227, .2);
		font-size: 16px;
		line-height: 1.5;
	}

	#contact {
		background-color: var(--white);
		color: #707070;
		font-family: 'Noto Sans JP', sans-serif;
		padding-bottom: 21px;
		font-size: 16px;
	}

	#contact a {
		font-size: 18px;
	}

	form {
		margin: 1rem 2rem 2rem 3rem;
	}

	label {
		font-size: 14px;
		margin-bottom: 16px;
		color: #707070;
		display: block;
	}

	#name {
		width: 80%;
	}

	#email {
		width: 80%;
	}

	.mustlist {
		text-align: left;
		list-style-type: circle;
		list-style-position: outside;
  }

  input[type="submit"]{
    font-size: 12px;
  }

  #confirm a{
    font-size: 12px;
  }

  #thanks h2{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;

  }

  #thanks a{
    font-size: 12px;

  }