@charset "utf-8";

/* リセット系
--------------------------------------------- */
html {
	font-size: 18px;
	scroll-padding-top: 100px;
	scroll-behavior: smooth;
  min-height: 2000px;
  color: #000;
}
html *,
::before,
::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	background-color: white;
	font-family: Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
h2 {
	font-size: 30px;
	font-weight: bold;
  color:rgb(75, 75, 75);
	letter-spacing: 0.05em;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
ol, ul {
	list-style: none;
	margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
	color: rgb(75, 75, 75);
	letter-spacing: 0.2em;
}
p {
  line-height: 1.7em;
  letter-spacing: 0.02em;
	margin: 0;
  text-align: justify;
  text-justify: inter-ideograph;
}
h3 {
  margin: 0;
}

/* ヘッダー
--------------------------------------------- */
header {
  position: -webkit-sticky;
  position: sticky;
}
.inner {
  display: flex;
  justify-content: space-between;
  max-width: 2000px;
  margin: 0 auto;
  padding: 20px 10px;
  align-items: center;
  }
.site-header-pc{
  z-index: 999;
  background-color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}
.pc-nav {
  margin-left: auto;
}
.pc-nav li{
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
}
.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #fff;
  background-color: #1f57a1;
  min-width: 120px;
  padding: 1.2rem 1.2rem;
  border-radius: 5px;
  text-align: center;
  margin-left: 15px;
}
h1 {
  margin: 0; padding: 0;
}
a {	
  text-decoration: none;
  color: rgb(75, 75, 75);
}
nav {
  margin: 10px 0;
}
nav a {
  color:rgb(75, 75, 75);
}
ul {
  list-style: none;
  margin: 0;
  display: flex;
}
li {
  margin: 0 15px;
  font-size: 18px;
  line-height: 1.8em;
  letter-spacing: 0.03em;
}
.site-header-sp {
  display: none;
}
#nav-content ul {
  display: flex;
	padding: 20px 0;
  margin: 0;
}
#nav-content li {
  margin: 0 0 0 30px;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}
#sp-fixed-menu1 {
  display: none;
}

.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media screen and (max-width:728px) {
  .site-header-sp{
    z-index: 999;
    background-color: white;
    display: flex;
    padding: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
  .site-header-pc {
    display: none;
  }
.header {
	margin: 13px 2%;
}
#nav-drawer {
  position: relative;
}
#nav-content ul {
  display: block;
}
}

/* キービジュアル
--------------------------------------------- */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc , .keyvisual-pc { display: block !important; }
.sp , .keyvisual-sp { display: none !important; }

.pc {
	width: 100%;
}
.keyvisual {
  background-color:#dbf5fc;
}
.keyvisual-pc img {
	position: absolute;
	height: 38%;
	top: 28%;
	left: 35%;
}


  /* 仕事内容
--------------------------------------------- */
.achievement2 img {
  margin:50px auto 30px;
}
.recruitment2 img {
  margin:0 auto;
  padding: 80px 50px 100px;
}
.achievement3 img {
  margin:10px auto 30px;
}
.key img{
  margin:0 auto 30px;
}
    .achievement3 {
      padding: 0 0 50px;
    }
    .works3 {
      padding: 10px 40px 100px;
    }
    .works4 {
      display: flex;
    }  
    .works5 {
      display: flex;
      padding-bottom: 80px;
    }  
    .works6 {
      padding: 20px 0;
    } 
    .works6 img {
      margin: 0 auto;
      padding: 40px 0 20px;
    } 
    .works4 img , .works5 img{
      width: 40%;
      height: 100%;
      flex: 0.5;
    }
    .works4 ul , .works5 ul{
      margin: 0;
      flex: 1.5;
    }
    span {
      font-weight: bold;
      color: red;
    }
    .achievement3 p , .works3 p {
      text-align: left;
    }
    .work2 img {
      padding-top: 100px;
    }
    #merito {
      background-image: url(img/pink.jpg);
      background-repeat: repeat;
    }
    #works {
      background-image: url(img/yerro.jpg);
      background-repeat: repeat;
    }
    #works2 {
      background-image: url(img/bule.jpg);
      background-repeat: repeat;
    }
    .merito2 , .works2 {
      width: 800px;
      margin: 0 auto;
      padding: 60px 0 20px;
    }
    .merito2 img , .works2 img {
      margin: 0 auto;
    }
    .works3 {
      width: 700px;
      margin: 0 auto;
      padding: 10px 0;
    }
    .merito3 {
      margin: 0 auto 60px;
       width: 100%;
    }
    .footer p {
      text-align: center;
      color: #000; 
    }
    .move {
      text-align: center;
      margin: 40px 0;
    }
    .works4 li {
      margin: 0 0 0 25px;
    }
    .works5 li {
      margin: 0 25px 0 0;
    }
    /* 情報
--------------------------------------------- */
    .container {
    width: 1200px;
    margin: 0 auto;
    }
    #recruitment {
      background-image: url(img/haikei1.jpg);
      background-size:cover;
    }

    /* 募集要項
--------------------------------------------- */
#recruitment , #recruitment2 {
  background-color: #fff;
}
footer {
  background-color: #09006b;
}
.nowrap {
  white-space: nowrap;
}
.add1 img , .add2 img{
  margin:60px auto 20px;
}
.add1:hover img {
  opacity: 0.7;
}
.address {
  padding: 50px 0;
}
.address , .address a , .address p{
  text-align: center;
  color: white;
}
    /* スマホ
--------------------------------------------- */
@media screen and (max-width:1024px) {
	.pc , .keyvisual-pc { 
		display: none !important; 
	}
	.sp , .keyvisual-sp { 
		display: block !important;
		width: 100%;
	}
  li {
    margin: 25px 10px;
  }
  .container {
    width: 95%;
    margin: 0 auto;
  }
  .achievement3 img , .key img {
    margin:0;
  }
  .achievement3 {
    padding: 0 0 30px;
  }
  .achievement3 p , .works3 p {
    text-align: justify;
  }
    .merito2 , .works2 , .fu2 {
      width: 300px;
      margin: 0 auto;
      padding: 30px 0 10px;
    }
    .works3 {
      width: 350px;
      margin: 0 auto;
      padding: 10px 0 10px;
    }
  .achievement2 img {
    margin:10px auto 30px;
  }
    .work2 img {
      padding-top: 50px;
    }
.merito3 , #works {
  display: block;
}
.merito3 img {
  width: 4%;
  margin: 30px auto 20px;
  }
