@charset "UTF-8";
/* ::::::::::  LP  :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.globalHeader .headerNav01 li a {
  pointer-events: all !important;
}

.globalHeader .helpLink {
  margin-left: 0;
}

.globalHeader .helpLink dt {
  cursor: pointer;
  pointer-events: all;
}

.globalFooter .contactBtnList li a {
  pointer-events: auto;
}

.globalFooter .footerNavList li a {
  pointer-events: auto !important;
}

.globalNav .contactBtnList li a {
  pointer-events: auto !important;
}

small {
  color: #808080;
  font-size: 1.6rem;
}

.topBtn {
  font-size: 1.6rem;
}

.topBtn a::before {
  border-width: 5px;
  border-bottom-width: 9px;
}

.topBtn:last-of-type {
  padding-bottom: 0;
}

/* =========================================================
kv
========================================================= */
.kv {
  background: url("/img/vcommon/lp/kv.jpg") no-repeat center/cover;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 0 0 10px #000;
}

@media only screen and (max-width: 767px) {
  .kv {
    background-image: url("/img/vcommon/lp/kv_sp.jpg");
    line-height: 1.6;
    font-size: 1.8rem;
  }
}

.kv .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 600px;
}

@media only screen and (max-width: 767px) {
  .kv .wrapper {
    height: 530px;
  }
}

.kv .tag {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  min-width: 180px;
  margin: 0 5px;
  padding: 2px 10px;
  font-size: 1.8rem;
  text-shadow: none;
}

@media only screen and (max-width: 767px) {
  .kv .tag {
    min-width: 120px;
    margin: 0 0 10px;
    padding: 5px 5px;
    font-size: 1.3rem;
  }
}

.kv .tag.red {
  background: #E23945;
}

.kv .tag.lightblue {
  background: #1C90EF;
}

.kv .tag.green {
  background: #4DA334;
}

@media only screen and (max-width: 767px) {
  .kv .tag.green {
    margin-right: 100px;
  }
}

.kv .tag .fukidashi {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  border: 2px solid;
  background: #fff;
  width: 130px;
  height: 30px;
  line-height: 26px;
  color: #4DA334;
  margin: auto;
  font-size: 1.4rem;
}

@media only screen and (max-width: 767px) {
  .kv .tag .fukidashi {
    top: 0;
    right: -105px;
    left: auto;
    width: 94px;
    font-size: 1.1rem;
  }
}

.kv .tag .fukidashi::after {
  content: '';
  display: block;
  border: 5px solid transparent;
  border-top: 7px solid;
  width: 0;
  height: 0;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .kv .tag .fukidashi::after {
    border: 5px solid transparent;
    border-right: 7px solid;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -13px;
    margin: auto;
  }
}

.kv .icon_plus {
  vertical-align: middle;
  fill: #fff;
  width: 20px;
  height: 20px;
  margin: 0 0 5px;
}

@media only screen and (max-width: 767px) {
  .kv .icon_plus {
    margin: 0 5px 5px;
  }
}

@media only screen and (max-width: 767px) {
  .kv br + .icon_plus {
    margin-left: 0;
  }
}

.kv .lead {
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .kv .lead {
    font-size: 1.3rem;
  }
}

.kv .line {
  margin: -20px 0 20px;
}

@media only screen and (max-width: 767px) {
  .kv .line {
    margin: 3px 0 15px;
  }
}

.kv h1 .logo {
  display: block;
  letter-spacing: .15em;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 5rem;
}

@media only screen and (max-width: 767px) {
  .kv h1 .logo {
    font-size: 4rem;
  }
}

.kv h1 .title {
  position: relative;
  display: inline-block;
}

.kv h1 .title::before, .kv h1 .title::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  background: #fff;
  width: 10px;
  height: 2px;
  margin: 0 10px;
}

@media only screen and (max-width: 767px) {
  .kv h1 .title::before, .kv h1 .title::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14px;
    margin: auto;
  }
}

@media only screen and (max-width: 767px) {
  .kv h1 .title::before {
    left: -20px;
  }
}

@media only screen and (max-width: 767px) {
  .kv h1 .title::after {
    right: -20px;
  }
}

/* =========================================================
.btnArea
========================================================= */
.btnArea {
  background: #1C90EF;
}

.btnArea .wrapper {
  padding: 30px 0;
}

@media only screen and (max-width: 767px) {
  .btnArea .wrapper {
    padding: 20px;
  }
}

.btnArea .btnList li a {
  border: 1px solid #1C90EF;
  background-color: #fff;
  color: #1C90EF;
  font-size: 1.6rem;
}

@media (min-width: 768px) {
  .btnArea .btnList li a {
    width: 385px;
  }
}

.btnArea .btnList li a img {
  vertical-align: middle;
  margin: 0 10px 5px 0;
}

/* =========================================================
campaign
========================================================= */
.campaign {
  position: relative;
  z-index: 0;
  background: #F4F9FE;
}

.campaign .wrapper {
  color: #29231E;
}

.campaign .wrapper h3 {
  margin-bottom: 15px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
}

.campaign .wrapper .c_red {
  font-size: 1.6rem;
}

.campaign .slider01 .listItem:hover {
  margin-top: 10px;
}

.campaign .slider01 .listItem .textArea h3 {
  height: auto;
  text-align: left;
}

.discountList {
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0 0;
}

@media only screen and (max-width: 767px) {
  .discountList {
    display: block;
    margin: 30px 0 0;
  }
}

.discountList li {
  border: 1px solid #ccc;
  width: calc(50% - 20px);
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .discountList li {
    width: 100%;
  }
  .discountList li + li {
    margin-top: 20px;
  }
}

.discountList li .title {
  padding: 8px 0;
  color: #fff;
  font-size: 1.7rem;
  font-weight: bold;
}

.discountList li .bg_lightblue {
  background: #1C90EF;
}

.discountList li .bg_blue {
  background: #042784;
}

.discountList li .bg_green {
  background: #4DA334;
}

.discountList li .c_green {
  color: #4DA334;
}

