@charset "utf-8";
/*
Theme Name: GLAMOUR child
Theme URI:https://tcd-theme.com/tcd073
Description:WordPressテーマ「GLAMOUR」の子テーマ
Template:glamour_tcd073
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/
/* =========================================================
   ASANOMI LIFE - MATERIALS ARCHIVE
   ========================================================= */

.materials-archive {
  background: #fff;
}


/* Header
--------------------------------------------------------- */

.materials-header {
  background: #f5f5f3;
  padding: 72px 30px;
  text-align: center;
}

.materials-header-inner {
  max-width: 900px;
  margin: 0 auto;
}

.materials-en {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .18em;
}

.materials-header h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.4;
}

.materials-description {
  margin: 22px auto 0;
  font-size: 14px;
  line-height: 2;
}


/* Main
--------------------------------------------------------- */

.materials-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 60px 30px 100px;
}


/* Category navigation
--------------------------------------------------------- */

.materials-category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 50px;
}

.materials-category-link {
  display: inline-block;
  color: #555;
  font-size: 13px;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.materials-category-link:hover,
.materials-category-link.is-current {
  color: #111;
  border-bottom-color: #111;
}


/* Grid
--------------------------------------------------------- */

.materials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 55px 36px;
}


/* Card
--------------------------------------------------------- */

.material-card {
  margin: 0;
}

.material-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.material-card-image {
  position: relative;
  overflow: hidden;
  background: #f3f3f3;
  aspect-ratio: 16 / 10;
}

.material-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.material-card-link:hover .material-card-image img {
  transform: scale(1.02);
}

.material-card-noimage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  letter-spacing: .15em;
}


/* Card text
--------------------------------------------------------- */

.material-card-body {
  padding-top: 17px;
}

.material-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.material-card-categories span {
  font-size: 11px;
  color: #777;
  letter-spacing: .04em;
}

.material-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

.material-card-excerpt {
  margin: 10px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.9;
}


/* Pagination
--------------------------------------------------------- */

.materials-pagination {
  margin-top: 70px;
  text-align: center;
}

.materials-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.materials-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  color: #555;
  text-decoration: none;
  border: 1px solid #ddd;
}

.materials-pagination .page-numbers.current,
.materials-pagination .page-numbers:hover {
  color: #fff;
  background: #222;
  border-color: #222;
}


/* Empty
--------------------------------------------------------- */

.materials-empty {
  padding: 80px 0;
  text-align: center;
  color: #777;
}


/* Mobile
--------------------------------------------------------- */

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

  .materials-header {
    padding: 48px 20px;
  }

  .materials-header h1 {
    font-size: 27px;
  }

  .materials-description {
    font-size: 13px;
    text-align: left;
  }

  .materials-description br {
    display: none;
  }

  .materials-main {
    padding: 40px 20px 70px;
  }

  .materials-category-nav {
    margin-bottom: 35px;
    gap: 8px 18px;
  }

  .materials-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .material-card-title {
    font-size: 17px;
  }
}


/* =========================================================
   ASANOMI LIFE - SINGLE MATERIAL
   ========================================================= */

.material-single {
  background: #fff;
}

.material-single-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 70px 30px 100px;
}

.material-single-header {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.material-single-categories {
  margin-bottom: 14px;
}

.material-single-categories span {
  margin: 0 6px;
  color: #888;
  font-size: 12px;
}

.material-single-title {
  margin: 0;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.5;
}

.material-single-lead {
  margin: 22px auto 0;
  max-width: 680px;
  color: #666;
  font-size: 15px;
  line-height: 2;
}

.material-single-image {
  margin: 0 auto 55px;
}

.material-single-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.material-single-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2.1;
}

.material-single-content p {
  margin: 0 0 1.8em;
}


/* Related
--------------------------------------------------------- */

.material-related {
  max-width: 760px;
  margin: 80px auto 0;
  padding-top: 45px;
  border-top: 1px solid #ddd;
}

.material-related-block {
  margin-bottom: 45px;
}

.material-related-block h2 {
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 500;
}

.material-related-block p {
  margin: 0 0 10px;
  color: #666;
  font-size: 14px;
  line-height: 1.9;
}

