@charset "utf-8";

@import "../common/css/colorbox.css";

#footer {
    display: none;
}

#op {
    display: none;
}


/*-----------------------------------------------------------------------------------------
common
-----------------------------------------------------------------------------------------*/
html,
body {
    min-height: 100%;
    height: auto !important;
}

body {
    min-width: 1000px;
    background: none;
    background-color: #fff;
}

#contents.top {
    position: relative;
    width: 100%;
    min-width: 1000px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
#container{
    overflow-x: hidden;
}

#contents,
#colorbox {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* @group nav ------------------------------------------------------- */
#nav {
    width: 100%;
    min-width: 1000px;
    height: 58px;
    margin: 0 auto;
    border-bottom: 1px solid #fff;
    background-color: #082b67;
}

#nav nav {
    padding-top: 4px;
}

#nav nav ul {
    width: 1000px;
    min-width: 1000px;
    max-width: 1000px;
    height: 50px;
    margin: 0 auto;
    background: url(../img/nav_line_01.png) no-repeat center center;
}

#nav nav ul li {
    display: inline-block;
    width: 25%;
    height: 50px;
    padding-left: 0;
    background: none;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#nav nav ul li a {
    display: block;
    width: 100%;
    height: 100%;
}

#nav.fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 500;
}

#aside {
    position: fixed;
    right: 0;
    top: 50%;
    margin-top: -138px;
    z-index: 9;
}

#aside ul {
    position: relative;
    border-bottom: 2px solid #fff;
}


/*-----------------------------------------------------------------------------------------
#mainVisualArea
-----------------------------------------------------------------------------------------*/
#mainVisualArea {
    /* background: url(/safety/img/mainVisual.jpg) no-repeat center; */
    /* background-size: cover; */
    position: relative;
}


#mainVisual {
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: url(/safety/img/mainVisual.jpg?1028);
    background-size: cover;
    background-position: right 45%;
    min-width: 1000px;
}
#mainVisual.starlink{ background-image: url(/safety/starlink/img/mainVisual.jpg); background-size: cover; }
#mainVisual.eyesight{ background-image: url(/safety/eyesight/img/mainimg2.jpg); background-size: cover; background-position: center center;}
#mainVisual.why{ background-image: url(/safety/why/img/mainimg.jpg); background-size: cover; }

.bgfixed #mainVisual {
    position: fixed;
    z-index: 0;
}

#eyesightVisual{
    position: relative;
    height: 800px;
    overflow: hidden;
    background-color: #000;
}
#eyesightVisual > div{  }
#eyesightVisual .img{
    position: absolute;
    left: 50%;
    margin-left: -1000px;
}
#eyesightVisual .ttl{  position: relative; width: 848px; margin: 100px auto 0; text-align: left; z-index: 2; opacity: 0; transform: translateY(-30px); }
#eyesightVisual .txt{ position: relative; max-width: 1160px; width: 90%; margin: 75px auto 0; text-align: right; z-index: 2; opacity: 0; transform: translateY(0); }
#eyesightVisual .txt img{ width: 44%; }
#eyesightVisual .bnr{ position: relative; width: 90%; max-width: 1400px; margin: 45px auto 0; text-align: center; opacity: 0; transform: translateY(-30px); z-index: 2; }
#eyesightVisual .bnr img{ max-width: 100%; height: auto; }

#eyesightVisual.on .ttl{ transition: all .8s; transform: translateY(0); opacity: 1;}
#eyesightVisual.on .txt{ transition: all .8s .5s; transform: translateY(0); opacity: 1; }
#eyesightVisual.on .bnr{ transition: all .8s 1.5s; transform: translateY(0); opacity: 1; }

#eyesightVisual .txt a:before,#eyesightVisual .bnr a:before{ content: ""; position: absolute; top: calc(50% - 20px); width: 30px;
height:30px;
box-sizing: border-box;
border: 2px solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(-315deg);
right: 35px;
transition: .3s; }
#eyesightVisual .txt a:before{ right: -35px; }

#eyesightVisual .txt a:hover:before,#eyesightVisual .bnr a:hover:before{ top: calc(50% - 10px); }
#eyesightVisual .txt a,#eyesightVisual .bnr a{ transition: .3s; }
#eyesightVisual .txt a:hover,#eyesightVisual .bnr a:hover{ opacity: .7; }

#eyesightVisual + .anno{ margin: 10px 20px 0 0; padding-bottom: 10px; text-align: right; }
#eyesightVisual .ctext{ position: absolute; z-index: 2; right: 10px; bottom: 10px; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.8); }

