@media (max-width: 767px) {
.pconly{
  display:none;
}
}
@media (min-width: 767px) {
.sponly {
  display:none;
}

}


.btm20{    margin-bottom: 20px!important;}
.btm30{    margin-bottom:30px!important;}
.btm40{    margin-bottom:40px!important;}
.btm50{    margin-bottom: 50px!important;}

/* margin-top: 1em〜5em */
.mt-1em { margin-top: 1em !important; }
.mt-2em { margin-top: 2em !important; }
.mt-3em { margin-top: 3em !important; }
.mt-4em { margin-top: 4em !important; }
.mt-5em { margin-top: 5em !important; }

/* margin-bottom: 1em〜5em */
.mb-1em { margin-bottom: 1em !important; }
.mb-2em { margin-bottom: 2em !important; }
.mb-3em { margin-bottom: 3em !important; }
.mb-4em { margin-bottom: 4em !important; }
.mb-5em { margin-bottom: 5em !important; }

.btn-shop {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  padding: 0.5em 1.5em;
  margin: 0.5em 0;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.btn-shop:hover {
  opacity: 0.9;
}
.btn-amazon {
  background-color: #ffb74b;
  color: #111 !important;
}
.btn-rakuten {
  background-color: #db3030;
  color: #fff !important;
}
.btn-yahoo {
  background-color: #ff0033;
  color: #fff !important;
}
.btn-qoo10 {
  background-color: #4bbef3;
  color: #fff !important;
}


.pochipp-box {
    grid-template-columns: 200px 1fr;
}

.pochipp-box__title {
  font-size: 18px;
    margin-bottom: 0.6em;
}
.pochipp-box__info {
   font-size: 15px;
    margin-bottom: 1em;
    line-height: 1.8;
}
.pochipp-box__price {
    font-size: 15px;
}

@media (max-width: 768px) {
.pochipp-box__title {
      font-size: 16px;
    margin-bottom: 0.6em;
}
.pochipp-box__info {
    font-size: 14px;
    margin-bottom: 1em;
    line-height: 1.8;
}
.pochipp-box__price {
     font-size: 14px;
}
}

/* ========== 基本ナビゲーション構造 ========== */
#site-navigation {
  float: left;
}

#site-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#site-navigation ul li {
  display: inline-block;
  line-height: 40px;
  margin-right: -3px;
  position: relative;
}

#site-navigation ul li a {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  color: #fff;
  display: block;
  padding: 0 15px;
  position: relative;
  text-transform: capitalize;
}

#site-navigation ul ul.children li a {
  line-height: 25px;
  padding: 8px 15px;
}

#site-navigation ul li:hover > a,
#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current_page_item > a,
#site-navigation ul li.current-menu-ancestor > a,
#site-navigation ul li.focus > a {
  background: #028a9a;
}

/* ========== サブメニューの基本 ========== */
#site-navigation ul.sub-menu,
#site-navigation ul.children {
  background: #029fb2;
  width: 200px;
  position: absolute;
  z-index: 99;
  left: -9999rem;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
}

#site-navigation ul li:hover > ul.sub-menu,
#site-navigation ul li:hover > ul.children,
#site-navigation ul li.focus > ul.sub-menu,
#site-navigation ul li.focus > ul.children {
  left: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
}

#site-navigation ul.sub-menu li,
#site-navigation ul.children li {
  float: none;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}

#site-navigation ul.sub-menu li a,
#site-navigation ul.children li a {
  line-height: 24px;
  padding: 10px 15px;
}

#site-navigation ul.sub-menu li:last-child,
#site-navigation ul.children li:last-child {
  border: none;
}

#site-navigation ul li ul.sub-menu li {
  background-color: #17afc1;
}

/* ▼ 矢印アイコン（FontAwesome） */
#site-navigation ul li.menu-item-has-children > a:before,
#site-navigation ul li.page_item_has_children > a:before {
  content: "\f107"; /* ▼ */
  font-family: "Font Awesome 5 Free", FontAwesome; /* ← 両対応 */
  font-weight: 900; /* ← FA5では必須 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  font-size: 12px;
  display: inline-block;
}

/* ▼ サブメニューの矢印（右向き） */
#site-navigation ul.sub-menu li.menu-item-has-children > a:before,
#site-navigation ul.children li.page_item_has_children > a:before {
  content: "\f105"; /* ▶ */
}

/* ▼ openクラス時（スマホでクリックされた時） */
#site-navigation ul li.menu-item-has-children.open > a:before {
     transform: translateY(-50%) rotate(180deg) !important;
}

/* ▼ hover時（PCでホバーされた時） */
#site-navigation ul li.menu-item-has-children:hover > a:before {
      transform: translateY(-50%) rotate(180deg) !important;
}

/* ▼ スマホでも矢印が必ず表示されるように上書き */
@media (max-width: 768px) {
  #site-navigation ul li.menu-item-has-children > a:before {
    content: "\f107" !important;
    font-family: "Font Awesome 5 Free", FontAwesome !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-block !important;
  }
}


/* ========== CATEGORY ドロップダウン専用 ========== */
.category-dropdown {
  position: relative;
}

