.index-page{
    margin:0px !important;
    padding:0px !important;
}

p {
    padding-left:10px;
    font-size:19px;
}

td {
    font-size:19px;    
}

table {
    width:100%;
}

header{
    padding-top:1px !important;
    background-color:#FFF;
}


.page h2{
    margin-top:15px !important;
    text-align:center;
    font-size:24px !important;
}

.page h3{
    font-size:18px !important;
}


/*----------*/

@media (max-width: 1199.98px) {
  .scroll-top.active {
    bottom: 85px;
  }
}


.fixed-bottom .col {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}


h1::before,h2::before{
/*  content: "\f219";*/
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal;
  margin:10px 10px 10px 10px;
  color: #6c757d;   /* アイコンの色 */    
}


.top-main {
   padding: 120px 0 60px 0;
}

.blog-container {
  display: flex;
  gap: 30px;
}

.blog-main {
  flex: 3; /* 本文の幅（比率） */
  min-width: 0;
}

.blog-sidebar {
  padding:120px 0 0 0;
  flex: 1; /* サイドバーの幅（比率） */
  min-width: 250px;
}



:root {
    /*    --accent-color: #1d3df1; *//* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */


    --heading-font: sans-serif;    
}
.header {
  --background-color: rgba(177, 36, 38, 1) !important;    
}
.scrolled .header {
  --background-color: rgba(177, 36, 38, 1);    
}
.page-title {
    padding: 120px 0 0px 0;
    text-align:left;
}
.page-title h1{
    font-size:30px;
}
/*記事冒頭のメタライン*/
.post_meta {
  align-items: stretch;
}
.post_meta, .post_meta span {
  display: inline-flex;
  flex-flow: row wrap;
}

.post_meta span {
  align-items: center;
  margin-bottom: 0.5rem;
}

@media screen and (min-width: 557px) {
  .post_meta span {
    gap: 0.5rem 0;
  }
}

@media screen and (max-width: 667px) {
  .post_meta span:last-of-type {
    margin-top: -0.5rem;
  }
}

@media screen and (min-width: 667px) {
  .post_meta .button {
    margin: 0 0.5rem;
  }
}

.post_date {
  margin-right: 0.5rem;
  margin-left: 0.25rem;
}




/* 画面幅が狭い場合は1カラムにする */
@media (max-width: 768px) {
  .blog-container {
    flex-direction: column;
  }
}

/*toc*/


/* 目次全体のコンテナ（枠線の設定） */
.post-toc {
    position: relative;           /* タイトルの位置を固定するための基準 */
    display: inline-block;        /* ★中身（リスト）の最大幅に合わせる設定 */
    min-width: 200px;             /* 目次が短すぎるときのために最小の横幅を設定 */
    max-width: 100%;              /* 画面からはみ出るのを防ぐ */
    box-sizing: border-box;       /* 余白を含めた横幅の計算を正しくする */
    
    border: 1px solid #d0d0d0;    /* 薄い枠線 */
    border-radius: 4px;           /* 角を少し丸める */
    padding: 25px 25px 20px 20px; /* 内側の余白（右側を少し広めに：25px） */
    margin: 30px 0;               /* 前後の本文との余白 */
    background-color: #fff;       /* 背景色 */
}


/* 枠線の上に重なる「目次」タイトル */
.post-toc .toc-title {
    position: absolute;
    top: -12px;                   /* 枠線の真上に配置する調整 */
    left: 15px;                   /* 左側からの位置 */
    background: #fff;             /* 背景色と同じ色にして枠線を消す（重要） */
    padding: 0 10px;              /* 文字の左右のスキマ */
    font-size: 0.95rem;           /* 文字の大きさ */
    font-weight: bold;            /* 太字 */
    color: #555;                  /* 文字の色 */
}

/* リスト（ul）の番号化と位置調整 */
#TableOfContents ul {
    list-style-type: decimal;     /* ulを数字（1. 2. 3.）に変更 */
    padding-left: 20px;           /* 番号が表示されるスペース */
    margin: 0;
}

/* 2階層目（H3など）のリスト */
#TableOfContents ul ul {
    list-style-type: circle;      /* 2階層目は白丸（または lower-alpha で a.b.c） */
    margin-top: 5px;
    padding-left: 20px;
}

/* 各リスト項目の行間 */
#TableOfContents li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* リンクの装飾リセット */
#TableOfContents a {
    color: #333;
    text-decoration: none;
}

#TableOfContents a:hover {
    color: #0066cc;
    text-decoration: underline;
}

/*TABLE*/

/*gallery*/

        /* 縦横がバラバラな画像を横並びでピシッと高さを揃えるための最小限CSS */
        .gallery-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 画像と画像の間隔 */
        }
        .gallery-container a {
            height: 270px; /* 1行の目標となる高さ */
            flex-grow: 1;  /* 横幅を自動で引き伸ばして左右をピッタリ揃える */
        }
        .gallery-container img {
            max-height: 100%;
            min-width: 100%;
            object-fit: cover; /* 縦横比を崩さずに領域を埋める */
            vertical-align: bottom;
            border-radius: 4px;
        }


	/*blockquote*/
blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: 1.5em 1.5em 1.5em 2em;
  background-color: #f7f9fa; /* 穏やかな背景色 */
  color: #333333; /* 視認性の高い文字色 */
  border-radius: 4px;
  border-left: 5px solid #a8b8c8; /* 落ち着いた印象の左線 */
}

blockquote p {
  margin: 0;
  padding: 0;
  line-height: 1.8;
}

/* 引用元（cite要素など）を添える場合 */
blockquote cite {
  display: block;
  margin-top: 1em;
  color: #666666;
  font-size: 0.85em;
  text-align: right;
  font-style: normal;
}	



/* インラインコード（文中に登場するコード） */
code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  background-color: #f1f4f6; /* 目に優しい淡いグレーブルー */
  color: #c0392b;            /* 視認性の高い落ち着いた赤・エンジ色 */
  padding: 0.2em 0.4em;
  margin: 0 0.2em;
  font-size: 0.85em;
  border-radius: 4px;
}

/* コードブロック（複数行のコード） */
pre {
  background-color: #f7f9fa; /* blockquoteと調和する穏やかな背景色 */
  border: 1px solid #e1e8ed; /* 主張しない薄い枠線 */
  border-radius: 6px;
  padding: 1.2em;
  overflow-x: auto;          /* 横スクロール対応 */
  margin: 1.5em 0;
}

pre code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  background-color: transparent; /* 背景の重複を防ぐ */
  color: #2c3e50;                /* 読みやすい濃いネイビーグレー */
  padding: 0;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.6;
  display: block;
}

table {
    border-color:#ccc;
}
tr {
    border-color:#ccc;    
}
td {
    border:solid 0.8px;
    padding:14px;
    border-color:#ccc;        
}

/* 例：スライダー内の画像を高さ200pxで統一する場合 */
.splide__slide img,
.swiper-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover; /* 画像をトリミングして綺麗に収める */
}


* スライド自体の基準（Splideがデフォルトで持っていますが念のため） */
.splide__slide {
  position: relative;
}

/* 画像の上に重ねるウォーターマークのスタイル */
.slide-watermark {
  position: absolute;
  
  /* 💡 配置したい場所*/
  /*  bottom: 120px;*/
  /*  right: 100px;*/
  top:50px;
  left:50%;

  /* 💡 2. 文字列自体の幅と高さの半分（50%）だけ戻して、完全にど真ん中に合わせる */
  /*  transform: translate(-50%, -50%);*/
  transform: translateX(-50%);
  
  /* 💡 3. 複数行（メディカルハーブ＋ボタン）になったとき、テキスト自体も中央揃えにする */
  text-align: center;

  /* 他の位置指定を完全にリセット */
  bottom: auto;
  right: auto;
  

/*  color: rgba(255, 255, 255, 0.6); *//* 白文字を60%透過 */
  font-size: 17px;
  /*  font-family: sans-serif;*/
  font-family: sans-serif;
  letter-spacing: 1px;
  
  /* 💡 ユーザーに文字選択やコピーをされたくない場合（ガード用） */
/*  pointer-events: none;*/ /* マウスイベントを透過させてスライダーのドラッグを邪魔しない */
/*  user-select: none; */   /* テキスト選択不可にする */
  
  /* もし背景を薄暗い黒にしたい場合はこちらを有効に */
  /* background: rgba(0, 0, 0, 0.4); */
  /* padding: 5px 10px; */
  /* border-radius: 4px; */
}

/* 💡 透かしに「画像（ロゴなど）」を使う場合のサイズ調整 */
.slide-watermark img {
  width: 100px;  /* お好みのサイズに */
  height: auto;
  opacity: 0.5;  /* 50%透過させて薄くする */
}

/* スライドの枠からはみ出る部分を丸めてカットする */
.splide__slide {
    margin:2px;
    border-radius: 16px;
/*  overflow: hidden; */   /* 💡 角の枠外にはみ出る画像を非表示にする */
  
  /* Safariブラウザで角丸が効かなくなるバグの対策 */
/*  transform: translateZ(0); */
}

.splide__slide .caption{
    text-align:center  !important;
}


.btn-custom
{
  display: inline-block;
    padding: 10px 30px;
    font-size: 0.8rem;
    color: #4a2e2b; /* 文字の色（落ち着いたブラウン系） */
    text-decoration: none;
    
    /* 背景をうっすら透明にする（白の30%透明） */
    background-color: rgba(255, 255, 255, 0.3); 
    
    /* 枠線と角丸の指定 */
    border: 1px solid #4a2e2b;
    border-radius: 15px; /* 角の丸み具合 */
    
    /* 色が滑らかに変わるアニメーション（0.3秒） */
    transition: all 0.3s ease; 
    cursor: pointer;

    /**/
    white-space:nowrap;
    
}


.btn-custom:hover {
    color: #ffffff; /* 文字を白にする */
    background-color: #4a2e2b; /* 背景をしっかりした色で塗りつぶす */
    border-color: #4a2e2b;
}



