/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-size: 100%;
    font-weight: normal;
    text-decoration: none;
    line-height: 1.0;
}

/* 全体 */
body {
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

body,
a {
    letter-spacing: 0.2em;
    color: #3c3c3c;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* footer */
footer {
    padding: 95px 0;
}

footer p {
    text-align: center;
}


.container {
    max-width: 1100px;
    margin: 0 auto;
}


#main-body {
    @media (max-width: 1066px) {
        .container {
            width: 85%;
        }
    }

    @media (max-width: 840px) {
        .container {
            width: 85%;
            margin: 0 auto;
        }
    }

    h1,
    h2 {
        text-align: center;
    }

    h2 {
        padding-bottom: 100px;
    }

    h2 .heading {
        font-size: 30px;
    }

    h2 span {
        font-size: 18px;
    }

    h2 .heading::before,
    h2 .heading::after {
        content: "-";
        margin: 0 10px;
    }

    #contact p,
    footer p {
        text-align: center;
    }

    #works,
    #about,
    #contact {
        padding: 120px 0 85px;
    }

    header,
    #about,
    footer {
        background-color: #ffffff;
    }

    #works,
    #contact {
        background-color: #f9f9f9;
    }

    /* header */
    header {
        position: relative;
        overflow: hidden;
    }

    header::before {
        content: "";
        position: absolute;
        top: -167px;
        left: 6%;
        width: 60%;
        height: 1px;
        background-color: #232323;
        box-shadow: 110px -70px 0 0 #232323;
        transform: rotate(135deg);
    }

    @media (max-width: 850px) {
        header::before {
            display: none;
        }
    }

    header::after {
        content: "";
        position: absolute;
        top: 578px;
        left: 68%;
        width: 30%;
        height: 1px;
        background-color: #232323;
        box-shadow: 117px -70px 0 0 #232323;
        transform: rotate(135deg);
    }

    @media (max-width: 850px) {
        header::after {
            display: none;
        }
    }

    header ul {
        padding: 40px 0;
        display: flex;
        justify-content: right;
    }

    .nav-link {
        position: relative;
        display: inline-block;
        padding-left: 60px;
    }

    @media (max-width: 440px) {
        .nav-link {
            padding-left: 33px;
        }
    }

    .nav-link[href="#works"] {
        padding-left: 63px;
    }

    @media (max-width: 440px) {
        .nav-link[href="#works"] {
            padding-left: 37px;
        }
    }

    .nav-link::before {
        font-family: 'Font Awesome 6 Free';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        padding-left: 39px;
    }

    @media (max-width: 440px) {
        .nav-link::before {
            padding-left: 15px;
        }
    }

    .nav-link[href="#works"]::before {
        font-weight: 800;
        font-size: 15px;
        content: "\f109";
        padding-top: 2px;
    }

    .nav-link[href="#about"]::before {
        content: "\f007";
    }

    .nav-link[href="#contact"]::before {
        content: "\f0e0";
        padding-top: 2px;
    }

    .nav-link span {
        position: relative;
    }

    @media (max-width: 440px) {
        .nav-link span {
            font-size: 14px;
        }
    }

    .nav-link span::after {
        position: absolute;
        left: -21px;
        bottom: -3px;
        content: '';
        width: calc(100% + 16px);
        height: 1px;
        background: #3c3c3c;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.3s;
        pointer-events: none;
    }

    .nav-link:hover span::after {
        transform: scaleX(1);
    }

    h1 {
        font-size: 45px;
        padding: 170px 0 300px;
        letter-spacing: 0.35em;
        position: relative;
        z-index: 3;
    }

    @media (max-width: 440px) {
        h1 {
            font-size: 30px;
            padding: 90px 0 180px;
        }
    }

    h1::before {
        content: "";
        position: absolute;
        width: 100px;
        /* 四角形全体の幅 (重なりを考慮) */
        height: 100px;
        /* 四角形全体の高さ */
        background:
            linear-gradient(to right, #f4c6c6 100%, transparent 50%) 30% 50% no-repeat,
            /* 左側の四角形 */
            linear-gradient(to bottom, #f4c6c6 100%, transparent 50%) 73% 100% no-repeat;
        /* 右側の四角形 */
        background-size: 50px 50px;
        /* 各四角形のサイズ */
        transform: translate(-50px, -50px);
        /* 位置調整 */
        z-index: -1;
    }

    @media (max-width: 440px) {
        h1::before {
            content: "";
            position: absolute;
            width: 90px;
            height: 83px;
            background:
                linear-gradient(to right, #f4c6c6 100%, transparent 50%) 30% 50% no-repeat,
                linear-gradient(to bottom, #f4c6c6 100%, transparent 50%) 73% 100% no-repeat;
            background-size: 33px 33px;
            transform: translate(-50px, -50px);
            z-index: -1;
        }
    }

    h1::after {
        content: "";
        position: absolute;
        width: 250px;
        /* 半円の幅 */
        height: 125px;
        /* 半円の高さ */
        border-radius: 250px 250px 0 0;
        /* 上半分を円形に */
        border: 1px solid #232323;
        /* 半円の線の色と太さ */
        border-bottom: 1px solid transparent;
        /* 下の線を消す */
        left: 55%;
        /* h1の中央に配置 */
        transform: translateX(-10%) rotate(140deg);
        /* 左方向に半分ずらして中央に */
        top: 40%;
        /* h1の下に配置 */
    }

    @media (max-width: 440px) {
        h1::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 100px;
            border-radius: 250px 250px 0 0;
            border: 1px solid #232323;
            border-bottom: 1px solid transparent;
            left: 55%;
            transform: translateX(-10%) rotate(140deg);
            top: 40%;
        }
    }


    h1 span {
        font-size: 18px;
        letter-spacing: 0.3em;
    }

    /* works */
    #works {
        z-index: 1;
    }

    .works-imgs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    @media (max-width: 840px) {
        .works-imgs {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    .img {
        width: 350px;
        height: 350px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .img img {
        max-width: 335px;
        max-height: 335px;
        transition: transform .6s ease;
    }

    .img img:hover {
        transform: scale(1.1);
    }

    .img-and-title p {
        padding: 10px 0 35px;
        font-size: 18px;
    }

    .img-and-title p span {
        padding-top: 5px;
        display: block;
    }

    /* about */
    .self-introduction {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }

    .fa-cat {
        font-size: 80px;
    }

    .icon-container {
        width: 223px;
        height: 223px;
        position: relative;
        background-color: #f2f2f2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-container::before {
        font-family: 'Font Awesome 6 Free';
        position: absolute;
        content: "\f004";
        font-size: 26px;
        font-weight: 900;
        color: #f4c6c6;
        transform: translate(-120%, -190%) rotate(-30deg);
    }

    h3 {
        padding-bottom: 40px;
        font-size: 18px;
        line-height: 1.7;
        font-weight: 500;
    }

    h3 span {
        font-weight: 500;
    }

    .name {
        text-align: center;
    }

    .self-introduction-sentence p {
        width: 495px;
        line-height: 1.7;
        text-indent: 1em;
    }

    @media (max-width: 597px) {
        .self-introduction-sentence p {
            width: 100%;
        }
    }

    .firstline {
        margin-bottom: 10px;
    }

    /* contact */
    .address-container {
        width: 705px;
        height: 115px;
        margin: 60px auto 0;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @media (max-width: 845px) {
        .address-container {
            width: 100%;
        }
    }

    @media (max-width: 385px) {
        .address-container {
            background-color: #F9F9F9;
        }
    }

    #contact p {
        line-height: 1.7;
    }

}

/* works */
#works-body {

    @media (max-width: 1100px) {
        .container {
            width: 85%;
            margin: 0 auto;
        }
    }

    p {
        line-height: 1.3;
    }

    .indent {
        text-indent: -1em;
        padding-left: 1em;
        margin-bottom: 15px;
    }

    /* header */

    header {
        padding-top: 10px;
    }

    header .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        padding-bottom: 10px;
    }

    header .container::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -14px;
        width: 100%;
        border-bottom: 1px solid #d3d3d3;
    }

    header h1 {
        font-size: 30px;
        padding-top: 30px;
    }

    header h1 span {
        display: inline-block;
        margin-top: 15px;
        font-size: 30px;
    }

    header h2 {
        margin: 30px 0 15px;
        font-size: 20px;
    }

    header p {
        max-width: 550px;
    }

    /* main */
    #works-img {
        margin: 45px 0;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    #works-img img {
        width: auto;
        /* 画像の元の幅を保つ */
        max-width: 100%;
        /* 画面幅を超えないようにする */
    }

    .bigger-text {
        font-size: 22px;
    }

    .extra-margin {
        margin: 10px 0;
    }

    #explanation {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;
        position: relative;
    }

    #explanation h3 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
        padding-left: 23px;
    }

    .time {
        position: relative;
    }

    .time::before {
        font-family: 'Font Awesome 6 Free';
        position: absolute;
        content: "\f017";
        top: 53%;
        left: 0px;
        transform: translateY(-50%);
    }

    .target {
        position: relative;
    }

    .target::before {
        font-family: 'Font Awesome 6 Free';
        position: absolute;
        content: "\f007";
        top: 53%;
        left: 0px;
        font-weight: 600;
        transform: translateY(-50%);
    }

    .place {
        position: relative;
    }

    .place::before {
        font-family: 'Font Awesome 6 Free';
        position: absolute;
        content: "\f03e";
        top: 53%;
        left: 0px;
        transform: translateY(-50%);
    }

    .size {
        position: relative;
    }

    .size::before {
        font-family: 'Font Awesome 6 Free';
        position: absolute;
        content: "\f424";
        top: 53%;
        left: 0px;
        font-weight: 600;
        transform: translateY(-50%);
    }

    .features {
        position: relative;
    }

    .features::before {
        font-family: 'Font Awesome 6 Free';
        position: absolute;
        content: "\f53f";
        top: 53%;
        left: 0px;
        font-weight: 600;
        transform: translateY(-50%);
    }


    #explanation::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 29px;
        width: 100%;
        border-bottom: 1px solid #d3d3d3;
    }

    #explanation::after {
        content: '';
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        border-bottom: 1px solid #d3d3d3;
    }

    .explanation-1,
    .explanation-2 {
        width: 50%;
        min-width: 300px;
    }

    .explanation-group {
        margin-bottom: 45px;
    }


    @media (max-width: 1115px) {

        .explanation-1,
        .explanation-2 {
            width: 100%;
            min-width: 300px;
        }
    }

    #nav ul {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .button {
        display: inline-block;
        padding: 22px 28px;
        border: 1px solid #818181;
        text-align: center;
        font-size: 16px;
        color: #333;
        box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    @media (max-width: 700px) {
        .button {
            display: inline-block;
            padding: 0;
            border: none;
            text-align: center;
            font-size: 16px;
            color: #333;
            box-shadow: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
    }

    @media (max-width: 420px) {
        .button {
            display: inline-block;
            padding: 0;
            border: none;
            text-align: center;
            font-size: 14px;
            color: #333;
            box-shadow: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
    }


    .button:hover {
        transform: translateY(4px);
        box-shadow: 0px 0px 0 0 rgba(0, 0, 0, 0.4);
    }

    /* 真ん中と右寄せ*/
    .center-right {
        display: flex;
        justify-content: space-between;
        /* 要素を左右に配置 */
        align-items: center;
        width: 100%;
        /* 横幅を画面全体に広げる */
    }

    .center-right .top {
        margin-right: -16%;
        flex-grow: 1;
        /* 左右のスペースを均等に分ける */
        display: flex;
        justify-content: center;
        /* 中央寄せ */
    }

    @media (max-width: 420px) {
        .center-right .top {
            margin-right: -26%;
        }
    }

    .center-right .prev {
        margin-left: auto;
        /* 右端に配置 */
    }

    /* 真ん中と左寄せ */
    .center-left {
        display: flex;
        justify-content: space-between;
        /* 要素を左右に配置 */
        align-items: center;
        width: 100%;
        /* 横幅を画面全体に広げる */
    }

    .center-left .top {
        margin-right: 43%;
    }

    @media (max-width: 420px) {
        .center-left .top {
            margin-right: 36%;
        }
    }

    /* バナーの大きさ */
    #size_336_280 {
        width: 336px;
        height: 280px;
    }
}