.material-related-block a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* Back
--------------------------------------------------------- */

.material-back {
  max-width: 760px;
  margin: 60px auto 0;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.material-back a {
  color: #555;
  font-size: 13px;
  text-decoration: none;
}


/* Mobile
--------------------------------------------------------- */

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

  .material-single-inner {
    padding: 45px 20px 70px;
  }

  .material-single-title {
    font-size: 29px;
  }

  .material-single-lead {
    font-size: 14px;
    text-align: left;
  }

.material-single-image {
  margin: 0 auto 55px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f3f3;
}

  .material-single-content {
    font-size: 14px;
  }

  .material-related {
    margin-top: 55px;
  }
}


/* =========================================================
   MATERIALS - RELATED NOTE
   ========================================================= */

.material-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 24px;
  margin-top: 25px;
}

.material-note-card {
  margin: 0;
}

.material-note-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.material-note-image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f3f3f3;
}

.material-note-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .3s ease;
}

.material-note-card a:hover .material-note-image img {
  transform: scale(1.02);
}

.material-note-body {
  padding-top: 12px;
}

.material-note-date {
  margin: 0 0 6px;
  color: #999;
  font-size: 11px;
}

.material-note-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

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

  .material-note-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

}



/* MATERIALS 個別ページ：メイン画像を横長に強制トリミング */
.material-single .material-single-image {
  width: 100%;
  height: 420px;
  margin: 0 auto 55px;
  overflow: hidden;
  background: #f3f3f3;
}

.material-single .material-single-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

/* スマホ */
@media screen and (max-width: 767px) {

  .material-single .material-single-image {
    height: 260px;
    margin-bottom: 35px;
  }

}



/* =========================================================
   ASANOMI LIFE - GLOSSARY ARCHIVE
   ========================================================= */

.glossary-archive {
  background: #fff;
}


/* Header
--------------------------------------------------------- */

.glossary-header {
  background: #f5f5f3;
  padding: 72px 30px;
  text-align: center;
}

.glossary-header-inner {
  max-width: 900px;
  margin: 0 auto;
}

.glossary-en {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .18em;
}

.glossary-header h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.4;
}

.glossary-description {
  margin: 22px auto 0;
  font-size: 14px;
  line-height: 2;
}


/* Main
--------------------------------------------------------- */

.glossary-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 60px 30px 100px;
}


/* Category navigation
--------------------------------------------------------- */

.glossary-category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 50px;
}

.glossary-category-link {
  display: inline-block;
  color: #555;
  font-size: 13px;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}

.glossary-category-link:hover,
.glossary-category-link.is-current {
  color: #111;
  border-bottom-color: #111;
}


/* List
--------------------------------------------------------- */

.glossary-list {
  border-top: 1px solid #ddd;
}

.glossary-item {
  margin: 0;
  border-bottom: 1px solid #ddd;
}

.glossary-item-link {
  display: block;
  padding: 28px 8px;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}

.glossary-item-link:hover {
  background: #fafafa;
}

.glossary-item-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.glossary-item-categories span {
  color: #888;
  font-size: 11px;
}

.glossary-item-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.glossary-item-excerpt {
  margin: 10px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.9;
}


/* Pagination
--------------------------------------------------------- */

.glossary-pagination {
  margin-top: 60px;
  text-align: center;
}


/* Empty
--------------------------------------------------------- */

.glossary-empty {
  padding: 80px 0;
  text-align: center;
  color: #777;
}


/* Mobile
--------------------------------------------------------- */

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

  .glossary-header {
    padding: 48px 20px;
  }

  .glossary-header h1 {
    font-size: 27px;
  }

  .glossary-description {
    font-size: 13px;
    text-align: left;
  }

  .glossary-description br {
    display: none;
  }

  .glossary-main {
    padding: 40px 20px 70px;
  }

  .glossary-category-nav {
    margin-bottom: 35px;
    gap: 8px 18px;
  }

  .glossary-item-link {
    padding: 22px 4px;
  }

  .glossary-item-title {
    font-size: 18px;
  }
}


/* =========================================================
   ASANOMI LIFE - SINGLE GLOSSARY
   ========================================================= */

.glossary-single {
  background: #fff;
}

