@charset "utf-8";

/* reset */
* {
    /*line-height: 1;*/
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    box-sizing: border-box;
}

ol, ul {
    list-style: none;
}

/* テスト用igエリアの外枠
 　本htmlに挿入後は不要
 　igエリアはこの中で100%になる

body {
    background: #192028;
}
#pageLayout {
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    background: rgba(255, 255, 255, .1);
    padding: 500px 0 0 0;
}*/

.igPos {
    width: 50%;
    margin: 0 auto;
    padding: 0 0 200px 0;
}
.igPos-r { margin-right: 0; }
.igPos-l { margin-left: 0; }

/* ig common tools */
.ig img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.ig {
    width: 100%;
    height: auto;
    background: #fff;
    position: relative;
}
.ig:before { /* igエリアをアスペクト比600px*450px（可変）に保つため */
    content: '';
    display: block;
    padding-top: 75%; /* アスペクト比変更する場合はこの数値を変更 */
}
.ig_inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ig_item-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ig_color-parag { color: #003477;  }
.ig_color-old {  color: #0068b7;  }
.ig_bg-old {  background-color: #0068b7;  }
.ig_color-new {  color: #e60012;  }
.ig_bg-new {  background-color: #e60012;  }

/* ig common animation */
[data-ig-move-type="visibility"] {
    visibility: hidden;
}
[data-ig-move-type="visibility"].act {
    visibility: visible;
}

[data-ig-move-type="fade"] {
    transition: all 600ms;
    opacity: 0;
}
[data-ig-move-type="fade"].act {
    opacity: 1;
}

[data-ig-move-type="blink"] {
    opacity: 0;
}
[data-ig-move-type="blink"].act {
    animation: igblink 600ms ease-in-out infinite alternate;
}
@keyframes igblink {
    0% { opacity: 0; }
    100% { opacity: 0.8; }
}

/* ==================================================
   #ig1
   ================================================== */
#ig1 .ig_bg {
    width: 76%;
    margin: 17% 12% auto auto;
}

/* line */
#ig1 path {
    fill: none;
    stroke: #e60012;
    stroke-width: 1;
}

/* graph */
#ig1 .ig_graph {
    text-align: center;
    width: 50%;
    position: absolute;
    overflow: hidden;
}
#ig1 [data-ig-group="1"] .ig_graph {  top: 25px;  left: 0;  }
#ig1 [data-ig-group="2"] .ig_graph {  top: 25px;  right: 0;  }
#ig1 [data-ig-group="3"] .ig_graph {  bottom: 15px;  left: 0;  }
#ig1 [data-ig-group="4"] .ig_graph {  bottom: 15px;  right: 0;  }

#ig1 .ig_graph_ttl {
    font-size: 15px;
    margin: 0 0 5px 0;
}

#ig1 .ig_per {
    font-size: 30px;
    font-weight: bold;
    padding: 3% 0;  
    line-height: 1;
}

/* ==================================================
   #ig2
   ================================================== */
#ig2 .ig_inner {
    background: #b8b7b9;
    overflow: hidden;
}
#ig2 .ig_inner:after {
    content: '';
    width: 100%;
    height: 5px;
    background: #fff;
    position: absolute;
    top: 96%;
    left: 0;
}

#ig2 .ig_line {
    width: 400%;
    height: 5px;
    background: url("/assets/img/brand/technology/driving/sgp/ig2/line.png") repeat-x left center/ auto 100%;
    position: absolute;
    top: 40%;
    left: -300%;
}

#ig2 .ig_figure-car {
    width: 65%;
    position: absolute;
    top: 46%;
    right: 5%;
}
#ig2 .ig_figure-handle {
    width: 30%;
    position: absolute;
    top: 2%;
    left: 5%;
}

#ig2 .ig_figure_item {
    display: block;
}

#ig2 .ig_figure-car .ig_figure_item-arr {
    width: 90%;
    margin: 1% 0 0 3%;
}

/* animation */
#ig2 [data-ig-move-type="handleArr-r"],
#ig2 [data-ig-move-type="handleArr-l"],
#ig2 [data-ig-move-type="carArr-r"],
#ig2 [data-ig-move-type="carArr-l"] {
    opacity: 0;
}
#ig2 .act [data-ig-move-type="handleArr-r"],
#ig2 .act [data-ig-move-type="carArr-r"] {
    animation: ig2arrright 8000ms linear infinite;
}
@keyframes ig2arrright {
    0% { opacity: 0; }
    20% { opacity: 0; } /* 右 */
    25% { opacity: 1; } /* 右 */
    45% { opacity: 1; } /* 右 */
    50% { opacity: 0; }
    100% { opacity: 0; }
}