.category-dropdown > a.category-parent {
  display: inline-block;
  padding-right: 25px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.category-dropdown .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  background: #00a0b0;
  margin: 0;
  padding: 0;
  min-width: 220px;
  z-index: 999;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* PC hover時のみ表示 */
.category-dropdown:hover .sub-menu {
  display: block;
}

.category-dropdown .sub-menu li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s;
}

.category-dropdown .sub-menu li a:hover {
  background: #007c8a;
}

/* ========== レスポンシブ調整 ========== */
@media (max-width: 768px) {
  #site-navigation ul li {
    display: block;
  }

  #site-navigation ul.sub-menu {
    position: relative;
    width: 100%;
    left: 0;
    opacity: 1;
    transform: none;
  }

  .category-dropdown .sub-menu {
    position: relative;
    box-shadow: none;
  }

  .category-dropdown:hover .sub-menu {
    display: none; /* スマホではhoverでなくclickで開く */
  }
}

/* ========== 汎用補足 ========== */
#site-navigation ul#primary-menu li.menu-item-has-children a,
#site-navigation #primary-menu li.page_item_has_children a {
  padding-right: 30px;
}

#site-navigation ul li a.sub-toggle {
  display: none;
}

#site-navigation ul li.menu-item-has-children > a {
  position: relative;
}

/*--------------------------------------------------------------
custom
--------------------------------------------------------------*/

#masthead .np-header-ads-area .widget{
    margin: 0;
}
.custom-html-widget .pr {
    text-align: center;
}
.custom-html-widget .pr img {
    margin: 0 auto;
        width: 100%;
    height: auto;
}

select#archives-dropdown-2 {
    width: 100%;
    padding: 0.6em 0.5em;
    border: solid 1px #c1c1c1;
}

.wp-block-separator {
    border: none;
    border-top: none;
    background-color: #e3e3e3;
}

.page h1.entry-title {
    font-size: 35px;
    margin: 1em 0 1em;
}


.post h1.entry-title {
    color: #353535;
    font-weight: 700;
    margin: 1em 0 0.5em;
    padding-bottom: 0;
    text-transform: capitalize;
    font-size: 32px;
    line-height: 1.6;
}
@media (max-width: 767px) {
.post h1.entry-title {
        font-size: 20px !important;
        line-height: 1.6;
}
}
@media (max-width: 767px) {
.page h1.entry-title {
    font-size: 24px!important;
    margin: 0.3em 0 1em!important;
}
}

h2.wp-block-heading {
    font-size: 25px;
    margin: 1.5em 0 1em;
    border-bottom: solid 2px #c7c7c7;
    padding: 0.5em 0;
    position: relative;
}
h2.wp-block-heading:first-child {
    margin: 0 0 1em;
}
h2.wp-block-heading:after {
    content: "";
    display: block;
    height: 2px;
    width: 30%;
    background: #029fb2;
    position: absolute;
    bottom: -2px;
}
h3.wp-block-heading {
    padding-left: 0.5em;
    border-left: solid 5px #029fb2;
    margin-bottom: 1em;
    font-size: 20px;
}
h4.wp-block-heading {
    font-size: 18px;
}
.entry-content {
     font-size: 16px;
    line-height:2;
}
@media screen and (max-width: 769px) {
  .entry-content {
     font-size: 14px;
    line-height: 1.8;
}

}

ul.wp-block-list li ul {
    list-style: none;
    margin-left: 0;
}

.entry-content iframe {
    margin: 1.5em 0;
}

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table thead {
border-bottom: 1px solid #39a3af;
    background: #ededed;
}

table.has-fixed-layout thead {
    background: #ededed;
}
.wp-block-table td, .wp-block-table th {
    border: 1px solid #999;
    padding: .5em;
        line-height: 1.6;
}


.has-background {
   padding: 3%;
}

.has-background p:last-child{
     margin-bottom: 0;
}

ul.wp-block-list {
margin: 1em 0 1em;
}
.wp-block-group.has-background ul {
    margin: 0;
}

.entry-content p:has(+ ul){
  margin-bottom: 0;
}
.entry-content p + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

.entry-content ol + :is(h1, h2, h3, h4, h5, h6) ,ul + :is(h1, h2, h3, h4, h5, h6){
  margin-top: 1.5em;
}

.entry-content h4 + p {
    margin: 0 0 1em;
}
.wp-block-group {
    margin-bottom: 1em;
}

.wp-block-group.has-background h3 {
    margin: 0 0 0.5em;
}
.frame_line {
    border: solid 1px #000;
     padding: 3%;
}
.frame_gray {
    background: #f3f3f3;
    padding: 3%;
}
.frame_blue {
    border-radius: 20px;
    background: #e7f0f3;
    padding: 3%;
}

