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

html{
    font-size:62.5%;
}

body {
    font-family: Zen Kaku Gothic New, sans-serif;
    line-height: 1.6;
    background-image: url("../img/bg_gray.jpg");
    background-color:#f2f2f2;
    background-size: cover;
    background-repeat:repeat;
}

.zen-kaku-gothic-new-light {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-new-black {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
}


<!-- ヘッダー -->
header {
    color: #222;
    position: relative; 
}

.menu-container {
    width: 100%;
    height: 40px;
    max-width: 1200px;
    margin: 0;
}

.menu-nav {
    display: flex;
    justify-content: flex-start;
    margin-left: 10px;
}

#menu_button {
    padding: 0;
    border: none;
    background:none;
    cursor: pointer;
    margin-top:5px;
    margin-right: 8px;
}

#menu_button img {
    width: 25px;
    height: 25px;
}

.logo a {
    color: #222;
    font-size: 22px;
    text-decoration: none;
    font-weight: bold;
}

#link_tree {
    list-style-type: none;
    width:50%;
    padding-bottom:30px;
    position: absolute;
    top: 40px;
    background-color: #fff;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#link_tree.visible {
    z-index: 10;
    opacity: 0.92;
}

#link_tree li {
    margin: 10px 10px;
}

#link_tree a {
    text-decoration: none;
    color: #222;
    font-size: 18px;
}

.header_nav {
    color: #222;
    text-decoration: none;
    display: block;
    opacity: 1; 
}

.header_nav:hover {
    text-decoration: underline;
    text-decoration-color: #222;
}

.header_sub {
    display: block;
    font-size: 10px;
    color: #ff5252;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(211, 211, 211, 0.7); /* 薄いグレー */
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#overlay.visible {
    opacity: 1;
    pointer-events: all; 
}

<!-- メイン -->
.container {
}

.main-container{
    background-color: #fff;
    width: 90%;
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
}

h1{
    text-align: center;
    font-size: clamp(2rem,3.5vw, 4rem);
    color:#333;
}

h2 {
    text-align: center;
    font-size: clamp(1rem,1.5vw, 2.8rem);
    color:#646464;
    margin-bottom: 5px;
}

.contact-section {
    width:80%;
    margin: 30px auto;
    color:#333;

}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.contact-item img.icon {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.email-title {
    font-size: clamp(1.2rem, 2vw, 2rem);
}

.email-button {
    display: block;
    background-color: #4C616C;
    padding: 5px 25px;
    margin: 20px auto;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    width: fit-content;
    font-size: clamp(1rem, calc(0.9rem + 1vw), 2rem);
    color: #fff;
}

.email-button:hover{
    background-color:#6cabbd;
}

.email-info {
    font-size: clamp(1rem, 1.3vw, 1.5rem);
    margin-top: 10px;
}

.email-info p {
    margin-bottom: 10px;
}

.required {
    color: #ff5252;
}

.email-text {
    font-size: clamp(1rem, 1.5vw, 1.7rem);
    margin:20px 0;
}

.phone-title {
    font-size: clamp(1.2rem, 2vw, 2rem);
}

.phone-info p{
    font-size: clamp(1rem, 1.5vw, 1.6rem);
}

.phone-info a {
    color:#333;
}

.phone-info a:hover {
    color:#6cabbd;
}

<!-- フッター -->
footer {
    padding: 20px 0;
    margin-top: 20px;
}

<!-- フッターmenusub -->
.footer_menusub{
    text-align: left;
}

.footer_company{
    display: flex;
    align-items: center; 
    margin: 0;
    padding-left: 10px;
    list-style-type: none;
    
}

.footer_logo {
    margin-right: 3px;
}

#wp_logo{
    width: 30px;
    height: 30px;
}

.footer_company_name{
    font-size: clamp(0.9rem, calc(0.9rem + 0.4vw), 1.5rem);
    color: #333;
}

.kabu{
    font-size: clamp(0.8rem, calc(0.85rem + 0.35vw), 1.45rem);
}

.footer_company_add{
    padding-left: 10px;
    list-style-type: none;

}

.footer_company_address{
    font-size: clamp(0.7rem, calc(0.7rem + 0.4vw), 1.2rem);
    color: #333;
    padding-left: 3px;
}


<!-- フッターsns -->
.footer_menusns{
    text-align: center;
}

.footer_sns{
    text-align: center;
}

.snslink{
    display: inline-block;
    margin: 0 -20px;
}

#sns_lit,#sns_x,#sns_ig{
    width: 80px;
    height: 80px;
    top:0;
    position:relative;
}

#sns_lit:hover,#sns_x:hover,#sns_ig:hover{ 
    top:-5px;
    transition:0.3s;
}

.footer_container {
    font-size: clamp(0.7rem, calc(0.8rem + 0.2vw), 1.2rem);
    margin-bottom: 10px;
    text-align: center;
}

.footer_made{
    font-size: clamp(0.8rem, calc(0.8rem + 0.3vw), 1.3rem);
    margin-bottom: 20px;
    text-align: center;
}

.footer_made a{
    color: #333;
}

.footer_made a:hover {
    color:#6cabbd;
}