#ig2 .act [data-ig-move-type="handleArr-l"],
#ig2 .act [data-ig-move-type="carArr-l"] {
    animation: ig2arrleft 8000ms linear infinite;
}
@keyframes ig2arrleft {
    0% { opacity: 0; }
    70% { opacity: 0; } /* 左 */
    75% { opacity: 1; } /* 左 */
    95% { opacity: 1; } /* 左 */
    100% { opacity: 0; }
}

#ig2 [data-ig-move-type="handle"] {
    transform: rotate(0deg);
}
#ig2 .act [data-ig-move-type="handle"] {
    animation: ig2handle 8000ms linear infinite;
}
@keyframes ig2handle {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(0deg); } /* 右 */
    25% { transform: rotate(7deg); } /* 右 */
    45% { transform: rotate(7deg); } /* 右 */
    50% { transform: rotate(0deg); }
    70% { transform: rotate(0deg); } /* 左 */
    75% { transform: rotate(-7deg); } /* 左 */
    95% { transform: rotate(-7deg); } /* 左 */
    100% { transform: rotate(0deg); }
}

#ig2 [data-ig-move-type="car"] {
    top: 45%;
}
#ig2 .act [data-ig-move-type="car"] {
    animation: ig2car 8000ms linear infinite;
}
@keyframes ig2car {
    0% { top: 45%; }
    20% { top: 45%; } /* 右 */
    25% { top: 44.5%; } /* 右 */
    45% { top: 44.5%; } /* 右 */
    50% { top: 45%; }
    70% { top: 45%; } /* 左 */
    75% { top: 45.5%; } /* 左 */
    95% { top: 45.5%; } /* 左 */
    100% { top: 45%; }
}

#ig2 [data-ig-move-type="line"].act {
    animation: ig2line 3000ms linear infinite;
}
@keyframes ig2line {
    0% { left: -300%; }
    100% { left: -100%; }
}


/* ==================================================
   #ig3
   ================================================== */
#ig3 .ig_inner {
    padding: 22% 5% 0 5%;
}

#ig3 .ig_figure {
    width: 85%;
    margin: 0 auto;
    position: relative;
}
#ig3 .ig_figure-old {
    border-bottom: 2px dashed gray;
}

#ig3 .ig_figure_ttl {
    font-size: 15px;
    font-weight: bold;
    padding: 0 0 3px 0;
    border-bottom: 1px solid;
    position: absolute;
}
#ig3 .ig_figure-old .ig_figure_ttl {
    border-bottom-color: #0068b7;
    top: -50%;
    left: 42%;
}
#ig3 .ig_figure-new .ig_figure_ttl {
    border-bottom-color: #e60012;
    bottom: -50%;
    left: 37%;
}

#ig3 .ig_light {
    width: 85%;
    position: absolute;
    top: 9.5%;
    left: 7.5%;
    z-index: 2;
}

/* ==================================================
   #ig4
   ================================================== */
#ig4 .ig_bg-ov {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
}

/* line */
#ig4 .ig_cover {
    z-index: 2;
    opacity: .6;
}

#ig4 path {
    fill: none;
    stroke: #e60012;
    stroke-width: 3;
}

#ig4 .ig_cap {
    font-size: 15px;
    color: #717071;
    position: absolute;
    bottom: 20px;
    right: 20px;
}
#ig4 .ig_cap:before {
    content: '';
    vertical-align: top;
    display: inline-block;
    width: 35px;
    height: 0.3em;
    border-bottom: 3px solid #e60012;
    margin-right: 10px;
}

/* animation */
#ig4 [data-ig-move-type="orgblink"].act path {
    animation: ig4blink 400ms ease-in-out infinite alternate;
}
@keyframes ig4blink {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ==================================================
   #id5
   ================================================== */
#ig5 .ig_inner {
    margin: 5% 0;
}

#ig5 .ig_graph {
    width: 88%;
    height: 75%;
    margin: 0 0 auto auto;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    position: relative;
}

#ig5 .ig_point {
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 72%;
}

#ig5 .ig_point_dot {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin: 8px auto 0 auto;
    box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, .4);
}

#ig5 .ig_point_comment {
    font-size: 20px;
    color: #717071;
    position: absolute;
    top: 32.5%;
    left: 30%;
}

/* line */
#ig5 path {
    fill: none;
    stroke: #e60012;
    stroke-width: 1;
}

