@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,th,td,pre,code,blockquote,form,fieldset,legend,input,textarea,figcaption,figure{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#FFF}hr{display:none}img{vertical-align:bottom}select,input,button,textarea{font-size:99%}table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}.hd{display:block;width:0;height:0;overflow:hidden}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section,main{display:block}*{margin:0;padding:0;box-sizing:border-box;max-height:999999px;outline:none;}*:focus{outline: none;}button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;}
/*-----------------------------------------------
 * 01. BACE
 * 02. LOADING
 * 03. PARTS
 * 04. MODAL
 * 05. BACKGROUND
 * 06. HEADER
 * 07. FOOTER
 * 08. SUB PAGE
-------------------------------------------------*/
@keyframes rotation {
    0%  { transform: rotate(0); }
    100%{ transform: rotate(360deg); }
}
@keyframes rotationReverse {
    0%  { transform: rotate(0); }
    100%{ transform: rotate(-360deg); }
}
@keyframes rumble {
    0%   { transform:translate(0, 0) rotate(0) }
    16%  { transform:translate(25px, -50px) rotate(-5deg) }
    33%  { transform:translate(50px, 15px) rotate(2deg) }
    49%  { transform:translate(7px, 5px) rotate(1deg) }
    66%  { transform:translate(-25px, -40px) rotate(7deg) }
    83%  { transform:translate(-50px, 25px) rotate(-3deg) }
    100% { transform:translate(5px, 7px) rotate(-8deg) }
}
/*-----------------------------------------------
 * 01. BACE
-------------------------------------------------*/
body{
    -webkit-text-size-adjust: 100%;
    background-color: #fff;
    color: #000;
    font-family: 'Roboto Condensed', 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-feature-settings: "palt";
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.07em;
    line-height: 1.8;
    word-wrap: break-word;
}
.pc{ display: block; }
.sp{ display: none; }
a{ color: #222; }
a:hover{ text-decoration: none; }
.ah { transition: opacity .3s ease; }
.ah:hover { opacity: .7; }
::selection{
    background: #2000c7;
    color: #fff;
}
::-moz-selection{
    background: #2000c7;
    color:#fff;
}
#fullWrap {
    min-width: 1200px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}
#main {
    width: calc((100% / 5) * 4);
    margin-left: calc(100% / 5);
    position: relative;
    z-index: 1;
}
@media screen and (max-width:770px) { 
    body {
        font-size: 22px;
    }
    .sp { display: block; }
    .pc { display: none; }
    .ah:hover  { opacity: 1; }
    #fullWrap {
        min-width: 100%;
        width: 750px;
        margin: 0 auto;
    }
    #main {
        width: 100%;
        margin-left: 0;
    }
}

/*-----------------------------------------------
 * 02. LOADING
-------------------------------------------------*/
.loading {
    background-color: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
}

