:root {

    --text-color: #777777;

    --heading-color: #777777;

    --footer-text-color: #bababa;

    --form-text-color: #000000;

    --form-label-color: #777777;

    --button-text-color: white;

    --required-text-color: #ff0000;

}



body {

    font-family: 'Noto Sans JP', sans-serif;

    margin: 0;

    padding: 0;

    background-color: #fff;

    text-align: center;

    color: var(--text-color);

}.container {    margin: 50px auto;    width: 80%;    max-width: 1280px;}h1 {    font-size: 1.5em;    margin-bottom: 25px;    color: var(--heading-color);    font-weight: bold;}h2 {    font-size: 26px;    margin-bottom: 20px;    color: var(--heading-color);    font-family: 'Source Sans Pro Black', 'Source Sans Pro', sans-serif;    font-weight: 600;}p {    color: var(--text-color);    line-height: 1.4;     margin: 10px 0;}.office-info {    margin: 20px 0;}.office-info p {    margin: 5px 0;}.logo {    margin: 30px 0 25px 0;}



.container > hr:first-of-type {
    margin-top: 0;
    margin-bottom: 25px;
}

.container > h2:first-of-type {
    margin-top: 0;
}

.logo img {

    width: 296px;

    height: auto;

    display: block;

    margin: 0 auto;

}



footer {

    margin-top: 20px;

    font-size: 0.9em;

    color: var(--footer-text-color);

}



footer p {

    margin: 0;

}



@media (max-width: 768px) {

    .container {

        width: 90%;

        margin: 20px auto;

    }



    h1 {

        font-size: 16px;

    }



    h2 {

        font-size: 18px;

    }



    p {

        font-size: 16px;

     }



    .logo img {

        width: 252px;

    }

    .logo {
        margin-bottom: 20px;
    }

    .container > h1:first-of-type {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .container > hr:first-of-type {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .container > h2:first-of-type {
        margin-top: 0;
    }

    footer {

        font-size: 16px;

    }

}



@media (max-width: 480px) {

    h1 {

        font-size: 16px;

    }



    h2 {

        font-size: 18px;

    }



    p {

        font-size: 16px;

    }



    .logo img {

        width: 252px;

    }

}









    body {

      font-family: 'Noto Sans JP', sans-serif;

      background-color: #fff;

      margin: 0;

      padding: 0;

    }



    .container {

      max-width: 1280px;

      margin: 50px auto;

      background: #fff;

      padding: 0;

      border-radius: 0;

      box-shadow: none;

    }



    h1 {

      text-align: center;

      color: var(--heading-color);

    }



    label {

      display: block;

      margin-top: 20px;

      color: var(--form-label-color);

    }



    input[type="text"],

    input[type="email"],

    input[type="tel"],

    input[type="url"],

    textarea {

      width: 100%;

      padding: 10px;

      margin-top: 8px;

      border: 1px solid #ccc;

      border-radius: 5px;

      box-sizing: border-box;

      font-size: 16px;

    }



    input[type="submit"] {

      margin-top: 30px;

      width: 100%;

      background-color: #666666;

      color: var(--button-text-color);

      border: none;

      padding: 15px;

      border-radius: 5px;

      font-size: 16px;

      cursor: pointer;

      transition: background-color 0.3s ease;

    }



    input[type="submit"]:hover {

      background-color: #333333;

    }



    .required::after {

      content: "*";

      color: var(--required-text-color);

      margin-left: 3px;

    }



/* 全体のスタイル */

body {

    font-family: 'Noto Sans JP', sans-serif;

    font-size: 16px;

    line-height: 1.6;

}



/* フォーム要素のスタイル */

form {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

}



form label {

    font-family: inherit;

    font-size: 16px;

    display: block;

    margin-bottom: 5px;

}



form input[type="text"],

form input[type="tel"],

form input[type="email"],

form textarea {

    font-family: inherit;

    font-size: 16px;

    width: 100%;

    padding: 8px;

    margin-bottom: 20px;

}



form input[type="submit"] {

    font-family: inherit;

    font-size: 16px;

    padding: 10px 20px;

}



#gallery {

    padding-top: 0;

    padding-bottom: 0;

}



#gallery .heading-title {

    margin-bottom: 0;

}



#gallery .heading-title h3 {
    color: var(--heading-color);
}

#gallery .portfolio-item .thumb {

    position: relative;

    overflow: hidden;

}



#gallery .portfolio-hover {

    pointer-events: none;

}



#gallery .portfolio-item:hover .portfolio-hover {

    pointer-events: auto;

}

@media (max-width: 768px) {
    .container {
        margin: 15px auto;
    }
}