@charset "UTF-8";
 .pc-only {
display: block; }
.sp-only {
display: none; }
.site-header {
width: 1000px;
margin: 40px auto 0 auto;
background-color: #fff;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 10; }
.site-header .header-top {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 20px; }
.site-header .header-top .site-logo img {
width: 240px;
height: auto; }
.site-header .header-top .contact-btn {
position: absolute;
right: 20px; }
.site-header .header-top .contact-btn a {
background: #333;
color: #fff;
padding: 10px 20px;
font-weight: bold;
text-decoration: none; }
.site-header .global-nav ul {
font-size: 1.4rem;
display: flex;
justify-content: center;
gap: 80px;
padding: 10px 0;
margin: 0;
list-style: none; }
.site-header .global-nav ul li a {
text-decoration: none;
color: #333;
font-weight: 600; } @media screen and (max-width: 768px) {
.pc-only {
display: none; }
.sp-only {
display: flex;
gap: 16px; }
.site-header {
width: 100vw !important;
height: 60px;
margin: 0;
background-color: #fff;
position: fixed; }
.site-header .header-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
position: relative; }
.site-header .header-top .site-logo img {
width: 160px;
height: auto; }
.site-header .header-top .contact-btn {
display: none; }
.site-header .header-top .header-icons {
display: flex;
align-items: center;
gap: 20px;
position: absolute;
right: 16px; }
.site-header .header-top .header-icons .icon {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center; }
.site-header .header-top .header-icons .icon img {
width: 40px;
height: 40px; }
.site-header .header-top .header-icons .menu-toggle {
background: none;
border: none;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 28px;
height: 28px;
cursor: pointer; }
.site-header .header-top .header-icons .menu-toggle .menu-bar {
display: block;
height: 2px;
background-color: #333;
width: 100%;
border-radius: 1px; }
.site-header .global-nav {
display: none; }
.slide-menu {
position: fixed;
top: 0;
right: -100vw;
width: 100vw;
background-color: #d7f0e5;
z-index: 100;
transition: right 0.4s ease;
overflow-y: auto; }
.slide-menu.active {
right: 0; }
.slide-menu .slide-inner {
width: 100%;
max-width: none;
margin: 0; }
.slide-menu .slide-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
position: relative; }
.slide-menu .slide-header .site-logo img {
width: 160px;
height: auto; }
.slide-menu .slide-header .header-icons {
display: flex;
align-items: center;
gap: 20px;
position: absolute;
right: 16px; }
.slide-menu .slide-header .header-icons .icon {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center; }
.slide-menu .slide-header .header-icons .icon img {
width: 40px;
height: 40px; }
.slide-menu .slide-header .header-icons .menu-toggle {
background: none;
border: none;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 28px;
height: 28px;
cursor: pointer; }
.slide-menu .slide-header .header-icons .menu-toggle .menu-bar {
display: block;
height: 2px;
background-color: #333;
width: 100%;
border-radius: 1px; }
.slide-menu .slide-nav {
margin-top: 24px;
list-style: none;
padding: 10px; }
.slide-menu .slide-nav li {
border-bottom: 1px solid #333;
margin-bottom: 12px; }
.slide-menu .slide-nav li a {
display: block;
font-size: 1.8rem;
text-align: center;
padding: 12px 0;
color: #333;
text-decoration: none;
font-weight: bold; }
.slide-menu .contact-boxes {
width: 84%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
margin: 40px auto; }
.slide-menu .contact-boxes .slide-tel {
width: 100%; }
.slide-menu .contact-boxes .slide-tel .contact-box.tel {
display: flex;
align-items: center;
background: #2ea965;
border-radius: 6px;
padding: 0 20px;
width: 100%;
height: 100px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #fff;
gap: 16px; }
.slide-menu .contact-boxes .slide-tel .contact-box.tel .icon {
width: 32px;
height: auto;
flex-shrink: 0;
margin-left: 10px;
margin-right: 14px; }
.slide-menu .contact-boxes .slide-tel .contact-box.tel .tel-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; }
.slide-menu .contact-boxes .slide-tel .contact-box.tel .tel-info .tel-number {
font-size: 2rem;
font-weight: bold;
margin: 0 0 4px;
color: #fff; }
.slide-menu .contact-boxes .slide-tel .contact-box.tel .tel-info .tel-hours {
font-size: 1.6rem;
color: #fff;
margin: 0; } }