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

/************************************
** 子テーマ用のスタイルを書く
************************************/

:root{
  --pc-ink:#17232c;
  --pc-ink-2:#24333d;
  --pc-paper:#f6f8f9;
  --pc-white:#ffffff;
  --pc-line:#dce4e8;
  --pc-accent:#f0a22e;
  --pc-accent-dark:#c9780e;
  --pc-blue:#2f6f91;
  --pc-muted:#60717c;
  --pc-shadow:0 10px 28px rgba(23,35,44,.09);
}

body{
  color:var(--pc-ink);
  background:var(--pc-paper);
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  letter-spacing:.015em;
}

a{color:var(--pc-blue);}
a:hover{color:var(--pc-accent-dark);}

.header-container{
  background:var(--pc-ink);
  border-bottom:3px solid var(--pc-accent);
}
.header-container-in,
.header-container-in a,
.site-name-text{
  color:#fff;
}
.logo-text{
  font-weight:800;
  letter-spacing:.04em;
}
.navi{
  background:var(--pc-ink-2);
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.navi-in > ul > li > a{
  color:#fff;
  font-weight:700;
  border-bottom:3px solid transparent;
}
.navi-in > ul > li > a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-bottom-color:var(--pc-accent);
}

.main,
.sidebar{
  background:var(--pc-white);
  border:1px solid var(--pc-line);
  border-radius:12px;
  box-shadow:var(--pc-shadow);
}

.entry-title,
.article h1{
  color:var(--pc-ink);
  font-weight:800;
  line-height:1.35;
}
.article h2{
  margin-top:2.3em;
  padding:.72em .85em .66em;
  color:#fff;
  background:var(--pc-ink);
  border-left:6px solid var(--pc-accent);
  border-radius:7px;
  line-height:1.45;
}
.article h3{
  margin-top:1.8em;
  padding:.35em .15em .45em .75em;
  border-left:4px solid var(--pc-accent);
  border-bottom:1px solid var(--pc-line);
  color:var(--pc-ink);
  font-weight:800;
}
.article p{
  line-height:1.95;
}
.article strong{
  background:linear-gradient(transparent 64%, rgba(240,162,46,.26) 64%);
}

.article table{
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--pc-line);
  border-radius:8px;
}
.article table th{
  background:#edf2f4;
  color:var(--pc-ink);
  font-weight:800;
}
.article table th,
.article table td{
  border-color:var(--pc-line);
  padding:.72em .8em;
}

.toc{
  border:1px solid var(--pc-line);
  border-top:4px solid var(--pc-accent);
  border-radius:9px;
  background:#fbfcfc;
}
.toc-title{
  font-weight:800;
  color:var(--pc-ink);
}

.entry-card-wrap,
.related-entry-card-wrap{
  border:1px solid var(--pc-line);
  border-radius:10px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover{
  transform:translateY(-2px);
  box-shadow:var(--pc-shadow);
  border-color:#c7d2d8;
}
.entry-card-title{
  color:var(--pc-ink);
  font-weight:800;
}

.wp-block-button__link,
a.wp-block-button__link{
  background:var(--pc-accent);
  color:#1b2429 !important;
  border-radius:7px;
  font-weight:800;
  box-shadow:0 4px 0 var(--pc-accent-dark);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wp-block-button__link:hover,
a.wp-block-button__link:hover{
  color:#111 !important;
  transform:translateY(1px);
  box-shadow:0 2px 0 var(--pc-accent-dark);
}

/* ポタ電コンパス トップ */
.potaden-hero{
  position:relative;
  overflow:hidden;
  margin:-18px -18px 34px;
  padding:58px 48px;
  border-radius:12px;
  background:
    radial-gradient(circle at 86% 18%, rgba(240,162,46,.24), transparent 27%),
    linear-gradient(135deg, #17232c 0%, #22343f 72%, #2d4553 100%);
  color:#fff;
}
.potaden-hero:after{
  content:"";
  position:absolute;
  right:-35px;
  bottom:-70px;
  width:220px;
  height:220px;
  border:34px solid rgba(255,255,255,.045);
  border-radius:50%;
}
.potaden-hero h1{
  margin:0 0 16px;
  color:#fff;
  font-size:clamp(30px,4vw,46px);
  letter-spacing:.03em;
}
.potaden-hero p{
  max-width:760px;
  margin:0 0 26px;
  color:#e9f0f3;
  font-size:1.08em;
}
.potaden-kicker{
  display:inline-block;
  margin-bottom:14px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#ffd48c;
  font-size:.82em;
  font-weight:800;
  letter-spacing:.08em;
}
.potaden-hero .wp-block-button__link{
  padding:.9em 1.35em;
}

.potaden-section-title{
  margin:42px 0 18px !important;
  padding:0 0 10px !important;
  color:var(--pc-ink) !important;
  background:none !important;
  border:0 !important;
  border-bottom:3px solid var(--pc-accent) !important;
  border-radius:0 !important;
}

.potaden-card-grid{
  gap:18px !important;
}
.potaden-card{
  height:100%;
  padding:22px;
  border:1px solid var(--pc-line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 6px 18px rgba(23,35,44,.06);
}
.potaden-card h3{
  margin:.1em 0 .55em !important;
  padding:0 !important;
  border:0 !important;
  color:var(--pc-ink);
  font-size:1.08em;
}
.potaden-card p{
  margin-bottom:.8em;
  color:var(--pc-muted);
  line-height:1.75;
}
.potaden-card a{
  font-weight:800;
}

.potaden-step{
  padding:22px;
  border-left:4px solid var(--pc-accent);
  background:#f9fbfb;
}
.potaden-step strong{
  background:none;
  color:var(--pc-accent-dark);
}

.potaden-note{
  margin:28px 0;
  padding:20px 22px;
  border:1px solid #ead1a6;
  border-radius:9px;
  background:#fff8ed;
}

.sidebar h3,
.sidebar .widget-title{
  padding:.5em .7em;
  border-left:4px solid var(--pc-accent);
  background:#f4f7f8;
  color:var(--pc-ink);
  font-weight:800;
}

.footer{
  margin-top:40px;
  background:var(--pc-ink);
  color:#dfe7eb;
}
.footer a{color:#fff;}

@media screen and (max-width: 834px){
  .main,.sidebar{border-radius:8px;}
  .potaden-hero{
    margin:-12px -12px 26px;
    padding:38px 24px;
    border-radius:8px;
  }
  .potaden-hero h1{font-size:30px;}
}

@media screen and (max-width: 480px){
  .potaden-hero{padding:32px 18px;}
  .potaden-hero h1{font-size:27px;}
  .article h2{font-size:1.16em;}
  .potaden-card{padding:17px;}
}

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

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

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