@import url('https://fonts.cdnfonts.com/css/henri-didot');
@import url('https://fonts.cdnfonts.com/css/inter');
@import url('https://fonts.cdnfonts.com/css/zen-kaku-gothic-new');

#wrap{
    font-feature-settings: "palt" 1;
}

.didot{
    font-family: 'Henri Didot', sans-serif;
}
.inter{
    font-family: 'Inter', sans-serif;
}
.gothic{
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.o-modal__thumb:has(video){
    height: 22.16rem;
}
.o-modal__thumb video{
    width: auto;
    height: 100%;
}
.o-modal__inner{
    width: auto;
    min-width: 40rem;
}
@media (min-width: 768px) {
    .o-modal__inner{
        width: auto;
        min-width: 45rem;
    }
}

.o-experiences__top_cnt .innerBox_l{
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 0;
}

.innerBox{
    padding: 0 calc(40rem/16);
}
@media (min-width: 768px) {
    .innerBox{
        padding: 0;
    }
}

.o-experiences__top_cnt{
    overflow: hidden;
}
@media (min-width: 768px) {
    .o-experiences__top_cnt{
        max-width: 1600px;
        margin: 0 auto;
        position: relative;
    }
    .o-experiences__top_cnt:before,
    .o-experiences__top_cnt:after{
        content: "";
        display: block;
        width: calc(25rem/16);
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        z-index: 10;
    }
    .o-experiences__top_cnt:before{
        left: 0;
    }
    .o-experiences__top_cnt:after{
        right: 0;
    }
}

.o-experiences__top_mv{
    padding-top: calc(150rem/16);
    padding-bottom: calc(110rem/16);
    position: relative;
    z-index: 0;
}
.o-experiences__top_mv_title{
    margin-bottom: calc(70rem/16);
    transform: translateX(calc(-14rem/16));
}
.o-experiences__top_mv_text{
    margin-top: -0.5em;
    margin-bottom: -0.5em;
    font-size: calc(22rem/16);
    letter-spacing: 0.03em;
    line-height: calc(40/20);
}
@media (min-width: 768px) {
    .o-experiences__top_mv{
        padding-top: calc(250rem/16);
        padding-bottom: calc(150rem/16);
    }
    .o-experiences__top_mv_title{
        margin-bottom: calc(70rem/16);
        transform: translateX(calc(-14rem/16));
    }
    .o-experiences__top_mv_text{
        font-size: calc(14rem/16);
        line-height: calc(32/14);
    }
}

.o-experiences__top_social,
.o-experiences__top_art,
.o-experiences__top_personal,
.o-experiences__top_3day{
    position: relative;
    z-index: 2;
}
.o-experiences__top_art,
.o-experiences__top_3day{
    margin-top: calc(-60rem/16);
    z-index: 1;
}
.o-experiences__top_personal{
    margin-top: calc(-30rem/16);
    z-index: 0;
}
.o-experiences__top_social .innerBox,
.o-experiences__top_art .innerBox,
.o-experiences__top_personal .innerBox,
.o-experiences__top_3day .innerBox{
    display: flex;
    flex-direction: column;
    width: calc(680rem/16);
    margin: 0 auto;
    position: relative;
    z-index: 0;
}
.o-experiences__top_art .innerBox,
.o-experiences__top_3day .innerBox{
    align-items: flex-end;
    text-align: right;
}
@media (min-width: 768px) {
    .o-experiences__top_art,
	.o-experiences__top_3day{
        margin-top: calc(-250rem/16);
    }
    .o-experiences__top_personal{
        margin-top: calc(-310rem/16);
    }
}

.o-experiences__top_social_title,
.o-experiences__top_art_title,
.o-experiences__top_personal_title,
.o-experiences__top_3day_title{
    margin-bottom: calc(50rem/16);
    padding-top: calc(110rem/16);
    padding-bottom: calc(60rem/16);
    position: relative;
    z-index: 0;
}
.o-experiences__top_social_title{
    width: calc(508rem/16);
    margin-bottom: calc(30rem/16);
}
.o-experiences__top_art_title{
    width: calc(508rem/16);
}
.o-experiences__top_personal_title{
    width: calc(409rem/16);
}
.o-experiences__top_3day_title{
    width: calc(508rem/16);
}
.o-experiences__top_text{
    margin-top: -0.5em;
    margin-bottom: -0.5em;
    font-size: calc(22rem/16);
    letter-spacing: 0.05em;
    line-height: calc(40/20);
}
.o-experiences__top_social_title:before,
.o-experiences__top_art_title:before,
.o-experiences__top_personal_title:before,
.o-experiences__top_3day_title:before{
    content: "";
    color: #9f946a;
    font-size: calc(365rem/16);
    font-weight: 400;
    line-height: 1;
    opacity: 0.3;
    position: absolute;
    top: 0;
    z-index: -1;
}
.o-experiences__top_social_title:before{
    content: "01";
    left: 0;
    transform: translate(-0.125em,-0.1em);
}
.o-experiences__top_art_title:before{
    content: "02";
    right: 0;
    transform: translate(0.125em,-0.1em);
}
.o-experiences__top_personal_title:before{
    content: "03";
    left: 0;
    transform: translate(-0.125em,-0.1em);
}
.o-experiences__top_3day_title:before{
    content: "04";
    right: 0;
    transform: translate(0.125em,-0.1em);
}
@media (min-width: 768px) {
    .o-experiences__top_social .innerBox,
    .o-experiences__top_art .innerBox,
    .o-experiences__top_personal .innerBox,
	.o-experiences__top_3day .innerBox{
        width: auto;
        padding: 0 calc(80rem / 16);
    }
    .o-experiences__top_social_title:before{
        transform: translate(-0.25em,-0.125em);
    }
    .o-experiences__top_art_title:before{
        transform: translate(0.3em,-0.125em);
    }
    .o-experiences__top_personal_title:before{
        transform: translate(-0.25em,-0.125em);
    }
	.o-experiences__top_3day_title:before{
        transform: translate(0.3em,-0.125em);
    }
}

/* キービジュアルの画像の配置 */
#o-experiences__top_mv_line{
    position: absolute;
    left: 0;
    z-index: -1;
}
@media (max-width: 767px) {
    #o-experiences__top_mv_line{
        top: calc(-254rem/16);
    }
}
@media (min-width: 768px) {
    #o-experiences__top_mv_line{
        top: calc(-530rem/16);
    }
}

