/*
Theme Name: understrap-child
Template: understrap
Version: 1.0.0
*/


/*html, body{
height: 100%; 
}
*/
/* 投稿やページのフッター部分表示の非表示 */
.entry-footer {
    display: none;
}

/* 投稿　single-custom.php　リセット・調整 */
.wrapper{
    margin-top: 100px;
}
.post{
    font-size: unset!important;
    margin-bottom: var(--spacing-section);
}
.post>.entry-content{
    padding-top: 70px;
}

.back{
    color: var(--primary-500);
}
.byline,.updated{
    display: none;
}
.entry-title{
    font-weight: normal !important;
    line-height: 1.6 !important;
    font-size: var(--font-size-lg)!important;
}


a:hover {
    color: unset !important;
    text-decoration: none !important;
}
a {
    color: unset !important;
    text-decoration: none !important;
}
h3{
    font-weight: normal !important;
    margin-bottom: var(--spacing-lg)!important;
    line-height: 1.6 !important;
    font-size: var(--font-size-lg)!important;
}
*,
*::before,
*::after {
  box-sizing: border-box !important;
   letter-spacing: 2px;
}
@media (max-width: 768px) { 
*,
*::before,
*::after {
   letter-spacing: unset;
}
h3{
    margin-bottom: var(--spacing-xl)!important;
}
}

:target { 
  scroll-margin-top:200px; 
}
@media (max-width: 768px) { 
:target { 
  scroll-margin-top:80px; 
}
}
/*
body.no-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 100vh; 
}
*/
/* PC用 */
html.no-scroll, /* ★ html要素にも適用 */
body.no-scroll {
    overflow: hidden !important; /* スクロールを確実に無効化 */
    position: fixed !important; /* bodyをビューポートに固定 */
    width: 100%; /* 固定時に幅が縮むのを防ぐ */
    padding-right: 15px; /* スクロールバーが消えることによるレイアウトのずれを補正 */
    /* top はJavaScriptで動的に設定するため、ここでは記述しません */
}


html.no-scroll {
  overflow: hidden;
}


html, body {
  margin: 0;
  padding: 0;
  width: 100%; /* 明示的に */
 overflow-x: hidden;    /* ★一時的な対処として、横スクロールを隠す */
}
html {
  height: auto; /* or omit */
  /*min-height: 100%;*/
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  background-color: #fff; /* 背景色指定 */
  overflow-y: hidden
}


.w-100{
    width: 100%;
}
ul{
    padding-left: 20px;
}

/* 変数　*/
:root {
  /*色 */
  --primary-50: #FFF9F1;/* プライマリーオレンジ */
  --primary-100: #FEF1DF; 
  --primary-200: #FDE0BF; 
  --primary-300: #F9C99E; 
  --primary-400: #F3B284; 
  --primary-500: #EB8F5C; 
  --primary-600: #CA6A43; 
  --primary-700: #A94A2E; 
  --primary-800: #882F1D; 
  --primary-900: #701B11; 
  
  --primary-200-rgb: 253, 224, 191;
  --primary-500-rgb: 235, 143, 92; 

  --secondary-100: #FEF7E1; /* セカンダリー黄色 */
  --secondary-200: #FDEDC4; 
  --secondary-300: #FBDFA6; 
  --secondary-400: #F8D08F; 
  --secondary-500: #F4BA6A; 
  --secondary-600: #D1944D; 
  --secondary-700: #AF7135; 
  --secondary-800: #8D5221;
  --secondary-900: #753B14;

  --secondary-200-rgb: 253, 237, 196;
  
  --accent-yellow: #FCD677; /* アクセントカラー 黄色 */
  --accent-blue: #5CC2CF; /* アクセントカラー  青 */
  --accent-green: #8AB157; /* アクセントカラー 緑 */
  --accent-orange: #FF7B54; /* アクセントカラー オレンジ */
  --white:#fff;
  
  --text-color:#6E2B2B; /* ベースフォントカラー */

  /* フォント */
  --font-family-base: "Noto Sans JP", sans-serif; /* 基本フォント */
  --font-family-decoration: "Zeyada", cursive; /* あしらいフォント */
  --font-family-number: "Tangerine", cursive; /* 数字フォント */
  
  --font-size-base: 16px; /* 基本フォントサイズ */
  --font-size-xs: 12px; /* xSサイズ */
  --font-size-sm: 14px; /* Sサイズ */
  --font-size-lg: 20px; /* Lサイズ */
  --font-size-xl: 24px; /* LLサイズ */
  --font-size-xxl: 32px; /* LLサイズ */
  --font-size-xxxl: 80px; /* LLLLサイズ */
  --font-size-big: 120px; /* bigサイズ */

  --line-height-base: 1.5; /* 基本行の高さ */

  /* 余白 */
  --spacing-unit: 8px; /* 基本余白単位 */
  --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
  --spacing-sm: var(--spacing-unit);              /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 2);   /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);   /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);   /* 32px */
  --spacing-xxl: calc(var(--spacing-unit) * 5);   /* 40px */
  --spacing-xxxl: calc(var(--spacing-unit) * 6);   /* 48px */
  --spacing-big: calc(var(--spacing-unit) * 7);   /* 56px */  
  --spacing-section: calc(var(--spacing-unit) * 10);   /* 80px */
  --spacing-section-lg: calc(var(--spacing-unit) * 20);   /* 160px */
  --spacing-section-xl: calc(var(--spacing-unit) * 30);   /* 240px */
  --spacing-section-xxl: calc(var(--spacing-unit) * 40);   /* 420px */
}


@media (max-width: 768px) {

    :root {
         /* 余白のメディアクエリ */
        --spacing-unit: 4px;  /* 基本余白単位 4px*/
        --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 2px */
        --spacing-sm: var(--spacing-unit);              /* 4px */
        --spacing-md: calc(var(--spacing-unit) * 2);  /* 6px */
        --spacing-lg: calc(var(--spacing-unit) * 3);  /* 12px */
        --spacing-xl: calc(var(--spacing-unit) * 4);  /* 16x */
        --spacing-xxl: calc(var(--spacing-unit) * 5);  /* 20px */
        --spacing-section: calc(var(--spacing-unit) * 8);  /* 32px */
        --spacing-section-md: calc(var(--spacing-unit) * 12);  /* 48px */
        --spacing-section-lg: calc(var(--spacing-unit) * 15); /* 60px */
    }
}


body {
    color: var(--text-color) !important;
    font-family: var(--font-family-base) !important;
    line-height: 1.8 !important;
    font-weight: normal !important;
}

.contents_width {
    max-width: 1280px; 
    margin-left: auto;  
    margin-right: auto;  
    padding-left: var(--spacing-xxl);  
    padding-right: var(--spacing-xxl); 
}