@media screen and (max-width: 1680px) {
    #eyesightVisual .img{
    width: 110%;
    left: -5%;
    margin-left: 0;
    }
    #eyesightVisual .img img{ max-width: 100%; height: auto; } 
    #eyesightVisual .ttl { margin-top: 6%; }
}
@media screen and (max-width: 1240px) {
#eyesightVisual{  height: 700px; }
}


#whyVisual{
    position: relative;
    height: 850px;
    overflow: hidden;
}
#whyVisual .img{
    position: absolute;
    left: 50%;
    margin-left: -1000px;
}
#whyVisual .ttl{position: relative;width: 1100px;width: 85%;margin: 60px auto 0;text-align: left;z-index: 2;opacity: 0;transform: translateY(-30px);}
#whyVisual .ttl img{ display: block; margin-left: 15px; }
#whyVisual .txt{position: relative;width: 1100px;width: 85%;margin: -70px auto 0;text-align: left;z-index: 2;opacity: 0;transform: translateY(0);}
#whyVisual .shadow{ position: absolute; left: 0; top: 0; z-index: 1; }

#whyVisual.on .ttl{ transition: all .8s; transform: translateY(0); opacity: 1;}
#whyVisual.on .txt{ transition: all .8s 1s; transform: translateY(0); opacity: 1; }


#eyesightGraph{ padding: 150px 0; }
#eyesightGraph .text {
    text-align: center;
    font-size: 28px;
    line-height: 1.9;
    margin-bottom: 50px;
    opacity: 0;
    transition: .5s;
    transform: translateY(30px);
    letter-spacing: 0.2em;
}
#eyesightGraph .text.on {
    transform: translateY(0);
    opacity: 1
}
#eyesightGraph .text + .img {
    display: block;
    width: 800px;
    margin: auto;
}
#eyesightGraph .text + .img img { display: block; margin: 0 auto; }
#eyesightGraph .text + .img > div {
    transform: translateY(30px);
    opacity: 0;
    
}
#eyesightGraph .text + .img > div.on {
    transform: translateY(0);
    opacity: 1;
    transition: .5s;
}
#eyesightGraph .text + .img .incidence{ font-size: 34px; text-align: center; letter-spacing: 0.05em; background-color: #eff4f5; margin: 50px 0 40px; padding: 40px 0; color: #000; line-height: 2em;}
#eyesightGraph .text + .img .incidence span.par{ font-size: 130%; color: #00afe9; vertical-align: bottom; padding-bottom: 5px; }
#eyesightGraph .text + .img .incidence sup{ vertical-align: top; font-size: 35%; margin-top: -.9em; display: inline-block; }

span.roulette{ width: 60px; height: 70px; display: inline-block; background: url(/safety/eyesight/img/num2.png) repeat-y; background-size: cover; vertical-align: top; margin-bottom: 5px; font-size:0; transition-timing-function: cubic-bezier(0.36, 0.71, 0, 1); transition-property: background; background-position-y: 222%; }
span.roulette.type1{ background: url(/safety/eyesight/img/num1.png) repeat-y; background-size: cover; transition-duration: 2.4s; transition-delay:.6s; background-position-y: 222%; }
span.roulette.type2{ transition-duration: 2.2s; transition-delay:.8s; }
span.roulette.type3{ transition-duration: 2s; transition-delay:1s; margin-left: -5px; }

.on .roulette.num0.type1 { background-position-y: 100%; }
.on .roulette.num0.type2 { background-position-y: 111%; }
.on .roulette.num6.type3 { background-position-y: 66.5%; }

/*
.end #mainVisual {
position: absolute;
bottom: 0;
top: auto;
}*/

#mainVisual #mvFilter {
    width: 100%;
    height: 100%;
    transition: 1s background-color;
}

#mainVisualArea.white #mvFilter {
    background-color: rgba(255, 255, 255, .9)
}

#mainVisualArea.blue #mvFilter {
    background-color: rgba(0, 91, 172, .8)
}

#mvScene01 {
    position: relative;
    width: 100%;
    min-width: 1000px;
    height: 100vh;
    top: 0;
    margin-bottom: 25vh;
}

#mvScene02 {
    width: 100%;
    min-width: 1000px;
    /* min-height: 100vh; */
    /* background-color: rgba(255, 255, 255, .9); */
    /* padding: 120px 0; */
    position: relative;
    text-align: center;
    margin-bottom: 25vh;
    transition: 0.5s;
    /* height: 120vh; */
    opacity: 0;
    padding-top: 0vh;
}
.white:not(.blue) #mvScene02 {
    opacity: 1;
    /* transition-delay: .5s; */
}
.blue #mvScene02 {
    opacity: 0;
    transition-delay: 0s;
}
#mvScene02 .text {
    /* text-align: center; */
    font-size: 28px;
    line-height: 1.9;
    margin-bottom: 60px;
    opacity: 0;
    transition: .5s;
    transform: translateY(30px);
    letter-spacing: 0.1em;
}

