@charset "UTF-8";

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


    /* -------------------------------------
基本設定 
----------------------------------------*/




    .more-wrap-1 {
        margin-top: 10px;
        margin-bottom: 120px;
    }

    .more-wrap-2 {
        margin-top: 6px;
        margin-bottom: 66px;
    }

    .more-wrap-3 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .more-wrap-1,
    .more-wrap-2,
    .more-wrap-3 {
        display: flex;
        justify-content: center;
    }





    /* ---------------------------
全体
------------------------------ */



    h1 {
        margin: 0;
    }


    .h1-design p {
        /* text-align: center; */
        /* margin-left: 30px;
        margin-top: 20px; */
        /* margin-bottom: 5px; */
        /* margin-right: 30px; */
        font-size: 22px;
        /* font-family: serif; */
        font-weight: 700;
    }


    .h1-design h1 {
        font-size: 14px;
        line-height: 1.8;
        color: #6c4e39d1;
        /* text-align: center; */
        /* margin-top: 70px; */
        /* padding-left: 30px;
        margin-bottom: 20px; */
        /* margin-bottom: 100px; */
        /* border-top: dotted 3px;
    border-bottom: dotted 3px; */
        /* border-radius: d999px; */
    }

    .h1-border {
        margin: 48px;
        margin-bottom: 120px;
        margin-top: 200px;
        /* border-top: dotted px; */
        /* border-bottom: dotted 3px; */
        /* padding-bottom: 30px; */
    }






    .more {
        padding: 8px 36px;
        font-size: 18px;
    }


    h2 {
        font-size: 50px;
        text-align: center;
        margin: 0;
        /* padding-bottom: 10px; */
    }




    #works h2 {
        padding-top: 95px;
    }

    #about h2 {
        padding-top: 70px;

    }




    #skill h2,
    #illust h2 {
        padding-top: 120px;
    }

    .h1-img {
        width: 36%;
        display: flex;
        margin-top: 20px;
        margin-left: auto;
        /* margin-bottom: 30px; */
        padding-right: 20px;
    }

    /* ---------------------------
header写真の有無
------------------------------ */

    .home-img-2 {
        display: none;
    }








    /* -------------------------------------
header 
----------------------------------------*/
    #menu-toggle {
        display: none;
    }

    .hamburger {
        position: fixed;
        top: 16px;
        left: 20px;
        width: 32px;
        height: 24px;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #856147;
        margin: 5px 0;
        transition: 0.3s;
    }

    .nav {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.95);
        transform: translateX(-100%);
        transition: 0.3s;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-list {
        list-style: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        padding-right: 40px;
        padding-bottom: 13px;
    }

    .nav-list-item {
        margin: 24px 0;
    }

    .nav-list-item a {
        font-size: 1.5rem;
        color: #856147;
        text-decoration: none;
    }

    #menu-toggle:checked~.nav {
        transform: translateX(0);
    }

    #menu-toggle:checked+.hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    #menu-toggle:checked+.hamburger span:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked+.hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .hamburger {
        position: fixed;
        top: 16px;
        left: 16px;
    }

    .hamburger::after {
        content: "MENU";
        font-family: "helvetica-lt-pro", sans-serif;
        /* ← 初期表示 */
        position: absolute;
        left: 0;
        font-size: 9px;
        font-weight: 900;
        color: #856147;
        letter-spacing: 0.2em;
        transition: 0.3s;
    }

    #menu-toggle:checked+.hamburger::after {
        content: "CLOSE";
        letter-spacing: 0.05em;
    }



    /* -------------------------------------
home 
----------------------------------------*/

    /* .balloon {
        position: relative;
        display: inline-block;
        margin: 1.5em 0;
        padding: 24px 20px;
        padding-top: 20px;
        min-width: 120px;
        max-width: 100%;
        font-size: 17px;
        background: #f6ecec;
        border-radius: 999px;
        border: solid 1px #D9C7B9;
        box-sizing: border-box;
        text-align: center;
    } */

    /* .balloon:before {
        content: "";
        position: absolute;
        bottom: -36px;
        left: 85%;
        margin-left: -18px;
        border: 18px solid transparent;
        border-top: 18px solid #f6ecec;
        z-index: 2;
    } */

    /* .balloon:after {
        content: "";
        position: absolute;
        bottom: -39px;
        left: 85%;
        margin-left: -20px;
        border: 20px solid transparent;
        border-top: 19px solid  #D9C7B9;
        z-index: 1;
    }

    .balloon p,
    h1 {
        margin-top: 30px;
        padding-bottom: 5px;
    } */























    /* -------------------------------------
works
----------------------------------------*/


    #works {
        /* background-image: url(../img/dots.png); */
        /* opacity: 40%; */
    }

    .works-item-1,
    .works-item-2,
    .works-item-3,
    .works-item-4,
    .works-item-5,
    .works-item-6 {
        /* border: solid 2px #beac9ee2; */
        background-color: rgba(186, 107, 113, 0.044);
        /* margin-right: 85px; */
        /* margin-left: 50px; */
        /* margin-bottom: 30px; */
        border-radius: 5px;
        overflow: hidden;
        font-size: 11px;

    }





    #works p {
        text-align: center;
        /* font-family: sans-serif;
        font-weight: 00; */
        margin-top: 38px;
        margin-bottom: 20px;
        color: #856147e0;
    }

    .works-text {
        font-size: 12px;
    }


    .text-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .arrow {
        font-size: 12px;
        font-weight: 700;
        margin-right: 8px;
    }

    .text-area-right {
        display: flex;
        align-items: center;
    }

    .works-item {
        padding: 18px;
        padding-top: 2px;

    }


    .works-item ul {
        padding: 0;
        margin-top: 0;


    }

    .works-item h3 {
        font-size: 11px;
        margin-top: 8px;
    }

    .works-item-1 img,
    .works-item-2 img,
    .works-item-3 img,
    .works-item-4 img {
        width: 70%;
        padding-top: 18px;
        margin-top: 5px;
    }


    .works-item-5 img,
    .works-item-6 img {
        padding-top: 32px;
        padding-bottom: 28px;
        margin-top: 15px;
    }

    /* Worksを2列にする */
    .works-item ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0;
        align-items: start;
        margin: 2px;
    }

    /* -------------------------------------
about
----------------------------------------*/

    #about {
        background-color: #F0EAE3;
        padding-bottom: 30px;
    }


    #about img {
        width: 165px;
        margin-top: 62px;
        /* margin-bottom: 30px; */
        border-radius: 999px;
    }

    .about-item {
        /* border: solid 1.5px #D9C7B9; */
        margin: 50px;
        margin-top: 20px;
        border-radius: 18px;
        /* margin-bottom: 90px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fffdf8d9;
        font-size: 12px;
        /* box-shadow: 0px 4px 4px #d9c7b9; */
    }

    .about-name {
        text-align: center;
        font-size: 16px;
    }



    .about-explanation,
    .skill-Photoshop span,
    .skill-HTML span {

        line-height: 23px;
    }


    .about-explanation {
        /* text-align: center; */
        margin: 20px 40px;
    }




    /* -------------------------------------
skill
----------------------------------------*/



    h4 {
        /* margin-bottom: 2px; */
        font-size: 18px;
    }





    .inner {
        /* margin-right: 48px; */
        margin: 54px;
        font-size: 12px;
        line-height: 1.5;
    }



    .skill-Photoshop span,
    .skill-HTML span {
        font-size: 10px;

    }


    .inner p {
        /* margin-top: 14px; */
        margin-bottom: 3px;
    }

    .inner ul {
        padding: 0;
    }

    .skill-Illustrator,
    .skill-Photoshop,
    .skill-Figma,
    .skill-HTML,
    .skill-CSS,
    .skill-JavaScript {
        margin-bottom: 40px;
        /* border: dotted; */
        /* border-left: solid 2px #beac9e; */
        /* border-right: solid 2px #beac9e; */
        /* border-radius: 14px; */
        /* padding: 2px 10px; */
    }

    .skill-flex {
        display: flex;
        align-items: center;
        gap: 16px;
        border-bottom: dotted 3px #85614782;
    }

    .skill-flex img {
        width: 38%;

    }

    .skill-item {
        /* background-color: #a98c7816; */
        /* border-top: dotted; */
        /* border-radius: 10px; */
        padding: 2px;
    }

    /* -------------------------------------
illust
----------------------------------------*/

    #illust {
        /* background-color: #f6ecec98; */
        border-radius: 999px;
        margin: 0;
    }

    .pagetop a img {
        width: 120px;

    }

    .page-top-wrap {
        display: flex;
        justify-content: flex-end;

    }




    .illust-list ul {
        display: flex;
        /* gap: 10px; */
        padding: 0;
    }

    .illust-list img {
        width: 100%;
        height: auto;
        margin-bottom: 46px;
    }

    #illust p {
        padding: 20px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        /* background-color: #f6ecec; */
    }


    /* -------------------------------------
contact
----------------------------------------*/
    .contact-item {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 10px 40px;
        line-height: 2.8;

    }

    .container {
        padding-top: 120px;
    }

    .container p {
        font-size: 12px;
        margin-top: 28px;
        /* margin-bottom: 20px; */
    }



    footer {
        font-size: 14px;
        background-size: 100%;
        min-height: 45vh;
        /* background-image: linear-gradient(184deg, #fffdf8, #eed5d4); */
        background-image: linear-gradient(180deg, #fffdf8, #f3e2e1);



        /* background-image: url(../img/sp-footer-background.png); */
    }

    #contact img {
        margin-top: 24px;
        width: 50px;
    }


    .small {
        margin-top: 30px;
        margin-bottom: 0;
    }

    #contact h2 {
        padding: 0;
    }



    .pagetop {
        margin: 3px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }




    /* -------------------------------------
production
----------------------------------------*/


    .production h1 {
        margin-top: 100px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 25px;
    }

    .production-1 h1 {
        margin-top: 100px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 25px;
    }


    .production img {
        /* border: solid; */
        width: 50%;
        display: block;
        margin: 0 auto;
    }

    .production-1 img {
        width: 80%;
        display: block;
        margin: 0 auto;
    }

    .production-item h3 {
        margin-top: 30px;
        border-bottom: dotted 3px;
    }

    .production-item h3::before {
        content: "⚪︎";
    }

    .production-item p {
        margin: 0;
    }

    .production-item ul {
        padding: 30px;
    }

    .back-item {
        display: flex;
        justify-content: center;
    }

    .back {
        padding: 6px 36px;
        margin-bottom: 30px;
        font-size: 18px;
        font-family: "stix-two-text", serif;
        font-weight: 700;
        font-style: normal;
        border: dotted 3px #856147;
        border-radius: 999px;
        background-color: #D9C7B9;
        color: #856147;
    }














}