/*
style.css
ookawa cleans CSS
*/

/*=======================================
リセット
=======================================*/

html,body,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td,iframe,figure {
  border: 0;
  font-size: 18px;
  font-weight: normal;
  margin: 0;
  padding: 0;
  letter-spacing: 0.05em;/*文字間隔*/
}

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

body {
  line-height: 1.5;
  min-width: 1080px;
  overflow-x: hidden;
  position: relative;
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1.1;
}

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

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

main {
  display:block; /* for IE11 */
}
header a:hover,
header a:hover img,
main a:hover,
main a:hover img,
footer a:hover {
  outline: 0;
  opacity: 0.8;
  transition: all 0.8s ease 0s;
}

.ov {
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

em {
  font-style: normal;
}

/*=======================================
スマホ用ナビ
=======================================*/
.hamburger-menu,
.menu-btn-check {
  display: none;
}

@media (max-width: 768px) {
  
  .splogo img {
        display: block;
  width: 60%;
}
  .hamburger-menu {
  display: block;
    background-color: #fff;  
  margin-left: 50px;
  margin-bottom:-70px;
}
   .menu-content p {
    display: block;
    width: 100%;
    font-size: 20px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    margin-top: 50px;
  
    margin-left: auto;
     margin-right: auto;
     
    margin-left: 120px;
    position: relative;
}
  .menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #008fde;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 100;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #55acee;
    transition: all 0.5s;/*アニメーション設定*/
    display: block;
}
  .menu-content img {
    position: fixed;
    top: 0;
    left: 20%;
    width: 60%;
  }  
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}
}

/*=======================================
共通部分
=======================================*/
/* clearfix */
.clearfix:after {
  clear: both;
  content: "";
  display: block;
}

/* ボタン */
.btn {
  position: relative;
  text-align: center;
  color: #fff;
}
.btn a {
  display: inline-block;
  padding: 8px 60px;
  text-align: center;
  background: #008fde;
  border: 2px solid #008fde;
  border-radius: 6px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius:50px;
}
.btn a:hover {
  background: #fff;
  color: #333;
}

.btn a i {
  margin-right: 7px;
  color: #fff;
}

/* pc or sp switch */
.pc {
  display:block !important;
}
.sp {
  display: none !important;
}
.pc_inline {
  display:inline !important;
}
.sp_inline {
  display:none !important;
}

/* google inline frame */
/*
.gglif {
  position: relative;
  padding-bottom: 90%;
  padding-top: 20px;
  height: 0;
  overflow: hidden;
}

.gglif iframe,
.gglif object,
.gglif embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

/* レスポンシブテーブル */
.rwdTbl th {
  width: 25%;
  background-color: #f6f6f6;
  text-align: left;
}

.rwdTbl td {
  background-color: #ffffff;
}

/*=======================================
テンプレート用
=======================================*/

/* フロート */
.flL { 
  display: inline; float: left;
}
.flR {
  display: inline; float: right;
}
.flImgL{
  display: inline; float: left; margin-right: 20px;
}
.flImgR {
  display: inline; float: right; margin-left: 20px;
}

.flImgC {
  display: block; margin: 0 auto;
}



/* 行ぞろえ */
.taL {
  text-align: left;
}
.taC {
  text-align: center;
}
.taR {
  text-align: right;
}

.secTtl {
  text-align: center;
}

.secTtl span {
  display: block; 
 /* color: #333;*/
  font-weight: bold;
}


/* 1文字インデント */
.note {
  padding-left:1em;
  text-indent:-1em;
}

/* フォントサイズ */
.fzSS {
  font-size:  65%; 
}
.fzS {
  font-size:  85%; 
}
.fzsM {
  font-size:  115%;
}
.fzM {
  font-size: 130%; 
}
.fzMl {
  font-size: 162.5%; 
}
.fzL {
  font-size: 225%; 
}

/* フォントウエイト */
.fwN {
  font-weight: normal;
}
.fwB {
  font-weight: bold;
}
/* フォントファミリー */
.ffS {
  font-family: serif; 
}



/* フォントカラー */
.text-color {
  color:#333333;
}
.gray1 {
  color:#9A9A9A;
}
.gray2 {
  color:#4C524C;
}
.fcblue {
  color:#008CD6;
}
.fcblue2 {
  color:#55ACEE;
}
.fcgreen {
  color:#6FC67A;
}
.fcred {
  color:#E7141A;
}
.fcwhite {
  color:#fff;
}