#mvScene02 .text.on {
    transform: translateY(0);
    opacity: 1
}
#mvScene02 .text + img, #mvScene02 .anno + img{
    display: block;
    margin: auto;
    opacity: 0;
    transition: .5s;
    transform: translateY(30px);
}
#mvScene02 .text + img.on,#mvScene02 .anno + img.on {
    transform: translateY(0);
    opacity: 1
}
#mvScene02 .text.blue { color: #02519e; font-weight:bold; }
#mvScene02 .text.blue b{ font-size:110%; }
#mvScene02 .text .blue {
    color: #02519e;
    font-weight: bold;
    display: inline-block;
    position: relative;
}
#mvScene02 .text .blue:before{
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #02519e;
}
#mvScene02 .anno {
    margin: 48px auto 0;
    font-size: 14px;
    text-align: left;
    width: 780px;
}
#mvScene02 .jn-car li{
display: inline-block;
margin: 20px;
}
#mvScene02 .jn-car li.wid{ display: block; margin: 0 auto; }
#mvScene02 .jn-car{
    opacity: 0;
    transition: .5s;
    transform: translateY(30px);
}
#mvScene02 .jn-car.on{
    transform: translateY(0);
    opacity: 1
}

#mvScene03 {
    width: 100%;
    min-width: 1000px;
    /* background-color: rgba(0, 91, 172, .8); */
    /* min-height: 100vh; */
    padding: 0px 0 35vh;
    position: relative;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    opacity: 0;
    transition: .5s;
}
.blue #mvScene03 {
    opacity: 1;
}

.end #mvScene03 {
    opacity: 0;
}
#mvScene03 .body {
    /*     opacity: 0;
    transition: .5s; */
}

#mvScene03 .ttl {
    text-align: center;
    margin-bottom: 60px;
    transition: .5s;
    transform: translateY(30px);
    opacity: 0;
}
#mvScene03 .ttl.on {
    transform: translateY(0);
    opacity: 1;
}

#mvScene03 .text {
    color: #fff;
    font-size: 22px;
    max-width: 830px;
    margin: auto;
    line-height: 2.45;
    opacity: 0;
    transition: .5s;
    transform: translateY(30px);
    letter-spacing: 0.1em;
}
#mvScene03.starlink .text {  font-size: 30px; letter-spacing: 0.2em; text-align: center; line-height: 1.8; }
#mvScene03.eyesight .text {  font-size: 26px; letter-spacing: 0.2em; text-align: center; line-height: 1.8; max-width: 1000px; }
#mvScene03.eyesight .text span{ font-size: 18px; letter-spacing: 0.1em; }

#mvScene03 .text.on {
    transform: translateY(0);
    opacity: 1;
}
/*-----------------------------------------------------------------------------------------
scene01
-----------------------------------------------------------------------------------------*/

#contArea{ position: relative; z-index: 1; }

.soa{ max-width:840px; margin:4em auto; }
.soa_tit{ font-size:28px; font-weight:bold; line-height:1.8; letter-spacing:0.1em; border:1px solid #aaa; padding:1.2em 0; border-width:1px 0; margin-bottom:2em; opacity:0; transition:.5s; transform: translateY(1em); }
.soa_tit.on,.soa_mov li.on{ transform: translateY(0); opacity: 1; }
.soa_tit h3{ font-weight:bold; margin-bottom:.3em; }
.soa_tit p{ font-size:80%; color:#02519e; }
.soa_mov{  }
.soa_mov li{ text-align:left; opacity:0; margin-top: 4em; transition:.5s; transform: translateY(1em); }
.soa_mov li .soa_mov_video { display: block; width: 100%; aspect-ratio: 16/9; border: none; }
.soa_mov li .bc_modal_movie { transition:.5s; }
.soa_mov li .bc_modal_movie:hover{ filter:saturate(110%) brightness(1.3); }
.soa_mov h3{ font-size:20px; margin-bottom:.3em; font-weight:bold; }
.soa_mov p{ font-size:120%; margin-top:1em; line-height:1.6; }
#mvScene02 .soa .anno { width:1000px; }

.josha{ opacity: 0; transition: .5s; text-align:center; }
.josha.on{ opacity: 1; }
.josha a{ background-color:#d97947; color: #fff; max-width:600px; margin: 4em auto; display:block; padding:1em 0; text-decoration:none; font-size:24px; border-radius:100px; position:relative; transition:.3s; }
.josha a:before{ content:"→"; position:absolute; right:1em; top:calc(50% - .5em); line-height:1; font-weight:bold; transition:.3s; }
.josha a:hover{ background-color:#f1a942; }
.josha a:hover:before{ right:.5em;  }

#scene01 .body {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 100;
    width: 1000px;
    height: 100%;
    margin-left: -500px;
}

#scene01 .ttl {
    z-index: 9;
    width: 100%;
    min-width: 1000px;
    background: #005BAC;
    text-align: center;
}

#scene01 .ttl h1 {
    padding: 40px 0;
}

#scene01 .body .logo {
    position: absolute;
    left: 0;
    top: 25px;
}

