@import url('./common.css');

#home {
  .sec-title{
    font-size: clamp(22px, 1.27vw + 17.22px, 32px);
    font-weight: 600;
    position: relative;
    padding-bottom: 1.5rem;

      text-align: center;
       margin: 0 auto;
          display: table;
    @media screen and (min-width: 769px) {
      text-align: justify;
          display: inline-block;
          margin: 0;
    }
    
    span{
      color: #434545;
      font-size: clamp(16px, 1.02vw + 12.18px, 24px);
      font-weight: 400;
    }
    &::after{
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width:60px;
      height: 4px;
      background-color: var(--base);
      @media screen and (min-width: 769px) {
         bottom: 0;
      left: 0;
        width: 130px;
        transform: none;
      }
    }
   }
  .mv{
      .inner{
        background:url(../img/home/mv-bg--sp.png) no-repeat center bottom / cover;
        padding: 1.5rem;
        border-radius: 15px;
        aspect-ratio: 376 / 500;
        position: relative;
        @media screen and (min-width: 769px) {
            padding: 0;
          aspect-ratio: 1380 / 640;
             background:url(../img/home/mv-bg.png) no-repeat center center / cover;
        }
        .text{
         padding: calc(30 / 768 * 100%);
          background-color: var(--white);
          border-radius: 1.5rem;
          border: 4px solid #3DECE8;
          text-align: center;
          @media screen and (min-width: 769px) {
            text-align: justify;
                 position: absolute;
         border: 7px solid #3DECE8;
               top: 50%;
           transform: translate(0, -50%);
         left: calc(147 / 1380 * 100%);
            aspect-ratio: 768 / 437;
          width: calc(768 / 1380 * 100%);
            border-radius: 4rem;
       
          }
          h2{
            font-size:clamp(20px, 2.19vw + 11.79px, 42px);
            color: var(--base-dark);
            margin-bottom: calc(30 / 768 * 100%);
          }
          p{
            font-size: clamp(14px, 0.19vw + 13.3px, 16px);
            @media screen and (min-width: 769px) {
              font-size: 1.528vw;
            }
            strong{
              color: var(--base-dark);
            }
            &.right{
              text-align: center;
              @media screen and (min-width: 769px) {
                text-align: right;
              }
            }
            &.button{
              margin-top: calc(30 / 768 * 100%);
              @media screen and (min-width: 769px) {
                margin-top: 0;
              }
              a{
                position: relative;
                 width:calc(380 / 768 * 100%);
                 font-size:clamp(14px, 0.19vw + 13.3px, 20px);
                 text-align: center;
                /* &::after{
                  position: absolute;
                  top: 50%;
                  right: 7%;
                  transform: translate(0, -50%);
                  content:url(../img/home/icon-arrow.svg);
                  display: inline-block;
                 
                } */
              }
            }
            }
        }
      }
  }
  .about{
    .inner{
      .column{
        padding-top: calc(30 / 1160 * 100%);
        .text{
          h4{
            font-size:clamp(16px, 0.38vw + 14.59px, 20px);
            padding: 0 0 calc(30 / 1160 * 100%);
          }
          .button{
            margin-top: calc(30 / 1160 * 100%);
            text-align: center;
            @media screen and (min-width: 769px) {
        text-align: justify;
            }
          }
        }
        .img{
          img{
            border-radius: 15px;
          }
        }
      }
      .pamphlet{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3%;
        background-color: #B4FEFB;
        padding: 2rem;
        border-radius: 15px;
        margin-top: calc(160 / 1160 * 100%);
        @media screen and (min-width: 769px) {
               gap: 1%;
   margin-top: calc(50 / 1160 * 100%);
        }
       li{
        img{
          width:100%;
          max-width: 90px;
        }
        h3{
          font-size:clamp(16px, 0.25vw + 15.07px, 18px);
          font-weight: 600;
          img{
            width: 18px;
            vertical-align: middle;
              @media screen and (min-width: 769px) {
          width: 24px;
          }
          }
        }
        p{
          font-size:clamp(14px, 0.25vw + 13.04px, 16px);
          margin-top: calc(10 / 1160 * 100%);
        }
       }
      }
    }
  }
  .news{
    .inner{
      .column{
        grid-template-columns: 1fr;
        @media screen and (min-width: 769px) {
          grid-template-columns: 30% 70%;
        }
      }
      .list{
        .item{
          margin-bottom: 2rem;
          &:last-child{
            @media screen and (min-width: 769px) {
              margin-bottom: 0;
            }
          }
          a{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 1rem;
            img{
              width: 100%;
              max-width: 100px;
              height: auto;
              object-fit: cover;
              border-radius: 15px;
            }
          }
        }
      }
    }
  }
  .sns{
    .inner{
      .inner_md{
        .sec-title{
          text-align: center;
          margin: 0 auto;
          display: table;
          &::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .list{
       
          margin-top: calc(50 / 1160 * 100%);
          @media screen and (min-width: 769px) {
         display: flex;
          justify-content: center;
          gap: 3rem;
          }
          li{
            width: 100%;
             max-width: 375px;
           display: table;
           margin: 0 auto 1.5rem;
            @media screen and (min-width: 769px) {
              margin-bottom: 0;
              display: contents;
            }
            p{
              width: 100%;
              max-width: 375px;
              a{
                border: solid 1px var(--base);
     
                &.youtube,
                &.instagram{
                  img{
                    height: 25px;
                    width: auto;
                    vertical-align: middle;
                    margin-right: 1rem;
                    @media screen and (min-width: 769px) {
                   height: 45px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .service{
    .inner{
      .inner_md{
        .sec-title{
          text-align: center;
          margin: 0 auto;
          display: table;
          &::after{
          content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .column{
          gap: .5%;
          align-items: stretch;
      margin-top: calc(50 / 1160 * 100%);
          @media screen and (min-width: 769px) {
          gap: 2.5%;
          }
          .item{
            border:1px dotted var(--base);
            padding: 2rem;
            border-radius: 15px;
            margin-bottom: 2.5%;
            h4{
              text-align: center;
              font-size:clamp(14px, 0.25vw + 13.04px, 16px);
              font-weight: 400;
              line-height: 1.8;
              @media screen and (min-width: 769px) {
             font-size:clamp(16px, 1.97vw + 8.61px, 20px);
              }
              strong{
                font-size:clamp(16px, 0.25vw + 15.07px, 18px);
                font-weight: 600;
                @media screen and (min-width: 769px) {
                  font-size:clamp(18px, 2.96vw + 6.92px, 24px);
                }
              }
            }
            .disc{
              list-style: disc;
              margin:1rem auto 0;
              display: table;
              @media screen and (min-width: 769px) {
                margin:1.5rem 0 0;
                padding-left: 2.5rem;
              }
              li{
                font-size:clamp(14px, 0.25vw + 13.04px, 16px);
                list-style: disc;
                @media screen and (min-width: 769px) {
                  font-size:clamp(16px, 1.97vw + 8.61px, 20px);
                }
              }
            }
          }
      }
    }
  }
}
.constituent{
  .inner{
    .sec-title{
          text-align: center;
          margin: 0 auto;
          display: table;
          &::after{
          content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .map {
         width: 100%;
         margin-top: calc(50 / 1160 * 100%);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  .map-inner {
    width: 1180px;
    height: 846.59px;
    margin: 0 auto;
    position: relative;
    display: block;
    .woman{
      position: absolute;
                             top: 140px;
                        left: 0;
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 1rem;
                        div{
                          font-size:clamp(18px, 0.99vw + 14.27px, 26px);
                          font-weight: 600;
                        } 
      img{
        width: 100%;
        height: 100%;
        max-width: 210px;
        object-fit: contain;
      }
    }
p{
  width: 100%;
  height: 100%;
  aspect-ratio: 80.58 / 61.39;
  max-height: 61.39px;
  max-width: 80.58px;
  font-size: 1.4rem;
  position: absolute;
  a{
    color: #3584CE;
    font-weight: 600;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: flex;
  justify-content: center;
  align-items: center;
  }
  &.to{
    background: url(../img/home/map-hs.png) no-repeat center center / contain;
  }
  &.kat{
    background: url(../img/home/map-ts.png) no-repeat center center / contain;
    a{
    color: #31C177;
    }
  }
  &.chb{
    background: url(../img/home/map-cs.png) no-repeat center center / contain;
    a{
    color: #31C142;
    }
  }
  &.chbh{
    background: url(../img/home/map-ch.png) no-repeat center center / contain;
    a{
    color: #31C142;
    }
  }
  &.kas{
    background: url(../img/home/map-ks.png) no-repeat center center / contain;
    a{
    color: #C1BA31;
    }
  }
  &.kasw{
    background: url(../img/home/map-kw.png) no-repeat center center / contain;
    aspect-ratio: 165.75 / 61.37;
  max-height: 61.37px;
  max-width: 165.75px;
    a{
    color: #C1BA31;
    }
  }
  &.chg{
    background: url(../img/home/map-ns.png) no-repeat center center / contain;
    a{
    color: #C18531;
    }
  }
  
  &.chgh{
    background: url(../img/home/map-nh.png) no-repeat center center / contain;
        aspect-ratio: 80.92/ 126.18;
  max-height: 126.18px;
  max-width: 80.92px;
    a{
    color: #C18531;
    }
  }
  &.sh{
    background: url(../img/home/map-ss.png) no-repeat center center / contain;
    a{
    color: #C131A2;
    }
  }
  &.ky{
    background: url(../img/home/map-os.png) no-repeat center center / contain;
    a{
    color: #C13131;
    }
  }
  &.kyh{
    background: url(../img/home/map-oh.png) no-repeat center center / contain;
       aspect-ratio: 80.92/ 126.18;
  max-height: 126.18px;
  max-width: 80.92px;
    a{
    color: #C13131;
    }
  }
  &.kyw{
    background: url(../img/home/map-ow.png) no-repeat center center / contain;
                            aspect-ratio: 165.75 / 61.37;
                        max-height: 61.37px;
                        max-width: 165.75px;
    a{
    color: #C13131;
    }
  }
  &.n1{
    background: url(../img/home/map-h.png) no-repeat center center / contain;
     aspect-ratio: 218.7 / 203.84;
  max-height: 203.84px;
  max-width: 218.7px;
  top: 0;
  right: 0;
  }
  &.n2{
    top: calc(203.84px + 18.69px);
  right: 53.87px;
  aspect-ratio: 164.56 / 61.39;
  max-height: 61.39px;
  max-width: 164.56px;
  background: url(../img/home/map-hw.png) no-repeat center center / contain;
  }
  &.n3{
    top: calc(203.84px + 18.69px + 65.69px);
    right: 53.87px;
  }
  &.n4{
    top: calc(203.84px + 18.69px + 65.69px);
    right: 137.87px;
  }
  &.n5{
    top: calc(203.84px + 18.69px + 131.69px);
    right: 53.87px;
  }
  &.n6{
    top: calc(203.84px + 18.69px + 131.69px);
    right: 137.87px;
  }
  &.n7{
    top: calc(203.84px + 216.69px);
  right: 53.87px;
  aspect-ratio: 164.56 / 61.39;
  max-height: 61.39px;
  max-width: 164.56px;
  background: url(../img/home/map-hw.png) no-repeat center center / contain;
  }
  &.n8{
    top:calc(203.84px + 348.69px);
    right: 53.87px;
  }
  &.n9{
    top: calc(203.84px + 282.69px);
    right: 53.87px;
  }
  &.n10{
    top:calc(203.84px + 282.69px);
    right: 137.87px;
  }
  &.n11{
    top:calc(203.84px + 348.69px);
    right: 137.87px;
  }
  &.n12{
   top: calc(203.84px + 414.69px);
   right: 53.87px;
   background: url(../img/home/map-th.png) no-repeat center center / contain;
   aspect-ratio:80.58/ 125.71;
    max-height: 125.71px;
max-width: 80.58px;
  }
  &.n13{
                            top: calc(203.84px + 414.69px);
    right: 137.87px;
  }
  &.n14{
    top:calc(202.84px + 480.69px);
    right: 137.87px;
  }
  &.n15{
                            top: calc(203.84px + 216.69px);
                            right: 223.87px;
  }
  &.n16{
    top: calc(203.84px + 216.69px);
  right: 309.87px;
  }
  &.n17{
    top: calc(203.84px + 216.69px);
    right: 395.87px;
  }
  &.n18{
   top: calc(203.84px + 282.69px);
                        right: 395.87px;
  }
  &.n19{
    top: calc(203.84px + 414.69px);
    right: 223.87px;
  }
  &.n20{
   aspect-ratio:80.58/ 125.71;
    max-height: 125.71px;
max-width: 80.58px;
                        top: calc(203.84px + 282.69px);
                        right: 223.87px;

  }
  &.n21{
   aspect-ratio:80.58/ 125.71;
    max-height: 125.71px;
max-width: 80.58px;
                        top: calc(203.84px + 282.69px);
                        right: 309.87px;

  }
  &.n22{
    top:calc(203.84px + 479.69px);
    right: 223.87px;
  }
  &.n23{
    top: calc(203.84px + 414.69px);
                            right: 309.87px;
  }
  &.n24{
    top: calc(203.84px + 414.69px);
    right: 395.87px;
  }
  &.n25{
                           top: calc(203.84px + 347.69px);
                        right: 395.87px;
  }
  &.n26{
  top: calc(203.84px + 347.69px);
                        right: 481.87px;
  }
  &.n27{
    top: calc(203.84px + 414.69px);
                       right: 567.87px;
  }
  &.n28{
 top: calc(203.84px + 347.69px);
                        right: 567.87px;
  }
  &.n29{
    top: calc(203.84px + 414.69px);
                        right: 481.87px;
  }
  &.n30{
                           top: calc(203.84px + 479.69px);
                                               right: 481.87px;
  }
  &.n31{
  top: calc(203.84px + 347.69px);
                        right: 653.87px;
  }
  &.n32{
                        top: calc(203.84px + 347.69px);
                        right: 739.87px;
  }
  &.n33{
                         top: calc(203.84px + 414.69px);
                        right: 653.87px;
  }
  &.n34{
    top: calc(203.84px + 414.69px);
  right: 739.87px;
  }
  &.n35{
                        top: calc(203.84px + 349.69px);
                        right: 824.87px;
  }
  &.n36{
  top: calc(203.84px + 554.69px);
                        right: 697.87px;
  }
  &.n37{
                        top: calc(203.84px + 488.69px);
                        right: 697.87px;
  }
  &.n38{
                        top: calc(203.84px + 488.69px);
                        right: 783.87px;
  }
  &.n39{
                        top: calc(203.84px + 554.69px);
                        right: 783.87px;
  }
  &.n40{
                        top: calc(203.84px + 349.69px);
                        right: 1010.87px;
  }
  &.n41{
                        top: calc(203.84px + 349.69px);
                        right: 1096.87px;
  }
  &.n42{
                        top: calc(203.84px + 415.69px);
                        right: 1096.87px;
  }
  &.n43{
                        top: calc(203.84px + 415.69px);
                        right: 1010.87px;
  }
  &.n44{
top: calc(203.84px + 349.69px);
                        right: 924.87px;
  }
  &.n45{
                        top: calc(203.84px + 415.69px);
                        right: 924.87px;
  }
  &.n46{
                        top: calc(203.84px + 481.69px);
                        right: 1010.87px;
  }
  &.n47{
                        top: calc(203.84px + 559.69px);
                        right: 1096.87px;
  }
}
        }
        
}
.select{
          text-align: center;
          margin:  calc(100 / 1160 * 100%) auto 0;
          select{
            border: solid 1px var(--base);
            padding: 1rem;
            border-radius: 15px;
            width: 100%;
            max-width: 200px;
            margin: 0 auto;
          }
        }
}
 .quarter{
 &.exclude02{
  background: linear-gradient(to bottom, var(--base) 50%, var(--green-dark) 50%);
 }
 }
}
.contact{
  .inner{
    .title{
      margin-top: 0;
      &::after{
        display: none;
      }
    }
}
}
}