@charset "utf-8";

/* font
----------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans CJK JP'),
        local('NotoSansCJKjp-Regular'),
        local('NotoSansJP-Regular'),
        url('../font/NotoSansCJKjp-Regular.woff2') format('woff2'),
        url('../font/NotoSansCJKjp-Regular.woff') format('woff'),
        url('../font/NotoSansCJKjp-Regular.ttf')  format('truetype'),
        url('../font/NotoSansCJKjp-Regular.eot') format('embedded-opentype');
}


/* reset
----------------------------------------- */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,var,b,u,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,input,textarea,table,caption,tbody,thead,tfoot,tr,th,td,
main,article,aside,canvas,details,embed,figure,figcaption,footer,header,
menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6,th {
    font-family: inherit;
    font-size: 100%;
    font-weight: normal;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

table,th,td {
    text-align: left;
    border: none;
}

ol,ul,li {
    list-style: none;
}

img {
    border: none;
    vertical-align: top;
    max-width: 100%;
}

input[type=text],
input[type=password],
input[type=button],
input[type=submit],
button,
select,
textarea {
    color: inherit;
    font-family: inherit;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    font-size: 100%;
    font-weight: normal;
    line-height: inherit;
}

input::-webkit-input-placeholder {
    color: #aaa;
}
input:-ms-input-placeholder {
    color: #aaa;
}
input::-moz-placeholder {
    color: #aaa;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
}

select::-ms-expand {
    display:none;
}

*,*:before,*:after {
    box-sizing: border-box;
}


/* 初期設定
----------------------------------------- */

html {
    font-size: 62.5%;
}

body {
    min-width: 1000px;
    font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 140%;
    color: #333;
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
}
body.s_ie {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
@media screen and (max-width: 767px){
    body {
        min-width: 320px;
    }
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s;
}

em, strong {
    font-weight: bold;
}


/* 汎用クラス
----------------------------------------- */

.c_fontL  { font-size: 1.6rem; }
.c_fontLL { font-size: 1.8rem; }
.c_fontXL { font-size: 2rem; }
.c_fontS  { font-size: 1.3rem; }
.c_fontSS { font-size: 1.2rem; }
.c_fontXS { font-size: 1.1rem; }

.c_fontBold { font-weight: bold; }
.c_colorRed { color: #ce2e2e; }

.c_clearfix { zoom: 1; }
.c_clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0.01px;
}
.c_floatL { float: left; }
.c_floatR { float: right; }
.c_ofHidden { overflow: hidden; }

.c_taLeft { text-align: left !important; }
.c_taCenter { text-align: center !important; }
.c_taRight { text-align: right !important; }

.c_vaTop { vertical-align: top !important; }
.c_vaMdl { vertical-align: middle !important; }
.c_vaBtm { vertical-align: bottom !important; }

.c_mt0  { margin-top:  0px !important; }
.c_mt3  { margin-top:  3px !important; }
.c_mt5  { margin-top:  5px !important; }
.c_mt10 { margin-top: 10px !important; }
.c_mt15 { margin-top: 15px !important; }
.c_mt20 { margin-top: 20px !important; }
.c_mt25 { margin-top: 25px !important; }
.c_mt30 { margin-top: 30px !important; }
.c_mt35 { margin-top: 35px !important; }
.c_mt40 { margin-top: 40px !important; }
.c_mt45 { margin-top: 45px !important; }
.c_mt50 { margin-top: 50px !important; }
.c_mt60 { margin-top: 60px !important; }
.c_mt70 { margin-top: 70px !important; }
.c_mt80 { margin-top: 80px !important; }
.c_mt90 { margin-top: 90px !important; }

.c_ml0  { margin-left:  0px !important; }
.c_ml3  { margin-left:  3px !important; }
.c_ml5  { margin-left:  5px !important; }
.c_ml10 { margin-left: 10px !important; }
.c_ml15 { margin-left: 15px !important; }
.c_ml20 { margin-left: 20px !important; }
.c_ml25 { margin-left: 25px !important; }
.c_ml30 { margin-left: 30px !important; }
.c_ml35 { margin-left: 35px !important; }
.c_ml40 { margin-left: 40px !important; }
.c_ml45 { margin-left: 45px !important; }
.c_ml50 { margin-left: 50px !important; }
.c_ml60 { margin-left: 60px !important; }
.c_ml70 { margin-left: 70px !important; }
.c_ml80 { margin-left: 80px !important; }
.c_ml90 { margin-left: 90px !important; }

.c_mr0  { margin-right:  0px !important; }
.c_mr3  { margin-right:  3px !important; }
.c_mr5  { margin-right:  5px !important; }
.c_mr10 { margin-right: 10px !important; }
.c_mr15 { margin-right: 15px !important; }
.c_mr20 { margin-right: 20px !important; }
.c_mr25 { margin-right: 25px !important; }
.c_mr30 { margin-right: 30px !important; }
.c_mr35 { margin-right: 35px !important; }
.c_mr40 { margin-right: 40px !important; }
.c_mr45 { margin-right: 45px !important; }
.c_mr50 { margin-right: 50px !important; }
.c_mr60 { margin-right: 60px !important; }
.c_mr70 { margin-right: 70px !important; }
.c_mr80 { margin-right: 80px !important; }
.c_mr90 { margin-right: 90px !important; }

.c_mb0  { margin-bottom:  0px !important; }
.c_mb3  { margin-bottom:  3px !important; }
.c_mb5  { margin-bottom:  5px !important; }
.c_mb10 { margin-bottom: 10px !important; }
.c_mb15 { margin-bottom: 15px !important; }
.c_mb20 { margin-bottom: 20px !important; }
.c_mb25 { margin-bottom: 25px !important; }
.c_mb30 { margin-bottom: 30px !important; }
.c_mb35 { margin-bottom: 35px !important; }
.c_mb40 { margin-bottom: 40px !important; }
.c_mb45 { margin-bottom: 45px !important; }
.c_mb50 { margin-bottom: 50px !important; }
.c_mb60 { margin-bottom: 60px !important; }
.c_mb70 { margin-bottom: 70px !important; }
.c_mb80 { margin-bottom: 80px !important; }
.c_mb90 { margin-bottom: 90px !important; }

.c_hide { display: none; }
.c_iBlock { display: inline-block; }

.c_liquid { width: 100%; }

.c_breakall { word-break: break-all; }
.c_nowrap { white-space: nowrap; }

.c_over:hover {
    opacity: 0.7;
}

@media screen and (max-width: 1300px){ .c_ov1300 { display: none !important; } }
@media screen and (max-width: 1200px){ .c_ov1200 { display: none !important; } }
@media screen and (max-width: 1100px){ .c_ov1100 { display: none !important; } }
@media screen and (max-width: 1000px){ .c_ov1000 { display: none !important; } }
@media screen and (max-width: 900px){ .c_ov900 { display: none !important; } }
@media screen and (max-width: 800px){ .c_ov800 { display: none !important; } }
@media screen and (max-width: 767px){ .c_ov767 { display: none !important; } }
@media screen and (max-width: 700px){ .c_ov700 { display: none !important; } }
@media screen and (max-width: 600px){ .c_ov600 { display: none !important; } }
@media screen and (max-width: 500px){ .c_ov500 { display: none !important; } }
@media screen and (max-width: 400px){ .c_ov400 { display: none !important; } }
@media screen and (min-width: 1301px){ .c_ud1300 { display: none !important; } }
@media screen and (min-width: 1201px){ .c_ud1200 { display: none !important; } }
@media screen and (min-width: 1101px){ .c_ud1100 { display: none !important; } }
@media screen and (min-width: 1001px){ .c_ud1000 { display: none !important; } }
@media screen and (min-width: 901px){ .c_ud900 { display: none !important; } }
@media screen and (min-width: 801px){ .c_ud800 { display: none !important; } }
@media screen and (min-width: 768px){ .c_ud767 { display: none !important; } }
@media screen and (min-width: 701px){ .c_ud700 { display: none !important; } }
@media screen and (min-width: 601px){ .c_ud600 { display: none !important; } }
@media screen and (min-width: 501px){ .c_ud500 { display: none !important; } }
@media screen and (min-width: 401px){ .c_ud400 { display: none !important; } }
@media screen and (min-width: 351px){ .c_ud350 { display: none !important; } }


/* ページスタイル
----------------------------------------- */

body.noAnime * {
    transition: none !important;
    animation: none !important;
}

.pageArea {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.pageArea::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #1778ef;
    transition: border-width 0.5s;
}
.pageArea.border::after {
    border-width: 6px;
}
.pageArea::before {
    content: "";
    position: fixed;
    top: 28px;
    left: 24px;
    right: 24px;
    bottom: 38px;
    border: 1px solid #f5f5f5;
    background: url(../img/bg_grid.png);
}
@media screen and (max-width: 767px){
    .pageArea::before {
        top: 15px;
        left: 12px;
        right: 12px;
    }
    .pageArea.border::after {
        border-width: 3px;
    }
}

.pageHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s;
    transition-delay: 1s;
}
.pageHeader.show {
    opacity: 1;
}
.pageHeader .title {
    position: absolute;
    top: 22px;
    left: 20px;
    color: #333;
    font-family: 'Montserrat';
    font-size: 1.6rem;
    font-weight: bold;
    transition: color 1s;
}
body.colorBg .pageHeader .title {
    color: #fff;
}
.pageHeader .logo {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    opacity: 1;
    transition: opacity 1s;
    cursor: pointer;
}
.pageHeader .logo.white {
    opacity: 0;
}
body.colorBg .pageHeader .logo {
    opacity: 0;
}
body.colorBg .pageHeader .logo.white {
    opacity: 1;
}
@media screen and (max-width: 767px){
    .pageHeader .title {
        top: 15px;
        left: 57px;
        font-size: 1.4rem;
    }
    .pageHeader .logo {
        top: 12px;
        left: 12px;
        right: auto;
        width: 35px;
    }
}

@media screen and (max-width: 767px){
    .menuBtn {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 2100;
        width: 50px;
        height: 50px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .menuBtn.show {
        opacity: 1;
    }
    .menuBtn::before,
    .menuBtn::after {
        content: "";
        position: absolute;
        top: 14px;
        left: 0;
        right: 0;
        width: 30px;
        height: 2px;
        margin: 0 auto;
        background-color: #333;
        transition: all 0.3s;
    }
    .menuBtn::after {
        top: 34px;
        box-shadow: 0 -10px #333;
        transition: all 0.3s;
    }
    body.colorBg .menuBtn::before,
    body.colorBg .menuBtn::after {
        background-color: #fff;
    }
    body.colorBg .menuBtn::after {
        box-shadow: 0 -10px #fff;
    }
    .menuBtn.open::before {
        top: 24px;
        transform: rotate(45deg);
        background-color: #fff;
    }
    .menuBtn.open::after {
        top: 24px;
        box-shadow: none !important;
        transform: rotate(-45deg);
        background-color: #fff;
    }
}

.spMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background-color: #1778ef;
    padding-top: 65px;
    color: #fff;
    display: none;
}
.spMenu .bg li {
    position: absolute;
    animation: rotate 10s infinite linear;
}
.spMenu .bg01 { left: 64%; top: 15.1%; width: 18.5%; }
.spMenu .bg02 { left: 28.7%; top: 32.6%; width: 10.9%; }
.spMenu .bg03 { left: 72%; top: 52.1%; width: 12.3%; }
.spMenu .bg04 { left: 14.5%; top: 70.5%; width: 15.7%; }
.spMenu .bg05 { left: 51.9%; top: 71.4%; width: 79.7%; }

.spMenu .menu {
    position: relative;
}
.spMenu .menu li {
    margin-bottom: 35px;
    background: url(../img/menu_icon.png) no-repeat 17px 3px;
    background-size: 18px auto;
    padding-left: 44px;
    font-size: 1.6rem;
}

.navi {
    position: fixed;
    top: 50%;
    right: 20px;
    z-index: 1000;
    transform: translateY(-50%);
}
.navi li {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.navi li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    margin: auto;
    border-radius: 50%;
    background-color: #cddff6;
}
.navi li.current::after {
    background-color: #5699ec;
}
.navi li + li {
    margin-top: 4px;
}
@media screen and (max-width: 767px){
    .navi {
        display: none;
    }
}

.section {
    position: relative;
    z-index: 10;
    height: 100vh;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity 0.4s;
    opacity: 1;
}
.section.hide {
    opacity: 0;
}
.section.hasLine {
    margin: 0 6px;
}
.sectionInner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    max-height: 680px;
}
@media screen and (max-width: 767px){
    .section {
        min-height: 0;
    }
    .section.hasLine {
        margin: 0 3px;
    }
    .sectionInner {
        max-width: 440px;
        max-height: 600px;
    }
}