#scene01 .body .anc {
    position: absolute;
    left: 0;
    top: 90px;
}

#scene01 .mainVisual {
    min-height: 350px;
}

.mainVisual img {
    width: 100%;
    height: auto;
}

.mainVisualtxt {
    position: absolute;
    left: 5%;
    top: 50%;
    width: 1000px;
    /* margin-left: -670px; */
    /* margin-top: -150px; */
    transition: 1s
}
.white .mainVisualtxt {
    opacity: 0;
}
/* @group sns -------------------------------------------------- */
#scene01 .sns {
    position: absolute;
    right: 0;
    top: -40px;
}

#scene01 .sns li {
    display: inline-block;
    padding-left: 10px;
    vertical-align: top;
    overflow: hidden;
}

#scene01 .sns li:first-child {
    padding-left: 0;
}

/* @group movie -------------------------------------------------- */




/*-----------------------------------------------------------------------------------------
funcArea
-----------------------------------------------------------------------------------------*/
#funcArea {
    background: #005bac;
    padding-top: 100px;
}
#funcList {
    width: 100%;
    padding: 20px 0 180px;
    background: #005bac;
}
#funcList ul{
    max-width: 1200px;
    margin: auto;
}

#funcList li {
    display: flex;
    margin-bottom: 70px;
    opacity: 0;
    transform: translateX(100px);
}
#funcList li.on{ opacity: 1; transform: translateX(0); transition: 0.6s cubic-bezier(0.33, 1, 0.68, 1); }

#funcList li:last-child {
    margin-bottom: 0;
}

#funcList li .img {
    width: 50%;
}

#funcList li .img img {
    width: 120%;
}
#funcList li .textArea + .img{ transform: translateX(-100px); }
#funcList li .textArea {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;
    flex-direction:row;
    width: 50%;
    z-index: 1;
    max-width:100%;
    box-sizing:border-box;
}
#funcList li .textArea > div{
    background: #fff;
    padding: 60px 40px;
    box-sizing:border-box;
}

#funcList li .textArea .ttlImg {
    margin-bottom: 15px;
    /* padding: 0 50px; */
}

#funcList li .textArea .ttlImg img {
    width: 100%;
    max-width: 500px;
}

#funcList li .textArea .text {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

#funcMsg{ background: #1669b3; padding: 120px 0; }
#funcMsg > div{ width: 800px; margin: 0 auto; }
#funcMsg .link{ height: 100px; margin-top: 60px;  }
#funcMsg .link a{ font-size: 24px; }
#funcMsg .anno{ color: #fff; margin-top: 30px; line-height: 1.8; }

#funcMsg.eyesight > div{ width: 1000px; margin: 0 auto; }

/*-----------------------------------------------------------------------------------------
safeArea
-----------------------------------------------------------------------------------------*/
#safeArea {
    background: #005bac;
     padding: 150px 0; 
}

#safeArea>.lead {
    text-align: left;
    opacity: 0;
    transform: translateY(30px);
    transition: 1s;
    width: 1200px;
    margin: 0 auto 60px;
}
#safeArea>.lead.on {
    opacity: 1;
    transform: translateY(0)
}
#safeArea .safeImgArea {
    width: 870px;
    margin: 0 auto 110px;
    position: relative;
    overflow: hidden;
}

#safeArea .safeImgArea p.img {
    border-radius: 360px;
    float: left;
    overflow: hidden;
    opacity: 0;
    /* transform: translateY(30px); */
    transition: 0.5s;
}

#safeArea .safeImgArea.on .img {
    opacity: 1
} 
#safeArea .safeImgArea p.img:last-child {
    transition-delay: 0.5s;
    float: right;
}
#safeArea .safeImgArea .img a {
    background: #fff;
    display: block
}

#safeArea .safeImgArea .img a img {
    transition: .25s
}

#safeArea .safeImgArea .img a:hover img {
    opacity: .9
}

#safeArea .safeImgArea:before,
#safeArea .safeImgArea:after {
    content: "";
    width: 60px;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -2px;
    margin-left: -30px;
    opacity: 0;
    transition: 0.5s;
    transition-delay: .25s;
}

