@charset "utf-8"; 

/* サイト共通のデザイン（レイアウト、ヘッダー、フッター、ナビゲーション）を記述する。
content.cssに影響しないように各ブロック内で局所化する。
wysiwygエディターと編集画面では使用しない。 */


/* ヘッダー */
/*------------------------header */
header{ width: 100%; margin: 0 auto; padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Logo */
header #Logo a img{ width: 56px; margin-right: 10px;}
header #Logo a{ display: flex; align-items: center; font-size: 22px; line-height: 1.4; color: #000;}
header #Logo a span span{ font-size: .7em; display: block;}
@media screen and (max-width: 1080px) {
header{
padding: 10px;
}
}

/* nav */
header .menu ul{
list-style: none;
display: flex;
}
header .menu ul li{
margin-left: 1.5em;
}

header ul li a{

padding: 5px;
display: block;
}
header ul li a:link,
header ul li a:visited{ color: #000;}

header ul li.recruit a{
padding: 5px 1em;
background: #2ca3dd;
border-radius: 4px;
}
header ul li.recruit a:link,
header ul li.recruit a:visited{ color: #fff;}

header ul li.ded a{
padding: 5px 1em;
background: #009b43;
border-radius: 4px;
}
header ul li.ded a:link,
header ul li.ded a:visited{ color: #fff;}

header ul li{ border-bottom: 2px solid #fff;}
header ul li.visit{ border-bottom: 2px solid #009b43;}

@media screen and (max-width: 1220px) {
header .menu ul{
display: block;
}
header .menu ul,
header .menu ul li{
margin: 0;
padding: 0;
text-align: left;
}
header ul li a{
display: block;
padding: 1em;
border-bottom: 1px solid #ccc;
}

header ul li.visit{ border-bottom: none;}

header ul li.recruit a,
header ul li.ded a{
margin-top: 1em;
padding: 1em;
}
}








/*pagetop*/
.pagetop{ position: fixed; z-index: 9000; bottom: 40px; right: 20px; display: none;}
.pagetop a{ box-sizing: border-box; font-size: 24px; text-align: center; display: block; background: #fff; width: 60px; height: 60px; border-radius: 120px; padding-top: 12px;box-shadow: 0 0 4px 4px rgba(0,0,0,0.2);}
.pagetop a span{ display: none;}

.pagetop a:link, .pagetop a:visited{ color: #147b99;}
.pagetop a:hover{ opacity: 0.6; transition: 0.2s;}


/*------------------------footer */
footer{ width: 100%; max-width: 1080px; margin: 20px auto 0; padding: 30px 0;

}

footer .flexBox{ justify-content: space-between;}
footer ul{ list-style: none;
text-align: right;
margin: 0;
padding: 0;
}
footer ul a{ display: block; padding: 5px 0;}
footer ul li a:link,
footer ul li a:visited{
color: #000;
}


footer .B{ font-size: 26px; margin-bottom: 20px; color: #009b43;}
footer p{}
footer small{ display: block; text-align: right; margin: 1em 0;}

@media screen and (max-width: 1080px) {
footer{ padding: 1em;}
footer .flexBox{ display: block;}
footer ul{ text-align: left; margin-top: 2em;}


footer .B{ font-size: 20px;}
footer small{text-align: center;}
}




/*------------------------Style*/
/* wrapBox */
.wrapBox{
width: 100%;
max-width: 1080px;
margin: 0 auto;
}


/* box */
.greenBox{ background: #009b43;}


/* flex */
.flexBox{ display: flex;}


.flexL{
display: flex;
align-items: top;
margin: 0;
padding: 0;
}
.flexL figure{
width: 40%;
/* max-width: 320px; */
margin: 0 1.5em 0 0;
padding: 0;
}
.flexL figure img{ width: 100%;}
.flexL div{
width: 60%;
text-align: justify;
}
@media screen and (max-width: 640px) {
.flexL{display: block;}
.flexL figure,
.flexL div{
width: 100%;
max-width: 100%;
margin: 0;
}
}




/*------------------------otherStyle*/
.PC{ display: block; }
.SP{ display: none; }


.B{ font-weight: bold; }
.kome{ text-indent: -1em; margin-left: 1em; }
.tC{ text-align: center; }
.tR{ text-align: right; }

.fitImg{ width: 100%;
max-width: 600px;}
.fitImg img{ width: 100%;}

.fontS{ font-size: .8em;}
.fontSS{ font-size: .7em;}
.fontSSS{ font-size: .6em;}

.noEvent{ pointer-events: none; }

@media screen and (max-width: 1080px) {
.PC{ display: none; }
.SP{ display: block; }


}



















/*------------------------nav*/
.drawer{ z-index: 9999; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: fixed; top: 0; right: 0; padding: 0 9px; width: 48px; height: 48px; background: #fff; }
.navbar_toggle{z-index:9999;}
.navbar_toggle_icon { position: relative; display: block; border-radius: 4px; height: 2px; width: 30px; background: #000; -webkit-transition: ease .4s; transition: ease .4s;}
.navbar_toggle_icon:nth-child(1) { top: 0;}
.navbar_toggle_icon:nth-child(2) { margin: 8px 0;}
.navbar_toggle_icon:nth-child(3) { top: 0;}

/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {top: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {-webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0;}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {top: -10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

/*OPEN*/
.menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}


@media screen and (min-width: 1221px) {
.drawer,
.navbar_toggle{ display: none;}
}

@media screen and (max-width: 1220px) {
.menu{ position: fixed; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition:ease .5s; transition:ease .5s; z-index:9998; top: 0; width: 100%;margin: 0;
padding: 4em 1em 1em;
background: rgba(255, 255, 255, .9);
height: 100vh;
overflow-y: scroll;
}
.menu nav{ padding: 20px 20px 80px; height: 100vh; overflow: scroll; font-size: 18px; text-align: left; }
}