/*=====================
skin　
color, background-color, font-family, box-shadow など見た目に関する記述
=====================*/
/* 色 */
.u-color-white{color:#fff; }
.u-color-accent-orange{color: var(--accent-orange);}
.u-color-accent-yellow{color: var(--accent-yellow);}
.u-color-accent-blue{color: var(--accent-blue);}
.u-color-accent-green{color: var(--accent-green);}

/* フォント */
.u-text-en{
    font-family: var(--font-family-decoration);
    line-height: 0.8;
}
/*数字*/
.u-text-number{
    font-family: var(--font-family-number);
    line-height: 0.8; 
    margin-bottom: 0;
}
/*数字 メディアクエリ*/
@media (max-width:768px) { 
    .u-text-number{
    line-height: 0.5;
    margin-bottom: 0;
    padding-bottom: 10px;
    }

}


/* フォントサイズ */
.u-text-xs{font-size: var(--font-size-xs);}
.u-text-sm{font-size: var(--font-size-sm);} /* 14px */
.u-text-base{font-size: var(--font-size-base);} /* 16px */
.u-text-lg{font-size: var(--font-size-lg);} /* 24px */
.u-text-xl{font-size: var(--font-size-xl);} /* 32px */
.u-text-xxl{font-size: var(--font-size-xxl);} /* 40px */
.u-text-big{font-size: var(--font-size-big);} /* 120px */

.u-text-xxxl{font-size: var(--font-size-xxxl);}

.u-text-spacing-xs{letter-spacing: var(--spacing-xs);}/*4px*/

/* font-weight */
.u-text-weight-normal{font-weight: 400;}
.u-text-weight-bold{font-weight: 700;}
.u-text-weight-black{font-weight: black;}

/* 余白 */
/* margin-0*/
.u-m0{margin: 0;}
.u-m0-a{margin: 0 auto;}

/* margin-top*/
.u-mt-xs { margin-top: var(--spacing-xs); } /* 4px */
.u-mt-sm { margin-top: var(--spacing-sm); } /* 8px */
.u-mt-md { margin-top: var(--spacing-md); } /* 16px */
.u-mt-lg { margin-top: var(--spacing-lg); } /* 24px */
.u-mt-xl { margin-top: var(--spacing-xl); } /* 32px */
.u-mt-xxl { margin-top: var(--spacing-xxl); } /* 40px */
.u-mt-minus15 { margin-top: -15px; } /* -15x */

/* margin-bottom*/
.u-mb-xs { margin-bottom: var(--spacing-xs); }/* 4px */
.u-mb-sm { margin-bottom: var(--spacing-sm); }/* 8px */
.u-mb-md { margin-bottom: var(--spacing-md); }/* 16px */
.u-mb-lg { margin-bottom: var(--spacing-lg); }/* 24px */
.u-mb-xl { margin-bottom: var(--spacing-xl); }/* 32px */
.u-mb-xxl { margin-bottom: var(--spacing-xxl); }/* 40px */
.u-mb-section { margin-bottom: var(--spacing-section); }/* 80px */
.u-mb-section-lg { margin-bottom: var(--spacing-section-lg); }/* 160px */
.u-mb-section-xl { margin-bottom: var(--spacing-section-xl); }/* 240px */
.u-mb-section-xxl { margin-bottom: var(--spacing-section-xxl); }/* 240px */
.u-mb-onlySp-xl{ margin-bottom: unset;}/* スマホのみmb48px */




/* margin-left*/
.u-ml-xs { margin-left: var(--spacing-xs); }/* 4px */
.u-ml-sm { margin-left: var(--spacing-sm); }/* 8px */
.u-ml-md { margin-left: var(--spacing-md); }/* 16px */
.u-ml-lg { margin-left: var(--spacing-lg); }/* 24px */
.u-ml-xl { margin-left: var(--spacing-xl); }/* 32px */
.u-ml-xxl { margin-left: var(--spacing-xxl); }/* 40px */

/* margin-right*/
.u-mr-xs { margin-right: var(--spacing-xs); }/* 4px */
.u-mr-sm { margin-right: var(--spacing-sm); }/* 8px */
.u-mr-md { margin-right: var(--spacing-md); }/* 16px */
.u-mr-lg { margin-right: var(--spacing-lg); }/* 24px */
.u-mr-xl { margin-right: var(--spacing-xl); }/* 32px */

/*margin*/
.u-m-xs { margin: var(--spacing-xs); } /*4px */




/* padding-left */
.u-pl-sm { padding-left: var(--spacing-sm); }/* 16px */
.u-pl-md { padding-left: var(--spacing-md); }/* 16px */
.u-pl-lg { padding-left: var(--spacing-lg); }/* 24px */
.u-pl-xl { padding-left: var(--spacing-xl); }/* 32px */
.u-pl-xxl { padding-left: var(--spacing-xxl); }/* 40px */
.u-pl-xxxl { padding-left: var(--spacing-xxxl); }/* 48px */
.u-pl-big { padding-left: var(--spacing-big); }/* 56px */

/* padding-right */
.u-pr-sm { padding-right: var(--spacing-sm); }/* 16px */
.u-pr-md { padding-right: var(--spacing-md); }/* 16px */
.u-pr-lg { padding-right: var(--spacing-lg); }/* 24px */
.u-pr-xl { padding-right: var(--spacing-xl); }/* 32px */

/*padding*/
.u-p-xs { padding: var(--spacing-xs); } /*4px */
.u-p-md { padding: var(--spacing-md); } /*4px */
.u-p-lg { padding: var(--spacing-lg); } /*24px */
.u-p-xl { padding: var(--spacing-xl); } /*32px */
.u-p-xxl{ padding: var(--spacing-xxl); } /*40px */

/*余白 メディアクエリ*/
@media (max-width:768px) { 
  .u-mb-onlySp-xl{ margin-bottom: var(--spacing-section-md);}/*スマホのみ mb-48px */
  .u-mb-xs-sp{margin-bottom: var(--spacing-xs);}
  .u-mb-md-sp{margin-bottom: var(--spacing-md);}
  .u-mb-section-sm-sp{margin-bottom: var(--spacing-section-sm);}
  .u-mb-section-md-sp{margin-bottom: var(--spacing-section-md);}
  .u-pb-section-md-sp{padding-bottom: var(--spacing-section-md);}
  .u-pb-section-xl-sp{padding-bottom: var(--spacing-section-xl);}
  .u-mb-lg-sp{margin-bottom: var(--spacing-lg);}
  
  .u-pb-md-sp{padding-bottom: var(--spacing-md);}
  .u-pb-lg-sp{padding-bottom: var(--spacing-lg);}
}
/* パンくず */
.breadcrumbs,.post,.post-page ,.current-item,.current-item{
    font-size: clamp(10px, 1vw, 12px);
    color: var(--text-color);
}
.breadcrumbs>a{
    font-size: var(--font-size-xs);
    color: var(--text-color) !important;
}

/* レイアウト */
.align-center{text-align: center;}
.align-left{text-align: left;}
.position-r{position: relative;}
.display-f{display: flex;}
.align-item-c{ align-items: center;}
.align-content-center{align-content: center;}
.align-content-start{align-content: start;}


/* 垂直方向の中央揃え */
.u-align-items-center {
  display: flex;
  align-items: center; 
}

/* 垂直方向の中央揃え */
.u-display-t{
    display: table;
}
.u-display-tc{
    display: table-cell;
    text-align: center;
}

/* 丸角 */
.border-r{
    border-radius: 5px;
}
.entry-content>.h3,
.entry-content>.h4, 
.entry-content>.h5, 
.entry-content>.h6,
.entry-content>h3,
.entry-content>h4,
.entry-content>h5, 
.entry-content>h6 {
    font-size: unset ;
}


/*グリッド*/
.c-grid { 
  display: grid;
  gap: var(--spacing-md); /* グリッド間の余白 */
}

/*グリッドレイアウトのバリエーション*/
.c-grid--col2 {
  grid-template-columns: repeat(2, 1fr); /* 2列均等幅 */
  padding-left: 15px;
  padding-right: 15px;
}
.c-grid--col3 {
  grid-template-columns: repeat(3, 1fr); /* 3列均等幅 */
}
.c-grid--col4 {
  grid-template-columns: repeat(4, 1fr); /* 4列均等幅 */
}
.c-grid--sidebar-main {
  grid-template-columns: 25% 1fr; /* 左が250px、右が残りの幅 */
  width: 100%;
}
/*  グリッドレイアウトメディアクエリ */
@media (max-width: 768px) { 
  .c-grid--col2,
  .c-grid--col3,
  .c-grid--col4,
  .c-grid--sidebar-main {
    grid-template-columns: 1fr; /* スマホでは全て1列にする */
  }
}



/* サイドバーとメインコンテンツのグリッド */

/* メインコンテンツ内の2カラムグリッド */
.c-grid--two-columns {
  grid-template-columns: 1fr 1fr; 
  gap: var(--spacing-md); 
}



@media (max-width: 768px) { /* 768px以下でスマホ表示に切り替え */
  .c-grid--two-columns {
    grid-template-columns: 1fr; /* 縦一列にする */
  }
  /* サイドバーとメインコンテンツの順序を調整したい場合は以下を調整 */
  .c-grid__item--sidebar {
    order: 2; /* メインコンテンツの下に表示 */
  }
  .c-grid__item--main {
    order: 1; /* メインコンテンツを上に表示 */
  }
}


/* 枠線 */
.u-border-primary{
    border: 1px solid var(--primary-500);
    background-color:var(--white)
}


/*=================================
ヘッダー
================================*/


/* ------------------------------------------- */
/* コンポーネント
/* ------------------------------------------- */

/*===== 見出し ======*/
.c-section-heading {
    position: relative; 
}
.c-section-heading__title{
    margin-bottom: var(--spacing-lg);
}
.c-section-heading__title-ja{
    font-weight: normal;
}
.c-section-heading__title-en,.c-sub-mv-heading__title-en{
    line-height: 0.8rem;
    letter-spacing: 10px;
}
.c-sub-mv-heading__title-ja{
    position: absolute;
    top: 50px;

}


/* グラデーションの円 */
.c-section-heading::before {
    content: '';
    position: absolute;
    top: -7%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: url(img/decoration/heading-bg-gradation.png);
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

/* 右のツブツブ*/
.c-section-heading__title-en::after{
    content: '';
    position: absolute;
    top: -15%;
    width: 30px;
    height: 30px;
    background: url(img/decoration/heading-bg-dot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    transform: translateY(-50%);
}
/*===== 下層ページ TOP======*/
.c-sub-mv__heading{
    position: absolute;
    bottom: 40%;
    left: 5%;
    text-align: left;
}

/*===== 下層ページ TOP レスポンシブ======*/
@media (max-width: 768px) { 
.c-sub-mv__heading{
    bottom: unset; 
    left: unset;
    width: 100%;
}
.c-section-heading::before{
    top: 30%;
    width: 200px;
    height: 200px;
}
.c-section-heading__title-en::after{
    top: 0;
}
}



/* 投稿最新5件 本体 */
.c-news-list {
    padding: 0; 
    box-sizing: border-box; 
    margin-bottom: var(--spacing-xl);
    max-width: 700px; 
    margin-left: 0;      
}

/* 投稿最新5件 要素 */
.c-news-list__item {
    display: flex;
    align-items: center;
    text-decoration: none; 
    background-color: var(--primary-500);
    color: var(--white); 
    border-radius: var(--spacing-xs); 
    padding: var(--spacing-md) var(--spacing-lg); 
    margin-bottom: var(--spacing-sm); 
    font-size: var(--font-size-sm); 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
    overflow: hidden; 
    min-height: 40px;
}

.c-news-list__item:hover {
    color: var(--white);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 日付*/
.c-news-list__date {
    flex: 0 0 auto; 
    margin-right: var(--spacing-md); 
    font-size: var(--font-size-sm);
    color: var(--white);
    text-align: left;
    white-space: nowrap; 
    font-weight: lighter;
}

/*タイトル */
.c-news-list__title {
    flex: 1; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin: 0; 
    color: var(--white); 
}

/* 矢印 */
.c-news-list__arrow {
    flex-shrink: 0;
    margin-left: var(--spacing-lg); 
    position: relative; 
    display: flex; 
    justify-content: center;
    align-items: center;

    /* 白丸のスタイル */
    width: 25px; 
    height: 25px; 
    background-color: var(--white); 
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease; 
}

/* 矢印（擬似要素で作成） */
.c-news-list__arrow::after {
    content: '';
    display: block;
    width: 8px; 
    height: 8px; 
    border-top: 2px solid var(--primary-500);    
    border-right: 2px solid var(--primary-500);
    transform: rotate(45deg); 
    transition: transform 0.3s ease; 
    margin-inline-start: -0.15em
}

/* ホバー時のスタイル 
.c-news-list__item:hover .c-news-list__arrow {
    background-color: var(--primary-500); 
}

.c-news-list__item:hover .c-news-list__arrow::after {
    border-color: var(--white);
    transform: translateX(3px) rotate(45deg);
}
*/
/* ------------------------------------------- */
/*　コンポーネント　レスポンシブ
/* ------------------------------------------- */

@media (max-width: 768px) { /* スマホのブレークポイント（適宜調整） */
    .c-news-list {
        padding: 0 var(--spacing-sm); /* スマホでは左右のパディングを少し小さく */
        max-width: 100%;
    }

    .c-news-list__item {
        flex-wrap: wrap; 
        padding: var(--spacing-lg); 
        font-size: var(--font-size-xs); 
        margin-bottom: var(--spacing-md);
    }

    .c-news-list__date {
        flex-basis: 100%; 
        margin-right: 0;
        margin-bottom: var(--spacing-xs);
        text-align: left; 
    }

    .c-news-list__title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5; /* 行の高さ調整 */
        padding-right: var(--spacing-xl); /* 矢印との重なりを避けるため */
        font-size: var(--font-size-base);
    }

    .c-news-list__arrow {
        right: var(--spacing-xs);
        margin-left: 0; 
        top: -10px;
    }
    .c-section-heading__title-en,.c-sub-mv-heading__title-en{
        font-size: var(--spacing-section-md);
        letter-spacing: 5px;
    }
    .c-section-heading__title-en::after {
        width: 20px;
        height: 20px;
    }
    .c-section-heading__title-ja{
        font-size: var(--font-size-lg);
    }
}






/* ------------------------------------------- */
/* ヘッダー */
/* ------------------------------------------- */

.header {
    background-color: #ffffff00;
    z-index: 1;
    position: fixed;
    top: 0;
    overflow-wrap: break-word;
    width: 100%;
    z-index: 1000;
    padding: 15px;
    transition: background-color 0.5s ease; /* 0.5秒かけてゆっくり変化 */
    background-color: transparent;
}

/* スクロール後に適用されるスタイル */
.header.is-scrolled {
    background-color: #ffffffba !important;
    box-shadow: 0 4px 20px rgb(0 0 0 / 3%) !important;
}

.entry-content{
    padding-top: 110px;
}

/* ヘッダーの内部コンテナ（コンテンツの幅を制御） */
.header__inner {
    max-width: var(--header-inner-max-width);
    margin: 0 auto; 
    padding: 0 var(--header-padding-x); 
    display: flex;
    justify-content: space-between;
    align-items: center; 
    flex-wrap: wrap; 
}

/* ロゴエリア */
.header-logo-area {
    display: flex;
    flex-direction: column; 
    max-width: 80%;
}
.header-logo {
    margin: 0; 
    line-height: 1; 
}

.header-logo__link {
    display: block;
    line-height: 1;
}

.header-logo__link img {
    height: clamp(30px, 3vw, 35px);
    width: auto;
    display: block; 
}

.header-tagline {
    color: var(--text-color);
    margin: 0; 
    white-space: nowrap; 
    font-size: clamp(8px, 0.7vw, 14px);
}






/* 固定ボタン */
.fixed-button-tel,
.fixed-button-web {
    position: fixed;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    color: var(--white);
    border-radius: 50px 0 0 50px;
    padding: var(--spacing-sm);
    padding-left: var(--spacing-md);
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, padding-right 0.3s ease;
    height: 60px;
    border: 1px solid var(--white);
    border-right: 0;
    width: calc(0px + var(--spacing-xl) + var(--spacing-xl)); /* 初期幅 */
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--primary-500);
    padding-right: var(--spacing-sm);
}

/* aタグにflexboxを適用し、中身を中央に配置 */
.fixed-button-tel a,
.fixed-button-web a {
    display: flex;
    align-items: center;
    height: 100%; /* 親要素の高さに合わせる */
    width: 100%; /* 親要素の幅に合わせる */
}

.fixed-button-tel {
    bottom: 100px;
}

.fixed-button-web {
    bottom: 36px;
}

.fixed-button__icon {
    width: 35px; /* アイコンサイズ */
    height: 35px;
    object-fit: contain;
    flex-shrink: 0;
}

.fixed-button__text {
    opacity: 0; /* 初期状態では透明 */
    transition: opacity 0.3s ease 0.1s; /* 少し遅れてフェードイン */
    margin-left: var(--spacing-sm); /* アイコンとテキストの間の余白 */
    color: var(--primary-900);
}

/* PCでのホバー時 */
.fixed-button-tel:hover,
.fixed-button-web:hover {
    background-color: var(--primary-400);
    padding-right: calc(var(--spacing-lg) + 100px); /* テキストが表示されるように十分に広げる */
}

/* PCでのホバー時にテキストを表示 */
.fixed-button-tel:hover .fixed-button__text,
.fixed-button-web:hover .fixed-button__text {
    opacity: 1;
}


@media screen and (max-width: 768px) {
    .fixed-button-tel,
    .fixed-button-web {
        /* スマホでの初期状態 */
        padding-left: var(--spacing-lg);
        width: calc(15px + var(--spacing-xl) + var(--spacing-xl)); /* スマホでの初期幅 */
        /* transitionプロパティは共通なので固定ボタンの定義に含めています */
    }

    .fixed-button-tel {
        bottom: 78px;
    }
    .fixed-button-web {
        bottom: 16px;
    }

    /* JavaScriptで付与する展開時のクラス */
    .fixed-button-tel.is-expanded,
    .fixed-button-web.is-expanded {
        background-color: var(--primary-400); /* 展開時の背景色 */
        /* テキストが表示されるように十分な幅に広げる */
        /* アイコン幅35px + margin-left:var(--spacing-sm) + テキストの幅（例: 80px）+ 元のpadding-right */
        padding-right: calc(var(--spacing-lg) + 100px);
    }

    .fixed-button-tel.is-expanded .fixed-button__text,
    .fixed-button-web.is-expanded .fixed-button__text {
        opacity: 1; 
    }

}





/* グローバルナビゲーション */
.g-nav {
    margin-left: auto; 

}

.g-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; 
    gap: 1.8vw; 
    font-size: clamp(12px, 1.2vw, 16px);
}

.g-nav__link {
    color: var(--link-color);
    transition: color 0.3s ease;
    white-space: nowrap; 
}
.g-nav__link:hover {
    color: var(--accent-color);
}

.top-mv{
   position: relative;
    top: -105px;
    padding-top: 120px; 
    background-image: url('img/decoration/deco-bg_top-mein.png'),url('img/decoration/deco-flower_001.png'),url('img/decoration/deco-bg_top.png'); 
    background-size: clamp(320px, 35%, 489px), clamp(30px, 13%, 190px), 35%;
    background-repeat: no-repeat;
    background-position: top right, top 100px left -40px, left 0 top 100px;
    margin-top: -5px;
}
/* 下層ページTOP　バックグラウンド */
.sub-mv{
    position: relative;
    background-image: url('img/decoration/deco-bg_top.png'),url('img/decoration/deco-flower_001.png'),url('img/decoration/deco-bg_001.png'); 
    background-position: left 15% bottom 50px, top left -15px, bottom -136px right -222px;
    background-repeat: no-repeat;
    background-size: 35%, 11%, 55%;
}
/* TOP　メディアクエリ*/
@media screen and (max-width: 768px) {
.top-mv {
    background-size: clamp(320px, 66%, 489px), clamp(30px, 26%, 190px), clamp(360px, 60%, 400px);
    background-position: top right, bottom 0px right -47px, right -91px bottom -50px;
}
}
/* 下層ページTOP　バックグラウンド 　メディアクエリ*/
@media screen and (max-width: 768px) {
.sub-mv{
        background-image: url('img/decoration/deco-bg_top.png'),url('img/decoration/deco-flower_001.png'); 
        background-position: left -167px top -6px, top 253px right -5%;
        background-size: 89%, clamp(104px, 19%, 117px);
    }
}


/* ヘッダーの問い合わせ・予約ボタン群 */
.header-contact-buttons {
    margin-left: 20px; 
    display: flex;
    gap: 10px; 
}

.header-contact-button {
    display: flex; 
    justify-content: center;
    align-items: center;
    min-width: 100px; 
    height: 40px;
    padding: 0 15px;
    background-color: var(--accent-color);
    color: var(--hamburger-line-color);
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.header-contact-button:hover {
    background-color: darken(var(--accent-color), 10%); 
}

/* ハンバーガーメニューボタン */
.hamburger-menu {
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    width: 60px;
    height: 60px;
    background-color: var(--primary-500);
    border: none;
    border-radius: 50%; 
    padding: 22px 20px;
    cursor: pointer;
    margin-left: 2vw;
    position: relative;
    z-index: 100;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.hamburger-menu:hover {
    background-color: var(--primary-500);
}

.hamburger-menu__line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--white);
    border-radius: 2px;
    transition: all 0.3s ease;
}



/* フルスクリーンメニュー */
.full-menu {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255); 
    z-index: 9999; 
    overflow-y: auto;
     -webkit-overflow-scrolling: touch; /* iOS対策 */
    display: flex; 
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.full-menu__bg{
    background-image: url('img/decoration/deco-f-010.png'),url('img/decoration/deco-f-016.png'),url('img/decoration/deco-f-017.png'),url('img/decoration/deco-bg_footer_001.png');
    background-repeat: no-repeat;
    background-position: left 8% top 85%, top 70% right -1%, left 8% top -3%, bottom -211px right -130px;
    background-size: 13%, 19%, 12%, 50%;
}

/* JavaScriptでメニューが開かれたときに付与されるクラス */
.full-menu.is-active {
    visibility: visible;
    opacity: 1;
}

/* メニューの内部コンテナ（コンテンツの幅を制御） */
.full-menu__inner {
    width: 100%;
    max-width: 1000px; 
    padding: 60px 20px 120px 20px;
    box-sizing: border-box; 
    align-content: center;
}

/* 閉じるボタン */
.full-menu__close-btn {
    position: fixed;
    top: 35px;
    right: 35px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000; 
}
.full-menu__close-icon {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--text-color);
    position: absolute;
    transition: transform 0.3s ease;
}

