@charset "UTF-8";

/*===================
====== home.css =====
=====================*/

/*-------------
 title
---------------*/

.title-area {
   margin: 25px auto 30px;
}
@media screen and (min-width: 768px) {
   .title-area {
      margin: 50px auto 60px;
   }
}
@media screen and (min-width: 900px) {
   .title-area {
      display: flex;
      align-items: end;
      justify-content: space-between;
   }
}
@media screen and (min-width: 1024px) {
   .title-area {
      align-items: center;
      margin: 80px auto 28px;
   }
}

.main-title {
   margin-bottom: 30px;
   max-width: 840px;
   transform: translateX(1%);
}
@media screen and (min-width: 768px) {
      .main-title {
         margin-bottom: 60px;
         width: 60%;
      }
}
@media screen and (min-width: 900px) {
   .main-title {
         margin-bottom: 0;
   }
}
@media screen and (min-width: 1024px) {
   .main-title {
      display: flex;
      align-items: center;
      gap: 4%;
   }
}

.main-title__logo {
   width: 12%;
   min-width: 72px;
}
.main-title__txt {
   display: inline-block;
   letter-spacing: .05em;
}
.main-title__txt h1 {
   padding-top: .5em;
   font-size: clamp(2rem, 3.6vw, 2.8rem);
   font-weight: 700;
}
.main-title__txt h1 span {
   display: block;
   margin-bottom: .3em;
   font-size: 72%;
}
.main-title__txt h1 + span {
   display: inline-block;
   margin-top: 1em;
   color: #daa60b;
   font-size: clamp(1.4rem, 2.2vw, 1.6rem);
   line-height: 1.2;
}
.main-title__txt h1 + span span {
   padding-left: .7em;
   font-size: 90%;
   font-weight: 700;
   white-space: nowrap;
}

/*-------------
 videos
---------------*/

.videos-link {
   display: block;
   width: 100%;
   padding: 1.4em 4em 1.4em 2.2em;
   color: var(--white);
   font-size: clamp(1.6rem, 2.2vw, 1.8rem);
   border-radius: 8px;
   background: var(--primary-accent) url(/furano/assets/images/common/window-icon.svg) no-repeat right 1.5em center / 1.1em;
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 900px) {
   .videos-link {
      width: 36%;
      max-width: 360px;
   }
}

/*-------------
 hero
---------------*/
.hero {
   position: relative;
   overflow: hidden;
   width: 100%;
   aspect-ratio: 3 / 2;
   min-height: 280px;
}
@media screen and (min-width: 1024px) {
   .hero {
      aspect-ratio: 16 / 6;
   }
}

.hero::before,
.hero::after {
   display: block;
   position: absolute;
   color: #fff;
   font-family: "Yu Mincho", serif;
   z-index: 3;
}

.hero::before {
   content: "思いやりと想像力こそ奉仕の源";
   top: 42%;
   width: 100%;
   text-align: center;
   font-size: clamp(2rem, 4vw, 5rem);
   letter-spacing: .08em;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero::after {
   content: "撮影者：Shino Sugiyama";
   bottom: 3%;
   right: 2%;
   font-size: clamp(1.2rem, 2vw, 1.8rem);
   font-style: italic;
}
@media screen and (max-width: 360px) {
   .hero::after {
      top: 50%;
      transform: translateY(30vw);
   }
}

.hero-slider {
   position: relative;
   width: 100%;
   height: 80vw;
}
@media screen and (max-width: 360px) {
   .hero-slider {
      height: 100vw;
   }
}
@media screen and (min-width: 1024px) {
   .hero-slider {
      height: 100%;
   }
}

.hero-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transform: scale(1);
   transition: opacity 2.5s ease, transform 6s ease;
   z-index: 1;
}
.hero-slide:first-of-type {
   object-position: 50% 80%;
}
.hero-slide:nth-of-type(2) {
   object-position: 50% 55%;
}
.hero-slide:nth-of-type(3) {
   object-position: 50% 45%;
}
.hero-slide:last-of-type {
   object-position: 50% 20%;
}
.hero-slide.active {
   opacity: 1;
   z-index: 2;
   transform: scale(1.05);
}

.rate {  
   margin-top: 46px;
   text-align: center;
   color: var(--primary);
   line-height: 1.4;
}
@media screen and (min-width: 768px) {
   .rate {
      margin-top: 70px;
   }
}

.rate p:first-child {
   display: inline-block;
   margin-bottom: 12px;
   padding: 2px 0 2px 2.1em;
   font-size: clamp(1.6rem, 2vw, 2rem);
   background: url(/furano/assets/images/home/rate-icon.svg) no-repeat left center / 1.5em;
}

.rate p:nth-child(2) {
   font-size: clamp(2.4rem, 3.8vw, 3.8rem);
   font-weight: 900;
}

.access-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 5px;
   margin: 50px auto 40px;
}
@media screen and (min-width: 768px) {
   .access-wrap {
      gap: 20px;
      margin: 60px auto 50px;
   }
}

.access-item:first-child {
   width: 50%;
   max-width: 200px;
}
.access-item:last-child {
   width: 80%;
   max-width: 300px;
}

.access-item figure {
   vertical-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}
@media screen and (min-width: 768px) {
   .access-item figure {
      height: 120px;
   }
}

/*--------------
 link
 --------------*/

.section-title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: .5em;
    font-size: clamp(1.8rem, 2.2vw, 2.2rem);
    font-weight: 700;
    color: var(--primary);
}

.section-title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--primary-light);
}

.links .section-title {
   padding-left: 1.6em;
   background: url(/furano/assets/images/home/links-icon.svg) no-repeat left center / 1em;
}

.index-title {
   display: inline-block;
   margin: 8px 0 12px;
   padding: 10px 16px;
   color: var(--white);
   border-radius: 999px;
   font-size: clamp(1.2rem, 1.4vw, 1.4rem);
   font-weight: 700;
}
.index-title.world {
   background: var(--primary-accent);
}
.index-title.district {
   background: #daa60b;
}

.table {
   display: block;
   margin-bottom: 30px;
   gap: 20px;
}

.table table {
   width: 100%;
   background: var(--white);
   border-radius: 18px;
   box-shadow: 0 8px 32px rgba(14, 43, 79, 0.077);
   overflow: hidden;
   border-collapse: collapse;
}

.table table tbody tr {
   border-bottom: 1px solid var(--border);
}

.table table tbody tr:last-child {
   border-bottom: none;
}

.table table td a {
   display: block;
   padding: 18px 22px;
   text-decoration: none;
}

.table.table-02 table,
.table.table-03 table {
   margin-bottom: 12px;
}

@media screen and (min-width: 768px) {
   .table {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
   }

   .table.table-01 table {
      width: 100%;
   }

   .table.table-02 table,
   .table.table-03 table {
      width: calc(50% - 10px);
   }

   .table.table-02,
   .table.table-03 {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      gap: 20px;
   }

   .table.table-02 table,
   .table.table-03 table {
      margin-bottom: 0;
   }
}