/* 01～03の画像の配置 */
#o-experiences__top_social_line,
#o-experiences__top_art_line,
#o-experiences__top_personal_line,
#o-experiences__top_3day_line{
    position: relative;
    z-index: -1;
}
@media (max-width: 767px) {
    #o-experiences__top_social_line{
        margin-top: calc(-90rem/16);
    }
    #o-experiences__top_art_line{
        margin-top: calc(-90rem/16);
    }
    #o-experiences__top_personal_line{
        margin-top: calc(-90rem/16);
    }
	#o-experiences__top_3day_line{
        margin-top: calc(-90rem/16);
		margin-bottom: calc(-80rem/16);
    }
}
@media (min-width: 768px) {
    #o-experiences__top_social_line{
        margin-top: calc(-430rem/16);
    }
    #o-experiences__top_art_line{
        margin-top: calc(-420rem/16);
    }
    #o-experiences__top_personal_line{
        margin-top: calc(-430rem/16);
    }
	#o-experiences__top_3day_line{
        margin-top: calc(-420rem/16);
		margin-bottom: calc(-65rem/16);
    }
}

/*
マスクの共通指定
pc.css/sp.css に記述された以外のページ固有のスタイル
*/
.clip{
    overflow: hidden;
    width: 100%;
    position: absolute;
    z-index: 3;
}
.clip .mask1{
    transform-origin:right top;
    top:-2%;
    left:0;
}
.clip .mask2{
    transform-origin:left bottom;
    bottom:-2%;
    left:0;
}
.clip .mask3{
    bottom:0;
    left:0;
}
.clip.on .mask1,
.clip.on .mask2{
  transform:skewY(0deg) scale(1,0);
}
.clip.on .mask3{
  transform:skewY(0deg) scale(0,1);
}