.wp-block-group h3 {
    margin: 0 0 0.5em;
}
.wp-block-group h4 {
    margin-top: 0.5em;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 40px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
figure.wp-block-gallery.has-nested-images {
    align-items: normal;
    margin: 1.5em 0;
}


.title_style01 {
    background: #029fb2;
    color: #fff;
    padding: 0.6em 1em;
    margin: 0 0 1.2em;
}
.title_style02 {
    background: #efefef;
    padding: 0.6em 1em;
    margin: 0 0 1.2em;
}
ul + .title_style01,ul + .title_style02 {
    margin-top: 2em;
}
h4 + ol.wp-block-list {
      margin: 0 0 2.5em;
}
.entry-content mark {
    --color: #fff7ac;
    --height: 0.50em;
    background: linear-gradient(transparent 60%, #fff7ac 0) !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

}
/* 数字アイコン付きh3のスタイル */
.number-heading {
    position: relative;
    padding-left: 2em;
    margin: 25px 0 15px 0;
}

.number-heading::before {
    content: counter(heading-counter);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    background-color: #029FB2;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

/* 5つのポイントセクション用のカウンター */
.five-points {
    counter-reset: heading-counter;
}

.five-points .number-heading {
    counter-increment: heading-counter;
}



.tea-card h3 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    display: flex; 
}



/* 追加するCSS */
.tea-card-title .tea-title-text {
        flex-grow: 1;
        flex-basis: 0; 
    white-space: normal;
    align-self: flex-start;
}

h3.number {
    display: flex!important;
    margin-top: 1.5em !important;
        font-size: 18px !important;
         margin-bottom: 0.5em;
}

h3.number::before {
   content: attr(data-num)!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 20px!important;
    height: 20px!important;
    background-color: #029FB2!important;
    color: white!important;
    font-weight: bold!important;
    font-family: 'Roboto', sans-serif!important;
    margin-right: 0.5em!important;
    border-radius: 50px!important;
    flex-shrink: 0!important;
    line-height: 20px!important;
    font-size: 0.8em!important;
        margin-top: 0.2em;
}
h4.number {
  display: flex!important;
    align-items: flex-start!important;
  font-weight: bold;
    font-size: 18px !important;
}

h4.number::before {
    content: attr(data-num)!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 20px!important;
    height: 20px!important;
    background-color: #029FB2!important;
    color: white!important;
    font-weight: bold!important;
    font-family: 'Roboto', sans-serif!important;
    margin-right: 0.5em!important;
    border-radius: 50px!important;
    flex-shrink: 0!important;
    line-height: 20px!important;
    font-size: 0.8em!important;
        margin-top: 0.2em;
}


/* チェックマーク付きリストのスタイル */
.check-list {
    list-style: none;
    padding-left: 0;
}

.check-list li {
    position: relative;
    padding-left: 1em !important;
    margin: 0.3em;
    line-height: 1.8;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: -0.3em;
    top: 0;
    color: #0090a1;
    font-weight: 900;
}

/* 通常のリスト（リストマークなし） */

.no-marker-list li {
     margin: 0.3em 0;
    line-height: 1.8;
    list-style: disc;
    list-style-position: inside;
}

p + ul.wp-block-list {
    margin-top: 0.5em;
}


        .info-box {
background: #e8f4f5;
    padding: 20px 20px 20px;
    margin: 20px 0 40px;
    border-radius: 10px;
        }

        .info-box p {
    margin: 0 0 0.3em;
}
        .warning-box {
    background: #fffbeb;
    padding: 20px;
    margin: 20px 0 30px;
    border-radius: 10px;
        }


  .tea-card {
    background: #ffffff;
    border-radius: 10px;
    margin: 40px 0 0;
        }
 
        .tea-info {
    margin: 20px 0;
    padding-left: 15px;
    border-left: 3px solid #71c3cd;
        }
        .tea-info p {
            margin: 5px 0;
            font-size: 15px;
        }
        .reference {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            padding: 20px;
            margin-top: 40px;
            font-size: 13px;
            color: #6b7280;
            border-radius: 4px;
        }
        .reference ul {
            list-style: none;
            padding: 0;
        }
        .reference li {
            margin: 8px 0;
        }



.toc {
            background: #f9fafb;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px 25px;
            margin: 30px 0;
        }
        .toc h2 {
            margin: 0 0 15px 0;
            font-size: 18px;
            border: none;
            padding: 0;
            color: #374151;
        }

@media screen and (max-width: 769px) {
.toc {
    border-radius: 8px;
    padding: 20px 15px!important;
    margin: 30px 0;
}
}


        .toc ol {
margin: 1em 0 0.5em;
    padding: 0;
    list-style: none;
    counter-reset: li;
        }
        .toc li {
position: relative;
    padding-left: 1.8em;
    line-height: 1.6;
    text-indent: inherit;
        }
        .toc a {
            color: #029fb2;
            text-decoration: none;
        }
        .toc a:hover {
            text-decoration: underline;
        }

        .toc ol.wp-block-list {
    margin: 0;
}


.toc ol li:not(:first-child) {
  margin-top: 0.8em;
}

.toc ol li::before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: 0;
    top: 3px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #029FB2;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.9em;
}

        .brand-card {
            background: #ffffff;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            padding: 25px;
            margin: 30px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .brand-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f3f4f6;
        }
        .brand-name {
            font-size: 22px;
            font-weight: bold;
            color: #029fb2;
            margin: 0;
        }
        .brand-info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            background: #f9fafb;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        .brand-info-item {
            display: flex;
            align-items: baseline;
        }
        .brand-info-label {
            font-weight: bold;
            color: #4b5563;
            margin-right: 8px;
            min-width: 60px;
        }
        .brand-info-value {
            color: #6b7280;
        }
        .brand-features {
            margin: 20px 0;
        }
        .brand-features h4 {
            font-size: 16px;
            color: #374151;
            margin: 0 0 12px 0;
            font-weight: bold;
        }
        .brand-features ul {
            margin: 0;
            padding-left: 20px;
        }
        .brand-features li {
            margin: 8px 0;
            line-height: 1.7;
        }
        .brand-purchase {
            background: #e7f3ff;
            border-left: 4px solid #029fb2;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
        }
        .brand-purchase h4 {
            margin: 0 0 10px 0;
            color: #029fb2;
            font-size: 15px;
        }
        .brand-note {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 12px 15px;
            margin: 15px 0;
            border-radius: 4px;
            font-size: 14px;
        }

