@charset "UTF-8";


/* --------------------------------------------------
  animation
-------------------------------------------------- */
.animation,
#contents {
  transform: translate3d(0,20px,0);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.load .animation.show-animation,
.load #contents {
  transform: translate3d(0,0,0);
  opacity: 1;
}



/* --------------------------------------------------
  hero
-------------------------------------------------- */
#hero {
  position: relative;
  transform: translate3d(0,20px,0);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.load #hero {
  transform: translate3d(0,0,0);
  opacity: 1;
}



/* --------------------------------------------------
  limited
-------------------------------------------------- */
#limited {
  background-color: #003388;
}



/* --------------------------------------------------
  product
-------------------------------------------------- */
#product {
  background: url(../img/product_bg.jpg) center center / cover no-repeat;
}



/* --------------------------------------------------
  present
-------------------------------------------------- */
#present {
  background: url(../img/present_bg.jpg) center center / cover no-repeat;
}
#present .inner {
  width: calc(670 / 750 * 100%);
  margin: 0 auto;
  padding-top: calc(46 / 750 * 100%);
  padding-bottom: calc(46 / 750 * 100%);
}



/* --------------------------------------------------
  entry
-------------------------------------------------- */
.entry {
  background-color: #003388;
}
.entry .inner {
  width: calc(690 / 750 * 100%);
  margin: 0 auto;
  padding-top: calc(42 / 750 * 100%);
  padding-bottom: calc(40 / 750 * 100%);
}
.entry .btn_oubo {
  min-height: 56px;
  transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.entry .btn_oubo:not(.is-off) {
  background-color: #ffffff;
  color: #00c300;
}
.entry .btn_oubo.is-off {
  background-color: #cccccc;
  color: #ffffff;
}
.entry .btn_oubo .btn_cv {
  display: block;
  font-weight: bold;
  color: inherit;
}
.btn_inner {
  padding-top: 5px;
  padding-bottom: 5px;
}
.entry .btn_oubo .btn_cv .small {
  display: block;
  margin-bottom: -2px;
  font-size: 12px;
}
.entry .btn_oubo .btn_cv .normal {
  display: block;
  font-size: 20px;
}
#contents .entry .kiyaku_apply {
  margin-bottom: 17px;
  padding-top: 17px;
}
.entry .kiyaku_apply input {
  position: relative;
  top: 2px;
}
.entry .kiyaku_apply a {
  font-size: 12px;
  color: #ffffff;
}
.entry .kiyaku_box dt a {
  display: block;
  position: relative;
  padding-top: 11px;
  padding-bottom: 11px;
  border: 2px solid #ffffff;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.entry .kiyaku_box.is-open dt a {
  background-color: #ffffff;
  border-bottom-color: #003388;
  border-left-width: 0;
  border-right-width: 0;
  color: #003388;
}
.entry .kiyaku_box dt a .icon {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
}
.entry .kiyaku_box dt a .icon:before,
.entry .kiyaku_box dt a .icon:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.entry .kiyaku_box.is-open dt a .icon:before,
.entry .kiyaku_box.is-open dt a .icon:after {
  background-color: #003388;
}
.entry .kiyaku_box:not(.is-open) dt a .icon:after {
  transform: rotate(-90deg);
}
.entry .kiyaku_box dd {
  overflow: hidden;
  background-color: #ffffff;
  text-align: justify;
  font-size: 14px;
  line-height: 1.71;
  color: #000000;
  transition: height 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.entry .kiyaku_box:not(.is-open) dd {
  height: 0;
}
.entry .kiyaku_box dd li {
  width: calc(608 / 690 * 100%);
  margin: 0 auto;
}
.entry .kiyaku_box dd li:first-child {
  padding-top: 25px;
}
.entry .kiyaku_box dd li:last-child {
  padding-bottom: 25px;
}
.entry .kiyaku_box dd li .icon {
  float: left;
  width: 1.1em;
}
.entry .kiyaku_box dd li .text {
  padding-left: 1.1em;
}



/* --------------------------------------------------
  ha
-------------------------------------------------- */
#ha {
  background-color: #ffffff;
}
#ha .inner {
  padding-bottom: calc(98 / 750 * 100%);
}
#ha .ha_attraction {
  margin-bottom: calc(32 / 750 * 100%);
}
#ha .ha_howto {
  margin-bottom: calc(166 / 750 * 100%);
}
#ha .ha_product_text {
  margin-bottom: calc(50 / 750 * 100%);
}
#ha .ha_product_btn {
  width: calc(578 / 750 * 100%);
  margin: 0 auto;
}



/* --------------------------------------------------
  contact
-------------------------------------------------- */
#contact {
  background-color: #e6e8ea;
}
#contact .inner {
  width: calc(690 / 750 * 100%);
  margin: 0 auto;
  padding-top: calc(40 / 750 * 100%);
  padding-bottom: calc(40 / 750 * 100%);
}
#contact .contact_cp {
  margin-bottom: calc(40 / 690 * 100%);
}