@charset "utf-8";
html {background: #14192b url(../imgs/bg_index.png) no-repeat top center; background-size: cover !important;}
#content {margin-top: 80px;}
#visual {color: #fff;}
#visual h2 {font-size: 18px; font-weight: 200;}
#visual h2 b {font-size: 45px; display: block; font-weight: 700;}
.btn-more {border: 1px solid #fff; display: block; padding: 15px 20px; background: url(../imgs/ico_line1.png) no-repeat right 25px center; width: 180px; margin-top: 30px; color: #fff; font-size: 14px;}
#notice {background: #fff; padding: 30px 20px 0; margin-top: 120px;}
#notice > h2 {color: #000; font-size: 24px; font-weight: 400;}
#notice article {border-bottom: 1px solid #ddd; padding: 25px 0; color: #56565e; position: relative;}
#notice article:last-child {border-bottom: 0;}
#notice h3 {font-size: 18px; font-weight: 500;}
#notice article a {color: #56565e;}
#notice time {font-size: 14px; margin-top: 5px; display: block;}
#slick .inner {position: relative; padding: 0;}
#slick .prev {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 20;}
#slick .next {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 20;}
#slick button img {width: 15px;}
#slick article {color: #fff; text-align: center; position: relative; height: 400px; background-position: top center; background-size: cover;}
#slick article div {position: absolute; width: 90%; height: 100%; top: 0; left: 50%; transform: translateX(-50%); padding: 90px 15px 30px; z-index: 5;}
#slick article div:after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .2; z-index: 1;}
#slick article h2 {font-size: 24px; position: relative; z-index: 5;}
#slick article h2 em {font-size: 14px; padding: 5px; color: #a2f2fe; font-weight: 400; display: inline-block; border-top: 1px solid #a2f2fe; border-bottom: 1px solid #a2f2fe; font-style: normal;}
#slick article h2 a {display: block; margin: 20px 0;}
#slick article h2 span {font-size: 14px; font-weight: 500; display: block;}
#slick article p {font-size: 16px; margin-top: 20px; position: relative; z-index: 5;}
#slick article figure {position: relative; z-index: 1;}
#slick .btn-more {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; text-align: left;}
#quick .inner {padding: 30px 20px; position: relative; background: #fff;}
#quick h2 {color: #000; font-size: 26px; font-weight: 400; margin-bottom: 30px;}
#quick li {float: left; width: 33.33%; text-align: center;}
#quick li:nth-child(n+4) {margin-top: 30px;}
#quick li a {display: block; position: relative; padding-top: 64px;}
#quick li a:before {content: ''; display: block; position: absolute; left: 50%; top: 0; background: url(../imgs/ico_quick1.png) no-repeat left top; width: 52px; height: 54px; transform: translateX(-50%);}
#quick li:nth-child(2) a:before {background: url(../imgs/ico_quick2.png) no-repeat left top; width: 48px;}
#quick li:nth-child(3) a:before {background: url(../imgs/ico_quick3.png) no-repeat left top; width: 49px;}
#quick li:nth-child(4) a:before {background: url(../imgs/ico_quick4.png) no-repeat left top; width: 49px;}
#quick li:nth-child(5) a:before {background: url(../imgs/ico_quick5.png) no-repeat left top; width: 61px; height: 46px;}
#quick li:nth-child(6) a:before {background: url(../imgs/ico_quick6.png) no-repeat left top; width: 52px; height: 50px;}
#banner .inner {background: #fff; padding: 0; position: relative;}
#banner iframe {width: 100%; height: 215px;}
#banner .inner > div {margin-top: -5px;}
#banner article {background: #1d66b9 url(../imgs/bg_banner1.png) no-repeat left 20px center; padding: 30px 20px 30px 130px; background-size: 100px !important;}
#banner article:nth-of-type(2) {background: #1d84b9 url(../imgs/bg_banner2.png) no-repeat left 20px center;}
#banner article h3 {font-size: 24px; color: #fff; margin-bottom: 20px;}
#banner article p {font-size: 18px; color: #b9d1ed;}

/* Extra Small */
@media (max-width: 320px) {
    #banner article {background-size: 80px;}
    #banner article p {font-size: 16px;}
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    html {background: #14192b url(../imgs/bg_index.png) no-repeat top center;}
    .btn-more {width: 225px;}
    #notice {padding: 30px 20px;}
    #notice > h2 {margin-bottom: 30px;}
    #notice article {float: left; width: 33.33%; border-bottom: 0; border-left: 1px solid #ddd; padding: 0 10px; height: 267px;}
    #notice article:first-child {border-left: 0; padding-left: 0;}
    #notice h3 {margin-bottom: 30px; font-size: 20px; height: 90px;}
    #notice time {position: absolute; left: 10px; bottom: 5px;}
    #slick article {text-align: left; height: 500px;}
    #slick article div {left: 0; top: 0; transform: none; width: 55%; padding: 60px 30px 60px 40px;}
    #slick article h2 {font-size: 30px;}
    #slick article h2 span {font-size: 16px;}
    #slick button img {width: 25px;}
    #slick .btn-more {bottom: 60px; left: 40px; transform: none;}
    #quick li {width: 20%; margin: 0 !important; padding: 5px 0;}
    #quick li:not(:last-child) {border-right: 1px solid #ddd;}
    #quick li a {padding-top: 74px;}
    #banner iframe {height: 335px;}
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    html {background: #14192b url(../imgs/bg_index.png) no-repeat top center;}
    #visual {margin-top: 130px; padding-left: 50px; font-size: 20px;}
    #visual h2 {font-size: 24px;}
    #visual h2 b {font-size: 90px;}
    .btn-more {margin-top: 60px; width: 250px;}
    #notice {padding: 50px; margin-top: 310px;}
    #notice > h2 {margin-bottom: 30px;}
    #notice article {float: left; width: 33.33%; border-bottom: 0; border-left: 1px solid #ddd; padding: 0 40px; height: 267px;}
    #notice article:first-child {border-left: 0;}
    #notice h3 {margin-bottom: 30px; font-size: 20px; height: 90px;}
    #notice time {position: absolute; left: 40px; bottom: 5px;}
    #slick article {text-align: left; height: 500px;}
    #slick article div {left: 0; top: 0; transform: none; width: 700px; padding: 40px 80px;}
    #slick article h2 {font-size: 40px;}
    #slick article h2 a {display: block; margin: 10px 0;}
    #slick article h2 span {font-size: 18px;}
    #slick .prev {left: 20px;}
    #slick .next {right: 20px;}
    #slick button img {width: 25px;}
    #slick .btn-more {bottom: 50px; left: 80px; transform: none;}
    #quick .inner {padding: 60px 100px 60px 250px;}
    #quick h2 {position: absolute; left: 100px; top: 40px;}
    #quick h2 span {display: block;}
    #quick li {width: 16.66%; margin: 0 !important; padding: 5px 0;}
    #quick li:not(:last-child) {border-right: 1px solid #ddd;}
    #quick li a {padding-top: 74px;}
    #banner .inner {padding: 0 30px 50px 550px;}
    #banner .inner > div {margin-top: 0;}
    #banner iframe {position: absolute; left: 50px; top: 0; width: 480px; height: 308px;}
    #banner article {background-size: 110px !important;  padding: 30px 20px 30px 190px;}
    #banner article:nth-of-type(2) {margin-top: 10px;}
    #banner article h3 {margin-bottom: 5px;}
    #banner article p {font-size: 16px;}
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
    html {background: #14192b url(../imgs/bg_index.png) no-repeat top center;}
    #visual {margin-top: 130px; padding-left: 50px; font-size: 20px;}
    #visual h2 {font-size: 24px;}
    #visual h2 b {font-size: 90px;}
    .btn-more {margin-top: 60px; width: 250px;}
    #notice {padding: 50px; margin-top: 310px;}
    #notice > h2 {margin-bottom: 30px;}
    #notice article {float: left; width: 33.33%; border-bottom: 0; border-left: 1px solid #ddd; padding: 0 40px; height: 267px;}
    #notice article:first-child {border-left: 0;}
    #notice h3 {margin-bottom: 30px; font-size: 20px; height: 90px;}
    #notice time {position: absolute; left: 40px; bottom: 5px;}
    #slick article {text-align: left; height: 500px;}
    #slick article div {left: 0; top: 0; transform: none; width: 700px; padding: 60px 100px 60px 120px;}
    #slick article h2 {font-size: 40px;}
    #slick article h2 a {display: block; margin: 10px 0;}
    #slick article h2 span {font-size: 18px;}
    #slick .prev {left: 40px;}
    #slick .next {right: 40px;}
    #slick button img {width: 25px;}
    #slick .btn-more {bottom: 50px; left: 120px; transform: none;}
    #quick .inner {padding: 60px 100px 60px 300px;}
    #quick h2 {position: absolute; left: 100px; top: 40px;}
    #quick h2 span {display: block;}
    #quick li {width: 20%; margin: 0 !important; padding: 5px 0;}
    #quick li:not(:last-child) {border-right: 1px solid #ddd;}
    #quick li a {padding-top: 74px;}
    #banner .inner {padding: 0 50px 50px 714px;}
    #banner .inner > div {margin-top: 0;}
    #banner iframe {position: absolute; left: 50px; top: 0; width: 580px; height: 308px;}
    #banner video {position: absolute; left: 50px; top: 0; width: 580px; height: 308px; background: #111; overflow: hidden;}
    #banner article {background-size: 110px !important;  padding: 30px 20px 30px 180px;}
    #banner article:nth-of-type(2) {margin-top: 10px;}
    #banner article h3 {margin-bottom: 5px;}
    #banner article p {font-size: 16px;}
}

/* print */
@media print {
}

/* ie only */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
}

/* 2020-11-17 */
#banner article p a {display: inline-block; width: 48%; height: 40px; background: url(../imgs/ico_download.png) no-repeat 90% center; padding: 0 15px; color: #fff; line-height: 38px; border: 1px solid #b9d1ed;}

@media all and (max-width: 767px) {
    #banner article p,
    #banner article p a {font-size: 15px;}
}