/* cap */
#ig5 .ig_cap-corner {
    width: 17%;
    position: absolute;
    bottom: 0;
    left: 0;
}

#ig5 .ig_cap-left {
    width: 12%;
    height: 75%;
    position: absolute;
    top: 0;
    left: 0;
}
#ig5 .ig_cap-left-middle {
    position: absolute;
    bottom: 43%;
}
#ig5 .ig_cap-left-bottom {
    position: absolute;
    bottom: 0;
}

#ig5 .ig_cap-bottom {
    width: 88%;
    height: auto;
    position: absolute;
    top: 78%;
    right: 0;
}
#ig5 .ig_cap-bottom-left {
    width: 19.9%;
}
#ig5 .ig_cap-bottom-center {
    width: 32.5%;
    position: absolute;
    top: 0;
    left: 33%;
}
#ig5 .ig_cap-bottom-right {
    width: 19.9%;
    position: absolute;
    top: 0;
    right: 0;
}

/* animation */
#ig5 [data-ig-move-type="feature"] {
    opacity: 0;
}
#ig5 [data-ig-move-type="feature"].act {
    animation: ig5feature 1400ms ease-out;
    top: 55%;
    left: 14%;
    opacity: 1;
}
@keyframes ig5feature {
    0% {
        top: 5%;
        left: 75%;
        opacity: 0;
        transform: rotateX(0deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        top: 55%;
        left: 14%;
    }
}

#ig5 [data-ig-move-type="feature"] .ig_point_dot {
    transform: scale(1);
}

#ig5 [data-ig-move-type="feature"].act .ig_point_dot {
    animation: ig5feature2 250ms ease-out 1600ms;
    transform: scale(1);
}
@keyframes ig5feature2 {
    0% {  transform: scale(1);  }
    50% {  transform: scale(1.5);  }
    100% {  transform: scale(1);  }
}

/* ==================================================
   #id6
   ================================================== */
#ig6 .ig_bg {
    width: 28%;
    position: absolute;
    top: 10%;
    left: 7%;
}

/* line */
#ig6 path,
#ig6 ellipse {
    fill: none;
    stroke: #e60012;
    stroke-width: 1;
}

#ig6 .ig_graph {
    width: 50%;
    margin: 0 0 0 auto;
    overflow: hidden;
}
#ig6 .ig_graph.ig_graph-index1 {
    margin: 10% 0 0 auto;
}

#ig6 .ig_comment {
    font-size: 20px;
    color: #717071;
    line-height: 1.5;
    position: absolute;
    top: 45%;
    left: 40%;
}

/* animation */

/* ==================================================
   #ig7
   ================================================== */
#ig7 .ig_inner:after {
    content: '';
    display: block;
    width: 100%;
    height: 1%;
    border-bottom: 3px solid #727171;
    position: absolute;
    bottom: 21%;
    left: 0;
}

#ig7 .ig_figure {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    position: relative;
}

#ig7 .ig_figure_cnt {
    position: relative;
    margin: 0 5%;
    padding: 69% 0 0 0;
}

#ig7 .ig_figure_cnt_body {
    z-index: 2;
    top: 27.5%;
}

#ig7 .ig_figure_cnt_bg {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

#ig7 .ig_figure_cnt_axisWrap {
    width: 57%;
    height: auto;
    z-index: 4;
    top: 69%;
    left: 21%;
}

#ig7 .ig_figure_cnt_axis {
    display: inline-block;
}

#ig7 .ig_figure_cnt_axis_bg {
    display: inline-block;
    position: absolute;
    bottom: -8%;
    left: 0;
    z-index: 5;
}

/* line */
#ig7 path {
    fill: none;
    stroke-width: 2;
    stroke: #e60012;
}

#ig7 .ig_figure_cnt_arrowWrap {
    width: 12%;
    height: auto;
    z-index: 3;
    top: 60%;
    left: 50%;
    margin-left: -6%;
}

#ig7 .ig_figure_cnt_arrow {
    display: inline-block;
}

/* animation */
#ig7 [data-ig-move-type="shake"] {
    transform-origin: center center;
    transform: rotate(-1.6deg);
}

#ig7 [data-ig-move-type="shake"].act {
    animation: ig7shake 1200ms linear infinite;
}

#ig7 [data-ig-move-type="fade"] {
    opacity: 0;
    transition: all 100ms;
}

#ig7 [data-ig-move-type="fade"].act {
    opacity: 1;
}