.recipe-box {
    background: #fefce8;
    border-radius: 10px;
    padding: 25px;
    margin: 30px 0;
}
 

.recipe_box {
    margin-bottom: 40px;
}

.recipe_box h3 {
    position: relative;
    padding: 0.6em 1em;
    background: #eee9e6;
    letter-spacing: 0.1em;
    color: #333;
    display: block;
    font-weight: bold;
    font-size: 18px;
    margin: 1.5em 0;
}
.recipe_box h3 + p {
    padding: 0 1em;
}
.recipe-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 12px;
    margin: 20px auto;
    display: block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.recipe_box_inner {
    align-items: flex-start;
    display: flex;
    margin: 30px 0 0;
    flex-wrap: wrap;
}
.recipe_box_inner figure {
    width: 40%;
    margin-right: 35px;
}
.recipe_box_inner .recipe_data {
    flex: 1;
}
dl.ingredients{
    display: grid;
        grid-template-columns: 2fr 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
    margin: 10px 0 0;
}
dl.ingredients dt{ grid-column: 1; margin: 0;  }
dl.ingredients dd{ grid-column: 2; margin: 0;  }
dl.ingredients ol {
    margin-bottom: 20px;
}

.recipe_data h4 {
    padding: 0 0 0.6em;
    border-bottom: solid 1px #bdbdbd;
     margin-bottom: 0.6em;
    font-size: 16px;
}

.recipe_box .step {
margin: 1.5em 0 0;
}
.recipe_box .step h4 {
padding: 0 0 0.6em;
    border-bottom: solid 1px #bdbdbd;
    margin-bottom: 1em;
    font-size: 16px;
    font-weight: bold;
}

.recipe_box .step ol {
    margin-bottom: 1.5em;
    list-style: none;
    counter-reset: li;
}
.recipe_box .step ol li
 {
    margin-top: 0.6em;
    position: relative;
    padding-left: 1.8em;
    line-height: 1.6;
    text-indent: inherit;
}
.recipe_box .step ol li::before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: 0;
    top: 3px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #029FB2;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.9em;
}
@media (max-width: 600px){
  dl.ingredients{     grid-template-columns: 3fr 1fr;}
  dl.ingredients dd{ text-align: left; white-space: normal; }
}

@media screen and (max-width: 769px) {
    .recipe_box_inner {
        display: block;
        margin: 0;
    }
.recipe_box_inner figure {
        width: 100%;
        margin: 0 0 15px;
}
.recipe_box_inner .recipe_data {
    margin-left: 0;
 flex: 1;
}
.recipe_box_inner .recipe_data ul {
    margin-bottom: 1.5em;
}
.recipe_box .step {
    margin: 1.5em 0 0;
}
.recipe_box h3 {
    position: relative;
    padding: 0.5em 1em;
    background: #eee9e6;
    font-size: 16px;
    letter-spacing: 0.1em;
    color: #333;
    display: block;
    font-weight: 600;
}
}


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

h2.wp-block-heading {
    font-size: 20px;
    margin: 1em 0 0.8em;
    border-bottom: solid 1px #bfbfbf;
    padding: 0.5em 0;
}
    h2.wp-block-heading:first-child {
        font-size: 20px;
        margin: 0 0 0.8em!important;
        border-bottom: solid 1px #bfbfbf;
        padding: 0 0 0.5em;
    }

h3.wp-block-heading {
        margin: 1.5em 0 1em;
        font-size: 16px;
        line-height: 1.6;
}
h4.wp-block-heading {
margin: 0.5em 0 1em;
        font-size: 16px;
}
.wp-block-group h4.wp-block-heading {
    margin: 0 0 0.8em;
}
.wp-block-group ul.wp-block-list {
    margin-bottom: 0;
}

.info-box ol.wp-block-list {
    margin: 1.5em 0 0;
}
.info-box {
    background: #e8f4f5;
    padding: 20px 20px 10px;
    margin: 20px 0 40px;
    border-radius: 10px;
}
.warning-box h4 {
    margin-bottom: 1em;
}
}

.stepcircle {
  display: inline-block;
  width: 3em;
  height: 3em;
  content: "";
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  text-align: center;
}

