/*************************************************************************/
/* public/RT/css/rakuten_travel_top.css */
/*************************************************************************/

/*
*  変数
*----------------------------*/
:root {
  --fontFamily_base: "Noto Sans JP", sans-serif;
  ;
  --fontFamily_sub: "Noto Serif JP", serif;
  --color_main: #2859AF;
  --color_sub: #B9C8E3;
  --color_accent: #CC9E09;
  --color_accent__02: #E6B71B;
  --color_font: #000;
  --gradient_main: linear-gradient(#24648e 0%, #1f435c 100%);
}

/*
*  画像用汎用Style
*----------------------------*/
/* 標準 */
.imgDefault {
  display: block;
  width: 100%;
  height: auto;
}

/* トリミング系 */
.imgCover {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.imgContain {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.imgScaleDown {
  display: block;
  object-fit: scale-down;
  width: 100%;
  height: 100%;
}

/*
*  TEXT ALIGN
*----------------------------*/
.txtCenter {
  text-align: center;
}

.txtLeft {
  text-align: left;
}

.txtRight {
  text-align: right;
}

.txtJustify {
  text-align: justify;
}

/*
*  LIST
*----------------------------*/
.com-list-ul {
  display: grid;
  grid-template-columns: 100%;
  gap: 0.5em;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fontFamily_base);
  font-size: 1rem;
  font-style: inherit;
  font-weight: inherit;
}

.com-list-ul>li {
  position: relative;
  display: block;
  padding-left: 1.0em;
  line-height: 1.6em;
}

.com-list-ul>li:last-child {
  margin-bottom: 0;
}

.com-list-ul>li::before {
  content: "";
  position: absolute;
  width: 0.35em;
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: var(--color_main);
  top: 0.7em;
  left: 0;
  border-radius: 50%;
}

/*
*  SUB SECTION
*----------------------------*/
.com-subSection {
  margin: 100px 0 0;
}

.com-section-hl {
  position: relative;
  display: block;
  width: 100%;
  color: var(--color_accent);
  font-family: var(--fontFamily_sub);
  font-size: 35px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
  padding: 0 0 0.25em;
  border-bottom: 2px solid var(--color_main);
  margin: 1.5em 0;
}

.com-section-hl:first-child {
  margin-top: 0;
}

.com-section-hl:last-child {
  margin-bottom: 0;
}

/* TOP 共通パーツ
============================================================ */
.top {
  box-sizing: border-box;
}

.top * {
  box-sizing: border-box;
}

.top-legacyContentsContainer {
  width: 100%;
  max-width: 1190px;
  padding: 0 0 0;
  margin: 0 auto 0;
}

.top .top-contentsContainer {
  width: 100%;
  max-width: calc(1190px + (10px * 2));
  padding: 0 10px 0;
  margin: 0 auto 0;
}

.top .top-contentsContainer a {
  transition: opacity 0.2s ease-in;
}
.top .top-contentsContainer a:hover {
  opacity: 0.7;
}

/* 既存パーツ調整用
============================================================ */
.slide {
  height: 175px;
  top: 0;
  margin-top: -210px;
  margin-bottom: 0;
}

.i_slide {
  overflow: hidden;
}

.i_header {}

.i_header .logo {
  margin: 0 0 0;
  padding: 20px 0 20px 10px;
}

.i_header .logo>img {
  display: block;
  width: 100%;
  height: auto;
}

/* INFORMATION
============================================================ */
.top-infofmation {
  display: block;
  font-family: var(--fontFamily_base);
}

.top-infofmation .top-infofmation-contents {}

/* Articles */
.top-infofmation .top-infofmation-infofmationArticles {
  display: grid;
  grid-template-columns: 100%;
  gap: 40px;
  max-height: 250px;
  overflow-y: auto;
}

.top-infofmation .top-infofmation-infofmationArticles .infofmationArticle {
  position: relative;
  border-bottom: 1px solid var(--color_sub);
  padding-bottom: 40px;
}

.top-infofmation .top-infofmation-infofmationArticles .infofmationArticle:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.top-infofmation .top-infofmation-infofmationArticles .infofmationArticle .infofmationArticle-title {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4em;
  text-align: center;
  margin: 0 0 1.4em;
}

.top-infofmation .top-infofmation-infofmationArticles .infofmationArticle .infofmationArticle-content {}

.top-infofmation .top-infofmation-infofmationArticles .infofmationArticle .infofmationArticle-content>* {
  margin: 1.5rem 0;
}

.top-infofmation .top-infofmation-infofmationArticles .infofmationArticle .infofmationArticle-content>*:first-child {
  margin-top: 0;
}

.top-infofmation .top-infofmation-infofmationArticles .infofmationArticle .infofmationArticle-content>*:last-child {
  margin-bottom: 0;
}

/* Banners */
.top-infofmation .top-infofmation-banners {
  display: grid;
  grid-template-columns: 100%;
  gap: 14px;
  width: 100%;
  max-width: 1000px;
  margin: 50px auto 0;
}

.top-infofmation-bannersGroup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
}

.top-infofmation .top-infofmation-banners .banner {
  display: block;
  width: 100%;
}

.top-infofmation .top-infofmation-banners .banner>img {
  display: block;
  width: 100%;
  height: auto;
}

/* RECOMMENDATION
============================================================ */
.top-recommendation {
  font-family: var(--fontFamily_base);
}

.top-recommendation .top-recommendation-points {
  display: grid;
  grid-template-columns: 100%;
  gap: 30px 0;
  width: 100%;
}

.top-recommendation .top-recommendation-points .pointSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 0 15px;
  width: 100%;
  padding: 15px;
  background: var(--gradient_main);
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-pict {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(50%, 570px);
  height: auto;
  aspect-ratio: 570/370;
  overflow: hidden;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-img {}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  padding: 30px 20px 30px;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt>* :first-child {
  margin-top: 0;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt>* :last-child {
  margin-bottom: 0;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txtInner {
  width: min(100%, 500px);
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__hl {
  display: grid;
  grid-template-columns: 50px auto;
  font-family: var(--fontFamily_sub);
  border: 1px solid var(--color_accent__02);
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__hl .subTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-height: 80px;
  background-color: var(--color_accent__02);
  color: #235C82;
  font-weight: 500;
  padding: 0.5em;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__hl .subTxt .subTxt__point {
  font-size: 11px;
  line-height: 1.0em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__hl .subTxt .subTxt__num {
  font-size: 26px;
  line-height: 1.0em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__hl .manTxt {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  color: var(--color_accent__02);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
  padding: 0.5em;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__catch {
  display: block;
  color: #fff;
  font-family: var(--fontFamily_sub);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5em;
  letter-spacing: 0.03em;
  text-indent: 0.03em;
  margin: 25px 0 0;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__list {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  margin: 20px 0 0;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__list>li {}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__list>li::before {
  background-color: #fff;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__list>li>small {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  margin: 0.5em;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__notice {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.7em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  margin: 1.0em 0;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__moreBtn {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 150px;
  color: var(--color_accent__02);
  font-family: var(--fontFamily_sub);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-decoration: none;
  /* background-color: var(--color_accent__02); */
  border-bottom: 1px solid var(--color_accent__02);
  margin: 30px 0 0 auto;
  padding: 0 1.5em 0.5em 0.25em;

}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__moreBtn::after {
  content: "";
  position: absolute;
  display: block;
  width: 0.4em;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color_accent__02);
  border-bottom: none;
  border-left: none;
  top: 50%;
  right: 0.4em;
  transform: translate(0, -50%) rotate(45deg);
  transition: right 0.15s ease-in;
}

.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__moreBtn:hover {
  opacity: 1 !important;
}
.top-recommendation .top-recommendation-points .pointSection .pointSection-txt__moreBtn:hover::after {
  right: 0;
}

/* FOOTER
============================================================ */
.top-footer {
  font-family: var(--fontFamily_base);
  padding: 0 0 80px;
}

.top-footer-info {}

.top-footer-info .top-footer-info-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0 5px;
  width: 100%;
}

.top-footer-info .top-footer-info-logo .top-footer-info-logo__icon {
  display: block;
  width: 100%;
  max-width: 75px;
}

.top-footer-info .top-footer-info-logo .top-footer-info-logo__txt {
  font-family: var(--fontFamily_sub);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.0em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
}

.top-footer-info .top-footer-info-address {
  font-style: normal;
  font-size: 18px;
  line-height: 1.6em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
  margin: 5px 0 0;
}

.top-footer-info .top-footer-info-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 350px;
  background-color: var(--color_main);
  margin: 20px auto 0;
  padding: 15px 15px;
}

.top-footer-info .top-footer-info-contactInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 280px;
}

.top-footer-info .top-footer-info-contact .top-footer-info-contact-hl {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.0em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
  border-bottom: 1px solid #fff;
  padding: 0 0 12px;
  margin: 0 0 0;
}

.top-footer-info .top-footer-info-contact .top-footer-info-contact-tel {
  position: relative;
  display: block;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.0em;
  letter-spacing: 0.07em;
  text-indent: 0.07em;
  text-decoration: none;
  padding: 0 0 0 1.0em;
  margin: 8px 0 0;
}

.top-footer-info .top-footer-info-contact .top-footer-info-contact-tel::before {
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 100%;
  top: 0.05em;
  left: 0;
  background: url(../images/home/icon_tel.svg) no-repeat center / contain;
}

.top-footer-info .top-footer-info-access {
  display: block;
  margin: 30px 0 0;
}

.top-footer-info .top-footer-info-access .top-footer-info-access-hl {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
}

.top-footer-info .top-footer-info-access .top-footer-info-access-description {
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: 0.0em;
  text-indent: 0.0em;
  text-align: center;
  margin: 9px 0 0;
}

.top-footer-map {
  position: relative;
  display: block;
  width: 100%;
  height: 400px;
  margin: 30px 0 0;
  overflow: hidden;
}

.top-footer-map>iframe {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}