.full-menu__close-icon:first-child {
    transform: rotate(45deg); 
}

.full-menu__close-icon:last-child {
    transform: rotate(-45deg); 
}

/* フルスクリーンメニュー 中身 */
.full-menu__logo{
    width: clamp(250px, 25%, 300px);
}
.full-menu__sub-list{
    flex-direction: column;
}
.full-menu__item{
     list-style: none;
}
.full-menu__link{
   padding-left: var(--spacing-md); 
}

.full-menu__link::before{
    content: "";
    position: absolute;
    top: calc(13% - 8px);
    left: 0px;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border-top: 2px solid var(--accent-orange);
    border-right: 2px solid var(--accent-orange);
}
.full-menu__sub-list-item{
    display: block;
    text-align: left;
    color: var(--text-color);
    font-size: 94%;
}
.full-menu__sub-list-item::before{
            content: "";
        position: static;
        top: auto;
        left: auto;
        display: inline-block;
        width: 7px;
        height: 0;
        margin-right: 12px;
        border-top: solid 2px #cdcdcd;
        border-right: none;
        transform: translateY(-4px);
}

/* サブメニュー */
.full-menu__sub-list {
    list-style: none;
    padding: 0;
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 0; 
}

.full-menu__sub-list li a {
    color: #666; 
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.full-menu__sub-list li a:hover {
    color: #f08e5e;
}
/* フルスクリーンメニュー　メディアクエリ */
@media screen and (max-width: 768px) {
.full-menu__bg{
    background-repeat: no-repeat;
    background-position: left -26% top -4%, top 40% right -1%, right -4% bottom 2px, bottom -116px right -130px;
    background-size: 37%, 40%, 37%, 122%;
}
.full-menu__link::before{
    top: calc(10% - 8px);
}
/* 閉じるボタン */
.full-menu__close-btn {
    top: 17px;
    right: 17px;
}

}

/* 電話番号・住所ブロック */
.full-menu__contact-info {
    margin-bottom: 40px;
}

.full-menu__tel {
    font-size: 36px; 
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.full-menu__address {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
}

/* オンライン予約ボタン */
.full-menu__reserve-btn {
    display: inline-flex; 
    align-items: center;
    gap: 10px; 
    text-decoration: none;
    background-color: #f08e5e;
    color: #fff;
    padding: 15px 30px;
    border-radius: 30px; 
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.full-menu__reserve-btn:hover {
    background-color: darken(#f08e5e, 10%); 
}
.full-menu__schedule{
    padding-bottom: var(--spacing-section-xl);
}



.sub-mv__text{
    position: relative;
}
.sub-mv__deco-01{
    position: absolute;
    top: 27%;
    right: -20%;
    width: 15%;
}

.top-mv__media,.sub-mv__media {
    position: relative;
    text-align: end;
}
.top-mv__movie{
    width: 88%;
}
.sub-mv__img{
    border-radius: 0 0 0 50px;
    position: relative;
    right: -140px;
    width: 1000px;
}

.top-mv__musk{
    position: absolute;
    bottom: 4px;
    left: 12%;
    width: 25%;
}
.mv_copy-text{
    display: block;
    position: absolute;
    bottom: 30px;
    font-size: clamp(19px, 1.8vw, 24px);
}
.top-mv__text,.sub-mv__text{
    max-width: 700px;
}
.mv_copy-text-sp_01{
    position: absolute;
    bottom: 50px;
    font-size: var(--font-size-xxl);
    left: 33px;
}
.mv_copy-text-sp_02{
    position: absolute;
    bottom: -5px;
    font-size: clamp(25px, 5vw, 40px);
    left: 175px;
}
.top-mv__deco-01{
    position: absolute;
    left: 9%;
    width: 20%;
    bottom: 20%;
}
.top-mv__deco-02{
    position: absolute;
    top: -135px;
    left: 6%;
    width: 5%;
}
/************************************
** ヘッダー　メディアクエリ
************************************/
@media screen and (max-width: 992px){
 .mv_copy-text {
    bottom: 18px;
}  
}
@media screen and (max-width: 768px) {
.header-logo__link img{
    height: 30px;
}
.hamburger-menu {
    width: 55px;
    height: 55px;
    padding: 21px 18px
}
.hamburger-menu__line{
    height: 1px;
}
.header{
    padding: 8px;
}
.top-mv__movie{
    width: 90%;
}
.top-mv__media,.sub-mv__media {
    text-align: center;
}
.top-mv__musk{
   bottom: 53px;
    left: 5%;
    width: 67%;
}
.top-mv{
    padding-top: 75px;
}
.top-mv__video-wrapper{
    padding-bottom: 50px;
}
.top-mv__deco-01{
    left: -4%;
    width: 51%;
    bottom: 13%;
}
.sub-mv__img{
    right: -22px;
}

}


@media screen and (max-width: 575px) {
.mv_copy-text-sp_01{
    font-size: var(--font-size-xl);
    bottom: 40px;
    left: -3px;
}
.mv_copy-text-sp_02{
    bottom: 3px;
    left: 120px;
}
}















/* ------------------------------------------- */
/* お知らせ */
/* ------------------------------------------- */
.top-news{
    background: url(img/decoration/deco-f-012.png), url(img/decoration/deco-f-007.png), url(img/top/baby_001.png), url(img/decoration/deco-g-001.png);
    background-repeat: no-repeat;
    background-size: 6%, 12%, 35%, 50%;
    z-index: 1;
    background-position: top 500px right 34%, top 177px right 33%, bottom 280px right, right -120px top 0px;
    padding-bottom: var(--spacing-section);
}

.top-news_bottom-img{
    position: relative;
    width: 100%;
    z-index: -1;
}
/* ------------------------------------------- */
/* お知らせ  レスポンシブ
/* ------------------------------------------- */
@media screen and (max-width: 768px){
    .top-news{
        background:url(img/top/baby_001.png);
        background-repeat: no-repeat;
        background-position: bottom 170px right;
        background-size: 70%;
        margin-bottom: var(--spacing-section-lg);
    }
    .top-news__inner{
        margin-bottom: 140px;
    }

}

/* ------------------------------------------- */
/* 診療時間　hours
/* ------------------------------------------- */
.c-contact-schedule-section {
    padding-top: var(--spacing-xxl); 
    padding-bottom: var(--spacing-xxl);
}
.c-contact-schedule-section__schedule-wrapper {
    padding-top: var(--spacing-lg);
    border-radius: var(--spacing-sm); /* 角丸 */
    box-sizing: border-box; /* パディングを幅に含める */
}
.c-schedule-title {
    font-size: var(--font-size-xl); /* 24px */
    color: var(--text-color);
    text-align: center;
    margin-top: 0;
    /* u-mb-lg (24px) で下の余白を制御 */
}

.c-schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
    table-layout: fixed; /* これが重要です！ */
}

.c-schedule-table{
    background-color: var(--white);
}

.c-schedule-table th,
.c-schedule-table td {
    padding: var(--spacing-sm) var(--spacing-xs); /* 8px 4px */
    border: 1px solid var(--primary-100); /* 薄いオレンジの枠線 */
    text-align: center;

}

.c-schedule-table th {
    background-color: var(--primary-50); /* 薄いオレンジの背景色 */
    font-weight: var(--font-weight-bold);
}

.c-schedule-table__time {
    width: 200px; /* 最初の列の固定幅 */
    background-color: var(--primary-50);
    color: var(--text-color);
    padding-left: var(--spacing-sm);
    text-align: left;
}
.c-schedule-table__icon {
    display: inline-flex; /* Flexにして内部中央寄せ */
    justify-content: center;
    align-items: center;
    width: var(--spacing-md); /* アイコンのサイズ (24px) */
    height: var(--spacing-md);
    border-radius: 50%; /* 基本は丸 */
    margin: 0 auto;
    box-sizing: border-box;
    vertical-align: middle;
    flex-shrink: 0; /* 縮まないように */
}

/* アイコンの種類ごとのスタイル（モディファイア） */
/* 一般診療: オレンジの丸 */
.c-schedule-table__icon--general {
    background-color: var(--primary-500); /* プライマリーオレンジ */
    border: 1px solid var(--primary-500);
}

/* 健診・予防接種: オレンジの星 */
.c-schedule-table__icon--checkup-vaccine {
    background-color: transparent;
    border: 1px solid var(--primary-500);
    position: relative;
    /* 星の擬似要素は複雑なので、Font Awesomeなどのアイコンフォントを使うのがおすすめ */
    /* または、背景画像としてSVGを使う */
    /* ここでは Font Awesome を使用する想定で、CSSだけで表現する簡易版 */
}



/* アレルギー相談外来: オレンジの二重丸 */
.c-schedule-table__icon--allergy-consult {
    background-color: transparent;
    border: 2px solid var(--primary-500); /* 外側の丸 */
    position: relative;
}
.c-schedule-table__icon--allergy-consult::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: var(--primary-500); /* 内側の丸の色 */
}

/* 日祝：休診: オレンジのハイフン */
.c-schedule-table__icon--holiday {
    background-color: transparent;
    border: none;
    position: relative;
}
.c-schedule-table__icon--holiday::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 2px;
    background-color: var(--primary-500); /* ハイフンの色 */
}

/* ■■■ ブロック: c-schedule-legend (凡例) ■■■ */
.c-schedule-legend {
    font-size: var(--font-size-sm); /* 14px */
    color: var(--text-color);
    display: flex;          /* 子要素を横並びにする */
    flex-wrap: wrap;        /* 画面が狭いときに折り返す */
    justify-content: start; /* アイテムを中央に配置（画像に合わせて） */
    gap: var(--spacing-md);
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-md);
}