.glossary-single-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 75px 30px 100px;
}


/* Header
--------------------------------------------------------- */

.glossary-single-header {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}

.glossary-single-en {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .2em;
  color: #777;
}

.glossary-single-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.glossary-single-categories span {
  font-size: 11px;
  color: #999;
}

.glossary-single-title {
  margin: 0;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.5;
}

.glossary-single-definition {
  max-width: 600px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 2;
  color: #555;
}


/* Content
--------------------------------------------------------- */

.glossary-single-content {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 45px;
  border-top: 1px solid #ddd;
  font-size: 15px;
  line-height: 2.15;
}

.glossary-single-content p {
  margin: 0 0 1.9em;
}

.glossary-single-content h2 {
  margin: 55px 0 22px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.6;
}

.glossary-single-content h3 {
  margin: 40px 0 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

.glossary-single-content ul,
.glossary-single-content ol {
  margin: 0 0 2em 1.5em;
}

.glossary-single-content li {
  margin-bottom: .6em;
}


/* Images inside glossary content
--------------------------------------------------------- */

.glossary-single-content img {
  max-width: 100%;
  height: auto;
}

.glossary-single-content figure {
  margin: 35px 0;
}


/* Footer
--------------------------------------------------------- */

.glossary-single-footer {
  max-width: 720px;
  margin: 70px auto 0;
  padding-top: 30px;
  border-top: 1px solid #ddd;
}

.glossary-back {
  color: #555;
  font-size: 13px;
  text-decoration: none;
}

.glossary-back:hover {
  color: #111;
}


/* Mobile
--------------------------------------------------------- */

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

  .glossary-single-inner {
    padding: 48px 20px 70px;
  }

  .glossary-single-header {
    margin-bottom: 40px;
  }

  .glossary-single-title {
    font-size: 29px;
  }

  .glossary-single-definition {
    font-size: 14px;
    text-align: left;
  }

  .glossary-single-content {
    padding-top: 35px;
    font-size: 14px;
  }

  .glossary-single-content h2 {
    margin-top: 45px;
    font-size: 20px;
  }

}


/* =========================================================
   GLOSSARY RELATED CONTENT - OVERRIDE
   ========================================================= */

.glossary-single .glossary-related {
  max-width: 720px;
  margin: 70px auto 0;
  padding-top: 40px;
  border-top: 1px solid #ddd;
}

.glossary-single .glossary-related-block {
  margin: 0 0 60px;
}

.glossary-single .glossary-related-block > h2 {
  margin: 0 0 24px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}


/* -------------------------
   MATERIALS
------------------------- */

.glossary-single .glossary-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 22px;
}

.glossary-single .glossary-material-card {
  margin: 0;
}

.glossary-single .glossary-material-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.glossary-single .glossary-material-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f3f3f3;
}

.glossary-single .glossary-material-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

.glossary-single .glossary-material-card h3 {
  margin: 11px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}


/* -------------------------
   NOTE
------------------------- */

.glossary-single .glossary-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 22px;
}

.glossary-single .glossary-note-card {
  margin: 0;
}

.glossary-single .glossary-note-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.glossary-single .glossary-note-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f3f3f3;
}

.glossary-single .glossary-note-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

.glossary-single .glossary-note-body {
  padding-top: 10px;
}

.glossary-single .glossary-note-date {
  margin: 0 0 5px;
  color: #999;
  font-size: 11px;
}

.glossary-single .glossary-note-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}


/* -------------------------
   EMPTY
------------------------- */

.glossary-single .glossary-related-empty {
  margin: 0;
  color: #888;
  font-size: 13px;
  line-height: 1.8;
}


/* -------------------------
   MOBILE
------------------------- */

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

  .glossary-single .glossary-related {
    margin-top: 50px;
    padding-top: 32px;
  }

  .glossary-single .glossary-material-grid,
  .glossary-single .glossary-note-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .glossary-single .glossary-material-image,
  .glossary-single .glossary-note-image {
    height: 200px;
  }

}



/* =========================================================
   NOTE - RELATED MATERIALS / GLOSSARY
   ========================================================= */

.note-related-content {
  max-width: 760px;
  margin: 75px auto 0;
  padding-top: 45px;
  border-top: 1px solid #ddd;
}

