@charset "UTF-8";

/* ************************************************************************************************

   共通

   ************************************************************************************************ */

html,body {
  width: 100%;
  height: 100%;
  font-size: 62.5%; /*ベースを10pxに設定*/
  letter-spacing: .3em;
  font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #fff;
  background: #222;
}

@font-face {
  font-family: 'Franklin';
  src: url('font/Franklin Gothic Book Regular.eot'); /* IE9以上用 */
  src: url('font/Franklin Gothic Book Regular.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
  url('font/Franklin Gothic Book Regular.woff') format('woff'), /* モダンブラウザ用 */
  url('font/Franklin Gothic Book Regular.ttf') format('truetype'); /* iOS, Android用 */
  font-weight: normal;
}

h2 {font-size: 3.6rem;}
h3 {font-size: 3rem; line-height: 1.8;}
h4 {font-size: 2.6rem; line-height: 1.8;}
h5 {font-size: 2rem; line-height: 1.8;}
h6 {font-size: 1.8rem; line-height: 1.8;}

p {
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 400;
}

a{
  font-size: 1.4rem;
  text-decoration: none;
}


/* 改行 */
.br_sp{display: none;} /*スマホだけ改行 */
.br_pc{display: block;} /*PCだけ改行 */

/* マウスドラッグした時の文字色 */
::selection{
  background: #ccc;
  color: #fff;
}

/* ページ全体の余白など */
#page {
  overflow: hidden;
  width: 100%;
}

.container{
  width: 960px;
  margin: 0 auto;
}

/* 装飾線 */
.main__line {
  display: block;
  margin: 1rem auto 2rem;
}

.sub__line {
  display: block;
  margin: 1.5rem auto 3rem;
}


/***** 見出し *****/
.index__ttl{
  text-align: center;
  margin-bottom: 6rem;
  font-family: 'Caveat', cursive;
  letter-spacing: .4rem;
}

.works .index__ttl,
.access .index__ttl {
  color: #222;
}

.access .index__ttl{
  margin-bottom: 4rem;
}

.works .index__ttl{
  text-align: left;
  border-bottom: 7px double #222;
  border-left: 7px double #222;
  padding: 0 0 1.5rem 1.5rem;
}

.news .index__ttl{
  text-align: left;
  border-bottom: 7px double #fff;
  border-left: 7px double #fff;
  padding: 0 0 1.5rem 1.5rem;
}

.index__ttl--ja{
  font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: normal;
  font-size: 2.5rem;
}


/***** ヘッダー *****/
header{
  height: 90px;
  position: fixed;
  top: 0;
  transition: .5s;
  width: 100%;
  z-index: 10;
}

header:hover {
    background: rgba(0,0,0,0.6);
}

.header__ttl a {
    font-size: 3.8rem;
    font-family: 'Caveat', cursive;
}

.header-nav__list,
.header-nav__list--single {
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  transition: .5s;
}

header .container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}

.header-nav__item,
.header-nav__item--single{
  display: block;
  margin: .5rem 0;
}

.header-nav__item:first-child,
.header-nav__item--single:first-child {
  font-family: 'Franklin';
  font-size: 1.7rem;
}

.header-nav__item:last-child,
.header-nav__item--single:nth-child(2) {
  font-size: 1.2rem;
}

#nav-drawer{
  display: none;
}


/***** 下層ページヘッダー部分 *****/
.header-sub{
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 50vh;
  position: relative;
}