.discountList li:nth-child(odd) {
  margin-right: 40px;
}

.discountList li a {
  display: block;
}

.discountListWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px 10px 15px;
}

@media only screen and (max-width: 767px) {
  .discountListWrap {
    position: relative;
    display: block;
    padding: 12px 20px;
  }
}

@media only screen and (max-width: 767px) {
  .discountListWrap .logo {
    margin-bottom: 12px;
  }
}

.discountListWrap .logo svg {
  display: block;
  max-width: 25px;
  max-height: 25px;
  margin: 0 auto 5px;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .logo svg {
    max-width: 27px;
    max-height: 27px;
  }
}

.discountListWrap .logo .car {
  fill: #1C90EF;
}

.discountListWrap .logo .bullettrain {
  fill: #509F7D;
}

.discountListWrap .discount {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.discountListWrap .discount dl {
  display: flex;
  flex-direction: column;
  width: 120px;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .discount dl {
    width: calc(50% - 10px);
  }
  .discountListWrap .discount dl.coupon {
    width: 100%;
    margin-top: 10px;
  }
}

.discountListWrap .discount dl dt {
  border-radius: 4px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .discount dl dt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-bottom: 6px;
    line-height: 1.2;
  }
}

.discountListWrap .discount dl dd {
  margin-top: auto;
  line-height: 1;
  font-weight: bold;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .discount dl dd {
    font-size: 1.3rem;
  }
}

.discountListWrap .discount dl dd .num {
  font-family: "Roboto", sans-serif;
  font-size: 3.5rem;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .discount dl dd .num {
    font-size: 3.1rem;
  }
}

.discountListWrap .discount dl dd small {
  color: inherit;
  font-size: 1.2rem;
}

.discountListWrap .discount dl dd .border {
  display: inline-block;
  border: 1px solid;
  padding: 3px 10px;
  font-size: 1rem;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .discount dl dd .border {
    padding: 3px 5px;
  }
}

