@charset "UTF-8";
@font-face {
  font-family: "Kanata-kanji";
  src: url("../font/Kanata-kanji.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
:root {
  --scale: 0.0694444444vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.2666666667vw;
    --max: 10;
  }
}

/* ===============================
  体験事業者・主催会社
=============================== */
.hosts-detail {
  background: #fbfaf6;
}
.hosts-detail::before {
  transform: translate(-50%, 4.6%);
}
@media (max-width: 767px) {
  .hosts-detail {
    overflow-x: clip;
  }
  .hosts-detail::before {
    transform: translate(-50%, 0%);
  }
}

.hosts-detail__content {
  padding: min(calc(160 * var(--scale)), calc(160px * var(--max))) 0 min(calc(120 * var(--scale)), calc(120px * var(--max)));
}
@media (max-width: 767px) {
  .hosts-detail__content {
    padding-top: 17%;
    padding-bottom: 22%;
  }
}

.hosts-detail__body {
  border-left: min(calc(10 * var(--scale)), calc(10px * var(--max))) solid #cff4f6;
  border-right: min(calc(10 * var(--scale)), calc(10px * var(--max))) solid #cff4f6;
  background: #fff;
  padding: min(calc(105 * var(--scale)), calc(105px * var(--max))) 5%;
  position: relative;
  box-shadow: 2px 4px 20px rgba(217, 217, 217, 0.3);
}
@media (max-width: 767px) {
  .hosts-detail__body {
    padding: min(calc(28 * var(--scale)), calc(28px * var(--max))) 2% 21%;
    border-left: min(calc(3 * var(--scale)), calc(3px * var(--max))) solid #3a92be;
    border-right: min(calc(3 * var(--scale)), calc(3px * var(--max))) solid #3a92be;
  }
}

/*------------------------------
profile
------------------------------*/
.profile {
  padding-top: min(calc(150 * var(--scale)), calc(150px * var(--max)));
  position: relative;
}
.profile::before {
  content: "";
  position: absolute;
  aspect-ratio: 1/1;
  pointer-events: none;
  left: 0;
  top: 0;
  width: min(calc(1080 * var(--scale)), calc(1080px * var(--max)));
  background: url(../img/blur/01.png) no-repeat center center/100%;
  transform: translate(-28%, -36%);
}
@media (max-width: 767px) {
  .profile {
    padding-top: min(calc(166 * var(--scale)), calc(166px * var(--max)));
  }
  .profile::before {
    width: min(calc(390 * var(--scale)), calc(390px * var(--max)));
  }
}

@media (min-width: 768px) {
  .profile__inner {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .profile__inner {
    width: 100%;
    padding-left: 8%;
  }
}

.profile__content {
  position: relative;
  margin-left: auto;
  width: 72.6%;
  width: min(calc(1045 * var(--scale)), calc(1045px * var(--max)));
}
@media (min-width: 768px) {
  .profile__content {
    margin-right: calc(min( 0 * var(--scale),0px) +  max(0px, (100vw - 1440px)/2));
  }
}
@media (max-width: 767px) {
  .profile__content {
    width: 100%;
    background: #fff;
    padding-bottom: 8%;
  }
  .profile__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-8%, -62%);
    background: url(../img/img-flag_orange.png) no-repeat center center/contain;
    width: min(calc(116 * var(--scale)), calc(116px * var(--max)));
    aspect-ratio: 201/302;
  }
}

.profile__photo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-74%, -34%);
  width: min(calc(326 * var(--scale)), calc(326px * var(--max)));
  box-shadow: 2px 4px 20px rgba(217, 217, 217, 0.3);
}
.profile__photo::before, .profile__photo::after {
  content: "";
  position: absolute;
  background: url(../img/common/dec01-3.png) no-repeat center center/contain;
  aspect-ratio: 1/1;
  width: min(calc(78 * var(--scale)), calc(78px * var(--max)));
}
.profile__photo::before {
  top: 0;
  left: 0;
  transform: translate(-35%, -35%) scale(-1, 1);
}
.profile__photo::after {
  bottom: 0;
  right: 0;
  transform: translate(30%, 25%) scale(1, -1);
}
.profile__photo img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 767px) {
  .profile__photo {
    width: min(calc(186 * var(--scale)), calc(186px * var(--max)));
    right: 0;
    left: unset;
    transform: translate(-16%, -77%);
  }
  .profile__photo::before {
    width: min(calc(46 * var(--scale)), calc(46px * var(--max)));
  }
  .profile__photo::after {
    width: min(calc(46 * var(--scale)), calc(46px * var(--max)));
  }
}