.c-schedule-legend__item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-xs); /* 4px */
}

.c-schedule-legend__item .c-schedule-table__icon {
    margin-right: var(--spacing-xs); /* アイコンとテキストの間隔 */
    flex-shrink: 0;
}

.c-schedule-legend__note {
    margin-bottom: 0;
    line-height: var(--line-height-base);
    flex-basis: 100%; /* これを追加: 凡例のテキストは常に1行を占めるように */
}





/* 連絡先情報と予約ボタン */
.c-contact-schedule-section__details-wrapper {
    max-width: 600px;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    box-sizing: border-box;
}
.c-contact-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    text-align: center;
}
.c-contact-block__tel-group,
.c-contact-block__address-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm); /* アイコンとテキストの間隔 (8px) */
}
.tel-group__text{
    padding-left: var(--spacing-big);
}
.c-contact-block__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--spacing-xxl); /* 32px */
    height: var(--spacing-xxl);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
/* 電話アイコン */
.c-contact-block__icon--tel::before {
    content: '\f095'; 
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: var(--font-size-xl); /* 24px */
    color: var(--white);
}
/* 場所アイコン */
.c-contact-block__icon--location::before {
    content: '\f3c5'; /* FontAwesomeの場所アイコンのUnicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: var(--font-size-xl);
    color: var(--white);
}
.c-contact-block__tel {
    margin: 0;
    white-space: nowrap; /* 改行防止 */
}
.c-contact-block__address {
    font-style: normal; /* addressタグのイタリックを解除 */
    margin: 0;
}
.c-contact-block__reserve-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm); /* 8px */
    text-decoration: none;
    background-color: var(--primary-500); /* プライマリーオレンジ */
    color: var(--white);
    padding: var(--spacing-md) var(--spacing-xl); /* 16px 32px */
    border-radius: calc(var(--spacing-xxl) / 2); /* ボタンの高さの半分で丸く (32px/2=16px) */
    transition: background-color 0.3s ease;
    margin-top: var(--spacing-lg); /* 24px */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.c-contact-block__reserve-btn:hover {
    background-color: var(--primary-600); /* darker color */
}
/* アイコン */
.c-contact-block__reserve-btn .c-contact-block__reserve-icon::before { /* span.c-contact-block__reserve-icon があれば */
    content: '\f073'; /* FontAwesomeのカレンダーアイコンのUnicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solidアイコンのウェイト */
    font-size: var(--font-size-xl); /* 24px */
    color: var(--white);
}
.c-schedule-table tbody td:not(.c-schedule-table__time)  { /* 時間列のtd以外 */
    width: calc((100% - 200px) / 6); /* ☆ これを使用 ☆ */
}
.top-hours__inner{
    position: relative;
}
.top-hours__deco{
    position: absolute;
    bottom: -57px;
    left: -2%;
    width: 7%;
}