.discountListWrap .discount .plus_icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #E0BF19;
  width: 23px;
  height: 23px;
  margin: auto -2px 0 -2px;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .discount .plus_icon {
    width: 20px;
    height: 20px;
    margin: auto 0 5px;
  }
  .discountListWrap .discount .plus_icon:last-of-type {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.discountListWrap .discount .plus_icon svg {
  fill: #fff;
  width: 13px;
  height: 13px;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .discount .plus_icon svg {
    width: 10px;
    height: 10px;
  }
}

.discountListWrap .fukidashi {
  margin-top: -70px;
}

@media only screen and (max-width: 767px) {
  .discountListWrap .fukidashi {
    position: absolute;
    top: -10px;
    right: 3px;
    width: 60px;
    height: 60px;
    margin: 0;
  }
}

.discountWrap {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .discountWrap {
    display: block;
  }
}

.discountWrap .textArea {
  width: 400px;
  padding-right: 15px;
  color: #29231E;
  font-weight: bold;
  font-size: 1.7rem;
}

@media only screen and (max-width: 767px) {
  .discountWrap .textArea {
    width: 100%;
    padding-right: 0;
  }
}

.discountWrap .textArea h4 {
  margin-bottom: 5px;
  color: #1C90EF;
  font-size: 2.2rem;
}

@media (min-width: 768px) {
  .discountWrap .discountList {
    width: 700px;
    margin: 0;
  }
}

@media only screen and (max-width: 767px) {
  .discountWrap .discountList {
    margin: 20px 0;
  }
}

@media (min-width: 768px) {
  .discountWrap .discountList li {
    width: 100%;
  }
  .discountWrap .discountList li:nth-child(odd) {
    margin-right: 0;
  }
}

.discountWrap .discountListWrap {
  background: #fff;
}

@media (min-width: 768px) {
  .discountWrap .discountListWrap {
    padding: 10px 5px 7px 10px;
  }
}

@media (min-width: 768px) {
  .discountWrap .discountListWrap .discount .stay {
    width: 110px;
  }
  .discountWrap .discountListWrap .discount .highway {
    width: 125px;
  }
  .discountWrap .discountListWrap .discount .coupon {
    width: 166px;
  }
  .discountWrap .discountListWrap .discount .plus_icon {
    width: 27px;
    height: 27px;
    margin: auto -2px 0 -2px;
  }
  .discountWrap .discountListWrap .discount .plus_icon svg {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 768px) {
  .discountWrap .discountListWrap .fukidashi {
    margin-top: -45px;
    width: 95px;
  }
}

@media only screen and (max-width: 767px) {
  .discountWrap .discountListWrap .fukidashi {
    width: 65px;
    height: 65px;
  }
}

/* =========================================================
detail
========================================================= */
.detail .topBtn:last-child {
  padding-bottom: 0;
}

.detailNav {
  position: relative;
  border-top: 2px solid #ccc;
  border-bottom: 4px solid #ccc;
  background: #fff;
  width: 100%;
  height: 62px;
}

@media only screen and (max-width: 767px) {
  .detailNav {
    height: 56px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    display: flex;
  }
}

.detailNav .wrapper {
  padding: 0;
}

.detailNavList {
  display: flex;
  overflow-x: scroll;
}

@media only screen and (max-width: 767px) {
  .detailNavList {
    padding: 0 20px;
  }
}

.detailNavList li {
  text-align: center;
}

.detailNavList li + li {
  margin-left: 20px;
}

@media only screen and (max-width: 767px) {
  .detailNavList li:last-child {
    padding-right: 20px;
  }
}

.detailNavList li a {
  display: block;
  height: 60px;
  padding: 0 5px;
  line-height: 56px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #29231E;
  white-space: nowrap;
}

@media only screen and (max-width: 767px) {
  .detailNavList li a {
    height: 54px;
    padding: 0 4px;
    line-height: 50px;
  }
}

.detailNavList li.current a {
  border-bottom: 4px solid #042784;
}

.detail .point {
  padding: 40px;
  font-size: 1.6rem;
}

@media only screen and (max-width: 767px) {
  .detail .point {
    padding: 20px;
  }
}

.detail .point .secTitle03 {
  margin: 40px 0 20px;
}

.detail .point .secTitle03:first-child {
  margin-top: 0;
}

.detail .pointTitle {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 20px;
  color: #29231E;
  font-size: 1.8rem;
  font-weight: bold;
}

.detail .point .flex {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .detail .point .flex {
    display: block;
  }
}

.detail .point .stepList {
  margin: 40px 0 0;
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList {
    margin: 20px 0 0;
  }
}

.detail .point .stepList li {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList li {
    min-height: 0;
  }
}

.detail .point .stepList li + li {
  margin-top: 30px;
}

.detail .point .stepList li p {
  overflow: hidden;
}

.detail .point .stepList li .photo {
  float: left;
  width: 480px;
  margin-right: 40px;
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList li .photo {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
}

.detail .point .stepList li .photo .label {
  display: block;
  border-radius: 4px;
  background: #E6E6E6;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList li .photo .label {
    position: static;
    width: 100%;
    margin-top: 15px;
  }
}

.detail .point .stepList li .textArea {
  float: left;
  width: calc(100% - 520px);
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList li .textArea {
    float: none;
    width: 100%;
  }
}

.detail .point .stepList li .step span {
  display: block;
  border-radius: 3px;
  background: #1C90EF;
  width: 75px;
  margin-bottom: 12px;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
}

.detail .point .stepList li h4 {
  margin-bottom: 7px;
  font-weight: bold;
  font-size: 1.8rem;
}

.detail .point .stepList li h4.c_green {
  color: #009688;
}

.detail .point .stepList li h5 {
  margin: 2em 0 0;
  color: #1C90EF;
  font-weight: bold;
}

.detail .point .stepList li .btn + h4 {
  margin-top: 20px;
}

.detail .point .stepList li small {
  display: block;
}

.detail .point .stepList li .deals {
  border-radius: 4px;
  background: #E23945;
  padding: 5px 10px;
  margin: 20px 0 0;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList li .deals {
    margin: 20px 0 0;
    padding: 10px 15px;
    line-height: 1.4;
  }
}

.detail .point .stepList li .btn {
  margin-top: 20px;
}

.detail .point .stepList li .btn + .btn {
  margin-top: 10px;
}

.detail .point .stepList li .btn + p:not([class]) {
  margin-top: 20px;
}

.detail .point .stepList li .btn a {
  display: block;
  border-width: 1px;
  font-size: 1.6rem;
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList li .btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    line-height: 1.6;
    padding: 12px 0;
  }
}

.detail .point .stepList li .btn a svg {
  vertical-align: middle;
  fill: #fff;
  max-width: 30px;
  max-height: 30px;
  margin: 0 10px 3px -30px;
}

.detail .point .stepList li .btn a .icon_external {
  margin: 0 0 3px 10px;
}

.detail .point .stepList li .btn.green a {
  background-color: #009688;
}

@media (min-width: 768px) {
  .detail .point .stepList li .btn.wide a {
    width: 370px;
  }
}

.detail .point .stepList li .iconLink {
  margin-top: .5em;
}

.detail .point .stepList li .iconLink a {
  color: #1C90EF;
}

.detail .point .stepList li .iconLink a::before {
  border-left-color: #3e3e3b;
}

.detail .point .stepList li .tag {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  background: #E23945;
  margin: 0 5px;
  padding: 2px 10px;
  color: #fff;
  font-size: 1.5rem;
}

@media only screen and (max-width: 767px) {
  .detail .point .stepList li .tag {
    padding: 2px 5px;
    font-size: 1.2rem;
  }
}

.point01 h3 {
  color: #29231E;
  font-weight: bold;
  font-size: 1.8rem;
}

.point01 .cautionList {
  border: 2px solid #E23945;
  margin: 30px 0 40px;
}

.point01 .cautionList:last-child {
  margin-bottom: 0;
}

.point01 .cautionList dt {
  background: #E23945;
  padding: 5px 0;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}

.point01 .cautionList dd {
  padding: 30px;
}

@media only screen and (max-width: 767px) {
  .point01 .cautionList dd {
    padding: 20px;
  }
}

.point01 .cautionList dd .checkIconList {
  font-size: 1.6rem;
}

.point01 .cautionList dd .checkIconList li {
  background: url("/img/vcommon/lp/icon_check.svg") no-repeat left top/26px auto;
  padding-left: 35px;
}

.point01 .cautionList dd .checkIconList li + li {
  margin-top: 10px;
}

.point01 .cautionList dd .checkIconList li a {
  color: #1C90EF;
  text-decoration: underline;
}

.point01 .cautionList dd .checkIconList li a:hover {
  text-decoration: none;
}

.point01 .cautionList dd .checkIconList li small {
  font-size: 1.5rem;
}

.pointTitle02 {
  border-radius: 6px;
  background: #1C90EF;
  padding: 15px 15px;
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 2.2rem;
}

@media only screen and (max-width: 767px) {
  .pointTitle02 {
    line-height: 1.5;
  }
}

.pointTitle02.bgBlue {
  background: #042784;
}

.point .hotelName {
  border-radius: 6px;
  background: #1C90EF;
  padding: 15px 15px;
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 2.2rem;
}

@media only screen and (max-width: 767px) {
  .point .hotelName {
    line-height: 1.5;
  }
}

.point .stepDescription {
  margin-bottom: 40px;
  color: #29231E;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .point .stepDescription {
    margin-bottom: 20px;
  }
}

.point h3 {
  margin-bottom: 10px;
  color: #29231E;
  font-size: 1.8rem;
  font-weight: bold;
}

.point .iconTitle {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin: 40px 0 30px;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .point .iconTitle {
    position: relative;
    margin: 30px 0 20px;
    padding-left: 60px;
  }
}

.point .iconTitle img {
  vertical-align: middle;
  margin-right: 10px;
}

@media only screen and (max-width: 767px) {
  .point .iconTitle img {
    position: absolute;
    top: 0;
    bottom: 15px;
    left: 0;
    width: 45px;
    margin: auto;
  }
}