.header-sub__item {
  text-align: center;
  position: absolute;
  width: 400px;
  height: 180px;
  top: 80px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.header-sub__line {
    margin: 1rem 0;
}

.header-sub__ttl{
  margin-bottom: 0.5rem;
  font-family: 'Caveat', cursive;
  letter-spacing: .1em;
}

.header-sub__txt{
  letter-spacing: .1em;
}


/***** アクセス *****/
.access{
  background-size: cover;
  padding: 8rem 0 3rem;
}

.access__container{
  width: 800px;
  background: #fff;
  margin: 0 auto;
  padding: 4rem 3rem;
  border: 10px double #222;
}

.access__contents{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.access__item{
  color: #222;
}

.access__ttl{
  margin-bottom: 2rem;
}

.access__txt{
  margin-bottom: 3rem;
}

.access__tel{
  font-family: 'Franklin';
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 2rem;
  display: block;
  transition: .3s;
}


/***** フッター *****/
footer{
  text-align: center;
  margin-top: 8rem;
}

.footer__sns{
  margin-bottom: 4rem;
}

.footer__icon{
  margin: 0 .7rem;
}

small{
  font-size: 1.2rem;
}


/* ************************************************************************************************

   index.php

   ************************************************************************************************ */

/***** 余白 *****/
.main, .works, .news, .access{
  padding: 8rem 0;
}


/***** メインイメージ *****/
.header-main{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.header-main__movie {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  transition: ease 1s;
  filter: opacity(0.6);
}

.header-main__txt {
  font-family: 'Caveat', cursive;
  color: #222;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1000px;
  height: 42px;
  font-size: 4.2rem;
  text-align: center;
}


/***** メインコンテンツ *****/
.main {
    padding: 8rem 0 2rem;
}

.main__contents1, .main__contents2{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rem;
}

.main__item{
  width: 46%;
}

.main__ttl {
  text-align: center;
}

.main__img {
    border: 6px solid #fff;
}

/***** メニュー *****/
.works{
  background: #fff;
}

.works__contents{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 840px;
  margin: 0 auto 3rem;
}


/***** ニュース *****/
.news__line{
  display: block;
  margin: 0 auto;
}

.news__contents{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rem;
}

.news__item {
  text-align: center;
}

.news__thumbnail {
  margin-bottom: 2rem;
}

.news__thumbnail img {
  width: 220px;
  height: auto;
  max-width: 100%;
}

.news__date {
  font-size: 1.2rem;
  color: #ccc;
}

.news__ttl {
  margin-top: .5rem;
}


/***** 背景画像 *****/
.index__bg{
  background-image: url(../images/index/index_main_bg01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 60vh;
}

/*IEのみ*/
@supports (-ms-ime-align: auto) {
  .index__bg{
    background-attachment: scroll;
  }
}



/* ************************************************************************************************

   concept.php

   ************************************************************************************************ */

/***** 余白 *****/
.concept01{
  padding: 5rem 0 8rem;
}

.concept02{
  padding: 8rem 0;
}

/***** コンセプトその１ *****/
.concept01__item{
  text-align: center;
}

.concept01__txt{
  margin-top: 3rem;
}


/***** パララックス画像 *****/
.concept__bg{
  background-image: url(../images/subpage/concept_main_bg01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 60vh;
}


/***** コンセプトその２ *****/
.concept02__container{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 900px;
  margin: 0 auto;
}

.concept02__item{
  width: 350px;
  height: 350px;
  border: 5px double #fff;
  box-sizing: border-box;
  padding: 5% 3%;
  text-align: center;
  margin: 0 5rem 6rem;
}

.concept02__line {
    border-bottom: 5px dotted #fff;
    width: 50%;
    margin: 1rem auto 0;
}

.concept02__txt{
  margin-top: 3rem;
}


/* ************************************************************************************************

   works.php

   ************************************************************************************************ */

/***** 余白 *****/
.works02{
  margin: 0 0 10rem;
}

.works03{
  margin: 0 0 8rem;
}

/***** メニュー *****/
.works02__img{
  display: block;
  margin: 0 auto;
  border: 7px solid #fff;
}

.works02__ttl{
  margin: 4rem 0;
  text-align: center;
}

.works02__ttl-en{
  font-family: 'Caveat', cursive;
}

.works02__txt{
  text-align: center;
}

.works02__table {
  margin: 4rem auto 0;
  font-size: 1.6rem;
  line-height: 1.5;
}

.works02__table tr{
  border-bottom: 1px solid #ccc;
}

.works02__table th{
  text-align: left;
  width: 50%;
  padding: 2rem 1rem 1rem;
  font-weight: 500;
  vertical-align: middle;
}

.works02__table td{
  text-align: right;
  width: 50%;
  padding: 2rem 1rem 1rem;
  vertical-align: middle;
}

/***** その他メニュー *****/
.works03__item{
  width: 350px;
  height: 350px;
  margin: 0 auto 3rem;
  border: 3px dashed #fff;
  padding: 4rem;
}

.works03__ttl-en{
  font-family: 'Caveat', cursive;
  text-align: center;
}

.works03__ttl-ja{
  margin-bottom: 3rem;
  text-align: center;
}

.works03__table {
  margin: 0 auto;
  font-size: 1.4rem;
  width: 100%;
}

.works03__table th{
  text-align: left;
  width: 60%;
  padding: 1rem;
  font-weight: 500;
}

.works03__table td{
  text-align: right;
  width: 40%;
  padding: 1rem;
}

.works03__txt{
  text-align: center;
}


/* ************************************************************************************************

   recruit.php

   ************************************************************************************************ */

/***** 余白 *****/
.recruit01, .recruit02{
  padding: 0 0 8rem;
}

.recruit03{
  padding: 8rem 0;
}

/***** コンテンツ *****/
.recruit01__img{
  width: 100%;
  display: block;
  margin: 0 auto;
  border: 7px solid #fff;
}

.recruit01__item{
  margin-top: 5rem;
  text-align: center;
}

.recruit02__box{
  width: 800px;
  margin: 0 auto 5rem;
  border: 10px double #fff;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4rem;
}

.recruit02__box:last-child{
  margin-bottom: 0;
}

.recruit02__item{
  width: 300px;
  text-align: center;
}

.recruit02__line {
    border-bottom: 5px dotted #fff;
    width: 80%;
    margin: 1rem auto 0;
}

.recruit02__txt{
  text-align: left;
  margin-top: 3rem;
}

/***** 背景画像 *****/
.recruit__bg{
  background-image: url(../images/subpage/recruit_main_bg01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 60vh;
}

/***** 募集要項 *****/
.recruit03__ttl {
  margin: 0 0 5rem;
  text-align: center;
}

.recruit03__ttl-en{
  font-family: 'Caveat', cursive;
}

.recruit03__table{
  width: 700px;
  margin: 0 auto 8rem;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
}

.recruit03__table tr{
  border-bottom: 1px solid #ccc;
}

.recruit03__table th{
  width: 25%;
  padding: 2rem;
  vertical-align: middle;
}

.recruit03__table td{
  width: 75%;
  padding: 2rem;
  vertical-align: middle;
}

.recruit03__contact{
  width: 700px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-around;
  padding: 4rem 0;
  border: 3px dashed #fff;
}

.recruit03__contact--mail a {
  font-size: 1.2rem;
}

.recruit03__txt{
  margin-bottom: 1.5rem;
  text-align: center;
}

.recruit__tel{
  font-family: 'Franklin';
  font-size: 2rem;
  line-height: 50px;
  font-weight: bold;
  display: block;
  transition: .3s;
}


/* ************************************************************************************************

   company.php

   ************************************************************************************************ */
.company__img{
  width: 100%;
  display: block;
  margin: 0 auto 5rem;
  border: 7px solid #fff;
}

.company__table{
  width: 700px;
  margin: 0 auto 8rem;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
}

.company__table tr{
  border-bottom: 1px solid #ccc;
}

.company__table th{
  width: 26%;
  padding: 2rem;
  vertical-align: middle;
}

.company__table td{
  width: 74%;
  padding: 2rem;
  vertical-align: middle;
}

.company__footer {
  background-position: center;
  padding: 1rem 0 8rem;
}