/* BGカラー*/
.bg01 {
  background: #e5f3fb;
}

.bg02 {
  background: #f0f7f1;
}

.bg03 {
  background: #f7f9fa;
}

.bg04 {
  background: #ffffff;
}

/* マージン設定*/
.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt50 {
  margin-top: 50px;
}
.mt100 {
  margin-top: 100px;
}
.mb20 {
  margin-bottom: 20px;
}

.mb50 {
  margin-bottom: 50px;
}
.mb100 {
  margin-bottom: 100px;
}
.pa30 {
  padding-top: 30px
   /* padding: 40px 0*/
}
.pa40 {
  padding-top: 40px
   /* padding: 40px 0*/
}

/* ラインマーカー */
.marker {
  background: -webkit-linear-gradient(transparent 60%,#ffff8e 70%);
    background: linear-gradient(transparent 60%,#ffff8e 70%);
    background: -webkit-linear-gradient(transparent 60%,#ffff8e 60%);
  font-weight: bold;
}


.w440 {
   width="440px" 
}

/* サイト全体共通 */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
    background: #fff;
	font-family: 'Noto Sans Japanese', sans-serif,'Roboto',"メイリオ","meiryo", "ヒラギノ角ゴ Pro W3","游ゴシック", YuGothic,"Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif;
  color: #333;
}

/* ヘッダー */
header .inner,
main .inner,
footer .inner {
  margin: 0 auto;
  width: 1080px;
}

header {
  background: transparent;
  height: 220px;
  margin-bottom: 0;
  background: #fff;
}
@media (max-width: 768px) {
header {
  background: transparent;
  height: 250px;
  margin-bottom: 0;
  background: #fff;
  }
}

header .inner {
  position: relative;
}

header #mustHead #siteId {
  float: left;
  margin-top: 0px;
}

header #mustHead #siteId h1 a {
  text-decoration: none;
}

header #mustHead #siteId h1 span {
  display: block;
  color: #333;
  font-size: 13px;
}

header #mustHead #siteId h1 img {
    margin-top: 5px;/* ロゴ*/
  	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 417px;
}

header #mustHead p {
  float: right;/* 住所*/
  text-align: right;
  padding-top: 25px;
  font-size: 19px;
}

header #mustHead p span {
  font-size: 32px; /* 電話番号*/
  font-weight: bold;
}

/* グローバルメニュー */
nav.gNavi {
  position: relative;
}
nav.gNavi ul {
  padding: 20px 0 0 0;
}

nav.gNavi ul li {
  position: relative;
}

nav.gNavi ul li:before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 0;
}

nav.gNavi  {
  	  text-align: center;
}

nav.gNavi ul li a {
  display: block;
  position: relative;
  padding: 0 35px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

nav.gNavi a:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #e7141a;/*下線の色*/
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

nav.gNavi ul li a:hover {
    color: #333;
    background-color: rgba(255,255,255,0.8);
}

nav.gNavi a:hover:after {
  -webkit-transform: scaleX(0.5);
  -ms-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

nav.gNavi a:hover {
  color: #333;
  background-color: rgba(200,178,142,1.0);
}

nav.gNavi ul li a span {
  display: block;
  color: #333;
  font-weight: bold;
  text-align: center;
}

nav.gNavi a span {
  color: #fff;
}

nav.gNavi ul li a .en {
  font-size: 12px;/*ナビアルファべと表記*/
}

/* 上下メニュー共通 */
nav ul li {
  display: inline-block;
}

/* フッター */
footer {
  position: relative;
  padding: 0 0 20px;
  background: #55acee;
}


footer #footerInfo {
  display: table;
  width: 100%;
  text-align: center;
  vertical-align: bottom;
  color: #fff;
}

footer #footerInfo div {
  display: table-cell;
  width: 33.3333%;
  vertical-align: bottom;
}

footer #footerInfo a {
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  color: #fff;;
}

footer #footerInfo span {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
@media (max-width: 768px) {
  footer #footerInfo a {
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;;
}

footer #footerInfo span {
  font-size: 25px;
  font-weight: bold;
  color: #fff;
}  
}

footer nav {
  margin-top: 0px;
}

footer nav ul {

  padding: 0 0 20px 0;
  text-align: center;
}

footer nav ul li {
 /* margin-top: 10px; */
  padding-top: 40px;
}

