@charset "utf-8";

/* メインビジュアル */
.exp-mainVisual {
    width: 100%;
}

.exp-mainVisual img {
    width: 100%;
}

/* メインビジュアル下説明文 */
.exp-description {
    margin: 0 auto 0;
    padding: 30px 10px 50px;
    text-align: center;
}

.lp-page h1.exp-description__headline {
    font-size: 18px;
    line-height: 1.5em;
    margin: 0 0 30px;
}

.exp-description__textwrap {
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/bg_description.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    text-align: center;
    padding: 5px;
}

.exp-description__text::before,
.exp-description__text::after,
.exp-description__text span.cornerline::before,
.exp-description__text span.cornerline::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 78px;
  border: 1px solid #333;
}

.exp-description__text::before {
  top: -10px;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.exp-description__text::after {
  top: -10px;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.exp-description__text span.cornerline::before {
  bottom: -10px;
  left: 0;
  border-top: none;
  border-right: none;
}

.exp-description__text span.cornerline::after {
  bottom: -10px;
  right: 0;
  border-top: none;
  border-left: none;
}
.exp-description__text {
    padding: 15px 15px;
    position: relative;
}

/* モニター募集 */
.exp-monitor {
    padding: 30px 15px;
    color: #fff;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/bg_monitor.jpg) no-repeat #0B5D8E;
    background-size: cover;
}

h2.exp-monitor__headline {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 343px;
    height: 130px;
    font-size: 22px;
    color: #0B5D8E;
    text-align: center;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/monitor_headline.png) no-repeat 31px center;
    background-size: calc(100% - 33px) auto;
    margin: 0 auto 0;
    padding: 10px 0 0;
}

p.exp-monitor__text {
    margin: 0 0 30px;
}

.exp-monitor__wrap {
    position: relative;
    padding: 0 0 40px;
}

.exp-monitor__wrap::before {
    position:absolute;
    display: block;
    width: 57px;
    height: 57px;
    content:"";
    top: -10px;
    left: -10px;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/photo_lefttop.png) no-repeat center center;
    background-size: cover;
}

.exp-monitor__wrap::after {
    position:absolute;
    display: block;
    width: 57px;
    height: 57px;
    content:"";
    bottom: -10px;
    right: -10px;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/photo_rightbottom.png) no-repeat center center;
    background-size: cover;
}

.exp-monitor__wrap__image {
    width: 100%;
}

.exp-monitor__wrap__image img {
    width: 100%;
}

h3.exp-monitor__wrap__subtile {
    margin: 20px 0 12px;
    color: #fff;
    font-size: 16px;
}

.exp-monitor__eligibility {
    margin: 40px 0 0;
    border: 1px dashed #fff;
    padding: 15px;
}

h3.exp-monitor__eligibility__headline {
    color: #fff;
    font-size: 16px;
}

.exp-monitor__eligibility__list {
    list-style-type: none;
    list-style-position:inside;
    margin: 10px 0 20px;
    padding: 0;
}

.exp-monitor__eligibility__item {
    margin: 0;
    padding: 0;
    line-height: 1.7em;
}

/* ボタン */
.exp-button__wrap {
    margin: 25px 0 10px;
    border-radius: 4px;
    background-color:#fff;
}

.exp-button__wrap a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 46px;
    text-decoration: none;
    color: #0B5D8E;
    font-size: 18px;
    font-weight: bold;
    background-color: #FEFF00;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

.exp-button__wrap a::after {
    position: absolute;
    top: 50%;
    right: 15px;
    display:inline-block;
    content:"";
    width: 19px;
    height:3px;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/button_arrow.png) no-repeat center center;
    background-size: cover;
    transform: translateY(-50%);
}

.exp-button__wrap a:hover {
    opacity: 0.8;
}

/* 体験の流れ */

.exp-steps {
    padding: 30px 15px;
}

h2.exp-steps__headline {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 343px;
    height: 130px;
    font-size: 22px;
    color: #ffffff;
    text-align: center;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/headline.png) no-repeat 31px center;
    background-size: calc(100% - 33px) auto;
    margin: 0 auto 0;
    padding: 10px 0 0;
}

.exp-step {
    position: relative;
    margin: 0 0 30px;
    padding: 15px 10px 15px;
    border: 2px solid #0B5D8E;
    border-radius: 4px;
}

h3.exp-step__headline {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 0 20px;
    background: #fff;
    color: #0B5D8E;
    line-height:1em;
}

h3.exp-step__headline span {
    font-size: 24px;
}

.exp-step__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.exp-step__icon {
    width: 90px;
}

.exp-step__textwrap {
    width: calc(100% - 100px);
}

h4.exp-step__subtitle {
    margin: 0;
    padding: 0;
    color: #0B5D8E;
    font-size: 18px;
}

/* 参加申し込みフォーム */
.exp-apply {
    padding: 20px 15px 50px;
    text-align: center;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/bg_apply.jpg) no-repeat center top #8ED9FC;
    background-size: cover;
}

h2.exp-apply__headline {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 343px;
    height: 130px;
    font-size: 22px;
    color: #ffffff;
    text-align: center;
    background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/headline.png) no-repeat 31px center;
    background-size: calc(100% - 33px) auto;
    margin: 0 auto 0;
    padding: 10px 0 0;
}

.exp-apply__image__wrap {
    margin-bottom: 20px;
    text-align:center;
}

.lp-page figure.exp-apply__image {
    margin-bottom: 20px;
    width: 188px;
    height: 188px;
    margin: 0 auto 30px;
    display: block;
}

.exp-apply__icon {
    margin: 0 0 20px;
}