/* Deco */
.loadingDeco {
    width: 80px;
    height: 80px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.loadingDeco:before {
    content: "";
    background: url(../img/common/loading_out.svg) no-repeat 0 0 / 100%;
    width: calc(100% + 10px);
    height: calc(100% - 18px);
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
}
.loadingDeco__in {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.loadingDeco__in:before {
    content: "";
    background: url(../img/common/loading_in_set.svg) no-repeat 0 0 / 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: rotation 5s linear infinite;
}
.loadingDeco__in:after {
    content: "";
    background: url(../img/common/loading_in.svg) no-repeat 0 0 / 100%;
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    animation: rotationReverse 5s linear infinite;
}

/* Gauge */
.loadingGauge {
    width: 80px;
    height: 80px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/*-----------------------------------------------
 * 03. PARTS
-------------------------------------------------*/
/** 
 * font 
 */
/* michroma */
.font-michroma { font-family: 'Michroma', sans-serif; }

/* size - モバイルは初期値 */
.fontsize-12 { font-size: 12px; }
.fontsize-20 { font-size: 20px; }
.fontsize-24 { font-size: 24px; }

@media screen and (max-width:770px) { 
    .fontsize-12 { font-size: 22px; }
    .fontsize-20 { font-size: 22px; }
    .fontsize-24 { font-size: 22px; }

    .fontsize-40--sp { font-size: 40px; }
    .fontsize-48--sp { font-size: 48px; }
}

/** 
 * margin - モバイルは初期値
 */
.marginT-10 { margin-top: 10px; }

/* negative */
.nMarginL-6 { margin-left: -6px; }
.nMarginL-10 { margin-left: -10px; }
.nMarginR-10 { margin-right: -10px; }

@media screen and (max-width:770px) {
    .marginT-10 { margin-top: 0; }
    /* negative */
    .nMarginL-6 { margin-left: 0; }
    .nMarginL-10 { margin-left: 0; }
    .nMarginR-10 { margin-right: 0; }

    .nMarginL-6--sp { margin-left: -6px; }
}

/** 
 * icon play
 */
.icon--play {
    width: 76px;
    height: 76px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
a:hover .icon--play {
    transform: scale(.9);
}
.icon--play:before {
    content: "";
    background: url(../img/common/iconcircle_in.svg) no-repeat 0 0 / 100%;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
a:hover .icon--play:before {
    transform: rotate(360deg);
}
.icon--play:after{
    content: "";
    background: url(../img/common/iconcircle_out.svg) no-repeat 0 0 / 100%;
    width: 100%;
    height: calc(100% - 4px);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
a:hover .icon--play:after {
    transform: rotate(-360deg);
}
.icon--play span {
    background: url(../img/common/icon_arrow_w.svg) no-repeat 0 0 / 100%;
    width: 12px;
    height: 22px;
    margin: auto;
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    left: 0;
}
@media screen and (max-width:770px) {
    .icon--play {
        width: 152px;
        height: 152px;
    }
    .icon--play:after{
        height: calc(100% - 8px);
    }
    .icon--play span {
        width: 24px;
        height: 44px;
        right: -6px;
    }
}

/** 
 * thumbnail parts
 */
/* bg */
.thumb-bg{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    z-index: 1;
    transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
a:hover .thumb-bg{
    transform: scale(1.2);
}

/* link */
a.thumb-link:before {
    content: "";
    background-size: auto auto;
    background-color: transparent;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, .4) 1px, rgba(0, 0, 0, .4) 2px );
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: opacity .4s ease;
} 
a.thumb-link:hover:before {
    opacity: 0;
}

/** 
 * cursor
 */
.cursor {
    width: 76px;
    height: 76px;
    mix-blend-mode: difference;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10001;
    transition: opacity .4s ease;
}
.cursor.on-iframe {
    opacity: 0;
}
.cursor__circle {
    width: 76px;
    height: 76px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(1.5);
    opacity: 0;
    transition: transform .4s ease, opacity .2s ease;
}
.cursor.is-link .cursor__circle {
    transform: scale(1);
    opacity: 1;
}
.cursor__circle:before {
    content: "";
    background: url(../img/common/iconcircle_in.svg) no-repeat 0 0 / 100%;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    animation: rotation 3s linear infinite;
}
.cursor__circle:after {
    content: "";
    background: url(../img/common/iconcircle_out.svg) no-repeat 0 0 / 100%;
    width: 100%;
    height: calc(100% - 4px);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    animation: rotationReverse 3s linear infinite;
}
.cursor__in {
    background: url(../img/common/icon_cur.svg) no-repeat 0 0 / 100%;
    width: 13px;
    height: 13px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/** 
 * darkArea
 */
.darkArea {
    background-color: rgba(0, 0, 0, 1);
    background-image: url(../img/common/bg_ptn_w.png);
    background-repeat: repeat;
    background-position: top center;
    background-attachment: fixed;
    position: relative;
}
.darkArea.is-harf:before {
    content: "";
    border-left: 1px solid #61daf2;
    width: calc(50% - 1px);
    height: 100%;
    opacity: .2;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
@media screen and (max-width:770px) {
    .darkArea {
        background-image: url(../img/common/bg_ptn_w_sp.png);
    }
    .darkArea.is-harf:after {
        content: "";
        border-right: 1px solid #61daf2;
        border-left: 1px solid #61daf2;
        width: calc(100% - 100px);
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        opacity: .2;
        z-index: 0;
    }
}
/* line */
.darkArea__lineWrap {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.darkArea__lineWrap:before,
.darkArea__lineWrap:after {
    content: "";
    display: block;
}
.darkArea__lineWrap:before,
.darkArea__lineWrap:after,
.darkArea__lineWrap > div {
    border-right: 1px solid #61daf2;
    width: calc(100% / 4);
    height: 100%;
    opacity: .2;
}
.darkArea__lineWrap > div {
    margin-left: auto;
}
.darkArea__lineWrap > div,
.darkArea__lineWrap:after {
    border-right: none;
    border-left: 1px solid #61daf2;
}
@media screen and (max-width:770px) {
    .darkArea__lineWrap > div {
        width: 325px;
    }
    .darkArea__lineWrap:before,
    .darkArea__lineWrap:after {
        width: 49px;
    }
}

/** 
 * section
 */
/* box */
.secBox {
    position: relative;
}

/* title */
.secTitle {
    overflow: hidden;
}
.secTitle.is-center {
    text-align: center;
}
.secTitle.is-right {
    text-align: right;
}
.secTitle--en {
    color: #2000c7;
    display: block;
    font-size: 104px;
    line-height: 1;
    letter-spacing: 0.01em;
    margin-bottom: 30px;
    position: relative;
    white-space: nowrap;
}
.secTitleWrap.is-white .secTitle--en {
    color: #61daf2;
}
.secTitle--en:after {
    content: "MOBILE SUIT GUNDAM SEED ECLIPSE";
    color: #000;
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    opacity: .4;
    position: absolute;
    right: 40px;
    bottom: -22px;
    transform: scale(.8);
    white-space: nowrap;
}
.secTitle.is-right .secTitle--en:after {
    right: auto;
    left: 40px;
}
.secTitleWrap.is-white .secTitle--en:after {
    color: #fff;
}
@media screen and (max-width:770px) { 
    .secTitle--en {
        display: block;
        font-size: 80px;
        margin-bottom: 18px;
    }
    .secTitle--en:after {
        font-size: 16px;
        right: 25px;
        bottom: -24px;
        transform: scale(1);
    }
    .secTitle.is-right .secTitle--en:after {
        left: 25px;
    }
}
.secTitle--jp {
    display: table;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    margin: 30px auto 0;
    padding: 0 50px;
    white-space: nowrap;
}
.secTitleWrap.is-white .secTitle--jp {
    color: #fff;
}
.secTitle--jp:before {
    content: "";
    background-color: #000;
    width: 40px;
    height: 1px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
.secTitle.is-right .secTitle--jp:before {
    left: auto;
    right: 0;
}
.secTitleWrap.is-white .secTitle--jp:before {
    background-color: #fff;
}
.secTitle--jp:after {
    content: "";
    background: url(../img/common/deco_pointline_b_l.svg) no-repeat 0 0 / 100%;
    width: 87px;
    height: 87px;
    position: absolute;
    bottom: 13px;
    left: -86px;
}
.secTitle.is-right .secTitle--jp:after {
    background: url(../img/common/deco_pointline_b_r.svg) no-repeat 0 0 / 100%;
    left: auto;
    right: -86px;
}
.secTitleWrap.is-white .secTitle--jp:after {
    background: url(../img/common/deco_pointline_w_l.svg) no-repeat 0 0 / 100%;
}
.secTitleWrap.is-white .secTitle.is-right .secTitle--jp:after {
    background: url(../img/common/deco_pointline_w_r.svg) no-repeat 0 0 / 100%;
}
@media screen and (max-width:770px) { 
    .secTitle--jp {
        font-size: 24px;
        margin: 0 auto 0;
        padding: 0 70px;
    }
    .secTitle--jp:before {
        width: 50px;
    }
    .secTitle--jp:after {
        bottom: 19px;
    }
}

/**
 * Frame
 */
.frameParts1 {
    background: rgba(0,0,0,.8);
    background: linear-gradient(135deg, transparent 30px, rgba(0,0,0,.8) 0) top left,
                linear-gradient(0deg, transparent 0px, rgba(0,0,0,.8) 0) top right,
                linear-gradient(-45deg, transparent 30px, rgba(0,0,0,.8) 0) bottom right,
                linear-gradient(0deg, transparent 0px, rgba(0,0,0,.8) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    min-width: 90px;
    min-height: 90px;
    position: relative;
}
.frameParts1:before {
    content: "";
    background: linear-gradient(135deg, transparent 30px, rgba(32,0,199,1) 0) top left,
                linear-gradient(0deg, transparent 0px, rgba(32,0,199,1) 0) top right,
                linear-gradient(-45deg, transparent 30px, rgba(32,0,199,1) 0) bottom right,
                linear-gradient(0deg, transparent 0px, rgba(32,0,199,1) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.frameParts1.is-hover:before {
    opacity: 1;
}
.frameParts1:after {
    content: "";
    background-image: url(../img/common/frameparts1_top.svg), url(../img/common/frameparts1_bottom.svg);
    background-repeat: no-repeat;
    background-position: top right, bottom left;
    background-size: 16px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.frameParts1__in {
    padding: 40px;
    position: relative;
    z-index: 3;
}
@media screen and (max-width:770px) { 
    .frameParts1:before {
        content: none;
    }
    .frameParts1:after {
        background-size: 32px;
    }
    .frameParts1__in {
        padding: 48px;
    }
}

/**
 * .frameDeco
 */
.frameDeco {
    width: 100%;
    height: 26px;
    position: absolute;
    pointer-events: none;
}
.frameDeco.is-top {
    top: -26px;
}
.frameDeco.is-bottom {
    bottom: -26px;
}
@media screen and (max-width:770px) { 
    .frameDeco {
        height: 54px;
    }
    .frameDeco.is-top {
        top: -54px;
    }
    .frameDeco.is-bottom {
        bottom: -54px;
    }
}

/* text */
.frameDeco:before,
.frameDeco__text {
    color: #000;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    opacity: .4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(.8);
}
.frameDeco__text {
    bottom: -12px;
}
.frameDeco.is-bottom:before {
    content: "SEED ECLIPSE";
    top: -12px;
}
@media screen and (max-width:770px) { 
    .frameDeco:before,
    .frameDeco__text {
        font-size: 16px;
        transform: translateX(-50%) scale(1);
    }
    .frameDeco__text {
        bottom: -25px;
    }
    .frameDeco.is-bottom:before {
        top: -25px;
    }
}

/* white */
.frameDeco--white {
    background-size: auto;
    background-repeat: no-repeat;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: .8;
}
@media screen and (max-width:770px) { 
    .frameDeco--white {
        padding: 0 100px;
    }
}

.frameDeco.is-top .frameDeco--white {
    background-image: url(../img/common/nav_bgdeco_top_left.png),
                      url(../img/common/nav_bgdeco_top_right.png);
    background-position: top left,
                         top right;
    align-items: baseline;
}
.frameDeco.is-bottom .frameDeco--white {
    background-image: url(../img/common/nav_bgdeco_bottom_left.png),
                      url(../img/common/nav_bgdeco_bottom_right.png);
    background-position: bottom left,
                         bottom right;
    align-items: end;
}
.frameDeco--white:before,
.frameDeco--white:after {
    content: "";
    background-color: #fff;
    display: block;
    width: calc(50% - 50px);
    height: 6px;
}
@media screen and (max-width:770px) {
    .frameDeco.is-top .frameDeco--white {
        background-image: url(../img/common/nav_bgdeco_top_left_sp.png),
                      url(../img/common/nav_bgdeco_top_right_sp.png);
    }
    .frameDeco.is-bottom .frameDeco--white {
        background-image: url(../img/common/nav_bgdeco_bottom_left_sp.png),
                      url(../img/common/nav_bgdeco_bottom_right_sp.png);
    }
    .frameDeco--white:before,
    .frameDeco--white:after {
        width: calc(50% - 100px);
        height: 10px;
    }
}

.frameDeco--white > div {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    width: 100px;
    height: 100%;
}
.frameDeco.is-top .frameDeco--white > div {
    background-image: url(../img/common/nav_bgdeco_top_center.png);
}
.frameDeco.is-bottom .frameDeco--white > div {
    background-image: url(../img/common/nav_bgdeco_bottom_center.png);
}
@media screen and (max-width:770px) {
    .frameDeco--white > div {
        width: 200px;
    }
    .frameDeco.is-top .frameDeco--white > div {
        background-image: url(../img/common/nav_bgdeco_top_center_sp.png);
    }
    .frameDeco.is-bottom .frameDeco--white > div {
        background-image: url(../img/common/nav_bgdeco_bottom_center_sp.png);
    }
}

/* black */
.frameDeco--black {
    background-size: auto;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0 51px;
    position: absolute;
    left: 0;
    z-index: 0;
}
@media screen and (max-width:770px) {
    .frameDeco--black {
        height: 112px;
        padding: 0 100px;
    }
}

.frameDeco.is-top .frameDeco--black {
    background-image: url(../img/common/nav_bgdeco_b_top_left.png),
                      url(../img/common/nav_bgdeco_b_top_right.png);
    background-position: top left,
                         top right;
    top: -7px;
}
.frameDeco.is-bottom .frameDeco--black {
    background-image: url(../img/common/nav_bgdeco_b_bottom_left.png),
                      url(../img/common/nav_bgdeco_b_bottom_right.png);
    background-position: top left,
                         top right;
    bottom: -7px;
}
@media screen and (max-width:770px) {
    .frameDeco.is-top .frameDeco--black {
        background-image: url(../img/common/nav_bgdeco_b_top_left_sp.png),
                      url(../img/common/nav_bgdeco_b_top_right_sp.png);
    }
    .frameDeco.is-bottom .frameDeco--black {
        background-image: url(../img/common/nav_bgdeco_b_bottom_left_sp.png),
                      url(../img/common/nav_bgdeco_b_bottom_right_sp.png);
    }
}

.frameDeco--black:before,
.frameDeco--black:after {
    content: "";
    display: block;
    width: calc(50% - 55px);
    height: 19px;
}
.frameDeco.is-top .frameDeco--black:before,
.frameDeco.is-top .frameDeco--black:after {
    border-top: 1px solid #000;
    border-bottom: 1px solid rgba(0,0,0,.2);
    margin-top: 13px;
}
.frameDeco.is-bottom .frameDeco--black:before,
.frameDeco.is-bottom .frameDeco--black:after {
    border-bottom: 1px solid #000;
    border-top: 1px solid rgba(0,0,0,.2);
    margin-bottom: 13px;
}
@media screen and (max-width:770px) {
    .frameDeco--black:before,
    .frameDeco--black:after {
        width: calc(50% - 122px);
        height: 38px;
    }
    .frameDeco.is-top .frameDeco--black:before,
    .frameDeco.is-top .frameDeco--black:after {
        border-top: 2px solid #000;
        border-bottom: 2px solid rgba(0,0,0,.2);
        margin-top: 27px;
    }
    .frameDeco.is-bottom .frameDeco--black:before,
    .frameDeco.is-bottom .frameDeco--black:after {
        border-bottom: 2px solid #000;
        border-top: 2px solid rgba(0,0,0,.2);
        margin-bottom: 27px;
    }
}

.frameDeco--black > div {
    background-image: url(../img/common/nav_bgdeco_b_top_center.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    width: 110px;
    height: 100%;
}
.frameDeco.is-top .frameDeco--black > div {
    background-image: url(../img/common/nav_bgdeco_b_top_center.png);
}
.frameDeco.is-bottom .frameDeco--black > div {
    background-image: url(../img/common/nav_bgdeco_b_bottom_center.png);
}
@media screen and (max-width:770px) {
    .frameDeco--black > div {
        background-image: url(../img/common/nav_bgdeco_b_top_center_sp.png);
        width: 244px;
    }
    .frameDeco.is-top .frameDeco--black > div {
        background-image: url(../img/common/nav_bgdeco_b_top_center_sp.png);
    }
    .frameDeco.is-bottom .frameDeco--black > div {
        background-image: url(../img/common/nav_bgdeco_b_bottom_center_sp.png);
    }
}

/**
 * frame 1
 */
.frame1Wrap {
    width: 100%;
    min-height: 128px;
}
.frame1__deco {
    display: flex;
    width: 100%;
    height: 40px;
}
.frame1__deco:before,
.frame1__deco:after {
    content: "";
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    display: block;
    width: 40px;
    height: 40px;
}
.frame1__deco.is-top:before {
    background-image: url(../img/common/framedeco_bg_topleft.png);
}
.frame1__deco.is-top:after {
    background-image: url(../img/common/framedeco_bg_topright.png);
}
.frame1__deco.is-bottom:before {
    background-image: url(../img/common/framedeco_bg_bottomleft.png);
}
.frame1__deco.is-bottom:after {
    background-image: url(../img/common/framedeco_bg_bottomright.png);
}
.frame1__deco > div {
    background-color: rgba(0,0,0,.8);
    width: calc(100% - 80px);
    height: 100%;
}
.frame1__in {
    background-color: rgba(0,0,0,.8);
    min-height: 48px;
    padding: 0 40px;
}
@media screen and (max-width:770px) { 
    .frame1Wrap {
        min-height: 176px;
    }
    .frame1__deco {
        height: 48px;
    }
    .frame1__deco:before,
    .frame1__deco:after {
        width: 48px;
        height: 48px;
    }
    .frame1__deco.is-top:before {
        background-image: url(../img/common/framedeco_bg_topleft_sp.png);
    }
    .frame1__deco.is-top:after {
        background-image: url(../img/common/framedeco_bg_topright_sp.png);
    }
    .frame1__deco.is-bottom:before {
        background-image: url(../img/common/framedeco_bg_bottomleft_sp.png);
    }
    .frame1__deco.is-bottom:after {
        background-image: url(../img/common/framedeco_bg_bottomright_sp.png);
    }
    .frame1__deco > div {
        width: calc(100% - 96px);
    }
    .frame1__in {
        min-height: 80px;
        padding: 0 48px;
    }
}

/**
 * cateLists
 */
.cateLists{
    display: flex;
    align-items: center;
    margin-left: auto;
    position: relative;
    z-index: 2;
}
.cateLists > li:first-child {
    margin-left: 0;
}
.cateLists > li {
    margin-left: 8px;
}
.cateLists > li a{
    background-color: rgba(255,255,255,1);
    font-weight: 700;
    padding: 0 4px;
    text-decoration: none;
    white-space: nowrap;
}
/**
 * deco line
 */
.deco__line {
    display: block;
    background-color: rgba(255,255,255,.2);
    width: 100%;
    height: 1px;
    margin: 0 12px;
}

/**
 * deco link
 */
/* linkA */
.linkAWrap {
    display: table;
    height: 40px;
    position: relative;
}
.linkAWrap:before {
    content: "";
    background: linear-gradient(135deg, transparent 10px, rgba(32,0,199,1) 0) top left,
                linear-gradient(0deg, transparent 0px, rgba(32,0,199,1) 0) top right,
                linear-gradient(-45deg, transparent 10px, rgba(32,0,199,1) 0) bottom right,
                linear-gradient(0deg, transparent 0px, rgba(32,0,199,1) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.linkAWrap.is-hover:before {
    opacity: 1;
}
.linkA {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 2;
}
.linkA:before,
.linkA:after {
    content: "";
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    width: 15px;
    height: 40px;
}
.linkA:before {
    background-image: url(../img/common/decolinkframe_b_left.png);
}
.linkA:after {
    background-image: url(../img/common/decolinkframe_b_right.png);
}
.linkA__in {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 30px);
    height: 40px;
    text-align: center;
}
.linkA__text {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    padding: 0 40px;
    white-space: nowrap;
    transition: color .3s ease-in-out;
}
.linkAWrap.is-hover .linkA__text {
    color: #fff;
}
@media screen and (max-width:770px) { 
    .linkAWrap {
        min-width: 320px;
        height: 80px;
    }
    .linkA:before,
    .linkA:after {
        width: 30px;
        height: 80px;
    }
    .linkA:before {
        background-image: url(../img/common/decolinkframe_b_left_sp.png);
    }
    .linkA:after {
        background-image: url(../img/common/decolinkframe_b_right_sp.png);
    }
    .linkA__in {
        width: calc(100% - 60px);
        height: 80px;
    }
    .linkA__text {
        font-size: 24px;
    }
}

/* linkB */
.linkBWrap {
    display: table;
    height: 40px;
    position: relative;
}
.linkBWrap:before {
    content: "";
    background: linear-gradient(135deg, transparent 10px, rgba(97,218,242,1) 0) top left,
                linear-gradient(0deg, transparent 0px, rgba(97,218,242,1) 0) top right,
                linear-gradient(-45deg, transparent 10px, rgba(97,218,242,1) 0) bottom right,
                linear-gradient(0deg, transparent 0px, rgba(97,218,242,1) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.linkBWrap.is-hover:before {
    opacity: 1;
}
.linkB {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 2;
}
.linkB:before,
.linkB:after {
    content: "";
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    width: 15px;
    height: 40px;
}
.linkB:before {
    background-image: url(../img/common/decolinkframe_w_left.png);
}
.linkB:after {
    background-image: url(../img/common/decolinkframe_w_right.png);
}
.linkB__in {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 30px);
    height: 40px;
    text-align: center;
}
.linkB__text {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 0 40px;
    white-space: nowrap;
    transition: color .3s ease-in-out;
}
.linkBWrap.is-hover .linkB__text {
    color: #000;
}
@media screen and (max-width:770px) {
    .linkBWrap {
        min-width: 320px;
        height: 80px;
    }
    .linkB:before,
    .linkB:after {
        width: 30px;
        height: 80px;
    }
    .linkB:before {
        background-image: url(../img/common/decolinkframe_w_left_sp.png);
    }
    .linkB:after {
        background-image: url(../img/common/decolinkframe_w_right_sp.png);
    }
    .linkB__in {
        width: calc(100% - 60px);
        height: 80px;
    }
    .linkB__text {
        font-size: 24px;
    }
}

/**
 * page nav
 */
.pageNavWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
    padding: 0 80px;
}
.pageNavWrap a {
    text-decoration: none;
}
.pageNav {
    width: 80px;
    height: 80px;
}
.pageNav.disable {
    opacity: .6;
    pointer-events: none;
}
@media screen and (max-width:770px) {
    .pageNavWrap {
        padding: 0 50px;
    }
    .pageNav {
        width: 96px;
        height: 96px;
    }
}
.pageNav a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.pageNav a:before {
    content: "";
    background-size: 100%;
    background-position: 0 0;
    width: 24px;
    height: 64px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}
.pageNav.is-prev a:before {
    background-image: url(../img/common/arrow_left_b.svg);
    left: 0;
}
.pageNav.is-next a:before {
    background-image: url(../img/common/arrow_right_b.svg);
    right: 0;
}
.pageNav a span {
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.pageNav.is-prev a span {
    left: 24px;
}
.pageNav.is-next a span {
    right: 24px;
}
@media screen and (max-width:770px) {
    .pageNav a:before {
        width: 36px;
        height: 96px;
    }
    .pageNav a span {
        font-size: 24px;
    }
    .pageNav.is-prev a span {
        left: 36px;
    }
    .pageNav.is-next a span {
        right: 36px;
    }
    .pageALL {
        width: 320px;
    }
}

/** 
 * Swiper
 * .is-black, .is-white, .is-small
 */
.swiperControl {
    width: calc(100% - 160px);
    margin: 0 auto;
    position: relative;
    padding: 0 80px;
    z-index: 10;
}
.swiperControl.is-small {
    width: calc(100% - 40px);
    padding: 0;
}
@media screen and (max-width:770px) {
    .swiperControl {
        width: calc(100% - 100px);
        padding: 0 130px;
    }
}

/* swiper-button-disabled */
.swiperControl .swiper-button-disabled {
    opacity: .6;
    pointer-events: none;
}

/* scrollbar */
.swiperControl .swiper-scrollbarWrap{
    touch-action: manipulation;
    height: 80px;
    position:relative;
}
.swiperControl.is-small .swiper-scrollbarWrap{
    height: 24px;
}
.swiperControl .swiper-scrollbarWrap:before {
    content:'';
    height: 2px;
    margin: auto;
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
}
.swiperControl.is-black .swiper-scrollbarWrap:before {
    background:rgba(0,0,0,.4);
}
.swiperControl.is-white .swiper-scrollbarWrap:before {
    background:rgba(255,255,255,.4);
}
.swiperControl .swiper-scrollbar {
    background:transparent;
    height: 80px;
}
.swiperControl.is-small .swiper-scrollbar {
    height: 24px;
}
.swiperControl .swiper-scrollbar-drag {
    border-radius: 0;
    background:transparent;
    cursor: pointer;
}
.swiperControl .swiper-scrollbar-drag:before {
    content:'';
    margin: auto;
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
    height:4px;
}
.swiperControl.is-black .swiper-scrollbar-drag:before {
    background:#2000c7;
}
.swiperControl.is-white .swiper-scrollbar-drag:before {
    background:#61daf2;
}
@media screen and (max-width:770px) {
    .swiperControl .swiper-scrollbarWrap,
    .swiperControl .swiper-scrollbar {
        height: 96px;
    }
    .swiperControl .swiper-scrollbarWrap:before {
        height: 4px;
    }
    .swiperControl .swiper-scrollbar-drag:before {
        height:8px;
    }
}

/* prev, next */
.swiperControl .swiper-btn-prev,
.swiperControl .swiper-btn-next {
    position: absolute;
    bottom:0;
    width:80px;
    height:80px;
    cursor: pointer;
}
.swiperControl .swiper-btn-prev {
    left:0;
}
.swiperControl .swiper-btn-next {
    right:0;
}
.swiperControl .swiper-btn-prev:before,
.swiperControl .swiper-btn-next:before {
    content: "";
    background-size: 100%;
    background-position: 0 0;
    width: 24px;
    height: 64px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}
@media screen and (max-width:770px) {
    .swiperControl .swiper-btn-prev,
    .swiperControl .swiper-btn-next {
        width:96px;
        height:96px;
    }
    .swiperControl .swiper-btn-prev:before,
    .swiperControl .swiper-btn-next:before {
        width: 36px;
        height: 96px;
    }
}
.swiperControl .swiper-btn-prev:before {
    left: 0;
}
.swiperControl.is-black .swiper-btn-prev:before {
    background-image: url(../img/common/arrow_left_b.svg);
}
.swiperControl.is-white .swiper-btn-prev:before {
    background-image: url(../img/common/arrow_left_w.svg);
}
.swiperControl .swiper-btn-next:before {
    right: 0;
}
.swiperControl.is-black .swiper-btn-next:before {
    background-image: url(../img/common/arrow_right_b.svg);
}
.swiperControl.is-white .swiper-btn-next:before {
    background-image: url(../img/common/arrow_right_w.svg);
}
.swiperControl .swiper-btn-prev:after,
.swiperControl .swiper-btn-next:after {
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.swiperControl .swiper-btn-prev:after {
    content: "PREV";
    left: 24px;
}
.swiperControl .swiper-btn-next:after {
    content: "NEXT";
    right: 24px;
}
.swiperControl.is-white .swiper-btn-prev:after,
.swiperControl.is-white .swiper-btn-next:after {
    color: #fff;
}
@media screen and (max-width:770px) {
    .swiperControl .swiper-btn-prev:after,
    .swiperControl .swiper-btn-next:after {
        font-size: 24px;
    }
    .swiperControl .swiper-btn-prev:after {
        left: 36px;
    }
    .swiperControl .swiper-btn-next:after {
        right: 36px;
    }
}

/**
 * Change btn
 * .is-black, .is-white
 */
.changeBtn {
    display: block;
    width: 94px;
    height: 94px;
    position: relative;
    text-decoration: none;
}
.changeBtn:before {
    content: "";
    width: 80px;
    height: 94px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.changeBtn:hover:before {
    transform: rotate(-360deg);
}
@media screen and (max-width:770px) {
    .changeBtn {
        width: 114px;
        height: 114px;
    }
    .changeBtn:before {
        width: 96px;
        height: 114px;
    }
}
.changeBtnWrap.is-black .changeBtn:before {
    background: url(../img/common/arrow_circle_b.svg) no-repeat 0 0 / 100%;
}
.changeBtnWrap.is-white .changeBtn:before {
    background: url(../img/common/arrow_circle_w.svg) no-repeat 0 0 / 100%;
}
.changeBtn > span {
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.changeBtnWrap.is-white .changeBtn > span {
    color: #fff;
}
.changeBtnWrap__numWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 4px;
}
.changeBtnWrap.is-black .changeBtnWrap__num--now {
    color: #2000c7;
}
.changeBtnWrap.is-white .changeBtnWrap__num--now {
    color: #61daf2;
}
.changeBtnWrap.is-black .changeBtnWrap__num--all {
    color: rgba(0,0,0,.4);
}
.changeBtnWrap.is-white .changeBtnWrap__num--all {
    color: rgba(255,255,255,.4);
}
.changeBtnWrap__num--all:before {
    content: "/";
    margin: 0 2px;
}
@media screen and (max-width:770px) {
    .changeBtn > span {
        font-size: 20px;
    }
    .changeBtnWrap__numWrap {
        font-size: 20px;
    }
}

/**
 * shareArea
 */
.shareArea {
    display: flex;
    align-items: center;
    justify-content: center;
}
.shareArea > dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-right: 16px;
}
@media screen and (max-width:770px) {
    .shareArea > dt {
        font-size: 24px;
        margin-right: 24px;
    }
}

.shareArea .shareLists {
    display: flex;
    align-items: center;
}
.shareArea .shareLists > li {
    margin-right: 16px;
}
.shareArea .shareLists > li:last-child {
    margin-right: 0;
}
.shareArea .shareLists > li a {
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
}
@media screen and (max-width:770px) {
    .shareArea .shareLists > li {
        margin-right: 24px;
    }
    .shareArea .shareLists > li a {
        width: 80px;
        height: 80px;
    }
}

.shareArea .shareLists > li a.shareList__link--tw {
    background-image: url(../img/common/iconsns_tw_off.png);
}
.shareArea .shareLists > li a.shareList__link--fb {
    background-image: url(../img/common/iconsns_fb_off.png);
}
.shareArea .shareLists > li a.shareList__link--line {
    background-image: url(../img/common/iconsns_line_off.png);
}

.shareArea .shareLists > li a:before {
    content: "";
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.shareArea .shareLists > li a:hover:before {
    opacity: 1;
}
.shareArea .shareLists > li a.shareList__link--tw:before {
    background-image: url(../img/common/iconsns_tw_on.png);
}
.shareArea .shareLists > li a.shareList__link--fb:before {
    background-image: url(../img/common/iconsns_fb_on.png);
}
.shareArea .shareLists > li a.shareList__link--line:before {
    background-image: url(../img/common/iconsns_line_on.png);
}

/* white */
.shareArea_w {
    display: flex;
    align-items: center;
    justify-content: center;
}
.shareArea_w > dt {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-right: 16px;
}
@media screen and (max-width:770px) {
    .shareArea_w > dt {
        font-size: 24px;
        margin-right: 24px;
    }
}

.shareArea_w .shareLists {
    display: flex;
    align-items: center;
}
.shareArea_w .shareLists > li {
    margin-right: 16px;
}
.shareArea_w .shareLists > li:last-child {
    margin-right: 0;
}
.shareArea_w .shareLists > li a {
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
}
@media screen and (max-width:770px) {
    .shareArea_w .shareLists > li {
        margin-right: 24px;
    }
    .shareArea_w .shareLists > li a {
        width: 80px;
        height: 80px;
    }
}

.shareArea_w .shareLists > li a.shareList__link--tw {
    background-image: url(../img/common/iconsns_w_tw_off.png);
}
.shareArea_w .shareLists > li a.shareList__link--fb {
    background-image: url(../img/common/iconsns_w_fb_off.png);
}
.shareArea_w .shareLists > li a.shareList__link--line {
    background-image: url(../img/common/iconsns_w_line_off.png);
}

.shareArea_w .shareLists > li a:before {
    content: "";
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.shareArea_w .shareLists > li a:hover:before {
    opacity: 1;
}
.shareArea_w .shareLists > li a.shareList__link--tw:before {
    background-image: url(../img/common/iconsns_w_tw_on.png);
}
.shareArea_w .shareLists > li a.shareList__link--fb:before {
    background-image: url(../img/common/iconsns_w_fb_on.png);
}
.shareArea_w .shareLists > li a.shareList__link--line:before {
    background-image: url(../img/common/iconsns_w_line_on.png);
}


/*-----------------------------------------------
 * 04. MODAL
-------------------------------------------------*/
.modalBox{
    -webkit-overflow-scrolling: touch;
    background: rgba(0,0,0,.75);
    display: none;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.oneModal{
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.oneModalIn{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    min-width: 1200px;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
}
.oneModalIn__cont{
    padding: 50px 0;
}
@media screen and (max-width:770px) {
    .oneModalIn{
        min-width: 100%;
    }
    .oneModalIn__cont{
        width: 100%;
        padding: 30px 0;
    }
}
/* closeBtn */
.closeBtn{
    width: 100%;
    height: 100%;
    min-width: 1200px;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.closeBtn a{
    background: url(../img/common/close.svg) no-repeat 0 0 / 100%;
    display: block;
    width: 80px;
    height: 80px;
    pointer-events: auto;
    position: absolute;
    top: 0;
    right: 0;
}
@media screen and (max-width:770px) {
    .closeBtn{
        min-width: 100%;
    }
    .closeBtn a{
        width: 96px;
        height: 96px;
    }
}
/* common */
.commonIframe{
    width: 100%;
    height: 100%;
    display: block;
}
/* youtube */
.youtubeIframeWrap{
    width: 920px;
    height: 520px;
}
@media screen and (max-width:770px) {
    .youtubeIframeWrap{
        width: 100%;
        height: auto;
        padding-top: 56.25%;
        position: relative;
    }
    .youtubeIframe{
        position: absolute;
        top: 0;
        left: 0;
    }
}
/*-----------------------------------------------
 * 05. BACKGROUND
-------------------------------------------------*/
.fullBg {
    background-color:    rgba(255, 255, 255, 1);
    background-image:    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, .1) 1px, rgba(0, 0, 0, .1) 2px ),
                         url(../img/common/bg_ptn.png);
    background-size:     auto auto,
                         auto auto;
    background-repeat:   no-repeat,
                         repeat;
    background-position: 0 0,
                         top center;
    min-width: 1200px;
    min-height: 640px;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}
@media screen and (max-width:770px) { 
    .fullBg {
        background-image:    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0, 0, 0, .1) 4px, rgba(0, 0, 0, .1) 8px ),
                         url(../img/common/bg_ptn_sp.png);
        min-width: 100%;
        min-height: auto;
    }
}

/* line */
.fullBg__lineWrap {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.fullBg__lineWrap:before,
.fullBg__lineWrap:after {
    content: "";
    display: block;
}
.fullBg__lineWrap:before,
.fullBg__lineWrap:after,
.fullBg__lineWrap > div {
    border-right: 1px solid #2000c7;
    width: calc(100% / 5);
    height: 100%;
    opacity: .2;
}
.fullBg__lineWrap > div:nth-child(2) {
    margin-left: auto;
}
.fullBg__lineWrap > div:nth-child(2),
.fullBg__lineWrap:after {
    border-right: none;
    border-left: 1px solid #2000c7;
}
@media screen and (max-width:770px) {
    .fullBg__lineWrap > div:nth-child(2) {
        display: none;
    }
    .fullBg__lineWrap:before,
    .fullBg__lineWrap:after {
        width: 49px;
    }
    .fullBg__lineWrap > div {
        width: 326px;
    }
    .fullBg__lineWrap:after {
        margin-left: auto;
    }
}
/* grid */
.fullBg__grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.fullBg__grid > div {
    width: calc(100% / 5);
    height: 8px;
    margin-top: 20px;
    padding: 0 8px;
    position: relative;
}
.fullBg__grid.is-top > div {
    margin-top: 21px;
}
.fullBg__grid.is-bottom > div {
    margin-top: auto;
    margin-bottom: 21px;
}
.fullBg__grid > div:nth-child(2) {
    width: calc((100% / 5) * 3);
}
@media screen and (max-width:770px) {
    .fullBg__grid {
        padding: 0 50px;
    }
    .fullBg__grid > div {
        width: 50%;
        height: 14px;
        padding: 0 14px;
    }
    .fullBg__grid > div:nth-child(2) {
        display: none;
    }
    .fullBg__grid.is-top > div {
        margin-top: 26px;
    }
    .fullBg__grid.is-bottom > div {
        margin-bottom: 26px;
    }
}
.fullBg__grid > div:before {
    content: "GRID";
    color: #000;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    opacity: .4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(.8);
}
.fullBg__grid.is-top > div:before {
    top: -13px;
}
.fullBg__grid.is-bottom > div:before {
    bottom: -15px;
}
.fullBg__grid > div:after {
    content: "";
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    display: block;
    width: calc(100% - 16px);
    height: 100%;
    margin: auto;
    opacity: .2;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
@media screen and (max-width:770px) {
    .fullBg__grid > div:before {
        font-size: 16px;
        transform: translateX(-50%) scale(1);
    }
    .fullBg__grid > div:after {
        width: calc(100% - 28px);
    }
    .fullBg__grid.is-top > div:before {
        top: -19px;
    }
    .fullBg__grid.is-bottom > div:before {
        bottom: -20px;
    }
}
.fullBg__grid > div > span{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: .2;
}
.fullBg__grid > div > span:before,
.fullBg__grid > div > span:after {
    content: "";
    background-color: #000;
    display: block;
    width: calc(50% - 7px);
    height: 1px;
}
.fullBg__grid > div > span > span {
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    width: 14px;
    height: 100%;
}
.fullBg__grid.is-top  > div > span > span {
    background-image: url(../img/common/icon_sankaku_up.svg);
    margin-top: -7px;
}
.fullBg__grid.is-top > div:nth-child(2) > span > span {
    background-image: url(../img/common/icon_sankaku_down.svg);
    margin-top: 8px;
}
.fullBg__grid.is-bottom  > div > span > span {
    background-image: url(../img/common/icon_sankaku_down.svg);
    margin-top: 8px;
}
.fullBg__grid.is-bottom > div:nth-child(2) > span > span {
    background-image: url(../img/common/icon_sankaku_up.svg);
    margin-top: -7px;
}
.fullBg__grid.is-bottom:before {
    content: "";
    background-image: url(../img/common/deco_fixright.svg);
    background-size: 100%;
    background-position: 0 0;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 360px;
    height: 359px;
    opacity: .6;
}
.fullBg__grid.is-bottom:after {
    content: none;
    background-image: url(../img/common/logo_eclipse.png);
    background-size: 100%;
    background-position: 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 240px;
    height: 240px;
    opacity: .6;
}
@media screen and (max-width:770px) {
    .fullBg__grid > div > span {
        height: 16px;
    }
    .fullBg__grid > div > span:before,
    .fullBg__grid > div > span:after {
        width: calc(50% - 15px);
    }
    .fullBg__grid.is-top  > div > span > span {
        background-image: url(../img/common/icon_sankaku_down.svg);
        margin-top: 13px;
    }
    .fullBg__grid.is-bottom  > div > span > span {
        background-image: url(../img/common/icon_sankaku_up.svg);
        margin-top: -15px;
    }
    .fullBg__grid > div > span > span {
        width: 30px;
    }
    .fullBg__grid.is-bottom:after {
        content: none;
    }
}

/* noise */
.fullBg__noiseWrap {
    background: url(../img/common/noise.png) center;
    width: 150%;
    height: 150%;
    animation: rumble .3s linear infinite;
    position: absolute;
    top: -25%;
    left: -25%;
    z-index: 2;
    opacity: .7;
}


/*-----------------------------------------------
 * 06. HEADER
-------------------------------------------------*/
.header {
    width: calc(100% / 5);
    min-width: 240px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.header:before {
    content: "";
    background-image: url(../img/common/deco_fixleft.svg);
    background-size: 100%;
    background-position: 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    height: 359px;
    opacity: .6;
    z-index: 0;
}
.headerIn {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    padding-bottom: 40px;
    position: absolute;
    top: 0;
    z-index: 1;
    transition: top .3s;
}
.header__logo {
    width: 130%;
    margin: 40px;
    transition: all .4s ease;
}
.header__logo.is-scr {
    width: calc(100% - 80px);
}
.header__logo img {
    width: 100%;
}
.headerNavWrap {
    background-color: rgba(255,255,255,.8);
    padding: 40px 0;
    position: relative;
}
.headerIn .fullBg {
    display: none;
}
@media screen and (max-width:770px) {
    .header {
        width: 100%;
        min-width: 100%;
        height: 0;
    }
    .header:before {
        content: none;
    }
    .headerIn {
        height: 100%;
        min-width: 100%;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        overflow: auto;
        padding-bottom: 0;
        padding: 0 50px 100px;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        transition: opacity .5s ease-in-out;
    }
    .headerIn:before{
        content: "";
        background-image: url(../img/common/deco_fixleft.svg);
        background-size: 100%;
        background-position: 0 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 360px;
        height: 359px;
        opacity: .6;
        z-index: 1;
    }
    .header.is-active .headerIn {
        opacity: 1;
        pointer-events: auto;
    }
    .header__logo {
        width: 399px;
        height: 160px;
        margin: 40px auto 60px;
        position: relative;
        z-index: 2;
    }
    .header__logo.is-scr {
        width: 399px;
    }
    .header__logo img {
        width: 100%;
    }
    .headerNavWrap {
        padding: 80px 0;
        position: relative;
        z-index: 2;
    }
    .headerIn .fullBg {
        display: block;
    }
}

/* header share */
.header__share {
    margin-top: auto;
    padding-top: 50px;
    position: relative;
    z-index: 2;
}
.header__share.is-bottom {
    margin-bottom: 40px;
}
@media screen and (max-width:770px) {
    .header__share {
        margin-top: 120px;
        padding-top: 0;
    }
    .header__share.is-bottom {
        margin-bottom: 0;
    }
}

/**
 * navigation
 */
.headerNavLists {
    padding: 0 8px;
}
.headerNavLists > li {
    margin-bottom: 8px;
    position: relative;
}
.headerNavLists > li:before,
.headerNavLists > li:after {
    content: "";
    background-color: #000;
    width: 1px;
    height: 8px;
    margin: auto;
    opacity: .1;
    position: absolute;
    top: 0;
    bottom: 0;
}
.headerNavLists > li:before {
    left: 0;
}
.headerNavLists > li:after {
    right: 0;
}
.headerNavLists > li:last-child {
    margin-bottom: 0;
}
@media screen and (max-width:770px) {
    .headerNavLists {
        padding: 0 16px;
    }
    .headerNavLists > li {
        margin-bottom: 24px;
    }
    .headerNavLists > li:before,
    .headerNavLists > li:after {
        height: 14px;
    }
}
.headerNavLists > li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.hn_line {
    background-color: rgba(0,0,0,.1);
    display: block;
    width: 100%;
    height: 1px;
    margin-top: -1px;
    position: relative;
}
.hn_line:before {
    content: "";
    background-color: #2000c7;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    transition: width .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.headerNavLists > li a:hover .hn_line:before,
.headerNavLists > li a.is-active .hn_line:before {
    width: 100%;
}
.hn_line:first-of-type:before {
    left: 0;
}
.hn_line:last-of-type:before {
    right: 0;
}

.hn_text {
    display: block;
    padding: 0 10px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}
.hn_text:before,
.hn_text:after {
    content: "";
    border-top: 1px solid #2000c7;
    width: 4px;
    height: 4px;
    margin: auto;
    position: absolute;
    top: -1px;
    bottom: 0;
    opacity: 0;
    transition: all .4s ease; 
}
.hn_text:before {
    content: "";
    border-left: 1px solid #2000c7;
    left: -10px;
    transform: rotate(-45deg);
}
.hn_text:after {
    content: "";
    border-right: 1px solid #2000c7;
    right: -10px;
    transform: rotate(45deg);
}
.headerNavLists > li a:hover .hn_text:before,
.headerNavLists > li a:hover .hn_text:after,
.headerNavLists > li a.is-active .hn_text:before,
.headerNavLists > li a.is-active .hn_text:after {
    opacity: 1;
}
.headerNavLists > li a:hover .hn_text:before,
.headerNavLists > li a.is-active .hn_text:before {
    left: 0;
}
.headerNavLists > li a:hover .hn_text:after,
.headerNavLists > li a.is-active .hn_text:after {
    right: 0;
}
@media screen and (max-width:770px) {
    .headerNavLists > li a {
        font-size: 32px;
    }
    .hn_text {
        padding: 0 24px;
    }
    .hn_text:before,
    .hn_text:after {
        width: 8px;
        height: 8px;
    }

    /**
     * Menu trigger
     */
    .header__navBtn{
        width: 96px;
        height: 96px;
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 2;
    }
    .header__navBtn a{
        background-image: url(../img/common/nav_bg_off.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
    }
    .header__navBtn a:before{
        content: "";
        background-image: url(../img/common/nav_bg_on.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0;
        transition: opacity .3s ease-in-out;
    }
    .header__navBtn a.is-active:before{
        opacity: 1;
    }
    .header__navBtn__lineWrap{
        width: 48px;
        height: 16px;
        margin: auto;
        position: absolute;
        top: 28px;
        right: 0;
        left: 0;
        z-index: 1;
    }
    .header__navBtn--line{
        background-color: #000;
        display: block;
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        transition: all .3s ease-in-out;
    }
    .header__navBtn a.is-active .header__navBtn--line{
        background-color: #fff;
    }
    .header__navBtn--line:nth-child(1){
        top: 0;
    }
    .header__navBtn--line:nth-child(2){
        bottom: 0;
    }
    .header__navBtn a.is-active .header__navBtn--line:nth-child(1){
        top: 4px;
        transform: rotate(25deg);
    }
    .header__navBtn a.is-active .header__navBtn--line:nth-child(2){
        bottom: 8px;
        transform: rotate(-25deg);
    }
    .header__navBtn--text{
        color: #000;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.01em;
        position: absolute;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        transition: all .3s ease-in-out;
    }
    .header__navBtn a.is-active .header__navBtn--text{
        color: #fff;
    }
    .header__navBtn--text:before{
        content: "MENU";
    }
    .header__navBtn a.is-active .header__navBtn--text:before{
        content: "CLOSE";
    }
}

/*-----------------------------------------------
 * 07. FOOTER
-------------------------------------------------*/
.footer {
    margin-top: auto;
    padding-top: 160px;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:770px) {
    .footer {
        padding-top: 190px;
    }
}

/* bnrLists */
.bnrLists {
    width: 80%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 64px 20%;
}
.bnrLists:last-of-type {
    margin-bottom: 80px;
}
.bnrLists li {
    height: 48px;
    margin: 0 20px;
}
.bnrLists li img {
    height: 100%;
}
li.footerLogo1 {
    height: 64px;
    width: 100%;
    text-align: center;
    margin-bottom: 80px;
}
li.footerLogo2 {
    height: 122px;
    width: 100%;
    text-align: center;
}
@media screen and (max-width:770px) {
    .bnrLists {
        width: 100%;
        margin: 0 0 96px 0;
        padding: 0 48px;
    }
    .bnrLists:last-of-type {
        margin-bottom: 96px;
    }
    .bnrLists li {
        width: calc((100% - 60px) / 2);
        height: auto;
        margin: 0;
        display: grid;
        align-items: center;
    }
    li.footerLogo1 {
        width: calc(100% / 0.5);
        height: auto;
        text-align: center;
        margin: 0 0 96px 0;
    }
    li.footerLogo2 {
        width: calc(100% / 1.5);
        height: auto;
        text-align: center;
        margin: 0 !important;
    }
    .bnrLists li:not(:nth-child(2n + 1)) {
        margin-left: 60px;
    }
    .bnrLists li:nth-child(n + 2){
        margin-top: 24px;
    }
    .bnrLists li img {
        width: 100%;
        height: auto;
    }
}

/* footerBottom */
.footerBottom {
    background-color: #000;
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 40px;
}
.footer__notice {
    color: #fff;
    font-size: 12px;
}
.footer__notice a {
    color: #61daf2;
    text-decoration: none;
}
.copyright {
    color: #fff;
    font-size: 12px;
    margin-left: auto;
}
@media screen and (max-width:770px) {
    .footerBottom {
        display: block;
        height: auto;
        padding: 50px 0;
    }
    .footer__notice {
        font-size: 20px;
        margin-bottom: 40px;
        text-align: center;
    }
    .copyright {
        display: block;
        font-size: 20px;
        text-align: center;
    }
}

/* pagetop */
.pagetop {
    width: 64px;
    height: 46px;
    position: absolute;
    top: 160px;
    right: 40px;
}
.pagetop a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.pagetop a:before {
    content: "";
    background: url(../img/common/arrow_top_b.svg) no-repeat 0 0 / 100%;
    width: 64px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
}
.pagetop a span {
    color: #000;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
@media screen and (max-width:770px) {
    .pagetop {
        width: 97px;
        height: 66px;
        top: 50px;
        right: 25px;
    }
    .pagetop a:before {
        width: 97px;
        height: 38px;
    }
    .pagetop a span {
        font-size: 24px;
    }
}
/*-----------------------------------------------
 * 08. SUB PAGE
-------------------------------------------------*/
/* Article */
.subArticle {
    padding-top: 160px;
}
@media screen and (max-width:770px) {
    .subArticle {
        padding-top: 0;
    }
}

/* title logo */
@media screen and (max-width:770px) {
    .secTitle__main {
        width: 399px;
        height: 160px;
        margin: 40px auto 80px;
    }
    .secTitle__main img {
        width: 100%;
    }
}

/* share */
.subPage__share {
    position: absolute;
    top: 40px;
    right: 20px;
}