footer nav ul li a {
  position: relative;
  display: inline-block;
  margin-left: 30px;
  color: #fff;
  text-decoration: none;
  transition: .3s;
}

footer nav /*ul li:first-child*/ a {
  margin-left: 0;
}

footer nav .pc li a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #ccc;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

footer nav .pc li a:hover:after {
  width: 100%;
}

footer .copyright {
  margin-top: 40px;
  font-size: 14px;
  text-align: center;
  color: #fff;
}



@media (max-width: 768px) {
  footer {
  padding: 0 0 20px 0;
}

footer #footerContact ul,
footer #footerNav nav {
  margin-top: 0px;
}

footer #footerContact .btn a {
  font-size: 18px;
}

footer #footerContact .phone {
  margin-top: 20px;
}

footer #footerContact .phone a {
  line-height: 1.0;
}

footer #footerContact h3 {
  font-size: 16px;
}

footer #footerContact li {
  width: 95%;
}

footer #footerLogo img {
  max-width: 80%;
  text-align: center;
}

footer #footerInfo {
  display: block;
  margin-top: 20px;
  padding-top: 0px;
	  text-align: center;
}

footer #footerInfo div {
  display: block;
  width: 95%;
  margin: 0 auto;
}

footer #footerInfo div:nth-child(1),
footer #footerInfo div:last-child {
  text-align: center;
}

footer #footerInfo  {
  margin-top: 15px;
}

footer #footerInfo span {
  font-size: 17px;
}

footer #footerNav nav ul {
  margin-top: 0px;
  padding: 0;
  border-top: 1px solid #008fde;
}

footer #footerNav nav ul li {
  display: block;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid #55acee;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

footer  #footerNav nav li:nth-child(odd) {
  border-right: 1px solid #008fde;
}

footer  #footerNav nav ul li a {
  display: block;
  margin: 0;
  background: #008fde;
  line-height: 44px;
  color: #ffffff;
  text-decoration: none;
}

footer nav ul li a:hover {
  background: #333333;
  text-decoration: none;
}

footer .copyright {
  margin-top: 20px;
  font-size: 12px;
}
}
  

/* メインコンテンツ共通 */
main {
  display:block; /* for IE11 */
}

#container {
  position: relative;
  padding-top: 100px;
}
#container h2 {
    margin-bottom: 50px;
    margin-bottom: 100px;
  }

@media (max-width: 768px) {
  #container {
  position: relative;
  padding-top: 50px;
}

section {
  min-width: initial; /* 背景切れ対策 */
  min-width: auto;
  padding: 30px 0;
}
}


main section p:last-child {
  margin-bottom: 0;
}

main a:link {
  color: #333;
}

main section:first-child a:hover {
  opacity: 0.6;
}

main li {
}

main p,
main li,
main dl,
main table {
  line-height: 1.5;
}

main p {
  text-align: justify;
  text-justify: inter-ideograph;
   /* margin-bottom: 30px;*/
}

/* topページ以外のH2 */

.pageHeader {
  display: table;
  width: 100%;
  height: 230px;
  margin: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url(../images/common/bg_pageheader.png);
  color: #fff;
}
.pageHeader > div {
  display: table-cell;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center bottom;
  vertical-align: middle;
  text-align: center; 
}

@media (max-width: 768px){
.pageHeader {
  display: table;
  width: 100%;
  background-image: url(../images/top/img_catch01_s.png);   
  height: 120px;
  margin: 80px 0 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  color: #fff;
  }
  }
#pContainer .secTtl .ja {
  font-family: serif;/*　オオカワクリーンズの仕事　*/
  margin-top: 50px;
  font-size: 240%;
  font-weight: 800;
}

#pContainer .secTtl .en {
  font-family: serif;/*　Our Works　*/
  margin-top: 10px;
  margin-bottom: 50px;
  font-size: 150%;
  color: #e7141a;
}

@media (max-width: 768px){
#pContainer .secTtl .ja {
  font-size: 140%;
  font-weight: 800;
  
  }

#pContainer .secTtl .en {
  font-family: serif;/*　Our Works　*/
  font-size: 120%;
  color: #e7141a;
  margin-bottom: 30px;
}
}

/* headlines */


#container .secTtl .ja {
  font-family: serif;/*　オオカワクリーンズの仕事　*/
  margin-top: 10px;
  font-size: 250%;
  font-weight: 800;
}

