/*---------------------------------------------------------
                        共通
---------------------------------------------------------*/
/*-----------共通-----------*/
/*カラーパレット*/
:root {
  --color-font:#020202;
  --color-red:#f03737;
  --color-orange:#ff931e;
  --color-blue:#1f7adb;
  --font-size-xsmall: 0.63rem;
  --font-size-small:  0.85rem;
  --font-size-normal:  1rem;
  --font-size-large: 1.38rem;
  --font-size-xlarge: 1.63rem;
  --font-size-xxlarge: 2rem;
}

/* 箇条書き */
p.items, ul.items li, span.items{
  position: relative;
  padding-left: 0.85em;
  box-sizing: border-box;
  text-align: left;
  text-align: justify;
  text-justify: inter-ideograph;
}
  /* 点・四角 */
  p.items.dots, ul.items.dots > li,p.items.square, ul.items.square > li{
    position: relative;
    box-sizing: border-box;
  }
  p.items.dots::before,ul.items.dots > li::before{
    position: absolute;
    content: "・";
    display: block;
    margin-left: -1em;
  }
  p.items.square::before,ul.items.square > li::before{
    position: absolute;
    content: "◼︎";
    display: block;
    font-size: 70%;
    line-height: 2;
  }
  /* 米印 */
  p.items.asterisk::before,ul.items.asterisk > li::before, span.items.asterisk::before{
    position: absolute;
    content: "※";
    display: inline-block;
    margin-left: -1em;
  }
  span.items.asterisk::before{
    top: -3px;
    left: 1.1em;
  }


/*-----------レイアウト-----------*/
.freeContents{
  background: linear-gradient(-30deg,#71bbeb,#0071bc);
  overflow-x: hidden;
}


/*-----------ヘッダー-----------*/
  h1#LP_header picture *{
    width: 100%;
    max-width: 1180px;
    height: auto;
    object-fit: cover;
    margin: 0 auto;
  }
  @media screen and (min-width: 1180px) {
    h1#LP_header picture *{
    width: auto;
    max-height: 600px;
    object-fit: cover;
    margin: 0 auto;
  }
}

/*-----------内容-----------*/
#LP_cont{
  width: 76vw;
  max-width: 900px;
  margin: 0 auto;
  padding: 4vw 2.8vw 8vw;
  background-color: #fff;
}
  #LP_cont h2{
    font-size: 1.07em;
    text-align: center;
    padding-bottom: 2em;
  }
  .LP_cp{
    display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
    justify-content: space-between;
  }
    .LP_cp > li{
      width: 32.5%;
    }
    .LP_cp > li a{
      display: block;
      width: 36.9%;
      padding: 5% 10%;
      margin: 0 auto;
    }


/*-----------詳細-----------*/
#LP_detail *{
  font-size: 0.96em;
  line-height: 1.5;
}
#LP_detail > ol{
  margin-top: 8vw;
}
#LP_detail > ol > li{
  padding: 1.7%;
  margin-bottom: 3em;
  box-sizing: content-box;
}
li#detail_01{ border: 4px solid var(--color-red); align-items: center;}
li#detail_02{ border: 4px solid var(--color-orange); }
li#detail_03{ border: 4px solid var(--color-blue); }

  /* 1無料 */
  #detail_01 p{
    padding-bottom: 0.5em;
  }
   #detail_01 a{
    display: block;
    margin-right: 5px;
   }
  /* 2ポンタ */
  #detail_02 li{
    padding-top: 0.5em;
  }
  /* 3ロサンゼルス */
   #detail_03 > ul > li{
    padding-bottom: 1.2em;
  }
    #detail_02 h4,
    #detail_03 h4{
      width: fit-content;
      padding: 2px 8px;
      border-radius: 3px;
      margin: 0.5em 0;
    }
    #detail_02 h4{
      color: var(--color-orange);
      border: 1px solid var(--color-orange);
    }
    #detail_03 h4{
      color: var(--color-blue);
      border: 1px solid var(--color-blue);
    }
    #detail_02 h4 + p{
      margin-bottom: 1em;
    }
    #detail_02 h4 + p span,
    #detail_03 h4 + p span{
      font-size: 1.25em;
    }
    #detail_03 .items{
      padding-top: 0.5em;
    }
    #detail_03 a{
      display: block;
      margin-top: 0.75em;
    }
    #detail_03 .items.dots li{
      padding-bottom: 0.5em;
    }
    #detail_03 .items.dots li:last-child{
      padding-bottom: 0;
    }