/* アイコンを包む全体の枠 */
.top-sns-nav {
    display: flex;
    align-items: center;
    gap: 20px; /* 💡 アイコン同士の横の間隔（お好みで調整） */
    padding: 10px; /* 必要に応じて上下の余白を調整 */
    padding-right:20px;
}

/* 各アイコンリンクの共通スタイル */
.sns-icon-link {
    color: rgba(255, 255, 255, 0.85); /* 💡 初期状態：真っ白より少しだけ透過させて馴染ませる */
    font-size: 14px; /* 💡 アイコンの大きさ */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* ホバー時の色変化を滑らかにする */
    transition: color 0.2s ease, transform 0.2s ease; 
}

/* マウスを置いたとき（hover）の変化 */
.sns-icon-link:hover {
    color: #ffffff; /* ホバーで100%の真っ白にする */
    transform: translateY(-1px); /* 💡 おまけ：ほんの少しだけ上にピョコッと動かす（不要なら削除してください） */
}



/*サービスリスト用**/
/* リスト全体のスタイル */
.service-list {
  margin: 0;
  padding: 0;
}

/* 1つの項目を横並びにする設定 */
.service-item {
  display: flex;
  align-items: center; /* 上下中央揃え（上揃えにする場合は flex-start） */
  gap: 30px;           /* 画像とテキストの間の余白 */
  margin-bottom: 40px; /* 項目と項目の間の余白 */
}

/* 左側：画像エリアの設定 */
.service-img {
  margin: 0;
  flex-shrink: 0;      /* 画像が小さく潰れるのを防ぐ */
  width: 120px;         /* 小さな画像の横幅 */
  height: 120px;         /* 小さな画像の縦幅 */  
  object-fit:cover;
}

.service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 枠内に綺麗に収める設定 */
}

/* 右側：テキストエリア（縦並び）の設定 */
.service-content {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;            /* 1行目と2行目の間の余白 */
}

/* 大きめフォント */
.title-large {
  margin: 0;
  font-size: 1.2rem;   /* 好みの大きさに調整 */
  font-weight: bold;
}

/* 小さめフォント */
.text-small {
  margin: 0;
  font-size:1rem;  /* 好みの大きさに調整 */
  color: #666;
}


/*card*/


.card-body  ul{
    margin-top:0px !important;
    margin-left:0px !important;
}

.card-body p{
    font-size:22px !important;
    padding-left:10px;
}

.card-body li:before{
    content:'\F233';
    font-family: "bootstrap-icons" !important;
    font-family:"bootstrap-icons";
    padding-right:15px;
    padding-left:0px;
}

.card-body li{
    list-style:none;
    font-size:22px !important;
    margin-top:5px !important;
}

.card {
    border-style:none !important;
    padding:0px !important;
    margin:0px !important;    
}

.sidebar-card{
    padding:0px !important;
    margin:0px !important;
    text-align:left !important;
}

.sidebar-card img
{
    width:170px !important;
    height:auto;
}


/**herb**/

.container-tea {
  position: relative;
  z-index: 1;
  width: 100%;
  /*  min-height: 100vh;*/
  overflow: hidden;
  height: 800px;
/*  contain:paint;*/
}

.bg-tea{
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: -1; /* 常に一番奥に配置 */
  background-image: url('/images/herb-tea.jpg');
  background-repeat:no-repeat;
}

.container-tea .content-tea {
  color:#fff;
  position: relative;
  z-index: 1;
  width: 80%;
  height: 100%;
  overflow-y: auto; /* コンテナ内だけでスクロールを完結 */
}


.blog-side-bar h4 
{
    border-style:solid;
    border-width:1px 0;
    font-size:22px;
    margin-top:10px;
    padding:10px 0;
    color:#3bb;
}

.blog-side-bar ul
{
    margin:0px;
    padding:0px;    
}

.blog-side-bar a
{
    font-size:18px;
    text-decoration: none;
     padding-left:0px;		/**/
    color:#f33; 
}

.blog-side-bar ul li .post-date
{
    font-size:13px;
    color:#3cf
    padding-left:0px;
    padding-right:0px;
}

.blog-side-bar li:before{
    content:'';
    padding-right:0px;
    padding-left:0px;
    text-align:left !important;            
/*    font-family:"bootstrap-icons";*/
/*    padding-right:15px;*/
/*    padding-left:0px;*/
}

.qr_img{
    text-align:center;
}


.option-section{
  display: grid;
  grid-template-columns: 1fr 300px;  /* PCでは左右均等 */
  gap: 2rem;
  align-items: start;
  }


.profile-images {
  display: grid;
  gap: 1rem;
}

.profile-images img {
  height: auto;
  width: 95%;
  border-radius: 8px; /* お好みで */
}

/* スマホで縦積み */

@media (max-width: 768px) {
 .profile-images img{
     width: 90%;
     height: auto;
     max-width:350px;
  }


    
  .option-section {
    grid-template-columns: 1fr;  /* 1列にする */
  }
}