@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 
* ヘッダーロゴ左寄せ
*/
.logo {
  text-align: left;
}
/* フロントページのアピールエリア高さ */
/* アピールエリア高さリセット */
.front-top-page .appeal-in {
  min-height: unset;
}
.front-top-page .appeal {
  background-image:url("img/keytoprogo.png");
  width: 100%;
  max-width: 1256px;
  min-width: 800px;
  aspect-ratio: 1600 / 750;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  border-radius: 20px;
  overflow: hidden
}
.content {
  margin-top: 0;
}
.home .main {
  position: relative;
  top: 0;
}
#main {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0 !important;
}
.home .wrap,
.home .content,
.home .main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* アピールエリア画像を設定（開発事例） */
.page-id-95 .appeal {
  margin: 0 auto;
  background-size: 1024px 275px;
  background-image:url("img/head_works.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-color: #414342;
}
/* アピールエリア画像を設定（問い合わせ） */
.page-id-72 .appeal {
  margin: 0 auto;
  background-image:url("img/head_contact.png");
  background-size: 1024px 275px;
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-color: #F7C4C8;
}
/* アピールエリア画像を設定（リクルート） */
.page-id-138 .appeal {
  margin: 0 auto;
  background-image:url("img/head_recruit.png");
  background-size: 1024px 275px;
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-color: #02C6FE;
}
/* アピールエリア画像を設定（福利厚生） */
.page-id-317 .appeal {
  margin: 0 auto;
  background-image:url("img/head_benefits.png");
  background-size: 1024px 275px;
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-color: #CD9F6A;
}
/* アピールエリア画像を設定（個人情報保護） */
.page-id-2 .appeal {
  margin: 0 auto;
  background-image:url("img/head_privacy.png");
  background-size: 1024px 275px;
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-color: #D3D3D3;
}
/* アピールエリア画像を設定（個人情報取り扱い） */
.page-id-3 .appeal {
  margin: 0 auto;
  background-image:url("img/head_personal.png");
  background-size: 1024px 275px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #D0CDD0;
  background-position: center;
}
/* アピールエリア画像その他 */
.appeal {
  margin: 0 auto;
  background-image:url("img/head_corporate.png");
  background-size: 1024px 275px;
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-color: #B9FFFC;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下タブレット横・ノートPCなど*/
@media screen and (max-width: 1023px){
  /* アピールエリア画像を設定（サブページ） */
  .appeal-in {
    min-height: unset !important;
  }
  .page-id-56 .appeal, 
  .page-id-95 .appeal,
  .page-id-72 .appeal,
  .page-id-858 .appeal, 
  .page-id-138 .appeal,
  .page-id-317 .appeal,
  .page-id-2 .appeal,
  .page-id-3 .appeal {
    height: auto !important;
    width: 100%;
    aspect-ratio: 1024 / 275;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .content-top {
    margin: 0;
  }
}	

/*834px以下 タブレット縦～スマホ*/	
/* フロントページのアピールエリア高さ */
@media screen and (max-width: 834px) {
  .front-top-page .appeal {
    min-width: auto !important;
    width: 100%;
    aspect-ratio: 800 / 600;
    background-image: url("img/s_top.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #B9FFFC;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .front-top-page .appeal-in {
    min-height: unset !important;
    height: auto !important;
  }

  .front-top-page .appeal,
  header,
  .header-in,
  .header-container,
  .content,
  .main,
  .wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}