@charset "UTF-8"; /* Scss Document */ .pc { display: block; } .sp { display: none; } .fied { position: fixed; width: 100%; height: 100%; } html { height: 100%; } html:before, html:after, body:before, body:after { content: ""; background: #d5c562; position: fixed; display: block; z-index: 5; } #prcontent { position: relative; height: 100vh; } html:before { height: 8px; left: 0; right: 0; top: 0; } html:after { width: 8px; top: 0; right: 0; bottom: 0; } body:before { height: 8px; right: 0; bottom: 0; left: 0; } body:after { width: 8px; top: 0; bottom: 0; left: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","Meiryo","ヒラギノ角ゴ ProN W3",sans-serif; color: #3e3a39; } a { text-decoration: none; } a img { border: none; } h1 { margin: 0; font-size: 1em; font-weight: normal; } h2 { margin: 0; font-size: 1em; font-weight: normal; } #navigation { width: 100%; min-width: 1200px; display: flex; justify-content: center; align-items: center; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; position: fixed; z-index: 1; top: 0px; left: 0px; background: #FFF; } #navigation #pcnav-line { height: 2px; background: url(../common_img/gnav_bg.png) repeat-x; width: 100%; clear: both; position: absolute; bottom: -2px; z-index: 1; left: 0px; } #navigation #gnav { padding:0; } #navigation #gnav li {padding: 20px 0 10px 0; float: left; text-align: center; margin-right: 60px; line-height: 1; color: #3e3a39; } #navigation #gnav li .link { background: url(../common_img/point.png) no-repeat left 3px; padding: 0 10px; line-height: 1; font-size: 16px; color: #3e3a39; } #navigation #gnav li a:hover { opacity: 0.8; } #navigation #gnav li a[target="_blank"] .link { background: url(../common_img/point.png) no-repeat left 3px, url(../common_img/window.png) no-repeat right 7px; padding: 0 15px 0 10px; line-height: 1; font-size: 16px; } #navigation #gnav li.onlineshop a[target="_blank"] .link { background:none; padding: 0; } #navigation #gnav li.onlineshop{ background:#d5c562 url(../common_img/cart.png) no-repeat left 10px top 23px; padding: 20px 10px 10px 40px; } #navigation #gnav li.onlineshop:hover{ opacity: 0.8; } #navigation #gnav li.onlineshop .link,#navigation #gnav li.onlineshop .sub{ color: #fff; } #navigation #gnav li a:hover img { opacity: 0.8; } #navigation #gnav li .sub { color: #cecece; font-size: 12px; letter-spacing: .1em; } #navigation #gnav li:first-child { margin-right: 150px; } #navigation #gnav li:last-child { margin-right: 0; } #navigation #gnabSp { display: none; } #top { background: url(../common_img/nenrin_bg_white.png); } #top #top-head { width: 100%; height: 100vh; position: relative; } #top #top-head #top-nav { position: absolute; bottom: 0px; width: 100%; margin-bottom: 2px; } #top #top-head #top-nav #navigation { position: relative; } /*20190531 kawaguchi.mod #top #top-head #top-nav #topics { transition: .5s; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; background: url(../common_img/nenrin_bg_data.png); position: relative; padding: 15px 25px; width: 100%; } */ #top #top-head #top-nav #topics { transition: .5s; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; background: url(../common_img/nenrin_bg_data.png); position: relative; padding: 25px 25px; width: 100%; } #top #top-head #top-nav #topics #topics-inner { width: 735px; position: relative; } #top #top-head #top-nav #topics #topics-inner h2.title { display: none; } #top #top-head #top-nav #topics #topics-btn { position: absolute; right: 50px; bottom: 20px; z-index: 1; padding: 5px; text-align: center; width: 210px; background: #d5c562; cursor: pointer; font-size: 12px; } #top #top-head #top-nav #topics #topics-btn .open { background: url(../img/topics_down1804.png) no-repeat left 7px; color: #FFFFFF; display: block; padding-left: 16px; } #top #top-head #top-nav #topics #topics-btn .close { display: none; } #top #top-head #top-nav #topics #topics-btn span { transition: .5s linear; } #top #top-head #top-nav #topics #topics-btn.active .close { display: block; background: url(../img/topics_up1804.png) no-repeat left 7px; color: #FFFF; padding-left: 16px; } #top #top-head #top-nav #topics #topics-btn.active .open { display: none; } #top #top-head #top-nav #topics a { color: #3e3a39; text-decoration: none; border-bottom: 1px solid; padding-bottom: 2px; } #top #top-head #top-nav #topics .topics-list { float: left; } #top #top-head #top-nav #topics .topics-list .topics-other { display: none; } #top #top-head #top-nav #topics .topics-list li { position: relative; background: url(../img/topics_line.png) no-repeat 85px bottom; padding-left: 85px; margin-bottom: 10px; } #top #top-head #top-nav #topics .topics-list li dl { width: 648px; line-height: 1.5; overflow: hidden; font-size: 14px; padding: 10px; } #top #top-head #top-nav #topics .topics-list li dl dt { display: block; float: left; width: 75px; } #top #top-head #top-nav #topics .topics-list li dl dd { display: block; margin-left: 75px; } #top #top-head #top-nav #topics .topics-list li dl dd a[target="_blank"] { background: url(../img/topics_window.png) no-repeat right 5px; padding-right: 16px; } #top #top-head #top-nav #topics .topics-list li dl dd .topic-img { position: absolute; top: 50%; left: 0px; margin-top: -20px; } #top #top-head #top-nav #topics .topics-list li dl dd .topic-img img { height: 40px; width: 67px; } #top #top-head #top-nav #topics .topics-list li dl dd .topic-img a { background: no-repeat; text-decoration: none; padding: 0; border-bottom: none; } #top #top-head .fixed #topics { display: none !important; } #top #top-head #top-nav.fixed #navigation { position: fixed; top: 0px; z-index: 2; } #top #container { display: flex; justify-content: center; align-items: center; flex-direction: column; } #top #container .top { width: 100%; min-width: 1100px; } #top #container .top section { width: 100%; min-width: 1100px; padding: 0px; position: relative; z-index: 1; } #top #container .top #products-info { background: url(../img/products_list_bg.png) no-repeat left 95%, url(../common_img/nenrin_bg_gold.png); display: flex; justify-content: center; align-items: center; } #top #container .top .list-area { width: 930px; position: relative; padding: 85px 0 70px 0; } #top #container .top .list-area h2 { width: 34px; position: absolute; z-index: 105; left: -70px; top: 85px; background: url(../img/link_h2.png) no-repeat right top; min-height: 180px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 16px; padding: 0px 10px 0 0; display: flex; justify-content: center; } #top #container .top .list-area .products-list { width: 930px; clear: both; margin: 0 auto 0px auto; display: flex; } #top #container .top .list-area .products-list li { width: 204px; margin-right: 35px; margin-bottom: 50px; float: left; text-align: center; } #top #container .top .list-area .products-list li a { color: #3e3a39; } #top #container .top .list-area .products-list li p { text-align: center; } #top #container .top .list-area .products-list li p .name { padding: 0px 10px; font-size: 20px; background: url(../common_img/point_shop_name.png) no-repeat left 0px; line-height: 1; text-align: center; } #top #container .top .list-area .products-list li p .sub { font-size: 16px; } #top #container .top .list-area .products-list li a:hover p { opacity: 0.5; } #top #container .top .list-area .products-list li .products-list-img { width: 204px; height: 340px; position: relative; /** -webkit-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; **/ margin-bottom: 15px; } #top #container .top .list-area .products-list li .products-list-img img { width: 204px; height: 340px; } #top #container .top .list-area .products-list li a:hover .products-list-img { opacity: 0.8; } #top #container .top .list-area .products-list li .products-list-img:before, #top #container .top .list-area .products-list li .products-list-img:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 35px rgba(201, 189, 121, 0.9); -moz-box-shadow: 0 0 35px rgba(201, 189, 121, 0.9); box-shadow: 0 0 35px rgba(201, 189, 121, 0.9); top: 50%; bottom: 0; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #top #container .top .list-area .products-list li .products-list-img:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #top #container .top .list-area .products-list li.pccopy { margin-top: 0px; } #top #container .top .list-area .products-list li.spcopy { display: none; } #top #container .top .list-area .products-list li:nth-child(4n) { margin-right: 0; } #top #container .top .list-area .products-list li:nth-child(5n) { clear: both; } #top #container .top .list-area .products-list02 { width: 930px; clear: both; margin: 50px auto 0 auto; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: flex-start; } #top #container .top .list-area .products-list02 li { width: 204px; margin-right: 35px; margin-bottom: 50px; float: left; line-height: 1.4; text-align: center; } #top #container .top .list-area .products-list02 li a { color: #3e3a39; } #top #container .top .list-area .products-list02 li p { text-align: center; } #top #container .top .list-area .products-list02 li p .name { padding: 0px 10px; font-size: 18px; background: url(../common_img/point_shop_name.png) no-repeat left 0px; text-align: center; } #top #container .top .list-area .products-list02 li p .sub { font-size: 14px; } #top #container .top .list-area .products-list02 li .icon { border-radius: 10px; padding: 2px 8px; font-size: 12px; margin-bottom: 10px; } #top #container .top .list-area .products-list02 li .icon.lmtd { background: #FFF; color: #c6394a; } #top #container .top .list-area .products-list02 li .icon.shingengou { background: #FFF; color: #d788b3; } #top #container .top .list-area .products-list02 li .icon.season { background: #FFF; color: #c2b353; padding: 2px 25px; } #top #container .top .list-area .icon.date { color: #c2b353; } #top #container .top .list-area .products-list02 li a:hover p { opacity: 0.5; } #top #container .top .list-area .products-list02 li .products-list-img { width: 204px; height: 128px; position: relative; /* -webkit-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; */ margin-bottom: 15px; } #top #container .top .list-area .products-list02 li a:hover .products-list-img { opacity: 0.8; } #top #container .top .list-area .products-list02 li .products-list-img:before, #top #container .top .list-area .products-list02 li .products-list-img:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 35px rgba(201, 189, 121, 0.9); -moz-box-shadow: 0 0 35px rgba(201, 189, 121, 0.9); box-shadow: 0 0 35px rgba(201, 189, 121, 0.9); top: 50%; bottom: 0; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #top #container .top .list-area .products-list02 li .products-list-img:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #top #container .top .list-area .products-list02 li:nth-child(4n) { margin-right: 0; } #top #container .top .list-area .products-list02 li:last-child { margin-right: 0; } #top #container .top .list-area .products-list02.event{width:1200px; margin: 50px 0 0 -120px;} #top #container .top .list-area .products-list02.event li:nth-child(4n) { margin-right: 35px; } #top #container .top .ohter-info { width: 100%; min-width: 1100px; } #top #container .top .ohter-info .other-link-area { width: 100%; min-width: 1100px; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; background: url(../img/link_bg_right.png) right -200px no-repeat, url(../img/link_bg_left.png) left bottom no-repeat, #FFF; position: relative; z-index: -1; } #top #container .top .ohter-info .other-link-area .oter-link { width: 1000px; margin-top: 100px; } #top #container .top .ohter-info .other-link-area .oter-link li { padding-left: 0px; position: relative; margin-bottom: 110px; } #top #container .top .ohter-info .other-link-area .oter-link li h2 { position: absolute; left: -80px; top: 0px; background: url(../img/link_h2.png) no-repeat right top; min-height: 180px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 16px; display: flex; justify-content: center; width: 34px; padding: 0px 10px 0 0; } #top #container .top .ohter-info .other-link-area .oter-link li .other-link-img { width: 760px; height: 400px; position: relative; /*-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */ margin-bottom: 15px; } #top #container .top .ohter-info .other-link-area .oter-link li .other-link-img:before, #top #container .top .ohter-info .other-link-area .oter-link li .other-link-img:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 30%; bottom: 0; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #top #container .top .ohter-info .other-link-area .oter-link li .other-link-img:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #top #container .top .ohter-info .other-link-area .oter-link li .other-link-img:hover { opacity: 0.8; } #top #container .top .ohter-info .other-link-area .oter-link li:nth-child(even) { float: right; } #top #container .top .ohter-info .other-link-area .oter-link li:last-child { margin-bottom: 0; } #top #container .top .ohter-info .oter-brand-area { width: 100%; min-width: 1100px; padding-top: 100px; padding-bottom: 200px; float: left; background: url(../img/link_bg_other.png) no-repeat left bottom #FFF; z-index: -1; position: relative; } #top #container .top .ohter-info .oter-brand-area .oter-brand { width: 1000px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: flex-start; } #top #container .top .ohter-info .oter-brand-area .oter-brand li { float: left; margin-left: 35px; } #top #container .top .ohter-info .oter-brand-area .oter-brand li .brand-link-img { width: 369px; height: 165px; position: relative; /* -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */ margin-bottom: 15px; } #top #container .top .ohter-info .oter-brand-area .oter-brand li a:hover .brand-link-img { opacity: 0.8; } #top #container .top .ohter-info .oter-brand-area .oter-brand li .brand-link-img:before, #top #container .top .ohter-info .oter-brand-area .oter-brand li .brand-link-img:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 30%; bottom: 0; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #top #container .top .ohter-info .oter-brand-area .oter-brand li .brand-link-img:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #top #container .top .ohter-info .oter-brand-area .oter-brand li .brand-link-img:hover { opacity: 0.8; } #shop { background: url(../common_img/nenrin_bg_white.png); } #shop #container { display: flex; justify-content: center; align-items: center; flex-direction: column; background: url(../shop/img/shop_bg_left.png) no-repeat left 200px, url(../shop/img/shop_bg_right.png) no-repeat right 200px; } #shop #container .main-photo { margin-top: 62px; position: relative; background: url(../shop/img/shop_main_photo.png) no-repeat center top; background-size: cover; width: 100%; min-width: 1100px; height: 580px; } #shop #container .main-photo .main-photo-txt { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: #FFF; position: absolute; left: 20%; top: 160px; } #shop #container .main-photo .main-photo-txt h2 { font-size: 44px; padding: 0 20px; font-weight: bold; } #shop #container .main-photo .main-photo-txt h2 .sub { font-size: 35px; } #shop #container .main-photo .main-photo-txt p { font-size: 20px; line-height: 1.6; } #shop #container article { width: 1020px; } #shop #container article section { width: 1020px; padding: 0 20px; margin-bottom: 30px; } #shop #container article .shop-photo { text-align: center; margin-top: 80px; } #shop #container article .shop-photo .shop-name span { background: url(../common_img/point_shop_title_name.png) no-repeat left 5px; font-size: 24px; padding-left: 10px; margin-left: -10px; line-height: 1; font-weight: bold; } #shop #container article .shop-photo .shop-text { clear: both; font-size: 16px; line-height: 2; } #shop #container article .shop-photo .shop-slick { width: 980px; height: 600px; float: left; margin: 30px 0 35px 0; } #shop #container article .shop-photo .shop-slick li { overflow: hidden; height: 600px; } #shop #container article .shop-photo .shop-slick li div { background-size: cover; height: 100%; width: 100%; display: block; white-space: nowrap; } #shop #container article .shop-photo .shop-slick li img { width: 970px; } #shop #container article .shop-info { text-align: center; } #shop #container article .shop-info .shop-map { width: 970px; padding: 70px 0; display: flex; justify-content: center; align-items: center; background: #FFF; } #shop #container article .shop-info table.shop-data { width: 650px; display: inline-block; font-size: 16px; } #shop #container article .shop-info table.shop-data th { width: 75px; text-align: left; vertical-align: top; padding: 20px 0; border-bottom: 2px solid #bebdbd; } #shop #container article .shop-info table.shop-data td { border-bottom: 1px solid #bebdbd; width: 575px; text-align: left; padding: 15px 0 15px 120px; } #shop #container article .shop-info table.shop-data td .schedule { margin-left: -0.5em; } #shop #container article .shop-info .map-link { width: 420px; border: 1px solid #d5c562; border-radius: 18px; padding: 10px; margin: 15px auto 0 165px; background: #FFF; } #shop #container article .shop-info .map-link p { color: #a7962b; } #shop #container article .shop-info .map-link p span { font-size: 18px; background: url(../common_img/window_note_gold.png) right 10px no-repeat; padding-right: 20px; line-height: 1; } #shop #container article .shop-info .other-link { width: 420px; border: 1px solid #d5c562; border-radius: 18px; padding: 10px; margin: 15px auto 0 165px; background: #d5c562; } #shop #container article .shop-info .other-link p { color: #FFF; } #shop #container article .shop-info .other-link p span { font-size: 18px; background: url(../common_img/other_link_arrow.png) right 6px no-repeat; padding-right: 20px; line-height: 1; } #shop #container article .shop-info a .map-link { color: #a7962b; } #shop #container article .shop-info .shop-note { width: 650px; display: inline-block; text-align: left; font-size: 12px; margin-top: 20px; } #shop #container article .shop-info .shop-note li { text-indent: -1em; padding-left: 1em; } #shop #container article .shop-items { padding-bottom: 100px; } #shop #container article .shop-items .shop-items-list { background: url(../common_img/nenrin_bg_gold.png); padding: 15px 30px 0 30px; margin-bottom: 15px; } #shop #container article .shop-items .shop-items-list h3 { font-size: 16px; color: #a7962b; } #shop #container article .shop-items .shop-items-list ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; } #shop #container article .shop-items .shop-items-list ul li { width: 20%; font-size: 12px; padding-top: 10px; margin-bottom: 15px; color: #3e3a39; } #shop #container article .shop-items .shop-items-list ul li img { float: left; margin-top: -5px; margin-right: 5px; } #shop #container article .shop-items .shop-items-list ul li a:hover img, #shop #container article .shop-items .shop-items-list ul li a:hover p { opacity: 0.8; } #shop #container article .shop-items .shop-items-list ul li p { overflow: hidden; } #shop #container article .shop-items .shop-items-list ul a { color: #3e3a39; } #shop #container article .shop-items .shop-items-note { font-size: 12px; clear: both; } #shop #container article .shop-items .shop-items-note li { color: #a7962b; } #shop #container article .shop-items .shop-items-note li a { color: #a7962b; text-decoration: underline; } #shop #container article .shop-items .shop-items-note li a[target="_blank"] { background: url(../common_img/window_note_gold.png) right 2px no-repeat; padding-right: 14px; } #shop #container article .shop-items .shop-items-note li .fc { color: #a7962b; background: url(../common_img/icon_fc.png) no-repeat left 3px; padding-left: 20px; } #shop #container article .shop-note { width: 880px; margin: 0 auto 50px auto; clear: both; } #shop #container article .shop-note p .name { background: url(../common_img/point_gray.png) left 5px no-repeat; padding-left: 10px; font-size: 16px; font-weight: bold; } #shop #container article .shop-note p .sub { font-size: 14px; font-weight: bold; } #shop #container article .shop-note p .txt { font-size: 14px; } #shop #container article .shop-note p a { color: #3e3a39; } #shop #container article .shop-note p a[target="_blank"] { background: url(../common_img/window_shop_note.png) no-repeat right 5px; padding-right: 15px; } #shop #container article .online-shop { width: 1020px; border: solid 1px #d5c562; clear: both; padding: 30px; margin-bottom: 150px; background: url(../shop/img/shop_list_online.png) -50px 20px no-repeat, url(../shop/img/shop_list_online.png) 800px 20px no-repeat, #FFF; } #shop #container article .online-shop h3 { text-align: center; background: url(../shop/img/online_shiop_bar.png) bottom no-repeat; padding-bottom: 10px; font-size: 26px; letter-spacing: 0.1em; margin-bottom: 25px; } #shop #container article .online-shop .txt { font-size: 16px; text-align: center; } #shop #container article .online-shop .txt .sub { font-size: 12px; } #shop #container article .online-shop .online-list { width: 880px; margin: 30px auto 0px auto; display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; } #shop #container article .online-shop .online-list2 { margin: 50px auto 0px auto; justify-content: center; } #shop #container article .online-shop .online-list li { float: left; border-radius: 25px; background-color: #d5c562; font-size: 16px; padding: 15px; width: 420px; height: 5em; text-align: center; margin-bottom: 30px; justify-content: center; display: flex; align-items: center; font-weight: bold; } #shop #container article .online-shop .online-list2 li {background-color: #ad9b2d;margin-bottom: 0;} #shop #container article .online-shop .online-list a { color: #FFF; } #shop #container article .online-shop .online-list a[target="_blank"] span { background: url(../common_img/window_ft.png) no-repeat right center; padding-right: 20px; } #shop #container article .online-shop .online-list li:hover { opacity: 0.8; } #shop #container article .online-shop .online-list li:nth-child(odd) { margin-right: 40px; } #shop #container article .online-shop .online-list li:nth-child(even) { margin-right: 0px; } #shop #container article .shop-list { width: 880px; clear: both; margin: 110px auto 0 auto; } #shop #container article .shop-list li { width: 190px; margin-right: 40px; margin-bottom: 30px; float: left; text-align: center; } #shop #container article .shop-list li a { color: #3e3a39; } #shop #container article .shop-list li p { text-align: center; } #shop #container article .shop-list li p .name { padding: 0px 0 0 10px; font-size: 20px; font-weight: bold; background: url(../common_img/point_shop_name.png) no-repeat left 5px; line-height: 1; text-align: center; } #shop #container article .shop-list li p .name.lbt { background: url(../common_img/point_shop_name_lbt.png) no-repeat left 7px; } #shop #container article .shop-list li p .sub { font-size: 16px; font-weight: bold; } #shop #container article .shop-list li a[target="_blank"] p { background: url(../common_img/window_shop_note.png) no-repeat right 5px; padding-right: 15px; } #shop #container article .shop-list li a:hover p { opacity: 0.5; } #shop #container article .shop-list li .shop-list-img { width: 190px; height: 190px; position: relative; /* -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */ margin-bottom: 15px; } #shop #container article .shop-list li a:hover .shop-list-img { opacity: 0.8; } #shop #container article .shop-list li .shop-list-img:before, #shop #container article .shop-list li .shop-list-img:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 50%; bottom: 0; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #shop #container article .shop-list li .shop-list-img:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #shop #container article .shop-list li:nth-child(4n) { margin-right: 0; } #shop #container article .shop-list li:nth-child(5n) { clear: both; } #shop #container article .shop-list02 { width: 880px; background-color: #fdf6d3; clear: both; float: left; position: relative; z-index: -2; } #shop #container article .shop-list02 li { width: 190px; margin-right: 40px; margin-bottom: 40px; float: left; text-align: center; } #shop #container article .shop-list02 li .name { padding: 1px 5px; border-left: 5px solid #d9001a; } #shop #container article .shop-list02 li .shop-list-img { width: 190px; height: 190px; position: relative; /* -webkit-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; */ margin-bottom: 15px; } #shop #container article .shop-list02 li .shop-list-img:before, #shop #container article .shop-list02 li .shop-list-img:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 5px 20px rgba(201, 189, 121, 0.8); -moz-box-shadow: 0 5px 20px rgba(201, 189, 121, 0.8); box-shadow: 0 5px 20px rgba(201, 189, 121, 0.8); top: 50%; bottom: 0; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #shop #container article .shop-list02 li .shop-list-img:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #shop #container article .shop-list02 li:nth-child(4n) { margin-right: 0; } #shop #container article .shop-list02 li:nth-child(5n) { clear: both; } #shop #container.index { background-position: left 700px,right 700px; } #about { min-height: 500px; height: 100%; } #about .about-section { width: 100%; clear: both; min-width: 1100px; } #about .about-section .text-deco { font-size: 18px; line-height: 2; display: flex; align-items: center; justify-content: center; height: 100%; width: 50%; flex-direction: row-reverse; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } #about .about-section .text-deco ul { position: relative; } #about .about-section .text-deco ul h2 { padding-left: 10px; } @-moz-document url-prefix() { #about .about-section .text-deco ul { width: 100px; } } #about .about-section .text-full { width: 100%; padding: 50px; font-size: 18px; line-height: 2; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: -webkit-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: center; } #about .about-section .text-full ul { clear: both; margin: 0px auto; } @-moz-document url-prefix() { #about .about-section .text-full ul { width: 100px; } } #about .about-section .text-full.end { background: url(../about/img/about_end_bg_1909.png) center bottom no-repeat; height: auto; padding-bottom: 180px; } #about .about-section .text-full.end ul { position: relative; } @-moz-document url-prefix() { #about .about-section .text-full.end ul { width: 150px; } } #about .about-section .text-full.end .about-logo { position: absolute; left: -100px; bottom: 0; } #about .about-section .about-slick { width: 50%; height: 100vh; float: left; } #about .about-section .about-slick li { overflow: hidden; height: 100vh; } #about .about-section .about-slick li div { background-size: cover; transition: -webkit-transform 15s linear; transition: transform 15s linear; transition-delay: 2s; height: 100%; width: 100%; display: block; white-space: nowrap; } #about .about-section .about-slick-none { width: 50%; height: 100vh; float: left; } #about .about-section .about-slick-none li { overflow: hidden; height: 100vh; } #about .about-section .about-slick-none li div { background-size: cover; transition: -webkit-transform 15s linear; transition: transform 15s linear; transition-delay: 2s; height: 100%; width: 100%; display: block; white-space: nowrap; } #about .about-section .about-slick .slick-active div { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } #about .about-section .about-slick#about1 li div { background-position: left top; } #about .about-section .about-slick#about1 li:nth-child(1) div { background-image: url(../about/img/about_slide01_01.png); } #about .about-section .about-slick#about1 li:nth-child(2) div { background-image: url(../about/img/about_slide01_02.png); } #about .about-section .about-slick#about1 li:nth-child(3) div { background-image: url(../about/img/about_slide01_03.png); } #about .about-section .about-slick#about2 li div { background-position: left top; } #about .about-section .about-slick#about2 li:nth-child(1) div { background-image: url(../about/img/about_slide02_01.png); } #about .about-section .about-slick#about2 li:nth-child(2) div { background-image: url(../about/img/about_slide02_02.png); } #about .about-section .about-slick#about3 li div { background-position: left top; } #about .about-section .about-slick#about3 li:nth-child(1) div { background-image: url(../about/img/about_slide04_01.png); } #about .about-section .about-slick#about3 li:nth-child(2) div { background-image: url("../about/img/about_slide04_02_191101.png"); } #about .about-section .about-slick#about4 li div { background-position: left top; } #about .about-section .about-slick#about4 li:nth-child(1) div { background-image: url(../about/img/about_slide05_01_191101.png); } #about .about-section .about-slick-none#about4 li div { background-position: left top; } #about .about-section .about-slick-none#about4 li:nth-child(1) div { background-image: url(../about/img/about_slide05_01_191101.png); } #about .about-section:nth-child(even) .text-deco { float: left; background: url(../about/img/about_01_bg.png) right 95% no-repeat, url(../common_img/nenrin_bg_white.png); } #about .about-section:nth-child(odd) .text-deco { float: right; background: url(../about/img/about_02_bg.png) left 95% no-repeat, url(../common_img/nenrin_bg_white.png); } #about .about-section:nth-child(odd) .about-slick { float: right; } #about .about-section:nth-child(even) .about-slick { float: left; } #about .about-section:nth-child(odd) .about-slick-none { float: right; } #about .about-section:nth-child(even) .about-slick-none { float: left; } #products { background: url(../common_img/nenrin_bg_white.png); } #products #container.dela-nagoya { background: url(../products/img/products_bg_left_dela_nagoya.png) no-repeat left 700px, url(../products/img/products_bg_right_dela_nagoya.png) no-repeat right 700px; } #products #container.dela { background: url(../products/img/products_bg_left_dela_nagoya.png) no-repeat left 700px, url(../products/img/products_bg_right_dela_nagoya.png) no-repeat right 700px; } #products #container.whitedeco { background: url(../products/img/products_bg_left_whitedeco.png) no-repeat left 700px, url(../products/img/products_bg_right_whitedeco.png) no-repeat right 700px; } #products #container.mount-sakura { background: url(../products/img/products_bg_left_mount_sakura.png) no-repeat left 700px, url(../products/img/products_bg_right_mount_sakura.png) no-repeat right 700px; } #products #container.mount-matcha { background: url(../products/img/products_bg_left_mount_matcha.png) no-repeat left 700px, url(../products/img/products_bg_right_mount_matcha.png) no-repeat right 700px; } #products #container.tabegoro { background: url(../products/img/products_bg_left_tabegoro.png) no-repeat left 700px, url(../products/img/products_bg_right_tabegoro.png) no-repeat right 700px; } #products #container.mochi-kinako { background: url(../products/img/products_bg_left_mochi_kinako.png) no-repeat left 700px, url(../products/img/products_bg_right_mochi_kinako.png) no-repeat right 700px; } #products #container.mochi { background: url(../products/img/products_bg_left_mochi.png) no-repeat left 700px, url(../products/img/products_bg_right_mochi.png) no-repeat right 700px; } #products #container.moremoist { background: url(../products/img/products_bg_left_moremoist.png) no-repeat left 700px, url(../products/img/products_bg_right_moremoist.png) no-repeat right 700px; } #products .moremoist .catch { background: url(../products/img/moremoist_catch.png) center 70px no-repeat; } #products #container.baumbrulee { background: url(../products/img/products_bg_left_baumbrulee.png) no-repeat left 700px, url(../products/img/products_bg_right_baumbrulee.png) no-repeat right 700px; } #products #container.straight-zarame-kaede { background: url(../products/img/products_bg_left_straight_zarame_kaede.png) no-repeat left 700px, url(../products/img/products_bg_right_straight_zarame_kaede.png) no-repeat right 700px; } #products #container.straight-zarame-sakura { background: url(../products/img/products_bg_left_straight_zarame_sakura.png) no-repeat left 700px, url(../products/img/products_bg_right_straight_zarame_sakura.png) no-repeat right 700px; } #products #container.straight-zarame-kohaku { background: url(../products/img/products_bg_left_straight_zarame_kohaku.png) no-repeat left 700px, url(../products/img/products_bg_right_straight_zarame_kohaku.png) no-repeat right 700px; } #products #container.straight-lemon { background: url(../products/img/products_bg_left_straight_lemon.png) no-repeat left 700px, url(../products/img/products_bg_right_straight_lemon.png) no-repeat right 700px; } #products .straight-lemon .catch { background: url(../products/img/straight_lemon_catch.png) center 20px no-repeat; } #products #container.straight-apple { background: url(../products/img/products_bg_left_straight_apple.png) no-repeat left 700px, url(../products/img/products_bg_right_straight_apple.png) no-repeat right 700px; } #products .straight-apple .catch { background: url(../products/img/straight_lemon_apple.png) center 20px no-repeat; } #products #container.straight-choco { background: url(../products/img/products_bg_left_choco.png) no-repeat left 700px, url(../products/img/products_bg_right_choco.png) no-repeat right 700px; } #products #container.straight-orange { background: url(../products/img/products_bg_left_orange.png) no-repeat left 700px, url(../products/img/products_bg_right_orange.png) no-repeat right 700px; } #products #container.straight { background: url(../products/img/products_bg_left_straight.png) no-repeat left 700px, url(../products/img/products_bg_right_straight.png) no-repeat right 700px; } #products #container.shingengou { background: url(../products/img/products_bg_left_shingengou.png) no-repeat left 700px, url(../products/img/products_bg_right_shingengou.png) no-repeat right 700px; } #products #container.hitokuchi { background: url(../products/img/products_bg_left.png) no-repeat left 700px, url(../products/img/products_bg_right_straight.png) no-repeat right 700px; } #products #container.cafe { background: no-repeat; padding-top: 60px; } #products #container.cafe .lineup { width: 1020px; border: 1px solid #d5c562; padding: 50px 0px; background: #FFF; margin-bottom: 100px; clear: both; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; } #products #container.cafe .lineup h3 { font-size: 24px; text-align: center; } #products #container.cafe .lineup h3 span { background: url(../products/img/cafe_menu_title.png) no-repeat center bottom; padding-bottom: 5px; } #products #container.cafe .lineup .main-item { width: 100%; margin-top: 50px; display: table; padding: 0px 50px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #products #container.cafe .lineup .main-item .photo { width: 420px; display: table-cell; } #products #container.cafe .lineup .main-item .docs { padding: 0px 25px; width: 490px; position: relative; margin-top: 0px; } #products #container.cafe .lineup .main-item .docs .copy { line-height: 1.5; font-size: 14px; width: 280px; margin-top: 15px; } #products #container.cafe .lineup .main-item .docs .name { font-size: 20px; border-left: #d5c562 solid 7px; line-height: 1; padding-left: 10px; } #products #container.cafe .lineup .main-item .docs .subcut { float: right; font-size: 12px; color: #a7962b; } #products #container.cafe .lineup .main-item .docs .price { overflow: hidden; width: 280px; margin-top: 25px; font-size: 14px; font-weight: bold; } #products #container.cafe .lineup .main-item .docs .price dt { float: left; width: 75px; width: 50%; } #products #container.cafe .lineup .main-item .docs .price dd { width: 50%; margin-left: 50%; } #products #container.cafe .lineup .main-item .docs .topping { position: absolute; bottom: 0px; left: 25px; padding: 5px; background: url(../products/img/cafe_menu_bg.png); } #products #container.cafe .lineup .main-item .docs .topping .tit { color: #a7962b; font-size: 16px; text-align: center; line-height: 1.2; padding: 10px; } #products #container.cafe .lineup .main-item .docs .topping ul { background: #FFF; float: left; width: 440px; } #products #container.cafe .lineup .main-item .docs .topping ul li { width: 205px; float: left; padding: 15px auto; line-height: 1; font-size: 12px; margin-top: 10px; } #products #container.cafe .lineup .main-item .docs .topping ul li img { vertical-align: middle; margin-right: 5px; } #products #container.cafe .lineup .main-item .docs .topping ul li:first-child { padding-left: 35px; } #products #container.cafe .lineup .main-item .docs .topping ul li:last-child { width: 100%; text-align: center; margin-bottom: 10px; } #products #container.cafe .lineup .sub-menu { width: 100%; left 50px no-repeat, right 50px no-repeat; } #products #container.cafe .lineup .sub-menu .sub-txt { width: 740px; margin: 70px auto 40px auto; } #products #container.cafe .lineup .sub-menu .sub-txt .copy { line-height: 1.5; font-size: 14px; margin-top: 15px; } #products #container.cafe .lineup .sub-menu .sub-txt .name { font-size: 20px; border-left: #d5c562 solid 7px; line-height: 1; padding-left: 10px; } #products #container.cafe .lineup .sub-menu .sub-list { width: 740px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #products #container.cafe .lineup .sub-menu .sub-list li { text-align: center; width: 50%; float: left; } #products #container.cafe .lineup .sub-menu .sub-list li p { text-align: left; font-size: 14px; display: inline-block; } #products #container.cafe .lineup .sub-menu .sub-list li p .cafe-icon { background: #d5c562; border-radius: 7px; padding: 1px 4px; color: #FFF; } #products #container.cafe .lineup .sub-menu .sub-list li:last-child { width: 100%; margin-top: 70px; font-size: 12px; display: block; } #products #container.cafe .lineup .sub-menu .sub-list li:last-child ul li { width: 100%; text-align: left; } #products #container.cafe .lineup .sub-menu .sub-list li:last-child ul li:last-child { margin: 0; } #products #container.mount-brownie { background: url(../products/img/products_bg_left_mount_brownie.png) no-repeat left 700px, url(../products/img/products_bg_right_mount_brownie.png) no-repeat right 700px; } #products #container.mount-brownie .catch .title { margin-top: 50px; } #products #container.mount-brownie .lineup { margin-top: 200px; } #products #container.mount-montblanc { background: url(../products/img/products_bg_left_mount_montblanc.png) no-repeat left 700px, url(../products/img/products_bg_right_mount_montblanc.png) no-repeat right 700px; } #products #container.mount-montblancdeco { background: url(../products/img/products_bg_left_mount_montblancdeco.png) no-repeat left 700px, url(../products/img/products_bg_right_montblancdeco.png) no-repeat right 700px; } #products #container.assort { background: no-repeat; } #products #container.assort .anker { margin-top: -100px; clear: both; padding-top: 100px; } #products #container.assort h3 { clear: both; } #products #container.assort .link-box { width: 100%; min-width: 1100px; float: left; } #products #container.assort .link-anker { width: 1100px; margin: 70px auto 0px auto; display: flex; justify-content: center; } #products #container.assort .link-anker li { background: url(../products/img/assort_anker_bg.png) right center no-repeat, url(../products/img/assort_anker.png) no-repeat center bottom; width: 275px; float: left; text-align: center; padding-bottom: 50px; } #products #container.assort .link-anker li p { font-size: 18px; font-weight: bold; padding-bottom: 0px; } #products #container.assort .link-anker li a { color: #3e3a39; } #products #container.assort .link-anker li:last-child { background: url(../products/img/assort_anker.png) no-repeat center bottom; } #products #container.assort .link-anker.event{flex-wrap: wrap; width: 1000px;} #products #container.assort .link-anker.event li{margin-bottom: 50px; padding-bottom: 20px;} #products #container.assort .link-anker.event li:nth-child(3n){ background:url(../products/img/assort_anker.png) no-repeat center bottom;} #products #container.assort .lineup.more { margin-top: 50px; } #products #container.assort .lineup { margin-top: 100px; display: flex; justify-content: center; align-items: center; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #products #container.assort .lineup .lineup-items { -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 920px; padding-left: 0; } #products #container.assort .lineup .lineup-items li { width: 420px; margin-right: 80px; } #products #container.hitokuchi .lineup-items li { margin-bottom: 30px; } #products #container .lineup .lineup-items li .assort-list { width: 420px; border: 1px #f1e6a4 solid; padding: 10px; margin: 20px 0 30px 0; background-color: #FFF; } #products #container .lineup .lineup-items li .assort-list a { color: #3e3a39; } #products #container .lineup .lineup-items li .assort-list .midashi { color: #a7962b; font-size: 12px; font-weight: bold; } #products #container .lineup .lineup-items li .assort-list ul { display: block; } #products #container .lineup .lineup-items li .assort-list ul li { width: 190px; margin-right: 0px; float: left; display: table; overflow: hidden; font-size: 12px; } #products #container.hitokuchi .lineup-items li .assort-list ul li { width: 170px; margin-bottom: 0;} #products #container .lineup .lineup-items li .assort-list ul li p { display: table-cell; vertical-align: middle; font-size: 12px; text-align: left; padding-top: 15px; } #products #container .lineup .lineup-items li .assort-list ul li p.img { width: 60px; } #products #container .lineup .lineup-items li .assort-list ul li:nth-child(odd) { clear: both; } #products #container.assort .lineup .lineup-items li:nth-child(odd) { clear: both; } #products #container.assort .lineup .lineup-items li:nth-child(even) { margin-right: 0px; } #products #container.assort .lineup .lineup-items li:only-child { margin-right: 0px; } #products #container.assort .assort-link { background: url(../products/img/assort_line.png) no-repeat center top; font-size: 14px; padding-top: 80px; width: 1000px; margin: 0px auto 90px auto; clear: both; } #products #container.assort .assort-link .link-list { font-size: 12px; margin: 20px 0; } #products #container.assort .assort-link .link-list li { background: url(../products/img/assort_link_mark.png) no-repeat left center; padding-left: 9px; line-height: 2; } #products #container.assort .assort-link .link-list li a { color: #3e3a39; } #products #container.assort .assort-link .link-list li a:hover { opacity: 0.8; } #products #container.assort .assort-link .note { font-size: 12px; padding-left: 1em; text-indent: -1em; } #products #container.assort .assort-link .note a { color: #3e3a39; text-decoration: underline; } #products #container.assort .assort-link .note a[target="_blank"] { color: #3e3a39; background: url(../common_img/window.png) no-repeat right 2px; padding-right: 18px; } #products #container.assort .assort-link .note .fc { background: url(../common_img/icon_fc.png) no-repeat left 3px; padding-left: 21px; } #products #container.assort .assort-gift { width: 1020px; border: 1px solid #f1e6a4; margin: 0 auto; padding: 50px 0; margin-bottom: 150px; background: #FFF; display: flex; justify-content: center; align-items: center; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #products #container.assort .assort-gift h3 { font-size: 26px; padding-bottom: 10px; background: url(../products/img/assort_gift_line.png) center bottom no-repeat; } #products #container.assort .assort-gift .gift-inner { width: 820px; background: url(../products/img/assort_gift_order_1804.png) center bottom no-repeat; padding: 50px 0 210px 0; } #products #container.assort .assort-gift .gift-inner .gift-comment { font-size: 14px; clear: both; } #products #container.assort .assort-gift .gift-inner .gift-comment .title { font-size: 20px; } #products #container.assort .assort-gift .gift-inner .gift-catch { width: 410px; margin-right: 0px; float: left; display: table; overflow: hidden; font-size: 14px; } #products #container.assort .assort-gift .gift-inner .gift-catch p { display: table-cell; vertical-align: middle; font-size: 14px; text-align: left; padding-top: 15px; } #products #container.assort .assort-gift .gift-inner .gift-catch p .title { font-size: 20px; } #products #container.assort .assort-gift .gift-inner .gift-catch p.img { width: 100px; } #products #container.assort .assort-gift .gift-inner .gift-wrap { width: 410px; font-size: 12px; float: right; text-align: right; } #products #container.assort .assort-gift .gift-inner .gift-noshi { float: left; display: flex; justify-content: center; align-items: center; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 820px; margin-top: 70px; clear: both; } #products #container.assort .assort-gift .gift-inner .gift-noshi li { width: 400px; overflow: hidden; padding-right: 30px; margin-bottom: 70px; } #products #container.assort .assort-gift .gift-inner .gift-noshi li p { display: table-cell; vertical-align: middle; font-size: 14px; text-align: left; line-height: 1.5; } #products #container.assort .assort-gift .gift-inner .gift-noshi li p.img { width: 145px; } #products #container.assort .assort-gift .gift-inner .gift-noshi li:nth-child(odd) { clear: both; } #products #container { display: flex; justify-content: center; align-items: center; flex-direction: column; background: url(../products/img/products_bg_left.png) no-repeat left 700px, url(../products/img/products_bg_right.png) no-repeat right 700px; min-width: 1100px; } #products #container .main-photo { position: relative; background-position: center top; background-repeat: no-repeat; background-size: cover; width: 100%; min-width: 1100px; height: 580px; margin-top: 62px; } #products #container .main-photo .main-photo-txt { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: #3e3a39; position: absolute; left: 10%; top: 80px; } #products #container .main-photo .main-photo-txt h2 { font-size: 44px; padding: 0 20px; font-weight: bold; line-height: 1; } #products #container .main-photo .main-photo-txt h2 .sub { font-size: 35px; text-align: left; line-height: 1.9; text-align: center; } #products #container .main-photo .main-photo-txt p { font-size: 20px; line-height: 1.8; } #products #container .main-photo .main-photo-txt p rt { line-height: 1; } #products #container.mount-sakura .main-photo-txt {top:50px;} #products #container.mount-sakura .main-photo-txt p{padding-top: 4em;} #products #container #mount { background-image: url(../products/img/mount_main.png); } #products #container #straight { background-image: url(../products/img/straight_main.png); } #products #container #hitokuchi { background-image: url(../products/img/hitokuchi_main191101.png); } #products #container #tabegoro { background-image: url(../products/img/tabegoro_main.png); } #products #container #baumbrulee { background-image: url(../products/img/baumbrulee_main.png); background-position: center bottom;} #products #container #straight-choco { background-image: url(../products/img/straight_choco_main.png); } #products #container #straight-choco .main-photo-txt { color: #FFF; } #products #container #straight-lemon { background-image: url(../products/img/straight_lemon_main.png); } #products #container #straight-apple { background-image: url(../products/img/straight_apple_main.png); } #products #container #straight-orange { background-image: url(../products/img/straight_orange_main.png); } #products #container #straight-orange .main-photo-txt {top:50px; } #products #container #straight-zarame-kaede { background-image: url("../products/img/straight_zarame_kaede_main_1908.png"); ; background-position: center bottom;} #products #container #straight-zarame-sakura { background-image: url(../products/img/straight_zarame_sakura_main.png); } #products #container #straight-zarame-kohaku { background-image: url(../products/img/straight_zarame_kohaku_main.png); } #products #container #shingengou { background-image: url(../products/img/shingengou_main.png); } #products #container #mount-brownie { background-image: url(../products/img/mount_brownie_main1911.png); background-position: center bottom; } #products #container #mount-brownie .main-photo-txt { color: #FFF; } #products #container #mount-montblanc { background-image: url(../products/img/mount_montblanc_main.png); } #products #container #mount-montblancdeco { background-image: url("../products/img/mount_montblancdeco_main2010.png"); } #products #container #mount-montblanc .main-photo-txt {color:#FFF; background: url(../products/img/mount_montblanc_main_mark1908.png) no-repeat 10px bottom; padding-bottom: 90px;} #products #container #dela-nagoya { background-image: url("../products/img/dela_nagoya_main200110.png"); } #products #container #dela { background-image: url("../products/img/dela_main200214.png"); } #products #container #mount-whitedeco { background-image: url("../products/img/mount_whitedeco_main2002.png"); } #products #container #mount-whitedeco .main-photo-txt { color: #FFF; } #products #container #mount-sakura { background-image: url(../products/img/mount_sakura_main1902.png); background-position: center bottom;} #products #container #mount-matcha { background-image: url(../products/img/mount_matcha_main_200414.png); background-position: center bottom;} #products #container #mochi { background-image: url(../products/img/mochi_main.png); } #products #container #mochi-kinako { background-image: url(../products/img/mochi_kinako_main.png); } #products #container #mochi-kinako .main-photo-txt p { line-height: 2.3em; } #products #container #mochi-kinako .main-photo-txt p ruby { line-height: 1em; } #products #container #mochi-kinako .main-photo-txt p rt { font-size: 0.5em; } #products #container #moremoist { background-image: url(../products/img/moremoist_main.png); } #products #container #moremoist .main-photo-txt p { position: absolute; right: 260px; } #products #container #moremoist h2 {margin-left: -80px; } #products #container #assort { background-image: url(../products/img/assort_main.png); } #products #container #cafe { background: url(../products/img/cafe_top_bg_01.png) no-repeat left top, url(../products/img/cafe_top_bg_logo.png) no-repeat 110px bottom; min-height: 905px; padding-top: 300px; } #products #container #cafe .main-photo-txt02 { background: url("../products/img/cafe_top_txt_bg1902_02.png") no-repeat right 95%, url(../products/img/cafe_top_txt_bg1902_01.png); text-align: center; width: 960px; right: 20px; bottom: 0px; top: auto; left: auto; position: absolute; padding: 60px; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; } #products #container #cafe .main-photo-txt02 h2 { position: absolute; top: -130px; left: 50%; margin-left: -243px; } #products #container #cafe .main-photo-txt02 .txt { font-size: 18px; line-height: 2; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; } #products #container #cafe .main-photo-txt02 .txt strong { font-size: 20px; } #products #container #cafe .main-photo-txt02 .cafe-dp { position: absolute; left: -330px; top: -200px; } #products #container #cafe .main-photo-txt02 .shop-info { font-size: 18px; width: 420px; margin: 20px auto 0 auto; background: #FFF; border-radius: 20px; line-height: 1.2; padding: 15px 0; } #products #container #cafe .main-photo-txt02 .shop-info .sub { font-size: 14px; } #products #container #cafe .main-photo-txt02 .shop-info .goshop { background: url(../products/img/cafe_link_arrow.png) no-repeat right 5px; padding-right: 10px; } #products #container #cafe .main-photo-txt02 a .shop-info { color: #a7962b; } #products #container #cafe .main-photo-txt a:hover { color: #a7962b; } #products #container article { width: 100%; min-width: 1100px; } #products #container article .catch { text-align: center; font-size: 18px; line-height: 2.3em; margin-top: 70px; } #products #container article .catch .sub{ font-size: 14px; line-height: 1.6em;} #products #container article .catch .title { margin: 50px 0 0px 0; } #products #container article ruby { line-height: 1em; } #products #container article ruby rt { font-size: 0.5em; } /* #products #container .catch.musubime { background: url(../products/img/products_bg_left_assort_musubime.png) no-repeat left center, url(../products/img/products_bg_right_assort_straight.png) no-repeat right center; min-height: 191px; display: flex; justify-content: center; align-items: center; clear: both; } #products #container .catch.musubime .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.musubime .title { width: 1em; } } */ #products #container .catch.musubime { display: block; text-align: center; background: url(../products/img/products_bg_left_assort_musubime.png) no-repeat left center, url(../products/img/products_bg_right_assort_straight.png) no-repeat right center; /* min-height: 191px; */ /* display: flex; */ /* justify-content: center; */ /* align-items: center; */ clear: both; } #products #container .catch.musubime .title { display: inline-block; margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; /* margin-left: auto; margin-right: auto; */ /* display: flex; */ /* justify-content: center; */ } @-moz-document url-prefix() { #products #container .catch.musubime .title { width: 1em; } } #products #container .catch.hitokuchi-assort { background: url(../products/img/products_bg_left_assort_musubime.png) no-repeat left center, url(../products/img/products_bg_right_assort_straight.png) no-repeat right center; min-height: 191px; display: flex; justify-content: center; align-items: center; clear: both; } #products #container .catch.hitokuchi-assort .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.hitokuchi-assort .title { width: 1em; } } #products #container .catch.season2 { background: url("../products/img/products_bg_left_assort_season1808.png") no-repeat left center, url("../products/img/products_bg_right_assort_season1808.png") no-repeat right center; min-height: 231px; display: flex; justify-content: center; align-items: center; } #products #container .catch.season2 .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.season2 .title { width: 1em; } } /* #products #container .catch.daimaru-tokyo { background: url(../products/img/assort_h2_daimaru_tokyo_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_daimaru_tokyo1804.png) no-repeat left center, url(../products/img/products_bg_right_assort_daimaru_tokyo1804.png) no-repeat right center; min-height: 101px; display: flex; justify-content: center; align-items: center; } #products #container .catch.daimaru-tokyo .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.daimaru-tokyo .title { width: 1em; } } */ #products #container .catch.daimaru-tokyo { display: block; text-align: center; background: url(../products/img/assort_h2_daimaru_tokyo_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_daimaru_tokyo1804.png) no-repeat left center, url(../products/img/products_bg_right_assort_daimaru_tokyo1804.png) no-repeat right center; /* min-height: 101px; display: flex; justify-content: center; align-items: center; */ } #products #container .catch.season { background: url(../products/img/products_bg_left_assort_season1711.png) no-repeat left center, url("../products/img/products_bg_right_assort_season1711.png") no-repeat right center; min-height: 231px; display: flex; justify-content: center; align-items: center; } #products #container .catch.season .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.season .title { width: 1em; } } /* #products #container .catch.daimaru-tokyo { background: url(../products/img/assort_h2_daimaru_tokyo_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_daimaru_tokyo1804.png) no-repeat left center, url(../products/img/products_bg_right_assort_daimaru_tokyo1804.png) no-repeat right center; min-height: 101px; display: flex; justify-content: center; align-items: center; } #products #container .catch.daimaru-tokyo .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.daimaru-tokyo .title { width: 1em; } } */ #products #container .catch.daimaru-tokyo { display: block; text-align: center; background: url(../products/img/assort_h2_daimaru_tokyo_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_daimaru_tokyo1804.png) no-repeat left center, url(../products/img/products_bg_right_assort_daimaru_tokyo1804.png) no-repeat right center; /* min-height: 101px; display: flex; justify-content: center; align-items: center; */ } #products #container .catch.daimaru-tokyo .title { display: inline-block; margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; /* display: flex; justify-content: center; */ margin-left: auto; margin-right: auto; } @-moz-document url-prefix() { #products #container .catch.daimaru-tokyo .title { width: 1em; } } #products #container .catch.hankyu-umeda { background: url(../products/img/assort_h2_hankyu_umeda_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_hankyu_umeda.png) no-repeat left center, url(../products/img/products_bg_right_assort_hankyu_umeda.png) no-repeat right center; min-height: 101px; display: flex; justify-content: center; align-items: center; } #products #container .catch.hankyu-umeda .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } /*@-moz-document url-prefix() { #products #container .catch.hankyu-umeda .title { width: 1em; } } #products #container .catch.vd2018 { background: url(../products/img/assort_h2_vd2018_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_vd2018.png) no-repeat left center, url(../products/img/products_bg_right_assort_vd2018.png) no-repeat right center; min-height: 101px; display: flex; justify-content: center; align-items: center; } #products #container .catch.vd2018 .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.vd2018 .title { width: 1em; } }*/ #products #container .catch.vd2019 { background: url(../products/img/assort_h2_vd2019_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_vd2019.png) no-repeat left center, url(../products/img/products_bg_right_assort_vd2019.png) no-repeat right center; min-height: 191px; display: flex; justify-content: center; align-items: center; } #products #container .catch.vd2019 .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.vd2018 .title { width: 1em; } } #products #container .catch.wd2018 { background: url(../products/img/assort_h2_wd2018_bg.png) bottom center no-repeat, url(../products/img/products_bg_left_assort_wd2018.png) no-repeat left center, url(../products/img/products_bg_right_assort_wd2018.png) no-repeat right center; min-height: 191px; display: flex; justify-content: center; align-items: center; } #products #container .catch.wd2018 .title { margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 26px; font-weight: bold; display: flex; justify-content: center; } @-moz-document url-prefix() { #products #container .catch.wd2018 .title { width: 1em; } } #products #container .catch.hitokuchi { background: url(../products/img/products_bg_left_assort_musubime.png) no-repeat left center, url(../products/img/products_bg_right_straight.png) no-repeat right center; min-height: 191px; display: flex; justify-content: center; align-items: center; clear: both; } #products #container .lineup { width: 1020px; margin: 0 auto; position: relative; margin-top: 100px; } #products #container .lineup .lineup-name { width: 30px; position: absolute; left: 30px; top: 0; } #products #container .lineup .lineup-items { width: 1100px; display: flex; justify-content: center; align-items: flex-start; clear: both; padding-bottom: 100px; padding-left: 0px; } #products #container .lineup .lineup-items.bnr-list { width: 1100px; display: flex; justify-content: center; align-items: center; clear: both; padding-bottom: 100px; padding-left: 0px; } #products #container .lineup .lineup-items.wrap{flex-wrap: wrap;} #products #container .lineup .lineup-items p{margin-bottom:20px; } #products #container .lineup .lineup-items p.sp-full{line-height: 1.2;} .lineup.mount-set .lineup-items {padding-left: 70px;} #products #container .lineup .lineup-items li { width: 33%; display: flex; justify-content: center; align-items: flex-start; margin-right: 50px; line-height: 1.2; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #products #container .lineup .lineup-items li.full{width: 100%;} #products #container .lineup .lineup-items li a { color: #3e3a39; } #products #container .lineup .lineup-items li a:hover { opacity: 0.8; } #products #container .lineup .lineup-items li .item-photo { width: 100%; text-align: center; height: 220px; display: flex; justify-content: center; align-items: center; } #products #container .lineup .lineup-items li .item-photo.morepic img{margin-right: 30px;} #products #container .lineup .lineup-items li .item-photo.morepic img:last-child{margin-right: 0px;} #products #container .lineup .lineup-items li .item-bnr { width: 420px; height: auto; position: relative; /* -webkit-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; box-shadow:0 1px 4px rgba(201,189,121, 0.3), 0 0 40px rgba(201,189,121, 0.1) inset; */ margin-bottom: 10px; } #products #container .lineup .lineup-items li .item-bnr.set2{margin-right: 50px;} #products #container .lineup .lineup-items li .item-bnr-txt { width: 420px; margin-top: 0px; font-size: 16px; } #products #container .lineup .lineup-items li .item-bnr-txt.center { text-align: center;} #products #container .lineup .lineup-items li .item-bnr:before, #products #container .lineup .lineup-items li .item-bnr:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); top: 50%; bottom: 5px; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #products #container .lineup .lineup-items li .item-bnr:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #products #container .lineup .lineup-items li p { font-size: 16px; } #products #container .lineup .lineup-items li p .name { font-size: 18px; font-weight: bold; } #products #container .lineup .lineup-items li p .note { font-size: 12px; } #products #container .lineup .lineup-items li .docs{width: 240px;} #products #container .lineup .lineup-items li .pickup-icon { margin-bottom: 10px; width: 100%; } #products #container .lineup .lineup-items li .pickup-icon span{ background: #d5c562; border-radius: 7px; padding: 1px 4px; color: #FFF; } #products #container .lineup .lineup-items.bnr-list li { width: 40%; } #products #container .lineup .lineup-items.yama li { width: 30%; } #products #container .lineup .lineup-items.yama li:nth-child(3) { width: 40%; position: relative; padding-left: 100px; } #products #container .lineup .lineup-items.yama li:nth-child(3) .lineup-name { left: 50px; } #products #container .lineup .lineup-items.yama li:first-child { position: relative; } #products #container .lineup .lineup-items.yama li:first-child .lineup-name { left: -30px; } #products #container .lineup .lineup-items.yama3 li { position: relative; } #products #container .lineup .lineup-items.yama3 li .lineup-name { left: -30px; } #products #container .lineup .lineup-items.yama, #products #container .lineup .lineup-items.maki { background: url(../products/img/products_line.png) center bottom no-repeat; padding-left: 70px;} #products #container .lineup .lineup-comment { width: 880px; margin: -50px auto 50px auto; font-size: 12px; } #products #container .lineup .lineup-comment.list-in { width: 100%; margin: auto; font-size: 12px; display: flex;justify-content: center;align-items: center;} #products #container .lineup .lineup-comment p { display: inline-block; vertical-align: middle; } #products #container .lineup .lineup-comment img { margin-right: 10px; } #products #container .lineup .lineup-comment.straight { width: 1100px; padding-left: 100px; display: flex; justify-content: center; align-items: center; } #products #container #ingredients.composition_block { align-items: center; flex-direction: column; padding-top: 70px; padding-bottom: 70px; } #products #container #ingredients.composition_block .btn-box { display: flex; width: auto; text-align: center; margin: 0 auto 24px; } #products #container #ingredients.composition_block .btn-box .modal { position: relative; display: flex; align-items: center; justify-content: center; vertical-align: bottom; min-width: 420px; color: #3e3a39; font-size: 14px; font-weight: bold; border: 1px solid #3e3a39; padding: 10px 60px 9px; box-sizing: border-box; } #products #container #ingredients.composition_block .btn-box .modal:not(:first-child) { margin-left: 22px; } #products #container #ingredients.composition_block .btn-box .modal::before { content: ""; position: absolute; top: 50%; left: 35px; width: 3px; height: 15px; background: #3e3a39; transform: translateY(-50%); } #products #container #ingredients.composition_block .btn-box .modal::after { content: ""; position: absolute; top: 50%; left: 35px; width: 3px; height: 15px; background: #3e3a39; transform: translateY(-50%) rotate(-90deg); } #products #container #ingredients.composition_block .note { display: block; max-width: 100%; width: auto; letter-spacing: 0.1em; margin: 0 auto; padding-left: 12px; } #products #container #ingredients.composition_block .note li { padding-bottom: 6px; text-indent: -0.75em;} #products #container #ingredients.composition_block .innner-box:hover { opacity: 0.8; } #products #container #ingredients { background: url(../common_img/nenrin_bg_data.png); clear: both; float: left; width: 100%; padding: 50px; display: flex; justify-content: center; flex-wrap: wrap; } #products #container #ingredients .ing-btn { display: none; } #products #container #ingredients .innner-box { width: 1100px; margin: 0 0 50px 0; clear: both; border-bottom: 1px solid #bab8b8; } #products #container #ingredients .innner-box .item-name { width: 100%; margin-bottom: 30px; font-size: 12px; padding: 5px 10px; } #products #container #ingredients .innner-box .item-name:first-line { font-weight: bold; } #products #container #ingredients .innner-box ul { width: 550px; float: left; } #products #container #ingredients .innner-box ul li { margin-bottom: 30px; font-size: 12px; padding: 5px 10px; } #products #container #ingredients .innner-box ul li:first-line { font-weight: bold; } #products #container #ingredients .innner-box .list02 { float: left; margin-left: 50px; width: 270px; } #products #container #ingredients .innner-box .list03 { float: left; width: 180px; } #products #container #ingredients .innner-box:last-of-type { border-bottom: none; } #products #container #ingredients .straight li, #products #container #ingredients .straight .item-name { border-left: #e5be89 3px solid; } #products #container #ingredients .mount li, #products #container #ingredients .mount .item-name { border-left: #eee4a1 3px solid; } #products #container #ingredients .mount-brownie li, #products #container #ingredients .mount-brownie .item-name { border-left: #d1c4a7 3px solid; } #products #container #ingredients .mount-montblanc li, #products #container #ingredients .mount-montblanc .item-name { border-left: #b8753a 3px solid; } #products #container #ingredients .mount-montblancdeco li, #products #container #ingredients .mount-montblancdeco .item-name { border-left: #ca8d19 3px solid; } #products #container #ingredients .baumbrulee li, #products #container #ingredients .baumbrulee .item-name { border-left: #ba6825 3px solid; } #products #container #ingredients .straight-choco li, #products #container #ingredients .straight-choco .item-name { border-left: #e1a698 3px solid; } #products #container #ingredients .straight-lemon li, #products #container #ingredients .straight-lemon .item-name { border-left: #e7b400 3px solid; } #products #container #ingredients .straight-apple li, #products #container #ingredients .straight-apple .item-name { border-left: #c50024 3px solid; } #products #container #ingredients .straight-orange li, #products #container #ingredients .straight-orange .item-name { border-left: #e48325 3px solid; } #products #container #ingredients .straight-zarame-kaede li, #products #container #ingredients .straight-zarame-kaede .item-name { border-left: #e1a665 3px solid; } #products #container #ingredients .straight-zarame-sakura li, #products #container #ingredients .straight-zarame-sakura .item-name { border-left: #f28da2 3px solid; } #products #container #ingredients .straight-zarame-kohaku li, #products #container #ingredients .straight-zarame-kohaku .item-name { border-left: #da9843 3px solid; } #products #container #ingredients .shingengou li, #products #container #ingredients .shingengou .item-name { border-left: #e2a1ac 3px solid; } #products #container #ingredients .dela-nagoya li, #products #container #ingredients .dela-nagoya .item-name { border-left: #c88b51 3px solid; } #products #container #ingredients .dela li, #products #container #ingredients .dela .item-name { border-left: #c40045 3px solid; } #products #container #ingredients .mount-whitedeco li, #products #container #ingredients .mount-whitedeco .item-name { border-left: #ed8c8c 3px solid; } #products #container #ingredients .mount-sakura li, #products #container #ingredients .mount-sakura .item-name { border-left: #e47d90 3px solid; } #products #container #ingredients .mount-matcha li, #products #container #ingredients .mount-matcha .item-name { border-left: #93ad50 3px solid; } #products #container #ingredients .moremoist li, #products #container #ingredients .moremoist .item-name { border-left: #e0b9b4 3px solid; } #products #container #ingredients .mochi li, #products #container #ingredients .mochi .item-name { border-left: #d8c89e 3px solid; } #products #container #ingredients .mochi-kinako li, #products #container #ingredients .mochi-kinako .item-name { border-left: #e9cd7b 3px solid; } #products #container #ingredients .note { font-size: 12px; width: 1100px; margin: 0 0 30px 0; clear: both; } #products #container #ingredients .note li { padding-left: 1em; text-indent: -1em; } #products #container #ingredients .note li a { color: #3e3a39; text-decoration: underline; } #products #container #ingredients .note li a[target="_blank"] { color: #3e3a39; background: url(../common_img/window.png) no-repeat right 2px; padding-right: 18px; } #products #container #ingredients .note li .fc { background: url(../common_img/icon_fc.png) no-repeat left 3px; padding-left: 21px; } #products #container #relation { clear: both; float: left; min-width: 1100px; width: 100%; background: url(../products/img/relation_bg_left.png) no-repeat left 130px, url(../products/img/relation_bg_right.png) no-repeat right 130px; padding: 70px 0 80px 0; } #products #container #relation h3 { font-weight: bold; font-size: 26px; text-align: center; background: url(../products/img/relation_title.png) no-repeat center bottom; margin-bottom: 20px; } #products #container #relation ul { width: 1100px; display: flex; justify-content: center; align-items: flex-start; margin: 0 auto; } #products #container #relation ul li { width: 190px; margin-right: 40px; margin-bottom: 30px; float: left; text-align: center; } #products #container #relation ul li a { color: #3e3a39; } #products #container #relation ul li p { text-align: center; font-size: 20px; line-height: 1.2; } #products #container #relation ul li p .sub { font-size: 16px; } #products #container #relation ul li p .icon { border-radius: 10px; padding: 2px 8px; font-size: 12px; margin-bottom: 10px; } #products #container #relation ul li p .icon.lmtd { background: #FFF; color: #c6394a; border: 1px solid #c6394a; } #products #container #relation ul li p .icon.season { background: #FFF; color: #c2b353; padding: 2px 25px; border: solid 1px #c2b353; } #products #container #relation ul li a:hover p { opacity: 0.5; } #products #container #relation ul li a:hover .list-img { opacity: 0.8; } #products #container #relation ul li .list-img { width: 190px; height: 190px; position: relative; /* -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */ margin-bottom: 15px; } #products #container #relation ul li a:hover .ist-img { opacity: 0.8; } #products #container #relation ul li .list-img:before, #products #container #relation ul li .list-img:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 50%; bottom: 0; left: 20px; right: 20px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } #products #container #relation ul li .list-img:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } #products #container #relation .lot5 { width: 1100px; margin: 0 auto; clear: both; } #products #container #relation .lot5 .lot5-item { width: 840px; float: left; } #products #container #relation .lot5 .lot5-item ul { width: 840px; float: left; } #products #container #relation .lot5 .lot5-item ul li { margin-right: 20px; } #products #container #relation .lot5 .lot5-shop { width: 190px; float: right; } #products #container #relation .lot5 .lot5-shop ul { width: 190px; float: left; } #products #container #relation .lot5 .lot5-shop ul li { margin-right: 0px; } footer { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: flex-start; background: url(../common_img/nenrin_bg_footer.png); padding: 30px 20px 0 20px; width: 100%; min-height: 360px; } footer a:hover { opacity: 0.6; } footer #pagetop { border-radius: 50px 50px 0 0; width: 86px; height: 60px; background: url(../common_img/toppage_arrow.png) center 20px no-repeat, url(../common_img/nenrin_bg_footer.png); position: absolute; top: -60px; left: 50%; margin-left: -43px; z-index: 1; color: #FFF; padding-top: 32px; text-align: center; font-size: 12px; } footer #pagetop a { color: #FFF; } footer #footer-bg { background: url(../common_img/footer_bg_sing.png) no-repeat right 0px; width: 1060px; min-height: 390px; justify-content: center; align-items: flex-start; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; } footer #footer-box { width: 650px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; color: #c2c2c2; height: 100%; font-size: 14px; } footer #footer-box .footer-section { width: 50%; padding-bottom: 30px; } footer #footer-box .footer-section .footer-list { font-size: 16px; color: #FFF; font-weight: bold; } footer #footer-box .footer-section .footer-list a { color: #FFF; } footer #footer-box .footer-section .footer-list.about { color: #FFF; margin-bottom: 15px; } footer #footer-box .footer-section li { font-size: 14px; line-height: 1.8; color: #c2c2c2; } footer #footer-box .footer-section li a { color: #c2c2c2; } footer #footer-box .footer-section li a[target="_blank"] { background: url(../common_img/window_ft.png) right 5px no-repeat; padding-right: 20px; } footer #footer-box .footer-logo { position: absolute; top: 0; left: -100px; } footer #footer-box .footer-otherlnk { position: absolute; right: 0; top: 0; } footer #footer-box .footer-otherlnk .footer-list { font-size: 16px; color: #FFF; font-weight: bold; } footer #footer-box .footer-otherlnk p a { color: #FFF; } footer #footer-box .footer-otherlnk p a[target="_blank"] { background: url(../common_img/window_ft.png) right 2px no-repeat; padding-right: 20px; } footer .copyright { font-size: 12px; color: #a8a8a8; width: 100%; text-align: center; padding-bottom: 30px; } .catch-box{background: url(../common_img/nenrin_bg_data.png); margin: 20px auto; font-size: 16px; color: #a7962b; width: 400px; justify-content: center; flex-direction: column; display: flex; align-items: center; line-height: 1.4em; padding-top: 20px; } .catch-box .note{font-size:12px !important; margin-bottom: 0 !important;} .catch-box.small{ padding: 10px; width: 600px;} .catch-box ul{justify-content: center;width:400px; display: flex; align-items: center; flex-wrap: wrap; } .catch-box ul li{ float: left; font-size: 14px;margin-right: 15px; margin-top: 5px;} .catch-box ul li:last-child{margin-right: 0px;} .catch-box ul li a{color: #a7962b; text-decoration: none; background: url(../common_img/other_link_arrow_gold.png) no-repeat left center; padding-left: 10px; } #products #container .lineup .lineup-items li a.onlineshop_sku{ background-color: #d5c562; display: inline-block; margin-top: 15px; padding: 10px 30px 10px 50px; color: #fff; background-image: url("../common_img/cart.svg"); background-size: auto 50%; background-repeat: no-repeat; background-position: center left 20px; }