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

/************************************
** コスメ・アルーノ
** 清潔感・上品さを重視した共通デザイン
************************************/


/* ========================================
   サイト全体
======================================== */

body,
#container {
  background: #f7f4f5;
}

#content {
  background: transparent;
}


/* ========================================
   メインカラム
======================================== */

.main {
  padding: 30px;
  background: #fffefe;
  border: 1px solid #ebe2e4;
  border-radius: 4px;
  box-shadow: 0 3px 14px rgba(80, 55, 65, 0.035);
}


/* ========================================
   H1：ページタイトル
   ピンク下線＋太いアクセント
======================================== */

.entry-title {
  position: relative;
  margin: 4px 0 40px;
  padding: 8px 4px 18px;

  background: transparent;
  border: none;
  border-bottom: 3px solid #e4b7c2;
  border-radius: 0;

  font-size: 1.65em;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
}


/* H1の濃いピンクアクセント */
.entry-title::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: -3px;

  width: 100px;
  height: 6px;

  background: #bd6f83;
  border-radius: 0 3px 3px 0;
}


/* ========================================
   H2：淡いピンク＋ダイヤモンド
======================================== */

.entry-content h2 {
  position: relative;

  margin: 2.8em 0 1.3em;
  padding: 13px 17px 13px 46px;

  background: #fcf8f9;
  border: none;
  border-radius: 3px;

  font-size: 1.34em;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.015em;
}


/* ピンクの宝石型ダイヤモンド */
.entry-content h2::before {
  content: "";
  position: absolute;

  left: 15px;
  top: 47%;

  width: 22px;
  height: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.50) 0 24%,
      transparent 25%
    ),
    linear-gradient(
      225deg,
      rgba(255,255,255,0.28) 0 27%,
      transparent 28%
    ),
    linear-gradient(
      45deg,
      #b95f78 0 49%,
      #cf8296 50% 100%
    );

  clip-path: polygon(
    24% 0,
    76% 0,
    100% 34%,
    50% 100%,
    0 34%
  );

  transform: translateY(-50%);
}


/* ダイヤモンド中央のカットライン */
.entry-content h2::after {
  content: "";
  position: absolute;

  left: 25px;
  top: 47%;

  width: 1px;
  height: 15px;

  background: rgba(255, 255, 255, 0.55);

  transform: translateY(-52%);
}


/* ========================================
   H3：水色アクセント＋少し濃い下線
======================================== */

.entry-content h3 {
  position: relative;

  margin: 2.2em 0 1.15em;
  padding: 4px 0 9px 17px;

  background: transparent;
  border: none;
  border-bottom: 2px solid #93b8c1;
  border-radius: 0;

  font-size: 1.17em;
  font-weight: 600;
  line-height: 1.65;
}


/* H3の水色アクセント */
.entry-content h3::before {
  content: "";
  position: absolute;

  left: 0;
  top: 0.72em;

  width: 7px;
  height: 7px;

  background: #6695a1;
  border-radius: 50%;
}


/* ========================================
   本文
======================================== */

.entry-content p {
  margin-bottom: 1.55em;
  line-height: 1.95;
}


/* ========================================
   強調文字
======================================== */

.entry-content strong {
  color: #995d6c;
  font-weight: 600;
}


/* ========================================
   通常リンク
======================================== */

.entry-content a {
  color: #3f7480;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #a9c4ca;
  text-underline-offset: 4px;
}

.entry-content a:hover {
  color: #995d6c;
  text-decoration-color: #c69aa5;
}


/* ========================================
   「公式サイトを見る」など単独リンク
   本文・サイドバー共通
======================================== */