.stepcircle span {
  display: inline-block;
  line-height: 1.2em;
  font-size: 0.8em;
  font-weight: bold;
  position: relative;
  top: 0.9em;
}


/* olのスタイル */
ol.wp-block-list{
    margin: 2em 0;
    padding: 0;
    list-style: none;
    counter-reset: li;
}

/* ol内のliのスタイル */
ol.wp-block-list li {
position: relative;
    padding-left: 1.8em;
    line-height: 1.6;
    text-indent: inherit;
}
ol.wp-block-list li strong {

}
/* 2つ目以降のliにmargin-topを指定 */
ol.wp-block-list li:not(:first-child) {
  margin-top: 0.8em;
}

/* 数字のスタイル */
ol.wp-block-list > li::before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: 0;
    top: 3px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #029FB2;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.9em;
}
ol.wp-block-list li > ul {
    margin: 0;
}
ol.wp-block-list li > ul li {
    margin: 0.6em 0 0;
    padding-left: 1em;
    text-indent: -1em;
}
.point_box {
    margin-bottom: 2em;
}

/* ========== attention box ========== */

/* ======================================
   attention_box 共通
   ====================================== */
.attention_box {
    border-radius: 10px;
    padding: 25px;
      margin: 1.5em 0 1.5em;
    line-height: 1.8;
        font-size: 15px;
}

.attention_box + h3.wp-block-heading{
 margin-top: 2em;
}
.attention_box + h4,.attention_box + h3{
 margin-top: 3em;
}
/* スマホ時：改行＆コロン非表示 */
@media (max-width: 767px) {
.attention_box {
  border-radius: 10px;
  padding: 20px 15px;
  margin: 30px 0;
  line-height: 1.8;
   font-size: 13px;
}
h3 + .attention_box {
    margin: 0 0 2.5em;
}
}

/* --------------------------------------
   タイトル（h3 / h4 両対応）
   -------------------------------------- */
.attention_box .attention_title {
  display: flex;
  align-items: center;
     margin-bottom: 1.3em;
  font-size: 1.1em;
}

/* デフォルトで縦ラインを表示 */
.attention_box .attention_title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 1em;
    background-color: #029fb2;
    margin-right: 0.6em;
    vertical-align: middle;
    border-radius: 2px;
}

