/* ==============================
* main
* ============================== */
.mainWrap .innerBox { max-width:1480px;}

.visualWrap {overflow:hidden; position:relative; height:1000px;}
.visualWrap .visualBg {}
.visualWrap .visualBg span {  visibility: hidden; opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / cover; transition: all .6s ease; animation:visualScale 5s linear infinite alternate both;}
.visualWrap .visualBg span.on { visibility: visible; opacity: 1;}
.visualWrap .innerBox { display:flex; height:100%; flex-flow: column; justify-content: center;}
.visualWrap .textBox { display:none;}
.visualWrap .textBox.on { display:block;}
.visualWrap h1 { font-family: 'baskerville old face'; font-size:132px; color:#fff;}
.visualWrap h1 .JStextMotion.space { padding-left:30px}
.visualWrap .dots { position:absolute; left:30px; bottom:180px; font-size:0;}
.visualWrap .dots a { display:inline-block; width:12px; height:12px; margin-right:15px; font-size:0; border:1px solid rgba(255,255,255,0.5); border-radius:50%; transition: all .3s ease;}
.visualWrap .dots a.on { border-color:#fff; background:#fff;}
.visualWrap .btnCircleMore { position:absolute; bottom:220px; right:10px; width:80px; height:80px;}
.visualWrap .btnCircleMore i { display: block; position: absolute; top:50%; left:50%; width:170px; height:170px; transform: translate(-50%, -50%); background:url('../images/main/img_circle_text_w.png') no-repeat center center / 100%; animation:rotateInfinite 30s linear infinite both;}
.visualWrap .btnCircleMore:after {content:''; display:block; position:absolute; top:50%; left:50%; width:40px; height:16px; transform: translate(-50%, -50%); background:url('../images/main/ico_visual_arrow.png') no-repeat center center /100%;}

.mainSec01 { height:900px; margin:160px 0;}
.mainSec01 .innerBox { height:100%}
.mainSec01 .textBox { position:relative; padding-top:180px; z-index:1;}
.mainSec01 h2 { line-height:1; font-size:112px; color:#111111; font-weight: normal;}
.mainSec01 .text { margin-top:60px; font-size:26px; line-height:1.61; font-weight:200; color:#111;}
.mainSec01 .btnArrow { display:block; width:100px; height:24px; margin-top:90px; font-size:0; background:url('../images/main/img_arrow.png') no-repeat right center / 150px; transition:all .3s ease;}
.mainSec01 .img { position: absolute; top:0; left:110px; width:1590px; height:900px;}
.mainSec01 .icoCircle { position:absolute; bottom:-80px; left:0; width:170px; height:170px; background:url('../images/main/img_circle_text.png') no-repeat center center / 100%; animation:rotateInfinite2 30s linear infinite both;}

.mainSec02 { position:relative; padding:180px 0; background:#f8f8f9;}
.mainSec02 .tit { position:absolute; top:0; left:0; right:0; text-align:center; font-size:90px; color:#181d62; transform: translateY(-50%);}
.mainSec02 .innerBox { display:flex;}
.mainSec02 .textBox { position:relative; padding-top:150px; z-index:1;}
.mainSec02 h2 { line-height:1; font-size:34px; color:#010101; font-weight: normal;}
.mainSec02 .text { margin-top:60px; font-size:26px; line-height:1.61; font-weight:200;}
.mainSec02 .btnArrow { display:block; width:100px; height:24px; margin-top:90px; font-size:0; background:url('../images/main/img_arrow.png') no-repeat right center / 150px; transition:all .3s ease;}
.mainSec02 .img { margin-left:auto; margin-right:60px;}
.mainSec02 .icoCircle { position:absolute; bottom:-80px; right:0px; width:170px; height:170px; background:url('../images/main/img_circle_text.png') no-repeat center center / 100%; animation:rotateInfinite2 30s linear infinite both;}

.mainSec03 { position:relative; padding:180px 0 0px;}
.mainSec03 h2 { font-size:120px; color:#111111; line-height:1; font-weight: normal;}
.mainSec03 .text { margin-top:40px; font-size:26px; line-height:1.62; font-weight:200;}
.mainSec03 .btnArrow { display:block; position:absolute; top:0; right:20px; width:100px; height:24px; font-size:0; background:url('../images/main/img_arrow.png') no-repeat right center / 150px; transition:all .3s ease;}
.mainSec03 .imgBox { margin-top:150px; height:690px; background:url('../images/main/img_main3.png') no-repeat center center / cover;}
.mainSec03 .imgBox .innerBox { height:100%;}
.mainSec03 .imgBox .textBox { padding-top:400px;}
.mainSec03 .imgBox .textBox .imgTit { font-size:30px; color:#e5e5e5;}
.mainSec03 .imgBox .textBox .imgText { font-size:60px; color:#e5e5e5;}
.mainSec03 .imgBox .img { position:absolute; bottom:-200px; right:0;}

.mainSec04 { padding:200px 0 180px; background:#f8f8f9;}
.mainSec04 .innerBox { display:flex; justify-content: space-between;}
/* .mainSec04 .innerBox .subText { position:absolute; top:35%; left:50%; font-size:80px; font-family: 'baskerville old face'; color:#e5e5e5; transform:translate(-50%,00%) rotate(90deg); transform-origin:50% 50%;} */
.mainSec04 .innerBox .subText { flex:0 0 auto; position:relative; width:80px;}
.mainSec04 .innerBox .subText span { display:block; position:absolute; top:0; left:50%; width:1000px; font-size:80px; font-family: 'baskerville old face'; color:#e5e5e5; transform:translate(0%,00%) rotate(90deg); transform-origin:0% 50%;}
.mainSec04 .innerBox .box { display:flex; width:600px; flex-flow: column;}
.mainSec04 .innerBox .box.type2 { flex-flow: column-reverse;}
.mainSec04 .innerBox .img {}
.mainSec04 .innerBox .textBox { display:block; padding:90px 0 90px 60px;}
.mainSec04 .innerBox .textBox .tit { font-size:72px; color:#111111; line-height:1; font-weight: normal; background:url('../images/main/img_arrow2.png') no-repeat right center / 40px;}
.mainSec04 .innerBox .textBox .text { margin-top:70px; font-size:26px; color:#111; font-weight:200; line-height:1.61; letter-spacing: -1.5px;}

.mainSec05 { padding:180px 0;}
.mainSec05 h2 { font-size:120px; color:#111111; line-height:1; font-weight: normal;}
.mainSec05 .btnArrow { display:block; position:absolute; top:0; right:20px; width:100px; height:24px; font-size:0; background:url('../images/main/img_arrow.png') no-repeat right center / 150px; transition:all .3s ease;}
.mainSec05 .mainNewsList { display:flex; justify-content: space-between; margin:90px -10px 0;}
.mainSec05 .mainNewsList li { margin:0 10px; max-width:378px; width:100%;}
.mainSec05 .mainNewsList .img { padding-top:63%; background:no-repeat center center / cover;}
.mainSec05 .mainNewsList .tit { margin-top:25px; font-family: 'baskerville old face'; font-size:30px; color:#111;}
.mainSec05 .mainNewsList .text { margin-top:20px; height:50px; font-size:18px; color:#111;}
.mainSec05 .mainNewsList .date { margin-top:55px; color:#999; font-size:15px;}

.mainSec06 { padding:180px 0 180px; border-top:1px solid #dddddd;}
.mainSec06 h2 { font-size:120px; color:#111111; line-height:1; font-weight: normal;}
.mainSec06 .logoBrand { display:flex; margin-top:80px;}
.mainSec06 .logoBrand > div { flex:1 1 auto; width:50%;}


.mainSec07 { position:relative;}
.mainSec07:after { content:''; display:block; position:absolute; top:0; left:0; bottom:0; width:50%; background:#f8f8f9}
.mainSec07:before { content:''; display:block; position:absolute; top:0; right:0; bottom:0; width:50%; background:#f2f2f5 url('../images/main/img_main7.png') no-repeat right 0 / 480px;}
.mainSec07 .innerBox { display:flex; z-index:1;}
.mainSec07 h2 { margin-bottom:60px; font-size:60px; color:#111111; line-height:1; font-weight: normal;} 
.mainSec07 .btnSubmit { display:flex; position:relative; width:100%; height:80px; padding:0 60px; margin-top:45px; background:#181d62; align-items: center; color:#fff; font-weight:bold; font-size:16px; color:#ffffff;}
.mainSec07 .btnSubmit:after { content:''; display:block; position:absolute; top:50%; right:60px; width:41px; height:16px; background:url('../images/main/img_arrow2_w.png') no-repeat center center / 100%; transform: translateY(-50%); transition: all .3s ease;}
.mainSec07 .btnSubmit.line { color:#111; border:1px solid #111111; background:none;}
.mainSec07 .btnSubmit.line:after { background:url('../images/main/img_arrow2.png') no-repeat center center / 100%; transform: translateY(-50%);}
.mainSec07 .left { flex:1 1 auto; width:50%; padding:130px 90px 150px 0;}
.mainSec07 .right { flex:1 1 auto; width:50%; padding:130px 0px 150px 90px;}
.mainSec07 .right .text { margin-bottom:125px; font-size:18px; color:#111111;}

html:not(.mobile) .mainSec07 .btnSubmit:hover:after { right:40px;}
html:not(.mobile) .mainSec01 .btnArrow:hover,
html:not(.mobile) .mainSec02 .btnArrow:hover,
html:not(.mobile) .mainSec03 .btnArrow:hover,
html:not(.mobile) .mainSec05 .btnArrow:hover { width:150px;}

@keyframes rotateInfinite {
    0% { transform:translate(-50%, -50%) rotate(0deg);}
    100% { transform:translate(-50%, -50%) rotate(360deg);}
}
@keyframes rotateInfinite2 {
    0% { transform: rotate(0deg);}
    100% { transform:rotate(360deg);}
}

@keyframes visualScale {
    0% { transform:translateZ(0) scale(1) rotate(0deg)}
    100% { transform:translateZ(0) scale(1.08) rotate(0.0001deg)}
}


@media screen and (max-width: 1440px) {
    .visualWrap  { height:800px;}
    .visualWrap h1 { font-size:100px;}
    .visualWrap .btnCircleMore { right:60px; bottom:100px}

    .mainSec01 { height:800px;}
    .mainSec01 h2 { font-size:80px;}
    .mainSec01 .text { font-size:20px;}
    .mainSec01 .img { width:auto; height:800px;}
    .mainSec01 .img img { height:100%; object-fit: cover;}

    .mainSec02 .textBox { padding-top:0; margin-right:20px;}
    .mainSec02 .tit { font-size:80px; letter-spacing: -2px;}
    .mainSec02 .text { font-size:20px;}
    .mainSec02 .text br { display:none;}
    .mainSec02 .img { flex: 0 0 auto; width:400px; margin-right:0;}

    .mainSec03 h2 { font-size:80px;}
    .mainSec03 .text { font-size:20px;}
    .mainSec03 .text br { display:none;}
    .mainSec03 .imgBox { height:600px;}

    .mainSec04 .innerBox .subText { margin:0 20px;}
    .mainSec04 .innerBox .textBox { padding:90px 40px;}
    .mainSec04 .innerBox .textBox .text { font-size:20px;}
    .mainSec04 .innerBox .textBox .text br { display:none;}

    .mainSec06 h2 { font-size:80px;}

    .mainSec07:before { background-size:300px;}
    .mainSec07 .left { padding-right:20px;}
    .mainSec07 .right { padding-left:20px;}

    .mainSec05 h2 { font-size:80px;}
}

@media screen and (max-width: 1024px) {
    .visualWrap h1 { font-size:80px;}
    .mainSec01 h2 { font-size:60px;}
    .mainSec01 .text br { display:none;}

    .mainSec02 .tit { font-size:60px;}

    .mainSec03 h2 { font-size:60px;}

    .mainSec03 .imgBox .img { width:300px;}

    .mainSec04 .innerBox { display:block;}
    .mainSec04 .innerBox .box { display:block; width:100%;}
    .mainSec04 .innerBox .box.type2 {}
    .mainSec04 .innerBox .img img { width:100%;}
    .mainSec04 .innerBox .subText { display:none; width:auto;}
    .mainSec04 .innerBox .subText span { position:static; width:100%; font-size:60px; text-align:center; transform:none;}

    .mainSec05 { padding-bottom:120px;}
    .mainSec05 h2 { font-size:60px;}
    .mainSec05 .mainNewsList { flex-flow: wrap;}
    .mainSec05 .mainNewsList li { width:calc(50% - 20px); margin-bottom:60px;}

    .mainSec06 h2 { font-size:60px;}
    .mainSec06 .logoBrand { flex-flow: wrap;}
    .mainSec06 .logoBrand > div { width:33.333%;}
    .mainSec06 .logoBrand > div:nth-child(n+4) { margin-top:60px;}

    .mainSec07:before,
    .mainSec07:after { display:none;}
    .mainSec07 .innerBox { display:block;}
    .mainSec07 .left { width:auto; margin:0 -20px; padding:130px 20px 150px; background:#f8f8f9;}
    .mainSec07 .right { width:auto; margin:0 -20px; padding:130px 20px 150px; background:#f2f2f5;}
    
}

@media screen and (max-width:767px) {
    .visualWrap { height:600px;}
    .visualWrap h1 { font-size:50px;}
    .visualWrap h1 .JStextMotion.space { padding-left:10px}
    .visualWrap .dots { left:20px; bottom:60px;}
    .visualWrap .dots a { width:8px; height:8px; margin-right:10px;}
    .visualWrap .btnCircleMore { bottom:40px; right:30px; width:60px; height:60px;}
    .visualWrap .btnCircleMore i { width:100px; height:100px;}
    .visualWrap .btnCircleMore:after { width:30px; height:10px;}

    .mainSec01 { height:auto; margin:60px 0;}
    .mainSec01 .textBox { padding-top:0px;}
    .mainSec01 h2 { font-size:50px;}
    .mainSec01 .text { margin-top:20px; font-size:18px;}
    .mainSec01 .btnArrow { width:80px; height:15px; margin-top:45px; background-size:100%;}
    .mainSec01 .img { position: static; width:auto; height:auto; margin:60px -20px 0;}
    .mainSec01 .icoCircle { bottom:-35px; left:-35px; width:70px; height:70px;}

    .mainSec02 { padding:60px 0;}
    .mainSec02 .tit { position:static; font-size:50px; line-height:1; transform:none;}
    .mainSec02 .innerBox { display:flex; flex-flow: column-reverse;}
    .mainSec02 .textBox { position:relative; padding-top:40px; z-index:1;}
    .mainSec02 h2 { font-size:25px;}
    .mainSec02 .text { margin-top:20px; font-size:18px;}
    .mainSec02 .btnArrow { width:80px; height:15px; margin-top:60px; background-size:100%;}
    .mainSec02 .img { margin:30px -20px 0px;}
    .mainSec02 .icoCircle { bottom:-35px; right:-35px; width:70px; height:70px;}

    .mainSec03 { padding:60px 0 0px;}
    .mainSec03 h2 { font-size:50px;}
    .mainSec03 .text { margin-top:40px; font-size:18px;}
    .mainSec03 .btnArrow { top:20px; width:80px; height:15px; background-size:100%;}
    .mainSec03 .imgBox { margin-top:60px; height:300px;}
    .mainSec03 .imgBox .textBox { padding-top:150px;}
    .mainSec03 .imgBox .textBox .imgTit { font-size:20px;}
    .mainSec03 .imgBox .textBox .imgText { font-size:25px;}
    .mainSec03 .imgBox .img { bottom:-100px; width:200px;}

    .mainSec04 { padding:150px 0 60px;}
    .mainSec04 .innerBox .box ~ .box { margin-top:60px;}
    .mainSec04 .innerBox .textBox { display:block; padding:40px 0px 0;}
    .mainSec04 .innerBox .textBox .tit { font-size:50px; background-size:30px;}
    .mainSec04 .innerBox .textBox .text { margin-top:30px; font-size:18px;}

    .mainSec05 { padding:60px 0;}
    .mainSec05 h2 { font-size:50px;}
    .mainSec05 .btnArrow { top:20px; width:80px; height:15px; background-size:100%;}
    .mainSec05 .mainNewsList { margin:40px -10px 0;}
    .mainSec05 .mainNewsList li { margin:0 10px;}
    .mainSec05 .mainNewsList li:nth-child(n + 3) { margin-top:30px;}
    .mainSec05 .mainNewsList .tit { margin-top:15px; font-size:25px;}
    .mainSec05 .mainNewsList .text { margin-top:10px; height:38px; font-size:14px;}
    .mainSec05 .mainNewsList .date { margin-top:20px; font-size:14px;}

    .mainSec06 { padding:60px 0 60px;}
    .mainSec06 h2 { font-size:50px;}
    .mainSec06 .logoBrand {}
    .mainSec06 .logoBrand > div { width:50%;}
    .mainSec06 .logoBrand > div:nth-child(n+3),
    .mainSec06 .logoBrand > div:nth-child(n+4) { margin-top:40px;}

    .mainSec07 {}
    .mainSec07 h2 { margin-bottom:30px; font-size:50px; }
    .mainSec07 .btnSubmit { height:60px; padding:0 20px; margin-top:40px; font-size:14px;}
    .mainSec07 .btnSubmit:after { right:20px; width:20px; height:14px;}
    .mainSec07 .left { padding:60px 20px 60px;}
    .mainSec07 .right { padding:60px 20px 60px;}
    .mainSec07 .right .text { margin-bottom:40px; font-size:16px;}

    .mainSec07 .checkBox { display:block;}
}

@media screen and (max-width:360px) {
}