#container .secTtl .en {
  font-family: serif;/*　Our Works　*/
  margin-top: 10px;
  font-size: 190%;
  color: #e7141a;
}

@media (max-width: 768px){
#container .secTtl .ja {
  font-family: serif;/*　オオカワクリーンズの仕事　*/
  font-size: 140%;
  font-weight: 800;
  
  }

#container .secTtl .en {
  font-family: serif;/*　Our Works　*/
  font-size: 120%;
  color: #e7141a;
  margin-bottom: -50px;
}
}

.secTtl .ja2 {
  font-family: ;
  font-size: 220%;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0;
}

.secTtl .en2 {
  margin-bottom: 50px;
  font-size: 130%;
  font-weight: 500;
}
@media (max-width: 768px) {
.secTtl .ja2 {
  font-family: ;
  font-size: 130%;
}

.secTtl .en2 {
  font-size: 95%;
  margin-bottom: 10px;
}  
}

/*=======================================
ユーティリティ
=======================================*/

/* DL */
.line_tbl {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ccc;
  background-color: transparent;
  width: 95%;
  display: block; margin: 0 auto;
}
.line_tbl dt {
  float: left;
  clear: left;
  width: 120px;
  padding: 10px;
  text-align: center;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ccc;
}
.line_tbl dd {
  padding: 10px;
  margin-left: 150px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ccc;
}
.line_tbl dt:first-child,
.line_tbl dt:first-child + dd {
  padding-top: 0;
  border-top: none;
}

/* img caption */
figure {
  position: relative;
  overflow: hidden;
}
figure img {
  vertical-align: bottom;
}
figcaption {
  position: absolute;
  bottom: -30px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 30px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover figcaption {
   bottom: 0;
}
figure figcaption p {
  padding-top: 2px;
  color: #fff;
  text-align: center;
}

/* border_box */
.border_box {
  padding: 0.5em;
  border: 1px solid #cccccc;
}

/* embed youtube */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* embed googlemap */
.googleMap {
  position: relative;
  padding-bottom: 30%;
  height: 0;
  overflow: hidden;
}
.googleMap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
}

section {
  min-width: 1080px; /* 背景切れ対策*/
  padding: 80px 0;
}

/****詳細はこちら　ボタン***/
.button {
  display: block;
  width: 200px;
  /*height: 40px;*/
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  
  /*background-color: #fff;*/
  border: 2px solid #9A9A9A;
  /*color: #333;*/
  /*line-height: 40px;*/
  margin-left: 160px;
}

@media (max-width: 768px) {
  .button{
    display: block;
    width: 250px;
    font-size: 15px;
    margin: 0 auto;
    line-height: 25px;
    /*margin-left:10px;*/
    
  }
}

.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: button;
  -moz-box-sizing: button;
  box-sizing: button;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button:hover {
  background-color: #fff;
  font-weight: 600;
  /*border-color: #fff;
  color: #59b1eb;*/
}

.fdnon {
  text-decoration: none;
  color: #333;
}


#top01 {
  background: #e5f3fb;
}
#top02 {
  background: #f0f7f1;
}
#top03 {
  background: #f7f9fa;
  border-bottom: 30px solid #008fde;  
}


#top01 hr {
	border: none;
	border: solid 2px #008fde;
    margin: 10px auto;
}
#top02 hr {
	border: none;
	border: solid 2px #6fc67a;
    margin: 10px auto;
}
#top03 hr,
#top05 hr {
	border: none;
	border: solid 2px #e7141a;
    margin: 10px auto;
}

#top01 ul p,
#top02 ul p,
#top03 ul p,
#top05 ul p{  
 display: block;
 width: 390px;
 padding: 30px 20px 0px 20px;
}


@media (max-width: 768px) {
#top01 hr,
#top02 hr,
#top03 hr,
#top05 hr {
    margin: 3px auto;
} 
#top01 .layout01,
#top02 .layout01,
#top03 .layout01,
#top05 .layout01 {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;  
}
#top01 ul img,
#top02 ul img,
#top03 ul img,
#top05 ul img {
  display: block;
  width: 90%;
  margin: 0 auto
}
#top01 ul p,
#top02 ul p,
#top03 ul p,
#top05 ul p {
  display: block;
  width: 90%;
 padding: 0px 20px 10px 20px;  
}

#top05 {
  display: block;
  width: 90%;
}
}

#top04 {
  background: #e5f3fb;
  border-bottom: 30px solid #008fde;
  align-items: center;
}