/* 💡 アイコンがある場合に縦ラインを非表示・調整 */
.attention_box .attention_title:has(img)::before,
.attention_box .attention_title:has(span)::before,
.attention_box .attention_title:has(svg)::before {
    content: none; /* または width: 0; */
    margin-right: 0;
}
/* 色バリエーション */
/* .no-icon クラスがある場合（つまり img がない場合）に色を適用 */
.attention_box--blue .attention_title.no-icon::before { background-color: #029fb2; }
.attention_box--yellow .attention_title.no-icon::before { background-color: #c7a600; }
.attention_box--pink .attention_title.no-icon::before { background-color: #e66b94; }
.attention_box--gray .attention_title.no-icon::before { background-color: #999; }

/* 背景カラー */
.attention_box--blue { background-color: #f0f6ff; }
.attention_box--yellow { background-color: #fffbe6; }
.attention_box--pink { background-color: #fff3f3;}
.attention_box--gray { background-color: #f7f7f7; }

/* ======================================
   通常ステップ（横並び）
   ====================================== */
.attention_box .step_list {
  list-style: none;
  padding: 0;
}

.attention_box .step_list li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap; /* ← nowrapを解除して自然折り返し可能に */
      margin-top: 0.5em;
}

.attention_box .step_list li:first-child {
    margin-top: 0 !important;
}

h3.wp-block-heading + .attention_box {
    margin-top: 1.2em;
}

/* 項目名（左側） */
.attention_box .term {
  font-weight: bold;
  white-space: normal;
  position: relative;
  word-break: break-word;
}

/* 説明（右側） */
.attention_box .desc {
  flex: 1;
  min-width: 0;
  line-height: 1.6;
}

/* コロン */
.attention_box .term::after {
  content: "：";
  margin-left: 2px;
}

/* スマホ時：改行＆コロン非表示 */
@media (max-width: 767px) {

  .attention_box .step_list li {
      margin-top: 0.8em;
}

  .attention_box .step_list li:not(.short-inline) {
    flex-direction: column;
    align-items: flex-start;
  }
  .attention_box .term::after {
    content: none;
  }
}


/* ======================================
   リスト（.listed）基本（長文にも対応）
   ====================================== */

.attention_box.listed .step_list li {
  display: flex;
  flex-wrap: wrap; /* 長文対応：必要に応じて折り返す */
  align-items: flex-start;
  position: relative;
  padding-left: 1em;
  margin-top: 0.5em;
  line-height: 1.6;
}

.attention_box.listed .step_list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
  line-height: 1;
}

/* term（左の太字部分） */
.attention_box.listed .term {
  font-weight: bold;
  flex: 0 1 auto; 
  white-space: normal; 
  word-break: break-word; 
  min-width: 8em; 
}


/* PC時：短いtermなら横並びに見えるよう調整 */
@media (min-width: 768px) {
  .attention_box.listed .term {
    min-width: auto;
  }

}

/* スマホ時：完全に縦並び */
@media (max-width: 767px) {
  .attention_box.listed .step_list li {
    flex-direction: column;
    align-items: flex-start;
            margin-top: 0.8em;
  }

  .attention_box.listed .term {
    margin-bottom: 0.3em;
    min-width: auto;
  }

  .attention_box.listed .desc {
    flex: 1 1 100%;
  }
}


/* ======================================
   .short-inline（常に横並び・改行なし）
   ====================================== */
.attention_box .step_list li.short-inline {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline;
}

.attention_box .step_list li.short-inline .term,
.attention_box .step_list li.short-inline .desc {
  display: inline !important;
  white-space: nowrap !important;
}

.attention_box .step_list li.short-inline .term::after {
  content: "：" !important;
  margin-left: 2px;
}

/* スマホでも横並びを維持 */
@media (max-width: 767px) {
  .attention_box .step_list li.short-inline {
    flex-direction: row !important;
    align-items: baseline !important;
  }
  .attention_box .step_list li.short-inline .term,
  .attention_box .step_list li.short-inline .desc {
    white-space: nowrap !important;
  }
}



/* ======================================
   listed--wrap：termが長いとき自動折り返し
   ====================================== */
.attention_box.listed--wrap .step_list li {
  flex-wrap: wrap !important; 
  align-items: flex-start;
  position: relative;
  padding-left: 1.4em;
  margin-top: 0.8em;
  line-height: 1.8;
}

.attention_box.listed--wrap .term {
  font-weight: bold;
  flex: 0 1 auto;
  margin-right: 0.3em;
  white-space: normal;
  word-break: break-word;
}

.attention_box.listed--wrap .desc {
  flex: 1 1 100%;
  white-space: normal;
  line-height: 1.8;
  margin-top: 0.2em;
}

/* ======================================
   listed--break：PCでも常に縦積み
   ====================================== */
.attention_box.listed--break .step_list li {
    position: relative;
    padding-left: 1em;
    margin-top: 0.8em;
    line-height: 1.6;
    display: block;
}

.attention_box.listed--break .step_list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
  line-height: 1.2;
}

/* タイトル部分 */
.attention_box.listed--break .step_list li .term {
  display: block;
  font-weight: bold;
  margin-bottom: 0.2em;
}
/* コロン自動追加 */
.attention_box.listed--break .step_list li .term::after {
  content: none;
}


/* ======================================
   背景なし・左ラインなし（plain）
   ====================================== */
.attention_box--plain {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 15px 0 30px;
    line-height: 1.8;
}

/* タイトル（任意・必要なら残す） */
.attention_box--plain .attention_title {
  margin-bottom: 0.8em;
  font-weight: bold;
  font-size: 1.1em;
}

/* リスト基本設定 */
.attention_box--plain .step_list {
  list-style: disc;
  margin: 0;
  line-height: 1.8;
}

/* 各項目（term + desc） */
.attention_box--plain .step_list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 0.6em;
}

.attention_box--plain .term {
  font-weight: bold;
  white-space: nowrap;
  margin-right: 0.4em;
}

.attention_box--plain .desc {
  flex: 1;
  white-space: normal;
}

/* スマホ時：縦並び */
@media (max-width: 767px) {
  .attention_box--plain .step_list li {
    flex-direction: column;
  }

  .attention_box--plain .term {
    margin-bottom: 0.2em;
  }
}

/* ======================================
   attention_box--border（枠線のみ）
   ====================================== */
.attention_box--border {
  background: none;
  border: 1px solid #000;
  border-radius: 0;
  padding: 20px;
  margin: 30px 0;
}
/* ======================================
   リストマーク無し
   ====================================== */
ul.step_list.no_style li {
    padding: 0 !important;
}
.attention_box .step_list li:first-child {
    margin-top: 0 !important;
}
ul.step_list.no_style li::before{
      content: none!important;
}

/* ======================================
   warning
   ====================================== */

.attention_box.warning {
    font-size: 0.9em;
}

/* ======================================
   attention_list（背景なし・左ライン／ul版）
   ====================================== */
.attention_list {
  list-style: none; /* デフォルトの黒丸削除 */
  border-left: 5px solid #71c3cd;
  padding-left: 1em;
  margin: 30px 0;
  line-height: 1.8;
  background: none;
}

/* 各項目（PC時：横並び） */
.attention_list li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
    margin: 0.5em 0 0;
}

/* 左側（項目名） */
.attention_list .term {
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}

/* コロン自動追加 */
.attention_list .term::after {
  content: "：";
  margin-left: 2px;
}

/* 右側（内容） */
.attention_list .desc {
  flex: 1;
  min-width: 0;
  white-space: normal;
  line-height: 1.8;
}

/* スマホ時：縦積み＋コロン非表示 */
@media (max-width: 767px) {
  .attention_list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .attention_list .term::after {
    content: none;
  }

  .attention_list .term {
    margin-bottom: 0.2em;
  }
}


/* ======================================
   対処法：横並びレイアウト
   ====================================== */
.attention_box .solution {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}
.attention_box .solution .term {
  font-weight: bold;
  white-space: nowrap;
      margin-top: 0;
}
.attention_box .solution .step_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.attention_box .solution .step_list li {
  position: relative;
  padding-left: 1em;
  line-height: 1.6;
}
.attention_box .solution .step_list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #333;
}
@media (max-width: 767px) {
  .attention_box .solution {
    flex-direction: column;
    gap: 0.2em;
  }
}

/* ======================================
   .attention_row ：term + desc専用
   （1行時は「：」表示、折り返し時は消す）
   ====================================== */
.attention_row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap; /* 通常は横並び */
  gap: 0.3em;
  line-height: 1.8;
}

.attention_row .term {
  font-weight: bold;
  white-space: nowrap;
  position: relative;
}

.attention_row .desc {
  flex: 1;
  white-space: normal;
}

/* デフォルト（横並び時）はコロン表示 */
.attention_row .term::after {
  content: "：";
  margin-left: 2px;
}

/* スマホなどで縦積み時はコロンを非表示 */
@media (max-width: 767px) {
  .attention_row {
    flex-direction: column;
    align-items: flex-start;
  }
  .attention_row .term::after {
    content: none;
  }
}


/* ======================================
   番号付きリスト（ol）を丸数字にする
   ====================================== */
.attention_box ol.step_list {
  counter-reset: number; /* 番号リセット */
  list-style: none; /* デフォルト番号を消す */
  padding-left: 0;
}

.attention_box ol.step_list li {
  position: relative;
  padding-left: 1.8em; /* 数字の分だけ左余白 */
  margin-top: 0.8em;
    padding-left: 1.8em !important;
  counter-increment: number;
}

/* 丸数字デザイン */
.attention_box ol.step_list li::before {
content: counter(number) !important;
    position: absolute;
    left: 0;
    top: 0.3em !important;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #029FB2;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9em !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px !important;
    font-family: 'Roboto', sans-serif;
}



/* ピンク・ブルーなど他色にも対応 */
.attention_box--pink ol.step_list li::before {
  background-color: #e66b94;
}
.attention_box--blue ol.step_list li::before {
   background-color: #029FB2;
}
.attention_box--yellow ol.step_list li::before {
  background-color: #ec9522;
}
.attention_box--gray ol.step_list li::before {
  background-color: #029FB2;
}

span.term.nobold {
    font-weight: normal !important;
}
.attention_box .note {
    margin: 1em 0 0;
}
.attention_box .attention_title .emoji {
       margin: 0 0.2em 0 0 !important;
}
.attention_box p:last-child {
    margin-bottom: 0 !important;
}
.attention_box h3:first-child {
    margin-top: 0 !important;
}



.video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
   margin-bottom: 5em;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#sideBnr01 a, #sideBnr02 a, #sideBnr03 a {
    margin-bottom: 20px;
        display: block;
}
/* 画像の下の余白を消す定番のCSS */
#wellness_beauty img {
    display: block;  /* 💡 インライン要素からブロック要素に変更 */
}
/* または */
#wellness_beauty img {
    vertical-align: bottom; /* 💡 画像を下揃えにする */
}
.widget_custom_html {
    margin-bottom: 20px;
}
div#sideBnr01 img, #sideBnr02 img, #sideBnr03 img {
    border: solid 1px #ddd;
     display: block;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

