* {
  padding: 0;
  margin: 0;
}
body {
  width: 100%;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: -.40em;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1a1a;
}
@media screen and (min-width:641px) {
  .pc_none {
    display: none;
  }
}
@media screen and (max-width:640px) {
  .sp_none {
    display: none;
  }
}
.fadeIn {
  opacity: 0; /*一瞬表示されるのを防ぐ*/
}
.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.all {
  width: 100%;
  min-width: 1024px;
}

/* ==============================================

 PC

=============================================== */

@media screen and (min-width:641px) {
  body {
    min-width: 1280px;
  }
  
  h1 { /** ロゴ **/
    position: fixed;
    text-align: center;
    width: 50px;
  }
  h2 {
    font-size: 50px;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    font-weight: 900;
    padding-top: 70px;
    margin-top: -70px;
    overflow: hidden;
  }
  h3 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
  }
  header {
    width: 100px;
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top;
    box-sizing: border-box;
    height: 100vh;
  }
  .logo_wrapper {
    /*margin: 0 auto;*/
    /*z-index: 999;*/
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    position: fixed;
    width: 100px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .scroll_pc {
    width: 15px;
    margin: 0 auto;
    display: flex;
    position: fixed;
    left: 44px;
    bottom: 0;
  }
  .scroll_sp {
    display: none;
  }
  .scroll_sp img {
    display: none;
  }
  .icon_insta{
    width: 30px;
    position: fixed;
    top: 25px;
    right:25px;
    z-index: 10000;
  }
  
  
  .container {
    width: calc(100% - 100px);
    display: inline-block;
    border-left: solid 1px #F0F0F0;
    box-sizing: border-box;
    letter-spacing: 0.08em;
  }
  
  /* main  ------------------------------ */
  main {
    height: 100vh;
    width: 100%;
    position: relative;
  }
  main .inner {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
  }
  main p.catch {
    font-size: max(4.7vw, 50px);
    font-weight: 900;
    line-height: 1.3em;
    letter-spacing: 0.09em;
    color: #002060;
    margin-bottom: 10px;
  }
  main p.sub {
    font-size: max(1.7vw, 20px);
    font-weight: 100;
    line-height: 1.4em;
    letter-spacing: 0.08em;
    color: #002060;
    margin-bottom: 50px;
  }
  main p.lead {
    font-size: max(1.7vw, 20px);
    font-weight: 600;
    margin-bottom: 20px;
  }
  section {
    width: 100%;
    padding: 70px 5%;
    box-sizing: border-box;
  }
  
  /* about  ------------------------------ */
  section.about {
    background-color: #002060;
    color: #FFFFFF;
  }
  section.about h2 {
    text-align: center;
  }
  section.about h3 {
    text-align: center;
    margin-bottom: 50px;
  }
  section.about .aboutArea {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
  }
  section.about .aboutArea .aboutImage {
    width: 175px;
    float: left;
  }
  section.about .aboutArea .aboutText {
    width: 855px;
    padding-left: 70px;
    float: right;
    border-left: 1px solid #FFFFFF;
    box-sizing: border-box;
  }
  section.about .aboutArea .aboutText span {
    font-size: 18px;
    font-weight: 400;
  }
  
  /* works  ------------------------------ */
  section.works {
    background: #FFF;
    overflow: hidden;
  }
  section.works h2 {
    margin-bottom: 50px;
  }
  section.works .row {
    width: 100%;
    margin: 0 auto 120px;
    position: relative;
    overflow: hidden;
  }
  section.works .row:last-child {
    margin-bottom: 0;
  }
  section.works .row .photo_L {
    width: 55%;
    /*padding-top: 90px;*/
    float: left;
  }
  section.works .row .photo_R {
    width: 55%;
    /*padding-top: 90px;*/
    float: right;
  }
  section.works .row .works_R {
    width: 40%;
    float: right;
    overflow: hidden;
  }
  section.works .row .works_L {
    width: 40%;
    float: left;
    overflow: hidden;
  }
  section.works .row .works_R .shoulder {
    width: 30px;
    top: 0;
    right: 0;
    position: absolute;
  }
  section.works .row .works_L .shoulder {
    width: 30px;
    top: 0;
    left: 0;
    position: absolute;
  }
  section.works .row .works_R .textArea {
    width: 40%;
    right: 0;
    bottom: 0;
    position: absolute;
    margin-bottom: 20px;
  }
  section.works .row .works_L .textArea {
    width: 40%;
    left: 0;
    bottom: 0;
    position: absolute;
    margin-bottom: 20px;
  }
  section.works .row .textArea .worksName {
    font-size: 34px;
    font-weight: 900;
    color: #002060;
    margin-bottom: 10px;
  }
  section.works .row .textArea p span {
    font-size: 16px;
    font-weight: bold;
    display: block;
  }
  section.works .row .textArea li {
    text-indent: -1.5em;
    padding-left: 1.5em;
  }
  
  
  footer {
    background: #002060;
    padding: 3% 0;
  }
  .copyright {
    text-align: center;
    font-size: max(0.7vw, 12px);
    color: #FFFFFF;
  }

  /* ========= INFORMATION ========= */

  section.info {
    background: #FFF;
    overflow: hidden;
    padding: 70px 8%;
  }
  section.info h2 {
    margin-bottom: 50px;
  }
  section.info .row {
    width: 100%;
    font-size: 14px;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px #F0F0F0 solid;
  }
  section.info .row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
  }
  section.info .row .date {
    font-size: 14px;
    margin-bottom: 10px;
  }
  section.info .row .title {
    font-size: 18px;
    font-weight: 900;
    color: #002060;
    margin-bottom: 30px;
  }
  section.info .row .img {
    width: 100%;
    max-width: 800px;
    margin-bottom: 10px;
  }
  
  /* ========= COMPANY ========= */

  section.company {
    background: #FFF;
    overflow: hidden;
    padding: 70px 8%;
  }
  section.company h2 {
    margin-bottom: 70px;
  }
  section.company .row {
    width: 100%;
    font-size: 14px;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px #F0F0F0 solid;
  }
  section.company .row .title {
    width: 20%;
    font-weight: 900;
    color: #002060;
    float: left;
  }
  section.company .row .textArea {
    width: 80%;
    float: right;
  }


}