/* ---------注意事項--------- */
#LP_notice{
  width: 80%;
  margin: 0 auto 1vw;
  padding-top: 2vw;
}
  #LP_notice > p, #LP_notice li{
    font-size: 0.76rem;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  #LP_notice p{
    padding-bottom: 2.5em;
  }
    #LP_notice h3{
      padding-bottom: 0.5em;
    }
    #LP_notice p + ul{
      margin-top: -2em;
    }
    #LP_notice ol > li:last-child{
      padding-top: 2.5em;
    }
    #LP_notice li:nth-child(3) li{
      padding-bottom: 0.5em;
    }

/* ---------予約サイトへのリンク--------- */
#LP_link{
  display: block;
  width: 60%;
  margin: 0 auto;
}


/*---------------------------------------------------------
                        SP
---------------------------------------------------------*/
@media screen and (max-width: 750px){
  .pc-only{
    display: none;
  }
  body{
    overflow-x: hidden;
  }
  /* ヘッダー */
  h1#LP_header {
    position: relative;
    width: 100vw;
    height: 62.95vw;
    overflow: hidden;
  }
    h1#LP_header picture *{
      position: absolute;
      display: block;
      content: ;
      width: auto;
      height: 62.95vw;
      top: 0;
      left: -12vw;
    }

  #LP_cont{
    width: 100vw;
  }
  .LP_cp > li a{
    width: 60%;
  }

  /* キャンペーン */
  .LP_cp li img, .LP_cp li a img{
    display: none;
  }
  .LP_cp{
    position: relative;
    display: block;
    height: fit-content;
    margin-bottom: 5vw;
    flex-direction: column;
  }
  .LP_cp li{
    width: 100%;
    height: 0;
    padding-bottom: 22.6%;
    margin-bottom: 0.5em;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .LP_cp li:nth-child(1){ background-image: url("../img/cp01-sp.png"); }
  .LP_cp li:nth-child(2){ background-image: url("../img/cp02-sp.png"); }
  .LP_cp li:nth-child(3){ background-image: url("../img/cp03-sp.png"); padding-bottom: 41%;}
  .LP_cp + .arrow_all{
    display: block;
    width: 15%;
    margin: 0 auto;
  }
    .LP_cp + .arrow_all img{
      margin: 0 auto;
    }
  .LP_cp li a{
    width: 100%;
    height: 20vw;
  }
  .LP_cp li:nth-child(3) a{
    height: 40vw;
  }


  /* 詳細 */
  #LP_detail > ol > li{
    padding: 3%;
  }
  #LP_detail > ol > li h3{
    width: 100%;
    height: 0;
    padding-bottom: 23.7%;
    margin-bottom: 1em;
    background-size: contain;
  }
  #detail_01 h3{ background: url("../img/detail_01-sp.png") no-repeat; }
  #detail_02 h3{ background: url("../img/detail_02-sp.png") no-repeat; }
  #detail_03 h3{ background: url("../img/detail_03-sp.png") no-repeat; padding-bottom: 41.6%!important;}
  #LP_detail > ol > li h3 img{
    display: none;
  }
  #LP_detail a{
    width: 90%;
    margin: 1.2em auto;
  }

  #LP_notice{
    width: 100%;
  }

  /* リンク */
  #LP_link{
    width: 100%;
  }

}




/*---------------------------------------------------------
                        PC
---------------------------------------------------------*/
@media screen and (min-width: 750px){
.sp-only, .sp-only *{
  display: none!important;
  height: 0px!important;
  padding: 0px!important;
  margin: 0px!important;
}
/* ヘッダー */
h1#LP_header{
  position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
  h1#LP_header picture *{
    width: 100%;
    max-width: 1180px;
    height: auto;
    object-fit: cover;
    margin: 0 auto;
  }
h1#LP_header::before,h1#LP_header::after{
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  max-width: 1180px;
  height: 0;
  padding-bottom: 50.85%;
  top: 0;
  background: url("../img/header-side.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}
h1#LP_header::before{left: 99.8%;}
h1#LP_header::after{right: 99.8%;}


/* ボタンの影 */
.freeContents .shadow{
  border-radius: 8%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.freeContents .shadow:hover{
  box-shadow: none;
  position: relative;
}
  .freeContents .shadow:hover img{
    margin-top: 5px;
    margin-left: 5px;
    margin-right: -5px;
  }
  #detail_01 a:hover{
    margin-top: -5px;
  }
  #LP_link.shadow:hover{
    margin-bottom: -5px;
  }

  /* 詳細 */
  #LP_detail > ol > li{
  display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
  justify-content: left;
  }
  #LP_detail > ol > li h3{
    width: 35.5%;
    margin-right: 3%;
  }
  #LP_detail > ol > li > div,
  #LP_detail > ol > li > ul{
    width: 61%;
  }


}