#safeArea .safeImgArea.on:before,
#safeArea .safeImgArea.on:after {
    opacity: 1
}
#safeArea .safeImgArea:after {
    transform: rotate(-90deg);
}

#safeArea>.text {
    text-align: center;
    color: #fff;
    font-size: 28px;
    line-height: 1.9;
    margin: 0 auto 95px;
    letter-spacing: 0.2em;
    width: 100%;
    max-width: 1000px;
    opacity: 0;
    transform: translateY(30px);
    transition: 1s;
}

#safeArea>.text.on {
    opacity: 1;
    transform:translateY(0)
}
#safeArea>.text .dilb {
    display: inline-block;
    font-size: 22px;
    width: 100%;
    line-height: 2.2;
}

#safeArea>.text .tal {
    text-align: left;
}

#safeLinkList {
    margin: auto;
    max-width: 1200px;
    width: 100%;
    padding: 20px 0 180px;
}

#safeLinkList li {
    display: flex;
    margin-bottom: 50px;
    background-color: #fff;
    opacity: 0;
    transform: translateX(100px);
}
#safeLinkList li.on{ opacity: 1; transform: translateX(0); transition: 0.6s cubic-bezier(0.33, 1, 0.68, 1); }

#safeLinkList li.new {
    background: #fff url(/safety/img/new_label.png) no-repeat right top;
}
#safeLinkList li:last-child {
    margin-bottom: 0
}

#safeLinkList li .img {
    width: 50%
}

#safeLinkList li .img img {
    width: 100%
}

#safeLinkList li .textArea {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    width: 50%;
}

#safeLinkList li .textArea .ttlImg {
    padding: 45px 50px 30px;
    padding: 5% 7% 5%;
    align-self: flex-start;
    /* padding: 0 50px; */
}

#safeLinkList li .textArea .ttlImg img {
    width: 100%;
    max-width: 500px;
}

#safeLinkList li .textArea .text {
    padding: 0 40px;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

#safeLinkList li .textArea .link {
    display: flex;
    margin-top: auto;
    height: 60px;
}

#safeLinkList li .textArea .text .anno{ display: block; font-size: 10px; letter-spacing: 0; }

/*-----------------------------------------------------------------------------------------
safeArea
-----------------------------------------------------------------------------------------*/
#innovArea {
    background: #005bac;
    padding: 10px 0;
}

#innovArea>.lead {
    text-align: left;
    opacity: 0;
    transform: translateY(30px);
    transition: 1s;
    width: 1000px;
    margin: 140px auto 60px;
}
#innovArea>.lead.on {
    opacity: 1;
    transform: translateY(0)
}
#innovArea>.text {
    text-align: left;
    color: #fff;
    font-size: 22px;
    line-height: 2.2;
    margin: 0 auto 60px;
    letter-spacing: 0.2em;
    width: 100%;
    max-width: 1000px;
    opacity: 0;
    transform: translateY(30px);
    transition: 1s;
}

#innovArea>.text.on {
    opacity: 1;
    transform:translateY(0)
}
#innovArea>.text span {
    font-size: 18px;
}

.innov_mov{ width: 1000px; margin: 0 auto 80px; }

