@charset "UTF-8";
/*------------------------------------------------------------------------------
gloval style
------------------------------------------------------------------------------*/
body { font-family: "Source Han Sans","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, sans-serif; color: #333; padding: 0px; margin: 0px; font-weight:400; background-color:#fff; -webkit-text-size-adjust:100%; letter-spacing:0.0em; font-size:12px; line-height: 1.6em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x:hidden; }

.cl:after { content: ""; display: block; clear: both; height: 0px; visibility: hidden; overflow: hidden; }
a{ text-decoration:none; color:#777; }
img { vertical-align: top; }

a{ transition: 0.2s cubic-bezier(0.44, 0.18, 0.49, 0.99); }

#index{ opacity: 0; }
#dl{ opacity: 1; }
#index .mask{ display: block; position:fixed; background-color: #fff; top: 0pc; left: 0px; width: 100%; height: 100%; z-index: 9999; }

.dl{ display: block; width: 232px; height: 232px; }
.dl a{ display: block; border-radius: 50%; width: 232px; height: 232px; background-color: #444444; box-shadow: 0px 0px 9.3px 0.7px rgba(0, 0, 0, 0.11); text-align: center; }
.dl a span{ display: table-cell; width: 232px; height: 110px; text-align: center; vertical-align: middle; font-size: 20px; line-height: 1.6em; color: #fff; position: relative; padding-top: 50px; }
.dl a i{ width: 34px; height: 30px; display: block; position: absolute; bottom:50px; left: calc(50% - 17px); }

.dl a i:before{ content: ""; display: block; width: 34px; height: 30px; display: block; background-image: url("../img/ico_defo.a98178354686.png"); background-size: 34px 30px; background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 1; }
.dl a i:after{ content: ""; display: block; width: 34px; height: 30px; display: block; background-image: url("../img/ico_defo_over.7a9daf5c5fab.png"); background-size: 34px 30px; background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 0; }

.dl a:hover{ background-color: #ebb32d; }
.dl a:hover span{ color:#333333; }
.dl a:hover i:before{ content: ""; display: block; width: 34px; height: 30px; display: block; background-image: url("../img/ico_defo.a98178354686.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 0; }
.dl a:hover i:after{ content: ""; display: block; width: 34px; height: 30px; display: block; background-image: url("../img/ico_defo_over.7a9daf5c5fab.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 1; }

.mode_sp .dl a:hover{ background-color: #444444; }
.mode_sp .dl a:hover span{ color:#fff; }
.mode_sp .dl a:hover i{ width: 20px; height: 20px; display: block; background-image: url("../img/ico_defo.a98178354686.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:35px; left: calc(50% - 10px); background-size: 100%; }
.mode_sp .dl a:hover i:before{ content: ""; display: none; width: 34px; height: 30px; display: block; background-image: url("../img/ico_defo.a98178354686.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 0; }
.mode_sp .dl a:hover i:after{ content: ""; display: none; width: 34px; height: 30px; display: block; background-image: url("../img/ico_defo_over.7a9daf5c5fab.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 0; }


#index header{ height: 730px; background-color: #b0cbe0; display: block; background-image: url("../img/main_bg.da20274ceb79.png"); position: relative; z-index: 120; }
#index header:before{ content: ""; display: block; width: 50%; height: 730px; background-image: url("../img/main_bg2.d63fa512931d.png"); position: absolute; right: 0px; top: 0px; }
#index header .inner{ max-width: none; height: 730px; margin-left: auto; margin-right: auto; position: relative; background-image: url("../img/main.7416093dba02.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }
#index header .inner .txt{ padding-left: 70px; padding-top: 50px; }
#index header .inner .txt h1{ font-size: 51px; line-height: 0.8em; color: #fff; padding-bottom: 0px; position: relative; display: inline-block; margin-bottom: 10px; }

#index header .inner .txt h1 .base { display: inline-block; }
#index header .inner .txt h1 .base .w_mask{ display: inline-block; height: 56px !important; }
#index header .inner .txt h1 .base .b_txt{ display: inline-block; }

#index header .inner .txt h1 i{ display: inline-block; width: 44px; height: 44px; margin-left: 20px; position: relative; }
#index header .inner .txt h1 i:before{ content: ""; display: block; width: 44px; height: 44px; background-image: url("../img/Slack_Mark_Monochrome_White.c8e2fd1fa7e6.svg"); background-repeat: no-repeat;  background-size: 100%; position: absolute; right: 0px; top: 0px; }
#index header .inner .txt p{ font-size: 35px; line-height: 1.4em; color: #fff; }
#index header .inner .dl{ position: absolute; right: 70px; bottom: -40px; }


#dl header{ height: 490px; background-color: #b0cbe0; display: block; background-image: url("../img/dl_main_bg.ff62a2fb911b.png"); z-index: 120; }
#dl header:before{ content: ""; display: block; width: 50%; height: 490px; background-image: url("../img/dl_main_bg2.f2bb0d1c255c.png"); position: absolute; right: 0px; top: 0px; }
#dl header .inner{ max-width: none; height: 490px; margin-left: auto; margin-right: auto; position: relative; background-image: url("../img/dl_main.559175969a76.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }
#dl header .inner .txt{ padding-left: 70px; padding-top: 50px; }

#dl header .inner .txt h1{ font-size: 51px; line-height: 0.8em; color: #fff; padding-bottom: 0px; position: relative; display: inline-block; padding-right: 75px; margin-bottom: 10px; }
#dl header .inner .txt h1 .base { display: inline-block; }
#dl header .inner .txt h1 .base .w_mask{ display: inline-block; height: 56px !important; }
#dl header .inner .txt h1 .base .b_txt{ display: inline-block; opacity: 0; }

#dl header .inner .txt h1 a{ color: #fff; }
#dl header .inner .txt h1 a:visited{ color: #fff; }
#dl header .inner .txt h1 i{ display: inline-block; width: 44px; height: 44px; margin-left: 20px; position: relative; }
#dl header .inner .txt h1 i:before{ content: ""; display: block; width: 44px; height: 44px; background-image: url("../img/Slack_Mark_Monochrome_White.c8e2fd1fa7e6.svg"); background-repeat: no-repeat;  background-size: 100%; position: absolute; right: 0px; top: 0px; }


#dl header .inner .txt p{ font-size: 35px; line-height: 1.4em; color: #fff; }
#dl header .inner .txt p .base .b_txt{ display: inline-block; opacity: 0; }

#dl header .inner .logos{ position: absolute; right: 50px; bottom: 30px; }

#dl header .inner .logos .n_logo{ width: 123px; height: 40px; margin-right: 60px; }
#dl header .inner .logos .n_logo:before{ content: ""; width: 123px; height: 27px; }
#dl header .inner .logos .n_logo:after{ content: ""; width: 123px; height: 27px; background-size: 123px auto; top: 9px; }

#dl header .inner .logos .s_logo{ width: 136px; height: 40px; }
#dl header .inner .logos .s_logo:before{ content: ""; width: 136px; height: 40px; }
#dl header .inner .logos .s_logo:after{ content: ""; width: 136px; height: 40px; background-size: 136px auto; }

main{ display: block; }

.sns{ text-align: center; padding-bottom: 70px; background-color: #fff; }
.sns p{ color: #00629d; font-size: 16px; margin-bottom: 32px; }
.sns ul{ width: 178px; margin-left: auto; margin-right: auto; display: flex; }
.sns ul li{ list-style: none; width: 50%; border-left: solid 1px #b2d0e1; }
.sns ul li:first-child{ border: none; }

.sns ul li a{ width: 64px; height: 64px; display: block; overflow: hidden; }
.sns ul li a:before{ content: ""; width: 64px; height: 64px; display: block; }
.sns ul li a.fb{ width: 64px; display: block; background-color: #3e5192; border-radius: 100%; float: left; background-image: url("../img/ico_fb.b8a6a2977450.png"); background-size: 11px 22px; background-position: center; background-repeat: no-repeat; }


.sns ul li a.fb:hover{ background-color: #666; }
.sns ul li a.tw{ width: 64px; display: block; background-color: #1da1f2; border-radius: 100%; float: right; background-image: url("../img/ico_tw.c5dc5df9d977.png"); background-size: 23px 19px; background-position: center; background-repeat: no-repeat; }
.sns ul li a.tw:hover{ background-color: #666; }


footer{ display: block; background-color: #fff; padding-top: 65px; padding-bottom: 65px; text-align: center; position: relative;  z-index: 10; }

footer #pagetop{ display: block; width: 72px; height: 72px; border-radius: 100%;  background-color: #fff; box-shadow: 0px 0px 9.3px 0.7px rgba(0, 0, 0, 0.11); position: absolute; top: 0px; left: calc(50% - 36px); top:-36px; }
footer #pagetop:before{ content: ""; width: 72px; height: 72px; display: block; background-image: url("../img/ico_pagetop.619fee631da9.png"); background-size: 28px 30px; background-position: center; background-repeat: no-repeat; opacity: 1; position: absolute; left: 0px; top: 0px; }

/*
.mode_pc footer #pagetop:hover:before{ content: ""; width: 72px; height: 72px; display: block; background-image: url("../img/ico_pagetop.619fee631da9.png"); background-size: 28px 30px; background-position: center; background-repeat: no-repeat; opacity: 1; position: absolute; left: 0px; top: 0px; }
.mode_pc footer #pagetop:hover:after{ content: ""; width: 72px; height: 72px; display: block; background-image: url("../img/ico_pagetop_over.0c5e70149ac7.png"); background-size: 28px 30px; background-position: center; background-repeat: no-repeat; opacity: 0; position: absolute; left: 0px; top: 0px; }*/

footer #pagetop:hover{ background-color: #63c1a0; }
footer #pagetop:hover:before{ content: ""; width: 72px; height: 72px; display: block; background-image: url("../img/ico_pagetop.619fee631da9.png"); background-size: 28px 30px; background-position: center; background-repeat: no-repeat; opacity: 0; position: absolute; left: 0px; top: 0px; }
footer #pagetop:hover:after{ content: ""; width: 72px; height: 72px; display: block; background-image: url("../img/ico_pagetop_over.0c5e70149ac7.png"); background-size: 28px 30px; background-position: center; background-repeat: no-repeat; opacity: 1; position: absolute; left: 0px; top: 0px; }

footer .n_logo{ width: 84px; height: 18px; overflow: hidden; display: inline-block; margin-bottom: 23px; }
footer .n_logo:before{ content: ""; width: 84px; height: 18px; }
footer .n_logo:after{ content: ""; width: 84px; height: 18px; background-size: 84px auto; }

footer p.copy_right{ color: #666666; }

.sp{ display:none !important; }
.pc{ display:block !important; }

@media (max-width: 1280px) {
    #index header .inner{ background-size: cover; }
    #dl header .inner{ background-size: cover; }
}

@media (max-width: 1000px) {
    .dl{ display: block; width: 160px; height: 160px; }
    .dl a{ display: block; border-radius: 50%; width: 160px; height: 160px; background-color: #444444; box-shadow: 0px 0px 9.3px 0.7px rgba(0, 0, 0, 0.11); text-align: center; }
    .dl a span{ display: table-cell; width: 160px; height: 95px; text-align: center; vertical-align: middle; font-size: 16px; line-height: 1.6em; color: #fff; position: relative; padding-top: 25px; }
    .dl a i{ width: 20px; height: 20px; display: block; background-image: url("../img/ico_defo.a98178354686.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:35px; left: calc(50% - 10px); background-size: 100%; }

    .mode_pc .dl a:hover{ background-color: #ebb32d; }
    .mode_pc .dl a:hover span{ color:#333333; }
    .mode_pc .dl a:hover i:before{ content: ""; display: block; width: 20px; height: 20px; display: block; background-image: url("../img/ico_defo.a98178354686.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 0; background-size: 100%; }
    .mode_pc .dl a:hover i:after{ content: ""; display: block; width: 20px; height: 20px; display: block; background-image: url("../img/ico_defo_over.7a9daf5c5fab.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:0px; left: 0px; opacity: 1; background-size: 100%; }

    .dl a i:after,
    .dl a i:before{ display: none; }

    #index header{ height: 480px; position: relative; z-index: 120; }

    #index header{ height: 480px; background-color: #b0cbe0; display: block; background-image: url("../img/main_sp_bg.2ec6d0ad629f.png"); position: relative; z-index: 120; background-size:auto 480px; }
    #index header .inner{ height: 480px; background-size:contain; background-image: url("../img/main_sp.5a537ad76157.png"); background-position: center; background-color: transparent; background-size: auto 480px; }
    #index header:before{ content: ""; display: block; width: 50%; height: 480px; background-image: url("../img/main_sp_bg2.a8c591d55d5f.png"); position: absolute; right: 0px; top: 0px; background-size: auto 480px; }

    #index header .inner .txt{ padding-left: 18px; padding-top: 18px; }

    #index header .inner .txt h1{ font-size: 40px; line-height: 1.1em; color: #fff; padding-bottom: 0px; position: relative; display: inline-block; padding-right: 45px; margin-bottom: 6px; }
    #index header .inner .txt h1 .base { display: inline-block; }
    #index header .inner .txt h1 .base .w_mask{ display: inline-block; height: 23px !important; }
    #index header .inner .txt h1 .base .b_txt{ display: inline-block; }

    #index header .inner .txt h1 i{ display: inline-block; position: relative; width: 39px; height: 39px; margin-left: 10px; }
    #index header .inner .txt h1 i:before{ content: ""; display: block; width: 39px; height: 39px; position:absolute; right: 0px; top: 1px; background-image: url("../img/Slack_Mark_Monochrome_White.c8e2fd1fa7e6.svg"); background-repeat: no-repeat;  background-size: 100%; }
    #index header .inner .txt p{ font-size: 25px; line-height: 1.4em; color: #fff; }
    #index header .inner .dl{ position: absolute; right: calc(50% - 80px); bottom: -70px; }



    #dl header{ height: 420px; background-color: #b0cbe0; display: block; background-image: url("../img/main_sp_bg2.a8c591d55d5f.png"); position: relative; z-index: 120; background-size:auto 420px; }
    #dl header .inner{ height: 420px; background-image: url("../img/main_sp.5a537ad76157.png"); background-position: center; background-color: transparent; background-size: auto 460px; }
    #dl header:before{ content: ""; display: block; width: 50%; height: 420px; background-image: url("../img/main_sp_bg2.a8c591d55d5f.png"); position: absolute; right: 0px; top: 0px; background-size: auto 420px; }


    #dl header .inner{ height: 480px; background-size: cover; }
    #dl header .inner .txt{ padding-left: 18px; padding-top: 18px; }

    #dl header .inner .txt h1{ font-size: 40px; line-height: 1.1em; color: #fff; padding-bottom: 0px; margin-bottom: 6px; position: relative; display: inline-block; padding-right: 43px; }

    #dl header .inner .txt h1 .base { display: inline-block; }
    #dl header .inner .txt h1 .base .w_mask{ display: inline-block; height: 23px !important; }
    #dl header .inner .txt h1 .base .b_txt{ display: inline-block; }

    #dl header .inner .txt h1 i{ display: inline-block; position: relative; width: 39px; height: 39px; margin-left: 10px; }
    #dl header .inner .txt h1 i:before{ content: ""; display: block; width: 39px; height: 39px; position:absolute; right: 0px; top: 1px; background-image: url("../img/Slack_Mark_Monochrome_White.c8e2fd1fa7e6.svg"); background-repeat: no-repeat;  background-size: 100%; }
	#dl header .inner .txt p{ font-size: 25px; line-height: 1.4em; color: #fff; }

    #dl header .inner .logos{ width: 233px; right: calc(50% - 116px); bottom: 20px; }
    #dl header .inner .logos .n_logo{ width: 90px; height: 20px; margin-right: 0px; }
    #dl header .inner .logos .n_logo:before{ content: ""; width: 90px; height: 20px; }
    #dl header .inner .logos .n_logo:after{ content: ""; width: 90px; height: 20px; background-size: 90px auto; top: 8px; }

    #dl header .inner .logos .s_logo{ width: 100px; height: 28px; float: right; }
    #dl header .inner .logos .s_logo:before{ content: ""; width: 100px; height: 28px; }
    #dl header .inner .logos .s_logo:after{ content: ""; width: 100px; height: 28px; background-size:100%; }

}

@media (max-width: 768px) {

    .dl{ display: block; width: 160px; height: 160px; }
    .dl a{ display: block; border-radius: 50%; width: 160px; height: 160px; background-color: #444444; box-shadow: 0px 0px 9.3px 0.7px rgba(0, 0, 0, 0.11); text-align: center; }
    .dl a span{ display: table-cell; width: 160px; height: 95px; text-align: center; vertical-align: middle; font-size: 16px; line-height: 1.6em; color: #fff; position: relative; padding-top: 25px; }
    .dl a i{ width: 20px; height: 20px; display: block; background-image: url("../img/ico_defo.a98178354686.png"); background-position: center; background-repeat: no-repeat; position: absolute; bottom:35px; left: calc(50% - 10px); background-size: 100%; }

    .dl a i:after,
    .dl a i:before{ display: none; }

    #index header{ height: 450px; position: relative; z-index: 120; }
    #index header .inner{ height: 450px; background-size: cover; }
    #index header:before{ content: ""; display: block; width: 50%; height: 450px; background-image: url("../img/main_bg2.d63fa512931d.png"); position: absolute; right: 0px; top: 0px; background-size: 450px auto; }
    #index header .inner .txt{ padding-left: 18px; padding-top: 18px; }

    #index header .inner .txt h1{ font-size: 22px; line-height: 1.1em; color: #fff; padding-bottom: 0px; margin-bottom: 6px; position: relative; display: inline-block; padding-right: 45px; }
    #index header .inner .txt h1 .base { display: inline-block; }
    #index header .inner .txt h1 .base .w_mask{ display: inline-block; height: 23px !important; }
    #index header .inner .txt h1 .base .b_txt{ display: inline-block; }


    #index header .inner .txt h1 i{ display: inline-block; position: relative; width: 22px; height: 22px; margin-left: 10px; }
    #index header .inner .txt h1 i:before{ content: ""; display: block; width: 22px; height: 22px; position:absolute; right: 0px; top: 2px; background-image: url("../img/Slack_Mark_Monochrome_White.c8e2fd1fa7e6.svg"); background-repeat: no-repeat;  background-size: 100%; }
	#index header .inner .txt p{ font-size: 16px; line-height: 1.4em; color: #fff; }
    #index header .inner .dl{ position: absolute; right: calc(50% - 80px); bottom: -80px; }

    #dl header{ height: 420px; position: relative; z-index: 120; }
    #dl header:before{ content: ""; display: block; width: 50%; height: 420px; background-image: url("../img/dl_main_bg2.f2bb0d1c255c.png"); position: absolute; right: 0px; top: 0px; background-size: 420px auto; }
    #dl header .inner{ height: 420px; background-size: cover; }
    #dl header .inner .txt{ padding-left: 18px; padding-top: 18px; }

    #dl header .inner .txt h1{ font-size: 22px; line-height: 1.1em; color: #fff; padding-bottom: 0px;margin-bottom: 6px;  position: relative; display: inline-block; padding-right: 43px; }

    #dl header .inner .txt h1 .base { display: inline-block; }
    #dl header .inner .txt h1 .base .w_mask{ display: inline-block; height: 23px !important; }
    #dl header .inner .txt h1 .base .b_txt{ display: inline-block; }

    #dl header .inner .txt h1 i{ display: inline-block; position: relative; width: 22px; height: 22px; margin-left: 10px; }
    #dl header .inner .txt h1 i:before{ content: ""; display: block; width: 22px; height: 22px; position:absolute; right: 0px; top: 2px; background-image: url("../img/Slack_Mark_Monochrome_White.c8e2fd1fa7e6.svg"); background-repeat: no-repeat;  background-size: 100%; }
	#dl header .inner .txt p{ font-size: 16px; line-height: 1.4em; color: #fff; }

    #dl header .inner .logos{ width: 233px; right: calc(50% - 116px); bottom: 20px; }
    #dl header .inner .logos .n_logo{ width: 90px; height: 20px; margin-right: 0px; }
    #dl header .inner .logos .n_logo:before{ content: ""; width: 90px; height: 20px; }
    #dl header .inner .logos .n_logo:after{ content: ""; width: 90px; height: 20px; background-size: 90px auto; top: 8px; }

    #dl header .inner .logos .s_logo{ width: 100px; height: 28px; float: right; }
    #dl header .inner .logos .s_logo:before{ content: ""; width: 100px; height: 28px; }
    #dl header .inner .logos .s_logo:after{ content: ""; width: 100px; height: 28px; background-size:100%; }


    .sns{ padding-bottom: 80px; }
    .sns p{ font-size: 14px; width: 125px; margin-left: auto; margin-right: auto; }
    .sns ul{ width: 125px; margin-left: auto; margin-right: auto; }
    .sns ul li a{ width: 45px; height: 45px; display: block; overflow: hidden; }
    .sns ul li a:before{ content: ""; width: 45px; height: 45px; display: block; }
    .sns ul li a.fb{ width: 45px; display: block; background-color: #3e5192; border-radius: 100%; float: left; background-image: url("../img/ico_fb.b8a6a2977450.png"); background-position: center; background-repeat: no-repeat; background-size: 10px auto; }
    .sns ul li a.tw{ width: 45px; display: block; background-color: #1da1f2; border-radius: 100%; float: right; background-image: url("../img/ico_tw.c5dc5df9d977.png"); background-position: center; background-repeat: no-repeat; background-size: 20px auto; }

    footer #pagetop:hover{ background-color: #fff; }
    footer #pagetop:hover:before{ content: ""; width: 48px; height: 48px; display: block; background-image: url("../img/ico_pagetop.619fee631da9.png"); background-size: 20px auto; background-position: center; background-repeat: no-repeat; opacity: 1; position: absolute; left: 0px; top: 0px; }
    footer #pagetop:hover:after{ content: ""; width: 48px; height: 48px; display: none; background-image: url("../img/ico_pagetop_over.0c5e70149ac7.png"); background-size: 20px auto; background-position: center; background-repeat: no-repeat; opacity: 0; position: absolute; left: 0px; top: 0px; }

    footer p.copy_right{ font-size: 12px; }
    footer{ padding-top: 50px; padding-bottom: 35px; }
    footer .n_logo{ margin-bottom: 8px; }
    footer #pagetop{ width: 48px; height: 48px; left: calc(50% - 24px); top: -24px; }
    footer #pagetop:before{ width: 48px; height: 48px; background-size: 20px auto; }
    footer #pagetop:after{ opacity: 0; display: none; }
}

@media (max-width: 640px) {
    .sns{ padding-bottom: 40px; }
}

@media (max-width: 320px) {

}