* {
    font-family: 'Noto Serif JP', serif;
    text-align: center;
}

.ff-01 {
    color: black;
    font-size: 20px;
}
.ff-02 {
    color: rgb(220, 217, 212);
    font-size: 22px;
}
.ff-prof {
    color: black;
    font-size: 16px;
    letter-spacing: normal;
    line-height: 1.2;
    margin-bottom: 5px;
}
.sec-ttl-h2 {
    padding: 50px 0 0;
    font-size: 36px;
}
.sec-ttl-h3 {
    padding: 0 0 50px 0;
    font-size: 36px;
}

.marker-green {
    background: linear-gradient(transparent 65%, #bfff7f 0%);
}
.marker-orange-02 {
    background: linear-gradient(transparent 65%, #fff799 0%);
}
.marker-red {
    background: linear-gradient(transparent 65%, #ff99cc 0%);
}
.marker-blue {
    background: linear-gradient(transparent 65%, #99ccff 0%);
}
.marker-purple {
    background: linear-gradient(transparent 65%, #ead6ff 0%);
}


/*960px以下で文字色が赤色になる   タブレット版サイズ　ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

@media screen and (max-width: 960px) {

    /* 960px以下で適用させたいcssを記述していく */
    .ff-01-header {
        color: #000;
        font-size: 26px;
        padding-bottom: 20px;
    }
    .ff-01 {
        color: black;
        font-size: 24px;
    }
    .sec {
        padding-top: 100px;
    }
    header {
        margin: 0 auto;
        text-align: center;
    }
    header .inner {
        width: 88%;
        margin: 0 auto;
    }
    header img {
        width: 88%;
        margin: 0 auto;
    }
    img.header_banner {
        padding: 50px 0px;
    }
    .top_copy_sp {
        display: none;
    }
    .youtube {
        margin-top: 50px;
    }
    /* sec-01 */

    .sec-01-bg img {
        width: 80%;
        margin: 0 auto;
    }
    .sec-01-text p {
        width: 90%;
        margin: 0 auto;
        text-align: left;
        letter-spacing: 1.2px;
        line-height: 1.8;
    }

    /* sec-02 */

    .sec-02-text {
        width: 90%;
        margin: 0 auto;
        text-align: left;
        letter-spacing: 1.8px;
        line-height: 1.8;
    }
    .sec-02-text-d {
        width: 80%;
    }
    .sec-02-pic {
        width: 50%;
        margin: 0 auto;
    }

    /* sec-03 */

    .sec-03-text-up,
    .sec-03-text-down {
        display: none;
    }
    .sec-03-text {
        width: 90%;
        margin: 0 auto;
        text-align: left;
        letter-spacing: 1.8px;
        line-height: 1.8;
    }
    .sec-03-text-sp {
        width: 80%;
        margin: auto;
        text-align: left;
        letter-spacing: 1.5px;
        line-height: 1.8;
    }

    /* sec-04 */

    .sec-04-li li {
        list-style: none;
    }
    .sec-04-li a {
        text-decoration: none;
    }
    p.sec-04-text {
        width: 90%;
        margin: auto;
        text-align: left;
        letter-spacing: 1.5px;
        line-height: 1.8;
    }

    /* sec-05 */

    .sec-05-contact {
        width: 80%;
        margin: 0 auto;
    }

    /* footer-banner */

    .footer-banner img {
        width: 100%;
        padding: 50px 0px;
    }
    /* footer */

    .flexbox {
        display: flex;
        flex-flow: column;
    }
    .flex-01 {
        position: relative;
        width: 100%;
        height: 300px;
        background-color: orange;
    }
    .flex-01 p {
        color: whitesmoke;
        font-size: 18px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
        text-align: left;
        line-height: 1.8;
    }
    
    .flex-02 {
        position: relative;
        width: 100%;
        height: 300px;
        background-color: #0D2B6E;
    }
    .flex-02 p {
        color: whitesmoke;
        font-size: 18px;
        position: absolute;
        top: 50%;
        left: 58%;
        -webkit-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
        text-align: left;
        line-height: 1.8;
    }

}
    /*520px以下で文字色青色になる  スマホサイズ　ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (max-width: 520px) {
      /* 520px以下で表示させたいcssを記述していく */
    p {
        color: blue;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
    .ff-01 {
        font-size: 16px;
    }
    .ff-prof {
        font-size: 16px;
    }
    .ff-02 {
        font-size: 18px;
        color: #6a6a6a !important;
    }
    .sec-ttl-sp-h3 {
        padding: 50px 0;
    }
    .sec-ttl-h2 {
        font-size: 24px;
    }
    .sec-ttl-h3 {
        padding: 0 0 50px 0;
        font-size: 24px;
    }
    /* header */

    header {
        width: 100%;
        text-align: center;
    }
    header .inner {
        width: 100%;
        margin: 0 auto;
    }
    header img {
        width: 100%;
    }
    .top_copy {
        display: none;
    }
    .top_copy_sp {
        display: inline-block;
        padding: 15px 0;
        margin: 0;
        font-size: 20px;
    }
    .header_banner {
        margin: 50px auto;
    }
    
    /* youtube */

    .youtube {
        width: 100%;
        height: 0;
        position: relative;
        padding-top: 56.25%;
        overflow: hidden;
      }
      
      .youtube iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
      }

    /* sec-01 */
    .sec {
        padding-top: 100px;
        width: 100%;
    }  
    .sec-01 .inner {
        width: 90%;
        margin: 0 auto;
    }
    .sec-01-bg img {
        width: 100%;
    }
    .sec-01-text p {
        text-align: left;
        letter-spacing: 1.5px;
    }

    /* sec-02 */

    .sec-02 .inner {
        width: 90%;
        margin: 0 auto;
    }
    li {
        list-style: none;
    }
    ul li .text {
        text-align: left;
        letter-spacing: 1.1px;
    }
    .sec-02 img {
        width: 50%;
        margin: 0 auto;
    }

    /* sec-03 */

    .sec-03 h2 {
        padding-top: 50px;
    }
    .sec-03 .inner {
        width: 90%;
        margin: 0 auto;
    }
    .sec-03-bg img {
        width: 100%;
    }
    .sec-03-text-up,
    .sec-03-text-down {
        display: none;
    }
    .sec-03-text-sp {
        letter-spacing: 1.3px;
        text-align: left;
    }

    /* sec-04 */

    .sec-04-li li {
        list-style: none;
        text-decoration: none;
    }
    .sec-04-text {
        text-align: left;
        letter-spacing: 1.2px;
    }
    .sec-04-prof {
        width: 80%;
        margin: 0 auto;
    }

    .sec-04-li a {
        text-decoration: none;
    }
    .prof-link li a {
        text-align: left;
        display: block;
    }

    /* sec-05 */

    .sec-05 .inner {
        width: 100%;
        margin: 0 auto;
    }
    .sec-05-text p {
        text-align: left;
        letter-spacing: 1.2px;
    }

    /* footer-banner */

    .footer-banner {
        width: 100%;
    }
    .footer-banner img {
        width: 100%;
        padding-top: 50px;
    }

    /* footer */

    .flexbox {
        display: flex;
        flex-flow: column;
    }
    .flex-01 {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: orange;
    }
    .flex-01 p {
        color: aliceblue;
        width: 80%;
        font-size: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
        text-align: left;
        line-height: 1.8;
    }
    
    .flex-02 {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: #0D2B6E;
    }
    .flex-02 p {
        color: aliceblue;
        width: 80%;
        font-size: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
        text-align: left;
        line-height: 1.8;
    }

    }

    /* ーーーーーーーーーーーーーーーーーーーーーーーー　PCサイズ　ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

@media screen and (min-width: 961px) {
    .ff-01-header {
        font-size: 30px;
        color: #000;
        padding-bottom: 30px;
    }

    /* Header */

    header .inner {
        width:1000px;
        margin: 0 auto;
        text-align: center;
    }
    .header_banner {
        margin: 100px 0 0;
        width: 80%;
    }
    .top_copy_sp {
        display: none;
    }
    
    img.header-img {
    width: 60%;
    }
    /* youtube */

    .youtube {
        width: 60%;
        margin: 150px auto 0px;
    }
    .youtube .inner{
        width: 100%;
        height: 0;
        position: relative;
        padding-top: 56.25%;
        overflow: hidden;
      }
      
      .youtube .inner iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
      }

    /* sec-01 */

    .sec-01 {
        padding-top: 100px;
    }
    .sec-01-bg {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .sec-01-bg img {
        width: 60%;
        opacity: 0.5;
    }
    .sec-01-bg p {
        position: absolute;
        width: 50%;
        top: 25%;
        left: 25%;
        letter-spacing: 1.8px;
        line-height: 1.8;
    }
    .sec-01-text {
        width: 300px;
        text-align-last: left;
    }

    /* sec-02 */

    .sec-02 {
        padding-top: 50px;
    }
    .sec-02 .inner {
        width: 88%;
        margin: 0 auto;
        padding-top: 50px;
    }
    .sec-02-pic {
        width: 16%;
        margin: 0 auto;
    }
    /* img.sec-02-pic {
        width: 40%;
    } */
    /* new */

    .sec-02-text {
        width: 60%;
        margin: 0 auto;
        text-align: left;
        letter-spacing: 1.8px;
        line-height: 1.8;
    }
    .photo img {
        width: 40%;
    }
    .sec-02-text-d {
        width: 50%;
        margin: 0 auto;
        text-align: left;
        letter-spacing: 1.8px;
        line-height: 1.8;
    }
    /* new */

    /* sec-03 */

    .sec-03 {
        padding-top: 100px;
    }
    .sec-03 .inner {
        width: 88%;
        margin: 0 auto;
    }
    .sec-03-text-sp {
        display: none;
    }
    .sec-03-bg {
        position: relative;
        width: 80%;
        height: auto;
        margin: 0 auto;
    }
    .sec-03-bg p.sec-03-text-up {
        position: absolute;
        width: 100%;
        text-align: left;
        top: 0;
        left: 0;
        letter-spacing: 5px;
        line-height: 2;
    }
    .sec-03-bg p.sec-03-text-down {
        position: absolute;
        text-align: right;
        width: 100%;
        top: 65%;
        left: 0;
        letter-spacing: 5px;
        line-height: 2;
    }
    .sec-03-text {
        width: 86%;
        margin: 0 auto;
        text-align: left;
        letter-spacing: 1.8px;
        line-height: 1.8;
    }
    .sec-03-text-d {
    width: 74%;
    }
    .sec-03-pic-hand img{
        width: 60%;
        margin: 0 auto;
        text-align: center;
    }

    /* sec-04 */

    .sec-04 {
        padding-top: 100px;
    }
    .sec-04 .inner {
        width: 88%;
        margin: 0 auto;
    }    
    .sec-04-prof {
        width: 70%;
        margin: 50px auto;
        border: 2px solid #000000;
    }
    .prof {
        float: left;
        padding: 30px 50px 30px 30px;
    }
    .prof img {
        width: 200px;
    }
    .sec-04-text {
        padding: 10px;
        text-align: left;
        letter-spacing: 1.5px;
        line-height: 2;
    }
    .sec-04-li {
        list-style:none
    }
    .sec-04-li a {
        text-decoration: none;
    }
    .prof-link li a {
        text-align: left;
        display: block;
    }
    /* sec-05 */

    .sec-05 {
        padding-top: 100px;
    }
    .sec-05 .inner {
        width: 62%;
        margin: 0 auto;
    }    
    .sec-05-text {
        padding-bottom: 30px;
    }

    /* footer-banner */

    .footer-banner {
        padding: 100px 0 65px 0;
    }
    .footer-banner img {
        width: 80%;
        padding-bottom: 50px;
    }
    .innner {
        width: 80%;
        margin: 0 auto;
    }
    .flex-03 {
        position: relative;
        width: 50%;
        height: 200px;
        background-color: #fff;
    }
    .flex-03 img {
        width: 100%;
    }
    
    .flex-04 {
        position: relative;
        width: 50%;
        height: 200px;
        background-color: #fff;
    }
    .flex-04 img {
        width: 100%;
    }

    /* footer */

    .flexbox {
        display: flex;
    }
    .flex-01 {
        position: relative;
        width: 50%;
        height: 300px;
        background-color: #ff8c00;
    }
    .flex-01 p {
        width: 60%;
        color: whitesmoke;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
        text-align: left;
        line-height: 1.8;
    }
    .flex-02 {
        position: relative;
        width: 50%;
        height: 300px;
        background-color: #0D2B6E;
    }
    .flex-02 p {
        width: 60%;
        color: whitesmoke;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
        text-align: left;
        line-height: 1.8;
    }

}