@charset "utf-8"; /* Google Fonts loaded via CDN */ * { margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html,body { height: 100%; letter-spacing: 0.1em; color: #010101; background: #FDFBF5; } body { font-size: 14px; font-family: "Playfair Display", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif; -webkit-text-size-adjust: 100%; } a { color: #010101; text-decoration: underline; transition: .6s; } a:hover { opacity: 0.6; text-decoration: none; } #main { z-index: 0; } #main-in { padding-left: 250px; z-index: 1; } #main p { margin-bottom: 1em; line-height: 1.9; } #main .inner { padding: 60px 0 0 0; clear: both; } .parallax { width: 100%; position: -webkit-sticky; position: sticky; top: 0; } #global-head { position: fixed; width: 250px; padding: 20px 0 0 25px; z-index: 100; background: #FDFBF5; } #global-head #brand-logo img { width: 80px; } #global-head span { display: block; margin: 15px 0; } #global-head span img { width: 150px; } #sidebar { width: 250px; padding: 260px 0 0 60px; height: 100%; position: fixed; background: #FDFBF5; } #copyright a { text-decoration: none; font-family: "Barlow Condensed", sans-serif; letter-spacing: 0; position: fixed; bottom: 10px; left: 30px; } #copyright a:hover { text-decoration: none; } #footer_sns { position: fixed; bottom: 30px; left: 30px; } #footer_sns a { text-decoration: none; margin-right: 5px; } #global-nav ul { list-style: none; margin-left: 0; } #global-nav ul a { padding: 15px 0 0 0; margin-bottom: 15px; position: relative; display: inline-block; text-decoration: none; } #global-nav ul li { font-size: 14pt; letter-spacing: 0; font-weight: 200; font-family: "Playfair Display", serif; } #global-nav ul a::after { position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 2px; background: #8D989F; transform: scale(0, 1); transform-origin: left top; transition: transform .5s; } #global-nav ul a:hover::after { transform: scale(1, 1); } /* nav-toggle */ #nav-toggle { display: none; position: fixed; top: 15px; right: 15px; height: 32px; } #nav-toggle > div { position: relative; width: 32px; } #nav-toggle span { width: 100%; height: 2px; left: 0; display: block; background: #010101; position: absolute; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 11px; } #nav-toggle span:nth-child(3) { top: 22px; } #overlay { display: none; position: fixed; background: rgba(0,0,0,.6); width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } footer { height: 150px; z-index: 50; text-align: right; font-size: 0.8em; font-weight: 600; font-family: "Playfair Display", "Shippori Mincho B1", serif; color: #393939; padding: 50px 80px 0 0; line-height: 2em; background: url("/assets/images/logo.png?v=1.0.0") no-repeat right/60px; } footer span { margin: 0 10px 0 0; } footer span::after { content: " | "; } /* Sub-menu Dropdown Stability (Anti-Flicker & Anti-Dead-Zone Bridge) */ #global-nav .has-submenu { position: relative; } #global-nav .sub-menu { position: absolute; top: 100%; left: 0; display: none; background: #FDFBF5; padding: 10px 15px; min-width: 180px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.05); z-index: 200; } #global-nav li:hover > .sub-menu, #global-nav .sub-menu.is-active { display: block; } #global-nav .sub-menu::before { content: ''; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; background: transparent; } hr { margin: 50px 1% 0 4%; width: 95%; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #ccc; } .guide_comment { font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif" !important; font-size: 90%; color: #587486; } .guide_comment2 { font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif" !important; font-size: 110%; padding-left: 50px; color: #587486; } @media screen and (max-width: 1000px) { #main-in { padding-left: 0; padding-top: 70px; } #main .inner { padding: 20px 0 0 0; clear: both; } #global-head { width: 100%; padding: 5px; background: rgba(255,255,255,0.4); display: -webkit-flex; display: flex; } #global-head #brand-logo img { width: 50px; } #global-head span { display: none; } #sidebar { position: fixed; right: -300px; top: 0; height: 100%; width: 300px; color: #333; background: #fff; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; } #footer_sns { display: none; } #copyright { display: none; } #global-nav .sub-menu-head:after, #global-nav .sub-menu-nav { display: none; } #nav-toggle { display: block; } /* nav open */ .open { overflow: hidden; } .open #overlay { display: block; } .open #sidebar { -webkit-transform: translate3d(-300px,0,0); transform: translate3d(-300px,0,0); } /* #nav-toggle close */ .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* z-index */ #overlay { z-index: 1000; } #sidebar { z-index: 1500; } #nav-toggle { z-index: 2000; } hr { margin: 50px auto; width: 100%; } } @media screen and (max-width: 600px) { #sidebar { right: -200px; width: 200px; padding-top: 60px; } .open #sidebar { -webkit-transform: translate3d(-200px,0,0); transform: translate3d(-200px,0,0); } footer { height: auto; text-align: center; padding: 50px; line-height: 2em; background: none; } footer span { margin: 0 0 1em 0; display: block; } footer span::after { content: none; } .guide_comment2 { padding-left: 0; } }