/* ------------------------------------------- */
/* 検証中　c-contact-box
/* ------------------------------------------- */

.c-contact-box__tel,.c-contact-box__address{
    position: relative;
}
.c-contact-box__icon{
    position: absolute;
    width: 60px;
    top: 50%;
    transform: translate(0%, -50%);
}
.c-contact-box__text{
    padding-left: 80px;
}
.c-contact-box__tel-text{
    line-height: 30px;

}





















/* ------------------------------------------- */
/* 診療時間　レスポンシブ
/* ------------------------------------------- */

@media screen and (max-width: 768px){
    .c-schedule-table__time {
        width: 15%; 
    }
    .c-schedule-table th:not(:first-child),
    .c-schedule-table td:not(.c-schedule-table__time) {
        width: calc((100% - 120px) / 6); 
    }
    .c-schedule-table th,
    .c-schedule-table td {
        font-size: var(--font-size-xs);
    }
    .c-schedule-table__icon{
        width: 15px;
        height: 15px;
    }
    .c-contact-block__icon{
        width: 35px;
        height: 35px;
    }
    .c-contact-schedule-section{
        padding-top: 0;
    }

    .c-contact-schedule-section__schedule-wrapper{
        margin-bottom: var(--spacing-section);
    }
    .c-contact-block__tel-group,
    .c-contact-block__address-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg); /* アイコンとテキストの間隔 (8px) */
    margin-bottom: var(--spacing-md); /* 16px */
}
.c-contact-block{
    width: 100%;
}
.top-hours__deco{
    bottom: -172px;
    right: 11%;
    width: 25%;
    left: unset;
}
.c-schedule-legend {
    justify-content: start; 
    padding-left: unset;
    padding-right:unset;
}
.tel-group__text{
    padding-left: 47px;
}
}