/* キービジュアルのマスク */
/* 右下がりなので、.lineの配置・基点は左上、.line:afterの基点は右下 */
#o-experiences__top_mv_line .line{
    height: calc(120rem / 16);
    transform: skewY(25deg); /*時計回りに25度傾ける*/
    transform-origin: left top; /* 変形の基点を左上に */
    top: 0;
    left: 0;
}
#o-experiences__top_mv_line .line:after{
    transform-origin: right bottom; /* 変形の基点を右下に */
}
@media (min-width: 768px) {
    #o-experiences__top_mv_line .line{
        height: calc(240rem / 16);
    }
}

/* SOCIAL のマスク */
/* 左下がりなので、.lineの配置・基点は右上、.line:afterの変形の基点は左下。.clipの配置・基点は左下 */
#o-experiences__top_social_line .line{
    height: calc(31rem/16);
    transform: translateY(-50%) skewY(-25deg); /*反時計回りに25度傾ける*/
    transform-origin: right center; /* 変形の基点を右中央に（赤ラインをマスクするため、基点を中央にする） */
    top: 0;
    right: 0;
}
#o-experiences__top_social_line .line:after{
    transform-origin: left bottom; /* 変形の基点を左下に */
}
#o-experiences__top_social_line .clip{
    height: calc(182rem/16);
    transform: skewY(-25deg); /*反時計回りに25度傾ける*/
    transform-origin: left bottom; /* 変形の基点を左下に */
    bottom: -1px;
    left: 0;
}
#o-experiences__top_social_line .clip .mask3{
    transform-origin: left bottom; /* 変形の基点を左下に */
}
@media (min-width: 768px) {
    #o-experiences__top_social_line .line{
        height: calc(62rem/16);
    }
    #o-experiences__top_social_line .clip{
        height: calc(360rem/16);
    }
}

/* ART&DESIGN-LED のマスク */
/* 右下がりなので、.lineの配置・基点は左上、.line:afterの基点は右下。.clipの配置・基点は右下 */
#o-experiences__top_art_line .line,
#o-experiences__top_3day_line .line{
    height: calc(10rem/16);
    transform: skewY(25deg); /*時計回りに25度傾ける*/
    transform-origin: left top; /* 変形の基点を左上に */
    top: 0;
    left: 0;
}
#o-experiences__top_art_line .line:after,
#o-experiences__top_3day_line .line:after{
    transform-origin: right bottom; /* 変形の基点を右下に */
}
#o-experiences__top_art_line .clip,
#o-experiences__top_3day_line .clip{
    height: calc(184rem/16);
    transform: skewY(25deg); /*時計回りに25度傾ける*/
    transform-origin: right bottom; /* 変形の基点を右下に */
    bottom: -1px;
    right: 0;
}
#o-experiences__top_art_line .clip .mask3,
#o-experiences__top_3day_line .clip .mask3{
    transform-origin: right bottom; /* 変形の基点を右下に */
}
@media (min-width: 768px) {
    #o-experiences__top_art_line .line,
	#o-experiences__top_3day_line .line{
        height: calc(62rem/16);
    }
    #o-experiences__top_art_line .clip,
	#o-experiences__top_3day_line .clip{
        height: calc(360rem/16);
    }
}

