@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
*/


/* =========================================================
   HEADER
========================================================= */

#header-in {
  padding-top: 10px;
}


/* =========================================================
   ヘッダーと本文の間隔を詰める
========================================================= */

#content {
  margin-top: 10px !important;
}

#content-in {
  padding-top: 0 !important;
}

#main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   モバイル ハンバーガーメニュー
   LeCLASS準拠
========================================================= */

/* =========================================================
   ヘッダーメニュー全体を繊細に
   PC + モバイル
========================================================= */

/* ---------- PCヘッダー ---------- */

.item-label {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: small !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em;
  color: #222222 !important;
}


/* PCナビリンクそのものにも念のため指定 */

#navi .navi-in > ul > li > a,
#navi .navi-in > ul > li > a .item-label {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 300 !important;
}


/* PCホバー */

#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li > a:hover .item-label {
  background-color: transparent !important;
  color: #c71f2d !important;
}


/* ---------- モバイル ハンバーガーメニュー ---------- */

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

  #navi-menu-content .menu-drawer > li > a,
  #navi-menu-content .menu-drawer .sub-menu a {
    font-family: "Noto Sans JP", sans-serif !important;

    font-size: medium !important;
    font-weight: 300 !important;

    letter-spacing: 0.05em;

    color: #222222 !important;
  }


  /* メニュー内アイコンとの間隔 */

  #navi-menu-content .menu-drawer > li > a i {
    margin-right: 5px;
  }


  /* サブメニュー */

  #navi-menu-content .menu-drawer .sub-menu a {
    font-weight: 300 !important;
  }


  /* 閉じる× */

  .navi-menu-close-button .fa-times {
    font-size: 16px !important;
  }


  /* モバイルヘッダーの影を消す */

  .mobile-header-menu-buttons {
    box-shadow: none !important;
  }

}

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

  /* メニューリンク全体 */
  #navi-menu-content .menu-drawer > li > a,
  #navi-menu-content .menu-drawer .sub-menu a {
    font-size: medium !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 300 !important;
    color: #222222 !important;
    letter-spacing: 0.05em;
  }

  /* メニューアイコンと文字の間隔 */
  #navi-menu-content .menu-drawer > li > a i {
    margin-right: 5px;
  }

  /* サブメニューも細字 */
  #navi-menu-content .sub-menu a {
    font-weight: 300 !important;
  }

  /* ハンバーガーメニュー背景 */
  .navi-menu-content,
  #navi-menu-content,
  .menu-drawer {
    font-family: "Noto Sans JP", sans-serif !important;
  }

  /* 閉じる×を少し小さく */
  .navi-menu-close-button .fa-times {
    font-size: 16px !important;
  }
	
	/* モバイルヘッダーの影を消す */
.mobile-header-menu-buttons {
  box-shadow: none !important;
}

/* ハンバーガーメニューを右から表示 */
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}

}



/* =========================================================
   HIRAKAWA PORTAL
========================================================= */

.hirakawa-portal {
  --hirakawa-red: #c71f2d;
  --hirakawa-red-dark: #a81722;
  --hirakawa-red-light: #e6a2a7;

  --hirakawa-text: #222222;
  --hirakawa-subtext: #666666;
  --hirakawa-border: #eaeaea;
  --hirakawa-bg: #ffffff;

  position: relative;
  left: 50%;

  width: 100vw;
  max-width: none;

  margin-top: 0;
  margin-bottom: 0;
  margin-left: -50vw;
  margin-right: -50vw;

  padding: 0;

  background: var(--hirakawa-bg);
  color: var(--hirakawa-text);

  box-sizing: border-box;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
}


.hirakawa-portal *,
.hirakawa-portal *::before,
.hirakawa-portal *::after {
  box-sizing: border-box;
}


/* =========================================================
   HERO
========================================================= */

.hirakawa-hero {
  position: relative;

  width: 100%;
  max-width: none;

  height: 420px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #f5f5f5;
}


/* =========================================================
   HERO 背景写真
========================================================= */