.leadText {
    margin-bottom: 25px;
    text-align: center;
    font-size: 2.8rem;
    font-weight: bold;
}
.leadText span {
    position: relative;
    z-index: 0;
    display: inline-block;
}
.leadText span::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 7px;
    right: 7px;
    bottom: 0;
    height: 14px;
    background-color: rgba(123,216,247,0.6);
}
.leadText span + span::before {
    left: -7px;
}
.subLead {
    margin-bottom: 15px;
    text-align: center;
    font-size: 2.4rem;
}
@media screen and (max-width: 767px){
    .leadText {
        font-size: 1.8rem;
    }
    .leadText span::before {
        height: 8px;
    }
    .leadText span + span::before {
        left: 7px;
    }
    .subLead {
        font-size: 1.6rem;
    }
}

@keyframes rotate {
    0% { transform: rotate(0); }
    100% { transform: rotate(-360deg); }
}
@keyframes rotateR {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

.monoair {
    position: relative;
}
.monoair .reel01 {
    position: absolute;
    top: 36.99%;
    left: 30.34%;
    width: 33.43%;
    animation: rotateR 3.5s infinite linear;
}
.monoair .reel02 {
    position: absolute;
    top: 2.89%;
    left: 51.4%;
    width: 45.79%;
    animation: rotateR 3.5s infinite linear;
}
.monoair .body {
    position: absolute;
    top: 0;
    left: 0;
}
.monoair canvas {
    position: absolute;
    right: 96%;
}

.bicycle {
    position: relative;
    max-width: 263px;
}
.bicycle .load {
    position: absolute;
    top: 0;
    right: 0;
    width: 49.36%;
}
.bicycle .leg01 {
    position: absolute;
    left: 37.64%;
    top: 40.5%;
    width: 31.56%;
    transform-origin: 85% 30%;
}
.bicycle.run .leg01 {
    animation: leg01 1.5s infinite linear;
}
@keyframes leg01 {
    0% { transform: rotate(0); }
    13% { transform: rotate(-15deg); }
    25% { transform: rotate(-26deg); }
    38% { transform: rotate(-34deg); }
    50% { transform: rotate(-30deg); }
    75% { transform: rotate(-14deg); }
    88% { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
}
.bicycle.stop .leg01 {
    display: none;
}
.bicycle.pause .leg01 {
    animation: none;
}
.bicycle .leg02 {
    position: absolute;
    left: 37.64%;
    top: 50%;
    width: 8.75%;
    transform-origin: 50% 50%;
}
.bicycle.run .leg02 {
    animation: leg02 1.5s infinite linear;
}
@keyframes leg02 {
    0% { left: 37.64%; top: 50%; transform: rotate(0); }
    13% { left: 38%; top: 57%; transform: rotate(5deg); }
    25% { left: 42%; top: 60%; transform: rotate(11deg); }
    38% { left: 45%; top: 63%; transform: rotate(8deg); }
    50% { left: 46%; top: 61%; transform: rotate(-5deg); }
    75% { left: 44%; top: 55%; transform: rotate(-26deg); }
    88% { left: 41%; top: 52%; transform: rotate(-18deg); }
    100% { left: 37.64%; top: 50%; transform: rotate(0); }
}
.bicycle.stop .leg02 {
    display: none;
}
.bicycle.pause .leg02 {
    animation: none;
}
.bicycle .leg03 {
    position: absolute;
    left: 57.41%;
    bottom: 0;
    width: 12.55%;
    opacity: 0;
}
.bicycle.stop .leg03 {
    opacity: 1;
}
.bicycle .pedal {
    position: absolute;
    left: 44.87%;
    top: 78.1%;
    width: 9.13%;
}
.bicycle.run .pedal {
    animation: rotate 1.5s infinite linear;
}
.bicycle.stop .pedal {
    display: none;
}
.bicycle.pause .pedal {
    animation: none;
}
.bicycle .sweat {
    position: absolute;
    left: 9.89%;
    top: 9.09%;
    width: 56.65%;
    opacity: 0;
    transform: scale(0.7,0.7);
}
.bicycle.high .sweat {
    transition: all 0.5s;
    transition-delay: 1s;
    opacity: 1;
    transform: scale(1,1);
}

.gear {
    position: absolute;
    width: 328px;
}
.gear::before {
    content: "";
    display: block;
    padding-top: 37.8%;
}
.gear .gear01 {
    position: absolute;
    top: 4.84%;
    left: 2.44%;
    width: 34.45%;
    animation: rotate 5.5s infinite linear;
}
.gear.high .gear01 {
    animation-duration: 7s;
}
.gear.stop .gear01 {
    animation-play-state: paused;
}
.gear .gear02 {
    position: absolute;
    top: 13.71%;
    left: 68.29%;
    width: 29.57%;
    animation: rotate 5s infinite linear;
}
.gear.stop .gear02 {
    animation-play-state: paused;
}
.gear svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.memoBox {
    position: relative;
    max-width: 840px;
    min-height: 130px;
    margin: 0 auto;
    border: 1px solid #e2e2e2;
    background-color: #f8f8f8;
    padding: 30px 42px 20px;
}
.memoBox * {
    position: relative;
    z-index: 10;
}
.memoBox h3 {
    position: absolute;
    top: -20px;
    left: 42px;
    color: #1778ef;
    font-family: 'Montserrat';
    font-size: 3.6rem;
    font-weight: bold;
}
.memoBox p {
    line-height: 1.8;
}
@media screen and (max-width: 767px){
    .memoBox {
        min-height: 120px;
        margin: 0 10px;
        padding: 15px 15px 10px;
        font-size: 12px;
    }
    .memoBox h3 {
        top: -15px;
        left: 15px;
        font-size: 2.4rem;
    }
    .memoBox p {
        line-height: 1.5;
    }
}

.cmnBtn {
    position: relative;
    display: block;
    background-color: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 5px 5px #dcdcdc;
    text-align: center;
    color: #1778ef;
    font-family: 'Montserrat';
    font-size: 3.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: box-shadow 0.3s;
}
.cmnBtn:hover {
    box-shadow: 5px 5px #ccc;
}
.cmnBtn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 14px;
    height: 14px;
    border-top: 3px solid #1778ef;
    border-right: 3px solid #1778ef;
    transform-origin: right top;
    transform: rotate(45deg);
}
@media screen and (max-width: 767px){
    .cmnBtn {
        border-radius: 6px;
        padding: 7px 5px 7px 0;
        box-shadow: 2px 2px #dcdcdc;
        font-size: 1.8rem;
    }
    .cmnBtn::after {
        right: 8px;
        width: 8px;
        height: 8px;
        border-top-width: 2px;
        border-right-width: 2px;
    }
}

.sec01 .skipBtn {
    position: absolute;
    left: 15px;
    bottom: 15px;
    z-index: 10;
    border-radius: 6px;
    padding: 6px 0;
    width: 120px;
    font-size: 1.6rem;
}
.sec01 .skipBtn::after {
    right: 10px;
    width: 10px;
    height: 10px;
}
.sec01 .bg {
    position: absolute;
    top: 0vh;
    left: 0;
    width: 100%;
    height: 100%;
    transition: top 1.5s;
}
.sec01 .bg li {
    position: absolute;
    opacity: 0;
    border-radius: 50%;
    transition: opacity 1s;
}
.sec01 .bg.show li {
    opacity: 1;
}
.sec01 .bg.up {
    top: -100vh;
}
.sec01 .bg.down {
    top: 120vh;
}
.sec01 .bg li img {
    animation: rotate 4s infinite linear;
}
.sec01 .bg li:empty::after {
    content: "";
    display: block;
    padding-top: 100%;
    border-radius: 50%;
}
.sec01 .bg01 { left: 58%; top: 25%; width: 7.19%; }
.sec01 .bg02 { left:  1%; top: 37%; width: 6.41%; }
.sec01 .bg03 { left: 85%; top: 85%; width: 5.47%; }
.sec01 .bg04 { left: 27%; top: 47%; width: 4.77%; }
.sec01 .bg05 {
    left: 61%;
    top: 60%;
    width: 3.13%;
    border: 6px solid rgba(0,183,238,0.3);
}
.sec01 .bg06 {
    left: 57%;
    top: 82%;
    width: 4.69%;
    border: 8px solid rgba(23,120,239,0.6);
}
.sec01 .bg07 {
    left: 62%;
    top: 12%;
    width: 2.34%;
    border: 5px solid rgba(0,183,238,0.6);
}
.sec01 .bg08 {
    left: 94%;
    top: 88%;
    width: 1.56%;
    border: 4px solid rgba(0,183,238,0.6);
}
.sec01 .bg09 {
    left: 31%;
    top: 75%;
    width: 2.34%;
    border: 6px solid rgba(23,120,239,0.6);
}
.sec01 .bg10 {
    left: 88%;
    top: 63%;
    width: 3.13%;
    border: 6px solid rgba(23,120,239,0.6);
}
.sec01 .item {
    position: absolute;
    transition: all 1.5s;
}
.sec01 .item01 { left: 69%; top: 6%; width: 27.97%; }
.sec01 .item01.start { left: 36%; top: 25%; }
.sec01 .item02 { left:  3%; top: -3%; width: 22.03%; }
.sec01 .item03 { left: 31%; top:  6%; width: 20.08%; }
.sec01 .item04 { left:  5%; top: 50%; width: 23.28%; }
.sec01 .item05 { left: 34%; top: 66%; width: 20.94%; }
.sec01 .item06 { left: 63%; top: 57%; width: 21.25%; }

.sec01 .item img {
    opacity: 0;
}
.sec01 .item .circle,
.sec01 .item .img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.sec01 .item .rotate {
    animation: rotate 6s infinite linear;
}
.sec01 .item.show img {
    transition: opacity 1s;
    opacity: 1;
}
.sec01 .item.show .img {
    transition-delay: 0.5s;
}
.sec01 .item.show .text {
    transition: opacity 2s;
    transition-delay: 1s;
}
.sec01 .item01.hide {
    transition: opacity 0.5s;
    opacity: 0;
}
.sec01 .item.up {
    opacity: 0;
}
.sec01 .item01.up { top: calc(-130vh +  6%); transition: all 1.5s; }
.sec01 .item02.up { top: calc(-130vh -  3%); }
.sec01 .item03.up { top: calc(-130vh +  6%); }
.sec01 .item04.up { top: calc(-130vh + 50%); }
.sec01 .item05.up { top: calc(-130vh + 66%); }
.sec01 .item06.up { top: calc(-130vh + 57%); }
body.s_ie .sec01 .item01.up { top: -144%; }
body.s_ie .sec01 .item02.up { top: -153%; }
body.s_ie .sec01 .item03.up { top: -144%; }
body.s_ie .sec01 .item04.up { top: -100%; }
body.s_ie .sec01 .item05.up { top: -84%; }
body.s_ie .sec01 .item06.up { top: -93%; }

.sec01 .bg.group02 li {
    transition: all 2s;
}
.sec01 .bg11 { left: 82%; top: 40%; width: 15.63%; }
.sec01 .bg.show .bg11 { top: -10%; }
.sec01 .bg12 { left: 33%; top: 28%; width: 6.41%; }
.sec01 .bg.show .bg12 { top:  3%; }
.sec01 .bg13 { left: 39%; top: 95%; width: 5.08%; }
.sec01 .bg.show .bg13 { top: 70%; }
.sec01 .bg14 { left: 19%; top: 45%; width: 5.86%; z-index: 10; }
.sec01 .bg.show .bg14 { top: 20%; }
.sec01 .bg15 { left: 64%; top: 114%; width: 5.47%; }
.sec01 .bg.show .bg15 { top: 89%; }
.sec01 .bg16 { left: 69%; top: 34%; width: 8.59%; }
.sec01 .bg.show .bg16 { top:  9%; }
.sec01 .bg17 { left: 82%; top:115%; width: 12.58%; }
.sec01 .bg.show .bg17 { top: 65%; }
.sec01 .bg18 { left:  9%; top: 44%; width: 4.14%; }
.sec01 .bg19 { left: 73%; top: 58%; width: 3.44%; }
.sec01 .bg20 { left: 71%; top: 88%; width: 9.14%; }
.sec01 .bg.show .bg20 { top: 63%; }
.sec01 .bg21 { left: 86%; top: 55%; width: 6.41%; }
.sec01 .bg.show .bg21 { top: 30%; }
.sec01 .bg22 { left:  6%; top:121%; width: 14.77%; }
.sec01 .bg.show .bg22 { top: 71%; }
.sec01 .bg23 { left: 10%; top: 52%; width: 14.84%; }
.sec01 .bg.show .bg23 { top:  2%; }
.sec01 .bg24 { left: 23%; top: 77%; width: 3.52%; }
.sec01 .bg25 { left: 26%; top: 32%; width: 2.19%; }
.sec01 .bg26 { left: 87%; top: 28%; width: 2.19%; }

.sec01 .bg19::after { background-color: rgba(219,242,250,0.5); }
.sec01 .bg20::after { background-color: rgba(241,241,241,0.5); }
.sec01 .bg21::after { background-color: rgba(241,241,241,0.5); }
.sec01 .bg22::after { background-color: rgba(183,230,245,0.5); }
.sec01 .bg23::after { background-color: rgba(238,238,238,0.5); }
.sec01 .bg24::after { background-color: rgba(121,174,238,0.7); }
.sec01 .bg25::after { background-color: rgba(219,242,250,0.7); }
.sec01 .bg26::after { background-color: rgba(160,197,242,0.7); }

.sec01 .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 1s;
    width: 152px;
}
.sec01 .logo.show {
    opacity: 1;
}
.sec01 .logo.small {
    width: 92px;
}
.sec01 .logo.move {
    top: 25%;
}
.sec01 .logo.hide {
    top: -50%;
}
.sec01 .title {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    transition: all 1s;
}
.sec01 .title.show {
    top: 35%;
    opacity: 1;
}
.sec01 .title.delay {
    transition-delay: 1s;
}
.sec01 .title .text01 {
    margin-bottom: 5px;
    color: #6b6b6b;
    font-size: 2rem;
}
.sec01 .title .text02 {
    color: #6b6b6b;
    font-family: 'Montserrat';
    font-size: 2rem;
}
.sec01 .title h1 {
    color: #111;
    font-family: 'Montserrat';
    font-size: 7.4rem;
    font-weight: bold;
    transition: all 1s;
}
body.s_ie .sec01 .title h1,
body.s_edge .sec01 .title h1 {
    font-weight: normal;
}
.sec01 .title .text03 {
    color: #111;
    font-size: 2.8rem;
}
.sec01 .title.move {
    transition-delay: 0s;
    top: -20px;
}
.sec01 .title.move .text01,
.sec01 .title.move .text02,
.sec01 .title.move .text03 {
    opacity: 0;
}
.sec01 .title.move h1 {
    font-size: 3rem;
}
@media screen and (max-width: 767px){
    .sec01 .bg01 { left: 87%; top: -2%; width: 11%; }
    .sec01 .bg02 { left:  1%; top: 47%; width:  9%; }
    .sec01 .bg03 { left: 81%; top: 85%; width:  9%; }
    .sec01 .bg04 { left: 84%; top: 42%; width: 10%; }
    .sec01 .bg05 {
        left: 51%;
        top: 61%;
        width: 5%;
        border-width: 3px;
    }
    .sec01 .bg06 {
        left: 9%;
        top: 90%;
        width: 8%;
        border-width: 4px;
    }
    .sec01 .bg07 {
        left: 37%;
        top: 20%;
        width: 6%;
        border-width: 3px;
    }
    .sec01 .bg08 {
        left: 95%;
        top: 79%;
        width: 4%;
        border-width: 3px;
    }
    .sec01 .bg09 {
        left: 41%;
        top: 1%;
        width: 8%;
        border-width: 3px;
    }
    .sec01 .bg10 {
        left: 92%;
        top: 55%;
        width: 4%;
        border-width: 3px;
    }
    .sec01 .item01 { left: 47%; top:  5%; width: 50%; }
    .sec01 .item01.start { left: 25%; top: 35%; }
    .sec01 .item02 { left:  7%; top: 24%; width: 32%; }
    .sec01 .item03 { left:  1%; top:  0%; width: 30%; }
    .sec01 .item04 { left: -4%; top: 57%; width: 45%; }
    .sec01 .item05 { left: 44%; top: 74%; width: 30%; }
    .sec01 .item06 { left: 68%; top: 58%; width: 30%; }

    .sec01 .item01.up { top: calc(-130vh +  5%); }
    .sec01 .item02.up { top: calc(-130vh + 24%); }
    .sec01 .item03.up { top: calc(-130vh +  0%); }
    .sec01 .item04.up { top: calc(-130vh + 57%); }
    .sec01 .item05.up { top: calc(-130vh + 77%); }
    .sec01 .item06.up { top: calc(-130vh + 58%); }
    body.s_ie .sec01 .item01.up { top: -145%; }
    body.s_ie .sec01 .item02.up { top: -126%; }
    body.s_ie .sec01 .item03.up { top: -150%; }
    body.s_ie .sec01 .item04.up { top: -93%; }
    body.s_ie .sec01 .item05.up { top: -83%; }
    body.s_ie .sec01 .item06.up { top: -92%; }

    .sec01 .bg11 { left: 76%; top: 44%; width: 30%; }
    .sec01 .bg.show .bg11 { top: -6%; }
    .sec01 .bg12 { width: 15%; }
    .sec01 .bg13 { top: 100%; width: 16%; }
    .sec01 .bg.show .bg13 { top: 75%; }
    .sec01 .bg14 { left: 1%; width: 15%; }
    .sec01 .bg15 { left: 70%; top: 107%; width: 16%; }
    .sec01 .bg.show .bg15 { top: 82%; }
    .sec01 .bg16 { top: 38%; width: 12%; }
    .sec01 .bg.show .bg16 { top: 13%; }
    .sec01 .bg17 { left: 86%; top: 95%; width: 20%; }
    .sec01 .bg.show .bg17 { top: 45%; }
    .sec01 .bg18 { left: -3%; top: 49%; width: 12%; }
    .sec01 .bg19 { width: 8%; }
    .sec01 .bg20 { left: 80%; top: 92%; width: 20%; }
    .sec01 .bg.show .bg20 { top: 67%; }
    .sec01 .bg21 { top: 45%; width: 15%; }
    .sec01 .bg.show .bg21 { top: 20%; }
    .sec01 .bg22 { left: -3%; top: 128%; width: 30%; }
    .sec01 .bg.show .bg22 { top: 78%; }
    .sec01 .bg23 { top: 47%; width: 25%; }
    .sec01 .bg.show .bg23 { top: -3%; }
    .sec01 .bg24 { width: 8%; }
    .sec01 .bg25 { left: 13%; width: 7%; }
    .sec01 .bg26 { top: 30%; width: 5%; }

    .sec01 .logo {
        width: 100px;
    }
    .sec01 .logo.small {
        width: 70px;
    }
    .sec01 .logo.move {
        top: 20%;
    }
    .sec01 .logo.hide {
        top: -50%;
    }
    .sec01 .title {
        top: 38%;
    }
    .sec01 .title.show {
        top: 28%;
    }
    .sec01 .title.move {
        top: 0;
    }
    .sec01 .title .text01 {
        font-size: 1.6rem;
    }
    .sec01 .title .text02 {
        font-size: 1.6rem;
    }
    .sec01 .title h1 {
        margin: 10px 0;
        font-size: 4.2rem;
    }
    .sec01 .title .text03 {
        font-size: 2rem;
    }
    .sec01 .title.move h1 {
        font-size: 1.8rem;
    }
}