.point .deals {
  border-radius: 4px;
  background: #E23945;
  padding: 5px 10px;
  margin: 20px 0 50px;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .point .deals {
    margin: 20px 0 30px;
    padding: 10px 15px;
    line-height: 1.4;
  }
}

.point .flex {
  margin: 30px 0 50px;
}

.point .flex:last-child {
  margin-bottom: 0;
}

.point .flex h3 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 30px;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .point .flex h3 {
    position: relative;
    padding-left: 60px;
  }
}

.point .flex h3 img {
  vertical-align: middle;
  margin-right: 10px;
}

@media only screen and (max-width: 767px) {
  .point .flex h3 img {
    position: absolute;
    top: 0;
    bottom: 15px;
    left: 0;
    width: 45px;
    margin: auto;
  }
}

.point .flex .tel {
  margin-top: 40px;
}

@media only screen and (max-width: 767px) {
  .point .flex .tel {
    margin-left: 0;
    margin-top: 30px;
  }
}

.point .btnList .btn a {
  font-size: 1.6rem;
}

.point .btnList .btn.clear a {
  border-width: 1px;
}

@media only screen and (max-width: 767px) {
  .point .btnList .btn.clear a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70px;
    line-height: 1.4;
  }
}

.anchorLinkList {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .anchorLinkList {
    flex-wrap: wrap;
    margin: 0 0 30px;
  }
}

.anchorLinkList li {
  width: calc(33.33% - 20px);
  margin: 0 30px 0 0;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .anchorLinkList li {
    width: 50%;
    margin: 0;
  }
}

.anchorLinkList li:nth-child(3n) {
  margin-right: 0;
}

@media only screen and (max-width: 767px) {
  .anchorLinkList li:first-child {
    width: 100%;
    margin-bottom: -1px;
  }
  .anchorLinkList li:last-child a {
    border-left: none;
  }
}

.anchorLinkList li a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid;
  background: #fff;
  height: 100px;
  color: #042784;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .anchorLinkList li a {
    height: auto;
    padding: 12px 0 25px;
    line-height: 1.5;
  }
}

.anchorLinkList li a .icon {
  position: static;
  width: 20px;
  height: 20px;
  margin: 0 auto 5px;
}

.anchorLinkList li a svg {
  fill: #042784;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  width: 14px;
  height: 8px;
  margin: auto;
}

@media only screen and (max-width: 767px) {
  .anchorLinkList li a svg {
    bottom: 10px;
  }
}

.anchorLinkList li a:hover {
  border-color: #042784;
  background-color: #042784;
  color: #fff;
  opacity: 1;
}

.anchorLinkList li a:hover .icon {
  fill: #fff;
}

@media only screen and (max-width: 767px) {
  .anchorLinkList li a:hover svg {
    fill: #fff;
  }
}

/* 　goto クーポン　*/
.gotoFormTable {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 100%;
  margin: 30px auto 40px;
  font-size: 1.3rem;
}

@media only screen and (max-width: 767px) {
  .gotoFormTable {
    margin: 25px 0 30px;
  }
}

.gotoFormTable th,
.gotoFormTable td {
  padding: 14px 0;
}

@media only screen and (max-width: 767px) {
  .gotoFormTable th,
  .gotoFormTable td {
    display: block;
    width: 100%;
    padding: 0 0 5px;
  }
}

.gotoFormTable th {
  width: 15%;
  text-align: left;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .gotoFormTable th {
    width: 100%;
    padding: 15px 0 8px;
  }
}

@media (min-width: 768px) {
  .gotoFormTable tr:first-child td,
  .gotoFormTable tr:first-child th {
    padding-top: 35px;
  }
}

.gotoFormTable tr:last-child th {
  padding-bottom: 35px;
}

@media only screen and (max-width: 767px) {
  .gotoFormTable tr:last-child th {
    padding-bottom: 10px;
  }
}

.gotoFormTable tr:last-child td {
  padding-bottom: 35px;
}

.gotoForm .formInput {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  display: block;
  border: 1px solid #ccc;
  background: #F2F2F2;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  font-family: YuGothic, "游ゴシック", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", Meiryo, "メイリオ", Verdana, sans-serif;
  font-size: 1.3rem;
}

.gotoForm .formInput ::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #7F7B78;
}

.gotoForm .formInput :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #7F7B78;
}

.gotoForm .formInput ::placeholder {
  /* Others */
  color: #7F7B78;
}

.gotoForm select.formInput {
  background: #F2F2F2 url(/img/vcommon/icon_bottom.svg) no-repeat right 20px center/14px 8px;
}

@media only screen and (max-width: 767px) {
  .gotoForm input.formInput {
    font-size: 1rem;
  }
}

.gotoForm textarea.formInput {
  resize: none;
}

@media only screen and (max-width: 767px) {
  .gotoForm textarea.formInput {
    padding: 10px 20px;
    height: 4.5em;
    line-height: 1.6;
    resize: vertical;
  }
}

.gotoForm .btnList .btn input {
  border-radius: 0;
  background: #042784 url("/img/vcommon/icon_search.svg") no-repeat 15% center;
  width: 310px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  transition: all .3s;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .gotoForm .btnList .btn input {
    width: 100%;
    height: 60px;
    line-height: 60px;
  }
}

.gotoForm .btnList .btn input:hover {
  background-color: #1C90EF;
}

.gotoForm .btnList .btn input[type="button"] {
  border: 2px solid #042784;
  background-color: #fff;
  line-height: 56px;
  color: #042784;
}

.gotoForm .btnList .btn input[type="button"]:hover {
  background-color: #042784;
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .gotoForm .btnList .btn + .btn {
    margin-top: 15px;
  }
}

.gotoForm .formInput.error {
  border-bottom: 4px solid #E23945;
}

.gotoForm .errorText {
  margin: 12px 0 -1em;
  color: #E23945;
}

.gotoForm .comment {
  display: block;
  margin: 10px 0 -.5em;
}

