
*{
text-decoration: none;
}
body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
p{
margin: 0;
}
#wrap{
font-size: 100%;
line-height: 2;
}
.content_box{
    max-width: 1000px;
    margin: 0 auto;
    line-height: 2;
}

/*header*/
header{
    background: #f9f4f0;
    padding: 10px 20px 20px 10px;
    border-bottom: 1px solid #333;
}
.logo{
    float: left;
    width:100px;
    position: absolute;
    z-index: 100;
}
h1{
    margin: 0;
}
 .menu-toggle {
      top: 20px;
      right: 20px;
      z-index: 10;
      text-align: right;
      padding: 0 0 0 0;
 }
 .menu-toggle input {
      display: none;
 }
    .hamburger {
      position: relative;
      width: 40px;
      height: 34px;
      cursor: pointer;
      z-index: 11;
      top:10px;
    }
    .hamburger span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: #333;
      border-radius: 1px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .hamburger span:nth-of-type(1) {
      top: 0;
    }
    .hamburger span:nth-of-type(2) {
      top: 50%;
      transform: translateY(-50%);
    }
    .hamburger span:nth-of-type(3) {
      bottom: 0;
    }
    input:checked + .hamburger span:nth-of-type(1) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
    input:checked + .hamburger span:nth-of-type(2) {
      opacity: 0;
    }
    input:checked + .hamburger span:nth-of-type(3) {
      bottom: auto;
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
    }
    .menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
      padding: 80px 0 0;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      z-index: 5;
    }
    .menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: center;
            border-top:1px solid #333;
    }
    .menu ul li a {
      text-decoration: none;
      color: #333;
      font-size: 18px;

      display: block;
      width:100%;
      border-bottom:1px solid #333;
      padding: 20px 0;
    }
    input:checked ~ .menu {
      transform: translateY(0);
    }


/*footer*/

.sns_box{
    margin: 0 auto;
    max-width: 200px;
}
.sns_box2{
    margin: 0 auto;
    max-width: 120px;
}
.sns_box img{
    max-height: 32px;
}
.menu_text{
    text-align: center;
}
.menu_text a{
    color:#333;
}
.menu_text a:hover{
    color:#ccc;
}
.footerlogo{
    max-width: 164px;
    margin: 0 auto;
}
.copy{
    color: #b09c7e;
    text-align: center;
    font-size: 80%;
}

/*page top*/

#page_top {
    position: fixed;
    right: 10px;
    width: 80px;
    height: 80px;
    background: rgba(102, 102, 102, 0.5) no-repeat;
    border-radius: 100%;
}
#page_top a::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 25px;
    height: 35px;
    margin: auto;
    color: #fff;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f077';
    font-size: 25px;
    text-align: center;
}



.t_center{
text-align: center;
}
.t_right{
text-align: right;
}
.t_left{
text-align: left;
}
.p_lr15{
padding: 0 15px;
}
.ml30{
margin-left: 30px;
}
.m_auto{
margin: 0 auto;
}
.mb10{
margin-bottom: 10px;
}
.mb15{
margin-bottom: 15px;
}
.mb20{
margin-bottom: 20px;
}
.mb30{
margin-bottom: 30px;
}
.mb40{
margin-bottom: 40px;
}
.mb50{
margin-bottom: 50px;
}
.mb60{
margin-bottom: 60px;
}