.lp-page .exp-apply__icon figure {
    width: 80px;
    margin: 0 auto 5px;
}

.lp-page .exp-apply__icon__text {
    color: #0B5D8E;
    font-size: 16px;
    font-weight: bold;
}

.exp-apply .exp-button__wrap {
    max-width: 310px;
    margin: 25px auto 10px;
}

/* バックナンバー */
.exp-backnumber {
    padding: 50px 15px 0;
    text-align: center;
}

.exp-backnumber__title__wrap {
    margin: 0 auto 30px;
}
.exp-backnumber__title__wrap::after {
    display: block;
    content:"";
    width: 100%;
    height: 33px;
    background:url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/line_backnumber.png) no-repeat center center;
    background-size: 100% auto;
}

h2.exp-backnumber__headline {
    color:#0B5D8E;
    font-size: 22px;
    margin-bottom: 0px
}

.exp-backnumber__subtitle {
    font-size: 16px;
}
.exp-backnumber__list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 15px;
}

.exp-backnumber__item {
    width: calc(50% - 10px);
    text-align: left;
    background: #f7f7f7;
}

.exp-backnumber__item a {
    text-decoration:none;
    color: #333;
}

.exp-backnumber__item__image {
    margin-bottom: 6px;
}

.exp-backnumber__item__area {
    font-size: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.exp-backnumber__item__area::before {
    display: inline-block;
    content:"";
    width: 7px;
    height: 14px;
    margin-right: 3px;
    background:url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/icon_area.png) no-repeat 0 0;
    background-size: 100% auto;
}

.exp-backnumber__item__item__hotel {
    font-size: 14px;
    font-weight: normal;
}

.exp-backnumber__item__textarea {
    margin: 0 8px;
}

p.exp-backnumber__text {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5em;
}

.exp-backnumber__item__date {
    font-size: 10px;
}


/*PC*/
@media screen and (min-width: 768px) {
    /* メインビジュアル */
    .exp-mainVisual {
        max-height: 667px;
    }

    .exp-mainVisual img {
        width: 100%;
        max-height:667px;
        object-fit: cover;
    }

    /* メインビジュアル下説明文 */
    .exp-description {
        width: 1120px;
        padding: 60px 0 65px;
    }

    .lp-page h1.exp-description__headline {
        font-size: 22px;
    }

    .exp-description__textwrap {
        /* width: 1113px; */
        margin: 40px auto;
        padding: 0;
    }

    .exp-description__text {
        font-size: 16px;
    }

    .exp-description__text::before,
    .exp-description__text::after,
    .exp-description__text span.cornerline::before,
    .exp-description__text span.cornerline::after {
      content: "";
      position: absolute;
      width: 65px;
      height: 48px;
      border: 1px solid #333;
    }

    .exp-description__text::before {
      top: -20px;
      left: 30px;
      border-right: none;
      border-bottom: none;
    }
    
    .exp-description__text::after {
      top: -20px;
      right: 30px;
      border-left: none;
      border-bottom: none;
    }
    
    .exp-description__text span.cornerline::before {
      bottom: -20px;
      left: 30px;
      border-top: none;
      border-right: none;
    }
    
    .exp-description__text span.cornerline::after {
      bottom: -20px;
      right: 30px;
      border-top: none;
      border-left: none;
    }

    /* モニター募集 */
    
    .exp-monitor {
        padding: 30px 15px;
        color: #fff;
        background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/bg_monitor_pc.jpg) no-repeat #0B5D8E;
        background-size: cover;
    }

    .exp-monitor__wrap {
        display: flex;
        justify-content: space-between;
    }

    .exp-monitor__wrap__image {
         width: 305px;   
    }

    .exp-monitor__wrap__textwrap {
        width: calc(100% - 325px)
    }

    p.exp-monitor__text {
        margin: 20px 0 30px;
        text-align: center;
    }

    .exp-monitor__container {
        width: 780px;
        margin: 0 auto;
    }

    /* ボタン */

    .exp-button__wrap {
        width: 353px;
        margin: 50px auto 30px
    }

    /* 体験の流れ */

    .exp-steps__wrap {
        width: 980px;
        margin: 30px auto 30px;
        display: flex;
        justify-content: space-between;
    }

    .exp-step__wrap {
         flex-direction: column;
         margin-top: 15px;
    }
    
    .exp-step {
        width: 198px;
    }

    h3.exp-step__headline {
        width: 80px;
        text-align: center;
        top: -5px;
    }
    
    .exp-step__icon {
        width: 144px;
    }
    
    .exp-step__textwrap {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    /* 参加申し込みフォーム */

    .exp-apply {
        padding: 20px 0 50px;
        text-align: center;
        background: url(/hotel/cms/wp-content/themes/tabirai/assets/images/experience/bg_apply_pc.jpg) no-repeat center top #8ED9FC;
        background-size: cover;
    }

    .exp-apply__icon__wrap {
        display: flex;
        width: 580px;
        margin: 30px auto 0;
        justify-content: space-between;
    }

    .exp-apply .exp-button__wrap {
        width: 353px;
        margin: 50px auto 30px
    }

    /* バックナンバー */

    .exp-backnumber {
        padding: 50px 0 100px;
    }

    .exp-backnumber__title__wrap::after {
        width: 357px;
        height: 33px;
        margin: 0 auto;
    }

    .exp-backnumber__list {
        width: 980px;
        margin: 0 auto 0;
        gap: 40px;
    }

    .exp-backnumber__item {
        width: 300px;
    }

    .exp-backnumber__item__textarea {
        margin: 0 10px 10px;
    }

    .p.exp-backnumber__text {
        font-size: 16px;
    }
}