/*トップページ*/

/*ヒーローイメージ*/

.head-contents {
  flex: 1;
  height: 432px;
  width: 100%;
  align-items: center;
  padding: 0 var(--xl1);
  box-sizing: border-box;
  gap: var(--m);
  max-width: 1100px;
}

.hero-pc{
  display:none; 
  position: relative;
  width: 100%;
  height: 334px; 
  overflow: hidden;
}

.hero-img {
  height: 100%;;
  border-radius: var(--xs2);
  width: 100%;
  object-fit: cover; 
}

.logo {
  position: absolute;
  top: 122px; 
  left: 36px; 
  width: 516px; 
  height: auto; 
}

.hero-img-sp {
  display:none; 
  height: 340px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
}

/*PC表示*/

@media screen and (min-width: 767px) {

  .hero-pc {
    display:inline; 
  }

}

/*SP表示*/

@media screen and (max-width: 768px) {

  .head-contents{
    padding: 0 ;
    height: 100%;
  }
  .hero-img-sp {
    display: inline;
    max-width: 100%;
    height: auto;
  }

}

/*お知らせ*/

.head-contents,
.news {
  flex-direction: column;
}

.news {
  align-self: stretch;
  align-items: flex-end;
  gap: var(--xs1);
}

.news-top,
.news-contents__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-content: center;
}

.news-top {
  align-self: stretch;
  border-radius: var(--xl5);
  background-color: var(--surfase-primary);
  border: 1px solid var(--border-low-emphasis);
  padding: var(--m);
  gap: 12px 16px;
}

.news-contents__top {
  gap: 16px 8px;
  cursor: pointer;
  text-align: center;
  font-size: var(--label-small-size);
  overflow: hidden;
}

.news-top,
.news-contents__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-content: center;
}

.news-contents__list {
  border-radius: var(--xs1);
  gap: 16px 8px;
  cursor: pointer;
  text-align: center;
  font-size: var(--label-medium-size);
  overflow: hidden;
}

.b {
  position: relative;
  letter-spacing: 0.5px;
  line-height: 110%;
  display: inline-block;
}

.icon-wrapper-parent {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--xs);
  min-width: 90px;
}

.delivery-date {
  position: relative;
  letter-spacing: 0.5px;
  line-height: 110%;
  display: inline-block;
  font-size: var(--label-xsmall-size);
}