/*スタッフ募集画像重なり*/
.example {/*親div*/
  position: relative;
  margin-right: 50px;
  }
.example p {
  position: absolute;
  font-weight: bold; /*太字に*/
  font-size: 100%;/*サイズ等倍*/
  text-align: center;
  top: 0%;
  left: 25%;
  }

.example2 {/*親div*/
  position: relative;
  margin-top: 10px;
  }
.example2 img {/*親div*/
  position: relative;
  margin-top: 10px;
  margin-left: 30px;
  }
.example2 p {
  position: absolute;
  font-family: serif;  
  font-weight: bold; /*太字に*/
  font-size: 260%;/*サイズ等倍*/
  text-align: center;
  color: #e7141a;
  top: 25%;
  left: 10%;
  }

@media (max-width: 768px){
  #top04 .layout01  {
  position: relative;
  margin-left: auto;
  margin-right: auto;  
} 
  #top04 .layout01 .example {/*親div*/
  position: relative;
  margin-top: 20px;
  margin-right: 10px;
  } 
  #top04 .layout01 .example p {
  position: absolute;
  font-weight: bold; /*太字に*/
  font-size: 90%;/*サイズ等倍*/
  text-align: center;
  top: -20%;
  left: 15%;
  }
  #top04 .layout01 .example p span{
  font-weight: bold; /*太字に*/
  font-size: 50%;/*サイズ等倍*/
  text-align: center;
  }
#top04 .layout01 .example img {
  width: 100%;
  }
#top04 .layout01 .example2 {/*親div*/
  position: relative;
  margin-top: -30px;
  margin-right: 20px;
  }
#top04 .layout01 .example2 p {
  position: absolute;
  font-weight: bold; /*太字に*/
  font-size: 180%;/*サイズ等倍*/
  text-align: center;
  color: #e7141a;
  top: 0px;
  left: 5%;
  }
#top04 .layout01 .example2 img {
  width: 100%;
  margin-top: 0px
  margin-left: 25px;
  } 
}




/*=======================================
カラムレイアウト
=======================================*/

/* 2col */

/* 50%+50% */
.layout01 {
  float: left;
  width: 530px;
  margin: 0px 20px 0 0;
}

.layout01:nth-child(even) {
  margin-right: 0;
}

.layout01:nth-child(2n+1) {
  clear: left;
}







/* 3col */
.layout02 {
  float: left;
  width: 330px;
  margin: 0px 15px 0 15px;
}

.layout02:nth-child(3n) {
  margin-right: 0;
}

.layout02:nth-child(3n+1) {
  clear: left;
}

/* 4col */
.layout03 {
  float: left;
  width: 237px;
  margin: 30px 44px 0 0;
}

.layout03:nth-child(4n) {
  margin-right: 0;
}

.layout03:nth-child(4n+1) {
  clear: left;
}

/* 6col */
.layout04 {
  float: left;
  width: 160px;
  margin: 30px 24px 0 0;
}

.layout04:nth-child(6n) {
  margin-right: 0;
}

.layout04:nth-child(6n+1) {
  clear: left;
}

/* テキスト＋画像 */

.layoutRight .img {
  float: right;
  width: 380px;
}

.layoutRight .txt {
  float: left;
  width: 650px;
}

/* 画像＋テキスト */

.layoutLeft .img {
  float: left;
  width: 380px;
}

.layoutLeft .txt {
  float: right;
  width: 650px;
}

/* ページトップへ戻る */
#pageTop{
  position:fixed;
  bottom:20px;
  right:20px;
  cursor:pointer;
}

/*=======================================
top
=======================================*/

/* bgSwitcher */
.main_visual {

}

.main_visual img {
  width: 100%;/*メイン画像のサイズ指定*/
  max-height: 550px;
  object-fit: cover;
}

/*メイン画像重なり*/
.main_visual .example {/*親div*/
  position: relative;
  }

.main_visual .example p {
  position: absolute;
  font-weight: bold; /*太字に*/
  font-size: 50px;/*サイズ等*/
  letter-spacing: 0.1em;/*文字間隔*/
  color: #fff;
  top: 40%;
  left: 20%;
  }

.main_visual .example p span {
  font-weight: bold; /*太字に*/
  font-size: 60px;/*サイズ*/
  letter-spacing: 0.1em;/*文字間隔*/  
  }

.main_visual .example img {
  width: 100%;
  }


