/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}






/* ここから */
p, h1, h2, h3, h4, h5, h6,span{
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W2", sans-serif;
    color:#333;
    letter-spacing: 1px;
    font-weight: 200;
  }

header{
    padding: 15px 10px;
}

header .logo{
    width:100px;
}

.top img{
    width: 100%;

    @media screen and (max-width:767px){
        width: auto;
        height: 500px;
        object-fit: cover;
    }
}



.problem{
    background-color:#e9e6e2;
    text-align: center;
    padding-bottom: 60px;

    .container{
        padding:50px 12px 0 12px;
    }

    h2{
        font-size:18px;
        font-weight: 200;
        line-height: 36px;
        margin-top: 50px;
    }

    .content{
        margin-top:50px;
    }

    @media screen and (min-width:768px){
        padding-bottom: 100px;
    }
}


.problem .theme {
    h1{
        font-size:35px;
        font-weight: 200;
        letter-spacing: 5px;
    }

    span{
        font-size:25px;
    }

    p{
        font-size: 25px;
        font-family: "din-2014", sans-serif;
        font-weight: 300;
        letter-spacing: 2px;
        margin-top: 10px;
    }

    p::after{
        content: "";
        display: block;
        width: 1px;
        height: 60px;
        background-color: #333;
        margin: 0 auto;
        margin: 35px auto 0;
    }

}


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

    .problem .theme {
        h1{
        font-size:30px;
        letter-spacing: 4px;
        }

        span{
        font-size:22px;
        }

        p{
        font-size: 22px;
        letter-spacing: 2px;
        margin-top: 10px;
        }
    }
    .problem h2{
        font-size:15px;
        line-height: 36px;
    }
}


.problem-wrapper{
    display: flex;
    gap:15px;
    justify-content: center;
    text-align: left;

    img{
        width:80px;
    }

    h3{
        font-size: 30px;
        font-weight: 200;
        line-height: normal;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    h3 span{
        font-size:20px;
        line-height: 30px;
    }

    h3 span::before{
        content: "";
        display: inline-block;
        width: 15px;
        height: 1px;
        background-color: #333;
        margin-right: 15px;
        vertical-align: middle;
    }

    p{
        font-size:14px;
        margin-top:5px;
    }

    +.problem-wrapper{
        margin-top: 50px;
    }
}

@media screen and (max-width:767px){
    .problem-wrapper{
        display: flex;
        gap:10px;
        justify-content: center;
        text-align: left;
        align-items: center;

        img{
            width:60px;
            height: 60px;
        }
    
        h3{
            font-size: 24px;
            font-weight: 200;
            gap: 10px;
        }
    
        h3 span{
            font-size:18px;
            line-height: 30px;
        }
    
        h3 span::before{
            width: 15px;
            height: 1px;
            margin-right: 15px;
        }
    
        p{
            font-size:13px;
            margin-top:0px;
        }
    
        +.problem-wrapper{
            margin-top: 50px;
        }
    }    
}

.approach{
    margin:50px auto 0;
    position: relative;
    width:665px;
    
    .content{
       display: flex; 

       li{
            font-size: 16px;

            + li{
                padding-top: 10px;
            }
        }
    }
}

@media screen and (max-width:767px){
    .approach{
        width:100%;
        
        .content{
            li{
                font-size: 14px;

                + li{
                    padding-top: 15px;
                }
            }
        }
    }
}

.beforeafter{
    position: absolute;
    top:20%;
    left: 0%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    width: 100%;
    padding:0 35px;

    img{
        width: 50%;
        height: 7px;
    }

    p{
        font-size: 14px;
        font-family: "din-2014", sans-serif;
    }
}

.before{
    background-color: #cfcfcc;
    padding: 100px 35px 50px 35px;
    width: 50%;
    border-radius: 15px 0 0 15px;

    li{
        text-align: left;
    }
}

.after{
    background-color: #fff;
    padding: 100px 35px 50px 35px;
    width: 50%;
    border-radius:  0 15px  15px 0;

    li{
        text-align: right;
    }
}

@media screen and (max-width:767px) {
    .beforeafter{
        position: absolute;
        top:15%;
        left: 0%;
        display: flex;
        align-items: center;
        justify-content:space-between;
        width: 100%;
        padding:0 25px;
    
        img{
            width: 50%;
            height: 7px;
        }

        p{
            font-size: 14px;
            font-family: "din-2014", sans-serif;
        }
    }
    
    .before{
        padding: 75px 15px 50px 25px;
    }
    
    .after{
        padding: 75px 25px 50px 15px;
    }
}

.wave {
    line-height: 0;
    font-size: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;

    img{
        width:100%;
        display: block;
        margin: 0;
        padding: 0;
    }
}


.title{
    h2{
        font-family: "linotype-didot", serif;
        font-weight: 400;
        font-size: 50px;
        letter-spacing: 2px;

        @media screen and (min-width:768px){
            font-size:60px;
        }
    }

}

.method-theme{
    background-color: #cfcfcc;
    position: relative;

    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('img/zen_1.png');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: auto 67%;
        opacity: 0.1; /* ここで濃度を調整（0〜1） */
        pointer-events: none;
        margin-top: 50px;
    }

    .container{
        position: relative;
        z-index: 1;
        padding: 70px 12px 150px;
        text-align: center;
    }

    .title{
        h3{
            font-family: "linotype-didot", serif;
            font-weight: 400;
            font-size: 35px;
            margin-top: 50px;
        }
        
        p{
            font-size:16px;
        }
    }

    .explaination{
        p{
            font-size:14px;
            line-height: 28px;
            letter-spacing: normal;
            margin-top:35px;
        }
    }

    @media screen and (min-width:768px){
        &::before{
            background-size: auto 80%;
            background-size: auto 60%;
            margin-top: 100px;
        }


        .container{
            padding: 100px 64px 300px;
        }

        .title{
            h3{
                font-size: 40px;
                margin-top: 75px;
            }
            
            p{
                font-size:24px;
            }
        }

        .explaination{
            p{
                font-size:16px;
                line-height: 32px;
                margin-top:50px;
            }
        }
    }
}