/* ==============================================

 SP

=============================================== */

@media screen and (max-width:640px) {
  /* Avoid Chrome to see Safari hack ----------Chromeでは作動させない */
  @supports (-webkit-touch-callout: none) {
    main {
      /* The hack for Safari */
      height: -webkit-fill-available; /*スマホのアドレスバー分の高さ隠さない*/
    }
  }
  h1 { /** ロゴ **/
    width: 14%;
    top: 12px;
    left: 0;
    right: 0;
    margin: auto;
    position: fixed;
    z-index: 1;
  }
  h2 {
    font-size: 30px;
    letter-spacing: 0.1em;
    margin-bottom: 2%;
    font-weight: 900;
    padding-top: 100px;
    margin-top: -100px;
    overflow: hidden;
  }
  h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 1%;
  }
  
  header {
    width: 100%;
    position: fixed;
    z-index: 100;
    border-bottom: solid 1px #F0F0F0;
  }
  .logo_wrapper {
    width: 100%;
    height: 70px;
    background: #FFFFFF;
  }
  .scroll_pc {
    display: none !important;
  }
  .scroll_sp img {
    width: 100%;
    display: block;
  }
  .scroll_sp {
    display: block;
    width: 30px;
    width: 2%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .icon_insta{
    width: 30px;
    position: fixed;
    top: 20px;
    right:20px;
    z-index: 10000;
  }
  
  .container {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    letter-spacing: 0.08em;
  }
  
  /* main  ------------------------------ */
  
  main {
    height: 100vh;
    width: 100%;
    position: relative;
  }
  main .inner {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    box-sizing: border-box;
  }
  main p.catch {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.3em;
    letter-spacing: 0.09em;
    color: #002060;
    margin-bottom: 10px;
  }
  main p.sub {
    font-size: 16px;
    font-weight: 100;
    line-height: 1.4em;
    letter-spacing: 0.08em;
    color: #002060;
    margin-bottom: 50px;
  }
  main p.lead {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  
  
  
  section {
    width: 100%;
    padding: 8% 7%;
    box-sizing: border-box;
  }
  
  /* about  ------------------------------ */
  
  section.about {
    background-color: #002060;
    color: #FFFFFF;
  }
  section.about h3 {
    margin-bottom: 50px;
  }
  section.about .aboutArea {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  section.about .aboutArea .aboutImage {
    width: 40%;
    margin-bottom: 7%;
  }
  section.about .aboutArea .aboutText {
    width: 100%;
    float: right;
    border-top: 1px solid #FFFFFF;
    padding-top: 7%;
    box-sizing: border-box;
  }
  section.about .aboutArea .aboutText span {
    font-size: 16px;
    font-weight: 400;
  }
  
  /* works  ------------------------------ */
  
  section.works {
    background: #FFF;
    overflow: hidden;
  }
  section.works h2 {
    margin-bottom: 5%;
  }
  section.works .row {
    width: 100%;
    margin: 0 auto 10%;
    position: relative;
    overflow: hidden;
  }
  section.works .row:last-child {
    margin-bottom: 0;
  }
  section.works .row .photo_L,
  section.works .row .photo_R{
    width: 100%;
    margin-bottom: 3%;
  }
  section.works .row .works_R,
  section.works .row .works_L{
    width: 100%;
    overflow: hidden;
  }
  section.works .row .works_R .shoulder,
  section.works .row .works_L .shoulder{
    display: none;
  }
  section.works .row .works_R .textArea,
  section.works .row .works_L .textArea{
    width: 100%;
  }
  section.works .row .textArea .worksName {
    font-size: 24px;
    font-weight: 900;
    color: #002060;
    margin-bottom: 2%;
  }
  section.works .row .textArea p span {
    font-size: 16px;
    font-weight: bold;
    display: block;
  }
  section.works .row .textArea li {
    text-indent: -1.5em;
    padding-left: 1.5em;
  }
  footer {
    background: #002060;
    padding: 3% 0;
  }
  .copyright {
    text-align: center;
    font-size: max(0.7vw, 12px);
    color: #FFFFFF;
  }
  
  
  /* ========= INFORMATION ========= */

  section.info {
    background: #FFF;
    overflow: hidden;
    padding-top: 100px;
  }
  section.info h2 {
    margin-bottom: 7%;
    text-align: center;
  }
  section.info .row {
    width: 100%;
    margin: 0 auto 10%;
    overflow: hidden;
    font-size: 13px;
    margin-bottom: 10%;
    padding-bottom: 10%;
    border-bottom: 1px #F0F0F0 solid;
  }
  section.info .row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
  }
  section.info .row .date {
    font-size: 13px;
    margin-bottom: 2%;
  }
  section.info .row .title {
    font-size: 16px;
    font-weight: 900;
    color: #002060;
    margin-bottom: 6%;
  }
  section.info .row .img {
    width: 100%;
    max-width: 800px;
    margin-bottom: 3%;
  }
  
  /* ========= COMPANY ========= */

  section.company {
    background: #FFF;
    overflow: hidden;
    padding-top: 100px;
  }
  section.company h2 {
    margin-bottom: 7%;
    text-align: center;
  }
  section.company .row {
    width: 100%;
    margin: 0 auto 10%;
    overflow: hidden;
    font-size: 13px;
    margin-bottom: 5%;
    padding-bottom: 5%;
    border-bottom: 1px #F0F0F0 solid;
  }
  section.company .row .title {
    width: 100%;
    font-weight: 900;
    color: #002060;
    margin-bottom: 2%
  }
  section.company .row .textArea {
    width: 100%;
  }

  
}

/* ==============================================

 ハンバーガーメニュー

=============================================== */

html.is-fixed {
  width: 100%;
  position: fixed;
}
.nav_wrapper {
  letter-spacing: -.40em;
  width: 90%;
  margin: 0 auto;
}
#nav-open {
  height: 30px;
  position: fixed;
  left: 35px;
  top: 30px;
  width: 30px;
  z-index: 1000;
}
#nav-open a {
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  transition: all 0.4s;
  height: 2px; /*線の太さ*/
  width: 30px; /*長さ*/
  border-radius: 3px;
  background: #1A1A1A;
  display: block;
  content: '';
  cursor: pointer;
  z-index: 9999; /*最前面*/
}
#nav-open span:before {
  bottom: -12px;
}
#nav-open span:after {
  bottom: -24px;
}
/*三本線を動かす*/
#nav-open.active span {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
  background-color: #fff;
}
#nav-open.active span:before {
  -webkit-transform: translateY(-12px) rotate(45deg); /*打ち消す*/
  transform: translateY(-12px) rotate(45deg); /*打ち消す*/
  opacity: 0;
}
#nav-open.active span:after {
  -webkit-transform: translateY(-24px) rotate(45deg);
  transform: translateY(-24px) rotate(90deg);
  background-color: #fff;
}
/*中身*/
#nav-content {
  display: none;
  position: fixed;
  width: 100%;
  /*height: 100vh;*/
  top: 0;
  left: 0;
  /*transition: .2s ease-in-out;*/
  min-height: 100vh; /* Fallback */
  min-height: calc(var(--vh, 1vh) * 100);
}
#nav-content.open {
  display: block;
  opacity: 1;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  /*height: 100vh;*/
  background: #002060; /*背景色*/
  overflow: hidden; /*ブラー効果でボヤけた部分を非表示*/
  min-height: 100vh; /* Fallback */
  min-height: calc(var(--vh, 1vh) * 100);
}
/*:beforeにぼかし効果を設定する*/
#nav-content.open:before {
  content: '';
  overflow: hidden;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  z-index: -1; /*重なり順序を一番下にしておく*/
}
/*チェックが入ったら表示する内容*/
.category__wrap {
  align-items: center;
  display: flex;
  /*height: 100vh;*/
  justify-content: center;
  position: absolute;
  width: 100%;
  min-height: 100vh; /* Fallback */
  min-height: calc(var(--vh, 1vh) * 100);
}
.category {
  width: 100%;
  letter-spacing: -.40em;
  text-align: center;
  margin: 0 auto;
  padding: 0 20%;
  line-height: normal;
}
.category li {
  display: inline-block;
  width: 100%;
  letter-spacing: 0.12em;
  box-sizing: border-box;
  color: #fff;
  font-size: max(2.7vw, 40px);
  text-align: left;
  list-style: none;
  margin: 10px 0;
  font-weight: 900;
}
.category-title:last-child {
  margin-bottom: 20px;
}
.category-title a {
  color: #fff;
  text-decoration: none;
  transition: .3s;
}
.category-title a:hover {
  color: #666;
}
.category__inner_wrap {
  width: 100%;
  letter-spacing: -.40em;
}