/*=====================
診療案内ボタン
=====================*/

.p-service-buttons {
  display: flex;
  justify-content: center; 
  gap: var(--spacing-lg); 
  flex-wrap: wrap; /* ここを追加: アイテムがコンテナの幅を超えたら折り返す */
}

.c-button-icon,.c-button-icon__no-hover{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 130px; 
  height: 130px;
  background: linear-gradient(135deg, var(--primary-300), var(--primary-500)); 
  border-radius: var(--spacing-sm);/* 角丸 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-basis: calc(50% - var(--spacing-lg) / 2); /* 2列にするため50%に設定し、gapを考慮 */
    max-width: 130px; /* アイコンボタンの最大幅を維持 */
}
.c-button-icon{
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
}
/* 小さめボタン */
.c-button-icon-s {
  width: 110px; 
  height: 110px;
}




.c-button-icon:hover {
  transform: translateY(-4px); /* ホバーで少し上に移動 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ホバーで影を濃く */
}

.c-button-icon__img {
  max-width: 40%; /* アイコンの幅 */
  height: auto; /* アイコンの高さ */
  margin-bottom: var(--spacing-sm); /* アイコンとテキストの間の余白 */
}

.c-button-icon__text {
  color: var(--white); /* テキストの色 */
}

/*=====================
診療案内ボタン メディアクエリ
=====================*/
@media screen and (max-width: 768px){
    .c-button-icon{
        width: 100px; 
        height: 100px;
        max-width: unset;
    }
    .c-button-icon__img {
        max-width: clamp(40px, 25%, 50px);
}

}


/*=====================
リンクボタン
=====================*/

/* ボタン */
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px; /* 角丸 */
  color: var(--white); /* 文字色 */
  font-weight: 700;
  text-decoration: none;
  background-image:  url('img/common/btn_bg.png'); 
  background-repeat: no-repeat;
  background-size: cover; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;/* ホバー時のトランジション */
  height: 65px; /* ボタンの高さ */
  border: 1px solid #ffff;
  position: relative;
  z-index: 2;
}

