@charset "UTF-8";


/***************  sitemap sub visual *****************/
.sitemap_page {
    background-image: url(../img/sitemap/sub_main_sitemap.jpg);
	position: relative;
}
.hero_sub::before {
	content: '';
	display: inline-block;
	background: rgba(83,198,252, .25);
	background: rgba(0,0,0, .2);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 28px;
}
.hero_sub h2 {
    position: relative;
	}

/***************  sitemap  *****************/

.smap{
	margin-top: 65px;
    margin-bottom: 65px;
}

.smapItem{
  margin-top: 22px;
}

/* ---------- 親：赤い大ボタン ---------- */
.smapBtn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 14px 18px 14px 22px;
  background: #c4001a;
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
}

.smapBtn:hover{
  background: #fff4f5;
  color: #c4001a;
  transition:.2s;
}

.smapBtn__label{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.smapBtn__icon{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  background: #fff;
  position: relative;
}

.smapBtn__icon::before{
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #c4001a;
  border-right: 2px solid #c4001a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%) rotate(45deg);
}
.smapBtn:hover .smapBtn__icon{
  background: #c4001a;
}
.smapBtn:hover .smapBtn__icon::before{
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* ===== 外部リンク：テキスト直後に表示 ===== */

.smapBtn__label.is-external::after{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -2px;
  background: url("../img/new_window_white.png") center / contain no-repeat;
}
.smapBtn:hover .smapBtn__label.is-external::after{
  background: url("../img/new_window.png") center / contain no-repeat;
}


@media (hover:hover){
  .smapBtn:hover{
    filter: brightness(1.03);
  }
}

/* ---------- 子：2列リンク ---------- */
.smapChildren{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  max-width: 1000px;
  margin: 22px auto 0;
}

.smapChildLink,
.sitemapLink{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 22px 32px;

  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: #111;

  border-radius: 4px;
  border-top: 1px solid #9d9d9d;
  border-bottom: 1px solid #9d9d9d;

  transition: .25s;
}

.smapChildLink::after,
.sitemapLink::after{
  content: "→";
  font-size: 18px;
  color: #c70012;
}

@media (hover:hover){
  .smapChildLink:hover,
  .sitemapLink:hover{
    background: #c70012;
    opacity: .85;
    color: #fff;
  }

  .smapChildLink:hover::after,
  .sitemapLink:hover::after{
    color: #fff;
  }
}


/* =============================
  RESPONSIVE
============================= */

@media (max-width: 767px){
  .smapItem {
    margin-top: 15px;
  }

  .smap{
    padding: 0 0 0;
    margin-top: 25px;
    margin-bottom: 0px;
  }

  .smapBtn {
    min-height: 54px;
    padding: 10px 12px 10px 12px;
  }

  .smapBtn__label{
    font-size: 15px;
  }

  .smapChildren{
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }

  .smapChildLink, 
  .sitemapLink {
	padding: 0 10px 10px;
    font-size: 13.5px;
  }

  .smapChildLink::after,
  .sitemapLink::after{
    font-size: 16px;
  }

  .smapBtn__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
  .smapBtn__icon::before {
    left: 45%;
    transform: translate(-50%, -45%) rotate(45deg);
  }
  .smapChildLink, .sitemapLink {
    border-top: 0;
    border-radius: 0;
	}
}