@charset "utf-8";
/* CSS Document */

/*** コンテンツのフォントサイズを変更するには以下を調整 ***/
body, html {font-size: 14px;}
/********************************************************/

/************ メニューブロックの設定 ************/
nav {
    width: 200px;
    background-color: #fff;
    padding: 1em;
    border: 1px solid #bcbcbc;
    border-radius: 4px;
    text-align: center;
    float: left;
    position: sticky;
    top: 10px;
    z-index: 99;
    overflow:auto;
}
nav dl {
    text-align: left;
    margin: 0;
    padding: 0;
}
nav dl dt{
    font-size: 1.15rem;
    padding: 0;
    margin-top: 1em;
    font-weight: 600;
}
nav dl dt:first-child {margin-top: 0;}
nav dl dd{
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0;
    margin-left: 1em;
    margin-top: 0.5em;
    padding: 0;
    text-indent: -1em;
}
nav dl dd a {
    color: #0082FF;
    line-height: 1.1;
}
nav dl dd a:before {
    content: "";
    margin: -0.2em 0.3em 0.2em;
    width: 0.4em;
    height: 0.4em;
    display: inline-block;
    border-top: 2px solid #0082FF;
    border-right: 2px solid #0082FF;
    transform: rotate(45deg);
}
nav dt#SVD-logo {
    text-align: center;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #bcbcbc;
}
nav dd#Title {
    text-align: center;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #999;
    margin: 0.1em 0 0 0.2em;
    padding: 0;
}

#Content {
    width: 960px;
    margin: 0 auto;
}
.section{
    text-align: left;
    padding: 1vw 0 2.5vw;
    margin: 0 0 10vh 230px;
    max-width: 1000px;
    min-height: calc(100vh - 3.5vw);
    overflow: hidden;
}
#Content .section:last-child {
    margin-bottom: 0;
    min-height: 100vh;
}
.section h1 {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 0.15em;
    padding-bottom: 0.1em;
    border-bottom: 1px solid #bcbcbc;
}
.section p {
    font-size: 1.2rem;
    margin-bottom: 2vh;
}
.section h1 + p {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1.5em;
    margin-left: 0;
}
.section p em {
    font-size: 1.4rem;
    font-weight: 500;
    font-style: normal;
}
.section .Emp {
    font-size: 1.3rem;
    font-weight: 600;
}
.section p.Emp {line-height: 1.35;}

.section .red {
    color: #FF0000;
    font-style: normal;
}
.section em {
    font-weight: 600;
    font-style: normal;
}
.section .Img{
    position: relative;
    margin: 10vh 0 0;
    max-width: 100%;
}
.section .margin0{margin: 0;}

.section .descr {
    font-size: 0.9em;
    font-weight: 500;
}
.section .Descr {line-height: 1.3;}
.section .Descr li {margin-bottom: 1.2rem;}
.section .Attention {
    list-style: none;
    line-height: 1.3;
    padding-left: 1em;
    text-indent: -1em;
    margin-left: 1em;
}
.section .Attention li {margin-bottom: 0.3em;}

.Img p{
    position: absolute;
    font-weight: 600;
}
.Img figure {
    overflow: hidden;
    text-align: center;
}
.Img img {
    width: 100%;
    max-width: 950px;
}

.section .BalloonRight {
    position: absolute;
    padding: 1.5% 2.5%;
    background: #E1EC7E;
    border-radius: 15px;
    width: 50%;
    left: 5%;
    top: 15%;
}
.section .BalloonRight:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-left: 20px solid #E1EC7E;
}
.section .BalloonRight p {
    font-size: 1.75vw;
    line-height: 1.3;
    position: relative;
    color: #366999;
    margin: 0.5em 0;
}

#Section04 ul.Emp {
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    width: 44%;
    min-width: 350px;
}
#Section04 p#illst4-1 + p {
    line-height: 1.5;
    width: 50%;
    float: right;
}
#Section04 p#illst4-1 {
    width: 45%;
    float: right;
    position: relative;
}
#Section04 p#illst4-1 .Emp {
    position: absolute;
    z-index: 9;
}
#Section04 p#illst4-1 img {width: 100%;}
#Section04 figure#illst4-2 {
    width: 45%;
    float: left;
    clear: left;
}
#Section04 figure#illst4-2 img {width: 100%;}
#Section04 ul.Attention {
    font-size: 1.1rem;
    line-height: 1.5;
    width: 45%;
    min-width: 350px;
    border: 2px solid #bcbcbc;
    border-radius: 4px;
    background-color: #fff;
    padding: 1em 1em 1em 2em;
    float: left;
    margin-top: 2em;
}
#Section04 ul.Attention + p {clear: both;}

