@import url(../../../../css/user/common/swiper-8.4.4.css);
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap");
.ageVerifyModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background: rgba(26, 26, 26, 0.6);
  z-index: 9999;
  padding: 0 16px;
  visibility: hidden;
}

.ageVerifyModal__content {
  padding: 40px;
  background: #FFFFFF;
  border-radius: 10px;
}

.ageVerifyModal__logo {
  display: block;
  width: 267px;
  height: 56px;
  margin: 0 auto 20px;
}

.ageVerifyModal__text {
  font-size: 16px;
  line-height: 24px;
  color: #121112;
  text-align: center;
  margin-bottom: 20px;
}

.ageVerifyModal__btn {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0 16px;
}

.ageVerifyModal__enter, .ageVerifyModal__leave {
  min-width: 225px;
  height: 60px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 4px;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  z-index: 2;
}

.ageVerifyModal__enter em, .ageVerifyModal__leave em {
  font-size: 32px;
  font-family: "din-2014", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.ageVerifyModal__enter::after, .ageVerifyModal__leave::after {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 0;
  height: 100%;
  transition: .5s;
  transform: skewX(50deg);
  z-index: -1;
  background: #D7FDB8;
}

.ageVerifyModal__enter:hover, .ageVerifyModal__leave:hover {
  opacity: 1;
  border: 1px solid #4BA500;
  color: #4BA500;
}

.ageVerifyModal__enter:hover::after, .ageVerifyModal__leave:hover::after {
  width: 150%;
}

.ageVerifyModal__enter {
  background: #4BA500;
  color: #FFFFFF;
  cursor: pointer;
}

.ageVerifyModal__leave {
  background: #FFFFFF;
  border: 1px solid #4BA500;
  color: #4BA500;
}

.ageVerifyModal.show {
  visibility: visible;
}

.is-bodyFixed {
  overflow: hidden;
}

html {
  font-size: calc((100vw / 375) * 10);
}

img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  vertical-align: inherit;
  font-size: 12px;
}

.wrapper {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.g-wrapper {
  background: #fff;
}

.f-index {
  width: 100%;
  word-break: break-all;
}

.f-index .index__head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  padding: 24px 0 27px;
  background-color: #f0f0f0;
}

.f-index .index__headTtl {
  margin-bottom: 11px;
  font-family: "M PLUS 2", sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 52px;
  color: #4BA500;
}

.f-index .index__headTtl .lg {
  font-size: 36px;
}

.f-index .index__headTxt {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
  color: #48484a;
}

.f-index .index__sectionHead {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 24px;
  border-radius: 3px 0 0 3px;
}

.f-index .index__sectionHeadTxt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #1d1f1d;
}

.f-index .index__sectionHeadTxt::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  margin-right: 16px;
  border-radius: 3px 0 3px 3px;
}

.f-index .index__sectionHeadTxt::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 1118px;
  height: 2px;
  background-color: #4ba500;
}

.f-index .index__sectionBtn {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 48px;
  margin: 0 0 0 auto;
  padding: 11px 11px 11px 19px;
  border: 1px solid #111211;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #5ac600;
  box-shadow: 3px 3px 0 #111211;
  transition: 0.3s;
}

.f-index .index__sectionBtn::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 8px;
}

.f-index .index__sectionBtn:hover {
  transform: translate(3px, 3px);
  box-shadow: none;
  opacity: 1;
}

.f-index .index__topSwiper {
  padding: 40px 0;
}

.f-index .index__topSwiperLink {
  display: block;
  width: 100%;
  height: 100%;
}

.f-index .index__topSwiper .swiper-slide {
  width: 960px;
  height: 400px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}

.f-index .index__topSwiper.is-single .swiper-slide {
  margin: 0 auto;
}

.f-index .index__exit {
  position: relative;
  margin-bottom: 40px;
  padding: 12px 0;
  background-color: #f7f7f7;
}

.f-index .index__exit::before, .f-index .index__exit::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 385px;
  height: 1px;
  border-radius: 50vh;
  background-color: #b5b6be;
}

.f-index .index__exit::before {
  top: 12px;
}

.f-index .index__exit::after {
  bottom: 12px;
}

.f-index .index__exitLink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 385px;
  margin: 0 auto;
  padding: 12px 0;
}

.f-index .index__exitLink::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 18px;
  background: url(/assets/img/user/pc/index/ico_exit18.svg) no-repeat center/contain;
}

.f-index .index__exitTxt {
  margin-right: 17px;
  font-size: 12px;
  line-height: 16px;
  color: #111211;
}

.f-index .index__exitImg {
  width: 24px;
  height: 32px;
  object-fit: contain;
}

