/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


.tabs{
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--tab-border);
    border-radius: 12px;
    overflow: clip;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
  }

  /* ラジオは非表示 */
  .tabs input[type="radio"]{position: absolute; opacity: 0; pointer-events: none;}

  /* タブ見出し */
  .tab-labels{
    display: flex;
    gap: 10px;
    background: var(--tab-bg);
    border-bottom: 1px solid var(--tab-border);
  }
  .tab-label{
    flex: 1;
    display: block;
    text-align: center;
		font-size:20px;
    padding: 32px 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .2s, color .2s, box-shadow .2s;
    outline: none;
  }
  .tab-label:focus-visible{box-shadow: inset 0 0 0 2px #93c5fd;}

  /* パネル */
  .panels{padding: 16px;}
  .panel{display: none; animation: fade .18s ease;}
  @keyframes fade{from{opacity:0; transform: translateY(2px)} to{opacity:1; transform:none}}

  /* 選択状態のスタイル（上のラジオと対応） */
  #tab-machida:checked + label[for="tab-machida"]{background: #fff; color: var(--tab-active); box-shadow: inset 0 -2px 0 0 var(--tab-active);}
  #tab-mizonokuchi:checked + label[for="tab-mizonokuchi"]{background: #fff; color: var(--tab-active); box-shadow: inset 0 -2px 0 0 var(--tab-active);}

  /* 選択中のパネルだけ表示 */
  #tab-machida:checked ~ .panels #panel-machida{display: block;}
  #tab-mizonokuchi:checked ~ .panels #panel-mizonokuchi{display: block;}

  /* スマホ最適化（タブは横並び→そのまま、指で押しやすく） */
  @media (max-width: 640px){
    .tab-label{padding: 14px 10px}
    .panels{padding: 14px}
  }

/* 選択状態のスタイル */
#tab-machida:checked + label[for="tab-machida"]{
  background: #95ba63;  /* 背景色を追加 */
  color: var(--tab-active);
  box-shadow: inset 0 -2px 0 0 var(--tab-active);
}
#tab-mizonokuchi:checked + label[for="tab-mizonokuchi"]{
  background: #95ba63;  /* 背景色を追加 */
  color: var(--tab-active);
  box-shadow: inset 0 -2px 0 0 var(--tab-active);
}


.small {
	font-size:18px;
	color:#666;
	padding:0px 10px;
}
.post-content {
	padding:60px 10px !important;
}

.widget-area {
	padding:60px 30px !important;
}

@media (max-width: 600px){
.post-content {
	padding:80px 10px 0px !important;
}

.widget-area {
	padding:10px 10px !important;
}
}









/* リストの余白・線 */
.recent-three{
  list-style: none;
  margin: 0;
  padding: 0;
}
.recent-three__item{
  border-bottom: 1px solid #eee; /* ← 薄い下線(#eee) */
}
.recent-three__link{
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
}

/* PC/タブレット：日付とタイトルを横並び（同じ行） */
.recent-three__date{
  margin-right: .6em;
  white-space: nowrap;
  color: #333;
}
.recent-three__title{
  color: #111;
}

/* スマホ：日付の後で改行してタイトル */
@media (max-width: 600px){
  .recent-three__date{
    display: block;       /* ← ここで改行 */
    margin-right: 0;
    margin-bottom: 2px;
  }
}

.ymarker {
padding: 0 2px;
background: linear-gradient(transparent 50%, #E5F04E 10%);
}

.triangles {
  position: relative;
  width: 100%;
  background: white; /* ベース背景色 */
  overflow: hidden; /* 三角形のはみ出しを隠す */
}

/* 左上の三角形 */
.triangles::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 200px solid #7ea864; /* 左上の黄緑 */
  border-bottom: 200px solid transparent;
  z-index: 0;
}

/* 左下の三角形 */
.triangles::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 200px solid transparent;
  border-right: 400px solid #ddd; /* 左下のグレー */
  z-index: 0;
}

/* 右下の三角形（別の要素で追加） */
.triangle-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 200px solid transparent;
  border-left: 400px solid #47774e; /* 右下の水色 */
  z-index: 0;
}

/* コンテンツ部分 */
.triangles .content {
  position: relative;
  z-index: 1;
  padding: 40px;
}

@media (max-width: 600px) {
  .triangles {
  }

  .triangles::before {
    border-left: 120px solid #7ea864;
    border-bottom: 80px solid transparent;
  }

  .triangles::after {
    border-top: 80px solid transparent;
    border-right: 240px solid #ddd;
  }

  .triangle-right {
    border-top: 80px solid transparent;
    border-left: 240px solid #47774e;
  }
}