.wp-block-group.img_colum > div{
    display: flex;
    align-items: center;
    margin-bottom: 2em;
}
.wp-block-group.img_colum > div figure {
    max-width: 45%;
}
.wp-block-group.img_colum .img_colum_txt{
  flex: 1;
   margin-left: 2em;
}
.wp-block-group.img_colum .img_colum_txt{
  flex: 1;
   margin-left: 2em;
}

h3 + .img_colum {
    margin-top: 2.5em;
}

@media (max-width: 767px) {
.wp-block-group.img_colum > div{
    display: block;
    margin-bottom: 1em;
}
.wp-block-group.img_colum > div figure{
        width: 100% !important;
                max-width: 100%;
        margin-bottom: 1em;
}
.wp-block-group.img_colum .img_colum_txt{
           margin-left: 0;
}
}



figure + h3.wp-block-heading {
    margin-top: 2em;
}

h3 + figure.wp-block-table {
    margin-top: 1.5em;
}


/* --------------------------------------
   ブログ記事のテーブルデザイン用CSS
   -------------------------------------- */

.blog-table {
    border-collapse: collapse;
    margin: 10px 0; /* 上下の余白 */
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    border: 1px solid #ccc;
    width: 100%;
}

.blog-table th,
.blog-table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ccc; /* セル間の区切り線 */
    vertical-align: middle;
}

/* ヘッダー行のスタイル */
.blog-table thead th {
    background-color: #f0f8ff; /* サイトカラーに近い薄い背景色 */
    color: #029FB2; /* サイトカラーを文字色に使用 */
    font-weight: bold;
    border-bottom: 2px solid #029FB2; /* サイトカラーで強調 */
}

/* 偶数行の背景色 (ストライプ) */
.blog-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ホバー時のスタイル (オプション) */
.blog-table tbody tr:hover {
    background-color: #f0f0f0;
}

