@charset "utf-8";
/*
=======================================
  Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
  margin:0;
  padding:0;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
  display:block;
}

html{
  -webkit-text-size-adjust: 100%;
}

body{
	line-height: 1.5;
	font-size: 16px;
	color:#000;
	font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (max-width:600px) {
body{
	font-size: 14px;
}
}


img{
  border: 0;
  max-width: 100%;
  height: auto;
}

ul,ol{
  list-style-type: none;
}

table {
  border-collapse: collapse; 
  border-spacing: 0;
}

img, input, select, textarea { 
  vertical-align: middle;
}

a{
	color:#000;
	text-decoration:none;
}

p{
	line-height:2;
}
::selection {
    background: #e2e2e2;
    color: #000;
}

//Firefox
::-moz-selection {
    background: #e2e2e2;
    color: #000;
}



/*
=========================================
  Base Layout
=========================================
*/

#contents{

}
main{
	width: 100%;
	min-widht:980px;
	float:right;
	margin: 0;
	text-align:center;
}

main section .inner,
main article .inner{
	margin: 6rem 15%;
	overflow:hidden;
}

@media screen and (max-width:1350px) {
main{
	max-widht:980px;
}
main section .inner,
main article .inner{
	margin:3rem 17% 0 5%;
}
}
@media screen and (max-width:880px) {
main section .inner,
main article .inner{
	margin:3rem 5% 0 5%;
}
}
@media screen and (max-width:600px) {
main section .inner,
main article .inner{
	margin:1rem 5%;
}
}


/*
=========================================
  Modules（Block）
=========================================
*/

h1{
	padding-bottom:30px;
}
h1 img{
	max-width:130px;
	width:100%;
}
h2{
	font-family: 'Playball', cursive;
	font-size:350%;
	font-weight:500;
	display: block;
	position: relative;
	margin-bottom:3rem;
}
h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0; /*下線の上下位置調整*/
  display: inline-block;
  width: 40px; /*下線の幅*/
  height: 3px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #4b7f50; /*下線の色*/
}

#recruit h3{
	color:#4b7f50;
	font-family: 'Playball', cursive;
	font-size:350%;
  position: relative;
  padding: 0 65px;
  text-align: center;
  display:inline-block;
  font-weight:500;
}

#recruit h3:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #4b7f50;
}

#recruit h3 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
#recruit h4{
	font-size:80%;
	margin-bottom:3rem;
}

@media screen and (max-width:600px) {
h1{
	padding:5px 0 15px;
}
h2{
	font-size:250%;
	margin-bottom:1.8rem;
}
#recruit h3{
	font-size:250%;
	padding: 0 30px;
}
#recruit h3 span {
  padding: 0 0.5em;
}
#recruit h4{
	font-size:90%;
	margin-bottom:2rem;
}
}




/*
=========================================
  header
=========================================
*/


/*
=========================================
  global nav
=========================================
*/

.globalMenuSp{
	width: 10%;
	position:fixed;
	top: 10%;
	right:0;
	margin-right:0.5%;
	z-index:10;
}
@media screen and (max-width:1350px) {
.globalMenuSp{
	width: 11%;
	margin-right:2%;
}
}
.globalMenuSp li{
	padding:10px 0;
}

.globalMenuSp ul li a{
	  padding: 0 5px;
	  text-align:center;
	  display:block;
	  position: relative;
	  display: inline-block;
	  text-decoration: none;
}

.globalMenuSp ul li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.globalMenuSp ul li a:hover::after {
  transform: scale(1, 1);
}




@media screen and (max-width: 900px) {

.globalMenuSp ul li a::after {
	display:none;
}

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index: 21;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 20;
  top  : 0;
  left : 0;
  color: #000;
  background: #fff;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
}

nav.globalMenuSp ul {
  background: #ccc;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #000;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}
}	 

/*
=========================================
  contents
=========================================
*/	



/*
=========================================
  footer
=========================================
*/
footer{
	clear:both;
	text-align:center;
	padding:5rem 0;
	font-size:80%;
	color:#999;
}

@media screen and (max-width:600px) {
footer{
	padding:2rem 0;
}
}


/*---------------------------------------
  下から上に上がってくるcss
---------------------------------------*/

main .box {
  width: 100%;        /* 横幅いっぱい */
  opacity: 0;         /* 初期値は透明にしておく */
  transition: .5s;    /* 動くスピードを0.5秒に指定 */
  position: relative; /* 相対位置の設定 */
  top: 50px;          /* 事前に下に50pxずらしておく */
}

main .active {
  opacity: 1;         /* 透明度を元に戻す */
  top: 0;             /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}




/*
=========================================
  ページ上部へ
=========================================
*/

#pageTop {
 	text-align:center;
 	padding:15px;
}



#pageTop a:hover {
      text-decoration: none;
      opacity: 0.5;
}



  .pc{
	  display:block;
  }
  .sp{
	  display:none;
  }

@media screen and (max-width: 600px) {


  .pc{
	  display:none;
  }
  .sp{
	  display:block;
  }

}





@media screen and (max-width: 900px) {

}
@media screen and (max-width: 480px) {


}



anc{
	margin-top:-30px;
	padding-top:30px;
}