.entry-content p > a:only-child:not(.text-link),
.sidebar .widget p > a:only-child:not(.text-link) {
  display: inline-block;

  padding: 8px 16px;

  background: #ffffff;
  border: 1px solid #72929a;
  border-radius: 2px;

  color: #365f69;
  text-decoration: none;

  font-size: 0.95em;
  line-height: 1.6;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.entry-content p > a:only-child:not(.text-link):hover,
.sidebar .widget p > a:only-child:not(.text-link):hover {
  background: #fafcfc;
  border-color: #536f76;
  color: #294c54;
}

.sidebar .widget .cosmetamesu-view-link {
  margin-top: 12px;
}

/* ========================================
   本文中のテキストリンク
======================================== */

.entry-content p a.text-link {
  color: #365f69 !important;
  text-decoration: underline !important;
  text-decoration-color: #72929a !important;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.entry-content p a.text-link:hover {
  color: #bd6f83 !important;
  text-decoration-color: #bd6f83 !important;
}


/* ========================================
   リスト
======================================== */

.entry-content ul {
  margin: 1.3em 0 1.9em;
  padding: 14px 18px 14px 38px;

  background: #fbfbfa;
  border: 1px solid #e7e8e6;
  border-radius: 2px;
}

.entry-content ul li {
  margin-bottom: 7px;
  line-height: 1.85;
}

.entry-content ul li:last-child {
  margin-bottom: 0;
}


/* ========================================
   表
======================================== */

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content th {
  background: #faf8f8;
  font-weight: 600;
}

.entry-content td,
.entry-content th {
  padding: 11px;
  border: 1px solid #e0e3e3;
}


/* ========================================
   サイドバー
======================================== */

.sidebar {
  background: transparent;
}

.sidebar .widget {
  margin-bottom: 24px;
  padding: 19px;

  background: #fffefe;
  border: 1px solid #ebe2e4;
  border-radius: 4px;

  box-shadow: 0 3px 12px rgba(80, 55, 65, 0.025);
}


/* ========================================
   サイドバー見出し
======================================== */

.sidebar .widget-title {
  margin: 0 0 16px;
  padding: 0 0 9px;

  background: transparent;
  border: none;
  border-bottom: 1px solid #d9e2e4;
  border-radius: 0;

  font-size: 1.04em;
  font-weight: 600;
  letter-spacing: 0.03em;
}




/* ========================================
   検索窓
======================================== */

.sidebar input[type="text"],
.sidebar input[type="search"] {
  background: #ffffff;
  border: 1px solid #cbd3d5;
  border-radius: 2px;
}


/* ========================================
   固定ページの日付を非表示
======================================== */

.page .date-tags,
.page .post-date,
.page .post-update {
  display: none;
}


/* ========================================
   ヘッダー全体
======================================== */

.header-container {
  background: #f6eef0;
  border-bottom: 1px solid #dfcfd4;
}

.header-container-in {
  padding-top: 8px;
  padding-bottom: 8px;
}


/* サイトタイトル */
.logo-header .site-name-text {
  color: #333333;
  font-weight: 600;
  letter-spacing: 0.04em;
}


/* キャッチフレーズ */
.tagline {
  color: #8a777c;
  font-size: 0.85em;
}


/* ========================================
   グローバルメニュー
======================================== */

.navi {
  height: 46px;
  min-height: 46px;
  background: #f3e9ec;
  border-top: 1px solid #eadde1;
  border-bottom: 1px solid #dccbd0;
}

.navi-in {
  height: 46px;
  min-height: 46px;
}

.navi-in > ul {
  height: 46px;
  min-height: 46px;
  margin: 0;
}

.navi-in > ul > li {
  height: 46px;
  min-height: 46px;
}

.navi-in > ul > li > a {
  height: 46px;
  min-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  color: #554b4e;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.navi-in > ul > li > a:hover {
  color: #bd6f83;
  background: #fffefe;
}



/* ========================================
   フッター全体
======================================== */

.footer {
  margin-top: 50px;
  background: #f3e9ec;
  border-top: 3px solid #d9a8b5;
  color: #655a5d;
}

.footer-in {
  padding-top: 28px;
  padding-bottom: 24px;
}


/* ========================================
   フッターメニュー
======================================== */

.footer-menu-nav {
  text-align: center;
}

.footer-menu-nav a {
  color: #5e5557;
  text-decoration: none;

  transition: color 0.2s ease;
}

.footer-menu-nav a:hover {
  color: #bd6f83;
}

.footer-menu-nav li {
  border-right-color: #dfcdd2;
}


/* ========================================
   フッター下部
======================================== */

.footer-bottom {
  border-top: 1px solid #eadde1;
  padding-top: 15px;
}

.copyright {
  color: #918387;
  font-size: 0.85em;
}



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

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

  .main {
    min-height: 500px;
  }

}


/* ========================================
   スマートフォン
======================================== */

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

  .main {
    padding: 18px 16px;

    border-left: none;
    border-right: none;
    border-radius: 0;

    box-shadow: none;
  }


  /* H1 */
  .entry-title {
    margin-bottom: 30px;
    padding: 5px 2px 15px;

    font-size: 1.38em;
  }

  .entry-title::after {
    left: 0;
    width: 75px;
    height: 5px;
  }


  /* H2 */
  .entry-content h2 {
    margin-top: 2.5em;
    padding: 11px 12px 11px 40px;

    font-size: 1.2em;
  }

  .entry-content h2::before {
    left: 13px;
    top: 47%;

    width: 19px;
    height: 17px;
  }

  .entry-content h2::after {
    left: 22px;
    top: 47%;

    height: 12px;
  }


  /* H3 */
  .entry-content h3 {
    margin-top: 2em;
    padding: 3px 0 8px 15px;

    font-size: 1.09em;
  }

  .entry-content h3::before {
    width: 6px;
    height: 6px;
  }


  /* リスト */
  .entry-content ul {
    padding: 13px 14px 13px 34px;
  }

}



/************************************
** レスポンシブデザイン用
************************************/

/* 1023px以下 */
@media screen and (max-width: 1023px) {

	  #navi {
    display: none;
  }
	
}

/* 834px以下 */
@media screen and (max-width: 834px) {
}

/* 480px以下 */
@media screen and (max-width: 480px) {
}



/* ========================================
   東京都カテゴリー：区市町リンク
======================================== */

.tokyo-area-links {
  margin: 24px 0 30px;
}

.tokyo-area-links-title {
  margin: 0 0 16px;
  font-weight: 600;
}

/* WordPressが自動で入れるp・brをレイアウトから外す */
.tokyo-area-links-grid p {
  display: contents !important;
}

.tokyo-area-links-grid br {
  display: none !important;
}

.tokyo-area-links-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  width: 100% !important;
}

.entry-content .tokyo-area-links-grid a {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;

  background: #ffffff !important;
border: 1px solid #bea3aa !important;
  border-radius: 4px !important;

  color: #304f56 !important;
  font-weight: 500;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.entry-content .tokyo-area-links-grid a:hover {
  border-color: #bd6f83 !important;
  color: #bd6f83 !important;
}

/* スマートフォン */
@media screen and (max-width: 768px) {
  .tokyo-area-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* ========================================
   地域から探す：都道府県一覧
======================================== */

.prefecture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 16px 0 30px;
  padding: 0;
  list-style: none;
}

.prefecture-grid li {
  margin: 0;
  padding: 0;
}

.entry-content .prefecture-grid li a {
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;

  background: #ffffff !important;
  border: 1px solid #cbb8bd !important;
  border-radius: 4px !important;

  color: #304f56 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.entry-content .prefecture-grid li a:hover {
  border-color: #bd6f83 !important;
  color: #bd6f83 !important;
}

/* スマートフォン */
@media screen and (max-width: 768px) {
  .prefecture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .entry-content .prefecture-grid li a {
    padding: 10px 8px !important;
  }
}