#Section08 #HensyuPanel{
    overflow: hidden;
    margin-bottom: 1em;
}
#Section08 #HensyuPanel dl{
    list-style: none;
    font-weight: 600;
    font-size: 1.2rem;
    padding-left: 1.3em;
    text-indent: -1.3em;
    width: 45%;
    float: left;
    margin: 0 4% 0 0;
}
#Section08 #HensyuPanel dd.descr {
    font-size: 0.95em;
    line-height: 1.3;
    text-indent: 0;
    margin: 0 0 0.6em;
}
#Section08 #HensyuPanel dt {}
#Section08 #HensyuPanel dt::first-letter {
    font-size: 1.2em;
    margin-right: 0.2em;
    vertical-align: middle;
}
#Section08 #HensyuPanel .Img{
    margin: 0 0 2em;
    width: 48%;
    float: right;
}
#Section08 #HensyuPanel .Img p{
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    vertical-align: middle;
    color: #FF0000;
    margin: 0;
    padding: 0;
    width: 1.7em;
    height: 1.7em;
    border: 2px solid #FF0000;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
}
#Section08 dl a {
    margin-right: 0.3em;
    margin-left: 0.3em;
    border-bottom: solid 1px #3B69D9;
}

#Section06 .Img p#Text01 {
    width: 37%;
    color: #fff;
    font-size: 1.7vw;
    line-height: 1.4;
    margin: 0;
    background-color: #FF9170;
    padding: 0.5em;
    border-radius: 7px;
    top: 70%;
    z-index: 9;
}
#Section06 .Img #Text02,
#Section06 .Img #Text03 {
    color: #366999;
    position: absolute;
    width: 28%;
    top: 0%;
}
#Section06 .Img #Text02 p ,
#Section06 .Img #Text03 p {
    font-size: 1.2rem;
    font-weight: 500;
    position: relative;
    margin: 0.5em 0;
    line-height: 1.4;
}
#Section06 .Img #Text02 > p:first-child ,
#Section06 .Img #Text03 > p:first-child {
    font-weight: 600;
    margin-left: 1.2em;
    margin-bottom: 0;
}
#Section06 .Img #Text02 > p:first-child:before {
    content: "";
    position: absolute;
    top: 0.3em;
    margin-left: -1.1em;
    border: 0.4em solid #4169E1;
}
#Section06 .Img #Text03 > p:first-child:before {
    content: "";
    position: absolute;
    top: -0.25em;
    margin-left: -1.1em;
    border: 0.45em solid transparent;
    border-bottom: 0.9em solid #B0C4DE;
}
#Section06 .Img #Text02 {left: 40%;}
#Section06 .Img #Text03 {right: 0%;}

#Section09 ol {
    font-size: 1.15rem;
}

#Section11 h2 {
    font-size: 1.6rem;
    margin-top: 1em;
}
#Section11 h2 + ol {margin-top: 0.5em;}
#Section11 #process1 {
    width: 75%;
}
#Section11 #process1 img {
    width: 35%;
    float: right;
    margin-top: -75px;
    margin-right: -30%;
}
#Section11 #process2 {margin-top: 2em;}
#Section11 #process2 img {
    width: 100%;
    margin-top: 0.3em;
}
#Section11 #process3 {margin-top: 2em;}
#Section11 ol a {
    margin-right: 0.3em;
    margin-left: 0.3em;
    border-bottom: solid 1px #3B69D9;
}

#Section21 h2 {
    font-size: 1.6rem;
    margin-top: 1em;
}
#Section21 h2 + ol {margin-top: 0.5em;}
#Section21 #process1 {
    width: 75%;
}
#Section21 #process1 img {
    width: 35%;
    float: right;
    margin-top: -90px;
    margin-right: -30%;
}
#Section21 #process2 {margin-top: 2em;}
#Section21 #process2 img {
    width: 100%;
    margin-top: 0.3em;
}
#Section21 #process3 {margin-top: 2em;}
#Section21 ol a {
    margin-right: 0.3em;
    margin-left: 0.3em;
    border-bottom: solid 1px #3B69D9;
}

#Section20 table {
    border-collapse: separate;
    border-spacing: 0px;
    font-size: 1.1rem;
}
#Section20 td {
    border-bottom: solid 1px #999;;
    padding: 0.7em 2.5em 0.5em;
}
#Section20 th {
    border-bottom: solid 1px #333;;
    background-color: #f6f6f6;
    padding: 0.2em 1.5em 0.1em;
}

/****************** レスポンシブ対応のための設定 ******************/
@media screen and (max-height: 580px) {
    nav dl dt,nav dl dd {font-size: 2.5vh;}
    nav ul {position: relative; margin-top: 10px;}
    nav dt#SVD-logo img {width: 75%;}
    nav dd#Title {font-size: 4vh;}
}
@media screen and (min-width: 1100px) {
    #Section06 .Img p#Text01 {font-size: 1.2rem;}
    #Section06 .Img #Text02 p , #Section06 .Img #Text03 p {font-size: 1.3rem;}
    .section .BalloonRight p {font-size: 1.4rem;}
}
@media screen and (min-width: 1200px) {
    #Content {width: 1000px;}
}
@media screen and (min-width: 1350px) {
    .section{margin-left: 250px;}
}
@media screen and (min-width: 1400px) {
    #Content {width: 1100px;}
}