/* PERSONAL のマスク */
/* 左下がりなので、.lineの配置・基点は右上、.line:afterの基点は左下。.clipの配置・基点は左下 */
#o-experiences__top_personal_line .personal_line1{
    height: calc(24rem/16);
    transform: skewY(-25deg); /*反時計回りに25度傾ける*/
    transform-origin: right top; /* 変形の基点を右上に */
    top: 0;
    right: 0;
}
#o-experiences__top_personal_line .personal_line2{
    height: calc(52rem/16);
    transform: translateY(100%) skewY(-25deg); /*反時計回りに25度傾ける*/
    transform-origin: left bottom; /* 変形の基点を左下に（配置が左下のため） */
    bottom: 0;
    left: 0;
}
#o-experiences__top_personal_line .line:after{
    transform-origin: left bottom; /* 変形の基点を左下に */
}
#o-experiences__top_personal_line .personal_line2:after{
    transition-delay: 0.8s; /* 2本目のラインはタイミングをずらす */
}
#o-experiences__top_personal_line .clip{
    height: calc(182rem/16);
    transform: skewY(-25deg); /*反時計回りに25度傾ける*/
    transform-origin: left bottom; /* 変形の基点を左下に */
    bottom: -1px;
    left: 0;
}
#o-experiences__top_personal_line .clip .mask3{
    transform-origin: left bottom; /* 変形の基点を左下に */
}
@media (min-width: 768px) {
    #o-experiences__top_personal_line .personal_line1{
        height: calc(60rem/16);
    }
    #o-experiences__top_personal_line .personal_line2{
        height: calc(120rem/16);
    }
    #o-experiences__top_personal_line .clip{
        height: calc(360rem/16);
    }
}

.o-experiences__view_more{
    width: calc(300rem / 16);
    margin-top: calc(40rem/16);
    background: #000;
}
.o-experiences__view_more a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(64rem / 16);
    color: #fff;
    font-size: calc(18rem/16);
    letter-spacing: 0.05em;
    line-height: 1;
}
.o-experiences__view_more a:hover{
    text-decoration: none;
}

.o-experiences__bg_sl,
.o-experiences__bg_bk{
    width: calc(506rem / 16);
    margin: 0 auto;
}
.o-experiences__bg_sl{
    background: #d7d6d2;
}
.o-experiences__bg_bk{
    background: #373737;
}
.o-experiences__border_bk,
.o-experiences__border_wh{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(94rem / 16);
    font-size: calc(24rem / 16);
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.235em;
    position: relative;
}
.o-experiences__border_bk{
    color: #373737;
}
.o-experiences__border_wh{
    color: #fff;
}
.o-experiences__border_bk::before,
.o-experiences__border_wh::before{
    content: "";
    display: block;
    width: calc(100% - (14rem/16));
    height: calc(100% - (14rem/16));
    position: absolute;
    top: calc(7rem/16);
    left: calc(7rem/16);
}
.o-experiences__border_bk::before{
    border: 1px solid #373737;
}
.o-experiences__border_wh::before{
    border: 1px solid #fff;
}
.o-experiences__border_bk:hover,
.o-experiences__border_wh:hover {
    text-decoration: none;
}
@media (max-width: 767px) {
    .o-experiences__bg_sl:not(:last-child),
    .o-experiences__bg_bk:not(:last-child){
        margin-bottom: calc(40rem / 16);
    }
}
@media (min-width: 768px) {
    .o-experiences__bg_sl,
    .o-experiences__bg_bk{
        width: calc(338rem / 16);
        margin: 0;
    }
    .o-experiences__border_bk,
    .o-experiences__border_wh {
        height: calc(62rem / 16);
        font-size: calc(16rem/16);
    }
    .o-experiences__border_bk::before,
    .o-experiences__border_wh::before{
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        left: 4px;
    }
    .o-experiences__btn_wrap{
        display: flex;
        justify-content: center;
        gap: calc(40rem / 16);
    }
}