.profile__body {
  background: #fff;
  padding: min(calc(50 * var(--scale)), calc(50px * var(--max))) min(calc(170 * var(--scale)), calc(170px * var(--max)));
  padding-right: min(calc(210 * var(--scale)), calc(210px * var(--max)));
}
@media (max-width: 767px) {
  .profile__body {
    padding: min(calc(75 * var(--scale)), calc(75px * var(--max))) min(calc(20 * var(--scale)), calc(20px * var(--max))) 0;
    padding-right: 4%;
  }
}

.profile__info {
  position: relative;
  padding-left: 14.6%;
}
.profile__info::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.5em;
  transform: translateY(-57%);
  background: url(../img/img-flag_orange.png) no-repeat center center/contain;
  width: min(calc(116 * var(--scale)), calc(116px * var(--max)));
  aspect-ratio: 201/302;
}
@media (max-width: 767px) {
  .profile__info {
    padding-left: 0;
  }
  .profile__info::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .profile__person {
    padding-left: min(calc(12 * var(--scale)), calc(12px * var(--max)));
    border-left: min(calc(3 * var(--scale)), calc(3px * var(--max))) solid #dba326;
  }
}

.profile__name {
  font-size: min(calc(28 * var(--scale)), calc(28px * var(--max)));
}
@media (max-width: 767px) {
  .profile__name {
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.profile__company {
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .profile__company {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    letter-spacing: -0.05em;
  }
}

.profile__area {
  display: flex;
  align-items: center;
  gap: 0 min(calc(22 * var(--scale)), calc(22px * var(--max)));
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  color: #dba326;
  margin-top: 0.5em;
}
.profile__area dt {
  display: flex;
  align-items: center;
}
.profile__area dt::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/hosts/icon-area.png) no-repeat center center/contain;
  width: 0.8em;
  aspect-ratio: 15/19;
  margin-right: 0.3em;
}
@media (max-width: 767px) {
  .profile__area {
    flex-direction: column;
    align-items: flex-start;
    gap: min(calc(3 * var(--scale)), calc(3px * var(--max))) 0;
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    margin-top: 1.1em;
  }
}

.profile__summary {
  margin-top: 3.4%;
  background: #fff6de;
  padding: min(calc(20 * var(--scale)), calc(20px * var(--max))) min(calc(40 * var(--scale)), calc(40px * var(--max)));
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
}
@media (max-width: 767px) {
  .profile__summary {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    padding: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    margin-top: 6.4%;
    line-height: 1.5;
  }
}

/*------------------------------
gallery 
------------------------------*/
.gallery {
  margin-top: 1%;
}
@media (max-width: 767px) {
  .gallery {
    margin-top: 5%;
    padding-left: 8%;
  }
}

@media (min-width: 768px) {
  .gallery__images {
    display: flex;
    gap: 0 min(calc(45 * var(--scale)), calc(45px * var(--max)));
    margin-left: 50%;
    transform: translateX(-50%);
    width: 104%;
    padding-left: 1.1%;
  }
}
.gallery__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .gallery__image {
    padding: min(calc(10 * var(--scale)), calc(10px * var(--max)));
    background: #fff;
    box-shadow: 2px 4px 10px rgba(113, 113, 113, 0.2);
    width: calc(33.3% - min(calc(45 * var(--scale)), calc(45px * var(--max))) * 2 / 3);
    height: min(calc(247 * var(--scale)), calc(247px * var(--max)));
  }
  .gallery__image:nth-child(2) {
    transform: translateY(min(calc(65 * var(--scale)), calc(65px * var(--max))));
  }
  .gallery__image:nth-child(3) {
    margin-top: 1%;
  }
  .gallery__image:not(:has(img)) {
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  .gallery__image {
    padding: min(calc(10 * var(--scale)), calc(10px * var(--max)));
    background: #fff;
    box-shadow: 2px 4px 10px rgba(113, 113, 113, 0.2);
    height: min(calc(200 * var(--scale)), calc(200px * var(--max)));
  }
}