.f-index .index__pref {
  margin-bottom: 60px;
}

.f-index .index__prefHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headPref.svg) no-repeat center/26px 26px;
}

.f-index .index__prefCardList {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.f-index .index__prefCardItem {
  width: 180px;
  height: 72px;
}

.f-index .index__prefCardLink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid #d2d2d8;
  border-radius: 4px;
  background-color: #fff;
  background-image: linear-gradient(45deg, #4ba500 50%, transparent 50%);
  background-position: 100%;
  background-size: 300%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  transition: 0.3s;
}

.f-index .index__prefCardLink:hover {
  border-color: #4ba500;
  background-position: 0;
  opacity: 1;
}

.f-index .index__prefCardLink:hover .index__prefCardTxt {
  color: #fff;
}

.f-index .index__prefCardThumb {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 3px 0 0 3px;
  overflow: hidden;
}

.f-index .index__prefCardTxt {
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #111211;
  transition: 0.3s;
}

.f-index .index__prefAreaList {
  display: grid;
  grid-template-columns: -webkit-max-content auto;
  grid-template-columns: max-content auto;
  gap: 20px 116px;
  padding: 18px 14px 22px;
  border: 2px solid #111211;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 3px 3px 0 #111211;
}

.f-index .index__prefAreaTtl {
  font-size: 20px;
  font-weight: bold;
  color: #4ba500;
}

.f-index .index__prefList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.f-index .index__prefItem {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 12px;
  font-size: 18px;
}

.f-index .index__prefItem:not(:last-child) {
  margin-right: 12px;
}

.f-index .index__prefItem:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 12px;
  border-radius: 50vh;
  background-color: #4ba500;
}

.f-index .index__prefLink {
  color: #111211;
}

.f-index .index__word {
  position: relative;
  z-index: 3;
  background-image: linear-gradient(180deg, #fff 194px, #394039 194px);
  box-shadow: 0 3px 6px rgba(18, 17, 18, 0.16);
}

.f-index .index__wordHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headWord.svg) no-repeat center/26px 26px;
}

.f-index .index__wordHidden {
  overflow-x: hidden;
}

.f-index .index__wordContent {
  position: relative;
  padding-bottom: 18px;
}

.f-index .index__wordContent::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: calc(50% - 960px);
  width: 1610px;
  height: 286px;
  background: #4ba500;
  border-radius: 0 10px 10px 0;
  z-index: 1;
  box-shadow: 3px 0 6px rgba(18, 17, 18, 0.16);
}

.f-index .index__wordList {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.f-index .index__wordLink {
  display: grid;
  place-content: center;
  width: 216px;
  height: 60px;
  border: 2px solid #111211;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #111211;
  background-color: #fff;
  box-shadow: 3px 3px 0 #111211;
  transition: 0.3s;
}

.f-index .index__wordLink:hover {
  transform: translate(3px, 3px);
  color: #fff;
  background-color: #39bf22;
  box-shadow: none;
  opacity: 1;
}

.f-index .index__ms {
  margin-bottom: 55px;
  background-image: linear-gradient(180deg, #4ba500 240px, #fff 240px);
}

.f-index .index__ms .index__sectionHead {
  margin-bottom: 12px;
}

.f-index .index__ms .wrapper {
  position: relative;
  padding: 43px 0 16px;
}

.f-index .index__ms .wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(50% - 960px);
  z-index: 3;
  display: inline-block;
  width: 1610px;
  height: 100%;
  border-radius: 10px 0 0 10px;
  background-color: #394039;
  box-shadow: -3px 0 6px rgba(26, 26, 26, 0.3);
}

.f-index .index__msHidden {
  overflow-x: hidden;
  height: 340px;
}

.f-index .index__msInner {
  position: relative;
  z-index: 5;
}

.f-index .index__msHeadTxt {
  color: #fff;
}

.f-index .index__msHeadTxt::before {
  background: #fff url(/assets/img/user/pc/index/ico_headMs.svg) no-repeat center/26px 26px;
}

.f-index .index__msHeadTxt::after {
  background-color: #fff;
}

.f-index .index__msContent {
  border-radius: 6px;
  background: linear-gradient(180deg, #ffe67a, #d9b544);
}

.f-index .index__msSwiper {
  padding: 12px 14px 12px 12px;
}

.f-index .index__msList {
  height: 198px;
}

.f-index .index__msItem {
  width: 323px;
  height: 196px;
  border: 1px solid #60de4a;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 2px 2px 0 #60de4a;
}

.f-index .index__msBanner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: 11px 7px 7px;
}

.f-index .index__msThumb {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 132px;
  height: 176px;
  margin-right: 8px;
  overflow: hidden;
}

.f-index .index__msImg {
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.f-index .index__msCrown {
  position: absolute;
  top: -7.43px;
  right: -9px;
  transform: rotate(15deg);
  width: 36px;
  height: 28.76px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
}

.f-index .index__msInfo {
  width: calc(100% - 140px);
  font-size: 0;
}

.f-index .index__msName {
  max-width: 100%;
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  color: #111211;
}

.f-index .index__msSize {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 18px;
  color: #b5b6be;
}

.f-index .index__msShop {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: #111211;
}

.f-index .index__msArea {
  margin-bottom: 11px;
  font-size: 13px;
  line-height: 19px;
  color: #b5b6be;
}

.f-index .index__msMore {
  width: 167px;
  height: 32px;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}

.f-index .index__shopRank {
  margin-bottom: 60px;
}

.f-index .index__shopRank.mt-55 {
  margin-top: 55px;
}

.f-index .index__shopRankHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headShopRank.svg) no-repeat center/26px 26px;
}