.p-pet__pet_mv{
}
.p-pet__mv_title{
    padding-top: calc(64rem/16);
    padding-bottom: calc(98rem/16);
}
.p-pet__mv_title2{
    padding-top: calc(64rem/16);
    padding-bottom: calc(98rem/16);
}
.p-pet__mv_title h1{
    width: calc(356rem/16);
    height: calc(20rem/16);
    margin: 0 auto;
    line-height: 0.1;
}
.p-pet__mv_title2 h1{
    width: calc(440rem/16);
    height: calc(20rem/16);
    margin: 0 auto;
    line-height: 0.1;
}
.p-pet__mv_intro{
    padding-top: calc(56rem/16);
    padding-bottom: calc(64rem/16);
    background-color: #f5f4f2;
    font-size: calc(25rem/16);
    text-align: center;
    letter-spacing: 0.05em;
    line-height: calc(45/25);
}
.p-pet__mv_intro p{
    margin-top: -0.5em;
    margin-bottom: -0.5em;
}
.p-pet__mv_intro_h,
.p-pet__mv_intro_cnt{
    display: inline-block;
}
.p-pet__mv_intro_h{
    color: #9f946a;
    font-size: calc(28rem/16);
    font-weight: 400;
}
.p-pet__mv_intro_cnt{
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}
.p-pet__mv_with_pet{
    font-size: calc(20rem/16);
    letter-spacing: 0.4em;
    line-height: 1;
}
@media (min-width: 768px) {
    .p-pet__mv_title{
        padding-top: calc(60rem/16);
        padding-bottom: calc(80rem/16);
    }
    .p-pet__mv_image{
        position: relative;
        z-index: 0;
    }
    .p-pet__mv_image picture{
        width: calc(1200rem/16);
        margin: 0 auto;
        position: relative;
        z-index: 10;
    }
    .p-pet__mv_image:after{
        content:"";
        display: block;
        width: 100%;
        height: 50%;
        background-color: #f5f4f2;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
    .p-pet__mv_intro{
        font-size: calc(19rem/16);
        line-height: calc(24/19);
    }
    .p-pet__mv_intro p{
        margin-top: 0;
        margin-bottom: 0;
    }
    .p-pet__mv_intro_h{
        font-size: calc(22rem/16);
    }
    .p-pet__mv_with_pet{
        font-size: calc(14rem/16);
    }
}

.p-pet__intro{
    padding-top: calc(140rem/16);
    padding-bottom: calc(170rem/16);
    color: #6e6e6e;
    font-size: calc(24rem/16);
    text-align: center;
    letter-spacing: 0.05em;
    background: url("../images/experiences/pet/bg_bottom.png") no-repeat right bottom/contain;
}
.p-pet__intro_lead{
    margin-top: -0.5em;
    margin-bottom: calc(140rem/16 - 0.5em);
    color: #9f946a;
    line-height: calc(51/22);
}
.p-pet__intro_title{
    margin-bottom: 0.75em;
    font-size: calc(30rem/16);
    letter-spacing: 0.125em;
}
.p-pet__intro_cnt{
    margin-bottom: -1.0em;
    line-height: calc(82/22);
}
@media (min-width: 768px) {
    .p-pet__intro{
        padding-top: calc(110rem/16);
        padding-bottom: calc(120rem/16);
        font-size: calc(15rem/16);
        background: url("../images/experiences/pet/bg_bottom_pc.png") no-repeat center bottom/contain;
    }
    .p-pet__intro_lead{
        margin-top: -0.75em;
        margin-bottom: calc(90rem/16 - 0.5em);
        line-height: calc(34/15);
    }
    .p-pet__intro_title{
        font-size: calc(20rem/16);
    }
    .p-pet__intro_cnt{
        line-height: calc(52/15);
    }
}

.p-pet__days{
    padding-top: calc(90rem / 16);
    padding-bottom: calc(90rem / 16);
    background-color: #373737;
    color: #fff;
    font-size: calc(22rem/16);
    letter-spacing: 0.125em;
    line-height: calc(62/20);
}
.p-pet__days_title{
    width: calc(430rem / 16);
    margin: 0 auto calc(72rem / 16);
    text-align: center;
    line-height: 1;
}
.p-pet__movie{
    width: 100%;
    aspect-ratio: 670/384;
    margin-bottom: calc(24rem / 16);
    border: 10px solid #000;
    background-color: #908b8a;
}
.p-pet__movie video{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.p-pet__days_text{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(285rem / 16);
    border-left: 1px solid #fff;
    margin-left: calc(10rem/16);
    text-align: center;
    line-height: calc(75/20);
}

.p-3__days_text{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(285rem / 16);

    margin-left: calc(10rem/16);
    text-align: center;
    line-height: calc(75/20);
}
.p-pet__schedule_title{
    display: flex;
    flex-direction: column;
    width: max-content;
    margin-bottom: -0.75em;
    font-weight: 400;
    text-align: right;
    line-height: 1;
    position: relative;
    z-index: 10;
}
.p-pet__schedule_title span,
.p-pet__schedule_title small{
    display: inline-block;
}
.p-pet__schedule_title span{
    font-size: calc(82rem/16);
    letter-spacing: 0.05em;
}
.p-pet__schedule_title small{
    margin-bottom: calc(6rem/16);
    font-size: calc(20rem/16);
}
.p-pet__schedule_column:nth-of-type(2n) .p-pet__schedule_title{
    margin-left: auto;
}
.p-pet__schedule_text{
    display: flex;
    height: calc(220rem/16);
    margin-top: calc(24rem / 16);
    margin-bottom: calc(24rem / 16);
    padding-top: calc(18rem / 16);
}
.p-pet__schedule_column:nth-of-type(2n+1) .p-pet__schedule_text{
    text-align: left;
    border-right: 1px solid #fff;
    margin-right: calc(10rem/16);
}
.p-pet__schedule_column:nth-of-type(2n) .p-pet__schedule_text{
    justify-content: flex-end;
    text-align: right;
    border-left: 1px solid #fff;
    margin-left: calc(10rem/16);
}
.p-pet__schedule_column:last-child .p-pet__schedule_text{
    border-left: none;
    border-right: none;
}
.p-pet__schedule_column figure{
    position: relative;
    z-index: 0;
}
@media (min-width: 768px) {
    .p-pet__days{
        padding-top: calc(110rem / 16);
        padding-bottom: calc(90rem / 16);
        font-size: calc(15rem/16);
        line-height: calc(43/15);
    }
    .p-pet__days_title{
        margin: 0 auto calc(64rem / 16);
    }
    .p-pet__movie{
        margin-bottom: calc(18rem / 16);
        border: 20px solid #000;
    }
    .p-pet__days_text{
        align-items: flex-end;
        height: calc(244rem / 16);
        margin-left: calc(64rem / 16);
        margin-right: calc(64rem / 16);
        margin-bottom: calc(18rem / 16);
        line-height: calc(50/15);
    }
    .p-pet__days_text p{
        margin-bottom: calc(32rem / 16);
    }
    .p-pet__schedule_title{
        margin-bottom: -0.75em;
    }
    .p-pet__schedule_title span{
        font-size: calc(60rem / 16);
    }
    .p-pet__schedule_title small{
        margin-bottom: 0;
        font-size: calc(12rem / 16);
    }
    .p-pet__schedule_column:nth-of-type(2n+1) .p-pet__schedule_text{
        margin-right: calc(64rem / 16);
    }
    .p-pet__schedule_column:nth-of-type(2n) .p-pet__schedule_text{
        margin-left: calc(64rem / 16);
    }
}

.p-pet__4points{
    padding-top: calc(110rem/16);
    padding-bottom: calc(90rem/16);
    background-image: url("../images/experiences/pet/bg_top.png"),url("../images/experiences/pet/bg_4points.png");
    background-repeat: no-repeat,repeat-y;
    background-position: left top,left top;
    background-size: 100% auto,100% auto;
}
.p-pet__4points_lead{
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    align-items: center;
    gap: 2.0em;
    margin-bottom: calc(72rem/16);
    color: #6e6e6e;
    font-size: calc(25rem/16);
    letter-spacing: 0.125em;
    line-height: 1;
    text-align: center;
}
.p-pet__4points_lead::before,
.p-pet__4points_lead::after{
    content: "";
    display: inline-block;
    height: 1px;
    background-color: #b7b7b7;
}
.p-pet__4points_title{
    margin-bottom: calc(90rem/16);
    color: #6e6e6e;
    font-size: calc(20rem/16);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
}
.p-pet__4points_title small{
    display: inline-block;
    font-size: calc(20rem/16);
}
.p-pet__4points_title span{
    font-size: calc(48rem/16);
    letter-spacing: 0.125em;
}
.p-pet__4points_title span b{
    font-size: calc(80rem/16);
    font-weight: 400;
}
@media (min-width: 768px) {
    .p-pet__4points{
        padding-top: calc(180rem/16);
        padding-bottom: calc(120rem/16);
        background-image: url("../images/experiences/pet/bg_top_pc.png"),url("../images/experiences/pet/bg_4points_pc.png");
        background-repeat: no-repeat,no-repeat;
        background-position: center top,center bottom;
        background-size: contain,contain;
    }
    .p-pet__4points_lead{
        grid-template-columns: max-content 1fr;
        width: calc(1200rem/16);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: calc(96rem / 16);
        font-size: calc(20rem / 16);
        text-align: left;
    }
    .p-pet__4points_lead::before{
        display: none;
    }
    .p-pet__4points_title{
        margin-bottom: calc(135rem / 16);
        font-size: calc(34rem / 16);
        text-align: left;
    }
    .p-pet__4points_title small{
        margin-bottom: 0.75em;
        font-size: calc(18rem / 16);
    }
    .p-pet__4points_title span{
        font-size: calc(34rem / 16);
    }
    .p-pet__4points_title span b{
        font-size: calc(55rem/16);
    }
}

.p-pet__point_column{
    position: relative;
    margin-bottom: calc(120rem/16);
    color: #6e6e6e;
    font-size: calc(22rem/16);
    font-weight: 400;
    letter-spacing: 0.125em;
}
.p-pet__point_column::before,
.p-pet__point_column::after{
    content: '';
    display: block;
    width: calc(72rem / 16);
    height: calc(72rem / 16);
    position: absolute;
}
.p-pet__point_column:nth-of-type(2n+1)::before{
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    top: 0;
    left: 0;
}
.p-pet__point_column:nth-of-type(2n+1)::after{
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    bottom: 0;
    right: 0;
}
.p-pet__point_column:nth-of-type(2n)::before{
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    top: 0;
    right: 0;
}
.p-pet__point_column:nth-of-type(2n)::after{
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    bottom: 0;
    left: 0;
}
.p-pet__point_text_wrap{
    padding-top: calc(90rem/16);
}
.p-pet__point_title{
    margin-top: -0.25em;
    margin-bottom: calc(60rem/16 - 0.25em);
    padding-left: calc(54rem/16);
    font-size: calc(30rem/16);
    font-weight: 400;
    letter-spacing: 0.125em;
    line-height: 1.5;
}
.p-pet__point_title span{
    display: inline-block;
    margin-bottom: calc(90rem/16 - 0.25em);
    line-height: 1.0;
}
.p-pet__point_title span b{
    font-size: calc(40rem/16);
    font-weight: 400;
}
.p-pet__point_text{
    margin-top: -1.0em;
    margin-bottom: calc(90rem/16 - 1.0em);
    padding-left: calc(54rem/16);
    line-height: calc(64.5/20);
}
.p-pet__point_image_wrap{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: calc(20rem/16);
}
@media (min-width: 768px) {
    .p-pet__point_column{
        display: flex;
        margin-bottom: calc(220rem/16);
        font-size: calc(14rem/16);
    }
    .p-pet__point_column:last-child{
        margin-bottom: calc(90rem/16);
    }
    .p-pet__point_column:nth-of-type(2n){
        flex-direction: row-reverse;
    }
    .p-pet__point_column::before,
    .p-pet__point_column::after{
        width: calc(72rem / 16);
        height: calc(72rem / 16);
    }
    .p-pet__point_text_wrap{
        display: grid;
        grid-template-columns: max-content;
        grid-template-rows: max-content 1fr;
        justify-content: center;
        width: calc(100% * (560/1200));
        padding-top: calc(100rem/16);
    }
    .p-pet__point_title{
        margin-top: -0.25em;
        margin-bottom: calc(40rem/16 - 0.25em);
        padding-left: 0;
        font-size: calc(20rem/16);
    }
    .p-pet__point_title span{
        margin-bottom: calc(60rem/16 - 0.25em);
    }
    .p-pet__point_title span b{
        font-size: calc(30rem/16);
    }
    .p-pet__point_text{
        margin-top: -1.0em;
        margin-bottom: -1.0em;
        padding-left: 0;
        line-height: calc(43/14);
    }
    .p-pet__point_image_wrap{
        width: calc(100% * (640/1200));
        gap: calc(20rem/16);
    }
	.p-pet__point_image_wrap2{
        width: calc(100% * (900/1200));
        gap: calc(20rem/16);
    }
}

.p-pet__report{
    padding-top: calc(110rem/16);
    padding-bottom: calc(170rem/16);
    background: url("../images/experiences/pet/bg_report.png") no-repeat left top/100% auto;
}
.p-pet__report_title{
    width: calc(472rem/16);
    margin: 0 auto calc(70rem/16 - 0.5em);
    font-size: calc(20rem/16);
    font-weight: 500;
    letter-spacing: 0.125em;
    line-height: calc(43/20);
    text-align: center;
    line-height: 1;
}
.p-pet__report_title figure{
    line-height: calc(20rem/16);
}
.p-pet__report_title span{
    display: inline-block;
    margin-top: 1.0em;
}
.p-pet__report_image_wrap{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: calc(36rem/16);
    margin-bottom: calc(130rem/16);
}
.p-pet__report_image_wrap li a{
    display: block;
    position: relative;
    z-index: 0;
}
.p-pet__report_movie::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #7d7d7d;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.p-pet__report_movie::after{
    content: "";
    display: inline-block;
    width: calc(67rem/16);
    height: calc(67rem/16);
    background: url("../images/experiences/pet/play.png") no-repeat center/contain;
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
}
@media (min-width: 768px) {
    .p-pet__report{
        background: url("../images/experiences/pet/bg_report_pc.png") no-repeat center bottom/contain;
    }
    .p-pet__report_title{
        margin: 0 auto calc(100rem/16 - 0.5em);
        font-size: calc(15rem/16);
        line-height: calc(43/15);
    }
    .p-pet__report_image_wrap{
        grid-template-columns: repeat(3,1fr);
        column-gap: calc(60rem/16);
        row-gap: calc(90rem/16);
        margin-bottom: calc(100rem/16);
    }
}

/*ここから3-DAY*/

.p-3day_text{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(285rem / 16);

    margin-left: calc(10rem/16);
    text-align: center;
    line-height: calc(75/20);
}

.p-3day__schedule_column .p-3day__schedule_text{
    margin-right: calc(10rem/16);
}


.p-3day__schedule_text{
	/*display: flex;*/

    margin-top: calc(24rem / 16);
    margin-bottom: 60px;
    padding-top: calc(18rem / 16);
	line-height: 2.0em;
}


/*2カラムのflexbox*/
.main {
    margin-bottom: 10px;
}

.main img {
    max-width: 330px;
}

.side {}

.main,
.side {
    padding: 2%;
    border-radius: 10px
}

@media (min-width : 500px) {
    .flexbox {
        display: -webkit-flex;
        display: flex;
        border-left: 1px solid #fff;
        text-align: left;
    }

    .main {
        margin: 0 10px 0 0;
    }
}

/* 3 Day Wedding Timeline */
.p-3day__schedule__timeline,
.p-3day__schedule__timeline * {
    box-sizing: border-box;
}

.p-3day__schedule__timeline {
    margin: 0 0 0 20px;
}
.p-3day__schedule__timeline__container {
    padding: 30px 0 10px 20px;
    border-left: 1px solid #fff;
}

.p-3day__schedule__timeline__fig img {
    max-width: 100%;
}

.p-3day__schedule__timeline__txt {
    margin: 1.5em 0 3.5em;
    font-size: calc(14 / 9 * 1rem);
    line-height: 2;
}

@media screen and (min-width: 768px) {
    .p-3day__schedule__timeline {
        margin: 0 0 0 100px;
    }
    .p-3day__schedule__timeline__container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;
        padding: 40px 0 40px 40px;
    }

    .p-3day__schedule__timeline__fig,
    .p-3day__schedule__timeline__txt {
        flex-shrink: 1;
        flex-grow: 0;
        margin: 0;
        width: calc((100% - 40px) * .5);
        font-size: calc(12 / 12 * 1rem);
    }
}

/*styleページのプラン・フェア一覧*/
.p-style{
    padding-top: calc(110rem/16);
    padding-bottom: calc(170rem/16);

}

@media (max-width: 400px) {
.p-style{
     display: flex;   
	flex-wrap: wrap;
    }
}