/*
Theme Name: スマデジナビ Cocoon Child
Description: スマデジナビ用の Cocoon 子テーマ
Template: cocoon-master
Version: 0.1.0
Text Domain: sumadeji-cocoon-child
*/

:root {
  --sdn-ink: #172033;
  --sdn-accent: #0b6e99;
  --sdn-accent-soft: #e6f4fa;
  --sdn-surface: #ffffff;
  --sdn-ground: #f7f9fc;
  --sdn-line: #dce4ef;
}

body {
  background: var(--sdn-ground);
  color: var(--sdn-ink);
}

/* Site-wide navigation */
#header { background: #fff; border-bottom: 1px solid var(--sdn-line); }
#header-in { max-width: 1120px; min-height: 76px; padding: 0 24px; }
#header .tagline { display: none; }
#header .logo { line-height: 1; margin: 24px 0; padding: 0; }
#header .site-name-text { color: var(--sdn-ink); font-size: 1.32rem; font-weight: 800; letter-spacing: -.045em; }
#navi { background: #fff; border-bottom: 1px solid var(--sdn-line); box-shadow: none; }
#navi-in { max-width: 1120px; padding: 0 24px; }
#navi .menu-header { display: flex; gap: 0; }
#navi .menu-header > li { flex: 0 0 auto; }
#navi .menu-header > li > a { background: transparent; color: #41506a; font-size: .84rem; font-weight: 700; min-width: 0; padding: 14px 17px; }
#navi .menu-header > li > a:hover, #navi .menu-header > .current-menu-item > a { background: transparent; color: var(--sdn-accent); }
#navi .menu-header > .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--sdn-accent); }