.sec01 .system {
    position: absolute;
    top: 100vh;
    padding-top: 100px;
    width: 100%;
    height: 100%;
    transition: top 1.5s;
}
.sec01 .system.show {
    top: 0vh;
}
.sec01 .bg27 { left:  9%; top: 22%; width: 6.25%; }
.sec01 .bg28 { left: 20%; top: 36%; width: 3.67%; }
.sec01 .bg29 { left: 14%; top: 72%; width: 6.64%; }
.sec01 .bg30 { left: 81%; top: 26%; width: 5.47%; }
.sec01 .bg31 { left: 78%; top: 35%; width:  3.2%; }

.sec01 .ground {
    position: absolute;
    left: -500px;
    right: -500px;
    bottom: 70px;
    height: 6px;
    background-color: #dcdcdc;
}
.sec01 .monoair {
    position: absolute;
    left: -50%;
    bottom: 76px;
    width: 27.81%;
    margin: 0 auto;
}
.sec01 .system.show .monoair {
    transition: left 2s;
    transition-delay: 1.5s;
    left: 35.9%;
}
.sec01 .monoair canvas {
    bottom: -25px;
    height: 44px;
}
.sec01 .btn {
    display: none;
}
.sec01 .box {
    position: absolute;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    padding: 40px 28px 20px;
    width: 28.125%;
}
.sec01 .box01 {
    top: 40%;
    left: 5%;
    opacity: 0;
}
.sec01 .system.show .box01 {
    transition: opacity 1s;
    transition-delay: 3.5s;
    opacity: 1;
}
.sec01 .box02 {
    right: 5%;
    bottom: 15%;
    opacity: 0;
}
.sec01 .system.show .box02 {
    transition: opacity 1s;
    transition-delay: 4s;
    opacity: 1;
}
.sec01 .box .num {
    position: absolute;
    top: -20px;
    left: 30px;
    border-bottom: 4px solid #1778ef;
    color: #1778ef;
    font-size: 3.4rem;
}
.sec01 .box .lead {
    margin-bottom: 8px;
    color: #1778ef;
    font-size: 2rem;
    font-weight: bold;
}
.sec01 .box p {
    line-height: 2;
}
@media screen and (min-width: 768px) and (max-height: 650px){
    .sec01 .system {
        padding-top: 85px;
    }
    .sec01 .system .leadText {
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 767px){
    .sec01 .sectionInner {
        max-height: 680px;
    }
    .sec01 .system {
        padding-top: 130px;
    }
    .sec01 .bg27 { left:  5%; top: 12%; width: 12%; }
    .sec01 .bg28 { left: 25%; top: 40%; width:  9%; }
    .sec01 .bg29 { left: 13%; top: 85%; width: 12%; }
    .sec01 .bg30 { left: 83%; top: 17%; width:  8%; }
    .sec01 .bg31 { left: 88%; top: 55%; width:  8%; }

    .sec01 .leadText {
        margin-bottom: 15px;
    }
    .sec01 .ground {
        left: 0;
        right: 0;
        bottom: 120px;
    }
    .sec01 .monoair {
        bottom: 126px;
        width: 50%;
    }
    .sec01 .system.show .monoair {
        left: 25%;
    }
    .sec01 .btn {
        display: block;
        position: absolute;
        border: 2px solid #1778ef;
        background-color: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        padding-top: 5px;
        color: #1778ef;
        text-align: center;
        font-size: 24px;
        opacity: 0;
    }
    .sec01 .btn::after {
        content: "＋";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;
        font-size: 16px;
    }
    .sec01 .btn01 {
        top: 50%;
        left: 10%;
    }
    .sec01 .btn02 {
        top: 65%;
        right: 10%;
    }
    .sec01 .system.show .btn01 {
        transition: opacity 1s;
        transition-delay: 3.5s;
        opacity: 1;
    }
    .sec01 .system.show .btn02 {
        transition: opacity 1s;
        transition-delay: 4s;
        opacity: 1;
    }
    .sec01 .modalBg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        background-color: rgba(255,255,255,0.9);
        display: none;
    }
    .sec01 .box {
        z-index: 2000;
        width: 90%;
        margin: 0 auto;
        max-width: 400px;
        padding: 70px 28px 20px;
        display: none;
    }
    .sec01 .box::after {
        content: "×";
        position: absolute;
        top: 7px;
        right: 10px;
        font-size: 24px;
    }
    .sec01 .box01 {
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }
    .sec01 .box02 {
        left: 0;
        right: 0;
        bottom: 50%;
        transform: translateY(50%);
    }
    .sec01 .system.show .box01 {
        transition: none;
        transition-delay: 0;
    }
    .sec01 .system.show .box02 {
        transition: none;
        transition-delay: 0;
    }
    .sec01 .box .num {
        top: 5px;
    }
}

