@charset "UTF-8";


/*-----------------
subpage css
-----------------*/

/*----------------------------------
左右マージン
----------------------------------*/
.margin-10{
    margin: 0 10%;
}


.space{
    line-height: normal;
}


.section1-img{
    border-radius: 0px !important;
    height: auto;
}

.section7-img{
    border-radius: 0px !important;
    height: auto;
}
/*-------------------------------------------------
.mv-under topimage
------------------------------------------------*/
.section1 {
  margin-top: 10%;
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  block-size: 180px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 60vh;
  overflow: hidden;
}
.section1::after {
  content: '';
  position: absolute;
  inset: 0;
}

@media (width >= 1px){
    .section1{
        block-size: 160px;
    }
}
@media (width >= 520px) {
  .section1 {
    block-size: 220px;
  }
}

@media (width >= 769px) {
  .section1 {
    block-size: 280px;
  }
}

@media (width >= 960px) {
  .section1 {
    block-size: 340px;
  }
}

.section2{
    margin-bottom: 80px;
}

.section3{
    margin-bottom: 80px;
}

.section4{
    margin-bottom: 80px;
}


.section5{
    margin-bottom: 60px !important;
}

.section5-h4{
    margin-bottom: 40px;
}

.section6{
    margin-bottom: 80px;
}

.section7{
    margin-bottom: 80px;
}

.section8{
    margin-bottom: 160px;
}

.section9{
    margin-bottom: 100px;
    text-align: center;
}



/*--------------------
横並び (PC/タブレット)
-------------------*/
.box {
    display: flex;
    flex-wrap: wrap; /* 念のため折り返しを許可 */
    
    max-width: 1440px;
    margin: 0 auto;  /* 中央揃え */
}

.content-item {
    flex-grow: 1; 
    
    /* 3分割の正確な幅設定: 隙間(20px * 2 = 40px)を全体から引いて3で割る */
    flex-basis: calc((100% - 10px) / 3); 
    
    /* 画像の縦横比を揃える設定 */
    height: 300px; 
    overflow: hidden;
    box-sizing: border-box; 
}

/* 画像: 常に親要素を覆う (縦横比を破綻させない) */
.content-item img {
    width: 100%;
    height: 100%; 
    display: block; 
    object-fit: contain; /* 画像をトリミングせず、親要素に収める */
    object-position: center; /* 画像を中央に配置 (余白ができた場合に有効) */
}


/* --- スマホ画面時の設定 (620px 以下) --- */
@media (max-width: 769px) {
    
    .box {
        /* スマホ時、左右の余白は少なめに (paddingを上書き) */
        padding: 5px 5px; 
        flex-direction: column; /* 縦並びにする */
    }

    /* 子要素: 幅を100%にする */
    .content-item {
        width: 100%;
        flex-grow: 0;
        flex-basis: auto; 
        
        /* スマホ時の高さ調整 (任意) */
        height: 300px; 
    }
}

/*--------------------
nav
--------------------*/
/* リスト全体の設定 */
.breadcrumb-box{
    margin-top: 5%;
    margin-bottom: 10%;
}
.breadcrumb {
    display: flex; /* 横並びにする */
    list-style: none; /* デフォルトの黒点を削除 */
    padding: 0;
    margin: 0;
}

/* リスト項目の設定 */
.breadcrumb-item {
    white-space: nowrap; /* 項目が途中で改行しないようにする */
}

/* 区切り記号の追加 (最後の要素には不要) */
.breadcrumb-item:not(:last-child)::after {
    content: ""; /* 矢印として > を使用 */
    /* content: "/";  スラッシュを使うこともあります */
    /* content: "";  画像を使う場合は空欄 */
    padding: 0 1px; /* 記号の左右に少しスペースを空ける */
    color: #999; /* 記号の色 */
}

/* リンクテキストのスタイル */
.breadcrumb-item a {
    text-decoration: none; /* 下線を削除 */
    color: #007bff; /* リンクの色 */
}

/* 現在のページ（最後の項目）のスタイル */
.current-page {
    color: #333; /* リンクではなく、濃い色にする */
    font-weight: bold;
}


/*---
line
---*/
h1{
    padding-bottom: 20px;
    border-bottom: solid 2px black;
    border-bottom: solid 2px #cbcbcb;
}

.subtitle-line{
    padding-left: 20px;
}

.decorated-heading-section h3 {
    border-left: 5px solid black;
    padding-left: 15px;
    margin-bottom: 40px; 
}

/*---------------------
footer
---------------------*/
.footer-font-size{
    font-size: 1rem !important;
}