@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
sup{ font-size: 70%; color: #cd0000; vertical-align: top; position: relative; top: -0.1em;}

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
.btn-orange a{ background: #fd7b5c; font-weight: 900; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; display: block; position: relative; cursor: pointer; border-radius: 40px;}
.btn-orange a::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
.btn-black a{ background: #2d292a; font-weight: 900; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; display: block; position: relative; cursor: pointer; border-radius: 40px;}
.btn-black a::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
header{ background: #fff; width: 100%;}
header .inner{ display: flex; align-items: center;}
header .logo-GDO{ margin-right: auto;}
/* 横スクロールアニメーション */
@keyframes bg-move {
  from { background-position: 0 0; }
  to   { background-position: -1000px 0; } /* 画像幅に合わせて調整 */
}
/* フェード用キーフレーム */
@keyframes fade1 {
  0%, 40%   { opacity: 1; }   /* 表示 */
  60%, 95%  { opacity: 0; }   /* フェードアウト */
  100%      { opacity: 1; }   /* ループで1枚目を表示 */
}
@keyframes fade2 {
  0%, 40%   { opacity: 0; }   /* 非表示 */
  60%, 95%  { opacity: 1; }   /* フェードイン */
  100%      { opacity: 0; }   /* 非表示に戻る */
}
#main .mv{ position: relative;}
#main .mv .bg{ position: absolute; top: 0; width: 100%;}
#main .mv .bg-slider{
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* 共通の背景スライド設定 */
#main .mv .bg-slider .slide{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background-repeat: repeat-x;
  background-size: auto;
  animation: bg-move 60s linear infinite;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
#main .box01 p{ line-height: 1.8;}
#main .box01 p:last-of-type{ margin-bottom: 0;}
#main .box02 .movie{ position: relative; width: 100%; padding-top: 56.25%;}
#main .box02 .movie video,
#main .box02 .movie iframe{ position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
#main .box02 .tit-box{ text-align: center;}
#main .box02 .tit-box p{ font-weight: 100; color: #fd7b5c;}
#main .box02 .tit-box p strong{ font-weight: 700;}
#main .box02 .tit-box h2{ font-weight: 700; color: #2d292a;}
#main .box02 .how{ border: 1px solid #eee;}
#main .box02 .how .detail h3{ font-weight: 700; color: #2d292a;}
#main .box02 .how .detail p{ line-height: 1.8;}
section .tit-box .tit p{ background: #2d292a; font-weight: 700; color: #fff;}
section .tit-box .tit h2{ background: #fd7b5c; font-weight: 700; color: #fff;}
section .tit-box .tit h2 span{ background: url(../img/ico-iine.svg) left center no-repeat; display: inline-block;}
#sec01 .tit-box .tit p{ display: inline-block;}
#sec01 .box01 .iine-list li:last-of-type{ margin-bottom: 0;}
#sec01 .box01 .iine-list li .detail .stit p{ background: #fd7b5c; font-weight: 700; line-height: 1.0; color: #fff; display: inline-block;}
#sec01 .box01 .iine-list li .detail .stit p span{ background: url(../img/ico-iine.svg) left center no-repeat; display: inline-block;}
#sec01 .box01 .iine-list li .detail .stit h3{ font-weight: 700; line-height: 1.3;}
#sec01 .box01 .iine-list li .detail p{ line-height: 1.8;}
#sec02 .tit-box .tit h2{ display: inline-block;}
#sec02 .box01 .iine-list li .detail .stit{ text-align: center;}
#sec02 .box01 .iine-list li .detail .stit p{ background: #fd7b5c; font-weight: 700; line-height: 1.0; color: #fff; display: inline-block;}
#sec02 .box01 .iine-list li .detail .stit p span{ background: url(../img/ico-iine.svg) left center no-repeat; display: inline-block;}
#sec02 .box01 .iine-list li .detail .stit h3{ font-weight: 700; line-height: 1.3;}
#sec02 .box01 .iine-list li .detail p{ line-height: 1.8;}
#sec02 .box02 .detail h3{ font-weight: 700;}
#sec02 .box02 .detail p{ line-height: 1.8;}
#sec02 .box02 .coupon{ background: #ff9900; text-align: center;}
#sec02 .box02 .coupon .bg{ background: #232f3e;}
#sec02 .box02 .coupon .bg h3{ font-weight: 700; color: #fff;}
#sec02 .box02 .coupon .bg h3 strong{ color: #ff9900;}
#sec02 .box02 .coupon .bg .chord{ background: #fff; font-weight: 700; color: #232f3e; display: inline-block; border-radius: 30px;}
#sec02 .box02 .coupon .bg .chord strong{ color: #ff9900;}
#sec02 .box02 .coupon .bg .notes{ color: #fff;}
#sec02 .box02 .coupon .date{ font-weight: 700; color: #232f3e;}
#sec02 .box03 h3{ font-weight: 700; display: flex; align-items: center;}
#sec02 .box03 h3::before,
#sec02 .box03 h3::after{ background-color: #000; content: ""; flex-grow: 1; height: 1px;}
#sec02 .box03 .tb-box:last-of-type{ margin-bottom: 0;}
#sec02 .box03 .tb-box h4{ font-weight: 700;}
#sec02 .box03 .tb-box table{ width: 100%;}
#sec02 .box03 .tb-box table th{ font-weight: 700; line-height: 1.6; text-align: left; border-bottom: 1px solid #000;}
#sec02 .box03 .tb-box table td{ line-height: 1.6; text-align: left; border-bottom: 1px solid #000;}
#sec02 .box03 .sponsor{ text-align: center;}
#sec02 .box03 .sponsor a{ color: #0071be;}


#page-top{ position: fixed; z-index: 90; display: none;}
#page-top a{ display: block;}
footer{ background: #000; color: #fff; text-align: center;}
footer a{ color: #fff;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
#contents{ min-width: 1046px; overflow: hidden;}
a:hover,a:hover img{ opacity: 0.8; transition: .4s;}
.pc{ display: block;}
.sp{ display: none;}
div.btn-orange{ width: 436px; margin: 60px auto 0;}
.btn-orange a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 20px; padding: 25px 0;}
.btn-orange a::after{ font-size: 20px; right: 15px;}
.btn-orange a:hover{ box-shadow: none; transition: .4s;}
div.btn-black{ width: 436px; margin: 60px auto 0;}
.btn-black a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 20px; padding: 25px 0;}
.btn-black a::after{ font-size: 20px; right: 15px;}
.btn-black a:hover{ box-shadow: none; transition: .4s;}
.inner{ width: 1046px; margin: 0 auto; position: relative}
header{ padding: 18px 0 26px;}
#main{ padding-bottom: 100px;}
#main .mv::after{ background: url(../img/main-img01_pc.png) left top no-repeat; width: 646px; height: 550px; position: absolute; top: 0; right: 0;}
#main .mv .bg-slider{ height: 235px;}
#main .mv .bg-slider .slide{ height: 235px;}
#main .mv .bg-slider .slide1{ background-image: url(../img/main-bgA_pc.jpg); animation: bg-move 60s linear infinite, fade1 10s infinite;}
#main .mv .bg-slider .slide2{ background-image: url(../img/main-bgB_pc.jpg); animation: bg-move 60s linear infinite, fade2 10s infinite;}
#main .mv .inner{ height: 550px;}
#main .mv h1{ position: absolute; left: 0; bottom: 50px; z-index: 10;}
#main .box01{ margin-bottom: 75px;}
#main .box01 p{ font-size: 18px; margin-bottom: 10px;}
#main .box02 .tit-box{ margin-bottom: 40px;}
#main .box02 .tit-box p{ font-size: 30px; margin-bottom: 20px;}
#main .box02 .tit-box h2{ font-size: 38px;}
#main .box02 .movie{ margin-bottom: 60px;}
#main .box02 .how{ display: flex; align-items: center; padding: 20px; margin-bottom: 60px;}
#main .box02 .how .img{ margin-right: 20px;}
#main .box02 .how .detail h3{ font-size: 24px; margin-bottom: 10px;}
#main .box02 .how .detail p{ font-size: 16px;}
section .tit-box{ margin-bottom: 60px;}
section .tit-box .inner{ height: 408px;}
section .tit-box .tit{ position: absolute; top: 50%; transform: translateY(-50%);}
section .tit-box .tit p{ font-size: 38px; padding: 14px 25px 18px;}
section .tit-box .tit h2{ font-size: 52px; padding: 14px 25px 18px;}
section .tit-box .tit h2 span{ background-size: 70px; padding: 5px 0 5px 85px;}
#sec01 .tit-box{ background: url(../img/sec01-tit-bg_pc.jpg) center center no-repeat; background-size: cover;}
#sec01 .box01{ padding-bottom: 100px;}
#sec01 .box01 .iine-list{ margin-bottom: 60px;}
#sec01 .box01 .iine-list li{ display: flex; align-items: center; margin-bottom: 40px;}
#sec01 .box01 .iine-list li:nth-of-type(odd){ flex-direction: row-reverse;}
#sec01 .box01 .iine-list li .img{ margin-left: -177px;}
#sec01 .box01 .iine-list li:nth-of-type(odd) .img{ margin-right: -177px;}
#sec01 .box01 .iine-list li .detail{ width: 490px; margin-left: auto;}
#sec01 .box01 .iine-list li:nth-of-type(odd) .detail{ margin-right: auto; margin-left: 0px;}
#sec01 .box01 .iine-list li .detail .stit{ margin-bottom: 15px;}
#sec01 .box01 .iine-list li .detail .stit p{ font-size: 24px; padding: 6px 10px; margin-bottom: 10px;}
#sec01 .box01 .iine-list li .detail .stit p span{ background-size: 30px; padding: 2px 0 2px 40px;}
#sec01 .box01 .iine-list li .detail .stit h3{ font-size: 38px;}
#sec01 .box01 .iine-list li .detail p{ font-size: 18px;}
#sec02 .tit-box{ background: url(../img/sec02-tit-bg_pc.jpg) center center no-repeat; background-size: cover;}
#sec02 .box01{ padding-bottom: 40px;}
#sec02 .box01 .iine-list{ display: flex; flex-wrap: wrap;}
#sec02 .box01 .iine-list li{ width: 322px; margin-right: 40px; margin-bottom: 40px;}
#sec02 .box01 .iine-list li:nth-of-type(3n),
#sec02 .box01 .iine-list li:last-of-type{ margin-right: 0;}
#sec02 .box01 .iine-list li:nth-of-type(4){ margin-left: 180px;}
#sec02 .box01 .iine-list li .detail{ margin-top: -20px;}
#sec02 .box01 .iine-list li .detail .stit{ margin-bottom: 10px;}
#sec02 .box01 .iine-list li .detail .stit p{ font-size: 24px; padding: 6px 10px; margin-bottom: 10px;}
#sec02 .box01 .iine-list li .detail .stit p span{ background-size: 30px; padding: 2px 0 2px 40px;}
#sec02 .box01 .iine-list li .detail .stit h3{ font-size: 28px;}
#sec02 .box01 .iine-list li .detail p{ font-size: 16px;}
#sec02 .box02{ padding-bottom: 80px;}
#sec02 .box02 .img{ margin-bottom: 40px;}
#sec02 .box02 .detail{ text-align: center;}
#sec02 .box02 .detail h3{ font-size: 38px; margin-bottom: 25px;}
#sec02 .box02 .detail p{ font-size: 18px;}
#sec02 .box02 .coupon{ width: 590px; padding: 4px; margin: 60px auto 0;}
#sec02 .box02 .coupon .bg{ padding: 20px 0;}
#sec02 .box02 .coupon .bg h3{ font-size: 32px; margin-bottom: 20px;}
#sec02 .box02 .coupon .bg .chord{ font-size: 20px; padding: 5px 50px; margin-bottom: 15px;}
#sec02 .box02 .coupon .bg .chord strong{ font-weight: 700; color: #ff9900;}
#sec02 .box02 .coupon .bg .notes{ font-size: 14px;}
#sec02 .box02 .coupon .date{ font-size: 20px; padding: 8px 0 6px;}
#sec02 .box03{ padding-bottom: 100px;}
#sec02 .box03 h3{ font-size: 38px; margin-bottom: 30px;}
#sec02 .box03 h3::before{ margin-right: 30px;}
#sec02 .box03 h3::after{ margin-left: 30px;}
#sec02 .box03 .tb-box{ margin-bottom: 40px;}
#sec02 .box03 .tb-box h4{ font-size: 20px; padding: 0 20px; margin-bottom: 5px;}
#sec02 .box03 .tb-box table th{ font-size: 16px; width: 200px; padding: 20px;}
#sec02 .box03 .tb-box table td{ font-size: 16px; padding: 20px;}
#sec02 .box03 .btn-list{ display: flex; justify-content: center; margin-top: 60px;}
#sec02 .box03 .btn-list li{ width: 436px;}
#sec02 .box03 .btn-list li:first-of-type{ margin-right: 40px;}
#sec02 .box03 .sponsor{ margin-top: 60px;}
#page-top{ right: 20px; bottom: 20px;}
footer{ padding: 60px 0;}
footer .cp{ margin-top: 20px;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
div.btn-orange{ margin-top: 30px;}
.btn-orange a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 16px; padding: 20px 0;}
.btn-orange a::after{ font-size: 16px; right: 10px;}
div.btn-black{ margin-top: 30px;}
.btn-black a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 16px; padding: 20px 0;}
.btn-black a::after{ font-size: 16px; right: 10px;}
.inner{ position: relative}
header{ padding: 12px 20px 14px;}
header .logo-GDO{ width: 73px;}
header .logo-amazfit{ width: 99px;}
#main{ padding-bottom: 50px;}
#main .mv{ margin-bottom: 20px;}
#main .mv h1{ position: relative; z-index: 1;}
#main .mv .bg-slider{ height: 375px;}
#main .mv .bg-slider .slide{ height: 375px; background-size: 375px;}
#main .mv .bg-slider .slide1{ background-image: url(../img/main-bgA_sp.jpg); animation: bg-move 60s linear infinite, fade1 10s infinite;}
#main .mv .bg-slider .slide2{ background-image: url(../img/main-bgB_sp.jpg); animation: bg-move 60s linear infinite, fade2 10s infinite;}
#main .box01{ margin-bottom: 35px;}
#main .box01 .inner{ padding: 0 20px;}
#main .box01 p{ font-size: 18px; margin-bottom: 10px;}
#main .box02 .inner{ padding: 0 20px;}
#main .box02 .tit-box{ margin-bottom: 20px;}
#main .box02 .tit-box p{ font-size: 20px; margin-bottom: 8px;}
#main .box02 .tit-box h2{ font-size: 26px; line-height: 1.3;}
#main .box02 .movie{ margin-bottom: 30px;}
#main .box02 .how{ padding: 15px; margin-bottom: 30px;}
#main .box02 .how .img{ margin-bottom: 10px;}
#main .box02 .how .detail h3{ font-size: 22px; text-align: center; margin-bottom: 8px;}
#main .box02 .how .detail p{ font-size: 16px;}
section .tit-box{ margin-bottom: 30px;}
section .tit-box .inner{ height: 150px;}
section .tit-box .tit{ position: absolute; top: 50%; left: 20px; transform: translateY(-50%);}
section .tit-box .tit p{ font-size: 16px; padding: 5px 10px 7px;}
section .tit-box .tit h2{ font-size: 28px; padding: 5px 10px 7px;}
section .tit-box .tit h2 span{ background-size: 35px; padding: 2px 0 2px 40px;}
#sec01 .tit-box{ background: url(../img/sec01-tit-bg_sp.jpg) center center no-repeat; background-size: cover;}
#sec01 .box01{ padding-bottom: 50px;}
#sec01 .box01 .inner{ padding: 0 20px;}
#sec01 .box01 .iine-list{ margin-bottom: 30px;}
#sec01 .box01 .iine-list li{ margin-bottom: 30px;}
#sec01 .box01 .iine-list li .img{ margin-bottom: 15px;}
#sec01 .box01 .iine-list li .detail .stit{ margin-bottom: 5px;}
#sec01 .box01 .iine-list li .detail .stit p{ font-size: 18px; padding: 4px 10px 6px; margin-bottom: 5px;}
#sec01 .box01 .iine-list li .detail .stit p span{ background-size: 24px; padding: 2px 0 2px 30px;}
#sec01 .box01 .iine-list li .detail .stit h3{ font-size: 26px;}
#sec01 .box01 .iine-list li .detail p{ font-size: 18px;}
#sec02 .tit-box{ background: url(../img/sec02-tit-bg_sp.jpg) center center no-repeat; background-size: cover;}
#sec02 .box01{ padding-bottom: 20px;}
#sec02 .box01 .inner{ padding: 0 20px;}
#sec02 .box01 .iine-list li{ margin-bottom: 20px;}
#sec02 .box01 .iine-list li .img{ width: 80%; margin: 0 auto;}
#sec02 .box01 .iine-list li .detail{ margin-top: -20px;}
#sec02 .box01 .iine-list li .detail .stit{ margin-bottom: 5px;}
#sec02 .box01 .iine-list li .detail .stit p{ font-size: 18px; padding: 4px 10px 6px; margin-bottom: 5px;}
#sec02 .box01 .iine-list li .detail .stit p span{ background-size: 24px; padding: 2px 0 2px 30px;}
#sec02 .box01 .iine-list li .detail .stit h3{ font-size: 26px;}
#sec02 .box01 .iine-list li .detail p{ font-size: 16px;}
#sec02 .box02{ padding-bottom: 40px;}
#sec02 .box02 .inner{ padding: 0 20px;}
#sec02 .box02 .img{ margin-bottom: 15px;}
#sec02 .box02 .detail h3{ font-size: 24px; text-align: center; margin-bottom: 10px;}
#sec02 .box02 .detail p{ font-size: 18px;}
#sec02 .box02 .coupon{ padding: 4px; margin: 30px auto 0;}
#sec02 .box02 .coupon .bg{ padding: 10px 0 12px;}
#sec02 .box02 .coupon .bg h3{ font-size: 28px; line-height: 1.3; margin-bottom: 10px;}
#sec02 .box02 .coupon .bg .chord{ font-size: 16px; padding: 8px 20px; margin-bottom: 10px;}
#sec02 .box02 .coupon .bg .chord strong{ font-weight: 700; color: #ff9900;}
#sec02 .box02 .coupon .bg .notes{ font-size: 12px;}
#sec02 .box02 .coupon .date{ font-size: 16px; padding: 8px 0 6px;}
#sec02 .box03{ padding-bottom: 50px;}
#sec02 .box03 .inner{ padding: 0 20px;}
#sec02 .box03 h3{ font-size: 24px; margin-bottom: 20px;}
#sec02 .box03 h3::before{ margin-right: 15px;}
#sec02 .box03 h3::after{ margin-left: 15px;}
#sec02 .box03 .tb-box{ margin-bottom: 20px;}
#sec02 .box03 .tb-box h4{ font-size: 18px; padding: 0 10px; margin-bottom: 5px;}
#sec02 .box03 .tb-box table th{ font-size: 14px; width: 150px; padding: 10px;}
#sec02 .box03 .tb-box table td{ font-size: 14px; padding: 10px;}
#sec02 .box03 .btn-list{ margin-top: 30px;}
#sec02 .box03 .btn-list li:first-of-type{ margin-bottom: 20px;}
#sec02 .box03 .sponsor{ font-size: 14px; margin-top: 30px;}
#page-top{ right: 10px; bottom: 20px; width: 12%;}
footer{ font-size: 10px; padding: 30px 0;}
footer .cp{ margin-top: 10px;}
}