@keyframes ig7shake {
    0% {  transform: rotate(-1.6deg);  }
    50% {  transform: rotate(1.6deg);  }
    100% {  transform: rotate(-1.6deg);  }
}

#ig7 [data-ig-move-type="scale"] {
    transform-origin: left center;
    transform: scale(0, 1);
    transition: all 300ms ease-out;
}

#ig7 [data-ig-move-type="scale"].act {
    transform: scale(1, 1);
}


/* ==================================================
   #ig8
   ================================================== */
#ig8 .ig_inner {
    margin: 5% 0;
}

#ig8 .ig_graph {
    width: 86.4%;
    height: 75%;
    margin: 0 0 auto auto;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    position: relative;
}

/* line */
#ig8 path {
    fill: none;
    stroke-width: 2;
    stroke: #e60012;
}

#ig8 .ig_graph_comment path,
#ig8 .ig_graph_comment ellipse {
    fill: none;
    stroke: #e60012;
    stroke-width: 1;
}

/* comment */
#ig8 .ig_graph_comment_txt {
    font-size: 20px;
    color: #717071;
    position: absolute;
    top: 14%;
    left: 60%;
}

/* cap */
#ig8 .ig_cap_txt {
    font-size: 15px;
    color: #717071;
    padding: 20px 10px 10px 10px;
}

#ig8 .ig_cap-inGraph {
    width: 100%;
    height: 50%;
    border-top: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
}
#ig8 .ig_cap-inGraph-end {
    position: absolute;
    top: 0;
    right: 0;
}

#ig8 .ig_cap-left {
    width: 13.6%;
    height: 75%;
    position: absolute;
    top: 0;
    left: 0;
}
#ig8 .ig_cap-left-middle {
    position: absolute;
    bottom: 43%;
}

#ig8 .ig_cap-bottom {
    width: 88%;
    height: auto;
    position: absolute;
    top: 78%;
    right: 0;
}
#ig8 .ig_cap-bottom-center {
    width: 17%;
    position: absolute;
    top: 0;
    left: 42%;
}


/* ==================================================
   #id9
   ================================================== */
#ig9 .ig_inner:after {
    content: '';
    display: block;
    width: 100%;
    height: 1%;
    border-bottom: 3px solid #727171;
    position: absolute;
    bottom: 21%;
    left: 0;
}

#ig9 .ig_bg {
    width: 60%;
    top: 18.5%;
    left: 20%;
}

#ig9 .ig_dot {
    display: table;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, .4);
    position: absolute;
    top: 49.2%;
    left: 50%;
    z-index: 2;
    margin: 0 auto 0 -32px;
}

#ig9 .ig_dot_txt {
    color: #fff;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}

#ig9 .ig_arr {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: 49%;
    right: 6%;
    z-index: 2;
}

#ig9 .ig_arr_txt {
    font-size: 15px;
    color: #717071;
}

#ig9 .ig_arr_img {
    display: block;
    width: 55px;
    margin: 10px auto 0 auto;
}

    /* animation */
#ig9 [data-ig-move-type="gravity"].act {
    animation: ig9gravity 1500ms linear;
    top: 59.2%;
}

@keyframes ig9gravity {
    0% {  top: 49.2%; }
    100% {  top: 59.2%; }
}

/* ==================================================
   #id10
   ================================================== */
/* graph */
#ig10 .ig_graphWrap {
    width: 30%;
    height: auto;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 10px;
}
#ig10 .ig_graphWrap:before {
    content: '';
    display: inline-block;
    padding-top: 100%;
}

#ig10 .ig_graph {
    width: 100%;
}

#ig10 circle {
    fill: transparent;
    stroke-width: 122.5;
    stroke-dasharray: 0, 384.65;/* 384.65×0％（円周×塗りつぶしたい領域）, 384.65×100％（円周×余白の領域）*/
   /* transition: all 2000ms; */
    opacity: 0;
}
#ig10 .act circle {
    opacity: 1;
    animation-duration: 2000ms;
    animation-timing-function: linear;
}

/* animation-circle */
#ig10 [data-ig10-circle-index="1"] circle {
    stroke: #7ecef4;
    stroke-dashoffset: 96.1625;/* 384.65×25％（開始位置。12時の位置から始めるため、円周の25%を指定）*/
}
#ig10 [data-ig10-circle-index="1"].act circle {
    stroke-dasharray: 176.939, 207.711;/* 384.65×46％ */
    animation-name: ig10circle1;
}
@keyframes ig10circle1 {
    0% { opacity: 0; stroke-dasharray: 0, 384.65; }
    1% { opacity: 1; stroke-dasharray: 0, 384.65; }
    100% { opacity: 1; stroke-dasharray: 176.939, 207.711;/* 384.65×46％ */ }
}