h2.innovTtl{ max-width: 1000px; font-weight: bold; font-size: 26px; padding: 5px 0; color: #fff; background-color: rgba(255,255,255,0.2); text-align: center; margin:  0 auto 50px; letter-spacing: 0.2em; }

#innovList{ width: 1000px; margin: 0 auto; }
#innovList li{ overflow: hidden; position: relative; padding: 30px 0;  }
#innovList li .img{ padding: 10px 10px 10px 0; background-color: #005bac; width: 560px; position: relative; z-index: 1; }
#innovList li .img img{ max-width: 100%; height: auto; }
#innovList li .img:before{ content: ""; width: 100%; height: 100%; background-color: #005bac; top: 0; left: 0; z-index: 2; position: absolute; }
#innovList li.on .img:before{ width: 0; left: 100%; transition: 0.6s cubic-bezier(0.33, 1, 0.68, 1);  }
#innovList li .textArea{ width: 560px; position: absolute; right: 10px; top: 0; opacity: 0; }
#innovList li.on .textArea{ transition: 1s .6s;  opacity: 1; }
#innovList li .textArea > div{ padding: 40px 30px 40px 150px; border: 2px solid #fff; }
#innovList li .textArea .text{ color: #fff; font-size: 16px; letter-spacing: 0.05em; margin-top: 15px; line-height: 2;  }
#innovList li .textArea .text span{ display: block; font-size: 10px; }
#innovList li.R .img{ float: right; padding: 10px 0 10px 10px; }
#innovList li.R .img:before{ left: auto; right: 0; }
#innovList li.R.on .img:before{ right: 100%;  }
#innovList li.R .textArea{ right: auto; left: 10px; }
#innovList li.R .textArea > div{ padding: 40px 150px 40px 30px; }
#innovList li.B .textArea{ top: auto; bottom: 0; }

#innovList .link a{ width: 800px; margin: 0 auto; height: 100px; font-size: 24px; letter-spacing: 0.1em; }

#innovArea .other{ width: 1000px; margin: 150px 0; text-align: center; }



.link a {
    background: #082b67;
    color: #fff;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    padding: 0 25px;
    transition: .25s background-color;
}
.link a span{ position: relative; z-index: 1; }
.link a:not(.bc_modal_movie):not(.inLink):after {
    content: "";
    width: 11px;
    height: 8px;
    background: url(/safety/common/img/header_outlink_icon_white.png) no-repeat;
    box-sizing: border-box;
    position: absolute;
    right: 12px;
    top: 10px;
}
.link a.bc_modal_movie:after { background-position: right; background-size: 100px auto; }
.link a:before { content: ""; position: absolute; background-color: #00a0dc; width: 0; height: 100%; left: 0; top: 0; transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1); z-index: 0;  }
.link a:hover:before {
    width: 100%;
}
.link a.inLink:before { background: #00c6ff; }

.link a.inLink {
    background: #00a0dc;
    padding: 0 20px;
}

.link a.inLink:hover {

}

.link a.inLink:after {
    content: "";
    width: 18px;
    height: 18px;
    background: none;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .5);
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -9px;
    transition: .25s right
}

.link a.inLink:hover:after {
    right: 9px
}

#safeLinkList li .textArea .link.col2 a {
    width: 50%;
    box-sizing: border-box;
}

/*-----------------------------------------------------------------------------------------
scene03
-----------------------------------------------------------------------------------------*/


#scene03 .body {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding-top: 70px;
    padding-bottom: 70px;
}

#scene03 .body .ttl {
    text-align: center;
}

#scene03 .body .txt {
    text-align: center;
    font-size: 22px;
    color: #fff;
    margin-top: 20px;
    line-height: 1.8;
}

#timeline {
    position: relative;
    width: 860px;
    height: 920px;
    margin: 70px auto 45px;
}

#timeline .mov {}

#timeline .mov li {
    margin-top: 119px;
}

#timeline .mov li:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -11px;
}

#timeline .mov li.odd:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11.5px 0 11.5px 29px;
    border-color: transparent transparent transparent #c5dff7;
    left: 100%
}

#timeline .mov li.even:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11.5px 29px 11.5px 0;
    border-color: transparent #c5dff7 transparent transparent;
    right: 100%
}

#timeline .mov li.odd {
    float: left;
}

#timeline .mov li.even {
    float: right;
}

#timeline .mov li:first-child {
    margin-top: 12px;
}

#timeline ul.mov>*:first-child+* {
    margin-top: 153px;
}

#timeline .mov li {
    position: relative;
    width: 307px;
    height: 169px;
    background: #c5dff7;
}

#timeline .mov li a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#timeline .mov li .preview {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 297px;
    height: 159px;
    background-repeat: no-repeat;
    background-position: left top;
    cursor: pointer;
    background-color: #000;
}

#timeline .mov li.mov1965 .preview {
    background-image: url(../img/scene03_bg_01.png);
}

#timeline .mov li.mov1970 .preview {
    background-image: url(../img/scene03_bg_02.png);
    left: 5px;
}

#timeline .mov li.mov1980 .preview {
    background-image: url(../img/scene03_bg_03.png);
}

#timeline .mov li.mov1990 .preview {
    background-image: url(../img/scene03_bg_04.png);
    left: 5px;
}

#timeline .mov li.mov2010 .preview {
    background-image: url(../img/scene03_bg_05.png);
}

#timeline .year {
    position: absolute;
    left: 349px;
    top: 0;
    width: 156px;
    text-align: center;
}

#timeline .year li {
    margin-top: 31px;
    padding-bottom: 64px;
    /* background: url(../img/scene03_scroll_01.png) no-repeat center bottom; */
    position: relative;
}

#timeline .year li:not(.year2030) {
    width: 140px;
    margin: 31px auto 0;
}
#timeline .year li:not(.year2030):after {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    background: #fff;
    bottom: 0;
    left: 50%;
    position: absolute
}

#timeline .year li:first-child {
    margin-top: 5px;
}

#timeline .year li.last {
    padding-bottom: 0;
    /* background: url(../img/scene03_scroll_02.png) no-repeat center bottom; */
}

#timeline .year li span img {
    visibility: hidden;
}

#timeline .year li span {
    display: block;
    background-repeat: no-repeat;
    background-position: left top;
}