.sec02_01 .sectionInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec02_01 .leadText {
    font-size: 4rem;
}
@media screen and (max-width: 767px){
    .sec02_01 .leadText {
        font-size: 2.2rem;
        line-height: 1.5;
    }
}

.sec02 .sectionInner {
    padding-top: 100px;
}
.sec02 .leadText {
    font-size: 3.2rem;
    opacity: 0;
}
.sec02.showed .leadText {
    transition: opacity 1s;
    transition-delay: 3.5s;
    opacity: 1;
}
.sec02 .animeArea {
    position: relative;
    left: 100vw;
    width: 840px;
    height: 265px;
    margin: 0 auto;
}
.sec02.showed .animeArea {
    transition: left 3s;
    left: 0vw;
}
.sec02 .bicycle {
    position: absolute;
    top: -20px;
    left: 150px;
    opacity: 1;
}
.sec02 .animeArea.scene02 .bicycle {
    transition: opacity 0.5s;
    opacity: 0;
}
.sec02 .gear {
    position: absolute;
    top: 60px;
    left: 480px;
}
.sec02 .animeArea.scene02 .gear {
    transition: all 2s;
    top: 50px;
    left: 0;
}
.sec02 .gear .text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -35px;
    text-align: center;
    opacity: 0;
}
.sec02 .animeArea.scene02 .gear .text {
    transition: opacity 2s;
    opacity: 1;
}
.sec02 .equal {
    position: absolute;
    top: 150px;
    left: 380px;
    opacity: 0;
}
.sec02 .animeArea.scene02 .equal {
    transition: opacity 0.5s;
    transition-delay: 2s;
    opacity: 1;
}
.sec02 .equal::before,
.sec02 .equal::after {
    content: "";
    position: absolute;
    top: -49px;
    left: 0;
    right: 0;
    width: 60px;
    height: 6px;
    margin: 0 auto;
    background-color: #626262;
}
.sec02 .equal::after {
    top: -20px;
}
.sec02 .reel {
    position: absolute;
    top: 20px;
    left: 560px;
    width: 187px;
    opacity: 0;
}
.sec02 .reel::before {
    content: "";
    display: block;
    padding-top: 94.65%;
}
.sec02 .reel .reel01 {
    position: absolute;
    left: 3.74%;
    bottom: 3.39%;
    width: 49.2%;
    animation: rotateR 6.5s infinite linear;
}
.sec02 .reel .reel02 {
    position: absolute;
    top: 0;
    right: 0;
    width: 65.24%;
    animation: rotateR 7s infinite linear;
}
.sec02 .reel svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sec02 .reel p {
    position: absolute;
    left: -50px;
    right: -50px;
    bottom: -30px;
    text-align: center;
}
.sec02 .animeArea.scene02 .reel {
    transition: opacity 0.5s;
    transition-delay: 2s;
    opacity: 1;
}
.sec02 .memoBox {
    opacity: 0;
}
.sec02.showed .memoBox {
    transition: opacity 2s;
    transition-delay: 3.5s;
    opacity: 1;
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec02 .sectionInner {
        padding-top: 60px;
    }
}
@media screen and (min-width: 768px) and (min-height: 800px){
    .sec02 .sectionInner {
        max-height: 800px;
    }
    .sec02 .animeArea {
        margin: 60px auto;
    }
}
@media screen and (max-width: 767px){
    .sec02 .sectionInner {
        padding-top: 50px;
        height: 550px;
    }
    .sec02 .leadText {
        height: 26px;
        font-size: 1.8rem;
    }
    .sec02 .animeArea {
        width: 100%;
        height: 245px;
    }
    .sec02 .bicycle {
        top: -15px;
        left: 20px;
        right: 0;
        width: 150px;
        margin: 0 auto;
    }
    .sec02 .gear {
        top: 150px;
        left: 0;
        right: 0;
        width: 180px;
        margin: 0 auto;
    }
    .sec02 .animeArea.scene02 .gear {
        top: 20px;
        right: 35%;
    }
    .sec02 .gear .text {
        bottom: -20px;
        font-size: 12px;
    }
    .sec02 .equal {
        top: 180px;
        left: auto;
        right: 180px;
        font-size: 12px;
    }
    .sec02 .equal::before,
    .sec02 .equal::after {
        top: -36px;
        width: 40px;
        height: 4px;
    }
    .sec02 .equal::after {
        top: -20px;
    }
    .sec02 .reel {
        top: 75px;
        left: auto;
        right: 20px;
        width: 130px;
    }
    .sec02 .reel p {
        left: -25px;
        right: -25px;
        bottom: -25px;
        font-size: 12px;
    }
}