#ig10 [data-ig10-circle-index="2"] circle {
    stroke: #6c9bd2;
    stroke-dashoffset: 303.8735;/* 384.65×(25+54)％ */
}
#ig10 [data-ig10-circle-index="2"].act circle {
    stroke-dasharray: 38.465, 346.185;/* 384.65×10％ */
    animation-name: ig10circle2;
}
@keyframes ig10circle2 {
    0% { opacity: 0; stroke-dasharray: 0, 384.65; }
    1% { opacity: 1; stroke-dasharray: 0, 384.65; }
    100% { opacity: 1; stroke-dasharray: 38.465, 346.185;/* 384.65×46％ */ }
}

#ig10 [data-ig10-circle-index="3"] circle {
    stroke: #f19ec2;
    stroke-dashoffset: 265.4085;/* 384.65×(25+44)％ */
}
#ig10 [data-ig10-circle-index="3"].act circle {
    stroke-dasharray: 130.781, 253.869;/* 384.65×34％ */
    animation-name: ig10circle3;
}
@keyframes ig10circle3 {
    0% { opacity: 0; stroke-dasharray: 0, 384.65; }
    1% { opacity: 1; stroke-dasharray: 0, 384.65; }
    100% { opacity: 1; stroke-dasharray: 130.781, 253.869;/* 384.65×34％ */ }
}

#ig10 [data-ig10-circle-index="4"] circle {
    stroke: #bba1cb;
    stroke-dashoffset: 134.6275;/* 384.65×(25+10)％ */
}
#ig10 [data-ig10-circle-index="4"].act circle {
    stroke-dasharray: 11.5395, 373.1105;/* 384.65×3％ */
    animation-name: ig10circle4;
}
@keyframes ig10circle4 {
    0% { opacity: 0; stroke-dasharray: 0, 384.65; }
    1% { opacity: 1; stroke-dasharray: 0, 384.65; }
    100% { opacity: 1; stroke-dasharray: 11.5395, 373.1105;/* 384.65×3％ */ }
}

#ig10 [data-ig10-circle-index="5"] circle {
    stroke: #9070af;
    stroke-dashoffset: 123.088;/* 384.65×(25+7)％ */
}
#ig10 [data-ig10-circle-index="5"].act circle {
    stroke-dasharray: 26.9255, 357.7245;/* 384.65×7％ */
    animation-name: ig10circle5;
}
@keyframes ig10circle5 {
    0% { opacity: 0; stroke-dasharray: 0, 384.65; }
    1% { opacity: 1; stroke-dasharray: 0, 384.65; }
    100% { opacity: 1; stroke-dasharray: 26.9255, 357.7245;/* 384.65×7％ */ }
}

#ig10 .ig_graph_num {
    font-size: 15px;
}
#ig10 .ig_graph_num.ig_graph_num-index1 { top: 45%; left: 75%; }
#ig10 .ig_graph_num.ig_graph_num-index2 { top: 85%; left: 38%; }
#ig10 .ig_graph_num.ig_graph_num-index3 { top: 50%; left: 6%; }
#ig10 .ig_graph_num.ig_graph_num-index4 { top: 15%; left: 20%; }
#ig10 .ig_graph_num.ig_graph_num-index5 { top: 6%; left: 35%; }

/* caption */
#ig10 .ig_cap {
    position: absolute;
    top: 25px;
    left: 35%;
}

#ig10 .ig_cap_list {
    font-size: 13px;
    color: #717071;
    line-height: 1.4;
    margin-bottom: 2px;
}
#ig10 .ig_cap_list:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 3px 5px 1px 0;
}
#ig10 .ig_cap_list:nth-child(1):before { background: #7ecef4; }
#ig10 .ig_cap_list:nth-child(2):before { background: #6c9bd2; }
#ig10 .ig_cap_list:nth-child(3):before { background: #f19ec2; }
#ig10 .ig_cap_list:nth-child(4):before { background: #bba1cb; }
#ig10 .ig_cap_list:nth-child(5):before { background: #9070af; }

/* figure */
#ig10 .ig_figureWrap {
    width: 70%;
    height: auto;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    right: 5px;
}
#ig10 .ig_figure {
    display: block;
}