.c-button:hover {
  color: var(--white); /* ホバー時の文字色も白 */
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.c-button__text {
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  font-weight: normal;
  color: var(--white);
}

.c-button__icon {
  width: 10%;
  height: auto;
  margin-right: var(--spacing-sm); 
  object-fit: contain;
}

/* 矢印アイコン (CSSで生成) */
.c-button__arrow {
  width: 10px; /* 矢印の幅 */
  height: 10px; /* 矢印の高さ */
  border-top: 2px solid var(--white); /* 矢印の上辺 */
  border-right: 2px solid var(--white); /* 矢印の右辺 */
  transform: rotate(45deg); /* 45度回転させて矢印の形に */
  margin-left: var(--spacing-sm); /* テキストと矢印の間隔 */
  flex-shrink: 0; /* 縮小させない */
}


/* ボタンのバリエーション */
.c-button--primary {
  width: 100%; 
}

.c-button--secondary {
  width: 320px; /* 小さい方のボタン横幅 */
}


/*=====================
リンクボタン メディアクエリ
=====================*/

@media screen and (max-width: 768px){
    .c-button--primary,.c-button--secondary {
        width:100%; 
    }
    .c-button__icon{
        width: 10%;
         min-width: 50px;
    }

}



/*=====================
medical　診療案内
=====================*/

.top-medical_bg{
    background-image: url(img/top/top-medical_001.png), url(img/top/top-medical_003.JPG);
    background-size: 320px, 200px;
    background-repeat: no-repeat;
    background-position: top right 25%, top 120px right;
    margin-bottom: 280px;
}
.medical-bg{
    margin-top: -60px;
}

.medical-bottm{
    position: relative;
}
.top-medical_bottm-img{
    width: 370px;
    position: absolute;
    top:30px;
}
.top-medical_bottm-deco_lb{
    position: absolute;
    top: 70px;
    width: 180px;
    left: -120px;
}
.top-medical_bottm-deco_rb{
    position: absolute;
    right: -147px;
    width: 135px;
    bottom: -300px;
}


/*=====================
medical　診療案内 メディアクエリ
=====================*/

@media screen and (max-width: 768px){
   
    .top-medical_bg{
    background-size: clamp(240px, 63%, 370px), clamp(140px, 40%, 218px);
    background-position: top left 15%, top 160px right 9%;
    padding-top: 380px;
    }
    .medical-bg-sp{
    width: 100%;
    position: relative;
    bottom: -130px;
    z-index: -1;
    }
    .top-medical_bottm-img{
    width: 70%;
    position: absolute;
    top: 80px;
    right: 6px;
}
}

/*=====================
greeting　院長あいさつ
=====================*/
.top-greeting{
    margin-bottom: 350px;
}
.top-greeting_text-box{
    background-color: var(--primary-500);
}
.top-greeting__text-box-inner{
    width: 70%;
    margin: 10%; 
}

.top-greeting__inner{
    position: relative;
}
.top-greeting__img-dr{
   position: absolute;
    width: 50%;
    top: -86px;
    right: clamp(-300px, -30%, -180px);
    z-index: 1;
}
.top-greeting__deco-001{
    position: absolute;
    top: -43px;
}
.top-greeting__deco-002{
    position: absolute;
    bottom: 15px;
    left: -40px;
}
.top-greeting__deco-003{
    position: absolute;
    bottom: -73px;
    right: -140px;
}

/*=====================
greeting　院長あいさつ メディアクエリ
=====================*/

@media screen and (max-width: 768px){
   .top-greeting__img-dr{
   position: unset;
    width: 100%;
    margin-bottom: var(--spacing-section-md);
}
 .top-greeting__text-box-inner{
    width: 100%;
    margin: unset;
    padding: unset;
    padding-top: var(--spacing-section-md);
    padding-bottom: var(--spacing-section-md);
}
  .top-greeting__deco-001{
    top: -15px;
    left: 0;
    width: 70px;
} 
.top-greeting__deco-002{
    bottom: -40px;
    left: -25px;
    width: 115px;
}
.top-greeting__deco-003{
    width: 183px;
    bottom: -50px;
    right: 2px;
}
.top-greeting__text-b{
    margin-bottom: var(--spacing-section-lg);
}
.top-greeting{
    margin-bottom: 200px;
}


}



/*=====================
first　初めての方へ
=====================*/
.top-first{
    background-image: url(img/decoration/deco-bg_top-first-g.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 110px center;
    width: 100%;
    margin: 0 auto;
    height: 1000px;
    position: relative;
    margin-bottom: 500px;
}
.top-first__text-box{
    padding-top: 280px;
}
.lound-img{
 object-fit: cover; 
  border-radius: 50%; 
  display: block; 
}
.top-first_deco-001{
    width: 130px;
    height: 130px;
    position: absolute;
    bottom: -440px;
    right: 40%;
}
.top-first_deco-002{
    position: absolute;
    width: 250px; 
    height: 250px;
    bottom: -340px;
    right: 15%;
    z-index: 1;
}
.top-first_deco-003{
    position: absolute;
    width: 200px; 
    height: 200px;
    right: -9%;
    bottom: -480px;
}
.top-first_deco-004{
    width: 21%;
    position: absolute;
    bottom: -50%;
    left: 30%;
    z-index: 1;
}
.top-first_deco-005{
    width: 13%;
    position: absolute;
    bottom: -42%;
    left: -8%;
    z-index: 1;
}
.top-first_deco-006{
    position: absolute;
    right: -140px;
    width: 20%;
    top: 270px;
}
.top-first-deco-007{
    position: absolute;
    width: 16%;
    bottom: -600px;
}


.section-with-fade {
  position: relative; 
  padding-bottom: 100px; 
}
.section-with-fade::after {
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  height: 230px;
  background: linear-gradient(to bottom, transparent, var(--white));
  pointer-events: none; 
}

/*=====================
first　初めての方へ メディアクエリ
=====================*/
@media screen and (max-width: 768px){
.top-first{
    background-image: url(img/decoration/deco-bg_top-first-g-sp.png);
    background-position: top 200px center;
    height: unset;
    margin-bottom: 600px;
}
.top-first__img{
    width: 60%;
    margin-bottom: var(--spacing-section-md);
     margin-top: var(--spacing-section-md);
   
}
.top-first__text-box{
    padding-top: unset;
}
.top-first_deco-002{
    width: clamp(330px, 75%, 340px);
    right: unset;
    left: -40px;
    bottom: -270px;
    height: unset;
}
.top-first_deco-003{
    width: clamp(220px, 56%, 300px);
    height: unset;
    right: -2%;
}
.top-first_deco-004{
    width: clamp(240px, 50%, 242px);
    left: 160px;
    z-index: 1;
    bottom: -210px;
}
.top-first_deco-006{
    width: 40%;
    right: -45px;
    top: 220px;
}  
.top-first-deco-007 {
    position: absolute;
    width: clamp(150px, 35%, 200px);
    bottom: -530px;
    right: 28%;
} 
}


/*=====================
ネクストページリンク
=====================*/
.next-page{
    text-align: center;
    position: relative;
}
/*
.next-page__img{
    width: 80%;
    min-width: 700px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
    */
.next-page__text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.next-page__a{
    display: block;    
    width: 80%;
    min-width: 700px;
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.next-page__a:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px){
.next-page__a{
    width: unset;
    min-width: unset;
}
.next-page__text{
    font-size: var(--font-size-sm);
}
.next-page__text>p{
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}
}

/*=====================
footer フッター
=====================*/

.footer-logo{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.footer__inner{
    position: relative;
}
.footer-bg_001{
    position: absolute;
    top: -350px;
    right: -420px;
    z-index: -1;
}
.footer-bg_002{
    width: 65%;
    position: absolute;
    bottom: -130px;
    left: -370px;
    z-index: -1;
    overflow: hidden
}
.footer-bg_003{
    position: absolute;
    top: -9%;
    left: -7%;
    width: 16%;
    z-index: -1;
}
.footer-g-map_box{
    width: 80%;
    margin: 0 auto;
}
.footer-g-map{
    width: 100%;
    height: 500px;
}
iframe {
  border: 0;
}
.copyright{
    font-size: var(--font-size-sm);
}

/*=====================
footer フッター メディアクエリ
=====================*/
@media screen and (max-width: 768px){
.footer-bg_003{
    width: clamp(155px, 42%, 230px);
    top: -190px;
    left: -14%;
}
.footer-bg_004{
    top: -350px;
    width: clamp(128px, 30%, 200px);
    right: 153px;
    left: unset;
}
.footer-bg_001{
    top: -323px;
    right: -130px;
    right: -231px;
    max-width: 640px;
}
.footer-logo{
    margin: 0 auto;
    margin-bottom: var(--spacing-section-md);
}
.footer-bg_002{
    bottom: -60px;
    left: -113px;
    width: 90%;
}
}

/*=====================
about 私達について
=====================*/
/*　当院の特徴　*/
.box-h__500{
    min-height: 500px;
}
/*　当院の特徴　 メディアクエリ*/
@media screen and (max-width: 768px){
.box-h__500{
    min-height: unset;
}  
}

/*　経歴リスト　*/

.c-history-list dt {
  flex-shrink: 0; 
  min-width: 80px; 
  font-weight: normal;
  display: flex; 
  align-items: baseline; 
  grid-column: 1; 
  padding-bottom: var(--spacing-sm); 
  text-align: right; 
  padding-right: var(--spacing-sm); 
}

.c-history-list dd {
  margin-left: var(--spacing-md); 
  padding-bottom: var(--spacing-sm); 
}

.c-history-list {
  display: grid;
  grid-template-columns: minmax(80px, max-content) 1fr; 
}
.c-history-list dd {
  grid-column: 2; 
  padding-bottom: var(--spacing-sm); 
}
.c-history-list dd:last-of-type {
  padding-bottom: 0;
}

/*　経歴リスト レスポンシブ　*/
@media screen and (max-width: 768px){
.c-history-list {
  grid-template-columns: minmax(60px, max-content) 1fr; 
}
.c-history-list dt {
  min-width: 60px; 
}
}


.sub-introduce{
    margin-bottom: var(--spacing-section-xl);
}
.sub-introduce__inner{
    background: url(img/decoration/deco_top-first_004.png),url(img/decoration/deco_top-greeting_003.png), url(img/decoration/deco-bg_001.png);
    background-repeat: no-repeat;
    background-position: left 6% top 18%, right 2% top 23%, right -6% top -5%;
    background-size: 13%, 20%, 44%;

}

.about-introduce_dr-bg-001{
    position: absolute;
    bottom: -200px;
    width: 80%;
    left: -200px;
}
.about-introduce_dr-001{
    position: absolute;
    bottom: -40px;
    left: -8%;
    width: 65%;
}

.about-introduce_dr-bg-002{
    position: absolute;
    top: 0;
    right: -153px;
    width: 70%;
}
.about-introduce_dr-002{
    position: absolute;
    width: 50%;
    top: -20px;
    right: 4px;
}
.about-introduce_img-wrap{
    height: 700px;
}

/*=====================
院長経歴　レスポンシブ
=====================*/
@media screen and (max-width: 1200px){
.about-introduce_dr-bg-001 {
    left: -120px;
}
.about-introduce_dr-001 {
    left: -10px;
}
.about-introduce_dr-002 {
    width: 60%;
    right: 50px;
}
.about-introduce_dr-bg-002 {
    top: 15px;
    right: -45px;
}
}
@media screen and (max-width: 992px){
 .about-introduce_dr-001 {
    bottom: 0px;
    left: 38px;
    width: 70%;
}   
.about-introduce_dr-bg-001 {
    bottom: -106px;
    width: 94%;
    left: -40px;
}
.about-introduce_dr-bg-002 {
    top: 80px;
    width: 80%;
}
.about-introduce_dr-002 {
    width: 70%;
    top: 37px;
}
}
@media screen and (max-width: 768px){
    .about-introduce_dr-bg-001 {
        bottom: unset;
        top: 7%;
        width: 72%;
        right: unset;
        left: 223px;
}
    .about-introduce_dr-001 {
        bottom: unset;
        left: unset;
        width: 57%;
        right: -10%;
    }

    .about-introduce_dr-bg-002 {
        top: 58%;
        right: 270px;
        width: 56%;
    }
    .about-introduce_dr-002 {
        width: 55%;
        top: 42%;
        right: unset;
        left: -10%;
    }
    .sub-introduce__inner{
    background: url(img/decoration/deco_top-first_004.png),url(img/decoration/deco_top-greeting_003.png), url(img/decoration/deco-bg_001.png);
    background-repeat: no-repeat;
    background-position: left 6% top 13%, right -6% top 38%, right -150% top 36%;
    background-size: 32%, 52%, 86%;

}
}
@media screen and (max-width: 576px){
   .about-introduce_img-wrap{
    height: 750px;
    } 
    .about-introduce_dr-bg-001 {
        width: 88%;
        left: 100px;
    }
    .about-introduce_dr-001 {
        width: 70%;    }
    .about-introduce_dr-bg-002 {
        top: 57%;
        right: 88px;
        width: 80%;
    }
    .about-introduce_dr-002 {
        width: 74%;
        top: 52%;
        left: -10%;
    }
}

/* ページ内Googleマップ */
.p-g-map{
    width: 100%; 
    height: 500px;
}


/*　アクセス　*/
.p-access__container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: var(--spacing-xl); 
  align-items: flex-start; 
}

.p-access__map-area {
  min-height: 400px;
  background-color: #e0e0e0; 
  border-radius: 8px; 
}

/*　アクセスリスト　*/
.c-access-list {
  list-style: none; 
  margin: 0;
  padding: 0;
}

.c-access-list__item {
  display: flex;
  align-items: flex-start; 
  margin-bottom: var(--spacing-lg); 
}

.c-access-list__item:last-of-type {
  margin-bottom: 0; 
}

.c-access-list__icon-wrapper {
  width: 80px; 
  height: 80px; 
}

.c-access-list__icon {
  display: block;
  width: 55px; 
  height: 55px;
  object-fit: contain;
}

.c-access-list__content {
  flex-grow: 1; 
  margin-top: 12px;
}


.c-access-list__heading {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

.c-access-list__description {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.c-access-list__item--landmark .c-access-list__image {
  display: block;
  max-width: 200px; /* 看板画像の最大幅 */
  height: auto;
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影 */
}
/*=====================
アクセス　
=====================*/
.c-access-list__icon-wrapper {
  width: 70px;
  height: 95px;
  min-width: 70px;
}


/*=====================
院内ツアー　
=====================*/
/*=====================
院内ツアー　レスポンシブ
=====================*/
@media screen and (max-width: 768px){
 .sub-tour{
      margin-bottom: 100px;
 }   
}



/*=====================
初めての方へ　first
=====================*/

/*　ご予約について 　*/
.u-border-primary-icom{
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translate(-50%, -50%);
}
.sub-first__reservation{
    padding-bottom: var(--spacing-section-lg);
}
.sub-first__reservation-bg{
    background: url(img/decoration/deco-f-015.png);
    background-repeat: no-repeat;
    background-position: right -3% bottom 0;
    background-size: clamp(150px, 19%, 250px);
    padding-bottom: 118px;
    padding-bottom: var(--spacing-section-lg);
}

.sub-first__reservation_box{
    align-content: center;
    height: 250px;
    padding-left: var(--spacing-xl);
    border-radius: 5px;
}
.sub-first__reservation_qr{
    max-width: 150px;
}


.c-grid-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr; 
    align-items: center; 
    gap: var(--spacing-xxl); 
    width: 100%; 
}
.c-grid-wrapper__icon-area {
    display: flex;
    justify-content: center; 
    align-items: center; 
}


/*　ご予約について  メディアクエリ　*/

@media (max-width: 768px) { 
 .u-border-primary-icom{
    top: 0;
    left: 45px;
    width: 70px;
}
.sub-first__reservation_box{
    height: unset;
    padding: var(--spacing-xxl);
}

.sub-first__reservation-bg{
    background: unset;
}
}









/*=====================
持ち物について　What to Bring
=====================*/

/* グラデーションの下線 */
.c-divider {
  border: none; /* デフォルトの線を削除 */
  height: 3px; /* 線の太さ */
  background: linear-gradient(to right, var(--primary-50) 0%, var(--primary-400) 50%, var(--primary-50) 100%);
  margin-top: var(--spacing-section); /* 上のコンテンツとの余白 */
  width: 80%; /* 線幅の調整 */
  margin-left: auto;
  margin-right: auto;
}
.sub-first-bring,.sub-medical-belongings,.sub-information{
    background: url(img/decoration/deco-f-016.png), url(img/decoration/deco-f-003.png), url(img/decoration/deco-f-017.png);
    background-repeat: no-repeat;
    background-position: right 10% top, left bottom 30%, right 3% bottom 0;
    background-size: 19%, 7%, 20%;
}
.sub-first-bring__icon{
    width: 60px;
}

/*=====================
持ち物について　メディアクエリ
=====================*/
@media (max-width: 768px) { 
.c-divider {
  height: 2px; 
}
.sub-first-bring,.sub-medical-belongings{
    background-position: right -20% top 5%, left bottom 48%, right 3% bottom 3%;
    background-size: 41%, clamp(50px, 10%, 60px), clamp(140px, 45%, 160px);
}

}



/*=====================
受信までの流れ　Flow
=====================*/
.bg-gradation-p{
  background: linear-gradient(
    to bottom, rgba(var(--primary-200-rgb), 0), 
    rgba(var(--primary-200-rgb), 0.8) 20%, 
    rgba(var(--primary-200-rgb), 0.8) 90%, 
    rgba(var(--primary-200-rgb), 0)
    );
}
.sub-first-frow__bg,.sub-medical-item__bg,.sub-tour{
    background: url(img/decoration/deco-f-018.png), url(img/decoration/deco-f-019.png), url(img/decoration/deco-f-014.png), url(img/decoration/deco-f-014.png);
    background-repeat: no-repeat;
    background-position: left 20px top 18%, left top 40%, left bottom 15%, right 4% bottom 40%;
    background-size: 10%, 4%, 10%, 8%;
}

.sub-first-frow__box-outer{
    padding: var(--spacing-lg);
    padding-left: var(--spacing-xl);
}

.sub-first-frow__box{
    background-color: var(--white);
}
.sub-first-frow__heading-icon{
    position: absolute;
    top: 45px;
    left: -30px;
    width: 120px;
}
.sub-first-frow{
    padding-bottom: var(--spacing-section-xl);
}

/*=====================
受信までの流れ　Flow メディアクエリ
=====================*/
@media (max-width: 768px) { 
.sub-first-frow__box-inner{
    margin: 0;
    padding-top: var(--spacing-md);
}
.sub-first-frow__heading{
    margin-left: 80px;

}
.sub-first-frow__heading-icon{
    top: -5px;
    left: -15px;
    width: 100px;
}
.sub-first-frow{
    padding-left: 0;
    padding-right: 0;
}
.sub-first-frow__bg,.sub-medical-item__bg{
    background-position: left 0px top 9%, right 8% top 35%, left bottom 20%, right 1% bottom 34%;
    background-size: 30%, 11%, 19%, 17%;
}
}







/*=====================
診療案内　medical
=====================*/



/* 乳幼児健診セクション */
.p-checkup-section__inner {
  display: flex;
  align-items: center; /* 垂直方向中央揃え */
  gap: var(--spacing-xl); /* 画像とテキストの間に余白 */
}

.p-checkup-section__image-wrapper {
  position: relative;
  flex-shrink: 0; /* 画像が縮まないようにする */
  margin: 0 auto;
  width: 80%;
}

.p-checkup-section__photo {
  display: block;
  width: clamp(90px, 80%, 200px);
  height: auto;
  
}

.p-checkup-section__icon-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
  height: 55%;
  border: 1px solid var(--secondary-800); 
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white); 
  transform: translate(15%, 20%);    
}

.p-checkup-section__icon-illustration {
  display: block;
  max-width: 50%; /* アイコンのイラストのサイズ調整 */
  height: auto;
}

.p-checkup-section__content {
  flex-grow: 1; /* 残りのスペースを埋める */
}


/*=====================
診療案内　medical メディアクエリ
=====================*/
@media (max-width: 768px) { 
.p-checkup-section__image-wrapper {
    width: 180px;
    margin: revert;
}
.p-checkup-section__icon-wrapper {
  width: 40%;
  height: 46%;  
}
}



/*=====================
object
特定の役割を持つ要素のスタイル
=====================*/
/* ボックスを正方形に保つ */
.o-square-box {
  position: relative;
  width: 100%; /* 親要素の幅に合わせるための初期設定 */
}

.o-square-box::before {
  content: '';
  display: block;
  padding-top: 100%; /* 横幅と同じ高さにする */
}

.o-square-box__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ここにコンテンツのスタイルを追加 */
  display: flex; /* コンテンツを中央揃えにする場合など */
  justify-content: center;
  align-items: center;
}