.sec03 .sectionInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec03 .leadText {
    font-size: 4rem;
}
@media screen and (max-width: 767px){
    .sec03 .sectionInner {
        max-width: 360px;
    }
    .sec03 .leadText {
        font-size: 2.4rem;
        line-height: 1.5;
    }
}

.sec04 .sectionInner {
    padding-top: 80px;
}
.sec04 .animeArea {
    position: relative;
    left: 0;
    width: 760px;
    height: 260px;
    margin: 0 auto;
}
.sec04 .image01 {
    position: absolute;
    z-index: 0;
    top: 20px;
    left: 270px;
    opacity: 1;
    transition: opacity 0.5s;
}
.sec04 .animeArea.scene03 .image01,
.sec04 .animeArea.scene04 .image01 {
    top: 28px;
    left: 480px;
}
.sec04 .animeArea.scene02 .image01,
.sec04 .animeArea.scene04 .image01 {
    opacity: 0;
}
.sec04 .image01::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    z-index: -1;
    width: 300px;
    height: 6px;
    background-color: #dcdcdc;
}
.sec04 .animeArea.scene03 .image01::before,
.sec04 .animeArea.scene04 .image01::before {
    width: 1000px;
}
.sec04 .image01 .reel {
    position: absolute;
    top: 2%;
    right: 2.5%;
    width: 56.13%;
    animation: oldReel 1s infinite linear;
}
@keyframes oldReel {
    0% { transform: rotate(0); }
    40% { transform: rotate(0); }
    47% { transform: rotate(10deg); }
    50% { transform: rotate(0); }
    90% { transform: rotate(0); }
    97% { transform: rotate(10deg); }
    100% { transform: rotate(0); }
}
.sec04 .image01 .tape {
    position: absolute;
    bottom: -4px;
    left: -130px;
    width: 130px;
    height: 9px;
    background: url(../img/sec04_img_01_03.png);
    animation: oldTape 1s infinite linear;
}
@keyframes oldTape {
    0% { background-position: 0 0; }
    40% { background-position: 0 0; }
    50% { background-position: -11px 0; }
    90% { background-position: -11px 0; }
    100% { background-position: -22px 0; }
}
@keyframes oldTapeSp {
    0% { background-position: 0 0; }
    40% { background-position: 0 0; }
    50% { background-position: -8px 0; }
    90% { background-position: -8px 0; }
    100% { background-position: -16px 0; }
}
.sec04 .image01 p {
    position: absolute;
    left: 35px;
    bottom: -35px;
    font-size: 1.6rem;
}
.sec04 .animeArea.scene03 .image01 p,
.sec04 .animeArea.scene04 .image01 p {
    display: none;
}
.sec04 .image02 {
    position: absolute;
    z-index: 0;
    top: 25px;
    left: 265px;
    width: 28.125%;
    opacity: 1;
    transition: opacity 0.5s;
}
.sec04 .animeArea:not(.scene02) .image02 {
    opacity: 0;
}
.sec04 .image02::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: -1;
    width: 300px;
    height: 6px;
    background-color: #dcdcdc;
}
.sec04 .image02 canvas {
    bottom: -12px;
}
.sec04 .image03 {
    position: absolute;
    z-index: 0;
    top: 25px;
    left: 110px;
    width: 28.125%;
    opacity: 1;
    transition: opacity 0.5s;
}
.sec04 .animeArea.scene01 .image03,
.sec04 .animeArea.scene02 .image03 {
    opacity: 0;
}
.sec04 .animeArea.scene04 .image03 {
    top: 64px;
    left: 214px;
    width: 44%;
    transition: all 1.5s;
}
.sec04 .image03::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: -1;
    width: 210px;
    height: 6px;
    background-color: #dcdcdc;
}
.sec04 .animeArea.scene04 .image03::before {
    display: none;
}
.sec04 .image03 canvas {
    bottom: -19px;
    height: 34px;
}
.sec04 .animeArea.scene04 .image03 canvas {
    display: none;
}
.sec04 .leadArea {
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.sec04 .leadArea .leadText {
    margin-bottom: 10px;
    font-size: 2.4rem;
}
.sec04 .textArea {
    position: relative;
    max-width: 760px;
    height: 105px;
    margin: 0 auto;
    padding: 0 10px;
    border-left: 2px solid #7ecef4;
    border-right: 2px solid #7ecef4;
    background-color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 2;
}
.sec04 .textArea::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    border-top: 2px solid #7ecef4;
}
.sec04 .textArea::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 90px;
    border-bottom: 2px solid #7ecef4;
}
.sec04 .textArea .inner::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20px;
    border-bottom: 2px solid #7ecef4;
}
.sec04 .textArea .inner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    border-top: 2px solid #7ecef4;
}
.sec04 .system {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: #1778ef;
    display: flex;
    min-height: 680px;
    align-items: center;
    opacity: 0;
    transition: opacity 1s;
}
.sec04 .system.show {
    z-index: 0;
    opacity: 1;
}
.sec04 .system .inner {
    position: relative;
    width: 100%;
    height: 480px;
    text-align: center;
}
.sec04 .system h3 {
    margin-bottom: 60px;
    color: #fff;
    font-size: 2.4rem;
}
.sec04 .system .bg li {
    position: absolute;
    animation: rotateR 4s infinite linear;
}
.sec04 .bg01 { left: 14%; top:  1%; width: 6.25%; }
.sec04 .bg02 { left:  8%; top: 82%; width: 4.69%; }
.sec04 .bg03 { left: 88%; top: 70%; width: 8.28%; }
.sec04 .bg04 { left: 87%; top:100%; width: 3.13%; }

.sec04 .system .bgText {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    color: #fff;
    font-family: 'Montserrat';
    font-size: 12rem;
    opacity: 0.1;
}
.sec04 .system .monoair {
    width: 332px;
    margin: 0 auto;
    top: 0;
    transition: top 0.5s;
}
.sec04 .system .monoair.run {
    top: 5%;
}
.sec04 .system .monoair .reel01,
.sec04 .system .monoair .reel02 {
    animation-play-state: paused;
}
.sec04 .system .monoair.run .reel01,
.sec04 .system .monoair.run .reel02 {
    animation-play-state: running;
}
.sec04 .system .monoair .body {
    position: static;
}
.sec04 .system .monoair .airtouch {
    position: absolute;
    top: 11.27%;
    left: 10.96%;
    width: 56.18%;
    transform-origin: 10% 93%;
    transform: rotate(-4deg);
    transition: all 0.5s;
}
.sec04 .system .monoair.run .airtouch {
    transform: rotate(0);
}
.sec04 .system .monoair .head {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 17.17%;
    transform: rotate(0);
    transition: all 0.5s;
}
.sec04 .system .monoair.run .head {
    transform: rotate(8deg);
}
.sec04 .system .monoair .push {
    position: absolute;
    top: 64%;
    left: -25%;
    width: 22.3%;
    opacity: 0;
}
.sec04 .system .monoair .push.show {
    transition: all 0.3s;
    top: 65%;
    left: -24%;
    opacity: 1;
}
.sec04 .system .monoair .line {
    position: absolute;
    top: 35%;
    left: 47%;
    display: none;
}
.sec04 .system .monoair .text {
    position: absolute;
    left: 100%;
    bottom: 0;
    border-bottom: 2px solid #fff;
    padding: 0 5px 5px 12px;
    white-space: nowrap;
    text-align: left;
    color: #fff;
    font-size: 2.4rem;
    line-height: 1.6;
}
.sec04 .system .monoair .text li {
    display: none;
}
.sec04 .system .monoair .text li.show {
    display: block;
}
.sec04 .system .tape {
    position: absolute;
    top: 434px;
    right: calc(50% + 158px);
    width: 0;
    height: 4px;
    background-color: #fff;
    transition: width 1s linear;
}
.sec04 .system .tape.show {
    transition-delay: 0.8s;
    width: 1000px;
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec04 .sectionInner {
        padding-top: 50px;
    }
    .sec04 .system {
        min-height: 620px;
    }
}
@media screen and (min-width: 768px) and (min-height: 800px){
    .sec04 .sectionInner {
        max-height: 800px;
    }
    .sec04 .animeArea {
        margin: 60px auto;
    }
    .sec04 .animeArea.scene04 .image03 {
        top: 78px;
    }
}
@media screen and (max-width: 1150px){
    .sec04 .system .monoair .text {
        font-size: 2.1rem;
    }
}
@media screen and (max-width: 767px){
    .sec04 .sectionInner {
        padding-top: 50px;
        height: 550px;
    }
    .sec04 .bg01 { left:  1%; top: -9%; width: 12%; }
    .sec04 .bg02 { left:  3%; top: 67%; width: 10%; }
    .sec04 .bg03 { left: 89%; top: 75%; width: 15%; }
    .sec04 .bg04 { left: 58%; top:105%; width:  9%; }

    .sec04 .animeArea {
        width: 320px;
        height: 230px;
    }
    .sec04 .image01 {
        top: 50px;
        left: 100px;
        width: 130px;
    }
    .sec04 .animeArea.scene03 .image01,
    .sec04 .animeArea.scene04 .image01 {
        top: 110px;
        left: 180px;
        width: 100px;
    }
    .sec04 .image01::before {
        bottom: -2px;
        height: 4px;
    }
    .sec04 .animeArea.scene03 .image01::before,
    .sec04 .animeArea.scene04 .image01::before {
        width: 300px;
    }
    .sec04 .image01 .tape {
        bottom: -3px;
        left: -100px;
        width: 100px;
        height: 7px;
        background-size: 8px auto;
        animation: oldTapeSp 1s infinite linear;
    }
    .sec04 .image01 p {
        left: 10px;
        bottom: -30px;
        font-size: 1.3rem;
    }
    .sec04 .image02 {
        top: 50px;
        left: 100px;
        width: 140px;
    }
    .sec04 .image02::before {
        bottom: -4px;
        height: 4px;
    }
    .sec04 .image02 canvas {
        bottom: -9px;
        height: 14px;
    }
    .sec04 .image03 {
        top: 15px;
        left: 0;
        right: 30%;
        width: 110px;
        margin: 0 auto;
    }
    .sec04 .animeArea.scene04 .image03 {
        top: 60px;
        left: 0;
        right: 0;
        width: 220px;
    }
    .sec04 .image03::before {
        width: 120px;
        height: 4px;
    }
    .sec04 .image03 canvas {
        bottom: -17px;
        height: 28px;
    }
    .sec04 .leadArea .leadText {
        margin-bottom: 0;
        font-size: 1.6rem;
        line-height: 1.4;
    }
    .sec04 .leadArea .leadText.s_spS {
        font-size: 1.3rem;
    }
    .sec04 .leadArea .leadText.s_spS span::before {
        bottom: 2px;
        height: 5px;
    }
    .sec04 .textArea {
        height: 95px;
        margin: 0 10px;
        font-size: 1.2rem;
        line-height: 1.4;
    }
    .sec04 .system {
        min-height: 0;
    }
    .sec04 .system .inner {
        height: 370px;
    }
    .sec04 .system h3 {
        margin-bottom: 30px;
        font-size: 1.8rem;
    }
    .sec04 .system .bgText {
        top: 70px;
        font-size: 7rem;
    }
    .sec04 .system .monoair {
        width: 220px;
    }
    .sec04 .system .monoair .line {
        top: 120%;
        left: -40px;
        right: -40px;
        width: auto;
        transition: top 0.5s;
    }
    .sec04 .system .monoair.run .line {
        top: 115%;
    }
    .sec04 .system .monoair .line img {
        display: none;
    }
    .sec04 .system .monoair .text {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        border-bottom: none;
        padding: 0;
        text-align: center;
        font-size: 1.5rem;
    }
    .sec04 .system .tape {
        top: 284px;
        right: calc(50% + 105px);
    }
    .sec04 .system .tape.show {
        width: 500px;
    }
}