/* animation */
#ig10 [data-ig-move-type="blink"] {
    opacity: 1;
}
#ig10 [data-ig-move-type="blink"].act {
    animation: ig10blink 300ms linear infinite alternate;
}
@keyframes ig10blink {
    0% { opacity: 1; }
    100% { opacity: 0.6; }
}

#ig10 [data-ig-move-type="fade"] {
    transition: all 600ms linear 2000ms;
    opacity: 0;
}
#ig10 [data-ig-move-type="fade"].act {
    opacity: 1;
}

/* ==================================================
#ig11
================================================== */
#ig11 .ig_inner {
    padding: 18% 2% 0 13%;
}

#ig11 .ig_figure {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#ig11 .ig_figure-old {
    border-bottom: 2px dashed gray;
}

#ig11 .ig_figure_ttl {
    font-size: 15px;
    font-weight: bold;
    padding: 0 0 3px 0;
    border-bottom: 1px solid;
    position: absolute;
}
#ig11 .ig_figure-old .ig_figure_ttl {
    border-bottom-color: #0068b7;
    top: -50%;
    left: 10%;
}
#ig11 .ig_figure-new .ig_figure_ttl {
    border-bottom-color: #e60012;
    bottom: -50%;
    left: 5%;
}

#ig11 .ig_cover {
    z-index: 4;
}

/* line */
#ig11 path {
    fill: none;
    stroke-width: 3;
}
#ig11 .ig_figure-old path {
    stroke: #0068b7;
}
#ig11 .ig_figure-new path {
    stroke: #e60012;
}

#ig11 .ig_cap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

#ig11 .ig_light {
    width: 95%;
    position: absolute;
    top: 1%;
    left: 8%;
    z-index: 2;
}

#ig11 .ig_arr {
    width: 7%;
    position: absolute;
    top: 42.2%;
}

/* animation */
#ig11 [data-ig-move-index="5"] {
    opacity: 0;
    left: 0;
}
#ig11 [data-ig-move-index="5"].act {
    animation: ig11arr 150ms linear;
    opacity: 1;
    left: 3%;
}
@keyframes ig11arr {
    0% { opacity: 0; left: 0; }
    5% { opacity: 0; left: 0; }
    6% { opacity: 1; left: 0; }
    100% { opacity: 1; left: 3%; }
}


/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* 2018 追加 */
@media screen and (min-width: 1px) and (max-width: 767px) {
  #ig1 .ig_graph{
    /*transform: scale(0.8,0.8);*/
  }
  #ig1 [data-ig-group="1"] .ig_graph,
  #ig1 [data-ig-group="2"] .ig_graph{
    top: 0;
  }
  #ig1 [data-ig-group="3"] .ig_graph,
  #ig1 [data-ig-group="4"] .ig_graph{
    bottom: 0;
  }
  #ig1 .ig_graph_ttl,
  #ig3 .ig_figure_ttl,
  #ig4 .ig_cap,
  #ig5 .ig_point_comment,
  #ig6 .ig_comment,
  #ig8 .ig_graph_comment_txt,
  #ig9 .ig_arr_txt,
  #ig11 .ig_figure_ttl{
    font-size: 11px;
    margin: 0;
  }
  #ig1 .ig_per{
    font-size: 22px;
  }
  #ig3 .ig_figure-old .ig_figure_ttl{
    top: -70%;
    left: 37%;
  }
  #ig3 .ig_figure-new .ig_figure_ttl{
    bottom: -70%;
    left: 26%;
  }
  #ig4 .ig_cap:before{
    margin-top: 5px;
    line-height: 1;
  }
  #ig5 .ig_point_dot{
    width: 25px;
    height: 25px;
    top:4%;
  }
  #ig5 [data-ig-move-type="feature"].act{
    top: 54%;
  }
  #ig9 .ig_dot{
    width: 32px;
    height: 32px;
    left: 56%;
  }
  #ig9 [data-ig-move-type="gravity"].act{
    top: 60%;
  }
  #ig9 .ig_arr_img{
    width: 26px;
  }
  #ig9 .ig_arr{
    top: 46%;
  }
  #ig10{
    padding-top: 60px;
  }
  #ig10 .ig_cap{
    top: 3%;
    left: 38%;
  }
  #ig10 .ig_cap_list{
    font-size: 9px;
    line-height: 1;
  }
  #ig11 .ig_figure-old .ig_figure_ttl{
    top: -70%;
    left: 20%;
  }
  #ig11 .ig_figure-new .ig_figure_ttl{
    bottom: -70%;
    left: 20%;
  }
}