@charset "UTF-8";

.cs{ display: flex; padding: 3em 0; border: solid 5px #8be7f8; justify-content: center; align-items: center;}

@media only screen and (max-width:768px) {
    .cs{ display: flex; padding: 1.5em 0; border-top: solid 2.5px #8be7f8; border-bottom: solid 2.5px #8be7f8; justify-content: center; align-items: center;}
    .cs p{ border-bottom: none; text-align: center; font-size: 100%;}
}

#contents{ padding: 0 0 6em;}

@media only screen and (max-width:768px) {
    #contents{ padding: 0 0 3em;}
}

#mv { height: 490px;}
.content1 #mv{ background:url(../img/img01_mv.jpg) no-repeat center / cover;}
.content2 #mv{ background:url(../img/img02_mv.jpg) no-repeat center / cover;}
.content3 #mv{ background:url(../img/img03_mv.jpg) no-repeat center / cover;}
.content4 #mv{ background:url(../img/img04_mv.jpg) no-repeat center / cover;}
#contents .inner{ padding: 4.5em 0 0;}

@media only screen and (max-width:768px) {
    #mv { margin: 0 0 3em; height: 210px;}
    #main{ padding: 3em 0;}
    #contents .inner{ padding: 1.5em 0 0;}
}

#main .prof{ position: relative; display: flex; padding: 1.5em 0; line-height: 1.5; align-items: center;}
#main .prof:before,
#main .prof:after{ position: absolute; left: 0; width: 100%; height: 5px; background: #03abd9; content: "";}
#main .prof:before{ top: 0;}
#main .prof:after{ bottom: 0;}
#main .prof figure{ width: 19.1%;}
#main .prof h2{ padding: 0 0 0 1.5em;}
#main .prof h2 .line2{ display: flex; letter-spacing: .05em; font-weight: 700; font-size: 200%; align-items: baseline;}
#main .prof h2 .line2 em{ font-weight: 700; letter-spacing: 0;}
#main .prof h2 .line2 span{ letter-spacing: 0; font-size: 50%;}
#main .prof h2 .line3{ margin: .5em 0 0;}

@media only screen and (max-width:768px) {
    #main .prof:before,
    #main .prof:after{ height: 2.5px;}
    #main .prof figure{ width: 38.2%;}
    #main .prof h2{ padding: 0 0 0 1.5em;}
    #main .prof h2 .line2{ display: flex; flex-direction: column; font-size: 200%; line-height: 1.25;}
    #main .prof h2 .line2 em{ font-size: 75%;}
    #main .prof h2 .line2 span{ letter-spacing: 0; font-size: 40%;}
}

#main dl dt{ position: relative; margin: 3em 0 0; padding: 0 0 0 2em; font-weight: 700; font-size: 140%;}
#main dl dt:before{ position: absolute; top: -.5em; left: 0; color: #03abd9; content: "Q"; font-size: 180%;}
#main dl dd{ padding: 1.5em 0 0;}

@media only screen and (max-width:768px) {
    #main dl dt{ margin:3em 0 0; padding: 0 0 0 2em; font-weight: 700; font-size: 120%; line-height: 1.5;}
    #main dl dt:before{ position: absolute; top: -.4em; left: 0; color: #03abd9; content: "Q"; font-size: 160%;}
    #main dl dd{ padding: 1.5em 0 0;}
}

#main nav{ margin: 3em 0 0; line-height: 1;}
#main nav ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
#main nav ul > li{ margin: 2px 0 0; padding: 0 1px; width: 50%;}
#main nav a{ position: relative; display: block;}
#main nav a:hover{ text-decoration: none;}
#main nav figcaption{ position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: 5em; background: rgba(139,231,248,.9); font-weight: 500; line-height: 1.5; align-items: center; justify-content: center;}
#main nav .line1{ font-weight: 500; font-size: 80%;}
#main nav .line2{ display: flex; flex-direction: column; font-weight: 500; font-size: 120%; align-items: center;}
#main nav .line2 span{ font-weight: 500; font-size: 60%;}

@media only screen and (max-width:768px) {
    #main nav{ margin: 3em 0 0; line-height: 1;}
    #main nav ul{ flex-direction: column; justify-content: flex-start;}
    #main nav ul > li{ margin: 2px 0 0; padding: 0 1px; width: 100%;}
    #main nav figure{ display: flex;}
    #main nav figure img{ width: 30%;}
    #main nav figcaption{ position: relative; bottom: auto; left: auto; width: 70%; height: auto; background: rgba(139,231,248,1); align-items: flex-start; padding: 0 0 0 1em;}
    #main nav .line1{ font-size: 80%;}
    #main nav .line2{ font-size: 140%; align-items: flex-start;}
    #main nav .line2 span{ font-size: 50%;}
}

#main dl + nav ul{ margin: 1.5em 0 0;}
#main dl + nav ul > li{ width: calc(100% / 3);}
#main dl + nav .current{ display: none;}
#main dl + nav figcaption{ height: 4em;}
#main dl + nav .line1{ font-size: 70%;}
#main dl + nav .line2{ font-size: 110%;}
#main dl + nav .line2 span{ display: none;}

@media only screen and (max-width:768px) {
    #main dl + nav ul{ margin: 1.5em 0 0;}
    #main dl + nav ul > li{ width: 100%;}
    #main nav figure{ display: flex;}
    #main nav figure img{ width: 30%;}
    #main dl + nav figcaption{ height: auto;}
    #main dl + nav .line1{ font-size: 80%;}
    #main dl + nav .line2{ font-size: 140%;}
}

#main dl + nav h3{ margin: 3em 0 0; padding: 0 0 1em; font-weight: 700; font-size: 140%;}
#main dl + nav h3 span { display: inline-block; padding-top: 8px; border-top: solid 4px #03abd9; font-weight: 700;}

@media only screen and (max-width:768px) {
}