.f-index .index__shopRankDate {
  font-size: 14px;
  color: #39bf22;
}

.f-index .index__shopRankAreaWrapper {
  position: relative;
  margin-bottom: 16px;
  border-bottom: 1px solid #b5b6be;
}

.f-index .index__shopRankAreaMainList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 16px;
}

.f-index .index__shopRankAreaMainItem:not(:last-child) {
  margin-right: 12px;
}

.f-index .index__shopRankAreaMainBtn {
  display: grid;
  place-content: center;
  width: 155px;
  height: 40px;
  border: 1px solid #39bf22;
  border-radius: 3px;
  font-size: 14px;
  line-height: 24px;
  color: #2e2e2f;
  cursor: pointer;
}

.f-index .index__shopRankAreaMainBtn.is-active {
  font-weight: bold;
  color: #fff;
  background-color: #39bf22;
  pointer-events: none;
  cursor: default;
}

.f-index .index__shopRankAreaMainBtn.is-active:hover {
  opacity: 1;
}

.f-index .index__shopRankAreaSubList {
  display: none;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 16px;
}

.f-index .index__shopRankAreaSubList.is-show {
  display: -ms-flexbox;
  display: flex;
}

.f-index .index__shopRankAreaSubItem {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.f-index .index__shopRankAreaSubItem:not(:last-child) {
  margin-right: 10px;
}

.f-index .index__shopRankAreaSubBtn {
  display: grid;
  place-content: center;
  width: 86px;
  height: 32px;
  padding: 5px 0;
  border: 1px solid #5ac700;
  border-radius: 50vh;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #5ac700;
  background-color: #fff;
  cursor: pointer;
}

.f-index .index__shopRankAreaSubBtn.is-active {
  color: #fff;
  background-color: #5ac700;
  pointer-events: none;
  cursor: default;
}

.f-index .index__shopRankAreaSubBtn.is-active:hover {
  opacity: 1;
}

.f-index .index__shopRankAreaSubBtn:disabled {
  border: 1px solid #b5b6be;
  color: #b5b6be;
}

.f-index .index__shopRankAreaSubBtn:disabled:hover {
  cursor: default;
  opacity: 1;
}

.f-index .index__shopRankList {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.f-index .index__shopRankList.is-active {
  display: grid;
}

.f-index .index__shopRankItem {
  width: 180px;
}

.f-index .index__shopRankLink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.f-index .index__shopRankThumb {
  margin-bottom: 8px;
  padding: 0 2px 2px;
  border-radius: 4px;
  font-size: 0;
  background-color: #5ed000;
}

.f-index .index__shopRankThumb .index__shopRankNum {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  margin-left: 2px;
  font-size: 0;
  line-height: 32px;
}

.f-index .index__shopRankThumb .index__shopRankNum img {
  vertical-align: middle;
  object-fit: contain;
}

.f-index .index__shopRankThumb.no01 .index__shopRankNum, .f-index .index__shopRankThumb.no02 .index__shopRankNum, .f-index .index__shopRankThumb.no03 .index__shopRankNum {
  margin-left: 2.4px;
}

.f-index .index__shopRankThumb.no01 {
  background-color: #f7d339;
}

.f-index .index__shopRankThumb.no02 {
  background-color: #bdc3c9;
}

.f-index .index__shopRankThumb.no03 {
  background-color: #e09b48;
}

.f-index .index__shopRankImg {
  width: 176px;
  height: 176px;
  border-radius: 3px;
}

.f-index .index__shopRankName {
  margin-bottom: 1px;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #111211;
  height: 48px;
}

.f-index .index__shopRankArea {
  margin: auto 0 5px 0;
  font-size: 14px;
  line-height: 20px;
  color: #b5b6be;
}

.f-index .index__shopRankHours {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  color: #2e2e2f;
}

.f-index .index__shopRankHours::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  background: url(/assets/img/user/pc/index/ico_shopRankHours.svg) no-repeat center/contain;
}

.f-index .index__shopRankBtn::after {
  background: url(/assets/img/user/pc/index/ico_arrowRight-wt.svg) no-repeat center/contain;
}

.f-index .index__shopNew {
  margin-bottom: 60px;
}

.f-index .index__shopNew .index__sectionHead {
  margin-bottom: 57px;
}

.f-index .index__shopNewHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headShopNew.svg) no-repeat center/26px 26px;
}