.merito3 ul {
  padding: 0 ;
}
.merito3  {
  display: block;
  margin: 0 auto 10px;
  }
#merito {
  padding-bottom: 10px;
}
.merito {
  margin-top: 0;
}
  .pc-nav {
    display: none;
 }
 .sp-nav {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 81vh;
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    transform: translateY(-100%);
    transition: all .2s ease-in-out;
 }
 #hamburger {
    position: relative;
    display: block;
    width: 30px;
    height: 25px;
    margin: 0 0 0 auto;
 }
 #hamburger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: rgb(52, 134, 192);
    transform: translateY(-50%);
 }
 #hamburger::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgb(52, 134, 192);
 }
 #hamburger::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 2px;
    background-color: rgb(52, 134, 192);
 }
 /*スマホメニュー*/
 .sp-nav ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
 }
 .sp-nav li {
    margin: 0;
    padding: 0;
 }
 .sp-nav li span {
    font-size: 20px;
    color: #fff;
 }
 .sp-nav li a, .sp-nav li span {
    display: block;
    padding: 20px 0;
 }
 /*-閉じるアイコンー*/
 .sp-nav .close {
    position: relative;
    padding-left: 20px;
 }
 .sp-nav .close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate( 45deg );
 }
 .sp-nav .close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate( -45deg );
 }
 .toggle {
  transform: translateY( 0 );
  opacity: 1;
}
li a {	
  color: white;
}
  /*メニューをページ下部に固定*/
  #sp-fixed-menu {
    display: block;
    position: fixed;
    width: 100%;
    bottom: 65px;
    font-size: 0;
    opacity: 0.9;
    z-index: 99;
  }
  #sp-fixed-menu1 {
    display: block;
    position: fixed;
    width: 100%;
    bottom: 0px;
    font-size: 0;
    opacity: 0.9;
    z-index: 99;
  }
  /*メニューを横並びにする*/
  #sp-fixed-menu1 ul {
    display: flex;
    list-style: none;
    padding:0;
    margin:0;
    width:100%;
  }
  #sp-fixed-menu1 li{
    justify-content: center;
    align-items: center;
    width: 100%;
    padding:0;
    margin:0;
    font-size: 20px;
    border-right: 1px solid #fff;
  }
  #sp-fixed-menu1 a{
    font-size: 20px;
  }
  /*メニューに色*/
  #sp-fixed-menu1 li:first-child{
    background: rgb(245, 74, 74);
  }
  /*ボタンを調整*/
  #sp-fixed-menu1 li a{
    color: #fff;
    text-align: center;
    display:block;
    width: 100%;
    padding:20px;
  }
  .move {
    margin: 15px 0;
	}
  .move iframe {
		top: 0;
		left: 0;
		width: 94%;
		height: 206px;
	}
  .works4 , .works5 {
    display: block;
    padding-bottom: 0;
  } 
  .works4 img , .works5 img{
    width: 100%;
  }
  .works6 {
    padding:0;
  }
  .recruitment2 img {
    padding: 50px 5px;
  }
  .add1 img ,  .add2 img{
    margin:30px auto 50px;
  }
  .footer {
    padding-bottom: 10px !important;
  }
  .works6 img {
    padding: 0;
  }
  #recruitment {
    background-image: url(img/haikei2.jpg);
  }
  .works4 li {
    margin: 25px 0 30px;
  }
  .works5 li{
    margin: 25px 0 30px;
  }
}