#timeline .year li.year1965 span {
    background-image: url(../img/year_1965.png)
}

#timeline .year li.year1970 span {
    background-image: url(../img/year_1970.png)
}

#timeline .year li.year1980 span {
    background-image: url(../img/year_1980.png)
}

#timeline .year li.year1990 span {
    background-image: url(../img/year_1990.png)
}

#timeline .year li.year2000 span {
    background-image: url(../img/year_2000.png)
}

#timeline .year li.year2010 span {
    background-image: url(../img/year_2010.png)
}

#timeline .year li.year2030 span {
    /* background-image: url(../img/year_2030.png); */
    transition: .5s;
}

#timeline .year li.on span img {
    visibility: visible;
}
#timeline .year li.year2030 img {
    opacity: 0;
    transition: .5s
}
#timeline .year li.year2030.on img {
    opacity: 1;
}
#timeline .year li.on span {
    background: none;
}
.timelineText {
    margin: auto;
    width: 860px;
}
.timelineText .lead {
    margin-bottom: 30px;
    opacity: 0;
    transition: 1s;
    transform: translateY(30px);
}
.timelineText .anno {
    font-size: 14px;
    color: #fff;
    line-height: 1.6;
    opacity: 0;
    transition: 1s;
    /*     transition-delay: .25s; */
    transform: translateY(30px);
}
.timelineText.on .lead,
.timelineText.on .anno {
    opacity: 1;
    transform: translateY(0px);
} 
#scene03 .catch {
    background-color: #fff;
    border-top: 8px solid #d6c201;
    text-align: center;
}


/*-----------------------------------------------------------------------------------------
world
-----------------------------------------------------------------------------------------*/
#world {
    padding: 120px 0 150px;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

#world .ttl {
    text-align: center;
    margin-bottom: 28px;
}

#world .lead {
    text-align: center;
    font-size: 18px;
    margin-bottom: 55px;
    letter-spacing: 0.2em;
}

#world .worldMap {
    max-width: 1200px;
    margin: 0 auto 32px;
    position: relative;
    width: 100%;
}
#world .worldMap > img {
    width: 100%;
}
#world .worldMap li {
    position: absolute;
    width: 17%;
    /* height: 80px; */
    max-width: 200px;
    transition: .75s;
    transform: translateY(20px);
    opacity: 0;
}

#world .worldMap li#img01 {transition-delay: 0s;}
#world .worldMap li#img02 {transition-delay: 0.2s;}
#world .worldMap li#img03 {transition-delay: 0.4s;}
#world .worldMap li#img04 {transition-delay: 0.6s;}
#world .worldMap li#img05 {transition-delay: 0.8s;}
#world .worldMap.on li {
    transform: translateY(0);
    opacity: 1;
}
#world .worldMap li img {
    width: 100%;
}

#world .worldMap li#img01 {
    left: 38.6%;
    top: 27.3%;
}

#world .worldMap li#img02 {
    left: 4.5%;
    top: 19.3%;
}

#world .worldMap li#img03 {
    left: 35%;
    top: 69.4%;
}

#world .worldMap li#img04 {
    right: 9.6%;
    top: 5%;
}

#world .worldMap li#img05 {
    right: 9.6%;
    top: 26%;
}

#world p.link {
    max-width: 480px;
    height: 80px;
    margin: auto
}

#world p.link a {
    font-size: 20px;
    box-sizing: border-box;
}


/*-----------------------------------------------------------------------------------------
scene04
-----------------------------------------------------------------------------------------*/
#scene04 {
    width: 100%;
    min-width: 1000px;
    background-color: #fff;
}

#scene04 .body {
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 75px;
}

#scene04 .body .rank {
    padding-top: 75px;
}

#scene04 .body .ttl {}

#scene04 .body .rank .frame {
    width: 880px;
    height: auto;
    min-height: 200px;
    margin: 30px auto 0 auto;
    background: url(../img/rank_bg_01.png) no-repeat center top;
}

#scene04 .body .rank .frame dl {
    width: 750px;
    margin: 0 auto;
}

#scene04 .body .rank .frame dl dt,
#scene04 .body .rank .frame dl dd {
    margin-top: 15px;
}

#scene04 .body .rank .frame dl dd .list {
    text-align: center;
}

#scene04 .body .rank .frame dl dd .list li {
    display: inline-block;
    vertical-align: top;
}

#scene04 .body .rank .frame dl .note {
    margin-top: 20px;
}


/*-----------------------------------------------------------------------------------------
scene05
-----------------------------------------------------------------------------------------*/
#scene05 {
    width: 100%;
    min-width: 1000px;
    background-color: #005bac;
}

#scene05 .body {
    width: 1000px;
    margin: 0 auto;
    padding-top: 70px;
    padding-bottom: 70px;
}