@media screen and (max-width:640px) {
  #nav-open {
    left: 20px;
    top: 23px;
  }
  .category li {
    font-size: max(1.4vw, 24px);
  }
}



/*
============================================================
	contact 
============================================================
*/

.container section.contact{
	background: #FFF;
  overflow: hidden;
  padding: 70px 8%;
}
.container section.contact h2{
	margin-bottom: 50px;
}
.container section.contact .row{
	font-size: 14px;
  width: 100%;
  /*margin: 0 auto;*/
  padding-bottom: 50px;
}
.container section.contact .row:last-child{
	border: none;
}
.container section.contact .row .left{
	width: 100%;
	padding-left: 0;
	float: none;
	margin-bottom: 10px;
}
.container section.contact .row .right{
	width: 100%;
	padding-right: 0;
	float: none;
}
.container section.comfirm .row .right{
	padding-bottom: 10px;
	border-bottom: 1px #DDD solid;
}
input[type=text],
select,
textarea {
	width:100%;
	height: 40px;
	padding: 5px;
	box-sizing: border-box;
	border: none;
	border-bottom: 1px #DDD solid;
}
textarea {
	height: 100px;
	resize: vertical;
}
form {
	display: inline;
}
.transmit,
.transmit2,
.transmit3{
	margin:0 auto;
	text-align: center;
}
input.button{
	background-image:url(../images/contact/contact_transmit_bt.png);
	background-repeat:no-repeat;
	background-size:100%;
	background-color:#FFF;
	border:none;
	width:400px;
	height:70px;
	margin-top:50px;
	/*text-indent: -9999px;*/
	cursor: default;
}
input.button2{
	 background-image:url(../images/contact/contact_comfirm_bt.png);
	 background-repeat:no-repeat;
	 background-size:100%;
	 background-color:#FFF;
	 border:none;
	 width:400px;
	 height:70px;
	 margin-top:50px;
	 /*text-indent: -9999px;*/
	 cursor: default;
}
input.button3{
	background-image:url(../images/contact/contact_back_bt.png);
	background-repeat:no-repeat;
	background-size:100%;
	background-color:#FFF;
	border:none;
	width:400px;
	height:70px;
	margin-top:10px;
	/*text-indent: -9999px;*/
	cursor: default;
}

.container section.contact p{
	/*text-align: center;*/
}

@media screen and (max-width: 768px) {
  section.contact {
    background: #FFF;
    overflow: hidden;
    padding-top: 100px !important;
  }
  section.contact h2 {
    margin-bottom: 7%;
    text-align: center;
  }
	input[type=text],
	select,
	textarea {
		font-size: 13px;
	}
	input.button,
	input.button2,
	input.button3{
		width:300px;
		height:53px;
	}
	.container section.contact p{
		text-align: left;
	}
	.container section.contact p.transmit,
	.container section.contact p.transmit2,
	.container section.contact p.transmit3{
		text-align: center;
	}
  .container section.contact label{
    font-size: 13px;
  }
}