.searchDescription {
  border-radius: 5px;
  background: #D4D3D2;
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .searchDescription {
    margin-top: 20px;
    text-align: left;
  }
}

.searchDescription a {
  color: #1C90EF;
  text-decoration: underline;
}

.hotelSearchModal .iconLinkList {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3rem;
}

@media only screen and (max-width: 767px) {
  .hotelSearchModal .iconLinkList {
    display: block;
  }
}

.hotelSearchModal .iconLinkList li {
  width: calc(33.33% - 10px);
  margin-bottom: 5px;
}

@media only screen and (max-width: 767px) {
  .hotelSearchModal .iconLinkList li {
    width: 100%;
  }
}

.hotelSearchModal .iconLinkList li a {
  text-decoration: none;
}

.hotelSearchModal .iconLinkList li a:hover {
  text-decoration: underline;
}

.hotelSearchModal.empty .modalTitle01 {
  color: #1C90EF;
}

.hotelSearchModal.empty .modalTitle01 svg {
  display: block;
  fill: #1C90EF;
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
}

.hotelSearchModal.empty .modalText {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
}

.hotelSearchModal.empty .btn {
  margin-top: 30px;
}

.point02 .stepList {
  margin: 40px 0 0;
}

.point03 .flex {
  margin: 40px 0;
}

@media only screen and (max-width: 767px) {
  .point03 .flex {
    margin: 20px 0;
  }
}

.point03 .flex .image {
  border-right: 1px solid #ccc;
  width: 705px;
  padding-right: 38px;
}

@media only screen and (max-width: 767px) {
  .point03 .flex .image {
    border-right: none;
    width: 100%;
    padding-right: 0;
  }
}

.point03 .flex .image .flex dl {
  width: calc(50% - 13px);
}

@media only screen and (max-width: 767px) {
  .point03 .flex .image .flex dl {
    width: 100%;
  }
}

.point03 .flex .image .flex dl:only-child {
  width: 100%;
}

.point03 .flex .image .flex dl + dl {
  margin-left: 26px;
}

@media only screen and (max-width: 767px) {
  .point03 .flex .image .flex dl + dl {
    margin: 15px 0 0;
  }
}

.point03 .flex .image .flex dl dt {
  border-radius: 4px;
  padding: 5px 0;
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
}

.point03 .flex .image .flex dl dd {
  padding-left: 25px;
}

.point03 .flex .image .flex dl dd small {
  display: block;
  margin-top: 10px;
}

.point03 .flex .image .flex .badList dt {
  background: #E4E4E4;
}

.point03 .flex .image .flex .badList dd {
  background: url("/img/vcommon/lp/icon_bad.svg") no-repeat left 2px;
}

.point03 .flex .image .flex .goodList dt {
  background: #1C90EF;
  color: #fff;
}

.point03 .flex .image .flex .goodList dd {
  background: url("/img/vcommon/icon_check.svg") no-repeat left 2px;
}

.point03 .flex .service {
  width: 315px;
  padding-left: 40px;
}

@media only screen and (max-width: 767px) {
  .point03 .flex .service {
    width: 100%;
    padding-left: 0;
  }
}

.point03 .flex .service .title {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: bold;
}

.point03 .flex .service .title span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #E8F4FD;
  width: 70px;
  height: 70px;
  margin-right: 10px;
}

@media only screen and (max-width: 767px) {
  .point03 .flex .service .title span {
    width: 54px;
    height: 54px;
  }
}

.point03 .flex .service .title span svg {
  fill: #1C90EF;
  width: 31px;
  height: 30px;
}

.point03 .flex .service .tokuten {
  border: 1px solid #042784;
  margin-bottom: 20px;
}

.point03 .flex .service .tokuten dt {
  background: #042784;
  padding: 6px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

.point03 .flex .service .tokuten dd {
  padding: 15px;
}

.point03 .flex .service .tokutenList {
  font-size: 1.6rem;
  color: #29231E;
}

.point03 .flex .service .tokutenList li {
  margin-left: 25px;
  margin-top: 3px;
  text-indent: -25px;
}

@media only screen and (max-width: 767px) {
  .point03 .flex .service .tokutenList li {
    width: auto;
    margin-right: 10px;
  }
}

.point03 .flex .service .tokutenList li:first-child {
  margin-top: 0;
}

.point03 .flex .service .tokutenList li svg {
  fill: #042784;
  vertical-align: middle;
  max-width: 20px;
  max-height: 20px;
  margin: 0 5px 5px 0;
}

.point03 .flex .service .goodPoint {
  background: url("/img/vcommon/icon_check.svg") no-repeat left 2px;
  padding-left: 25px;
}

.point03 .flex .service .goodPoint small {
  display: block;
  margin-top: 10px;
}

.point03 .image02 {
  margin-top: 30px;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 {
    width: 100%;
    padding-left: 0;
  }
}

.point03 .service02 .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #E8F4FD;
  width: 70px;
  height: 70px;
  margin: 20px auto 10px;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 .icon {
    width: 110px;
    height: 110px;
  }
}

.point03 .service02 .icon svg {
  fill: #1C90EF;
  width: 31px;
  height: 30px;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 .icon svg {
    width: 50px;
    height: 47px;
  }
}

.point03 .service02 .title {
  text-align: center;
  color: #1C90EF;
  font-weight: bold;
  font-size: 2.2rem;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 .title {
    margin-bottom: 10px;
  }
}

.point03 .service02 .title + h5 {
  text-align: center;
  color: #29231E;
  font-weight: bold;
  font-size: 1.8rem;
}

.point03 .service02 .tokuten {
  margin: 20px 0;
}

.point03 .service02 .tokuten dt {
  border-radius: 6px;
  background: #1C90EF;
  padding: 6px 0;
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 .tokuten dt {
    margin-bottom: 10px;
  }
}

.point03 .service02 .tokuten dd {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 .tokuten dd {
    display: block;
  }
}

.point03 .service02 .tokuten + p {
  margin-bottom: 20px;
  text-align: center;
}