.gallerySwiper02-wrap {
  /* */
}
@media (max-width: 767px) {
  .gallerySwiper02-wrap {
    overflow-x: clip;
    width: 86%;
    margin: 6% auto 0;
  }
}

.swiper-pagination-gallery[class][class] {
  /* sp */
}
@media (max-width: 767px) {
  .swiper-pagination-gallery[class][class] {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    display: flex;
    justify-content: center;
    gap: 0 min(calc(15 * var(--scale)), calc(15px * var(--max)));
    margin-top: 3%;
  }
  .swiper-pagination-gallery[class][class].swiper-pagination-lock {
    display: none;
  }
  .swiper-pagination-gallery[class][class] .swiper-pagination-bullet[class][class] {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    width: unset;
    height: unset;
    margin: 0;
    opacity: 1;
    width: min(calc(6 * var(--scale)), calc(6px * var(--max)));
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #d9d9d9;
  }
  .swiper-pagination-gallery[class][class] .swiper-pagination-bullet[class][class].swiper-pagination-bullet-active {
    background: #036960;
  }
}

/*------------------------------
interview 
------------------------------*/
@media (min-width: 768px) {
  .hosts-detail__content__inner {
    width: min(calc(1170 * var(--scale)), calc(1170px * var(--max)));
  }
}
@media (max-width: 767px) {
  .hosts-detail__content__inner {
    width: min(calc(345 * var(--scale)), calc(345px * var(--max)));
  }
}

@media (min-width: 768px) {
  .interview__heading {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(calc(22 * var(--scale)), calc(22px * var(--max)));
    text-align: center;
    border: 3px solid #89c6e5;
    border-radius: 2em;
    padding: 0.7em 3.9em;
    background: #fff;
  }
}
@media (max-width: 767px) {
  .interview__heading {
    padding: 0 1em;
    font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
    color: #3a92be;
    text-align: center;
  }
}

.interview__conversation {
  display: flex;
  flex-direction: column;
  gap: min(calc(32 * var(--scale)), calc(32px * var(--max))) 0;
}
@media (max-width: 767px) {
  .interview__conversation {
    margin-top: 8%;
  }
}

.interview__item {
  display: flex;
  flex-direction: column;
  gap: min(calc(17 * var(--scale)), calc(17px * var(--max))) 0;
  gap: 0;
}