.note-related-block {
  margin-bottom: 60px;
}

.note-related-block > h2 {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   MATERIALS
--------------------------------------------------------- */

.note-related-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 22px;
}

.note-related-material-card {
  margin: 0;
}

.note-related-material-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.note-related-material-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f3f3f3;
}

.note-related-material-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

.note-related-material-card h3 {
  margin: 11px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}


/* ---------------------------------------------------------
   GLOSSARY
--------------------------------------------------------- */

.note-related-glossary-list {
  border-top: 1px solid #e5e5e5;
}

.note-related-glossary-item {
  margin: 0;
  border-bottom: 1px solid #e5e5e5;
}

.note-related-glossary-item a {
  display: block;
  padding: 20px 5px;
  color: inherit;
  text-decoration: none;
}

.note-related-glossary-item a:hover {
  background: #fafafa;
}

.note-related-glossary-item h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.note-related-glossary-item p {
  margin: 7px 0 0;
  color: #777;
  font-size: 13px;
  line-height: 1.8;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

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

  .note-related-content {
    margin-top: 55px;
    padding-top: 35px;
  }

  .note-related-material-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .note-related-material-image {
    height: 200px;
  }

}




/* =========================================================
   GLOSSARY - FEATURED IMAGE
   ========================================================= */

.glossary-single .glossary-featured-image {
  width: 100%;
  max-width: 560px;
  margin: 42px auto 55px;
  overflow: hidden;
  background: #f3f3f3;
}

.glossary-single .glossary-featured-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: center center;
}


/* MOBILE */

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

  .glossary-single .glossary-featured-image {
    max-width: 100%;
    margin: 32px auto 42px;
  }

}




/* =========================================================
   MATERIAL SINGLE - CONTENT TYPOGRAPHY
   ========================================================= */

/* 本文全体 */
body.single-material .material-single-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  line-height: 2.15;
  color: #333;
}


/* 段落 */
body.single-material .material-single-content p {
  margin: 0 0 1.8em !important;
  font-size: 15px !important;
  line-height: 2.15 !important;
  letter-spacing: 0.02em;
}


/* H2
   大きな章タイトル
*/
body.single-material .material-single-content h2,
body.single-material .material-single-content .wp-block-heading:is(h2) {
  margin: 72px 0 28px !important;
  padding: 0 0 13px !important;

  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.035em !important;

  color: #222 !important;

  border: 0 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  background: none !important;
}


/* 最初のH2だけ上余白を少し抑える */
body.single-material .material-single-content h2:first-child {
  margin-top: 0 !important;
}


/* H3
   H2の中の小見出し
*/
body.single-material .material-single-content h3,
body.single-material .material-single-content .wp-block-heading:is(h3) {
  position: relative;

  margin: 46px 0 20px !important;
  padding: 0 0 0 14px !important;

  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.03em !important;

  color: #222 !important;

  border: 0 !important;
  background: none !important;
}


/* H3の小さな縦線 */
body.single-material .material-single-content h3::before,
body.single-material .material-single-content .wp-block-heading:is(h3)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 2px;
  height: 1.15em;
  background: #777;
}


/* 強調 */
body.single-material .material-single-content strong {
  font-weight: 600;
  color: #111;
}


/* リスト */
body.single-material .material-single-content ul,
body.single-material .material-single-content ol {
  margin: 25px 0 32px;
  padding-left: 1.6em;
}

body.single-material .material-single-content li {
  margin-bottom: 0.7em;
  line-height: 1.9;
}


/* モバイル */
@media screen and (max-width: 767px) {

  body.single-material .material-single-content {
    font-size: 14px;
    line-height: 2;
  }

  body.single-material .material-single-content p {
    font-size: 14px !important;
    line-height: 2 !important;
  }

  body.single-material .material-single-content h2,
  body.single-material .material-single-content .wp-block-heading:is(h2) {
    margin-top: 55px !important;
    margin-bottom: 23px !important;
    font-size: 21px !important;
  }

  body.single-material .material-single-content h3,
  body.single-material .material-single-content .wp-block-heading:is(h3) {
    margin-top: 38px !important;
    font-size: 17px !important;
  }

}