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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.home.page .entry-title {
  display: none;
}

.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags {
  display: none;
}

.home-hero {
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 64px 32px;

  background: linear-gradient(
    110deg,
    #f1f7fc 0%,
    #e4f0fa 55%,
    #d6e9f7 100%
  );

  border-radius: 8px;
}

.home-hero__inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.home-hero__title {
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.4;
  margin: 16px 0;
}

.home-hero__button {
  display: inline-block;
  padding: 14px 28px;
  background: #2768a8;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}


@media (max-width: 767px) {
  .home-hero {
    min-height: 360px;
    padding: 48px 20px;
  }
}

.home-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1023px) {
  .home-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .home-categories {
    grid-template-columns: 1fr;
  }
}


/* ==================================
   ヘッダー PC
================================== */

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

  /* ヘッダー全体 */
  .header-container {
    background-color: #fff;
    border-bottom: 1px solid #e5eaf0;
  }

  .header-container-in.hlt-top-menu .header-in {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
  }

  /* ロゴ画像 */
  .header-container-in.hlt-top-menu
  .logo-header img.site-logo-image {
    width: 270px;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  /* ナビゲーション */
  .navi {
    background-color: transparent;
  }

  .navi-in a {
    color: #172438;
    font-size: 14px;
    font-weight: 600;
  }

  .navi-in a:hover {
    color: #2768a8;
  }

}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}