.point03 .service02 .tokutenList {
  border-left: 1px solid #ccc;
  width: calc(33.33%);
  padding-left: 15px;
  font-size: 1.6rem;
  color: #29231E;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 .tokutenList {
    width: 100%;
    margin-top: 3px;
    border-left: none;
    padding-left: 0;
  }
}

.point03 .service02 .tokutenList:first-child {
  border-left: none;
  padding-left: 0;
}

.point03 .service02 .tokutenList li {
  margin-left: 25px;
  margin-top: 3px;
  text-indent: -25px;
}

@media only screen and (max-width: 767px) {
  .point03 .service02 .tokutenList li {
    width: auto;
    margin-right: 10px;
  }
}

.point03 .service02 .tokutenList li:first-child {
  margin-top: 0;
}

.point03 .service02 .tokutenList li svg {
  fill: #042784;
  vertical-align: middle;
  max-width: 20px;
  max-height: 20px;
  margin: 0 5px 5px 0;
}

.modal-ferry {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

.modal-ferry-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-ferry-content {
  background: #fff;
  top: 50%;
  left: 50%;
  padding: 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 70%;
}

.modal-ferry-content-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
}

.modal-ferry-content-body > a {
  margin: 0px 20px 10px 0px;
  color: blue;
}

.selectArrow {
  margin-top: -16px;
}

.pattern04 .pointTitle03 {
  margin: 40px 0 20px;
  color: #29231E;
  text-align: center;
  font-weight: bold;
  font-size: 2.2rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .pointTitle03 {
    margin: 30px 0 20px;
  }
}

.pattern04 .flexLinkArea {
  display: flex;
  justify-content: space-between;
  margin-bottom: 70px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .flexLinkArea {
    display: block;
    margin-bottom: 40px;
  }
}

.pattern04 .flexLinkArea:last-child {
  margin-bottom: 0;
}

.pattern04 .flexLinkArea dl dt {
  border-radius: 6px;
  height: 70px;
  line-height: 70px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .flexLinkArea dl dt {
    height: auto;
    padding: 12px 0;
    margin-bottom: 15px;
    line-height: 1.6;
  }
}

@media only screen and (max-width: 767px) {
  .pattern04 .anchorLinkList {
    margin: 0 0 20px;
  }
}

.pattern04 .anchorLinkList li {
  width: calc(33.33% - 10px);
  margin-right: 15px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .anchorLinkList li {
    width: 50%;
    margin: 0;
  }
  .pattern04 .anchorLinkList li:first-child {
    width: 100%;
  }
  .pattern04 .anchorLinkList li:first-child a {
    border-bottom: none;
  }
}

.pattern04 .anchorLinkList li a {
  height: 100px;
  line-height: 1.5;
}

@media only screen and (max-width: 767px) {
  .pattern04 .anchorLinkList li a {
    border-bottom: 1px solid;
    height: auto;
    padding: 12px 0 25px;
  }
}

.pattern04 .anchorLinkList li a .icon {
  position: static;
  width: 20px;
  height: 20px;
  margin: 0 auto 5px;
  transition: all .3s;
}

.pattern04 .anchorLinkList li a:hover .icon {
  fill: #fff;
}

.pattern04 .anchorLinkArea {
  width: 630px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .anchorLinkArea {
    width: 100%;
  }
}

.pattern04 .anchorLinkArea dt {
  background: #042784;
  color: #fff;
}

.pattern04 .staynaviLinkArea {
  width: 340px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .staynaviLinkArea {
    width: 100%;
  }
}

.pattern04 .staynaviLinkArea dt {
  background: #D4D3D2;
}

.pattern04 .staynaviLinkArea dd .btn.clear a {
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-width: 1px;
  width: 100%;
  height: 100px;
  line-height: 1.5;
}

.pattern04 .staynaviLinkArea dd .btn.clear a svg {
  fill: #042784;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  width: 14px;
  height: 8px;
  margin: auto;
}

@media only screen and (max-width: 767px) {
  .pattern04 .staynaviLinkArea dd .btn.clear a svg {
    bottom: 10px;
  }
}

.pattern04 .staynaviLinkArea dd .btn.clear a .icon {
  position: static;
  fill: #042784;
  width: 53px;
  height: 30px;
  margin: 0 auto 8px;
  transition: all .3s;
}

.pattern04 .staynaviLinkArea dd .btn.clear a:hover {
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .pattern04 .staynaviLinkArea dd .btn.clear a:hover svg {
    fill: #fff;
  }
}

.pattern04 .staynaviLinkArea dd .btn.clear a:hover .icon {
  fill: #fff;
}

@media (min-width: 768px) {
  .pattern04 .half .anchorLinkArea {
    width: 500px;
  }
}

@media (min-width: 768px) {
  .pattern04 .half .staynaviLinkArea {
    width: 500px;
  }
}

.pattern04 .half .anchorLinkList li {
  width: calc(50% - 8px);
  margin-right: 15px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .half .anchorLinkList li {
    width: 50%;
    margin-right: 0;
  }
}

@media only screen and (max-width: 767px) {
  .pattern04 .half .anchorLinkList li:first-child a {
    border-bottom: 1px solid;
  }
}

.pattern04 .half .anchorLinkList li:nth-child(even) {
  margin-right: 0;
}

@media only screen and (max-width: 767px) {
  .pattern04 .half .anchorLinkList li a {
    height: 140px;
  }
}

.pattern04 .half .anchorLinkList li .icon_coupon {
  width: 45px;
  height: 25px;
}

.pattern04 .arrow_icon {
  text-indent: -9999px;
  margin: 10px 0 -20px;
}

.pattern04 .arrow_icon::after {
  content: '';
  display: block;
  border: 40px solid transparent;
  border-top: 40px solid #042784;
  width: 0;
  height: 0;
  margin: 0 auto;
}

.pattern04 .iconTitle {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin: 40px 0 30px;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .iconTitle {
    position: relative;
    margin: 30px 0 20px;
    padding-left: 60px;
  }
}