/* 備考欄など、特定の列を強調したい場合のスタイル (オプション) */
.blog-table td:last-child {
    font-size: 13px;
    color: #555;
}


.table-responsive {
  width: 100%;
    overflow-x: auto; /* 横方向のスクロールを有効にする */
    -webkit-overflow-scrolling: touch; /* iOSでの滑らかなスクロールを有効にする */
    margin-bottom: 20px; /* 下の余白 */
    
}

.table-responsive + h3 {
    margin-top: 2em;
}

@media (max-width: 767px) {
.table-responsive {
    overflow-x: scroll; 
    -webkit-overflow-scrolling: touch; 
}
.blog-table {
	width: 100%;
	min-width: 600px;
}
.blog-table.short {
	width: 100%;
	min-width: auto;
}

/* 最初の列のセルすべてに適用 */
.blog-table.fixed th:first-child,
.blog-table.fixed td:first-child {
    position: sticky; /* スクロール時に要素を固定 */
    left: 0; /* 左端から0の位置に固定 */
    z-index: 2; /* 他のセルより前面に表示するために z-index を指定 */
    background-color: #f0f8ff; /* 👈 セルの背景色を設定（重要）*/
    
    /* ------------------------------------- */
    /* 補足: スクロール時に線のちらつきを防ぐ調整 (オプション) */
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    /* ------------------------------------- */
}

/* ヘッダーセルの固定時の背景色をヘッダーの色に合わせる */
.blog-table.fixed thead th:first-child {
    background-color: #f0f8ff; /* ヘッダー行の背景色に合わせる */
}

/* ボディセルの偶数行の背景色を合わせる */
.blog-table.fixed tbody tr:nth-child(even) td:first-child {
    background-color: #f9f9f9; /* 偶数行の背景色に合わせる */
}

}

a.pr_img img {
    max-height: 100px;
    width: auto;
    margin: 0 auto;
    display: block;
    margin-block: 0.6em;
}
a.pr_img + strong {
  text-align: center;
  display: block;
}


/* 書籍セクション用CSS */

.book-section {
  margin: 30px 0;
}

.book-item {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    padding: 30px;
    background: #f7f9f9;
    border-radius: 10px;
}


.book-image {
  flex-shrink: 0;
  width: 150px;
}

.book-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.book-content {
  flex: 1;
}

.book-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin: 0 0 1em 0;
    line-height: 1.4;
    border-bottom: solid 1px #d7d7d7;
    padding: 0 0 0.8em;
}

.book-description {
  color: #555;
  line-height: 1.7;
  margin-bottom: 15px;
}

h3 + .book-item {
    margin-top: 2em;

}

dl.book-details {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.book-details dt {
    display: inline-block;
    font-weight: bold;
    color: #029FB2;
    margin: 0;
    width: 5em;
}

.book-details dd {
    width: calc(100% - 5em);
    padding: 0;
    color: #333;
}

.book-details dd::after {
  content: "";
  display: block;
  margin-bottom: 8px;
}

.book-details dd:last-child::after {
  margin-bottom: 0;
}

.book-purchase-links {
  margin-top: 5px;
}

.book-purchase-links a {
    display: inline-block;
    margin-right: 10px;
    padding: 0.6em 0.5em;
    background-color: #029FB2;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    line-height: 1;
}

.book-purchase-links a:hover {
  background-color: #027a8a;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .book-item {
    flex-direction: column;
    align-items: center;
  }
  
  .book-image {
    width: 180px;
    margin-bottom: 15px;
  }
  
  .book-content {
    width: 100%;
  }
  
  
  .book-details dd::after {
    margin-bottom: 5px;
  }
}

/* セクション見出し用 */
.book-section-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  margin: 40px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 3px solid #029FB2;
}

p + .disclaimer-accordion{
  margin-top: 2em;
}

/* アコーディオン全体のスタイル */
.disclaimer-accordion {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #fdfdfd;
    margin: 20px 0;
    font-size: 0.9em; /* 文字サイズ調整 */
    line-height: 1.6;
}

/* クリックする部分（タイトル）のスタイル */
.disclaimer-accordion summary {
    padding: 0.8em 1em;
    background-color: #fffce5;
    color: #474747;
    cursor: pointer;
    outline: none;
    position: relative;
    list-style: none;
    font-weight: bold;
}

/* デフォルトの三角を消す（Chrome/Safari用） */
.disclaimer-accordion summary::-webkit-details-marker {
    display: none;
}

/* アイコン（＋マーク）を追加 */
.disclaimer-accordion summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-weight: bold;
    transition: transform 0.2s;
}

/* 開いたときのアイコン（－マーク）の挙動 */
.disclaimer-accordion[open] summary::after {
    transform: rotate(45deg);
}

/* 中身のコンテンツ */
.disclaimer-content {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;
    color: #333;
}

/* 中身の小見出し */
.disclaimer-content h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.disclaimer-content h4:first-child {
    margin-top: 0;
}

/* リストのスタイル */
.disclaimer-content ul {
    margin: 10px 0 25px 20px;
    padding: 0;
}