@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
/* レイアウト */
.align-center {
    text-align: center;
}
h3{font-size: 2rem;
    color: #ffffff;}
h4{font-size: 1.5rem;
        color: #ffffff;     }
h7{font-size: 1rem;
        color: #000000;     }

.container {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding-top: 100%;
          }
 .responsive-iframe {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            border: none;
          }
.wrapper2 {
            max-width: 1040px;
            padding: 0 20px;
            margin: 0 auto;
          }                
/* ↓ 追加 ↓ ----------------index topics--------------- */
.box {
    background-color: #d6e6d7;
  }
  
  p {
    text-align: center;
  }
/* 追加end ------------------------------- */
/* 見出し */
.font-english {
    font-family: 'Philosopher', sans-serif;
    font-weight: normal;
}
.page-title {font-size: 5vw;
             text-align: center;
             margin-top: 1rem;
             line-height: 1.4;
             }
.page-title2 {font-size: 1.8rem;
             text-align: center;
             margin-top: 0;
             line-height: 1.4;
            }
             
/* ↑ 追加 ↑ ------------------------------- */
/*-------------------------------------------
Concept
-------------------------------------------*/
.concept {
    padding-top: 130px;
    padding-bottom: 130px;
    position: relative;
  }
  .concept .img {
    max-width: 720px;
    object-fit: contain;
  }
  .concept .text {
    max-width: 600px;
    background-color: rgba(253, 248, 248, 0.8);
    padding: 40px;
    position: absolute;
    top: 325px;
    right: 0;
  }
  .concept .text .section-title {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .concept .text .description {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
  }
/* ヘッダー
------------------------------- */
.page-header {
    padding-top: .5rem;
}
.logo {
    width: 450px;
    margin-left: 20px;
}

/* ↓ 追加 ↓ ------------------------------- */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 3rem;
  list-style: none;
  margin-top: 30px;
  margin-right: 25px;
  font-size: clamp(0.8rem, 1.2vw, 1.6rem);
}

.main-nav a {
    color: rgb(96, 95, 94);
    padding:8px 10px;
}
.main-nav a:hover {
    color: #0bd;
}
.main-nav2 {
    display: flex;
    justify-content: flex-end;}

/* 共通斜めセクション */
.section-skew {
    width: 100%;
    padding: 5px 0;
    position: relative;
  }
  
  .section-skew::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: skewY(-4deg);
    z-index: -1;
  }
/* 共通斜めセクションここまで */  
/* 色バリエーション */
  .bg-red::before {
    background-color: red;
  }
  
  .bg-blue::before {
    background-color: rgb(0, 204, 255);
  }
  
  .bg-green::before {
    background-color: rgb(31, 234, 4);
  }
  
  .bg-gray::before {
    background-color: rgb(100, 101, 100);
  }
  
  .bg-yellow::before {
    background-color: rgba(234, 201, 81, 0.88);
  }

  .bg-ygreen::before {
    background-color: rgba(147, 221, 135, 0.88);
  }

/* 色バリエーションここまで */

/* ↓ 追加 ↓ ------------------------------- 
  .news-contents {
    display: flex;
    justify-content: space-between;
    margin: 60px;
    

}
.post {
    width: 25%;
    object-fit: cover;
}
.post-thumbnail {
    width: 100%;
    object-fit: cover;
}
.sidebar .heading-medium {
    line-height: 1;
    margin-bottom: 1rem;  
}*/

    .example {/*ここから*/
        position: relative;
        }
      
      .example p {/*pタグを画像の真ん中に*/
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        margin:0;/*余計な隙間を除く*/
        padding:0;/*余計な隙間を除く*/
        color: white;/*文字色*/
        font-size: 25px;/*文字サイズ*/
        text-align:center;/*pタグ内で更に中央寄せ*/
        font-family: 'Quicksand',sans-serif;
        }
      
      .example p .fa {/*アイコンに対して*/
        display:block;/*前後に改行*/
        padding-bottom:10px;/*文字との隙間*/
        font-size: 3em;/*文字の3倍のサイズに*/
        color: rgba(255, 255, 255, 0.6);/*半透明*/
        }
      
      .example img {
        width: 100%;
        }/*ここまで*/

        .example2 {
            position: relative;
            display: flex;


            }
          
          .example2 a {/*aタグを画像の真ん中に*/
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            /*以下装飾*/
            margin:0;/*余計な隙間を除く*/
            /*font-size: 25px;文字サイズ*/
            border: solid white 2px; /*線で囲う*/
            padding: 3px;/*文字と線の間の余白*/
            color: white;/*文字色*/
            text-decoration: none;/*下線を表示させない*/
            }
          
          .example2 a:hover{/*カーソルを当てたとき*/
            background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/

        }
          
          .example2 img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            transition: transform 0.4s;/*動き*/
         
            }
            .example2:hover  img {/*動き用*/
                transform: scale(1.15);
              }

        /* ↑ 追加 ↑ ------------------------------- */
        dl{
          padding:10px;
          max-width:800px;
      }
      
      dl div{
          display: flex;
          border-bottom: 1px solid #ccc;
          padding: 12px 0;
      }
      
      dt{
          color:navy;
          font-weight:bold;
          width:220px;
          flex-shrink: 0;
      }
      
      dd{
          color:#333;
          margin:0;
      }
          
          dl::after {
              content: '';
              display: block;
              clear: both;
          }
@media (min-width: 800px) {
    /* 見出し */
    h1{font-size: 5rem;}
    h2{font-size: 4rem;}
    h3{font-size: 3rem;
       color: #ffffff;}
    h4{font-size: 2.5rem;
        color: #ffffff;     }
    h5{font-size: 2.8rem;}
    h6{font-size: 3rem;
       color: #4d4b4b;}
    h7{font-size: 2rem;
       color: #4d4b4b;}

    p{font-size: 1.2rem;
      text-align: justify;}
    .heading-large{font-size: 4rem;}
    /* ヘッダー */
    .page-header {
        display: flex;
        justify-content: space-between;
        padding-top: 2rem;
    }
    /* ↑ 追加 ↑ ------------------------------- */   
}

/* ↓ 追加 ↓ ------------------------------- */
    .news-contents {
        display: flex;
        justify-content: space-between;
        margin: 60px;
        

    }
    .post {
        width: 25%;
        object-fit: cover;
        

    }
    .post-thumbnail {
        width: 100%;
        object-fit: cover;
        
        

    }
    .sidebar .heading-medium {
        line-height: 1;
        margin-bottom: 1rem;
        
    }

    /* ↓ 追加 ↓ ------------------------------- */

/* ↑ 追加 ↑ ------------------------------- */
/* ===== お知らせtable調整 ===== */
.box table {
  width: 100%;
  border-collapse: collapse;
}

.box td {
  padding: 10px 15px;
  vertical-align: middle;
}

.box td:first-child {
  white-space: nowrap;   /* 日付を改行させない */
  width: 180px;          /* 日付幅固定 */
  font-weight: normal;
}

.box td:last-child {
  text-align: left;
}

.box p {
  margin: 0;
  text-align: left;
}
/* ===== ここまで ===== */


/* フッター
------------------------------- */
.page-footer {
    background-image: url(../images/footer-s.webp);
    background-size: cover;
    background-position: center;
    padding-top: 1rem;
}
.info {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 0 1.5rem;
    border-spacing: 0;
}
.info th,
.info td {
    border-bottom: 1px solid #c9c2bc;
}
.info th {
    text-align: left;
    font-weight: normal;
    padding: 1rem;
    white-space: nowrap;   /* ← 追加 */
}
.info td {
    padding: 1rem 0;
}


.logo2 {
    width: 100%;
    max-width: 300px;
    margin: auto;
    padding: 0 1.5rem;
    border-spacing: 0;
    text-align: center;
    display: flex;
}
/* ↓ 追加 ↓ ------------------------------- */
.copyright {
    background-color: rgb(59, 55, 52);
    text-align: center;
    padding: 2rem 0;
    margin-top: 6rem;
    color: #fff;
}
/* ↑ 追加 ↑ ------------------------------- */
.location {
    display: flex;
    gap: 2rem;
}
.location-info {
    width: 45%;
}
.location-info .info th {
    padding-left: 2rem;
}
.location-map {
    width: 50%;
}
.email {
    margin-bottom: 4rem;
}
.sns {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 0;
}
.sns-item {
    flex: 1;
}

.center {
     text-align: center;
}
@media screen and (max-width: 767px) {
    /*-------------------------------------------
    Concept
    -------------------------------------------*/
    .concept {
      padding-top: 40px;
      padding-bottom: 40px;
      position: static;
    }
    .concept .img {
      margin-bottom: 30px;
    }
    .concept .text {
      background-color: transparent;
      padding: 0;
      position: static;
    }
    .concept .text .section-title {
      font-size: 24px;
    }
/* 折り返さない */
  .main-nav {
    flex-wrap: nowrap;        /* 折り返さない */
    gap: 1rem;                /* 間隔を狭くする */
    font-size: 0.75rem;       /* 少し小さく */
    overflow-x: auto;         /* はみ出したら横スクロール */
  }

  .main-nav li {
    white-space: nowrap;      /* 文字を改行させない */
  }
  .location {
    flex-direction: column;
    gap: 1.5rem;   /* 少し自然な余白 */

}
/* ===============================
   Accessページ 地図レスポンシブ対応
=============================== */

.location-map iframe {
  width: 95%;        /* 少し小さくする */
  height: 250px;
  display: block;    /* 中央寄せに必要 */
  margin: 0 auto;    /* 左右均等の余白 */
}
.location-info,
.location-map {
  width: 100%;   /* ← これが超重要 */
}
.location-map {
  order: -1;   /* ← 地図だけに指定 */
}
.news-contents {
  margin: 20px;
}

.post {
  width: 32%;
}

.example2 img {
  height: 160px;
}
.news-contents {
  flex-direction: row;
  gap: 10px;
}

}