.pattern04 .iconTitle img {
  vertical-align: middle;
  margin-right: 10px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .iconTitle img {
    position: absolute;
    top: 0;
    bottom: 15px;
    left: 0;
    width: 45px;
    margin: auto;
  }
}

.pattern04 .iconTitle svg {
  vertical-align: middle;
  max-width: 40px;
  max-height: 40px;
  margin-right: 10px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .iconTitle svg {
    position: absolute;
    top: 0;
    bottom: 15px;
    left: 0;
    max-width: 45px;
    margin: auto;
  }
}

.pattern04 .facReserveList {
  position: relative;
  z-index: 0;
  display: flex;
  margin-bottom: 25px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .facReserveList {
    display: block;
  }
}

.pattern04 .facReserveList li {
  position: relative;
  border-radius: 6px;
  background: #D2E9FC;
  width: calc(33.33% - 20px);
  margin: 0 30px 0 0;
  padding: 30px 40px;
  text-align: center;
  color: #29231E;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .pattern04 .facReserveList li {
    width: 100%;
    padding: 20px 20px;
    margin: 0 0 80px;
  }
}

.pattern04 .facReserveList li::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -40px;
  z-index: 1;
  background: url("/img/vcommon/lp/icon_next.svg") no-repeat center;
  width: 50px;
  height: 50px;
  margin: auto;
  transform: rotate(-90deg);
}

@media only screen and (max-width: 767px) {
  .pattern04 .facReserveList li::after {
    top: auto;
    right: 0;
    left: 0;
    bottom: -60px;
    transform: rotate(0deg);
  }
}

.pattern04 .facReserveList li:nth-child(3n) {
  margin-right: 0;
}

@media only screen and (max-width: 767px) {
  .pattern04 .facReserveList li:nth-child(3n) {
    margin-bottom: 0;
  }
}

.pattern04 .facReserveList li:nth-child(3n)::after {
  content: none;
}

.pattern04 .facReserveList li .step {
  display: block;
  position: absolute;
  top: -11px;
  left: 0;
  right: 0;
  border-radius: 3px;
  background: #1C90EF;
  width: 75px;
  margin: auto;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
}

.pattern04 .facReserveList li .image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 160px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .facReserveList li .image {
    display: block;
    height: auto;
  }
}

.pattern04 .facReserveList li .text {
  margin-top: 5px;
  text-align: left;
  font-weight: normal;
}

.pattern04 .facReserveList li .btn {
  margin-top: 10px;
}

.pattern04 .stepTelList {
  position: relative;
  margin-left: 25px;
}

.pattern04 .stepTelList li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  z-index: 0;
  counter-increment: li_count;
  padding: 0 0 25px 40px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .stepTelList li {
    display: block;
    padding-left: 30px;
    padding-bottom: 20px;
  }
  .pattern04 .stepTelList li:last-child {
    padding-bottom: 0;
  }
}

.pattern04 .stepTelList li::before {
  content: 'PHASE';
  position: absolute;
  top: 10px;
  left: -25px;
  z-index: 1;
  width: 50px;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .pattern04 .stepTelList li::before {
    top: 16px;
  }
}

.pattern04 .stepTelList li::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -2px;
  z-index: -1;
  background: #1C90EF;
  width: 4px;
  height: 100%;
}

.pattern04 .stepTelList li:last-child::after {
  content: none;
}

.pattern04 .stepTelList li .title {
  border-radius: 4px;
  background: #D2E9FC;
  width: calc(100% + 38px);
  padding: 15px 20px 15px 40px;
  margin: 0 0 25px -38px;
  color: #1C90EF;
  font-weight: bold;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .stepTelList li .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72px;
    padding: 15px 10px 15px 30px;
    margin-left: -28px;
    margin-bottom: 20px;
    line-height: 1.4;
  }
}

.pattern04 .stepTelList li .title small {
  color: #29231E;
  font-weight: normal;
}

.pattern04 .stepTelList li .title::before {
  content: counter(li_count, decimal-leading-zero);
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 5px;
  left: -25px;
  border-radius: 50%;
  background: #1C90EF;
  width: 50px;
  height: 50px;
  padding-top: 13px;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 2rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .stepTelList li .title::before {
    top: 10px;
    padding-top: 17px;
  }
}

.pattern04 .stepTelList li .photo {
  width: 360px;
  margin-right: 30px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .stepTelList li .photo {
    width: 100%;
    margin: 0 0 10px;
  }
}

.pattern04 .stepTelList li .textArea {
  width: calc(100% - 390px);
}

@media only screen and (max-width: 767px) {
  .pattern04 .stepTelList li .textArea {
    width: 100%;
  }
}

.pattern04 .stepTelList li .textArea .btn {
  margin-top: 20px;
}

.pattern04 .stepTelList li .textArea .btn + .btn {
  margin-top: 7px;
}

.pattern04 .stepTelList li .textArea .btn a {
  border-width: 1px;
}

.pattern04 .mailText {
  background: #F0F0F0;
  padding: 8px 25px 5px;
  margin: 20px 0;
  color: #29231E;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .pattern04 .mailText {
    position: relative;
    line-height: 1.6;
    padding: 12px 20px 12px 70px;
  }
  .pattern04 .mailText .alphabet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
  }
}

.pattern04 .mailText + .mailText {
  margin-top: -15px;
}

.pattern04 .mailText.blue {
  background: #D2E9FC;
}

.pattern04 .alphabet {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  background: #fff;
  width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0 10px 3px 0;
  text-align: center;
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .pattern04.pt02 {
    margin-top: 10px;
  }
}

.pattern04.pt02 dt {
  color: #042784;
}

.pattern04.pt02 dd ol li::after {
  background-color: #042784;
}

.pattern04.pt02 dd ol li .title {
  background: #EBEBEB;
  color: #29231E;
}

.pattern04.pt02 dd ol li .title::before {
  background-color: #042784;
}

.pattern04 .couponTitle {
  margin: 30px 0 15px;
  color: #1C90EF;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
}