.sec05 .sectionInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sec05 .question {
    margin-bottom: 30px;
    display: inline-block;
    background-color: rgba(123,216,247,0.4);
    padding: 13px 20px;
    font-size: 2.4rem;
    font-weight: bold;
}
.sec05 .leadText {
    font-size: 3.2rem;
}
.sec05 .leadText strong {
    font-size: 5rem;
    line-height: 1.1;
}
.sec05 .info {
    margin-top: 10px;
    font-size: 1.8rem;
}
@media screen and (max-width: 767px){
    .sec05 .question {
        margin-bottom: 20px;
        padding: 8px 10px;
        font-size: 1.6rem;
    }
    .sec05 .leadText {
        margin-bottom: 5px;
        font-size: 2rem;
    }
    .sec05 .leadText strong {
        font-size: 3rem;
    }
    .sec05 .info {
        margin-top: 20px;
        font-size: 1.4rem;
    }
}

.sec06 {
    background-color: #fff;
}
.sec06 .bg {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 40px;
    background: url(../img/sec06_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    overflow: hidden;
}
.sec06 .bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
}
.sec06 .bg video {
    position: absolute;
}
.sec06 .sectionInner {
    max-width: 1000px;
    max-height: 500px;
}
.sec06 .sectionInner .fukidashi {
    position: absolute;
    top: 144px;
    left: 10px;
    display: flex;
    align-items: center;
    background: url(../img/sec06_fukidashi.png) no-repeat 0 0;
    width: 558px;
    height: 165px;
    padding: 0 40px 0 24px;
    opacity: 0;
    transition: opacity 0.5s;
}
.sec06.show .sectionInner .fukidashi {
    transition-delay: 4.5s;
    opacity: 1;
}
.sec06 .sectionInner .fukidashi .leadText {
    text-align: left;
    font-size: 2.4rem;
    line-height: 1.8;
}
.sec06 .percent {
    position: absolute;
    top: 30px;
    right: 273px;
    width: 473px;
    transition: all 1.5s;
}
.sec06 .percent .base {
    opacity: 0;
    transition: all 0.5s;
}
.sec06 .percent .num {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s;
}
.sec06.show .percent {
    top: 118px;
    right: 34px;
    width: 349px;
    transition-delay: 3s;
}
.sec06.show .percent .base {
    transition-delay: 1.5s;
    opacity: 1;
}
.sec06.show .percent .num {
    transition-delay: 0.5s;
    opacity: 1;
}
.sec06 .note {
    position: absolute;
    left: 10px;
    bottom: 45px;
    width: 535px;
    background-color: rgba(255,255,255,0.7);
    padding: 10px 15px;
    font-size: 1.2rem;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.5s;
}
.sec06.show .note {
    transition-delay: 4.5s;
    opacity: 1;
}
.sec06 .overLayer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1s;
}
.sec06 .overLayer.show {
    opacity: 1;
}
.sec06 .overLayer .leadText {
    margin: 8px 0;
    font-size: 2.4rem;
}
.sec06 .overLayer ul {
    position: absolute;
    top: -70px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 1366px;
    height: 100%;
    max-height: 750px;
    margin: auto;
}
.sec06 .overLayer li {
    position: absolute;
    opacity: 0;
    transform: scale(1.5,1.5);
    transition: all 1s;
    transition-delay: 1s;
}
.sec06 .overLayer li.show {
    opacity: 1;
    transform: scale(1,1);
}
.sec06 .img01 { left: 23.4%; top: 5.5%; width: 26.6%; }
.sec06 .img02 { left: 69%; top: 53.4%; width: 38%; }
.sec06 .img03 { left: 19.8%; top: 69.6%; width: 32%; }
.sec06 .img04 { left: 49.4%; top: 13.5%; width: 22.4%; }
.sec06 .img05 { left: 4.6%; top: 56.5%; width: 26.9%; }
.sec06 .img06 { left: 50.1%; top: 66.9%; width: 26.9%; }
.sec06 .img07 { left: -2.8%; top: 12.1%; width: 30.9%; }
.sec06 .img08 { left: 70.5%; top: 10.6%; width: 28.3%; }

.sec06 .overLayer li p {
    position: absolute;
    background-color: rgba(255,255,255,0.8);
    padding: 5px 10px;
    font-size: 1.6rem;
}
.sec06 .img01 p { right: 0; top: 10px; }
.sec06 .img02 p { left: 0; top: 10px; }
.sec06 .img03 p { left: 0; bottom: 20px; }
.sec06 .img04 p { left: 0; bottom: 10px; }
.sec06 .img05 p { left: 0; top: 20px; }
.sec06 .img06 p { left: 0; top: 20px; }
.sec06 .img07 p { right: 0; bottom: 20px; }
.sec06 .img08 p { right: 0; bottom: 10px; }

@media screen and (min-width: 1201px) and (max-height: 800px){
    .sec06 .img03 p { bottom: 60px; }
}
@media screen and (max-width: 1200px){
    .sec06 .overLayer ul {
        top: 0;
        max-height: 700px;
    }
    .sec06 .img02 { top: 57.4%; }
    .sec06 .img05 { left: 1%; }
}
@media screen and (max-width: 767px){
    .sec06 .bg {
        top: 50px;
    }
    .sec06 .sectionInner {
        max-height: 450px;
    }
    .sec06 .sectionInner .fukidashi {
        top: 10px;
        left: 10px;
        right: 10px;
        justify-content: center;
        background: url(../img/sec06_fukidashi_sp.png) no-repeat 0 0;
        background-size: contain;
        width: auto;
        max-width: 335px;
        margin: 0 auto;
        height: 100px;
        padding: 0 0 22px;
    }
    .sec06 .sectionInner .fukidashi .leadText {
        text-align: center;
        font-size: 1.4rem;
        line-height: 1.5;
        white-space: nowrap;
    }
    .sec06 .percent {
        top: 28%;
        left: 0;
        right: 0;
        width: 60%;
        max-width: 210px;
        margin: 0 auto;
    }
    .sec06.show .percent {
        top: 28%;
        right: 0;
        width: 60%;
    }
    .sec06 .note {
        right: 10px;
        bottom: 10px;
        width: auto;
        padding: 10px;
        font-size: 1rem;
        line-height: 1.4;
    }
    .sec06 .overLayer .leadText {
        margin: 5px 0;
        font-size: 5vw;
    }
    .sec06 .img01 { left: 21%; top: 24%; width: 32%; }
    .sec06 .img02 { left: 66%; top: 66%; width: 41%; }
    .sec06 .img03 { left: 16%; top: 73%; width: 38%; }
    .sec06 .img04 { left: 44%; top: 11%; width: 35%; }
    .sec06 .img05 { left: -4%; top: 60%; width: 38%; }
    .sec06 .img06 { left: 48%; top: 62%; width: 32%; }
    .sec06 .img07 { left: -5%; top: 14%; width: 36%; }
    .sec06 .img08 { left: 71%; top: 19%; width: 35%; }

    .sec06 .overLayer li p {
        display: none;
    }
}

.sec07 .sectionInner {
    padding-top: 100px;
}
.sec07 .head {
    margin-bottom: 15px;
    text-align: center;
    font-family: 'Montserrat';
    font-size: 2.4rem;
    font-weight: bold;
}
.sec07 .leadText {
    margin-bottom: 50px;
    font-size: 3.2rem;
}
.sec07 .movie {
    width: 640px;
    margin: 0 auto;
}
.sec07 .movie .inner {
    position: relative;
    padding-top: 56.25%;
}
.sec07 .movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec07 .sectionInner {
        padding-top: 50px;
    }
    .sec07 .leadText {
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 767px){
    .sec07 .head {
        font-size: 1.8rem;
    }
    .sec07 .leadText {
        font-size: 2rem;
    }
    .sec07 .movie {
        width: 90%;
    }
}