.f-index .index__shopNewList {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.f-index .index__shopNewItem {
  width: 216px;
  border: 2px solid #39bf22;
  border-radius: 6px;
}

.f-index .index__shopNewLink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 14px 7px;
}

.f-index .index__shopNewLink:hover {
  opacity: 1;
}

.f-index .index__shopNewLink:hover p {
  opacity: 0.7;
}

.f-index .index__shopNewThumb {
  position: relative;
  z-index: 2;
  width: 184px;
  height: 184px;
  margin: -35px auto 12px;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.f-index .index__shopNewDate {
  display: grid;
  place-content: center;
  width: 184px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 50vh;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #4ba500;
}

.f-index .index__shopNewName {
  margin-bottom: 1px;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #111211;
}

.f-index .index__shopNewArea {
  margin-top: auto;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #b5b6be;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.f-index .index__diary {
  margin-bottom: 60px;
}

.f-index .index__diaryHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headDiary.svg) no-repeat center/26px 26px;
}

.f-index .index__diaryRankList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 32px;
  margin-bottom: 24px;
}

.f-index .index__diaryRankHead {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 12px;
}

.f-index .index__diaryRankInner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.f-index .index__diaryRankNum {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 12px;
}

.f-index .index__diaryRankStatus {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 12px;
}

.f-index .index__diaryGirl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.f-index .index__diaryGirlInfo {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 12px;
}

.f-index .index__diaryGirlProf {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
  align-items: baseline;
  max-width: 367px;
  margin-bottom: 3px;
}

.f-index .index__diaryGirlName {
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  color: #111211;
}

.f-index .index__diaryGirlAge {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
}

.f-index .index__diaryGirlSize {
  font-size: 14px;
  line-height: 16px;
  color: #b5b6be;
}

.f-index .index__diaryGirlIcon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50vh;
  overflow: hidden;
}

.f-index .index__diaryPhotoList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.f-index .index__diaryPhotoItem {
  width: 132px;
  height: 132px;
  border-radius: 4px;
  overflow: hidden;
}

.f-index .index__diaryPhotoLink {
  display: block;
  width: 100%;
  height: 100%;
}

.f-index .index__diaryBtn::after {
  background: url(/assets/img/user/pc/index/ico_arrowRight-wt.svg) no-repeat center/contain;
}

.f-index .index__hotelSearch {
  margin-bottom: 60px;
}

.f-index .index__hotelSearchHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headHotelList.svg) no-repeat center/26px 26px;
}

.f-index .index__hotelSearchList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.f-index .index__hotelSearchItem {
  width: 376px;
  height: 160px;
  border-radius: 5px;
  overflow: hidden;
}

.f-index .index__hotelSearchItem.love {
  background: url(/assets/img/hotel/common/pc/love_hotel.png);
  background-size: cover;
  background-position: center;
}

.f-index .index__hotelSearchItem.love:hover {
  opacity: 0.7;
}

.f-index .index__hotelSearchItem.biz {
  background: url(/assets/img/hotel/common/pc/biz_hotel.png);
  background-size: cover;
  background-position: center;
}

.f-index .index__hotelSearchItem.biz:hover {
  opacity: 0.7;
}

.f-index .index__hotelSearchItem.intro {
  background: url(/assets/img/hotel/common/pc/love_hotel_ranking.png);
  background-size: cover;
  background-position: center;
}

.f-index .index__hotelSearchItem.intro:hover {
  opacity: 0.7;
}

.f-index .index__hotelSearchLink {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.f-index .index__hotelSearchTxt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.f-index .index__hotelSearchTxt-sm {
  font-size: 24px;
}

.f-index .index__relatedSite {
  margin-bottom: 60px;
}

.f-index .index__relatedSiteHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headRelatedSite.svg) no-repeat center/26px 26px;
}