.interview__question {
  width: min(calc(876 * var(--scale)), calc(876px * var(--max)));
  margin-left: auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.interview__question .interview__speaker {
  transform: translate(10%, 10%);
}
.interview__question .interview__avatar img {
  border: min(calc(2 * var(--scale)), calc(2px * var(--max))) solid #609b93;
}
@media (max-width: 767px) {
  .interview__question {
    width: 100%;
    gap: 0;
    justify-content: flex-start;
  }
  .interview__question .interview__speaker {
    transform: translate(0%, 10%);
    align-self: flex-end;
  }
  .interview__question .interview__avatar img {
    border: 1px solid #609b93;
  }
}

.interview__speaker {
  width: min(calc(80 * var(--scale)), calc(80px * var(--max)));
}
@media (max-width: 767px) {
  .interview__speaker {
    width: min(calc(58 * var(--scale)), calc(58px * var(--max)));
  }
}

.interview__avatar {
  width: min(calc(80 * var(--scale)), calc(80px * var(--max)));
}
.interview__avatar img {
  border-radius: 50%;
  border: min(calc(2 * var(--scale)), calc(2px * var(--max))) solid #dba326;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 767px) {
  .interview__avatar {
    width: min(calc(58 * var(--scale)), calc(58px * var(--max)));
  }
}

.interview__name {
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  text-align: center;
  margin-top: 0.3em;
}
@media (max-width: 767px) {
  .interview__name {
    margin-top: 0;
  }
}

.interview__bubble {
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  padding: 1em 4.6em;
  padding-right: 3em;
  border-radius: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  filter: drop-shadow(2px 4px 12px rgba(217, 217, 217, 0.3));
  position: relative;
}
.interview__bubble::before {
  content: "";
  position: absolute;
  aspect-ratio: 61/39;
  -webkit-mask: url(../img/common/introduction-tail.svg) center/100% no-repeat;
          mask: url(../img/common/introduction-tail.svg) center/100% no-repeat;
  width: min(calc(60 * var(--scale)), calc(60px * var(--max)));
}
.interview__bubble--question {
  background: #edf3ec;
  width: 80%;
}
.interview__bubble--question::before {
  background: #edf3ec;
  transform: translate(49%, 33%) rotate(0deg);
  right: 0%;
  bottom: 0%;
}
.interview__bubble--answer {
  background: #fcf5e3;
  padding: 1em 2.9em;
  padding-right: 2em;
  border-radius: min(calc(40 * var(--scale)), calc(40px * var(--max)));
}
.interview__bubble--answer::before {
  background: #fcf5e3;
  left: 0;
  bottom: 0;
  transform: translate(-35%, 39%) rotate(0deg) scale(-1, 1);
}
@media (min-width: 768px) {
  .interview__bubble--question {
    width: 79%;
    margin-right: 1%;
  }
}
@media (max-width: 767px) {
  .interview__bubble {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    padding: 1.25em 1em;
    width: min(calc(258 * var(--scale)), calc(258px * var(--max)));
  }
  .interview__bubble--question {
    margin-right: 2%;
  }
  .interview__bubble--question::before {
    transform: translate(27%, 41%) rotate(0deg);
  }
  .interview__bubble--answer {
    border-radius: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  }
  .interview__bubble--answer::before {
    transform: translate(-28%, 38%) rotate(0deg) scale(-1, 1);
  }
}

.interview__answer {
  width: min(calc(876 * var(--scale)), calc(876px * var(--max)));
  display: flex;
  align-items: center;
  gap: 0 min(calc(15 * var(--scale)), calc(15px * var(--max)));
}
@media (max-width: 767px) {
  .interview__answer {
    width: 100%;
    gap: 0;
    margin-top: 6.8%;
    justify-content: flex-end;
  }
  .interview__answer .interview__speaker {
    transform: translate(-16%, 10%);
    align-self: flex-end;
  }
}

/*------------------------------
experiences
------------------------------*/
.experiences {
  margin-top: min(calc(80 * var(--scale)), calc(80px * var(--max)));
}
.experiences:not(:has(.experiences__item)) {
  display: none;
}
.experiences:not(.act) #ex_more {
  display: none;
}
@media (max-width: 767px) {
  .experiences {
    margin-bottom: 0;
    margin-top: min(calc(65 * var(--scale)), calc(65px * var(--max)));
  }
}

.experiences__title {
  font-size: min(calc(52 * var(--scale)), calc(52px * var(--max)));
  color: #dba326;
  text-align: center;
}
@media (max-width: 767px) {
  .experiences__title {
    font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
  }
}