.sec08::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 596px;
    height: 683px;
    background: url(../img/bg_lineup_01.png) no-repeat 0 100%;
}
.sec08::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 621px;
    height: 630px;
    background: url(../img/bg_lineup_02.png) no-repeat 100% 100%;
}
.sec08 .sectionInner {
    padding-top: 60px;
}
.sec08 .subLead {
    margin-bottom: 20px;
}
.sec08 .column {
    position: relative;
    z-index: 10;
    float: left;
    width: 50%;
    text-align: center;
}
.sec08 .logo {
    background-color: #fff;
    padding: 10px;
}
.sec08 h3 {
    margin: 5px 0 25px;
    font-size: 2.8rem;
}
.sec08 .img {
    position: relative;
    margin: 0 auto;
    margin-bottom: 45px;
}
.sec08 .mono .img {
    width: 360px;
}
.sec08 .pit .img {
    width: 360px;
    padding: 6px 70px 5px 0;
}
.sec08 .text {
    position: absolute;
    font-size: 2rem;
    text-align: left;
    white-space: nowrap;
}
.sec08 .mono .text {
    top: 210px;
    left: 280px;
}
.sec08 .pit .text {
    top: 200px;
    left: 230px;
}
.sec08 .cmnBtn {
    width: 300px;
    margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec08 .sectionInner {
        padding-top: 40px;
    }
    .sec08 .img {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 767px){
    .sec08::before {
        left: -20%;
        bottom: -10%;
        width: 300px;
        height: 400px;
        background-size: contain;
    }
    .sec08::after {
        bottom: 40%;
        width: 308px;
        height: 344px;
        background-image: url(../img/bg_lineup_03.png);
        background-size: contain;
    }
    .sec08 .sectionInner {
        padding-top: 50px;
    }
    .sec08 .subLead {
        margin-bottom: 15px;
        font-size: 1.5rem;
    }
    .sec08 .column {
        float: none;
        width: auto;
    }
    .sec08 .logo {
        height: 47px;
    }
    .sec08 h3 {
        margin: 0 0 10px;
        font-size: 1.4rem;
    }
    .sec08 .img {
        margin-bottom: 30px;
    }
    .sec08 .mono .img {
        padding: 0 50% 0 5%;
        width: auto;
        height: 110px;
    }
    .sec08 .pit .img {
        padding: 0 10% 0 55%;
        width: auto;
        height: 118px;
    }
    .sec08 .text {
        font-size: 1.3rem;
    }
    .sec08 .mono .text {
        top: 20px;
        left: 57%;
    }
    .sec08 .pit .text {
        top: 20px;
        left: 10%;
    }
    .sec08 .cmnBtn {
        position: absolute;
        width: 150px;
    }
    .sec08 .mono .cmnBtn {
        right: 5%;
        bottom: 0;
    }
    .sec08 .pit .cmnBtn {
        left: 5%;
        bottom: 0;
    }
}

.sec09 .sectionInner {
    padding: 0 15px;
}
.sec09 h2 {
    text-align: center;
}
.sec09 h2 img {
    background-color: #fff;
    padding: 8px;
}
.sec09 .subTitle {
    margin-bottom: 15px;
    text-align: center;
    font-size: 2rem;
}
.sec09 .mainLead {
    margin-bottom: 15px;
    text-align: center;
    font-size: 2.8rem;
}
.sec09 .item {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.sec09 .img {
    position: absolute;
    left: 28.3%;
    top: 10.7%;
    width: 40%;
}
.sec09 .line {
    position: relative;
    z-index: 10;
}
.sec09 .text01 {
    position: absolute;
    left: 2.5%;
    top: 7%;
    z-index: 10;
    width: 28%;
}
.sec09 .text02 {
    position: absolute;
    left: 71.5%;
    top: 1%;
    z-index: 10;
    width: 26%;
}
.sec09 .text03 {
    position: absolute;
    left: 2.5%;
    top: 69.5%;
    z-index: 10;
    width: 26%;
}
.sec09 .text04 {
    position: absolute;
    left: 69%;
    top: 49%;
    z-index: 10;
    width: 27%;
}
.sec09 .lead {
    margin-bottom: 15px;
    color: #1778ef;
    font-size: 2.4rem;
}
.sec09 .item p {
    font-size: 1.6rem;
    line-height: 2;
}
.sec09 .cmnBtn {
    position: absolute;
    left: 55%;
    bottom: 0;
    z-index: 10;
    width: 300px;
    padding: 13px 0;
    font-size: 3.6rem;
    line-height: 1.2;
}
.sec09 .cmnBtn span {
    display: block;
    font-size: 2.4rem;
    font-weight: normal;
    letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec09 .item {
        max-width: 960px;
    }
    .sec09 .lead {
        font-size: 2.1rem;
    }
    .sec09 .item p {
        font-size: 1.4rem;
        line-height: 1.6;
    }
    .sec09 .cmnBtn {
        left: 60%;
        bottom: 15px;
    }
}
@media screen and (max-width: 1100px){
    .sec09 .lead {
        font-size: 2.2rem;
    }
    .sec09 .item p {
        line-height: 1.6;
    }
}
@media screen and (max-width: 767px){
    .sec09 .sectionInner {
        padding: 50px 0 0;
    }
    .sec09 h2 img {
        height: 43px;
    }
    .sec09 .subTitle {
        margin-bottom: 8px;
        font-size: 1.2rem;
    }
    .sec09 .mainLead {
        margin-bottom: 10px;
        font-size: 1.4rem;
    }
    .sec09 .item {
        width: 320px;
        max-width: 90%;
    }
    .sec09 .img {
        left: 9.91%;
        top: 21.5%;
        width: 71.72%;
    }
    .sec09 .text01 {
        left: 2%;
        top: 12%;
        width: auto;
    }
    .sec09 .text02 {
        top: 1%;
        width: auto;
    }
    .sec09 .text03 {
        left: 20%;
        top: 84%;
        width: auto;
    }
    .sec09 .text04 {
        left: 68%;
        top: 75%;
        width: auto;
    }
    .sec09 .lead {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    .sec09 .item p {
        display: none;
    }
    .sec09 .cmnBtn {
        left: 0;
        right: 0;
        bottom: -65px;
        width: 175px;
        margin: 0 auto;
        padding: 10px 0;
        font-size: 2.1rem;
    }
    .sec09 .cmnBtn span {
        font-size: 1.4rem;
    }
}

.sec10 .sectionInner {
    padding: 0 15px;
}
.sec10 h2 {
    margin-bottom: 5px;
    text-align: center;
}
.sec10 h2 img {
    background-color: #fff;
    padding: 8px;
}
.sec10 .subTitle {
    margin-bottom: 15px;
    text-align: center;
    font-size: 2rem;
}
.sec10 .mainLead {
    margin-bottom: 50px;
    text-align: center;
    font-size: 2.8rem;
}
.sec10 .item {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.sec10 .img {
    position: absolute;
    left: 33.91%;
    top: 0;
    width: 34.91%;
}
.sec10 .line {
    position: relative;
    z-index: 10;
}
.sec10 .text01 {
    position: absolute;
    left: 3%;
    top: 1.5%;
    z-index: 10;
    width: 29%;
}
.sec10 .text02 {
    position: absolute;
    left: 72.5%;
    top: -5%;
    z-index: 10;
    width: 27%;
}
.sec10 .text03 {
    position: absolute;
    left: 71.5%;
    top: 46.5%;
    z-index: 10;
    width: 26%;
}
.sec10 .text04 {
    position: absolute;
    left: 5.5%;
    top: 73.5%;
    z-index: 10;
    width: 26%;
}
.sec10 .lead {
    margin-bottom: 15px;
    color: #1778ef;
    font-size: 2.4rem;
}
.sec10 .item p {
    font-size: 1.6rem;
    line-height: 2;
}
.sec10 .cmnBtn {
    position: absolute;
    top: 84%;
    left: 60%;
    z-index: 10;
    width: 250px;
    padding: 13px 0;
    font-size: 3.6rem;
    line-height: 1.2;
}
.sec10 .cmnBtn span {
    display: block;
    font-size: 2.4rem;
    font-weight: normal;
    letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec10 .mainLead {
        margin-bottom: 35px;
    }
    .sec10 .item {
        max-width: 960px;
    }
    .sec10 .lead {
        font-size: 2.1rem;
    }
    .sec10 .item p {
        font-size: 1.4rem;
        line-height: 1.6;
    }
    .sec10 .cmnBtn {
        top: 76%;
    }
}
@media screen and (max-width: 1100px){
    .sec10 .lead {
        font-size: 2.1rem;
    }
    .sec10 .item p {
        line-height: 1.6;
    }
}
@media screen and (max-width: 767px){
    .sec10 .sectionInner {
        padding: 50px 0 0;
    }
    .sec10 h2 img {
        height: 43px;
    }
    .sec10 .mainLead {
        margin-bottom: 15px;
        font-size: 1.4rem;
    }
    .sec10 .subTitle {
        margin-bottom: 8px;
        font-size: 1.2rem;
    }
    .sec10 .item {
        width: 340px;
        max-width: 92%;
    }
    .sec10 .img {
        left: 18.09%;
        top: 15%;
        width: 56.47%;
    }
    .sec10 .text01 {
        left: 1%;
        top: 0;
        width: auto;
    }
    .sec10 .text02 {
        left: 64%;
        top: 65%;
        width: auto;
    }
    .sec10 .text03 {
        left: 81%;
        top: 48.5%;
        width: auto;
    }
    .sec10 .text04 {
        left: 32%;
        top: 88%;
        width: auto;
    }
    .sec10 .lead {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    .sec10 .item p {
        display: none;
    }
    .sec10 .cmnBtn {
        top: auto;
        left: 0;
        right: 0;
        bottom: -75px;
        width: 145px;
        margin: 0 auto;
        padding: 10px 0;
        font-size: 2.1rem;
    }
    .sec10 .cmnBtn span {
        font-size: 1.4rem;
    }
}

.sec11 .sectionInner {
    padding: 0 40px 0 20px;
}
.sec11 h2 {
    margin-bottom: 5px;
    text-align: center;
}
.sec11 h2 img {
    background-color: #fff;
    padding: 0 8px;
}
.sec11 .mainLead {
    margin-bottom: 15px;
    text-align: center;
    font-size: 2.8rem;
}
.sec11 .itemArea {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.sec11 .itemArea.sp {
    display: none;
}
.sec11 .pc .colLabel {
    /*margin-bottom: 15px;*/
    margin-bottom: 10px;
    overflow: hidden;
    padding-left: 140px;
}
.sec11 .pc .colLabel li {
    float: left;
    width: 33.33%;
    padding: 0 10px;
}
.sec11 .pc .item {
    position: relative;
    padding-left: 140px;
}
.sec11 .pc .item + .item {
    border-top: 3px solid #e5e5e5;
}
.sec11 .pc .item .type {
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    border: 1px solid #1778ef;
    width: 120px;
    height: 94px;
    margin: auto 0;
    background-color: #fff;
    padding-top: 15px;
    color: #1778ef;
    font-size: 1.8rem;
    line-height: 1.3;
}
.sec11 .pc .item .type.fontpt {
    font-size: 1.5rem;
}
.sec11 .pc .item .type span {
    display: block;
    margin-top: 5px;
    font-size: 1.1rem;
}
.sec11 .pc .item ul {
    overflow: hidden;
}
.sec11 .pc .item li {
    float: left;
    width: 33.33%;
    /*padding: 25px 20px;*/
    padding: 15px 10px;
}

.sec11 .pc .item li + li {
    border-left: 3px solid #e5e5e5;
}
.sec11 .pc .item ul.one_list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
}
.sec11 .pc .item ul.one_list li {
    width: 33.63%;
    padding: 15px 10px;
    border-left: 3px solid #e5e5e5;
    border-right: 3px solid #e5e5e5;
}
.sec11 .pc .item li p {
    margin-top: 0;
}
.sec11 .cmnBtn {
    width: 430px;
    margin: 30px auto 0;
}
.sec11 .cmnBtn span {
    margin-left: 15px;
    vertical-align: middle;
    font-size: 1.8rem;
    font-weight: normal;
}
@media screen and (min-width: 768px) and (max-height: 750px){
    .sec11 .pc .item li {
        padding: 10px 15px;
    }
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec11 h2 {
        margin-bottom: 0;
    }
    .sec11 .mainLead {
        margin-bottom: 15px;
    }
    .sec11 .pc .colLabel {
        margin-bottom: 5px;
    }
    .sec11 .pc .colLabel li img {
        width: 200px;
    }
}
@media screen and (max-width: 767px){
    .sec11 .sectionInner {
        max-height: 550px;
        padding: 35px 0 0;
    }
    .sec11 h2 {
        margin-bottom: 5px;
    }
    .sec11 h2 img {
        height: 43px;
    }
    .sec11 .mainLead {
        margin-bottom: 10px;
        font-size: 1.4rem;
    }
    .sec11 .itemArea.pc {
        display: none;
    }
    .sec11 .itemArea.sp {
        display: block;
    }
    .sec11 .tab {
        display: flex;
        /*width: 315px;*/
        width: 90%;
        margin: 0 auto 20px;
    }
    .sec11 .tab li {
        position: relative;
        width: 33.33%;
        background-color: #b1cef2;
        padding: 6px 0;
        color: #fff;
        font-size: 1.2rem;
    }
    .sec11 .tab li.fonttp {
        font-size:1rem;
    }
    .sec11 .tab li + li {
        border-left: 1px solid #fff;
    }
    .sec11 .tab li.current {
        background-color: #1778ef;
    }
    .sec11 .tab li.current::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -9px;
        width: 0;
        margin: 0 auto;
        border-top: 9px solid #1778ef;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
    .sec11 .tabContent {
        display: none;
        width: 320px;
        margin: 0 auto;
    }
    .sec11 .tabContent.show {
        display: block;
    }
    .sec11 .tabContent li {
        margin-bottom: 15px;
    }
    .sec11 .tabContent .label {
        width: 90px;
        margin-right: 15px;
        vertical-align: middle;
    }
    .sec11 .tabContent .img {
        width: 170px;
        vertical-align: middle;
    }
    .sec11 .cmnBtn {
        width: 270px;
        margin: 10px auto 0;
    }
    .sec11 .cmnBtn span {
        margin-left: 10px;
        font-size: 1.4rem;
    }
}

.sec12::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 614px;
    height: 634px;
    background: url(../img/bg_lineup_04.png) no-repeat 0 100%;
}
.sec12 .sectionInner {
    padding: 80px 0 0;
}
.sec12 h2 {
    margin-bottom: 10px;
    text-align: center;
}
.sec12 h2 img {
    background-color: #fff;
    padding: 8px;
}
.sec12 .mainLead {
    margin-bottom: 30px;
    text-align: center;
    font-size: 2.8rem;
}
.sec12 .label {
    display: block;
    margin: 0 auto 40px;
}
.sec12 .twoColumn .label {
    margin-bottom: 25px;
}
.sec12 .twoColumn {
    display: flex;
    justify-content: center;
}
.sec12 .twoColumn .col {
    margin-right: 40px;
}
.sec12 .twoColumn .col:last-child {
    margin-right: 0;
}
.sec12 .itemArea {
    position: relative;
    max-width: 460px;
    padding-top: 20px;
    margin: 0 auto 60px;
    text-align: center;
}
.sec12 .twoColumn .itemArea {
    padding-top: 80px;
}
.sec12 .itemArea h3 {
    position: absolute;
    left: 0;
    top: 0;
    text-align: left;
    font-size: 2.2rem;
}
.sec12 .itemArea p {
    position: absolute;
    left: 0;
    top: 35px;
    text-align: left;
}
.sec12 .cmnBtn {
    width: 400px;
    margin: 0 auto;
    font-size: 2.5rem;
}
.sec12 .cmnBtn span {
    margin-left: 8px;
    vertical-align: middle;
    font-size: 1.8rem;
    font-weight: normal;
    display: block;
}
.sec12 .cmnBtn em {
  font-style: normal;
  font-size: 2.1rem;
}
@media screen and (min-width: 768px) and (max-height: 670px){
    .sec12 .sectionInner {
        padding-top: 30px;
    }
}
@media screen and (max-width: 767px){
    .sec12::before {
        display: none;
    }
    .sec12 h2 {
        margin-bottom: 5px;
    }
    .sec12 h2 img {
        height: 43px;
    }
    .sec12 .sectionInner {
        padding-top: 35px;
        /* margin-top: 0; */
    }
    .sec12 .mainLead {
        margin-bottom: 2.5%;
        font-size: 1.4rem;
    }
    .sec12 .twoColumn .label {
        margin-bottom: 1.5%;
    }
    .sec12 .label {
        /*width: 200px;*/
        width: 65%;
    }
    .sec12 .twoColumn {
        display: block;
        justify-content: center;
        transform: scale(0.6,0.6) translate(-10px,-35%);
        -webkit-transform: scale(0.6,0.6) translate(-10px,-35%);
        -moz-transform: scale(0.6,0.6) translate(-10px,-35%);
        -ms-transform: scale(0.6,0.6) translate(-10px,-35%);
    }
    .sec12 .twoColumn .col {
        margin-right: 0;
        margin-bottom: 3.5%;
    }
    .sec12 .twoColumn .col:last-child {
        margin-bottom: 0;
    }
    .sec12 .twoColumn .itemArea {
        padding-top: 0;
        margin-bottom: 3%;
    }
    .sec12 .itemArea {
        padding: 0;
        margin: 0 auto 30px;
    }
    .sec12 .itemArea .img {
        /*width: 200px;*/
        width: 50%;
    }
    .sec12 .itemArea h3 {
        position: static;
        margin-top: 1.5%;
        text-align: center;
        font-size: 1.8rem;
    }
    .sec12 .itemArea p {
        position: static;
        margin-top: 0.5%;
        text-align: center;
        font-size: 1.6rem;
    }
    .sec12 .itemArea p br {
        display: none;
    }
    .sec12 .cmnBtn {
        width: 320px;
        padding: 3px 3px 3px 0;
        font-size: 1.7rem;
        line-height: 1.2;
    }
    .sec12 .cmnBtn em {
      font-size: 1.5rem;
    }
    .sec12 .cmnBtn span {
        margin-left: 10px;
        font-size: 1.4rem;
    }
}

.scrollBtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 1000;
    width: 60px;
    height: 40px;
    margin: 0 auto;
    padding: 5px;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}
.scrollBtn.show {
    visibility: visible;
    opacity: 0.6;
}
.scrollBtn.show:hover {
    opacity: 1;
}
.scrollBtn::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 0;
    width: 35px;
    height: 35px;
    border-right: 6px solid #1778ef;
    border-bottom: 6px solid #1778ef;
    transform-origin: right bottom;
    transform: rotate(45deg);
    animation: scrollBtn 1s infinite ease-out;
}
body.colorBg .scrollBtn::after {
    border-color: #fff;
}
@keyframes scrollBtn {
    0% { bottom: 10px; }
    25% { bottom: 0; }
    100% { bottom: 10px; }
}
@media screen and (max-width: 767px){
    .scrollBtn {
        bottom: 10px;
        height: 30px;
    }
    .scrollBtn::after {
        width: 25px;
        height: 25px;
        border-right-width: 4px;
        border-bottom-width: 4px;
    }
}

.tombowLogo {
    position: fixed;
    right: 15px;
    bottom: 12px;
    z-index: 1000;
    width: 100px;
}
.tombowLogo:hover {
    opacity: 0.7;
}
.tombowLogo img {
    opacity: 1;
    transition: opacity 1s;
}
.tombowLogo .white {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
body.colorBg .tombowLogo img {
    opacity: 0;
}
body.colorBg .tombowLogo .white {
    opacity: 1;
}
@media screen and (max-width: 767px){
    .tombowLogo {
        right: 10px;
        bottom: 10px;
        width: 80px;
    }
}


/* マージンキャンセル
----------------------------------------- */

*:first-child {
    margin-top: 0;
}
*:last-child {
    margin-bottom: 0;
}