@charset "UTF-8";

#gnav li.nav-guideline a:before{ top: 0%;}

#main nav{ border-bottom: solid 5px #8be7f8;}
#main nav ul{ display: flex;}
#main nav ul > li{ width: calc(100% / 3);}
#main nav ul > li.current{ background: #8be7f8;}
#main nav ul > li a{ position: relative; display: flex; overflow: hidden; padding: 1.5em 0; font-weight: 700; font-size: 110%; line-height: 1; justify-content: center; align-items: center;}
#main nav ul > li a:before{ position: absolute; top: 100%; left: 0; z-index: -1; display: block; width: 100%; height: 100%; background: #8be7f8; content: ''; transition: top ease-out 0.1s;}
#main nav ul > li a:hover{ text-decoration: none;}
#main nav ul > li a:hover:before,
#main nav ul > li.current a:before{ top: 0%;}

.ctn{ padding: 3em 0 0;}

.list-flow{ position: relative; counter-reset: number;}
.list-flow:before{ position: absolute; top: 0; left: 24px; width: 2px; height: 100%; background: #03abd9; content: "";}
.list-flow > li{ position: relative; padding: 0 0 3em 10%; counter-increment: number; text-align: left;}
.list-flow > li:last-child{ padding: 0 0 0 10%;}
.list-flow > li:before{ position: absolute; top: 0; left: 0; display: flex; width: 50px; height: 50px; border-radius: 10%; background: #03abd9; color: #fff; content: counter(number); font-weight: 700; font-size: 120%; align-items: center; justify-content: center;}
.list-flow dt{ font-weight: 700; font-size: 140%;}
.list-flow dd{ padding: 1em 0 0;}

#main h3{ margin: 3em 0 0; padding: 0 0 1em; font-weight: 700; font-size: 140%;}
#main .ctn > h3:first-child{ margin: 1.5em 0 0;}
#main h3 span { display: inline-block; padding-top: 8px; border-top: solid 4px #03abd9; font-weight: 700;}

.tab-wrap{ margin: 3em 0 0;}
.list-tab{ display: flex; border-bottom: 5px solid #03abd9;}
.list-tab > li{ padding: .5em 2em; border: 5px solid #03abd9; border-bottom: none; border-radius: 6px 6px 0 0; font-weight: 700; font-size: 110%; cursor: pointer;}
.list-tab > li.current{ background: #03abd9; color: #fff;}
.list-tab > li + li{ margin: 0 0 0 .5em;}

.tab-content{ display: none; padding: 3em; border: 5px solid #03abd9; border-top: none;}
.tab-content.current{ display: block;}

table{ width: 100%; border-top: 2px solid #eee;}
h3 + table{ margin: 1.5em 0 0;}
table th{ padding: 1.5em; border-bottom: 2px solid #eee; white-space: nowrap; font-weight: 700; box-sizing: border-box;}
table td{ padding: 1.5em; border-bottom: 2px solid #eee; box-sizing: border-box;}

.list{ margin: 0 0 0 1.2em; list-style: disc;}
table td p + .list{ margin: 1em 0 0 1.2em;}

.dl1{ margin: 3em 0 0; display: flex; flex-direction: column; align-items: flex-start;}
.dl1 dt{ font-size: 120%; font-weight: 700;}
.dl1 dd{ padding: .5em 0 0;}

@media only screen and (max-width:768px) {
    #main nav{ border-bottom: solid 2.5px #8be7f8;}
    #main nav ul > li a{ padding: 1em 0;}

    .ctn{ padding: 3em 0 0;}

    .list-flow:before{ left: 15px; width: 1px;}
    .list-flow > li{ padding: 0 0 3em 12%;}
    .list-flow > li:last-child{ padding: 0 0 0 12%;}
    .list-flow > li:before{ width: 30px; height: 30px;}

    #main h3{ margin: 3em 0 0;}
    #main h3 span { padding-top: 4px; border-top: solid 2.5px #03abd9;}

    .tab-wrap{ margin: 2em 0 0;}
    .list-tab{ display: flex; border-bottom: 2.5px solid #03abd9;}
    .list-tab > li{ padding: .5em 1em; border: 2.5px solid #03abd9; border-bottom: none; border-radius: 6px 6px 0 0; font-weight: 700; font-size: 110%; cursor: pointer;}
    .list-tab > li.current{ background: #03abd9; color: #fff;}
    .list-tab > li + li{ margin: 0 0 0 .5em;}

    .tab-content{ display: none; padding: 1.5em 1em; border: 2.5px solid #03abd9; border-top: none;}
    .tab-content.current{ display: block;}

    table{ width: 100%; border-top: 2px solid #eee;}
    h3 + table{ margin: 2em 0 0;}
    table th{ display: block; width: 100%; padding: 1em 1em .5em; border-bottom: none; white-space: nowrap; font-weight: 700;}
    table td{ display: block; width: 100%; padding: 0 1em 1em; border-bottom: 2px solid #eee;}

    .list{ margin: 0 0 0 1.2em; list-style: disc;}
    table td p + .list{ margin: 1em 0 0 1.2em;}

    .dl1{ margin: 1.5em 0 0; display: flex; flex-direction: column; align-items: flex-start;}
    .dl1 dt{ font-size: 120%; font-weight: 700;}
    .dl1 dd{ padding: .5em 0 0;}
}