.experiences__list {
  margin-top: min(calc(65 * var(--scale)), calc(65px * var(--max)));
  display: flex;
  flex-direction: column;
  gap: min(calc(35 * var(--scale)), calc(35px * var(--max))) 0;
  padding: 0 8%;
}
@media (max-width: 767px) {
  .experiences__list {
    padding: 0;
    margin-top: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.experiences__item {
  position: relative;
}
.experiences__item a {
  background: url(../img/dec_bg01.png) repeat center center/auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 3% min(calc(40 * var(--scale)), calc(40px * var(--max))) 1%;
  box-shadow: 2px 4px 20px rgba(217, 217, 217, 0.2);
  border-radius: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  transition: color 0.3s;
}
@media (hover: hover) {
  .experiences__item a:hover {
    color: #717171;
    opacity: 1;
  }
}
.experiences__item:nth-child(n+6):not(.act) {
  display: none;
}
@media (min-width: 768px) and (hover: hover) {
  .experiences__item:hover .experiences__thumbnail img {
    transform: scale(1.1);
    opacity: 1;
  }
}
@media (max-width: 767px) {
  .experiences__item a {
    flex-direction: column-reverse;
    gap: min(calc(10 * var(--scale)), calc(10px * var(--max))) 0;
    padding: min(calc(10 * var(--scale)), calc(10px * var(--max)));
    padding: 3% 5%;
  }
}

.experiences__area {
  background: #ecae25;
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  color: #fff;
  position: absolute;
  top: 0;
  left: 2.2em;
  transform: translateY(-15%);
  padding: 0.3em 0.7em;
  max-width: 32em;
}
.experiences__area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  transform: translateX(-100%);
  background: #dba326;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
          clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  width: min(calc(6 * var(--scale)), calc(6px * var(--max)));
  aspect-ratio: 6/11;
}
@media (max-width: 767px) {
  .experiences__area {
    width: min(calc(118 * var(--scale)), calc(118px * var(--max)));
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    transform: translateX(-27%);
    top: -0.3em;
    padding: 1em 1em;
    padding-right: 0.1em;
  }
  .experiences__area::before {
    width: min(calc(7 * var(--scale)), calc(7px * var(--max)));
    aspect-ratio: 7/3;
    top: unset;
    left: 0;
    bottom: 0;
    transform: translate(0%, 100%);
    -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
            clip-path: polygon(0 0, 100% 100%, 100% 0);
  }
}

.experiences__heading {
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  width: 74%;
}
@media (max-width: 767px) {
  .experiences__heading {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    width: 100%;
  }
}

.experiences__thumbnail {
  background: #fff;
  box-shadow: 2px 4px 10px rgba(113, 113, 113, 0.2);
  aspect-ratio: 176/104;
  width: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.experiences__thumbnail > div {
  width: 93%;
  margin: 0 auto;
  overflow: hidden;
}
.experiences__thumbnail img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 164/94;
  transition: transform 0.3s;
}
@media (max-width: 767px) {
  .experiences__thumbnail {
    width: min(calc(232 * var(--scale)), calc(232px * var(--max)));
    margin-left: auto;
    aspect-ratio: 232/142;
  }
}

.experiences__button {
  margin-top: 5%;
  text-align: center;
}
.experiences__button span {
  padding: 0.8em 4.5em;
}
@media (max-width: 767px) {
  .experiences__button {
    margin-top: 10%;
  }
  .experiences__button span {
    padding: 0.4em 4.5em;
  }
}

/*------------------------------
voices
------------------------------*/
.hosts-detail .voices {
  width: 78%;
  margin-top: min(calc(100 * var(--scale)), calc(100px * var(--max)));
}
@media (max-width: 767px) {
  .hosts-detail .voices {
    width: 90%;
    margin-top: 27%;
  }
}
.hosts-detail .voices__local-content {
  display: flex;
}
/*------------------------------
selection -hosts
------------------------------*/
.hosts-detail .selection {
  overflow: clip;
  background: #fff;
  padding: min(calc(250 * var(--scale)), calc(250px * var(--max))) 0 min(calc(120 * var(--scale)), calc(120px * var(--max)));
  position: relative;
}
@media (max-width: 767px) {
  .hosts-detail .selection {
    padding: 47% 0 min(calc(100 * var(--scale)), calc(100px * var(--max)));
  }
}
.hosts-detail .selection::before, .hosts-detail .selection::after {
  content: "";
  position: absolute;
  aspect-ratio: 1/1;
  background: url(../img/blur/01.png) no-repeat center center/100%;
  pointer-events: none;
  width: min(calc(1038 * var(--scale)), calc(1038px * var(--max)));
}
@media (max-width: 767px) {
  .hosts-detail .selection::before, .hosts-detail .selection::after {
    width: min(calc(447 * var(--scale)), calc(447px * var(--max)));
  }
}
.hosts-detail .selection::before {
  left: 0;
  top: 0;
  transform: translate(-40%, -20%);
}
@media (max-width: 767px) {
  .hosts-detail .selection::before {
    transform: translate(-40%, -40%);
  }
}
.hosts-detail .selection::after {
  right: 0;
  bottom: 0;
  transform: translate(40%, 30%);
}
.hosts-detail .selection > .inner {
  position: relative;
  z-index: 10;
}
/*# sourceMappingURL=hosts.css.map */