/* レスポンシブ用 -------------------------------------------------------------*/ /* pcのみ */ @media screen and (min-width: 1000px) { .sp {display: none !important;} } /* spのみ */ @media screen and (max-width: 999px) { .pc {display: none !important;} } #page-wrapper.top #wrapper.container.top{width: 100%; max-width: 100%;} #page-wrapper.top #wrapper.container.top .inner{width: 1000px; margin: 0 auto;} @media screen and (max-width: 999px) { #page-wrapper.top #wrapper.container.top{padding: 60px 0 0;} #page-wrapper.top #wrapper.container.top .inner{width: 100%; margin: 0 auto;} } /* ================================================================= 共通 =================================================================*/ #header{font-family: 'Noto Sans JP', sans-serif,} #header h2 {margin: 0px;} #header h2 img{display: block; margin: 0 auto;} #header ul {list-style: none;} #header p{letter-spacing: 0.1em;} #header a{-webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #header a img{-webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #header a:before{-webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #header a:hover{text-decoration: none; opacity: 0.85; -webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #header a:hover img{opacity: 0.85;} #footer{font-family: 'Noto Sans JP', sans-serif,} #footer h2 {margin: 0px;} #footer h2 img{display: block; margin: 0 auto;} #footer ul {list-style: none;} #footer p{letter-spacing: 0.1em;} #footer a{-webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #footer a img{-webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #footer a:before{-webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #footer a:hover{text-decoration: none; opacity: 0.85; -webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #footer a:hover img{opacity: 0.85;} /* ================================================================= 3.ヘッダー =================================================================*/ #header{margin-bottom: 0px; background: #ffffff;} #header .top-box{height: 70px; display: flex; align-items: center; justify-content: space-between; width: 1000px; margin: 0 auto;} #header .top-box h1{margin: 0 15px 0 0;} #header .left-box{display: flex; align-items: center;} #header .left-box p{font-size: 12px; color: #724010; font-family: 'Noto Serif JP', serif; margin: 0px;} #header .right-box ul{display: flex; list-style: none; font-family: 'Noto Serif JP', serif; margin: 0px;} #header .right-box ul li:nth-child(1){margin-right: 27px;} #header .right-box ul li:nth-child(2){margin-right: 22px;} #header .right-box ul li:nth-child(3){margin-right: 24px;} #header .right-box ul li:nth-child(4){margin-right: 21px;} #header .right-box ul li:nth-child(5){margin-right: 20px;} #header .right-box a{font-size: 12px; color: #724010;} #header .bottom-box{background: #481304;} #header .bottom-box .inner{height: 60px; display: flex; align-items: center; justify-content: space-between; width: 1000px; margin: 0 auto;} #header .nav{display: flex; align-items: center; margin: 0px;} #header .nav a.arrow{display: flex; height: 60px; width: 170px; color: #fff; justify-content: center; align-items: center; position: relative; z-index: 10; font-family: 'Noto Serif JP', serif; font-size: 14px;} #header .nav li:nth-child(2) a.arrow{width: 127px;} #header .nav li:nth-child(3) a.arrow{width: 127px;} #header .nav .arrow{position: relative;} #header .nav .arrow::after{content: ''; width: 6px; height: 6px; border: 0px; border-top: solid 1px #fff; border-right: solid 1px #fff; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); margin-top: -4px; margin-left: 10px;} #header .nav .sub{visibility: hidden; opacity: 0; position: absolute; margin: 0px; background: #a78c57; z-index: 10; padding: 40px 25px; line-height: 32px; -webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #header .nav .sub.open{visibility: visible; opacity: 1; -webkit-transition: all .6s cubic-bezier(.5,0,0,1); -moz-transition: all .6s cubic-bezier(.5,0,0,1); transition: all .6s cubic-bezier(.5,0,0,1);} #header .nav .sub a{color: #fff; font-size: 14px;} #header .nav .sub a:hover{text-decoration: underline; opacity: 1;} .search{border-bottom: 1px solid #fff; width: 273px; display: flex; justify-content: space-between; align-items: center; margin: 0px;} .search .form{background: none; border-radius: 0px; border: 0px; color: #fff; padding-left: 0px; width: 244px;} .search .form::placeholder{color: #fff;} .sp-search-area{display: none; width: 100%; height: 50px; position: fixed; top: 60px; z-index: 1; background: #a78c57;} .sp-search-area.open{display: flex; justify-content: center; align-items: center;} /* pcのみ */ @media screen and (min-width: 1000px) { #header .nav a.arrow:hover{background: #a78c57; opacity: 1;} #header .nav a.arrow.open{background: #a78c57; opacity: 1;} } /* spのみ */ @media screen and (max-width: 999px) { #header{position: fixed; z-index: 1000; top: 0; left: 0px; height: 60px; background: #481304; width: 100%;} #header .top-box{margin: 0px; width: 100%; height: 60px; padding-left: 20px; box-sizing: border-box;} #header .top-box h1{margin: 0px;} #header .top-box h1 img{height: 35px; width: auto;} #header .header-search {margin-right: 22px;} #header .header-search img{width: 24px;} #header .right-box{display: flex; align-items: center; justify-content: flex-end;} #header .bottom-box .inner{flex-direction: column; height: auto; align-items: flex-start; padding: 91px 20px 154px; box-sizing: border-box; width: 100%; min-width: 100%;} #header .bottom-box a{color: #fff;} #header .nav{flex-direction: column; align-items: flex-start; border-top: solid #fff 1px; width: 100%; margin-bottom: 87px;} #header .nav li{width: 100%; font-family: 'Noto Serif JP', serif; border-bottom: solid #fff 1px;} #header .nav li:nth-child(2) a.arrow{width: 100%;} #header .nav li:nth-child(3) a.arrow{width: 100%;} #header .nav a.arrow{width: 100%; justify-content: flex-start; padding-left: 43px; box-sizing: border-box; font-size: 16px;} #header .nav .arrow::before{content: ''; width: 19px; height: 2px; border: 0px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); position: absolute; top: 48%; right: 8px; margin-top: 0px; background: #fff; display: block;} #header .nav .arrow::after{content: ''; width: 19px; height: 2px; border: 0px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); position: absolute; top: 48%; right: 8px; margin-top: 0px; background: #fff; display: block;} #header .nav .arrow.active::after{display: none;} #header .nav .sub{display: none; position: relative; background-color: #481304; padding: 0 72.5px 38px;} #header .nav .sub li{border: 0px; line-height: 21px; margin-bottom: 15px; font-size: 16px;} #header .nav .sub.active{display: block;} #header h2{color: #fff; font-family: 'Noto Serif JP', serif; font-size: 20px; letter-spacing: 0.1em; margin-bottom: 37px;} #header .shop-menu h2{margin-bottom: 32px;} #header .shop-menu ul{border-top: 0px; margin-bottom: 47px;} #header .shop-menu li{font-size: 16px; margin-bottom: 16px; border: 0px;} #header .shop-menu li:nth-child(6){margin-bottom: 39px;} #header .shop-menu li:nth-child(7){font-size: 14px; margin-bottom: 10px;} #header .shop-menu li:nth-child(8){font-size: 14px; margin-bottom: 0px;} #header .shop-menu .share ul li{margin: 0px;} #header .shop-menu .share ul li:nth-child(1) {margin-right: 26px;} #header .shop-menu .share ul li:nth-child(1) img{width: 39px; height: auto;} #header .shop-menu .share ul li:nth-child(2) img{width: 43.5px; height: auto;} #header .shop-menu .share ul{display: flex; justify-content: flex-start; align-items: center; margin-bottom: 0px;} /* menu button */ #menu_button {width: 45px; height: 37px; cursor: pointer; z-index: 999; position: relative;} #menu_button p {position: absolute; width: 100%; height: 20px; left: 0; bottom: 0; line-height: 20px; font-size: 10px; font-weight: normal; text-align: center;} #menu_button span {position: absolute; width: 34px; height: 2px; left: -8px; background-color: #ffffff;} #menu_button span:first-child {top: 10px;} #menu_button span:nth-child(2) {top: 18px;} #menu_button span:nth-child(3) {top: 26px;} #menu_button.active span{background-color: #ffffff;} #menu_button.active span:first-child {transform: translateY(8px) rotate(135deg); -webkit-transform: translateY(8px) rotate(135deg); -moz-transform: translateY(8px) rotate(135deg); -ms-transform: translateY(8px) rotate(135deg);} #menu_button.active span:nth-child(2) {opacity: 0;} #menu_button.active span:nth-child(3) {transform: translateY(-8px) rotate(-135deg); -webkit-transform: translateY(-8px) rotate(-135deg); -moz-transform: translateY(-8px) rotate(-135deg); -ms-transform: translateY(-8px) rotate(-135deg);} #menu_button.active:hover span:first-child {width: 25px;} #menu_button.active:hover span:last-child {width: 25px;} /* menu *//* button */ #head_submenu { transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); visibility: hidden;} #head_submenu.open { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); visibility: visible;} /* head submenu */ #head_submenu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 997;} #head_submenu .head { position: fixed; width: 100%; top: 0; right: 0; bottom: 0; background-color: #481304; box-shadow: 0px 0px 5px rgba(0,0,0,0.5); overflow-y: scroll;} /* animation */ #menu_button, #menu_button span, #head_submenu, #head_submenu #submenu_left ul li a, #head_submenu #submenu_right ul li a, #head_menu ul li a { transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s;} } /* ================================================================= 5.フッター =================================================================*/ #footer{background: #fff;} #footer .nav{display: flex; justify-content: center; margin: 0px 0 0px;} #footer .nav li{color: #481304; margin-right: 0.5em;} #footer .nav li:last-child{ margin-right: 0;} #footer .nav a{font-size: 14px; color: #481304;} #footer .copy{background: #481304; width: 100%; height: 50px; text-align: center; color: #fff; font-size: 10px; padding-top: 18px; box-sizing: border-box; margin-bottom: 0px;} /* spのみ */ @media screen and (max-width: 999px) { #footer .nav{flex-direction: column;} #footer .nav li{margin-right: 0; font-family: 'Noto Serif JP', serif;} #footer .nav a{font-size: 15px; color: #fff; display: block; width: 100%; height: 60px; border-bottom: 1px solid #fff; background: #481304; padding-top: 17px; padding-left: 20px; box-sizing: border-box;} #footer .copy{background: #ffffff; color: #481304;} }