@media (max-width: 768px) {
.main_visual .example {/*親div*/
  position: relative;
  }

.main_visual .example p {
  position: absolute;
  padding-right: 10px;
  font-weight: bold; /*太字に*/
  font-size: 22px;/*サイズ等*/
  letter-spacing: 0.05em;/*文字間隔*/
  text-align: center;
  color: #fff;
  top: 50%;
  left: 8%;
  }

.main_visual .example p span {
  font-weight: bold; /*太字に*/
  font-size: 26px;/*サイズ*/
  letter-spacing: 0.05em;/*文字間隔*/  
  }

.main_visual .example img {
  width: 100%;
  height: 300px;
  }
}




/*=======================================
top
=======================================*/

/* topページのH2 */
.mainvisual {
  display: table;
  width: 100%;
  height: 550px;
  margin: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url(../images/top/img_catch01.png);
  color: #fff;
}
.mainvisual > div {
  display: table-cell;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center bottom;
  vertical-align: middle;
  text-align: center; 
}
.mainvisual h2 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.1em;/*文字間隔*/  
  line-height: 1;
  text-shadow:
  0px 4px 3px rgba(0,0,0,0.4),
  0px 8px 13px rgba(0,0,0,0.1),
  0px 18px 23px rgba(0,0,0,0.1);
}
.mainvisual h2 span {
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 0.1em;/*文字間隔*/  
  line-height: 1;
  text-shadow:
  0px 4px 3px rgba(0,0,0,0.4),
  0px 8px 13px rgba(0,0,0,0.1),
  0px 18px 23px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
.mainvisual {
  display: table;
  width: 100%;
  background-image: url(../images/top/img_catch01_s.png);   
  height: 300px;
  margin: 80px 0 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  color: #fff;
}

.mainvisual h2 {
  font-size: 25px;
  /*font-weight: 400;*/
  letter-spacing: 0em;/*文字間隔*/ 
  line-height: 2;
}
.mainvisual h2 span {
  font-size: 27px;/*サイズ*/

  }
/*.mainvisual {
   background-image: url(../images/top/img_catch01_s.png);   
  }*/
  }


/* 垂直中央 */

  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;

  -webkit-box-align: center;
  -ms-flex-align: center;

/* 水平中央 */
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
}



#top01  supan {
  margin-left: 0.75em; 
}


/*
#top #top02 .layout01 li i {
  padding: 0 5px 0;
}

#top #top02 ul + ul li {
  padding: 48px 10px 10px;
  background:#eee;
  background-size: 50%;
  border-radius: 4px;
  font-weight: bold;
  box-sizing: border-box;
  text-align: center;
}
*/
/*#top #top02 ul + ul li:nth-of-type(1) {
  background: #eee url(../images/top/top_business_g.png) top 10px center / auto no-repeat;
}

#top #top02 ul + ul li:nth-of-type(2) {
  background: #eee url(../images/top/icon_service_02.png) top 10px center / auto no-repeat;
}

#top #top02 ul + ul li:nth-of-type(3) {
  background: #eee url(../images/top/icon_service_03.png) top 10px center / auto no-repeat;
}

#top #top02 ul + ul li:nth-of-type(4) {
  background: #eee url(../images/top/icon_service_04.png) top 10px center / auto no-repeat;
}

#top #top02 ul + ul li:nth-of-type(5) {
  background: #eee url(../images/top/icon_service_05.png) top 10px center / auto no-repeat;
}

#top #top02 ul + ul li:nth-of-type(6) {
  background: #eee url(../images/top/icon_service_06.png) top 10px center / auto no-repeat;
}

#top #top02 ul + ul li:nth-of-type(7) {
  background: #eee url(../images/top/icon_service_07.png) top 10px center / auto no-repeat;
}*/

/*タブ　スタッフ募集*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:0px 0;
  width: 100%;
}

@media (max-width: 768px) {
  .tab-wrap {
  display: flex;
   width: 300px;
}  
}


.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #008CD6;

  display: block;
  order: -1;
}
.tab-label {
  color: #4C524C;
  background: #FCE1E2;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-switch:checked+.tab-label {
  background: #008CD6;
  color: #fff;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 30px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .tab-switch:checked+.tab-label+.tab-content {
  padding: 0px;
}
  
}

.tab-switch {
  display: none;
}
.tab-switch:checked+.tab-label:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #008CD6;
    border-width: 14px;
    margin-left: -14px;
}
.tab-switch:checked+.tab-label {
    background: #008CD6;
    position: relative;
}/*タブ　スタッフ募集*/