.f-index .index__relatedSiteList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.f-index .index__relatedSiteItem {
  width: 278px;
  height: 112px;
}

.f-index .index__relatedSiteLink {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.3s;
}

.f-index .index__relatedSiteLink.vanilla {
  border-color: #ff2f9a;
  box-shadow: 3px 3px 0 #ff2f9a;
}

.f-index .index__relatedSiteLink.mens-vanilla {
  border-color: #158ce0;
  box-shadow: 3px 3px 0 #158ce0;
}

.f-index .index__relatedSiteLink.fuzoku {
  border-color: #ff1f89;
  box-shadow: 3px 3px 0 #ff1f89;
}

.f-index .index__relatedSiteLink.mens-est {
  border-color: #333333;
  box-shadow: 3px 3px 0 #333333;
}

.f-index .index__relatedSiteLink:hover {
  transform: translate(3px, 3px);
  box-shadow: none;
  opacity: 1;
}

.f-index .index__relatedService {
  margin-bottom: 30px;
}

.f-index .index__relatedServiceHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headRelatedService.svg) no-repeat center/26px 26px;
}

.f-index .index__relatedServiceLink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 278px;
  height: 57px;
  border-radius: 4px;
  transition: 0.3s;
}

.f-index .index__relatedServiceLink.japan {
  border: 1px solid #fc1f89;
  box-shadow: 3px 3px 0 #fc1f89;
}

.f-index .index__relatedServiceLink.japan .index__relatedServiceImg {
  width: 210px;
  height: 30px;
}

.f-index .index__relatedServiceLink:hover {
  transform: translate(3px, 3px);
  box-shadow: none;
  opacity: 1;
}

.f-index .index__area {
  padding: 30px 0;
  background-color: #f6f8f4;
}

.f-index .index__areaHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headArea.svg) no-repeat center/26px 26px;
}

.f-index .index__areaSearchTabContent {
  display: none;
}

.f-index .index__areaSearchTabContent.is-show {
  display: block;
}

.f-index .index__areaSearchTabContentItem {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.f-index .index__areaSearchTabContentItem:not(:last-child) {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #707070;
}

.f-index .index__areaSearchTabList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 24px;
}

.f-index .index__areaSearchTabItem {
  display: inline-block;
}

.f-index .index__areaSearchTabItem:not(:last-child) {
  margin-right: 12px;
}

.f-index .index__areaSearchTabBtn {
  display: grid;
  place-content: center;
  width: 155px;
  height: 40px;
  border: 1px solid #39bf22;
  border-radius: 3px;
  font-size: 14px;
  line-height: 24px;
  color: #2e2e2f;
  background-color: #fff;
  cursor: pointer;
}

.f-index .index__areaSearchTabBtn.is-active {
  font-weight: bold;
  color: #fff;
  background-color: #39bf22;
  pointer-events: none;
  cursor: default;
}

.f-index .index__areaSearchTabBtn.is-active:hover {
  opacity: 1;
}

.f-index .index__areaSearchTabPref {
  margin-right: 12px;
  text-align: center;
}

.f-index .index__areaSearchTabPrefLink {
  display: grid;
  place-content: center;
  width: 136px;
  height: 40px;
  border: 1px solid #39bf22;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
  color: #39bf22;
  background-color: #fff;
}

.f-index .index__areaSearchTabAreaListWrapper {
  overflow: hidden;
}

.f-index .index__areaSearchTabAreaList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -9px;
  padding: 0 0 12px;
  border-bottom: 1px solid #707070;
}

.f-index .index__areaSearchTabAreaList:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.f-index .index__areaSearchTabAreaItem {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.f-index .index__areaSearchTabAreaItem:not(:last-child) {
  margin-right: 8px;
}

.f-index .index__areaSearchTabAreaItem::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-right: 8px;
  border-radius: 50vh;
  background-color: #4ba500;
}

.f-index .index__areaSearchTabAreaLink {
  font-size: 14px;
  line-height: 24px;
  color: #2e2e2f;
}

.f-index .index__about {
  padding: 30px 0 75px;
  background-color: #f6f8f4;
}

.f-index .index__about .index__sectionHead {
  margin-bottom: 22px;
}

.f-index .index__aboutHeadTxt::before {
  background: #4ba500 url(/assets/img/user/pc/index/ico_headAbout.svg) no-repeat center/26px 26px;
}

.f-index .index__aboutDetailItem:not(:last-of-type) {
  margin-bottom: 17px;
}

.f-index .index__aboutDetailHead {
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid #b5b6be;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  color: #121112;
}

.f-index .index__aboutDetailTxt {
  font-size: 14px;
  line-height: 24px;
  color: #2e2e2f;
}