.hirakawa-hero__photo {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* 写真を白く薄める */

.hirakawa-hero__photo::after {
  content: "";

  position: absolute;

  inset: 0;

  background: rgba(255, 255, 255, 0.58);
}


/* =========================================================
   HERO 赤いアクセント面
========================================================= */

.hirakawa-hero__red {
  position: absolute;

  top: 0;
  left: 0;

  width: 62%;
  height: 100%;

  background:
    linear-gradient(
      135deg,
      #c61f2c 0%,
      #bd1926 70%,
      #a8121e 100%
    );

  clip-path: polygon(
    0 0,
    82% 0,
    57% 100%,
    0 100%
  );
}


/* =========================================================
   HERO タイトル
========================================================= */

.hirakawa-hero__content {
  position: relative;

  z-index: 3;

  width: 90%;
  max-width: 1360px;

  margin: 0 auto;

  padding-top: 58px;

  color: #ffffff;
}


.hirakawa-hero__title {
  margin: 0;
  padding: 0;

  font-size: clamp(28px, 3vw, 44px);

  line-height: 1.5;

  letter-spacing: 0.08em;

  font-weight: 500;

  color: #ffffff;
}


/* タイトル下の細線 */

.hirakawa-hero__line {
  display: block;

  width: 48px;
  height: 0.5px;

  margin: 5px 0;

  background: #ffffff;
}


/* 説明 */

.hirakawa-hero__text {
  margin: 0;
  padding: 0;

  font-size: 14px;

  line-height: 2;

  letter-spacing: 0.05em;

  color: #ffffff;
}


/* =========================================================
   MENU
========================================================= */

.hirakawa-menu {
  position: relative;

  z-index: 10;

  width: 90%;
  max-width: 1360px;

  margin: -125px auto 0;
}


.hirakawa-menu__grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;
}


/* =========================================================
   CARD
========================================================= */

.hirakawa-card {
  position: relative;

  display: block;

  min-height: 132px;

  padding: 18px 20px;

  background: #ffffff;

  border: 1px solid var(--hirakawa-border);
  border-radius: 5px;

  color: var(--hirakawa-text);

  text-decoration: none;

  line-height: 1.6;

  box-shadow: none;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

  box-sizing: border-box;
}


/* Hover */

.hirakawa-card:hover {
  transform: translateY(-4px);

  border-color: #dcdcdc;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.06);

  text-decoration: none;
}


/* クリック不可カード */

.hirakawa-card--disabled {
  cursor: default;
}


/* =========================================================
   ICON
========================================================= */

.hirakawa-card__icon {
  display: none;
}


/* =========================================================
   CARD BODY
========================================================= */

.hirakawa-card__body {
  margin: 0;
  padding: 0;
}


/* =========================================================
   CARD TITLE
========================================================= */

.hirakawa-card__title {
  position: relative;

  display: inline-block;

  margin: 0 0 12px 0;

  padding:
    0
    0
    5px
    40px;

  background: none;

  border: none;

  color: var(--hirakawa-red);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.6;

  letter-spacing: 0.04em;
}


/* 左側の薄赤四角 */

.hirakawa-card__title::before {
  content: "";

  position: absolute;

  left: 0;
  top: 4px;

  width: 20px;
  height: 30px;

  background-color: var(--hirakawa-red-light);

  border: none;

  border-radius: 0;

  opacity: 0.9;
}


/* タイトル下の細線 */

.hirakawa-card__title::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 10px;

  width: 90%;
  height: 0.5px;

  background-color: var(--hirakawa-red-light);
}


.hirakawa-card__title span {
  display: inline-block;

  margin-left: 12px;

  color: var(--hirakawa-red);

  font-weight: 400;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.hirakawa-card__description {
  margin:
    0
    0
    8px
    40px;

  padding: 0;

  color: #555555;

  font-size: 0.95rem;

  font-weight: 300;

  line-height: 1.6;

  letter-spacing: 0.02em;

  opacity: 0.8;
}


/* =========================================================
   CARD ARROW
   文字ではなくCSSだけで描画
========================================================= */

.hirakawa-card__arrow {
  position: absolute;

  right: 22px;
  bottom: 22px;

  width: 52px;
  height: 14px;

  /*
   * HTML内に「→」が残っていても
   * 絶対に表示しない
   */
  font-size: 0 !important;
  line-height: 0;

  color: transparent;

  transition: transform 0.25s ease;
}


/* 横線 */

.hirakawa-card__arrow::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 52px;
  height: 1px;

  background: var(--hirakawa-red);
}


/* 右端の斜線 */

.hirakawa-card__arrow::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;

  width: 14px;
  height: 1px;

  background: var(--hirakawa-red);

  transform-origin: right center;

  transform: rotate(45deg);
}


/* Hover */

.hirakawa-card:hover .hirakawa-card__arrow {
  transform: translateX(5px);
}


/* =========================================================
   BACK
========================================================= */

.hirakawa-back {
  width: 100%;

  text-align: center;

  padding: 32px 20px 60px;
}


.hirakawa-back__link {
  position: relative;

  display: inline-block;

  padding: 5px 18px 10px;

  color: var(--hirakawa-red);

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.05em;
}


.hirakawa-back__link::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 50%;

  width: 100%;
  height: 0.5px;

  background: var(--hirakawa-red-light);

  transform: translateX(-50%);

  transition: width 0.25s ease;
}


.hirakawa-back__link:hover {
  color: var(--hirakawa-red-dark);

  text-decoration: none;
}


.hirakawa-back__link:hover::after {
  width: 65%;
}


/* =========================================================
   COCOON 固定ページ調整
========================================================= */

.page .date-tags {
  display: none !important;
}