/*=====================
  utility
  OOCSSのSにあたる部分。汎用的な見た目の変更
=====================*/
/* 線の色を変更したい場合 */
.u-box-framed-accent-blue::before,
.u-box-framed-accent-blue::after {
  border-color: var(--accent-blue);
}

/* 線の太さを変更したい場合 */
.u-box-framed-thin::before,
.u-box-framed-thin::after {
  border-width: 1px; /* 全体のborder-widthを上書き */
}
.u-box-framed-thin::before {
  border-top-width: 1px;
  border-left-width: 1px;
}
.u-box-framed-thin::after {
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* 線の長さを変更したい場合 */
.u-box-framed-short::before,
.u-box-framed-short::after {
  width: 20px;
  height: 20px;
}
























/*=====================
Object 
=====================*/
.o-vaccination-box {
  background-color: var(--white); 
  border-radius: var(--spacing-sm); 
  overflow: hidden;
  height: 100%; 
  border: 1px solid var(--secondary-500)
}

.o-vaccination-box__title {
  padding: var(--spacing-md); 
  background-color: var(--primary-200);
  border-bottom: 1px solid var(--secondary-500);
}


.o-vaccination-box__list{
    list-style: none;
    padding: 0;
}

.c-list__item {
  position: relative;
  margin-bottom: var(--spacing-xs); 
}



/*=====================
Media Queries (スマホ用)
=====================*/
@media (max-width: 768px) { /* Bootstrapのmdブレークポイントより小さい画面 */
  .o-vaccination-box__content {
    flex-direction: column; /* リストを縦並びにする */
    align-items: flex-start; /* リストを左寄せにする */
    padding: var(--spacing-md); /* スマホ用にパディングを調整 */
  }

  .o-vaccination-box__list {
    width: 100%; /* スマホではリストの幅を100%に */
  }
}

























/*=====================
見出しの装飾
=====================*/
.heading-bg_001{
    background-image: url(img/decoration/heading-bg_001.png);
}
.heading-bg_002{
    background-image: url(img/decoration/heading-bg_002.png);
}
.heading-bg_003{
    background-image: url(img/decoration/heading-bg_003.png);
}
.heading-bg_004{
    background-image: url(img/decoration/heading-bg_004.png);
}

.heading-bg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 60%;
    height: 75px;
    display: flex;
    align-items: center;
    min-width: 350px;
}


/************************************
** 表示・非表示
************************************/
/* タブレット・デスクトップ用サイズ（768px以上） */
@media screen and (min-width: 769px){
/* PCで非表示*/
.viewSp{display: none;}
.brSp{display: none;}
}
/* スマホで非表示*/
@media screen and (max-width: 768px) {
.viewPc{display: none;}
.brPc{display: none;}
}