.news-title {
  flex: 0 1 auto;
  position: relative;
  letter-spacing: 0.5px;
  line-height: 110%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head-contents,
.news,
.to-list {
  display: flex;
  justify-content: flex-start;
}

/*SP表示*/

@media screen and (max-width: 768px) {

  .news {
    padding: 0 var(--m);
  }
  .icon-wrapper-parent{
    display: none;
  }
  .news-top{
    display: flex;
    border-radius: var(--br-5xs);
  }
  .news-contents__top{
    display: inline-block;
    text-align: left;
  }
  .delivery-date {
    padding-bottom: var(--s);
  }
  .divider5{
    display: none;
  }

}


/*地域選択*/

/*地図から選択*/

.mappc {
  display:none; 
  width: 649.5px;
  position: relative;
  height: 680px;
  text-align: left;
  font-size: var(--label-small-size);
  color: var(--text-link);
}

.yamanashi-map-pc {
  position: absolute;
  height: 97.24%;
  width: 98.54%;
  top: 0;
  right: 1.46%;
  bottom: 2.76%;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.mapsp {
  display:none; 
  width: 280px;
  position: relative;
  height: 417px;
  text-align: center;
  font-size: var(--label-small-size);
  color: var(--text-link);
}

.yamanashi-map-sp {
  position: absolute;
  height: 97.24%;
  width: 98.54%;
  top: 0;
  right: 1.46%;
  bottom: 2.76%;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.map-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease-in-out;
}

.hidden {
  opacity: 0;
}

.open-link,
.areas {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.areas {
  position: absolute;
  border-radius: var(--xs2);
  justify-content: center;
  padding: var(--xs1) var(--m);
  gap: var(--xs);
}

  .hokuto {
    top: 101px;
    left: 115px;
  }
  .nirasaki {
    top: 196px;
    left: 108px;
  }
  .minami-alps {
    top: 265px;
    left: 67px;
  }
  .fujikawa {
    top: 322px;
    left: 101px;
  }
  .hayakawa {
    top: 419px;
    left: 57px;
  }
  .minobu {
    top: 466px;
    left: 148px;
  }
  .ichikawamisato {
      top: 340px;
    left: 188px;
  }
  .chuo {
    top: 293px;
    left: 198px;
  }
  .showa {
    top: 261px;
    left: 201px;
  }
  .kai {
    top: 217px;
    left: 179px;
  }
  .kofu {
    top: 182px;
    left: 228px;
  }
  .yamanashi {
    top: 140px;
    left: 291px;
  }
  .fuefuki {
    top: 281px;
    left: 299px;
  }
  .fujikawaguchiko {
    top: 371px;
    left: 285px;
  }
  .koshu {
    top: 204px;
    left: 369px;
  }
  .tabayama {
    top: 115px;
    left: 448px;
  }
  .kosuge {
    top: 163px;
    left: 474px;
  }
  .uenohara {
    top: 263px;
    left: 554px;
    padding: 0;
  }
  .otsuki {
    top: 245px;
    left: 458px;
  }
  .tsuru {
    top: 318px;
    left: 454px;
  }
  .nishikatsura {
    top: 352px;
    left: 408px;
  }
  .oshino {
    top: 393px;
    left: 412px;
  }
  .doshi {
    top: 373px;
    left: 520px;
    padding: var(--xs1) var(--m);
  }
  .yamanakako {
    top: 427px;
    left: 460px;
  }
  .narusawa {
    top: 415px;
    left: 311px;
  }
  .fujiuyoshida {
    top: 452px;
    left: 342px;
  }
  .nanbu {
    top: 583px;
    left: 153px;
  }
  .yamanashiken {
    top: 590px;
    left: 366px;
  }
  .kumiai {
    top: 576px;
    left: 490px;
  }

/*PC表示*/

@media screen and (min-width: 768px) {

  .mappc {
    display:inline; 
  }

}

/*SP表示*/

@media screen and (max-width: 768px) {

  .mapsp {
    display:inline; 
  }
  .chuhoku{
    top: 45px;
    left: 17px;
  }
  .kyounan{
    top: 170px;
    left: 17px;
  }
  .kyotou{
    top: 70px;
    left: 110px;
  }
  .fujitobu{
    top: 120px;
    left: 130px;
  }
  .yamanashiken {
    top: 337px;
    left: 17px;
  }
  .kumiai {
    top: 324px;
    left: 122px;
  }

}

  /*一覧から選択*/

.frame-group {
  align-self: stretch;
  gap: var(--xs1);
}

.icon-wrapper-wrapper {
  border-radius: var(--full);
  background-color: var(--text-high-emphasis);
  padding: var(--xs);
}

.frame-group,
.icon-wrapper-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;  
}

.th {
  flex: 1;
  position: relative;
  letter-spacing: 0.25px;
  line-height: 160%;
}

.itemtsth {
  align-self: stretch;
  width: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--xs1) var(--m);
  box-sizing: border-box;
}

.areas-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: var(--body-medium-size);
  gap: var(--xs);
}

.itemtstl {
  align-self: stretch;
  align-items: center;
}

.itemtstd {
  flex: 1;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--xs1) var(--m);
  gap: var(--s) var(--m);
  color: var(--text-link);
}

.itemtstd,
.itemtstl {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/*登録方法*/

.registration-card {
  width: 100%;
  max-width: 338px;
  border-radius: var(--m1);
  background-color: var(--surfase-primary);
  padding: var(--xl2);
  box-sizing: border-box;
  gap: var(--m);
}

.container,
.registration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.p {
  margin: 0;
}

.frame-parent,
.list-table {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.list-table {
  align-items: center;
  justify-content: center;
  text-align: left;
}

.frame-parent {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--m);
}

.container,
.description{
  position: relative;
  font-size: var(--label-medium-size);
  letter-spacing: 0.25px;
  line-height: 160%;
}

.icon-envelope {
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/*サービスリンク*/

.service {
  flex: 1;
  border-radius: var(--s);
  background-color: var(--surfase-secodary);
  justify-content: flex-start;
  padding: var(--m) var(--xl);
  box-sizing: border-box;
  gap: var(--xs1);
  min-width: 280px;
  max-width: 340px;
  transition: background-color 0.3s;
}

.service:hover{
  background-color: var(--surfase-tertiary);
}

.service-list {
  align-self: stretch;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--m);
  text-align: left;
  font-size: var(--label-medium-size);
  color: var(--color-black);
}

.service,
.service-list {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemsservice-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
} 

.logo-icon-mini {
  height: 40px;
  width: 80px;
  position: relative;
  object-fit: cover;
}

.label-xsmall {
  font-size: var(--label-xsmall-size);
  letter-spacing: 0.5px;
  line-height: 110%;
  color: var(--text-low-emphasis);
  display: inline-block;
  align-self: stretch;
  position: relative;
  letter-spacing: 0.25px;
  line-height: 160%;
}