#scene05 .body .ttl {
    text-align: center;
}

#scene05 .body .lead {
    margin: 50px auto 0;
    width: 880px;
}

#scene05 .body .lead .img {
    float: left;
}

#scene05 .body .lead p {
    float: right;
    width: 580px;
    color: #fff;
    font-size: 17px;
    margin-bottom: 1em;
    line-height: 1.8em;
}

#scene05 .body .nav_local {
    padding-top: 30px;
    padding-bottom: 30px;
}

#scene05 .body .nav_local li {
    width: 236px;
    margin-top: 20px;
    position: relative;
    box-shadow: 7px 7px 0px #00498A;
    -moz-box-shadow: 7px 7px 0px #00498A;
    -webkit-box-shadow: 7px 7px 0px #00498A;
}

#scene05 .body .nav_local li:after {
    content: "";
    display: block;
    height: 20px;
    opacity: 1;
    position: absolute;
    right: 2px;
    top: 8px;
    width: 20px;
    z-index: 4;
    background: url(/safety/common/img/header_outlink_icon_white.png) no-repeat;
}

#scene05 .body .nav_local .nav01,
#scene05 .body .nav_local .nav02,
#scene05 .body .nav_local .nav03 {
    float: left;
    margin-right: 18px;
}

#scene05 .body .nav_local .nav04 {
    float: right;
}

#scene05 .body .nav_local li:hover a img {
    opacity: 0.8;
    filter: alpha(opacity=80);
}


/*-----------------------------------------------------------------------------------------
scene06
-----------------------------------------------------------------------------------------*/
#scene06 {
    width: 100%;
    min-width: 1000px;
    background-color: #fff;
    padding-bottom: 20px;
}

#scene06 .body {
    width: 1000px;
    margin: 0 auto 70px;
}

#scene06 .body .ttl {
    margin-top: 75px;
    text-align: center;
    border: 3px solid #ddd;
    padding: 30px 0 60px;
}

#scene06 .body .ttl {
    background: url(../img/open_arrow.png) no-repeat center 90%;
}

#scene06 .body .ttl:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    cursor: pointer;
}

.open_data {
    display: none;
}

#scene06 .point {
    padding: 50px 0 50px 0;
    background: url(../img/point_bg_01.jpg) no-repeat center top;
    background-size: cover;
}

#scene06 .point .post {
    width: 1000px;
    margin: 0 auto;
}

#scene06 .point .post dl {}

#scene06 .point .post dl dt {}

#scene06 .point .post dl dd {
    height: 640px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.15);
}

#scene06 .point .post .note {
    margin-top: 10px;
    text-align: right;
}

#scene06 .point .post .note ul {
    display: inline-block;
}

#scene06 .point .post .note ul li {
    margin-top: 5px;
    padding-left: 1em;
    text-indent: -1em;
}

#scene06 .point .post .note ul li a {
    color: #2692ff;
}

#scene06 .bnr {
    margin: 50px 0 0px;
    text-align: center;
}

#scene06 .bnr a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
}


/*-----------------------------------------------------------------------------------------
pageTop
-----------------------------------------------------------------------------------------*/
/*#pageTop { width:1000px; margin:0 auto; background-color:#fff; text-align:center; }*/


/*-----------------------------------------------------------------------------------------
footer
-----------------------------------------------------------------------------------------*/
/*footer {
padding-top:20px;
background-color:#fff;
}
footer #pagetop {
display:none;
}
#foot_navi_sitemap {
width:1000px;
margin:0 auto;
padding-top:20px;
border-top:1px solid #b1b1b1;
background-color:#fff;
}
#foot_navi_sitemap .inner {
padding-top:20px;
background-image:none;
}
#foot_navi_sitemap nav {
margin:0 50px;
}
#foot_navi_sitemap nav h1 {
margin-bottom:10px;
color:#3c3c3c;
}
#foot_navi_sitemap nav a {
color:#3c3c3c;
}
#footer { padding-top:0; }*/

/*
.init {
display: none;
}*/


/*-----------------------------------------------------------------------------------------
sp_btn
-----------------------------------------------------------------------------------------*/
/*#sp_btn {
display:none;
width:100%;
margin:50px 0 0 0;
text-align:center;
}
#sp_btn a {
display:block;
width:100%;
padding:25px 0;
background-color:#3c3c3c;
}*/


/*-----------------------------------------------------------------------------------------
overwrite
-----------------------------------------------------------------------------------------*/
/*@media screen and (max-device-width:1000px) {
#foot_navi_sitemap .inner {
width:100%;
min-width:1000px;
}
#foot_navi_sitemap nav {
width:25%;
margin:0;
padding:0 42px!important;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
}*/