@charset "UTF-8";
/* CSS Document */

/* 定義 */
:root{
  --white: var(--color-brand-white);
  --primary: var(--color-brand-primary);
  --secondary: var(--color-accent-1);
  --black: var(--color-brand-black);
  --gray:var(--color-neutral-600);
  --lightteal:var(--color-neutral-lightteal);
  --lightbeige: var(--color-neutral-sand);
  --lightgray: #f8f8f8;
  --border-gray:#cfd4d8;
  --text_size29: 2.9rem;
  --text_size28: 2.8rem;
  --text_size27: 2.7rem;
  --text_size26: 2.6rem;
  --text_size25: 2.5rem; 
  --text_size24: 2.4rem;
  --text_size23: 2.3rem;
  --text_size22: 2.2rem;
  --text_size21: 2.1rem;
  --text_size20: 2rem;
  --text_size19: 1.9rem;
  --text_size18: 1.8rem;
  --text_size17: 1.7rem;
  --text_size16: 1.6rem;
  --text_size15: 1.5rem; 
  --text_size14: 1.4rem;
  --text_size13: 1.3rem;
  --text_size12: 1.2rem;
  --text_300: 300;
  --text_400: 400;
  --text_500: 500;
  --text_700: 700;
  --text_900: 900;
  --text_heightL: 1.8;
  --text_heightM: 1.6;
  --text_heightS: 1.5;
  --text_center:center;
  --text_left:left;
  --text_right:right;
}


.text_bold{
  font-weight: var(--text_700);
}

.text_underline{
  text-decoration: underline;
}


@media screen and (max-width: 767px){
  a[id] {
    position: relative;
    display: block;
    height: 72px;          /* ヘッダー高さ */
    margin-top: -72px;     /* 相殺して実レイアウトは崩さない */
    pointer-events: none;
  }

}

body{
  min-width: auto;
  background-color: var(--lightgray);
}


/* PC、スマートフォン表示分岐 */
.pcView {
  display: block;
}
.pcOnly {
  display: block;
}
.spView {
  display: none;
}
.spOnly {
  display: none;
}
@media only screen and (max-width: 767px) {
  .pcView {
    display: none;
  }
  .pcOnly {
    display: none;
  }
  .spView {
    display: block;
  }
  .spOnly {
    display: block;
  }
}

h1, h2, h3, h4, h5, h6 {
   text-transform: none; 
}

.explore_header{
  font-size:3rem;
  color: var(--color-brand-primary);
  font-weight: 700;
  margin: 30px 0 50px;

}
.explore_wrapper{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 70px;
  padding: 100px 20px 30px;
}
.explore_inner{

}
.explore_block{

}
.explore_area{
  width: 1000px;
  margin: 0 auto ;
  padding: 100px 0 30px;
  font-size: 2rem;
  color: var(--color-brand-primary);
  font-weight: 500;
}

