@charset "utf-8";

    /*＝＝＝＝＝＝＝＝＝＝ここからスマホレスポンシブ設定＝＝＝＝＝＝＝＝＝＝＝＝*/
    @media screen and (max-width: 480px) {


        /*        【 index 】*/

        .wrap{
            overflow: hidden;
        }
        .wrapper,
        .about,
        .workshome {
            width: 100%;
            max-width: 480px;
            height: 100vh;
            max-height: 640px;
            /*            border: 1px solid red;*/
            text-align: center;
        }
        
        h1 {
            padding: 10px;
        }

        .ocean img {
            display: none;
        }

        .ocean2 {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
        }

        .contactback {
            display: none;
        }

        .contactback2 {
            display: flex;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -1;
        }

        .comment p {
            position: absolute;
            top: -150px;
            right: 0px;
            z-index: 999;
            color: white;
            font-size: 0.8em;
        }

        .comment p img {
            display: none;
        }

        .contact {
            margin: 40px 0 0 30px;
            font-size: 0.8em;
            text-align: left
        }

        /*        ===============================================*/

        /*      ☆ナビ(main)の設定☆*/
        nav.main ul {
            width: 180px;
            margin: 300px 0 0 200px;
        }

        nav.main ul li {
            text-align: right;
        }

        nav.main ul li a {
            font-size: 2em;
            text-align: right;
            /*        float: left;*/
            border-right: 1px solid;
            vertical-align: 20px;
        }

        /*      ☆ナビ(sub)の設定☆*/
        nav.sub {
            width: 100%;
            max-width: 480px;
            height: 35px;
        }

        nav.sub ul {
            width: 100%;
            font-size: 0.5em;
        }

        nav.sub ul li {
            width: calc(100% / 5);
            float: left;
            margin: 0;
        }

        nav.sub ul li a {
            border-right: 1px solid white;
            text-align: center;
        }
        nav.sub ul li:last-child a{
            border-right: none;
        }

        /*      ☆ナビ(about)の設定☆*/

        nav.aboutnav {
            margin: 0;
            padding: 0;
            z-index: 99;
            width: 100%;
            max-width: 450px;
            font-family: "Didot";
        }

        nav.aboutnav ul {
            padding-left: 50px;
        }

        nav.aboutnav ul li {
            width: 20%;
            margin-left: 8px;
        }

        nav.aboutnav ul li a {
            color: white;
        }

        /*   =======   【about me】=======*/
        .about {
            width: 100%;
            max-width: 480px;
            /*        margin: 0 auto;*/
        }

        .about img {
            width: 90%;
            height: auto;
        }

        .about p {
            font-size: 0.6em;
        }

        .aisatsu {
            height: 300px;
            margin: 420px 0 0 0;
            padding-left: 20px;
            text-align: left;
        }

        .aisatsu p {
            margin-top: 20px;
        }

        .me {
            display: none;
        }

        .me_smart {
            position: absolute;
            display: flex;
            top: 0;
            right: 0;
            z-index: -1;
        }

        .me_smart img {
            width: 100%;
        }

        .aboutme {
            top: 300px;
        }

        .backbutton {
            display: none;
        }

        .about h2 {
            margin: 20px 0 0 5px;
            width: 40%;
        }

        .vision {
            margin: 0;
        }

        .vision p {
            font-size: 0.6em;
            margin: 10px;
            ;
        }

        /*   ==========   【workshome】=========*/
        .workshome {
            /*            border: 2px solid #A21D7F;*/
            width: 100%;
            max-width: 480px;
/*            border: 1px solid red;*/
/*            overflow: hidden;*/
            height: auto;
        }

        .workshome p {
            font-size: 1em;
        }

        .workshome figcaption {
            font-size: 0.5em;
            width: 300px;
        }

        .workshome img {
            width: 85%;
            height: auto;
        }

        .workshome h2 {
            width: 30%;
            height: auto;
            text-align: left;
            margin-left: 10px;
        }


        .comment {
            position: sticky;
        }


        .web {
            flex-wrap: none;
        }

        .video1 {
            float: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
        }

        .video1 p,
        .video2 p {
            font-size: 0.7em;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        .video2 {
            float: none;
            margin: 0 auto;
            padding: 0;
            width: 100%s;
            height: auto;
        }

        .class {
            background-image: none;
/*            border: 1px solid yellow;*/
            height: 700px;
        }

        .middle {
            width: 100%;
            height: 250px;
            padding-top: 10px;
            margin: 0 auto;
/*            border: 1px solid lime;*/
        }

        .middle p {
            align-items: center;
/*            border: 1px solid lime;*/
            width: 300px;
        }

        .middle img {
            float: left;
            width: 40%;
            height: auto;
/*            border: 1px solid blue;*/
            margin: 10px;
            text-align: center;
        }
        .middle p{
            margin: 0 auto;
        }

        .leader img {
            width: 70%;
            margin: 5px;
        }
        .leader p{
            margin: 0 auto;
        }

        p.bannerdetail {
            position: absolute;
            font-size: 0.2em;
            text-align: left;
            left: 40px;
            top: 500px;
            width: 300px;
        }


        .own {
            background: none;
            height: 400px;
        }

        p.smartmidashi {
            display: flex;
            margin: 5px;
            width: 153px;
            height: 71px;
        }

        .horor p {
            float: none;
            font-size: 0.4em;
        }

        .horor p img {
            margin: 10px;
        }

        .cafe {
            float: none;
        }

        .logo {
            max-width: 400px;
        }

        .logo img {
            width: 45%;
            height: auto;
        }

        .photo {
            height:1200px;
            margin-bottom: 160px;
        }

        .photo1 {
            width: 400px;
        }

        .photo1 p {
            margin: 3px;
        }

        .photo2 {
            width: 400px;
        }

        .photo2 p {
            margin: 3px;
        }
        
        .webD{
            clear: both;
            display: block;
        }

        /*===============ここからWEBページ詳細================*/
        .detail {
            width: 100%;
            max-width: 480px;
            height: auto;
            box-sizing: border-box;
        }

        .number {
            margin: 0;
            width: 30%;
        }

        .detail table {
            font-size: 0.2em;
        }

        .detail img {
            width: 40%;
            height: auto;
            margin: 0 auto;
        }

        figure.design {
            /*            float: none;*/
            margin: 0;
        }

        figure.before {
            /*            float: none;*/
            margin: 0;
            padding: 0;
        }

        .detail figcaption {
            width: 300px;
            font-size: 0.6em;
        }

        /*        ★表設定*/
        .detail table .gray {
            padding: 5px 5px 5px 5px;
            width: 80px;
        }

        .detail table .white {
            padding: 10px 10px 10px 15px;
            width: 300px;
            /*            border: 1px solid red;*/
        }

        .img {
            margin: 0 auto;
        }

        .screen {
            width: 100%;
        }
    }