@charset "UTF-8";

/* ================================================================

制作コンテンツ

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

================================================================ */

/* SP用CSSの記述 */


/* PC、Tablet用CSSの記述 */
@media (min-width:768px){
}

.mv {
    margin-top: -240px;
    position: relative;
    height: 860px;
    background-image: url("../images/mv_bg.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.mv .mv__title {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 852px;
    z-index: 2;
}

.mv .mv__moon {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    z-index: 1;
}

.mv .mv__txt {
    position: absolute;
    left: 50%;
    top: 422px;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2;
    text-align: center;
}

.mv .mv__txt a {
    margin-top: 3px;
}

.mv .mv__coupon {
    position: absolute;
    left: 50%;
    top: 450px;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2;
    text-align: center;
}

.block01 {
    background-color: #E8E5E3;
    width: 100%;
}

.block01 .block01__wrap {
    position: relative;
    max-width: 1033px;
    margin: 0 auto;
    padding: 120px 60px 28px;
}

.block01 .block01__img01 {
    width: 1033px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    z-index: 2;
}

.block01 .block01__img02 {
    width: 1033px;
    margin: -36px auto 0;
    max-width: 100%;
}

.block01 .block01__link {
    width: 330px;
    right: 60px;
    z-index: 3;
    top: 0;
    position: absolute;
}

.block01 .block01__btn01 {
    width: 85%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 43%;
    max-width: 980px;
    padding-left: 22px;
    z-index: 3;
}

.block01 .block01__btn02 {
    width: 85.6%;
    position: absolute;
    left: calc(50% - 18px);
    transform: translateX(-50%);
    bottom: 5.6%;
    max-width: 1000px;
}

.wrap {
    position: relative
}

.sticky {
    position: sticky;
    top: 0;
    height: 240px;
    text-align: right;
    z-index: 5;
    width: 306px;
    margin-left: auto;
}

.block02 {
    padding-top: 69px;
    position: relative;
}

.block02 .block02__title {
    width: 877px;
    margin: 0 auto;
}

.block02 .block02__img {
    width: 1210px;
    max-width: 100%;
    margin: 87px auto 126px;
    position: relative;
}

.block02 .block02__btn01 {
    width: 60%;
    max-width: 748px;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block02 .block02__btn02 {
    width: 65.8%;
    max-width: 790px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.block03 .block03__img01 {
    width: 920px;
    margin: 0 auto;
}

.block03 .block03__img02 {
    width: 245px;
    margin: 4px auto 0;
}

.block04 .block04__img01 {
    width: 790px;
    margin: 84px auto 0;
}

.block04 .block04__img02 {
    width: 368px;
    margin: 0 auto;
}

.block05 .block05__img01 {
    width: 405px;
    margin: 48px auto 0;
}

.block05 .block05__img02 {
    width: 920px;
    margin: 4px auto 0;
}

@keyframes slider-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

.slider {
  overflow: hidden;
}

.slider__wrap {
    width: 4800px;
    display: flex;
}
.slider__img {
  width: 2400px;
}
.slider__img--left {
  animation: slider-left 60s infinite linear 0.5s both;
}

.slider__img img {
    vertical-align: bottom
}

a {
    transition: all 0.2s ease;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
  }
}