@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Allura&family=Noto+Sans+JP:wght@400;500;600;700&display=swap'); * { font-family: 'Noto sans JP' ; } li { list-style: none; } /* --------------------------------------------------------------------- header、footer --------------------------------------------------------------------- */ header { background-color: #ffffff; } footer { /* background: linear-gradient(#dbd3be 0%, #ffffff 40%, #ffffff 100%); */ border-top: 10px solid #dbd3be; padding-top: 102px; padding-bottom: 70px; position: relative; } @media screen and (max-width:768px) { footer { padding-top: 70px; padding-bottom: 40px; } } footer .btn, footer li a { color: #ffffff; } footer .footer-wrapper { max-width: 1030px; width: 100%; padding: 0 15px; margin: 0 auto; } @media screen and (max-width:768px) { .footer-block { margin: 0 auto; max-width: 190px; width: 100%; } } .footer-ul { display: flex; align-items: center; justify-content: space-evenly; } @media screen and (max-width:768px) { .footer-ul { display: inline-block; justify-content: center; } } .footer-ul .card1 { padding-top: 30px; } @media screen and (max-width:768px) { ol, ul { padding-left: 0; } } .icon_list { display: flex; } .icon_item { width: 30px; height: 30px; } .icon_item i { border: 2px solid #666666; border-radius: 50px; padding: 3px; width: 50px; height: 50px; color: #666666; display: inline-block; text-align: center; line-height: 40px; } .icon_item:not(:first-child) { margin-left: 26px; } /* --------------------------------------------------------------------- navi menu --------------------------------------------------------------------- */ header .navbar .navbar-nav { width: auto; justify-content: flex-end; margin-left: auto; margin-right: 0; flex-direction: row; } .navbar img { margin: 20px 0 20px 50px; } @media (max-width: 768px) { .navbar img { max-width: 100px; width: 100%; object-fit: contain; margin: 0 0 0 5px; } } header .navbar .navbar-nav .nav-link, header .navbar .navbar-nav .nav-link:visited, header .navbar .navbar-nav .nav-link:active, header .navbar .navbar-nav .nav-link:link { color: #666666; } header .navbar .navbar-nav .nav-link:hover { color: #f9d3ac; } header .navbar .navbar-nav .nav-item { text-align: center; margin-right: 0 !important; display: flex; align-items: center; } header .navbar .navbar-nav .nav-item:before, header .navbar .navbar-nav .nav-item:last-child:after { content: '|'; color: #666666; margin-left: 1em; margin-right: 1em; position: relative; bottom: 2px; } header .categoryButton { display: inline-block; width: auto; color: #666666; padding: .75rem 0; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 2px solid #666666; border-radius: .4rem; transition: box-shadow .15s ease-in-out; text-align: center; border: none; } header .category-nav { list-style: none; margin: 0; padding: 0 2rem 1rem; } header .category-nav .category-item { color: #666666; border-top: 0px; border-left: 0px; border-right: 0px; border-radius: 0px; border-bottom: 1px dotted #cccccc; } header .category-nav .category-link, header .category-nav .category-link:visited, header .category-nav .category-link:active, header .category-nav .category-link:link { color: #666666; text-decoration: none; display: block; padding: 0.5rem 0.2rem; } header .category-nav .category-link:hover { color: #1c273c; background: #f8f9fa; } .u-mobile { display: none; } @media (max-width: 1024px) { .u-mobile { display: block; } } /* --------------------------------------------------------------------- button setting --------------------------------------------------------------------- */ .btn-success:hover { background-color: #f5b676; color: #fff; } /* --------------------------------------------------------------------- main --------------------------------------------------------------------- */ main { padding-top: 75px; overflow: hidden; } @media (min-width: 992px) { main { padding-top: 80px; } } /* --------------------------------------------------------------------- main banner --------------------------------------------------------------------- */ .myMainBanner { background-position: center; background-size: auto 100%; background-image: url("../images/kanban_bg.png?a"); } .main_logo { margin-left: 30%; } @media (max-width: 1024px) { .main_logo { margin-left: 20%; } } /* --------------------------------------------------------------------- 追記分 --------------------------------------------------------------------- */ main { font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; } header .navbar { padding-top: 0; padding-bottom: 0; border-bottom: 10px solid #dbd3be; } .py-5 { max-width: 1010px; width: 100%; margin: 0 auto; padding: 0 5px; } .btn-success { background-color: #a8852b !important; color: #ffffff !important } .fcssSearchBox .form-control, .fcssSearchBox button { border-radius: 0; height: 100%; } .fcssSearchBox .form-control { border-radius: 0; border: none; } .mySearchBox { background-color: #dbd3be; padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 100px; } @media (max-width: 768px) { .mySearchBox { margin-bottom: 60px; } } .myContentsMenuBtn { border: none; font-size: 20px; white-space: nowrap; } @media (max-width: 768px) { .myContentsMenuBtn { font-size: 4vw; } } .myContentsMenuBtn::after { content: ''; display: block; width: 100%; height: 5px; background: linear-gradient(to right, #a9862d, #ffffff); margin-top: 0.5rem; margin-bottom: 0.5rem; } .navbar-nav .nav-link { border-top: 0px; border-left: 0px; border-right: 0px; border-radius: 0px; color: #585858; } #myHamburgerMenuPc .navbar-nav .nav-link, #myHamburgerMenuSp .navbar-nav .nav-link { border-bottom: 1px #cccccc dotted; } .coupon { max-width: 1000px; width: 100%; padding: 0 10px; } @media screen and (max-width:1024px) { .coupon { padding: 0 20px; } } .coupon-ul { display: flex; flex-wrap: wrap; gap: 60px; } @media screen and (max-width:1024px) { .coupon-ul { gap: 50px; justify-content: space-between; } } @media screen and (max-width:768px) { .coupon-ul { flex-direction: column; align-items: center; gap: 30px; } } @media screen and (max-width:375px) { .coupon-ul { gap: 20px; } } .coupon-list { max-width: 460px; } @media screen and (max-width:1024px) { .coupon-list { max-width: 46%; } } @media screen and (max-width:768px) { .coupon-list { max-width: 460px; width: 100%; } } .myBtn01 { margin: 0 10px; } .myBtn01 a { color: #ffffff; background: #6a5f4b; border: 3px solid #ffffff; line-height: 1.5277; font-size: 36px; padding: 38px 100px 38px 110px; white-space: nowrap; width: 100%; max-width: 500px; } @media screen and (max-width:768px) { .myBtn01 a { padding: 20px; font-size: 22px; max-width: 380px; width: 100%; } } .myBtn01 a:hover { transform: translate3d(.2rem, .2rem, 0); box-shadow: none; opacity: 1; transition: all 0.2s; } .card1 { max-width: 210px; width: 100%; } .address { margin-left: 1.8518vw; } .address span, .menu span { color: #666666; border-bottom: 2px solid #666666; padding: 10px 0px; display: block; text-transform: uppercase; font-size: 22px; letter-spacing: 3px; margin-bottom: 10px; max-width: 200px; width: 100%; } .address li, .menu li { margin: 10px 0px; list-style: none; } .address li a, .menu li a { color: #666666; letter-spacing: 3px; text-decoration: none; font-size: 15px; } h2 { text-align: center; font-size: 40px; color: #644f36; } @media screen and (max-width:768px) { h2 { font-size: 30px; } } h2.myContentTitle { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; display: flex; width: fit-content; margin-left: auto; margin-right: auto; } h2.myContentTitle span { z-index: 10; } h2.myContentTitle::before { content: attr(data-en); position: absolute; left: 0.5rem; bottom: -0.5rem; color: #f2e39e; letter-spacing: 0; font-size: 80px; font-weight: 400; font-family: 'Allura', cursive; /*font-family: luxus-brut, cursive;*/ font-style: italic; transform: rotate(-3deg) translateX(-65%) translateY(5%); overflow: visible; white-space: nowrap; z-index: 9; } h2#linkPoint01::before { content: attr(data-en); position: absolute; left: 10.5rem; bottom: 2.5rem; color: #f2e39e; letter-spacing: 0; font-size: 80px; font-weight: 400; font-family: 'Allura', cursive; /*font-family: luxus-brut, cursive;*/ font-style: italic; transform: rotate(-3deg) translateX(-65%) translateY(5%); overflow: visible; white-space: nowrap; z-index: 9; } @media screen and (max-width:768px) { h2.myContentTitle::before { font-size: 50px; transform: rotate(-3deg) translateX(-45%) translateY(-10%); } } @media screen and (max-width:768px) { h2.subTitle-chain::before { transform: rotate(-3deg) translateX(-15%) translateY(-10%); } } h2.subTitle::before { transform: rotate(-3deg) translateX(-30%) translateY(-35%); } @media screen and (max-width:768px) { h2.subTitle::before { transform: rotate(-3deg) translateX(-10%) translateY(-60%); } } .small_txt { font-size: 24px; } @media screen and (max-width:768px) { .small_txt { font-size: 18px; } } .fcssPagetop a { color: #ffcc00; } footer .row>*:first-child { align-self: center; } footer .logo img { width: 190px; } @media (max-width:767.98px) { footer .row>*:first-child { width: 100%; } } .footer_up { position: fixed; bottom: 13.5%; right: 10%; } @media screen and (max-width:767px) { .footer_up { bottom: 0; right: 0; } } .footer_up a { display: block; text-decoration: none; } .my-chevron-up { display: block; width: 100px; height: 100px; -webkit-border-radius: 50%; border-radius: 50%; background: #666666; border: 2px solid #ffffff; position: relative; } @media screen and (max-width:767px) { .my-chevron-up { display: block; width: 50px; height: 50px; -webkit-border-radius: 50%; border-radius: 50%; background: #666666; border: 2px solid #ffffff; position: relative; } } .my-chevron-up::before { content: ""; position: absolute; top: 34px; left: 28px; width: 40px; height: 40px; border-top: 12px solid #ffffff; border-right: 12px solid #ffffff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media screen and (max-width:767px) { .my-chevron-up::before { content: ""; position: absolute; top: 15px; left: 11px; width: 25px; height: 25px; border-top: 4px solid #ffffff; border-right: 4px solid #ffffff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2888, 88, 88, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* @media screen and (min-width:768px) { .navbar-light .navbar-toggler-icon { display:none; } } */ .card { width: 100%; } .myCard { margin-top: 15px; } .myCard .mySubtitle { display: block; color: #f22c2c; } .myCard.myCardOrange .mySubtitle { color: #f3894c; } .myCard h3 { color: #644f36; padding-left: 0.5em; border-left: 0.25em solid #fd6969; } .myCard.myCardOrange h3 { border-left-color: #f3894c; } .myCard h4 { color: #644f36; } .myCard p { color: #644f36; font-family: Noto Sans JP, 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .myCard .flex-column { display: flex; } .btn-block { justify-content: space-evenly; } @media screen and (max-width:767px) { .btn-block { justify-content: start; } } .myBtn02 a { color: #6a5f4b; transition: 0.3s ease-in-out; background: #ffffff; border: 3px solid #6a5f4b; letter-spacing: 0.07em; line-height: 1.5277; font-size: 16px; padding: 13px 30px; white-space: nowrap; max-width: 340px; width: 100%; } .btn_move a { transition: 0.3s ease-in-out; /* box-shadow: .2rem .2rem 0 .1rem #dbd3be; */ } .btn_move a:hover { transform: translate3d(.2rem, .2rem, 0); box-shadow: none; opacity: 1; transition: all 0.2s; } @media screen and (max-width:992px) { .myBtn02 a { padding: 16px 16px; font-size: 18px; } } @media screen and (max-width:375px) { .myBtn02 a { padding: 10px 15px; font-size: 14px; } } .myBtn02 a::after { content: ""; width: 0; height: 0; margin-left: 9px; border-style: solid; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9.47px solid #6a5f4b; border-right: 0; } .myBtn02 a:first-child { margin-right: 10px; } @media screen and (max-width:768px) { .myBtn02 a:first-child { margin-right: 0; } } .myBtn03 { margin: 0 10px; } .myBtn03 a { color: #6a5f4b; background: #ffffff; border: 3px solid #6a5f4b; line-height: 1.5277; font-size: 16px; padding: 13px 30px 13px 30px; white-space: nowrap; /* max-width: 500px; */ width: 100%; } @media screen and (max-width:992px) { .myBtn03 a { padding: 16px; font-size: 18px; max-width: 300px; width: 100%; } } .fcssItemList .fcssImageBox { aspect-ratio: 1 / 1; width: 100%; height: auto; display: flex; align-items: center; justify-content: center; } .fcssItemList .card-img-top { width: auto; max-width: 100%; height: auto; max-height: 100%; } /* --------------------------------------------------------------------- contents --------------------------------------------------------------------- */ .contents { max-width: 1000px; width: 100%; margin: 0 auto; } .contents_text { text-transform: uppercase; font-size: 15px; color: #ceba88; white-space: nowrap; margin-left: 28px; } .sponly{ display:none; } @media screen and (max-width: 768px) { .contents_text { font-size: 3vw; margin-left: 0px; } .fcssItemList .card-text { line-height: 1em; margin-bottom: 0px; } .card-body { padding: 0.5rem 0.5rem; } .sponly{ display:block; } } /* --------------------------------------------------------------------- hot item --------------------------------------------------------------------- */ .hotitem { max-width: inherit; width: 100%; background-color: #6a5f4b; position: relative; } .hotitem .myContentTitle { color: #fff; margin-top: 90px; } @media screen and (max-width:768px) { .hotitem h2 { font-size: 32px; } } .hotitem h2.myContentTitle::before { transform: rotate(-3deg) translateX(-10%) translateY(-55%); color: #f2e39e; font-size: 80px; z-index: 9; } @media screen and (max-width:992px) { .hotitem h2.myContentTitle::before { transform: rotate(-3deg) translateX(5%) translateY(-50%); font-size: 80px; } } @media screen and (max-width:768px) { .hotitem h2.myContentTitle::before { transform: rotate(-3deg) translateX(-5%) translateY(-150%); font-size: 50px; } } .hotitem .myBtn01 a { box-shadow: none; margin-bottom: 90px; } .hotitem .hotItem_u-mobile { display: none; } @media screen and (max-width:768px) { .hotitem .hotItem_u-mobile { display: block; } } .hot_item { position: absolute; top: -40%; left: -28%; } @media screen and (max-width:992px) { .hot_item { position: absolute; top: -30%; left: -17%; } } @media screen and (max-width:768px) { .hot_item { position: absolute; top: -80%; left: -17%; } } .hot_item2 { position: absolute; top: 20%; right: -28%; } @media screen and (max-width:992px) { .hot_item2 { position: absolute; top: 20%; right: -17%; } } /*-----*/ .shadow-sm { box-shadow: none!important; } .fcssItemList .card-text { color: #AD191B; text-align: left; height: auto; padding-top: 10px; line-height: 1.3; font-weight: bold; font-size: 16px; margin-bottom: 0px; } .fcssItemList .card-text .price2 { text-decoration: line-through; } .fcssItemList .tax { font-size: 10px; color:#AD191B; } .card { border: none; } .card-body { padding: 0; font-size: 14px; } .fcssItemList .fcssPrice { color: #AD191B; font-weight: bold; text-align: left; font-size: 16px; line-height: 1.5; } @media (min-width: 576px){ .fcssItemList .fcssPrice { font-size: 18px; } } @media screen and (max-width:768px) { .fcssItemList .card-text { font-size: 13px; } .fcssItemList .fcssPrice { font-size: 16px; } } #hotitem_area{ background-image: url("../images/hotitem_bg.png"); padding: 5% 0; margin-bottom:5%; } .uline { max-width: 30px; height: 2px; /* text-align: center; */ margin: 3% auto 5%; border: 2px solid #a66c4a; } .bk{ color:#000000!important; font-size: 13px!important; } .couponico { text-align: left; font-size: 11px!important; font-weight:normal!important; background: #ff0000; color: #ffffff; padding: 2px 4px; }