@charset "UTF-8";
/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */
/* SP用CSSの記述 */
/* PC、Tablet用CSSの記述 */
/*====================================
basic
====================================*/
body {
  opacity: 0;
  transition: opacity 0.8s ease;
  /* フェード速度調整 */
}

/* 読み込み完了後：表示 */
body.loaded {
  opacity: 1;
}

img {
  display: block;
}

@media (any-hover: hover) {
  .hover:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
  }
}

/* headernavi */
#click {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 9999;
}

#top {
  position: relative;
  padding-top: 140px;
}

.credit {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2;
  margin: 0;
  padding: 0;
}

.container.headernavi {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 9999;
  background-color: rgba(150, 210, 225, 0.5);
}

.container.headernavi.active {
  position: fixed;
  top: 0;
}

.inner.headernavi {
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-01 + .btn-02 {
  margin-left: 35px;
}

/* slider */
.container.titlebase {
  position: relative;
  background-color: #dfeaf2;
}

.container.titlebase h1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  margin: auto;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.container.titlebase .mv_left {
  position: absolute;
  right: calc(50% + 132px);
  bottom: -60px;
}

.sliderbox {
  width: 100%;
  display: flex;
  height: 375px;
}

.flexslider1 {
  width: 50%;
  position: relative;
  padding: 0;
  margin: 0;
}

.flexslider1 ul li img {
  margin: 0 0 0 auto;
}

.flexslider2 {
  width: 50%;
  position: relative;
  padding: 0;
  margin: 0;
}

.flexslider1 img {
  width: 600px;
  height: auto;
  vertical-align: bottom;
}

.flexslider2 img {
  width: 600px;
  height: auto;
  vertical-align: bottom;
}

.slides li:not(:first-child) {
  display: none;
}

.inner.titlebase {
  position: relative;
}

main {
  overflow: hidden;
}

.block01 {
  background: #fbf9f5;
}

.block01 .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.block01 .images {
  width: 990px;
  margin: auto;
}

.block01 .images .img {
  z-index: 2;
}

.block01 .images .circle01 {
  top: 298px;
  left: -277px;
  z-index: 0;
}

.block01 .images .circle02 {
  top: 900px;
  right: -248px;
  z-index: 0;
}

.block01 .images .circle03 {
  bottom: 251px;
  left: 23px;
  z-index: 0;
}

.block01 .images .link {
  z-index: 4;
}

.block01 .images .map {
  position: absolute;
  top: 0;
  left: 345px;
  z-index: 2;
}

.block01 .images .txt {
  z-index: 4;
}

.block01 .images .txt01 {
  left: 25px;
  top: 369px;
}

.block01 .images .txt02 {
  left: 488px;
  top: 441px;
}

.block01 .images .plane {
  position: absolute;
  right: 71px;
  top: 78px;
  z-index: 2;
}

.block01 .images .link01 {
  left: 29px;
  top: 1021px;
}

.block01 .images .link02 {
  left: 20px;
  bottom: 831px;
}

.block01 .images .link03 {
  left: 23px;
  bottom: 435px;
}

.block01 .images .link04 {
  left: 227px;
  bottom: 424px;
}

.block01 .images .link05 {
  left: 340px;
  bottom: 85px;
}

.block01 .images .link06 {
  right: 22px;
  top: 380px;
}

.block01 .images .link07 {
  right: 237px;
  bottom: 945px;
}

.block01 .images .link08 {
  right: 71px;
  bottom: 691px;
}

.block01 .images .link09 {
  right: 218px;
  top: 794px;
}

.block01 .images .link10 {
  right: 304px;
  top: 981px;
}

.block01 .images .link11 {
  right: 246px;
  bottom: 124px;
}

.block01 .images .link12 {
  right: 80px;
  bottom: 469px;
}

.block01 .images .img01 {
  left: 0;
  top: 461px;
}

.block01 .images .img02 {
  left: 325px;
  top: 788px;
}

.block01 .images .img03 {
  left: 325px;
  top: 907px;
}

.block01 .images .img04 {
  left: 194px;
  top: 1096px;
}

.block01 .images .img05 {
  left: 0;
  bottom: 565px;
}

.block01 .images .img06 {
  left: 234px;
  bottom: 595px;
}

.block01 .images .img07 {
  left: 0;
  bottom: 80px;
}

.block01 .images .img08 {
  left: 275px;
  bottom: 274px;
}

.block01 .images .img09 {
  right: 0;
  top: 489px;
}

.block01 .images .img10 {
  right: 0;
  top: 933px;
}

.block01 .images .img11 {
  right: 148px;
  top: 1197px;
}

.block01 .images .img12 {
  right: 49px;
  bottom: 503px;
}

.block01 .images .img13 {
  right: 32px;
  bottom: 161px;
}

.block01 .images .bg {
  position: relative;
  z-index: 3;
}

.block02 {
  background: #f2ebdc;
}

.block02 .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.block02 .caution {
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
}

.block02 .txt01 {
  position: relative;
  width: 730px;
  margin: auto;
}

.block02 .txt01 .img {
  margin-top: -30px;
  display: inline-block;
}

.block02 .txt01 .link {
  position: absolute;
  left: 5px;
  bottom: 10px;
  z-index: 2;
}

.block02 .link-list {
  display: flex;
  justify-content: center;
  margin: 25px 0;
}

.block02 .link-list li + li {
  margin-left: 15px;
}

.block02 .images {
  position: relative;
  width: 990px;
  margin: auto;
}

.block02 .images .txt {
  position: absolute;
  left: 0;
  top: 0;
}

.block02 .flow_images_wrap {
  animation: image-slide 50s linear infinite;
  display: flex;
  min-width: 100%;
  width: min-content;
  position: relative;
}

.block02 .flow_images_wrap .img {
  width: 1998px;
  max-width: inherit;
  z-index: 1;
}

.flow_images {
  overflow: hidden;
  margin: 0;
  position: relative;
  z-index: 3;
}

.flow_images .imaeg + .imaeg {
  margin-left: -11px;
}

.flow_images .t1 {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.flow_images .t2 {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}

.mv {
  position: relative;
}

.mv h1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  z-index: 5;
  height: 100%;
}

.mv h1 img {
  height: 90%;
  margin: auto;
}

.mv .flow_images_wrap {
  animation: image-slide 75s linear infinite;
  display: flex;
  width: min-content;
  position: relative;
}

.mv .flow_images_wrap .img {
  width: calc(1200px * 4);
  max-width: inherit;
  z-index: 1;
}

@media screen and (min-width: 1200px) {
  .mv .flow_images_wrap .img {
    width: calc(100vw * 4);
  }
}

.bnr_coupon {
  width: 910px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.bnr_coupon ul {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 130px;
}

.bnr_coupon a {
  display: flex;
  justify-content: center;
  position: relative !important;
}

.bnr_coupon .caution {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.images {
  position: relative;
}

.images a {
  position: absolute;
  z-index: 3;
}

.images .img,
.images .txt {
  position: absolute;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.bnr_area {
  position: relative;
  padding: 38px 0 50px;
}

.bnr_area .blk01 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bnr_area .blk01 .t1 {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.bnr_area .blk02 {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.bnr_area .blk02 ul {
  display: flex;
  justify-content: center;
}

.bnr_area .blk02 ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 20px;
}

.bnr_area .blk02 ul li .t1 {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.bnr_area .blk02 ul li .t2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
}

.bnr_area .blk02 ul li + li {
  margin-left: 40px;
}

.bnr_area .blk02 + .blk02 {
  margin-top: 35px;
}

.bnr_area .blk03 .flex {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.bnr_area .blk03 .flex + .flex {
  margin-top: 20px;
}

.bnr_area .blk03 .flex .item {
  position: relative;
}

.bnr_area .blk03 .flex .item + .item {
  margin-left: 35px;
}

.bnr_area .blk03 .flex .item ul {
  display: flex;
}

.bnr_area .blk03 .flex .item ul li + li {
  margin-left: 30px;
}

.bnr_area .blk03 .flex .item .caution {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
  display: flex;
  justify-content: center;
}

@keyframes image-slide {
  100% {
    transform: translateX(-50%);
  }
}

.pagetop {
  position: fixed;
  bottom: 40px;
  right: -40px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.pagetop.active {
  right: 0;
}