.pattern04 .couponPatternPoint {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternPoint {
    display: block;
  }
}

.pattern04 .couponPatternPoint li {
  position: relative;
  border-radius: 6px;
  background: #D2E9FC;
  width: calc(50% - 10px);
  padding: 30px 40px;
  text-align: center;
  color: #29231E;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternPoint li {
    width: 100%;
    margin: 0 0 20px;
    padding: 20px 20px;
    text-align: left;
  }
}

.pattern04 .couponPatternPoint li .image {
  margin-bottom: 10px;
  text-align: center;
}

.pattern04 .couponPatternPoint.gray li {
  background: #F2F2F2;
  padding: 10px 40px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternPoint.gray li {
    padding: 10px 20px;
  }
}

.pattern04 .couponPatternSelect {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .pattern04 .couponPatternSelect {
    display: none;
  }
}

.pattern04 .couponPatternSelect li {
  width: calc(50% - 5px);
}

.pattern04 .couponPatternSelect li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
  line-height: 1.3;
  text-align: center;
  background: #F2F2F2;
  height: 100%;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 1.8rem;
}

.pattern04 .couponPatternSelect li:first-child a {
  background: #1C90EF;
  color: #fff;
}

.pattern04 .couponPatternSelect li span {
  display: block;
  font-size: 1.1rem;
}

.pattern04 .couponPatternTitle {
  border-radius: 6px;
  background: #C8C8C8;
  width: 467px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  color: #29231E;
  text-align: center;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternTitle {
    width: 100%;
  }
}

.pattern04 .couponPatternTitle .alphabet + .alphabet {
  margin-left: -10px;
}

.pattern04 .couponTitleWrap {
  width: 567px;
  margin: 50px auto 0;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponTitleWrap {
    width: 100%;
  }
}

.pattern04 .couponPatternWrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternWrap {
    display: block;
  }
}

.pattern04 .couponPatternList {
  width: calc(50% - 20px);
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternList {
    width: 100%;
  }
}

.pattern04 .couponPatternList dt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid #ccc;
  height: 90px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  text-align: center;
  color: #1C90EF;
  font-weight: bold;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternList dt {
    display: block;
    height: auto;
  }
}

.pattern04 .couponPatternList dt span {
  display: block;
  border-radius: 3px;
  background: #1C90EF;
  margin-bottom: auto;
  color: #fff;
  font-size: 1.6rem;
}

.pattern04 .couponPatternList dd ol {
  position: relative;
  margin-left: 25px;
}

.pattern04 .couponPatternList dd ol li {
  position: relative;
  z-index: 0;
  counter-increment: li_count;
  padding: 0 0 20px 40px;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternList dd ol li {
    padding-left: 30px;
  }
}

.pattern04 .couponPatternList dd ol li::before {
  content: 'PHASE';
  position: absolute;
  top: 10px;
  left: -25px;
  z-index: 1;
  width: 50px;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternList dd ol li::before {
    top: 16px;
  }
}

.pattern04 .couponPatternList dd ol li::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -2px;
  z-index: -1;
  background: #1C90EF;
  width: 4px;
  height: 100%;
}

.pattern04 .couponPatternList dd ol li:last-child::after {
  content: none;
}

.pattern04 .couponPatternList dd ol li .title {
  border-radius: 4px;
  background: #D2E9FC;
  padding: 15px 20px 15px 40px;
  margin: 0 0 20px -38px;
  color: #1C90EF;
  font-weight: bold;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternList dd ol li .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72px;
    padding: 15px 10px 15px 30px;
    margin-left: -28px;
    line-height: 1.4;
  }
}

.pattern04 .couponPatternList dd ol li .title small {
  color: #29231E;
  font-weight: normal;
}

.pattern04 .couponPatternList dd ol li .title::before {
  content: counter(li_count, decimal-leading-zero);
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 5px;
  left: -25px;
  border-radius: 50%;
  background: #1C90EF;
  width: 50px;
  height: 50px;
  padding-top: 13px;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 2rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternList dd ol li .title::before {
    top: 10px;
    padding-top: 17px;
  }
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternList.pt02 {
    margin-top: 10px;
  }
}

.pattern04 .couponPatternList.pt02 dt {
  color: #042784;
}

.pattern04 .couponPatternList.pt02 dd ol li::after {
  background-color: #042784;
}

.pattern04 .couponPatternList.pt02 dd ol li .title {
  background: #EBEBEB;
  color: #29231E;
}

.pattern04 .couponPatternList.pt02 dd ol li .title::before {
  background-color: #042784;
}

.pattern04 .couponPatternNote {
  border-radius: 6px;
  background: #E23945;
  padding: 15px 30px;
  margin-bottom: 40px;
  color: #fff;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .pattern04 .couponPatternNote {
    padding: 15px 20px;
  }
}

.pattern04 .couponPatternNote:last-child {
  margin-bottom: 0;
}

.pattern04 .couponPatternNote + .memberTitle {
  margin-top: -10px;
}

.pattern04 .memberTitle {
  border-radius: 6px;
  background: #E23945;
  padding: 15px 30px;
  margin: 40px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .pattern04 .memberTitle {
    padding: 15px 20px;
  }
}

/* =========================================================
.btnArea02
========================================================= */
.btnArea02 {
  background: #042784;
}

.btnArea02 .wrapper {
  padding: 30px 0;
}

@media only screen and (max-width: 767px) {
  .btnArea02 .wrapper {
    padding: 20px;
  }
}

.btnArea02 .btnList li a {
  border: 1px solid #042784;
  background-color: #fff;
  color: #042784;
  font-size: 1.6rem;
}

@media (min-width: 768px) {
  .btnArea02 .btnList li a {
    width: 385px;
  }
}

@media only screen and (max-width: 767px) {
  .btnArea02 .btnList li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    height: 80px;
    line-height: 1.4;
  }
}

.btnArea02 .btnList li a:hover {
  background-color: #1C90EF;
}

/*# sourceMappingURL=map/lp01.css.map */