.explore_column{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.explore_box{
  width: calc(100% / 3 - 10px);
  display: flex;

}

.explore_box:hover{
  text-decoration: none;
  background-color: #ecf8fa;
  /* -webkit-filter: opacity(.8);
  filter: opacity(.8); */
}

.explore_item:hover,.explore_item:active,.explore_item:focus,.explore_item:focus-visible{
  /* -webkit-filter: opacity(.8);
  filter: opacity(.8); */
  background-color: #ecf8fa;
  outline:none;
}

.explore_item{
  padding: 10px;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 1px 1px #ccc;
  box-shadow: 1px 1px 1px 1px #ccc;
  border-radius: 3px;
}  

.explore_image{
  width:100%;
}

.explore_image img{
  width:100%;
}

.explore_details{
  display:flex;
  flex-direction: column;
}

.explore_name{
  font-weight: 700;
  font-size:1.5rem;
  line-height:1.6;
  color:var(--color-neutral-100);
  margin: 10px 0 0;
}

.explore_location{
  font-weight: 500;
  font-size:1.3rem;
  line-height:1.6;
  color:var(--color-neutral-100);
  margin: 5px 0 0;
}

.area_header{
  font-weight: normal;
  font-size: 2rem;
  color: #fff;
  margin: 0;
  padding: 20px;
  background-color: var(--color-brand-primary);
}

.area_header::before {
  content: "\f041";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: bold;
  text-decoration: inherit;
  color: var(--color-brand-white);
  padding-right: 1.5rem;
  font-size: 2rem;
}

.area_header span{
  font-weight: bold;
}

.explore_ankerbox{
  padding: 20px;
  background-color: var(--color-brand-white);
}

.explore_ankercolumn{

}

.explore_arealist {
  column-count: 3; /* PC：3列 */
  column-gap: 16px;
  list-style: none;
  padding: 0;
  margin:0;
}

/* カラム内で要素が分断されるのを防ぐ */
.explore_arealist li {
  break-inside: avoid;
  margin:0 0 14px;
}

.scroll-link{
  font-weight:400;
  font-size: 1.5rem;
}

.explore_arealist li:nth-child(10n) {
  break-after: column;
}

.explore_arealist li .scroll-link{
  font-weight:400;
  font-size: 1.6rem;
}

.uppercase{
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .explore_header{
    font-size:3rem;
    color: var(--color-brand-primary);
    font-weight: 700;
    margin: 30px 0 30px;

  }
  .explore_wrapper{
    width: 100%;
    margin: 0 auto 70px;
    padding: 100px 15px 30px;
  }
  .explore_inner{

  }
  .explore_block{

  }
  .explore_area{
    width: 100%;
    margin: 0 auto ;
    padding: 80px 0 30px;
    font-size: 2.5rem;
    color: var(--color-brand-primary);
    font-weight: 500;
  }

  .explore_column{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto;
  }

  .explore_box{
    width: 100%;
    display: flex;

  }

  .explore_box:hover{
    text-decoration: none;
    background-color: #ecf8fa;
    -webkit-filter: opacity(.8);
    filter: opacity(.8);
  }

  .explore_item:hover{
    -webkit-filter: opacity(.8);
    filter: opacity(.8);
  }

  .explore_item{
    padding: 10px;
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
    border-radius: 3px;
  }  

  .explore_image{
    width:100%;
  }

  .explore_image img{
    width:100%;
  }

  .explore_details{
    display:flex;
    flex-direction: column;
  }

  .explore_name{
    font-weight: 700;
    font-size:1.8rem;
    line-height:1.6;
    color:var(--color-neutral-100);
    margin: 10px 0 0;
  }

  .explore_location{
    font-weight: 500;
    font-size:1.3rem;
    line-height:1.6;
    color:var(--color-neutral-100);
    margin: 5px 0 0;
  }

  .area_header{
    font-weight: normal;
    font-size: 2rem;
    color: #fff;
    margin: 0;
    padding: 10px;
    background-color: var(--color-brand-primary);
  }

  .area_header::before {
    content: "\f041";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
    color: var(--color-brand-white);
    padding-right: 1.5rem;
    font-size: 2rem;
  }

  .area_header span{
    font-weight: bold;
  }

  .explore_ankerbox{
    padding: 15px;
    background-color: var(--color-brand-white);
  }

  .explore_ankercolumn{

  }

  .explore_arealist {
    column-count: 2; /* SP：2列 */
  }

  .explore_arealist li{
    
  }

  .explore_arealist li a{
    
  }

  .explore_arealist li:nth-child(10n) {
    break-after: auto;
  }

  .scroll-link{
    font-weight:400;
    font-size: 1.4rem;
  }
}

.pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--color-accent-5); /* ピンク */
  color: #fff; /* 白文字 */
  padding: 12px 16px;
  border-radius: 999px; /* 丸ボタン */
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all 0.3s;
}

/* hover */
.pagetop:hover {
  background: var(--color-accent-5);
  transform: translateY(-3px);
  text-decoration:none;
  color: #fff; /* 白文字 */
  /* opacity:0.8; */
}

.pagetop:active,.pagetop:focus,.pagetop:visited{
  color: #fff; /* 白文字 */
  outline: none;
  text-decoration:none;
}