/*box　お問い合わせ*/
.box-G {
    background-color: #fff;
    width: 60%;
   /* margin: 2em 0;*/
    padding: 2em;
    position: relative;
    z-index: 1;
    display: block; margin: 0 auto;
  
  
}
.box-G::before,
.box-G::after {
    /*border-radius: 4px;*/
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.box-G::before {
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    top: 0;
    z-index: -1;
}
.box-G::after {
    background-color: #e5f3fb;
    top: 15px;
    left: 15px;
    z-index: -2;
}

.sign {
  display: inline; float: right;
  font-family: serif;
  font-weight: bold;
  font-size: 130%;
  margin-top: 110px;
}
@media (max-width: 768px) {
.sign {
  font-size: 120%;
  margin-top: 50px;
}



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

	スマホ基本設定

============================================================================*/
@media (max-width: 768px) {
  body{
  position: relative;
  min-width: 100%;
  font-size: 13px;
  font-weight:300;
}

header,
section,
#pageHeader .inner,
/*main .inner,*/
footer .inner {
  width: 100%;
}

/* smartphone only */
.pc {
  display: none !important;
}

.pc_inline {
  display: none !important;
}

.sp {
  display: block !important;
}

.sp_inline {
  display: inline !important;
}

.btn a {
}

/*header*/

header {
	display:none;
}



/*#navi*/
.gNavi{
  display:none !important;
}

#tagLine {
  padding: 5px 0;
  background: #fff;
  font-size: 13px;
  text-align: center;
}


/*	#main　*/
main {
  margin: 0 auto;
  width: 100%;
}

main .inner, #groupBnr .inner {
  width: 95%;
}

main img {
  width: 100%;
  max-width: 100%;
}

/*main .contentImg {
  margin-top: 10px;
}*/

#container {
  /*margin-top: -50px;*/
  padding-top: 50px;

}

section {
  min-width: initial; /* 背景切れ対策 */
  min-width: auto;
  padding: 30px 0;
}

main h3 {
  font-size: 18px;
}

main h4, main p, main th, main td, main li, main dt, main dd {
  font-size: 17px;/*スマホ フォントサイズ*/
  line-height: 2em;
}

main figcaption p {
  font-size: 13px;
}

table.rwdTbl,
table.rwdTbl tr,
table.rwdTbl th,
table.rwdTbl td {
  box-sizing: border-box;
}
.rwdTbl { 
  width: 100%;
}
.rwdTbl th,
.rwdTbl td {
  width: 100%;
  display: block;
  border-top: none;
  text-align: center;
}
table.rwdTbl tr:first-child th {
  border-top: 1px solid #ddd;
}


#pageTop {
  right:0;
  bottom: 10px;
}

#pageTop img {
  max-width: 60%;
}


/*	templates　*/


/*  回り込み  */
.flImgL,
.flImgR,
.flImgC {
  width: 50%;
}

/*  news line  */
.line_tbl dt {
  width: 90px;
}
.line_tbl dd {
  margin-left: 100px;
}

/* img caption */
figcaption {
  bottom: 0;
  background: rgba(0,0,0,.6);
  -webkit-transition: none;
  transition: none;
}

figure figcaption p {
  padding-top: 5px;
}

/* カラムレイアウト */
.layout01,
.layout01 img,
#top #top03 .bnr .layout01,
#top #top03 .bnr .layout01 img,
.layout02,
.layout02 img,
.layout03,
.layout03 img,
.layoutLeft,
.layoutLeft .img,
.layoutLeft .img img,
.layoutLeft .txt,
.layoutRight,
.layoutRight .img,
.layoutRight .img img,
.layoutRight .txt {
  float: none;
  width: 95%;
}

.layoutLeft .txt {
  margin-top: 15px;
}

.layout04 {
  width: 48%;
  margin-right: 4%;
}
.layout04 img {
  width: 100%;
}
.layout04:nth-child(2n) {
  margin-right: 0;
}

.layout01 img,
.layout02 img,
.layout03 img,
.layout04 img,
.layoutLeft img,
.layoutRight img {
  display: block;
  margin-top: 10px;
}
.layout02 {
  display: block;
  margin-top: 10px;
}

.fzL {
  font-size: 145%;
}

.googleMap {
  padding-bottom: 90%;
}
}