.method-contents{
    position: relative;
}

.nerve-wrapper{
    display: flex;

    .title{
        display: inline-block;
        position: absolute;
        top:-25px;
        left: 50%;
        transform: translateX(-50%);
        width:125px;
        border-radius: 100px;
        padding:8px 17px;
        border:1px solid #333;
        z-index: 10;

        p{
            letter-spacing: 1px;
        }
    }

    .method-goal img{
        position: absolute;
        width:50px;
        bottom:35px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.nerve01{
    background-color: #fff;
    width: 50%;
    text-align: center;
    position: relative;
    min-height: 1400px;

    .title{
        background-color: #333;

        p{
            color:#fff;
        }
    }

    .method-wrapper {
        h4{
        background-color: #333;
        color:#fff
        }

        p{
            background-color: #fff;
            padding: 0 5px;
            display: inline-block;
        }
    }
}

.nerve02{
    background-color: #e9e6e2;
    width: 50%;
    text-align: center;
    position: relative;
    min-height: 2080px;

    .title{
        background-color: #fff;
        z-index: 100;
    }

    .method-wrapper {        
        h4{
            background-color: #fff;
            color:#333;
        }

        p{
            background-color: #e9e6e2;
            padding: 0 5px;
            display: inline-block;
        }
    }
}

@media screen and (max-width:767px) {
    .nerve01{
        background-color: #fff;
        width: 50%;
        text-align: center;
        position: relative;
        min-height: 1400px;
    
        .title{
            background-color: #333;
    
            p{
                color:#fff;
            }
        }
    
        .method-wrapper {
            h4{
            background-color: #333;
            color:#fff
            }
    
            p{
                background-color: #fff;
                padding: 0 5px;
                display: inline-block;
            }
        }
    }


    .nerve02{
        background-color: #e9e6e2;
        width: 50%;
        text-align: center;
        position: relative;
        min-height: 1540px;

        .title{
            background-color: #fff;
            z-index: 100;
        }

        .method-wrapper {        
            h4{
                background-color: #fff;
                color:#333;
            }

            p{
                background-color: #e9e6e2;
                padding: 0 5px;
                display: inline-block;
            }
        }
    }
}


.method-line{
    position:absolute;
    top:0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    
    img.line_sp{
        display:none;
        margin: 0 auto;
    }

    img.line_pc{
        display: block;
        width: 550px;
    }

    @media screen and (max-width:768px) {
        img.line_sp{
            display:block;
            width:250px !important;
            max-width: none !important;
        }

        img.line_pc{
            display: none !important;
        }     }
}

.method-wrapper{
    position: relative;
    z-index: 10;

    img{
        width:250px !important;
        margin:0 auto;
        margin-top: 30px;
    }

    h4{
        border-radius: 100px;
        padding:5px 17px;
        border:1px solid #333;
        font-weight:300 ;
        text-align: center;
        margin: 0 auto;
        margin-top: 25px;
        font-size:16px;
        width: fit-content;
    }

    p{
        font-size:12px;
        margin-top: 10px;
        line-height: 20px;
    }

    @media screen and (max-width:767px) {
        h4{
            margin-top:10px;
            font-size:14px;
        }

        p{
            line-height: 18px;
        }
    }
}


@media screen and (max-width:767px) {
    .method-wrapper{
    img{
        width:150px !important;
        margin-top: 30px;
    }
    }
}

    .method_01,.method_02,.method_03,.method_04,.method_05,.method_06{
        position: absolute;
        left: 50%;
        width: 100%;
        opacity: 0;
        transition: opacity 4.5s ease, transform 2s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* nerve01の要素（左から）- アニメーション前 */
    .nerve01 .method-wrapper .method_01:not(.animate-in),
    .nerve01 .method-wrapper .method_05:not(.animate-in),
    .nerve01 .method-wrapper .method_06:not(.animate-in){
        transform: translateX(-200%);
    } 

    /* nerve02の要素（右から）- アニメーション前 */
    .nerve02 .method-wrapper .method_02:not(.animate-in),
    .nerve02 .method-wrapper .method_03:not(.animate-in),
    .nerve02 .method-wrapper .method_04:not(.animate-in){
        transform: translateX(100%);
    }

    /* アニメーション実行時 */
    .nerve01 .method-wrapper .method_01.animate-in,
    .nerve01 .method-wrapper .method_05.animate-in,
    .nerve01 .method-wrapper .method_06.animate-in,
    .nerve02 .method-wrapper .method_02.animate-in,
    .nerve02 .method-wrapper .method_03.animate-in,
    .nerve02 .method-wrapper .method_04.animate-in{
        transform: translateX(-50%);
        opacity: 1;
    }

    .method_01{
        top:50px;
    }

    .method_02{
        top:200px;
    }

    .method_03{
        top:520px;
    }

    .method_04{
        top:900px;
    }

    .method_05{
        top:650px;
    }

    .method_06{
        top:1000px;
    }

    @media screen and (min-width:768px) {
        .method_01{
            top:20px;
        }
    
        .method_02{
            top:90px;
        }
    
        .method_03{
            top:550px;
        }
    
        .method_04{
            top:1050px;
        }
    
        .method_05{
            top:1000px;
        }
    
        .method_06{
            top:1500px;
        }     }



.staff-wrapper{
    background: linear-gradient(to bottom, transparent, #e9e6e2);
    text-align: center;
    padding: 75px 0;

    @media screen and (min-width:768px){
        padding: 120px 0;
    }
}

.ceo-wrapper{
    padding: 0px 14px;

    img{
        width: 300px;
        height: 300px;
        object-fit: cover;
        margin: 25px auto 25px;
    }

    span{
        font-size: 18px;
        letter-spacing: 10px;
    }

    .name{
        display: flex;
        align-items: center;
        justify-content: center;
        margin:5px 0 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid #bdbdbd;


        p{
            font-size:24px;
            letter-spacing: 5px;
            line-height: normal;
            text-align: center;
        }

        span{
            font-size: 14px;
            letter-spacing: 1px;
            padding-left: 15px;
        }
    }

    p{
        font-size: 14px;
        line-height: 24px;
        padding-bottom: 7px;
        text-align: left;
    }

    .message{
        margin-top: 25px;

        summary{
            font-size: 24px;
            font-weight: 200;
            letter-spacing: 3px;
            cursor: pointer;
            list-style: none;
            padding: 15px 0;
            border: 1px solid #bdbdbd;
            color:#333;
            border-right: none;
            border-left: none;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        summary::-webkit-details-marker{
            display: none;
        }

        summary svg{
            transition:transform 0.6s cubic-bezier(0.4, 0, 1, 1);
            padding-top: 10px;
        }

        p{
            padding: 0 15px;
            text-align: left;
            overflow: hidden;
            height: 0;
            opacity: 0;
            transition: height 0.6s ease, opacity 0.6s ease, padding 0.6s ease;
        }

    }

    @media screen and (min-width:768px){
        .ceo{
        display: flex;
        margin: 100px auto 75px;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        gap: 50px;
        width: 80%;
        max-width:900px;
        }

        .container{
            text-align: left;
        }

        img{
            max-width: 400px;
            width: 50%;
            height: auto;
            margin: 0;
        }

        span{
            white-space: nowrap;
        }



        .name{
            justify-content: left;


        p{
            font-size:28px;
            letter-spacing: 5px;
            line-height: 40px;
        }

        span{
            font-size: 14px;
            letter-spacing: 1px;
            padding-left: 15px;
        }
        }

        .message{
            width: 80%;
            max-width: 900px;
            margin:0 auto;
/* 
            summary{
                border-right: 1px solid #333;
                border-left: 1px solid #333;
            } */
            p{
                padding: 50px 64px;
            }
        }

    }
}

.ceo-wrapper details[open] summary svg{
    transform: rotate(180deg);
    transition: transform 0.6s ease;
    margin-top:10px;
}

.members{
    padding:70px 0 0;
    .title{
        h3{
            /* font-family: "Shippori Mincho", serif; */
            font-size: 30px;
            font-weight: 500;
            margin-bottom: 35px;
        }
    }

    .container{
        text-align: center;
    }

    @media screen and (min-width:768px){
        padding:150px 0 0;

        .title{
            h3{
                font-size: 36px;
            }
        }
    }
}

.staff01,.staff02{
    /* background-color: #e9e6e27a; */
    border:1px solid #bdbdbd;
    border-radius: 12px;
    padding: 25px 24px;
    margin: 0 auto;
    width: calc(100% - 24px);
    max-width: 500px;
    text-align: center;

    img{
        width:300px;
        height: 300px;
        object-fit: cover;
        margin: 0 auto;
        border-radius: 6px;
    }

    p{
        font-size: 14px;
        line-height: 24px;
        /* background-color: #fff;
        padding: 10px; */
        /* border-radius: 10px; */
    }

    .name{
        display: inline-block;
        margin-top: 25px;
        /* padding: 7px 25px;
        background-color: #333;  */
        /* border-radius: 50px; */

        p{
            font-size:24px;
            font-weight: 300;
            padding: 0;
        }
    }

    span{
        margin: 15px 0;
        display: block;
        font-size:14px;
        font-weight: 300;
    }

    span::after{
        content: "";
        display: block;
        width: 1px;
        height: 20px;
        background-color: #333;
        margin: 0 auto;
        margin: 18px auto ;
    }

    @media screen and (min-width:768px){
        width: calc(80% - 32px);
        max-width: 750px;
        padding:  50px;
        display: flex;
        flex-direction: row-reverse;
        gap:50px;
        justify-content: center;
        margin:0 auto;

        img{
            margin:0;
            width: 50%;
            height: auto;
        }

        .wrap{
            text-align: left;
            width: 50%;
        }

        .name{
            display: inline-block;
            margin-top: 25px;
            /* padding: 7px 25px;
            background-color: #333;  */
            /* border-radius: 50px; */
    
            p{
                font-size:26px;
                font-weight: 300;
                padding: 0;
                width: auto;
            }
        }

        span::after{
            margin:18px 50px;
        }
    }
}


.offer-wrapper{
    text-align: center;
    padding:100px 15px 200px;
    margin-bottom: -150px;
    background-color: #f2f2f2;


    h3{
        font-size: 24px;
        font-weight: 200;
        margin-top: 50px;
    }

    p{
        font-size:16px;
        line-height: 30px;
    }

    @media screen and (max-width:768px){
        padding: 75px 15px 220px;

        p{
            font-size:14px;
            line-height: 26px;
        }
    }

}

.first-session{
    h4{
        display: inline-block;
        font-size:18px;
        font-weight: 200;
        letter-spacing: 2px;
        margin: 0 auto;
        margin-top: 15px;
        background-color: #333;
        color: #fff;
        border-radius: 100px;
        padding: 7px 20px;
    }

    p{
        font-family: "din-2014", sans-serif;
        font-size: 60px;
        letter-spacing: 1.5px;
        line-height: normal;
        margin: 10px 0;
    }

    span{
        font-size:24px;
        padding-left: 10px;
    }

    @media screen and (min-width:768px){
    h4{
        font-size:20px;
        margin-top: 25px;
        padding: 10px 30px;
    }

    p{
        margin:15px 0 35px;
    }
    }
}


.price-sale{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 35px auto;
    gap:10px;
    background-color: #fff;
    text-align: center;    
    padding: 20px 12px;
    border-radius: 10px;

    img{
        width:60px;
    }

    @media screen and (min-width:768px){
        width: fit-content;
        padding: 30px 70px;
    }
}

.price-before ,.price-after{
    display: flex;
    align-items: center;

    p{
        font-family: "din-2014", sans-serif;
    }

    span{
        font-size:14px;
        line-height: 20px;
    }
}

.price-before{
    p{
        font-size: 24px;
        line-height: 24px;
    }
}

.price-after{
    p{
        font-size: 36px;
        line-height: 28px;
    }

    span{
        font-size:20px;
    }
}


@media screen and (min-width:768px){    
    .price-before ,.price-after{  
        align-items: baseline;

        span{
            font-size:20px;
            line-height: 20px;
        }
    }
    
    .price-before{
        p{
            font-size: 40px;
            line-height:40px;
        }
    }
    
    .price-after{
        p{
            font-size: 50px;
            line-height: 50px;
        }
    
        span{
            font-size:25px;
            line-height: 25px;
        }
    }
}

.free-join{
    border:1px solid #333;
    margin:50px 0px 0px;
    text-align: center;
    border-radius: 8px;

    .title{
        text-align: center;
        p{
            font-size:18px;
            margin: 0 auto;
            margin-top: -15px;
            background-color: #f2f2f2;
            width: fit-content;
            padding: 0 10px;
        }
    }

    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 20px 30px;
        gap:7px;
        
        p{
            font-size:50px;
            font-family: "din-2014", sans-serif;
            line-height: 50px;
        }

        span{
            font-size:25px;
            line-height: 20px;
        }

        @media screen and (min-width:768px){
            gap:15px;
            p{
                font-size:60px;
                line-height: 55px;
            }

        }
    }

    .join-price{
        p{
            font-size:32px;
            font-family: "din-2014", sans-serif;
            line-height: 32px;
        }

        span{
            font-size:14px;
        }

        p + p{
            margin-top: 10px;
        }

        @media screen and (min-width:768px){
            p{
                font-size: 40px;
            }

            span{
                font-size:20px;
            }
            p + p{
                margin-top: 20px;
            }
        }
    }

    img{
        width: 70px;
    }

    @media screen and (min-width:768px){
        width:fit-content;
        margin:50px auto;

        .container{
            padding: 30px 70px;
        }
    }

}

.flow-wrapper{
    text-align: center;
    background-color: #e9e6e2;
    padding:50px 12px;

    .flow{
        display: flex;
        justify-content: left;
        padding:15px 10px 0;
        margin: 0 auto;
        align-items: flex-start;
        gap:10px;

        p{
            font-family: "din-2014", sans-serif;
            font-size:36px;
            line-height: 40px;
        }

        p::after{
            content: "";
            display: block;
            width: 1px;
            height: 80px;
            background-color: #333;
            margin: 0 auto;
            margin: 15px auto 0;
        }

        .content{
            text-align: left;
            h4{
                font-size: 20px;
                margin-bottom:10px;
                padding-top: 7px;
            }

            p{
                font-size:14px;
                line-height: 28px;
            }

            p::after{
                display: none;
            }
        }
    }

    .flow:nth-child(4) p::after{
        display: none;
    }

    .container{
       width:fit-content;
       margin: 0 auto;
    }

    @media screen and (min-width:768px){
        padding: 100px 64px;

        .title{
            h2{
                margin-bottom: 50px;
            }
        }
    }
}

.price-wrapper{
    text-align: center;
    padding: 50px 12px 100px;

    .title{
        margin-bottom: 35px;
    }

    h4{
        display: inline-block;
        font-size:18px;
        font-weight: 200;
        letter-spacing: 2px;
        margin: 0 auto;
        margin-bottom:  25px;
        background-color: #333;
        color: #fff;
        border-radius: 100px;
        padding: 7px 20px;
    }

    @media screen and (min-width:768px){
        padding: 75px 64px 150px;

        .title{
            margin-bottom: 50px;
        }
        h4{
            font-size:20px;
            margin-bottom: 35px;
            padding: 10px 30px;
        }
    }
}

.premium-plan ,.ticket{
     p{
        font-size:15px;
        line-height: 28px;
        margin-bottom: 15px;
     }
    .content{
        max-width: 350px;
        text-align: center;
        margin:0 auto;
        margin-top: 5px;
        background-color: #e9e6e27a;
        text-align: center;
        padding: 7px 12px;
        border-radius: 10px;

        p{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:20px;
            font-family: "din-2014", sans-serif;
            line-height: normal;
            margin-bottom: 0;
        }

       p span{
            font-size: 16px;
            letter-spacing: 2px;
            line-height: 14px;
        }
       p span::after{
            content: "";
            display: inline-block;
            width: 60px;
            height: 1px;
            background-color: #333;
            margin:0 15px;
            vertical-align: middle;
        }

        span{
            font-size:12px;
        }
    }

    .join-price{
        margin-top: 25px;
        p{
            font-size: 14px;
            margin-bottom: 0px;
        }

        span{
            font-size: 12px;
        }
    }

    @media screen and (min-width:768px){
        p{
            font-size:16px;
            margin-bottom: 50px;
        }

        .content{
            max-width: 500px;
            padding: 12px 20px;
            margin-top: 10px;

            p{
                font-size:30px;
            }

            p span{
                font-size:20px;
            }

            span{
                font-size:16px;
            }
        }

        .join-price{
            margin-top: 50px;
            p{
                font-size:16px;
                margin-bottom:10px;
            }

            span{
                font-size:14px;
            }
        }
    }
}

.ticket{
    margin-top: 75px;

    .content{
        margin-top:10px;
    }

    @media screen and (min-width:768px){
        margin-top:100px;
    }
}

.faq{
    background-color: #333;
    padding: 50px 10px;
    text-align: center;

    h2,h4,p,span{
        color:#fff;
    }

    .title{
        h2{
            color: #fff;
            margin-bottom: 35px;
        }
    }

    .content{
        text-align: left;
        padding:0 10px;

        .question{
            border-bottom: 0.5px solid #fff;
            padding: 0 10px 20px;
            margin-bottom: 20px;
            margin-top:50px;

            span{
                font-size:20px;
            }
    
            p{
                font-size:16px;
                padding:0;
            }
        }
    
        p{
            font-size:14px;
            padding:0 10px;
        }
    }

    @media screen and (min-width:768px){
        padding:100px 64px 0;

        .title{
            h2{
                margin-bottom: 50px;
            }
        }
        .content{
            width: 80%;
            margin: 0 auto;
        }
    }

}




.access{
    text-align: center;
    padding:50px 12px;
    background-color: #333;

    h2,h4,p{
        color:#fff;
        font-weight: 200;
    }

    iframe{
        margin-top: 15px;
    }
    
    h4{
        margin-top:35px;
        font-size:30px;
    }
    p{
        font-size:13px;
        padding-top:25px;
        line-height: 20px;
    }

    @media screen and (min-width:768px){
        padding:150px 64px;

        .title{
            h2{
                margin-bottom: 50px;
            }
        }

        iframe{
            width: 50%;
        }

        h4{
            margin-top:75px;
            font-size:40px;
        }

        p{
            font-size:16px;
            line-height: 26px;
        }
    }
}

footer{
    padding: 35px 12px;
    text-align: center;

    img{
        max-width: 150px;
        margin:0 auto;
    }

    .theme{
        margin-top: 15px;
    }

    @media screen and (min-width:768px){
        padding: 50px 12px;

        img{
            max-width: 200px;
        }

    .theme{
        margin-top: 25px;
    }
    }
}