@charset "utf-8";

.cmshtml .pointer { position: fixed;  z-index: 9999 }
@media (max-width: 1079px) {
.cmshtml .pointer { top:24px; right: 0 }
}
@media (min-width: 1080px) and (max-width: 1308px) {
.cmshtml .pointer { top: 32px; right: 24px }
}
@media (min-width: 1309px) {
.cmshtml .pointer { top: 32px; right: calc(50% - 630px) }
}

.cmshtml #nav-toggle { position: relative; top: 0; left: 0; height: 36px; cursor: pointer }
@media only screen and (max-width: 767px) {
.cmshtml #nav-toggle { left: -20px }
}
.cmshtml #nav-toggle > div { position: relative; width: 50px }
.cmshtml #nav-toggle span { width: 100%; height: 4px; border-radius: 4px; left: 0; display: block; background: #e70012; position: absolute; transition: transform 0.6s ease-in-out, top 0.5s ease }
.cmshtml #nav-toggle span:nth-child(1) { top: 0 }
.cmshtml #nav-toggle span:nth-child(2) { top: 16px }
.cmshtml #nav-toggle span:nth-child(3) { top: 32px }
.cmshtml #nav-toggle:hover span:nth-child(1) { top: 4px }
.cmshtml #nav-toggle:hover span:nth-child(3) { top: 27px }
.cmshtml .open #nav-toggle { left: -10px }
.cmshtml .open #nav-toggle span { background: #fff }
.cmshtml .open #nav-toggle span:nth-child(1) { top: 15px; transform: rotate(45deg) }
.cmshtml .open #nav-toggle span:nth-child(2) { top: 15px; width: 0; left: 50% }
.cmshtml .open #nav-toggle span:nth-child(3) { top: 15px; transform: rotate(-45deg) }

/* z-index */
.cmshtml #nav-toggle { z-index: 1000 }

.cmshtml #gloval-nav { background-color: rgba(0, 0, 0, 0.8); color: #fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; text-align: left; display: flex; visibility: hidden; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.6s ease, visibility 0.6s ease; overflow-x: hidden; overflow-y: auto }
@media (max-width: 1079px) {
.cmshtml #gloval-nav { justify-content: start }
}
.cmshtml #gloval-nav a { display: block; text-decoration: none; transition: color 0.6s ease; color: #fff; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; text-decoration: none; letter-spacing: 0 }
.cmshtml #gloval-nav a:hover { color: #ccc; text-decoration: none }
.cmshtml #gloval-nav .slidebox { opacity: 0; transform: translateX(200px); transition: transform 0.6s ease, opacity 0.2s ease }
.cmshtml #gloval-nav .gnavchild > div:nth-child(2 of .slidebox) { transition-delay: 0.15s }
.cmshtml #gloval-nav .gnavchild > div:nth-child(3 of .slidebox) { transition-delay: 0.3s }
.cmshtml #gloval-nav .gnavchild > div:nth-child(4 of .slidebox) { transition-delay: 0.45s }
.cmshtml #gloval-nav .gnavchild > div:nth-child(5 of .slidebox) { transition-delay: 0.6s }
.cmshtml #gloval-nav .gnavchild > div:nth-child(6 of .slidebox) { transition-delay: 0.75s }
.cmshtml #gloval-nav .gnavchild > div:nth-child(7 of .slidebox) { transition-delay: 0.9s }
.cmshtml #gloval-nav .gnavchild > div:nth-child(8 of .slidebox) { transition-delay: 1.05s }
.cmshtml #gloval-nav .gnav > div:nth-child(2 of .slidebox) { transition-delay: 0.15s }
.cmshtml #gloval-nav .gnav > div:nth-child(3 of .slidebox) { transition-delay: 0.3s }
.cmshtml #gloval-nav .gnav > div:nth-child(4 of .slidebox) { transition-delay: 0.45s }
.cmshtml #gloval-nav .gnav > div:nth-child(5 of .slidebox) { transition-delay: 0.6s }
.cmshtml #gloval-nav .gnav > div:nth-child(6 of .slidebox) { transition-delay: 0.75s }
.cmshtml #gloval-nav .gnav > div:nth-child(7 of .slidebox) { transition-delay: 0.9s }
.cmshtml #gloval-nav .gnav > div:nth-child(7 of .slidebox) { transition-delay: 1.05s }

/* open */
.cmshtml .open { overflow: hidden }
.cmshtml .open #gloval-nav { visibility: visible; opacity: 1 }
.cmshtml .open #gloval-nav .slidebox { opacity: 1; transform: translateX(0); transition: transform 1s ease, opacity 0.9s ease }

/* gnav */
.cmshtml .gnav { display: flex; gap: 40px clamp(24px, calc(1.905vw + 3.43px), 40px); font-size: clamp(17px, calc(0.119vw + 15.71px), 18px); line-height: 1em; font-family: 'YuMinB', serif }
.cmshtml .fm1 {  }
.cmshtml .fm2 { padding: 10px 0 0 18px; margin: 10px 0 0 0; background: url(../img/common/ico_fm2w.png) 5px 10px no-repeat }
.cmshtml .fm3 { padding: 10px 0 0 0; margin: 10px 0 10px 0 }
.cmshtml .fm4 { padding: 10px 0 0 0; margin: 45px 0 10px 0 }
.cmshtml .fm5 { margin: 10px 0 0 0 }
.cmshtml #footernav .fm5 { padding: 10px 0 0 0 }

@media (max-width: 1079px) {
.cmshtml #footernav .gnav { padding: 50px 0 !important; flex-wrap: wrap;  }
.cmshtml #gnav .gnav { padding: 64px 16px !important; flex-wrap: wrap }
.cmshtml .fm4 { margin: 20px 0 30px 0 }
}

@media (max-width: 400px) {
.cmshtml .fm1 { width: 44% !important }
}

#editView #gloval-nav .slidebox { opacity: 1; transform: translateX(0px) }

.cmshtml .gnav a { font-family: 'Noto Serif JP', serif; font-weight: 500 }
.cmshtml .gnav strong { font-weight: 800 !important }