/* ===================== 基本色 ===================== */
:root{
  --hdr-bg: rgba(36,47,58,.68);
  --hdr-text: #000;
  --hdr-sub: rgba(255,255,255,.65);
  --acc-line: rgba(255,255,255,.15);
  --brand-yellow:#E5F04E;
}

/* Astraが外側に背景を付けるので透明化して内側だけに色を付ける */
.site-header{ background: transparent !important; }

/* ===================== PC：中央寄せパネル ===================== */
@media (min-width: 921px){

  /* ← overflow: visible に。ドロップダウンを切らない */
  .site-primary-header-wrap{
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(120%) blur(4px);
    border-bottom: 1px solid var(--acc-line);
    max-width: 1240px;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    z-index: 1000;           /* ← 下層より前面に */
    overflow: visible;       /* ← ここが重要 */
  }

  .site-primary-header-wrap .ast-builder-grid-row{
    padding-inline: 24px;
  }

  .ast-desktop .main-header-menu{
    flex-wrap: nowrap;
    gap: 0;
  }
  .ast-desktop .main-header-menu > li{ margin: 0; position: relative; }

  .ast-desktop .main-header-menu > li > .menu-link{
    color: var(--hdr-text);
    padding: 16px 18px;
    font-size: clamp(10px,1.05vw,15px);
    letter-spacing: .06em;
    line-height: 1.2;
  }
  .ast-desktop .main-header-menu > li > .menu-link:hover{ opacity:.86; }

  /* サブメニュー：背景黒はここだけに適用 */
  .ast-desktop .main-header-menu .sub-menu{
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 18px 22px;
    min-width: 260px;            /* 必要分だけの幅に */
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .ast-desktop .main-header-menu .sub-menu li{ border-bottom:1px dashed var(--acc-line); }
  .ast-desktop .main-header-menu .sub-menu li:last-child{ border-bottom:0; }
  .ast-desktop .main-header-menu .sub-menu a{
    color:#000; padding:14px 6px; display:flex; justify-content:space-between;
  }
  .ast-desktop .main-header-menu .sub-menu a::after{ content:"\2192"; opacity:.6; }

  /* 右側：Instagram/Contact を横並びに */
  .ast-grid-right-section{ display:flex; align-items:center; gap:14px; }
  .ast-header-html, [class*="ast-header-html"]{
    display:flex; align-items:center; gap:14px; white-space:nowrap;
  }
  .btn--instagram, .btn--contact{
    display:inline-flex; align-items:center; justify-content:center;
    width:50px; height:50px; border-radius:50%;
    font-size:19px; text-decoration:none;
    color:#fff; box-shadow:0 2px 0 rgba(255,255,255,.15) inset, 0 1px 6px rgba(0,0,0,.2);
  }
  .btn--instagram{
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  .btn--contact{ background: var(--brand-yellow); color:#111; }
}

/* ===================== SP：追従ヘッダー ===================== */
@media (max-width:920px){
	#ast-mobile-header .ast-primary-header-bar,
  .ast-theme-transparent-header #ast-mobile-header .ast-primary-header-bar,
  .ast-theme-transparent-header .ast-mobile-header-wrap .ast-primary-header-bar {
    background-color: rgba(255,255,255,.9) !important; /* 白半透明 */
    border-bottom: 1px solid rgba(0,0,0,.06);

    /* ↓ぼかしを無効化 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ast-mobile-header-wrap{
    position: fixed; top:0; left:0; width:100%; z-index:9999;
    background-color: rgba(255, 255, 255, 0.8) !important;
    
  }

  .ast-mobile-header-wrap .ast-grid-right-section,
  .ast-mobile-header-wrap .ast-header-html,
  .ast-mobile-header-wrap [class*="ast-header-html"]{
    display:flex; align-items:center; gap:10px; white-space:nowrap;
  }
  .ast-mobile-header-wrap .btn--instagram,
  .ast-mobile-header-wrap .btn--contact{
    width:35px; height:35px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .ast-mobile-header-wrap .btn--instagram{
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color:#fff;
  }
  .ast-mobile-header-wrap .btn--contact{ background: var(--brand-yellow); color:#111; }

  .ast-mobile-svg{ color:#fff; fill:#fff; }
}

/* ===================== 透明ヘッダー時の境界線 ===================== */
.header-main-layout-2 .site-primary-header-wrap,
.header-main-layout-1 .site-primary-header-wrap{
  box-shadow: 0 1px 0 var(--acc-line);
}

/* アイコンだけ表示する場合（任意） */
.btn--instagram span, .btn--contact span{ display:none; }