@charset "utf-8"; /* Theme Name: Theme URI: Description: This is our original theme. Author: Author URI: Version: 1.0 */ /* CSS Information ========================================= style.css ========================================================= */ /* ========================================================= style.css ========================================================= */ /* index =================================================== template common wrapper header nav page breadcrumbs contents main sub footer other temporary ========================================================= */ /* template ----------------------------------------------- */ @media (max-width: 767px) { } @media (min-width: 768px) { } /* ----------------------------------------------- */ body { font-family: 'Noto Sans Japanese', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; line-height: 1.5; } /* common ----------------------------------------------- */ .lower-page .sec-lv-1 .heading-1, .heading-2, .yusei { font-family: 'Yusei Magic','Noto Sans Japanese', sans-serif; letter-spacing: -0.05em; } @media (max-width: 767px) { .inner-header, .hamburger, .inner-footer, .sec-lv-2 > .inner-sec { box-sizing: border-box; padding-left: 0.5rem; padding-right: 0.5rem; } } @media (min-width: 768px) { ._navPc, .inner-footer, .sec-lv-2 > .inner-sec { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 1152px; } ._navPc, .inner-footer, .sec-lv-2 > .inner-sec { padding-left: 1rem; padding-right: 1rem; } .page { margin-top: -49px; } } /* wrapper ----------------------------------------------- */ .wrapper { color: #333; } .wrapper a { color: #333; } @media (max-width: 767px) { .wrapper { font-size: 12px; } } @media (min-width: 768px) { } /* header ----------------------------------------------- */ /* nav ----------------------------------------------- */ .nav { position: relative; z-index: 9; } @media (max-width: 767px) { ._navPc { display: none; } .inner-nav a { color: #333; transition: .5s; } ._nav_hamburger-menu { display:flex; flex-wrap: wrap; justify-content: space-between; padding: 2px 0.5em; position: fixed; top: 0; width: 100%; z-index: 99; } .menu-btn-check { display: none; } ._nav_hamburger-menu .menu-btn { background-color: rgba(51, 51, 51, 0.2); border-radius: 8px; color:#fff; font-size: 32px; line-height: 1; padding: 2px 8px; position: relative; transition: .5s; z-index: 99; } ._nav_hamburger-menu .hamburger_list { background-color: rgba( 228, 225, 209, 0.9); border-radius: 0 10px 10px 0; box-shadow: 0px 10px 10px -5px rgba(46,35,34,0.5); color: #135107; display: block; font-size: 14px; line-height: 2.5; padding: 16px 32px 1em; position: fixed; top: 0; left: -240px; text-align: center; transition: .5s; width: 240px; z-index: 90; } ._nav_hamburger-menu .hamburger_list a { color: #333; } ._nav_hamburger-menu .menu-background-color { background-color: #aaa; display: none; opacity: 0; position: fixed; right: 0; top: 0; transition: .5s; width: 100%; height: 100%; } .menu-btn-check:checked ~ .menu-btn { background-color: rgba(51, 51, 51, 0); border-radius: 8px; color:rgba(51, 51, 51, 0); font-size: 32px; line-height: 1; padding: 2px 8px; position: relative; transition: .5s; z-index: 99; } .menu-btn-check:checked ~ .menu-btn::after { content: '×'; color:rgb( 51, 51, 51); font-size: 32px; line-height: 1; padding: 2px 8px; position: absolute; top: 0; left: 0; transition: .5s; z-index: 99; } .menu-btn-check:checked ~ .hamburger_list { transform: translateX(240px); } .menu-btn-check:checked ~ .menu-background-color { display: block; opacity: 0.5; z-index: 90; } } @media (min-width: 768px) { ._nav_hamburger-menu { display: none; } .inner-nav { background-color: rgba( 228, 225, 209, 0.8); box-shadow: 0px 8px 8px -8px rgba(152,152,152,0.5); } .inner-nav ._navPc ul > li > a { color: rgb( 51, 51, 51); position: relative; padding-bottom: 4px; transition: .5s; } .inner-nav ._navPc ul > li > a::after { background-color: #903380; content: ''; display: block; margin: auto; position: absolute; left: 0; bottom: 0; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; height: 2px; width: 100%; } .inner-nav ._navPc ul > li > a:hover::after { transform-origin: left top; transform: scale(1, 1); } ._navPc { display: flex; flex-wrap: wrap; width: 100%; } ._navPc ._navLogo, ._navPc ._navLogo + ul, ._navPc .l-header-cart { line-height: 48px; } ._navPc .l-header-cart { margin-left: auto; } ._navPc ._navLogo > img { height: 3vw; max-height: 48px; } ._navPc ._navLogo + ul > li { display: inline; font-size: 14px; margin-left: 1.75vw; } } /* page ----------------------------------------------- */ /* breadcrumbs ----------------------------------------------- */ /* contents ----------------------------------------------- */ /* main ----------------------------------------------- */ /* sub ----------------------------------------------- */ /* footer ----------------------------------------------- */ .footer { background-image: url(../img/common/vineyard.jpg); background-color: rgba(0, 0, 0, 0.3); background-blend-mode: darken; background-repeat: no-repeat; background-size: cover; color: #fff; } .footer a { color: #fff; } .footer .inner-footer .main { text-align: center; } .footer .inner-footer .main .logo { margin: auto; width: 192px; } .footer .inner-footer .main .message { border: solid 1px #fff; display: inline-block; margin: 1em 0; padding: 4px 16px; } .footer .inner-footer .location > p { margin-bottom: 8px; } .footer .inner-footer .location .tel { font-size: 1.5em; } .footer .inner-footer .g-map iframe { width: 100%; height: 240px; } .footer ._copyright { text-align: center; padding-bottom: 1em; } @media (max-width: 767px) { .footer { text-align: center; } .footer .inner-footer { padding: 2em 1em; } } @media (min-width: 768px) { .footer .inner-footer { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 2em 1em; position: relative; } .footer .inner-footer .main { position: absolute; left: 28%; width: 30%; } .footer .inner-footer .location { width: 25%; } .footer .inner-footer .g-map { width: 35%; } } /* other ----------------------------------------------- */ .go_top { display: none; position: relative; z-index: 99; } @media (max-width: 767px) { .go_top { position: fixed; bottom: 16px; right: 16px; } .go_top img { width: 40px; } } @media (min-width: 768px) { .go_top { position: fixed; bottom: 16px; right: 32px; } .go_top img { width: 64px; } } /* temporary ----------------------------------------------- */ /* end of file */