@charset "utf-8";
/* 「オトコ旅 全ページ共通」レスポンシブCSS */
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap&subset=japanese');*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(/tyo/common/font/NotoSansJP-400.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url(/tyo/common/font/NotoSansJP-700.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: url(/tyo/common/font/NotoSansJP-900.woff) format('woff');
}
/**/
/*★ リセット ★*/
.main div:not([class])::after {
  content: none;
}
.main a {
  text-decoration: none;
}
.main .is-em {
  font-weight: bold;
}
#footer, #topbuttonApp, #searchArea {
  position: relative;
  z-index: 1;
}
#footer {
  background: #fff;
  padding-top: 40px;
}
#footer .footer {
  margin-top: 0 !important;
}
.breadcrumb__inner {
  width: min(100%, 1024px);
  margin: auto;
  letter-spacing: 0 !important;
}
.is-device-pc :is(#breadcrumbArea, .breadcrumb__contents) {
  height: auto;
  min-height: 28px;
  overflow: auto;
}
.is-device-pc .breadcrumb {
  width: auto;
  margin: 0;
  overflow: hidden;
}
.goTop__link {
  display: none;
}
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#hisApp {
  position: relative;
}
:root {
  --fw-black: 900;
  --animation-loop: linear infinite;
  --animation-obitext: dsp-obitext 0.8s cubic-bezier(.25,1,.5,1) forwards;
  --icon-arrow-right-white: url("/cmn/icon/icon_arrow_right_white.svg");
  --icon-blank-white: url("/cmn/icon/icon_launch_white.svg");
  --icon-arrow-right-black: url("/cmn/icon/icon_arrow_right_black.svg");
  --icon-blank-black: url("/cmn/icon/icon_launch_black.svg");
  --icon-arrow-right-orange: url("/kaigai/asia/korea/otoko/assets/common/all/images/icon_arrow_right_orange.svg");
  --default-max-height: 100lvh;
  --default-color-orange: #ef7517;
  --default-color-orange2: #ff7b16;
  --default-color-emegreen: #13b5b1;
  --default-color-black: #000;
  --default-font-size-pc-val: 16;
  --default-font-size-pc: 16px;
  --default-font-size-sp: calc(24vw / 7.5);
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-width-sp-val: 670;
  --default-width-pc-val: 992;
  --default-width-sp: (670vw / 7.5);
  --default-width-pc: 992px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-width2: min(100%, var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);
  --default-bg-setting: no-repeat center center / cover;
  --default-icon-arrow-right-white: var(--icon-arrow-right-white) var(--default-bg-setting);
  --default-icon-arrow-right-black: var(--icon-arrow-right-black) var(--default-bg-setting);
  --default-icon-blank-white: var(--icon-blank-white) var(--default-bg-setting);
  --default-icon-blank-black: var(--icon-blank-black) var(--default-bg-setting);
  --default-hover-speed: .2s;
  --default-hover-opacity: .85;
  --default-hover-transition: opacity var(--default-hover-speed);
  --default-hover-transition2: background var(--default-hover-speed);
  --default-hover-transition3: color var(--default-hover-speed);
  --default-hover-transition4: transform var(--default-hover-speed);
}
.is-pc .js-accordion-button-pc, .is-sp .js-accordion-button-sp, .js-toggleControl:not([class*="active"]) {
  cursor: pointer;
}
:is(.is-pc .js-accordion-button-pc, .is-sp .js-accordion-button-sp) + * {
  display: none;
}
.main {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--default-font-size);
  letter-spacing: -.65px;
  color: var(--default-color-black);
  line-height: calc(26 / var(--default-font-size-pc-val));
  overflow: hidden;
  padding-bottom: 0 !important;
}
#hisAp > p.main {
  position: static;
}
.is-pc .is-dsp-sp, .is-sp .is-dsp-pc {
  display: none !important;
}
.is-font-small, .is-sp .is-font-small-sp, .is-pc .is-font-small-pc {
  font-size: .8em;
}
.is-font-big {
  font-size: 1.5em;
  line-height: 1;
}
.is-inline-block {
  display: inline-block;
}
.is-indent-1, .section [class*="notes--item"] {
  text-indent: -1em;
  padding-left: 1em;
}
.is-pr-half {
  padding-right: .5em;
}
.toggle__contents:not([class*="--active"]) {
  display: none;
}
.js-open-trigger {
  cursor: pointer;
  position: relative;
}
.js-open-target {
  display: none;
}
.js-accordion-button {
  cursor: pointer;
}
.js-accordion-button + * {
  display: none;
}
.section__inner, .contents__wrapper {
  width: var(--default-width);
  margin: auto;
  position: relative;
}
:is([class*="__link"], [class*="--link"]) {
  color: inherit;
}
/*section__notes*/
.section__notes {
  font-size: min((20vw / 7.5), 14px);
  line-height: 1.2;
  margin-top: 1em;
}
.section__notes--title {
  margin-bottom: .25em;
}
.section__notes--list {
  display: grid;
  gap: .25em;
}
/*button*/
.main :is([class*="__button--wrapper"], [class*="buttons"]) {
  display: grid;
  gap: min((40vw / 7.5), 20px);
}
.main .is-sp :is([class*="__button--wrapper"], [class*="buttons"]) {
  justify-content: center;
}
.main .is-pc [class*="__button--wrapper"] {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 15px;
}
.main .is-pc [class*="__button--wrapper"].is-length-2 {
  gap: 42px;
}
:is(.base-button, .base-small-button) {
  display: grid;
}
.is-pc :is(.base-button, .base-small-button):only-child, .is-pc .section__buttons .section__button {
  margin: auto;
}
.modal__buttons {
  justify-content: center;
}
:is(.base-button__link, .base-small-button__link, .modal__button) {
  --yohaku: .5em 1em .6em;
  display: grid;
  grid-template-columns: 1fr 1em;
  gap: 0 .5em;
  justify-items: center;
  align-items: center;
  line-height: 1.2;
  color: #fff;
  font-weight: bold;
  min-width: min((590vw / 7.5), 475px);
  border-radius: min((8vw / 7.5), 8px);
  height: 100%;
  min-height: min((80vw / 7.5), 46px);
  padding: var(--yohaku);
  padding-left: 1.5em; /*アイコン分鑑みて追加*/
}
.modal__button {
  grid-template-columns: 1fr;
}
:is(.base-button, .base-small-button).is-color-orange :is(.base-button__link, .base-small-button__link) {
  background: var(--default-color-orange);
}
.modal__button, :is(.base-button, .base-small-button).is-color-black :is(.base-button__link, .base-small-button__link) {
  background: var(--default-color-black);
}
.base-small-button__link {
  min-height: min((60vw / 7.5), 46px);
  min-width: min((400vw / 7.5), 400px);
}
.is-pc :is([class*="button__wrapper"], [class*="__button--wrapper"]) :is(.base-button__link, .base-small-button__link) {
  min-width: auto;
}
.is-pc .base-small-button__link {
  min-width: min((194vw / 7.5), 194px);
}
.base-button__link::after, .base-small-button__link::after {
  content: "";
  width: 100%;
  height: 1.5em;
  background: var(--default-icon-arrow-right-white);
}
.base-button__link[target="_blank"]::after, .base-small-button__link[target="_blank"]::after {
  height: 1em;
  background: var(--default-icon-blank-white);
}
.base-button__link[href^="#"]::after, .base-small-button__link[href^="#"]::after {
  transform: rotate(90deg);
}
.return__button .base-button__link {
  min-width: min((400vw / 7.5), 380px);
}
.return__button .base-button__link {
  grid-template-columns: 1em 1fr;
  padding: var(--yohaku);
  padding-right: 2.75em; /*アイコン分鑑みて追加*/
}
.return__button .base-button__link .base-button__text {
  order: 1;
}
.return__button .base-button__link::after {
  transform: rotate(180deg);
}
/*base-banner*/
.base-text-link__link {
  color: #ff7a19;
}
/*base-banner*/
.base-banner {
  display: grid;
  justify-content: center;
  gap: min((30vw / 7.5), 15px);
}
.base-banner__link {
  background: #fff;
}
/*slider*/
[class*="js-slider-"] .slick-track {
  display: flex;
}
.js-slider-mv .slick-track {
  align-items: center;
}
[class*="js-slider-"] .slick-slide {
  float: none;
}
.slider__dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0 min((16vw / 7.5), 8px);
}
.js-slider-dots .slider__dots {
  float: none;
}
.slider__dots > li:only-child {
  display: none;
}
.slider__dots--item {
  --dot-size: min((14vw / 7.5), 8px);
  --dot-color: #fff;
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--dot-color);
  border-radius: 100%;
  cursor: pointer;
}
.slick-active > .slider__dots--item {
  --dot-size: min((18vw / 7.5), 10px);
  --dot-color: #000;
}
.slider__arrow {
  --posi: 0;
  --size: min((60vw / 7.5), 60px);
  background: var(--default-icon-arrow-right-black);
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  cursor: pointer;
  transition: var(--default-hover-transition);
}
.slider__arrow.is-prev {
  left: var(--posi);
  transform: rotate(180deg);
}
.slider__arrow.is-next {
  right: var(--posi);
}
.slider__arrow[class*="disabled"] {
  opacity: 0;
  cursor: default;
}
/*modal*/
.is-hidden {
  overflow: hidden;
}
.js-modal-body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: -1;
}
.js-modal-body.modal-open {
  transition: background .4s;
  background: rgba(255, 123, 22, .9);
  z-index: 100;
}
.js-modal-open {
  cursor: pointer;
}
.modal {
  --modal-size: calc(670vw/ 7.5);
  max-width: var(--modal-size);
  height: 73.5%;
  position: fixed;
  margin: auto;
  z-index: 200;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
}
.is-pc .modal {
  --modal-size: 880px;
  width: 90%;
  max-height: 500px;
}
.js-modal-close {
  --size: min((80vw / 7.5), 60px);
  --posi: max((-40vw / 7.5), -30px);
  width: var(--size);
  height: var(--size);
  background: #000 url(/cmn/icon/icon_close_white.svg) no-repeat center center / contain;
  border-radius: 100%;
  position: absolute;
  top: var(--posi);
  right: var(--posi);
  z-index: 1;
  cursor: pointer;
}
.is-sp .js-modal-close {
  right: 0;
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  position: relative;
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
.section {
  overflow: hidden;
}
.section, .section__inner {
  position: relative;
}
#pageApp::before {
  content: "";
  display: block;
  width: 100%;
  height: var(--default-max-height);
  background: no-repeat center center / cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  transition: var(--default-hover-transition);
}
#mainArea .section__inner {
  --yohaku-half: min((50vw / 7.5), 50px);
  padding: min((100vw / 7.5), 100px) 0;
}
#basic-info .section__inner {
  padding-bottom: var(--yohaku-half);
}
.is-pc #useful-info .section__inner {
  padding: var(--yohaku-half) 0;
}
#branch .section__inner {
  padding-top: var(--yohaku-half);
}
/*text-animation*/
.text-animation {
  display: grid;
  overflow: hidden;
}
.text-animation.is-type-korea {
  --text-size: min((103vw / 7.5), 113px);
}
.text-animation.is-type-tour {
  --text-size: min((79vw / 7.5), 72px);
}
.text-animation.is-type-korea, .is-sp .text-animation.is-type-tour {
  grid-template-columns: repeat(2, 100%);
  width: 200%;
  height: var(--text-size);
}
.text-animation.is-type-korea {
  margin-top: min((8vw / 7.5), 5px);
}
.is-sp .text-animation.is-type-tour {
  margin: min((5vw / 7.5), 10px) 0;
}
.is-pc .text-animation.is-type-tour {
  grid-template-rows: repeat(2, 100%);
  width: var(--text-size);
  height: 200%;
  position: absolute;
  top: 0;
  margin: 0 min((6vw / 7.5), 12px);
}
.is-pc .section__inner ~ .text-animation.is-type-tour {
  right: 0;
  top: auto;
  bottom: 0;
  transform: rotate(180deg);
}
.text-animation__image {
  width: 100%;
  height: 100%;
  background: repeat 0 0 / contain;
}
:is(.text-animation.is-type-korea, .is-sp .text-animation.is-type-tour) .text-animation__image {
  animation: slide-yoko 60s var(--animation-loop);
}
.text-animation.is-type-korea .text-animation__image {
  background-image: url("../images/bg_text_korea.svg");
}
.is-sp .text-animation.is-type-tour .text-animation__image {
  background-image: url("../images/bg_text_tour_yoko.svg");
}
:is(.text-animation.is-type-korea, .is-sp .text-animation.is-type-tour) .text-animation__image.is-no1 {
  background-position: right top;
}
.is-pc .text-animation.is-type-tour .text-animation__image {
  background-image: url("../images/bg_text_tour_tate.svg");
  animation: slide-tate 90s var(--animation-loop);
}
.is-pc .text-animation.is-type-tour .text-animation__image.is-no1 {
  background-position: 0 bottom;
}
/*icon*/
.icon.is-num {
  background: var(--default-color-black);
  color: #fff;
  font-size: .6em;
  line-height: 1.75;
  text-align: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: .35em;
  margin-right: .2em;
}
/*course*/
#course .section__inner {
  width: min(100%, var(--default-width-pc));
}
#course .section__inner::before {
  content: "";
  display: block;
  width: var(--size);
  height: var(--size);
  background: url("../images/bg_text_report.svg") no-repeat 0 0 / contain;
  animation: 70s var(--animation-loop) rotate;
  position: absolute;
}
.is-sp #course .section__inner::before {
  --size: min((600vw / 7.5), 600px);
  top: max((-270vw / 7.5), -270px);
  left: min((57vw / 7.5), 57px);
}
.is-pc #course .section__inner::before {
  --size: min((370vw / 7.5), 370px);
  top: max((-124vw / 7.5), -124px);
  left: max((-104vw / 7.5), -104px);
}
.course {
  position: relative;
}
.course__block--item {
  display: grid;
  gap: min((95vw / 7.5), 55px);
  width: min((590vw / 7.5), 590px);
  margin: auto;
}
.is-pc .course__block--item {
  width: var(--default-width);
}
.course__block--title {
  display: grid;
  grid-template-columns: min((180vw / 7.5), 310px) auto;
  align-items: center;
  gap: min((36vw / 7.5), 18px);
  line-height: 1;
  font-weight: bold;
}
.course__block--title::before {
  content: "";
  width: 100%;
  height: 1px;
  background: currentColor;
}
.course__reporter {
  display: grid;
  gap: min((28vw / 7.5), 28px) min((34vw / 7.5), 34px);
}
.is-sp .course__reporter {
  justify-content: start;
}
.is-pc .course__reporter {
  grid-template-columns: auto 1fr;
}
.course__reporter--photo {
  height: min((360vw / 7.5), 360px);
  width: auto;
  aspect-ratio: 59 / 36;
  object-fit: contain;
}
.is-pc .course__reporter--photo {
  height: 183px;
}
.course__reporter--texts {
  order: 1;
  font-size: min(var(--default-font-size-sp), 18px);
  line-height: calc(28 / 18);
  font-weight: bold;
}
.course__reporter--title {
  font-weight: var(--fw-black);
  font-size: min((36vw / 7.5), 24px);
  line-height: 1;
  margin-bottom: .25em;
}
.course__reporter--account {
  margin: .5em 0;
}
[class*="course__reporter--account--"] {
  display: flex;
}
.course__reporter--buttons {
  margin-top: min((40vw / 7.5), 20px);
}
.is-pc .course__reporter--buttons {
  justify-content: start;
}
/*product*/
.product__sub:not(:first-child) {
  margin-top: min((160vw / 7.5), 90px);
}
.is-pc .product__sub:not(:first-child) {
  margin-top: 70px;
}
.product__list:not(:last-child) {
  margin-bottom: min((50vw / 7.5), 30px);
}
.is-pc .product__list:not(:last-child) {
  margin-bottom: 15px;
}
/* 商品カセット */
.product__list--text-wrapper {
  gap: min((20vw / 7.5), 10px);
  font-weight: bold;
}
.product__list--texts {
  line-height: 1.4;
}
.product__list--detail {
  color: #333;
}
.product__list--price {
  line-height: 1.2;
  color: #555;
}
.product__list--minmax {
  font-size: min((40vw / 7.5), 18px);
  margin-bottom: .25em;
}
.product__list--dep, .product__list--notes {
  font-size: min((20vw / 7.5), 10px);
}
/*商品枠スライダー調整*/
.product__list[class*="slick"] .product__list--item {
  width: min(calc(590vw / 7.5), 240px) !important;
  margin: 0 4px 3px;
  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, .23);
}
.is-pc .product__list .slider__dots {
  --dot-posi: 10px;
}
.product__list .slick-list {
  width: 100%;
  margin-left: 0;
}
@media screen and (min-width:1025px) {
  .product__list.is-item-center .slick-track {
    width: 100% !important;
    transform: translate3d(0, 0px, 0px) !important;
  }
}
.product__list[class*="slick"] .product__list--item {
  height: auto;
  backface-visibility: hidden;
}
.product__list .slick-active > .slider__dots--item {
  background: var(--default-color-orange);
}
.product__list .slider__arrow {
  --posi: max((-52vw / 7.5), -52px);
  background-image: var(--icon-arrow-right-white);
}
.product__list .slider__dots {
  --dot-posi: min((25vw / 7.5), 20px);
  margin-top: var(--dot-posi);
}
/*reco-banner*/
.article + #reco-banner {
  margin-top: min((145vw / 7.5), 100px);
}
.is-pc .article + #reco-banner {
  border-top: 1px solid;
  margin-top: min((40vw / 7.5), 75px);
  padding-top: min((50vw / 7.5), 95px);
}
.is-pc #reco-banner {}
.reco-banner__list {
  width: min((520vw / 7.5), 520px);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min((40vw / 7.5), 29px);
}
.is-pc .reco-banner__list {
  width: min(90%, 873px);
}
.is-pc .reco-banner__list {
  grid-template-columns: repeat(4, 1fr);
}
.reco-banner__link {
  display: block;
}
/*youtube*/
.youtube, .youtube__thumb {
  position: relative;
}
.youtube, .youtube__thumb--image {
  background: no-repeat center center / 100%;
}
.youtube__button {
  width: 10%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  cursor: pointer;
  z-index: 1;
}
.youtube__thumb .youtube__button {
  width: 15%;
}
.youtube__block, .youtube__thumb--image {
  padding-top: calc((9 / 16) * 100%); /*YouTubeアスペクト比*/
  position: relative;
  cursor: pointer;
  z-index: 1;
}
.youtube__iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.youtube__thumb--image {
  --active: 0px 0px 0px 4px var(--default-color-orange) inset;
  box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0) inset;
}
.youtube__thumb.slick-current .youtube__thumb--image {
  box-shadow: var(--active);
}
.movie .youtube, .movie .movie__thumb {
  width: min(100%, 560px);
  margin: auto;
}
.movie .movie__thumb {
  margin-top: min((24vw / 7.5), 15px);
}
.movie .movie__thumb--item {
  width: calc((100% - 18px * 3) / 3);
  margin: 0 min((9vw / 7.5), 9px);
}
.movie__item--name {
  font-size: min((18vw / 7.5), var(--default-font-size-pc));
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  margin-top: .5em;
}
/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
#searchArea {
  padding-bottom: min((50vw / 7.5), 60px);
  background: #fff;
}
.is-pc ~ #searchArea {
  padding: 60px 0;
  background: url("../images/search_photo.jpg") no-repeat center top / var(--default-bg-width-pc);
}
/*
@media (min-width:741px) {
}
@media only screen and (orientation: landscape) and (max-width: 828px), only screen and (max-width: 740px) {
  #searchArea .rn-searchMod__formSection {
    padding-bottom: min((100vw / 7.5), 100px);
  }
}
#pageApp.is-device-tab ~ #searchArea {
  padding-bottom: min((86vw / 7.5), 86px);
}*/
/*------------------------------------------------*/
/*★ ＝＝ keyframes ＝＝ ★*/
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes slide-yoko {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-tate {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes dsp-obitext {
  0% {
    width: 0%;
    min-width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes dsp-photo {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  80% {
    transform: translateY(0);
  }
  to {
    opacity: 1;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  :is(.base-button__link, .base-small-button__link) {
    transition: var(--default-hover-transition);
  }
  :is(.base-button__link, .base-small-button__link):hover {
    opacity: var(--default-hover-opacity);
  }
  .base-text-link__link:hover {
    text-decoration: underline !important;
    text-underline-offset: .35em;
  }
  .modal__button, .map__area--item {
    transition: var(--default-hover-transition2);
  }
  :is(.modal__button, .map__area--item):hover {
    background: var(--default-color-emegreen);
  }
  .reco-banner__link {
    transition: var(--default-hover-transition);
  }
  .reco-banner__link:hover {
    opacity: var(--default-hover-opacity);
  }
  .youtube .play-button-bg, .youtube__thumb--image {
    transition: var(--default-hover-speed);
  }
  .youtube:hover .play-button-bg {
    fill: #000;
  }
  .youtube__thumb:hover .youtube__thumb--image {
    box-shadow: var(--active);
  }
  .slider__arrow {
    transition: var(--default-hover-transition2);
  }
  .slider__arrow:hover {
    background-image: var(--icon-arrow-right-orange) !important;
  }
  .modal__inner .slider__arrow:hover {
    background-image: var(--icon-arrow-right-white) !important;
  }
}