#sidebar { display: none !important; }
body.home .footer { display: none; }
.footer { background: #fff; border-top: 1px solid var(--sdn-line); }
.sdn-footer-bottom { align-items: center; display: flex; justify-content: space-between; padding: 26px 24px; }
.sdn-footer-bottom .footer-bottom-logo { margin: 0; }
.sdn-footer-bottom .footer-bottom-logo a { color: var(--sdn-ink); font-size: 1rem; font-weight: 800; text-decoration: none; }
.sdn-footer-links { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: flex-end; }
.sdn-footer-links a { color: #60708a; font-size: .76rem; text-decoration: none; }
.sdn-footer-links a:hover { color: var(--sdn-accent); }
#content-in { display: block; max-width: 1120px !important; }
#main { float: none !important; max-width: none !important; width: 100% !important; }
body.home .article-header,
body.home .sns-share,
body.home .sns-follow,
body.home .toc { display: none !important; }

/* Top page only */
.sdn-front {
  background: #f3f6fa;
  margin: 0;
  max-width: none;
  padding: 34px 0 58px;
}

.sdn-front * { box-sizing: border-box; }

.sdn-hero {
  background-color: #172033;
  background-image:
    radial-gradient(circle at 75% 22%, rgba(22, 169, 223, .2) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 22%, transparent 0 16%, rgba(22, 169, 223, .18) 16.1% 16.35%, transparent 16.5% 23%, rgba(22, 169, 223, .12) 23.1% 23.35%, transparent 23.5%);
  background-repeat: repeat, no-repeat;
  background-size: 9px 9px, 780px 780px;
  color: #fff;
  display: grid;
  gap: clamp(30px, 6vw, 90px);
  grid-template-columns: minmax(0, 1.3fr) minmax(245px, .7fr);
  overflow: hidden;
  padding: clamp(42px, 8vw, 96px);
  position: relative;
}

.sdn-hero::before {
  border: 1px solid rgba(126, 208, 237, .16);
  border-radius: 50%;
  content: "";
  height: 470px;
  position: absolute;
  right: -180px;
  top: -240px;
  width: 470px;
}

.sdn-hero__body,
.sdn-hero__read { position: relative; z-index: 1; }

.sdn-eyebrow {
  color: #7ed0ed;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  margin: 0 0 18px;
}

.sdn-hero h1 {
  color: #fff;
  font-size: clamp(2.7rem, 5.5vw, 5.3rem);
  letter-spacing: -.065em;
  line-height: 1.02;
  margin: 0 0 24px;
}

.sdn-hero__lead {
  color: #dce4ef;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
  max-width: 34em;
}

.sdn-hero__read {
  align-self: end;
  border-left: 1px solid rgba(255, 255, 255, .32);
  padding-left: 24px;
}

.sdn-hero__read b {
  color: #7ed0ed;
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.sdn-hero__read a {
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  display: block;
  font-size: .93rem;
  line-height: 1.45;
  padding: 13px 0;
  text-decoration: none;
}

.sdn-section { margin: 0 auto; max-width: 1120px; padding: clamp(40px, 6vw, 70px) 24px 0; }
.sdn-section--tint { background: transparent; }

.sdn-heading { margin: 0 0 27px; }
.sdn-heading h2 { color: var(--sdn-ink); font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -.045em; margin: 0; }
.sdn-heading p { color: var(--sdn-accent); font-size: .76rem; font-weight: 700; letter-spacing: .12em; margin: 0 0 8px; }
.sdn-heading--with-link { align-items: baseline; display: flex; justify-content: space-between; }
.sdn-heading--with-link a { color: var(--sdn-accent); font-size: .88rem; text-decoration: none; }

.sdn-topic-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.sdn-topic {
  background: #093153;
  color: #fff;
  min-height: 205px;
  overflow: hidden;
  padding: 24px;
  position: relative;
  text-decoration: none;
}
.sdn-topic::after { background: rgba(255,255,255,.18); border-radius: 50%; content: ''; height: 165px; position: absolute; right: -65px; top: -62px; width: 165px; }
.sdn-topic::before { background: rgba(255,255,255,.14); border-radius: 50%; bottom: -78px; content: ''; height: 130px; position: absolute; right: -15px; width: 130px; }
.sdn-topic:hover { color: #fff; transform: translateY(-2px); }
.sdn-topic:nth-child(2) { background: #415a76; }
.sdn-topic:nth-child(3) { background: #156a7b; }
.sdn-topic:nth-child(4) { background: #654770; }
.sdn-topic:nth-child(5) { background: #87522f; }
.sdn-topic:nth-child(6) { background: #52677e; }
.sdn-topic__icon { color: #fff; display: block; font-size: 2.15rem; line-height: 1; margin-bottom: 32px; position: relative; z-index: 1; }
.sdn-topic b, .sdn-topic small { display: block; position: relative; z-index: 1; }
.sdn-topic b { font-size: 1.35rem; letter-spacing: -.04em; margin-bottom: 5px; }
.sdn-topic small { color: rgba(255,255,255,.9); font-size: .89rem; line-height: 1.55; }

.sdn-posts { display: grid; gap: 14px; grid-template-columns: 1fr; }
.sdn-post {
  background: #fff;
  border: 0;
  color: var(--sdn-ink);
  min-height: 160px;
  padding: 28px 34px;
  position: relative;
  text-decoration: none;
}
.sdn-post__cat { color: var(--sdn-accent); display: block; font-size: .73rem; font-weight: 700; margin-bottom: 10px; }
.sdn-post h3 { font-size: 1.3rem; line-height: 1.45; margin: 0 20px 10px 0; }
.sdn-post p { color: #60708a; font-size: .87rem; line-height: 1.55; margin: 0; }
.sdn-post__more { bottom: 19px; color: var(--sdn-ink); font-size: .82rem; font-weight: 700; position: absolute; right: 23px; }
.sdn-empty { background: #fff; border: 1px solid var(--sdn-line); color: #60708a; margin: 0; padding: 30px; }

.sdn-guide { background: #172033; color: #fff; display: grid; gap: 35px; grid-template-columns: .7fr 1.3fr; padding: clamp(38px, 6vw, 72px); }
.sdn-guide h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.2; margin: 10px 0 0; }
.sdn-guide .sdn-eyebrow { margin: 0; }
.sdn-guide__links a { border-bottom: 1px solid rgba(255,255,255,.22); color: #fff; display: grid; font-size: .93rem; gap: 8px; grid-template-columns: 118px 1fr 18px; padding: 15px 0; text-decoration: none; }
.sdn-guide__links span { color: #dce4ef; }
.sdn-note { color: #60708a; display: flex; font-size: .77rem; gap: 18px; justify-content: space-between; padding: 24px 4px 0; }
.sdn-note p { margin: 0; }
.sdn-note nav { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: flex-end; }
.sdn-note a { color: #60708a; text-underline-offset: 3px; white-space: nowrap; }

/* Category archives and articles */
.sdn-archive, .sdn-article { margin: 0 auto; max-width: 860px; padding: 58px 24px 84px; }
.sdn-section-label { color: var(--sdn-accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 10px; }
.sdn-archive__header { border-bottom: 1px solid var(--sdn-line); margin-bottom: 30px; padding-bottom: 30px; }
.sdn-archive__header h1 { color: var(--sdn-ink); font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -.06em; margin: 0 0 14px; }
.sdn-archive__header > p:last-child { color: #60708a; line-height: 1.8; margin: 0; }
.sdn-archive__group { margin: 0 0 48px; }
.sdn-archive__group-heading { align-items: baseline; border-bottom: 1px solid var(--sdn-line); display: flex; gap: 14px; justify-content: space-between; margin-bottom: 14px; padding-bottom: 13px; }
.sdn-archive__group-heading h2 { color: var(--sdn-ink); font-size: 1.35rem; margin: 0; }
.sdn-archive__group-heading p { color: #60708a; font-size: .82rem; margin: 0; }
.sdn-archive__list { display: grid; gap: 12px; }
.sdn-archive-card { background: #fff; border: 1px solid var(--sdn-line); color: var(--sdn-ink); display: block; padding: 25px 28px; position: relative; text-decoration: none; }
.sdn-archive-card:hover { border-color: var(--sdn-accent); }
.sdn-archive-card > span { color: #71809a; font-size: .75rem; }
.sdn-archive-card h2 { font-size: 1.23rem; line-height: 1.45; margin: 8px 54px 8px 0; }
.sdn-archive-card p { color: #60708a; font-size: .88rem; line-height: 1.65; margin: 0; }
.sdn-archive-card b { bottom: 26px; font-size: .78rem; position: absolute; right: 27px; }

.sdn-article__header { border-bottom: 1px solid var(--sdn-line); padding-bottom: 29px; }
.sdn-article__category { color: var(--sdn-accent); font-size: .78rem; font-weight: 800; text-decoration: none; }
.sdn-article__header h1 { color: var(--sdn-ink); font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -.065em; line-height: 1.25; margin: 13px 0 12px; }
.sdn-article__meta { color: #70809a; font-size: .78rem; margin: 0 0 20px; }
.sdn-article__intro { color: #40506c; font-size: .96rem; line-height: 1.85; margin: 0; max-width: 43em; }
.sdn-article__flow { align-items: center; background: #eaf2f7; color: #38506e; display: flex; font-size: .76rem; font-weight: 700; gap: 10px; margin: 27px 0 34px; overflow-x: auto; padding: 13px 16px; white-space: nowrap; }
.sdn-article__flow b { color: var(--sdn-accent); }
.sdn-article .toc,
.sdn-article .toc-content { display: none; }
.sdn-article__content { font-size: 1rem; line-height: 1.95; }
.sdn-article__content > *:first-child { margin-top: 0; }
.sdn-article__content h2 { border-left: 4px solid var(--sdn-accent); color: var(--sdn-ink); font-size: 1.48rem; line-height: 1.45; margin: 46px 0 19px; padding-left: 14px; }
.sdn-article__content h3 { color: var(--sdn-ink); font-size: 1.18rem; margin: 34px 0 14px; }
.sdn-product-slot { background: #172033; color: #fff; margin: 46px 0; padding: 31px 34px; }
.sdn-product-slot__label { color: #7ed0ed; font-size: .72rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 9px; }
.sdn-product-slot h2 { color: #fff; font-size: 1.32rem; margin: 0 0 10px; }
.sdn-product-slot p:last-child { color: #dce4ef; font-size: .88rem; line-height: 1.75; margin: 0; }
.sdn-affiliate-button { margin: 22px 0; }
.sdn-affiliate-button a { background: var(--sdn-accent); color: #fff; display: inline-block; font-size: .92rem; font-weight: 800; padding: 13px 18px; text-decoration: none; }
.sdn-affiliate-button a:hover { background: #075878; }
.sdn-api-product { align-items: center; background: #fff; border: 1px solid var(--sdn-line); display: flex; gap: 18px; margin: 24px 0; padding: 18px; }
.sdn-api-product img { height: 92px; object-fit: contain; width: 92px; }
.sdn-api-product__source { color: #70809a; font-size: .7rem; font-weight: 700; letter-spacing: .06em; margin: 0 0 5px; }
.sdn-api-product strong { color: var(--sdn-ink); display: block; font-size: .96rem; line-height: 1.45; }
.sdn-api-product a { color: var(--sdn-accent); display: inline-block; font-size: .82rem; font-weight: 800; margin-top: 10px; text-decoration: none; }
.sdn-hero { background: #fff; border: 1px solid var(--sdn-line); color: var(--sdn-ink); display: grid; gap: 30px; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); padding: clamp(28px, 5vw, 56px); }
.sdn-hero h1 { color: var(--sdn-ink); font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.06em; line-height: 1.08; margin: 8px 0 17px; }
.sdn-hero__lead { color: #40506c; font-size: .95rem; line-height: 1.8; margin: 0; max-width: 540px; }
.sdn-hero__nav { align-self: center; }
.sdn-hero__nav > p { color: #70809a; font-size: .72rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 10px; }
.sdn-hero__nav > div { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdn-hero__nav a { align-items: center; background: #f4f7fa; color: var(--sdn-ink); display: flex; font-size: .82rem; font-weight: 800; gap: 8px; min-height: 48px; padding: 0 12px; text-decoration: none; }
.sdn-hero__nav a:hover { background: #e6f2f7; color: var(--sdn-accent); }
.sdn-hero__nav a span { color: var(--sdn-accent); font-size: 1rem; }
.sdn-offer { align-items: center; background: #fff; border: 1px solid var(--sdn-line); display: flex; gap: 22px; margin: 28px 0; padding: 20px; }
.sdn-offer > img { height: 124px; object-fit: contain; width: 124px; }
.sdn-offer__body { flex: 1; min-width: 0; }
.sdn-offer__source { color: #70809a; font-size: .7rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 6px; }
.sdn-offer strong { color: var(--sdn-ink); display: block; font-size: 1rem; line-height: 1.5; }
.sdn-offer__description { color: #40506c; font-size: .86rem; line-height: 1.65; margin: 8px 0 0; }
.sdn-offer__buttons { display: flex; gap: 8px; margin: 15px 0 10px; }
.sdn-offer__buttons a { align-items: center; border-radius: 3px; color: #fff; display: inline-flex; font-size: .82rem; font-weight: 800; gap: 6px; justify-content: center; min-height: 40px; padding: 0 16px; text-decoration: none; }
.sdn-offer__amazon { background: #171717; }
.sdn-offer__rakuten { background: #bf001a; }
.sdn-offer small { color: #70809a; display: block; font-size: .7rem; line-height: 1.55; }
.sdn-related { border-top: 1px solid var(--sdn-line); padding-top: 36px; }
.sdn-related h2 { color: var(--sdn-ink); font-size: 1.52rem; margin: 0 0 18px; }
.sdn-related__grid { display: grid; gap: 10px; }
.sdn-related__grid a { background: #fff; border: 1px solid var(--sdn-line); color: var(--sdn-ink); display: grid; gap: 5px; grid-template-columns: 100px 1fr 45px; padding: 16px 18px; text-decoration: none; }
.sdn-related__grid a:hover { border-color: var(--sdn-accent); }
.sdn-related__grid span, .sdn-related__grid i { color: #70809a; font-size: .73rem; font-style: normal; }
.sdn-related__grid i { text-align: right; }

.sdn-page { background: #fff; margin: 58px auto 84px; max-width: 760px; padding: clamp(30px, 6vw, 64px); }
.sdn-page header { border-bottom: 1px solid var(--sdn-line); margin-bottom: 30px; padding-bottom: 25px; }
.sdn-page h1 { color: var(--sdn-ink); font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.055em; margin: 0; }
.sdn-page__content { color: #40506c; line-height: 1.9; }
.sdn-page__content h2 { color: var(--sdn-ink); font-size: 1.3rem; margin: 38px 0 14px; }
.sdn-contact-form { margin-top: 30px; }
.sdn-contact-form p { margin: 0 0 18px; }
.sdn-contact-form label { color: var(--sdn-ink); display: block; font-weight: 700; }
.sdn-contact-form input, .sdn-contact-form textarea { background: #fff; border: 1px solid var(--sdn-line); border-radius: 0; box-sizing: border-box; color: var(--sdn-ink); font: inherit; margin-top: 8px; padding: 12px; width: 100%; }
.sdn-contact-form__website { display: none; }
.sdn-contact-form .sdn-contact-form__consent label { color: #40506c; font-size: .88rem; font-weight: 400; }
.sdn-contact-form .sdn-contact-form__consent input { margin: 0 6px 0 0; padding: 0; vertical-align: middle; width: auto; }
.sdn-contact-form input:focus, .sdn-contact-form textarea:focus { border-color: var(--sdn-accent); outline: 2px solid rgba(0,123,183,.15); }
.sdn-contact-form button { background: var(--sdn-ink); border: 0; border-radius: 0; color: #fff; cursor: pointer; font: inherit; font-weight: 700; min-height: 48px; padding: 0 28px; }
.sdn-contact-form button:hover { background: var(--sdn-accent); }
.sdn-contact-notice { background: #eaf5ed; color: #235b37; margin: 20px 0; padding: 14px; }
.sdn-contact-notice--error { background: #fff0f0; color: #9b3030; }

@media (max-width: 760px) {
  #header-in { min-height: 58px; padding: 0 16px; }
  #header .logo { margin: 20px 0; }
  #header .site-name-text { font-size: 1.18rem; }
  /* スマホでは右上のハンバーガーメニューに集約し、横スクロールするカテゴリーナビは出さない。 */
  #navi { display: none; }
  .sdn-front { padding: 24px 16px 48px; }
  .sdn-hero { display: block; padding: 42px 24px; }
  .sdn-hero h1 { font-size: 2.2rem; }
  .sdn-hero__nav { margin-top: 28px; }
  .sdn-hero__nav > div { grid-template-columns: 1fr; }
  .sdn-topic-grid { grid-template-columns: repeat(2, 1fr); }
  .sdn-topic { min-height: 150px; padding: 16px; }
  .sdn-topic__icon { margin-bottom: 13px; }
  .sdn-posts { grid-template-columns: 1fr; }
  .sdn-guide { display: block; padding: 40px 24px; }
  .sdn-guide__links { margin-top: 24px; }
  .sdn-guide__links a { grid-template-columns: 1fr 18px; }
  .sdn-guide__links b, .sdn-guide__links span { grid-column: 1; }
  .sdn-guide__links i { align-self: center; grid-column: 2; grid-row: 1 / span 2; }
  .sdn-note { display: block; }
  .sdn-note nav { justify-content: flex-start; margin-top: 10px; }
  .sdn-footer-bottom { align-items: flex-start; display: block; padding: 24px 16px; }
  .sdn-footer-links { justify-content: flex-start; margin-top: 14px; }
  .sdn-archive, .sdn-article { padding: 38px 16px 58px; }
  .sdn-archive-card { padding: 21px 20px; }
  .sdn-archive-card h2 { font-size: 1.08rem; margin-right: 0; }
  .sdn-archive-card b { display: none; }
  .sdn-article__header h1 { font-size: 2rem; }
  .sdn-article__flow { font-size: .69rem; gap: 7px; margin: 22px 0 28px; padding: 11px 12px; }
  .sdn-product-slot { margin: 36px 0; padding: 26px 22px; }
  .sdn-api-product { align-items: flex-start; padding: 14px; }
  .sdn-api-product img { height: 72px; width: 72px; }
  .sdn-offer { align-items: flex-start; gap: 13px; padding: 14px; }
  .sdn-offer > img { height: 82px; width: 82px; }
  .sdn-offer__buttons { gap: 6px; }
  .sdn-offer__buttons a { font-size: .75rem; min-height: 38px; padding: 0 11px; }
  .sdn-related__grid a { grid-template-columns: 1fr 38px; }
  .sdn-related__grid span { grid-column: 1; }
  .sdn-related__grid b { grid-column: 1; grid-row: 2; }
  .sdn-related__grid i { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sdn-page { margin: 38px 16px 58px; padding: 28px 22px; }
}