@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;     }

.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;
    font-size: 0.8rem;
    list-style: none;
    margin-top: 30px;
    margin-right: 25px;
}
.main-nav a {
    color: rgb(96, 95, 94);
}
.main-nav a:hover {
    color: #0bd;
}
.main-nav2 {
    display: flex;
    justify-content: flex-end;}


.service {
    width: 100%;
    margin: 0;
    padding: 5px 0;
    position: relative;
    top: 0px;
}

.service p {
    width: 65%;
    margin: 0 auto;
}

.service::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
    transform: skewY(-4deg);
    z-index: -1;
}  
.service2 {
    width: 100%;
    margin: 0;
    padding: 3px 0;
    position: relative;
    top: 0px;
}

.service2 p {
    width: 65%;
    margin: 0 auto;
}

.service2::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
    transform: skewY(-4deg);
    z-index: -1;
}  
.service3 {
    width: 100%;
    margin: 0;
    padding: 5px 0;
    position: relative;
    top: 0px;
}

.service3 p {
    width: 65%;
    margin: 0 auto;
}

.service3::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0, 204, 255);
    transform: skewY(-4deg);
    z-index: -1;
}  

.service4 {
    width: 100%;
    margin: 0;
    padding: 5px 0;
    position: relative;
    top: 0px;
}

.service4 p {
    width: 65%;
    margin: 0 auto;
}

.service4::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(31, 234, 4);
    transform: skewY(-4deg);
    z-index: -1;
}  
.service5 {
    width: 100%;
    margin: 0;
    padding: 5px 0;
    position: relative;
    top: 0px;
}

.service5 p {
    width: 65%;
    margin: 0 auto;
}

.service5::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(100, 101, 100);
    transform: skewY(-4deg);
    z-index: -1;
}  

.service6 {
    width: 100%;
    margin: 0;
    padding: 5px 0;
    position: relative;
    top: 0px;
}

.service6 p {
    width: 65%;
    margin: 0 auto;
}

.service6::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(234, 201, 81, 0.88);
    transform: skewY(-4deg);
    z-index: -1;
}  


/* ↓ 追加 ↓ ------------------------------- */
  .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;
            width:800px;
          }
          
          dt{
            color:navy;
            font-weight:bold;
            padding:0 10px 0 0;
            width:200px;
            float:left;
            margin-bottom:7px;
          }
          
          dd{
            color:#333;
            margin-bottom:7px;
          }
          
          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;}

    p{font-size: 1.2rem;
      text-align: justify;}
    .heading-large{font-size: 4rem;}
    /* ヘッダー */
    .main-nav{font-size: 1.5rem;}  
    .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;
        
    }

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

/* ↑ 追加 ↑ ------------------------------- */

/* フッター
------------------------------- */
.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;
}
.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;
    }
}