.entry-content .hirakawa-portal {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


.entry-content > .hirakawa-portal:first-child {
  margin-top: 0 !important;

  padding-top: 0 !important;
}


/* =========================================================
   投稿者情報・メールアドレス非表示
========================================================= */

.page .author-info,
.page .post-author,
.page .author-box,
.page .author-content,
.page .author-name,
.page .author-description,
.page .post-edit-link,
.page .edit-link {
  display: none !important;
}


/* =========================================================
   フッターロゴ非表示
========================================================= */

.footer-bottom-logo,
.footer-logo,
.footer-logo-image {
  display: none !important;
}


/* =========================================================
   横スクロール防止
========================================================= */

html,
body {
  overflow-x: hidden;
}


/* =========================================================
   PC
========================================================= */

@media screen and (min-width: 768px) {

  .hirakawa-card {
    height: 100%;
  }

}


/* =========================================================
   TABLET
========================================================= */

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

  .hirakawa-hero {
    height: 390px;
  }


  /*
   * 写真をある程度見せるため、
   * 赤面を広げすぎない
   */
  .hirakawa-hero__red {
    width: 70%;

    clip-path: polygon(
      0 0,
      92% 0,
      72% 100%,
      0 100%
    );
  }


  .hirakawa-hero__photo {
    background-position: 65% center;
  }


  .hirakawa-menu {
    margin-top: -105px;
  }


  .hirakawa-menu__grid {
    gap: 12px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

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

  .hirakawa-hero {
    height: 390px;
  }


  /*
   * ★重要
   * 以前の width:100% をやめる。
   * 赤を約72%にして右側に写真を残す。
   */
  .hirakawa-hero__red {
    width: 72%;

    clip-path: polygon(
      0 0,
      100% 0,
      78% 100%,
      0 100%
    );
  }


  /*
   * 本社建物が右側に見えるよう調整
   */
  .hirakawa-hero__photo {
    background-position: 68% center;
  }


  .hirakawa-hero__content {
    width: calc(100% - 32px);

    margin-left: 16px;
    margin-right: 16px;

    padding-top: 55px;
  }


  .hirakawa-hero__title {
    font-size: 28px;

    line-height: 1.45;
  }


  .hirakawa-hero__text {
    font-size: 12px;

    line-height: 1.8;
  }


  /* =======================================================
     カードを1列に
  ======================================================= */

  .hirakawa-menu {
    width: calc(100% - 24px);

    margin-top: -95px;
  }


  .hirakawa-menu__grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }


  .hirakawa-card {
    min-height: 180px;

    padding: 34px 28px;
  }


  .hirakawa-card__title {
    padding-left: 34px;

    font-size: 16px;
  }


  .hirakawa-card__title::before {
    width: 18px;
    height: 30px;
  }


  .hirakawa-card__description {
    margin-left: 34px;

    margin-top: 15px;

    font-size: 13px;

    line-height: 1.8;
  }


  /*
   * ★重要
   * font-size:16px は入れない。
   * → の文字が復活するのを防ぐ。
   */
  .hirakawa-card__arrow {
    right: 24px;
    bottom: 22px;

    width: 52px;
    height: 14px;

    font-size: 0 !important;
  }


  .hirakawa-card__arrow::before {
    width: 52px;
  }


  .hirakawa-back {
    padding-top: 28px;
  }

}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

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

  .hirakawa-hero {
    height: 370px;
  }


  /*
   * 小さいスマホでも写真を残す
   */
  .hirakawa-hero__red {
    width: 74%;

    clip-path: polygon(
      0 0,
      100% 0,
      80% 100%,
      0 100%
    );
  }


  .hirakawa-hero__photo {
    background-position: 70% center;
  }


  .hirakawa-hero__content {
    padding-top: 48px;
  }


  .hirakawa-hero__title {
    font-size: 26px;
  }


  .hirakawa-menu {
    width: calc(100% - 16px);

    margin-top: -82px;
  }


  .hirakawa-card {
    min-height: 182px;

    padding: 34px 28px;
  }


  .hirakawa-card__title span {
    display: block;

    margin: 2px 0 0;
  }


  .hirakawa-card__arrow {
    right: 24px;
    bottom: 20px;

    font-size: 0 !important;
  }

}

/* =========================================================
   フッター
   左：プライバシーポリシー
   右：コピーライト
========================================================= */

/* プライバシーポリシー */
.footer-bottom .navi-footer-in,
.footer-bottom .navi-footer-in a {
  margin: 0 !important;

  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;

  color: #555 !important;
}


/* コピーライト */
.footer-bottom .copyright {
  order: 2;

  margin: 0 !important;
  padding: 0 !important;

  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;

  color: #555 !important;

  text-align: right;
}

/* プライバシーポリシーのホバー */
.footer-bottom .navi-footer-in a:hover {
  color: #c71f2d !important;
  background: transparent !important;
}