html {overflow: auto;} body { width:100%; color: #000; font-size: 62.5%; -webkit-text-size-adjust: 100%; font-family: "ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Sans-Serif; line-height: 1.8; margin: 0 auto; padding: 0; overflow: hidden; } * {font-weight: normal;} a {text-decoration:none;color: #333333;} b {font-weight: bold;} .b {font-weight: bold;} img { border:none;} /* 回り込み解除 */ .clearfix {zoom:1;} .clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* デバイス毎の表示切り替え */ @media screen and (min-width: 769px) { .pc_none {display:none;} .tab_only {display:none;} .sp_only {display:none;} } @media screen and (min-width: 641px) and (max-width: 768px) { .pc_only {display:none;} .sp_only {display:none;} .tab_none {display:none;} } @media screen and (max-width: 640px) { .pc_only {display:none;} .tab_only {display:none;} .sp_none {display:none;} } /* WEBフォント */ .kyo {font-family: "I-OTF教科書Pro D","IwaTxtPro-Db";} .hm {font-family: "FP-HiraMinProN-W3";} .hg {font-family: "FP-HiraKakuProN-W3";} .hgb {font-family: "FP-HiraKakuProN-W6";} .iwg {font-family: "IwaNGNewsPro-Md"} /* 指定フォントスタイル */ .red {color:#cc0000;} .red2 {color:#ff0000;} /* スライドインアニメーション */ .fadein { opacity : 0; transform : translate(0, 0); transition : all 1500ms; } .fadein.scrollin { opacity : 1; transform : translate(0, 0); } .readin1 { transform : translate(0, 0); transition-duration : 1.5s; transition-delay: 0s; opacity : 0; } .readin1.readfin1 { opacity : 1; transform : translate(0, 0); } .readin2 { transform : translate(0, 0); transition-duration : 1.5s; transition-delay: .7s; opacity : 0; } .readin2.readfin2 { opacity : 1; transform : translate(0, 0); } .catin1 { transform : translate(0, 0); transition-duration : 1.5s; transition-delay: 0s; opacity : 0; } .catin1.catfin1 { opacity : 1; transform : translate(0, 0); position: relative; z-index: 1; } .catin2 { opacity : 1; transition-duration : 1.5s; transition-delay: 1s; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } .catin2.catfin2 { opacity : 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .npin { transform : translate(0, 0); transition-duration : 1.5s; transition-delay: 1s; opacity : 0; } .npin.npfin { opacity : 1; transform : translate(0, 0); position: relative; z-index: 1; } /* トップエリアのアニメーション */ .motherdayan { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: wipem; animation-name: wipem; visibility: visible !important; -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */ animation-delay: 1s; } @keyframes wipem { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.6, 0, 0.6, 1); } 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0, 0, 0, 1); } } .motherdayan_2 { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: wipems; animation-name: wipems; visibility: visible !important; -webkit-animation-delay: 0.5s; /* Safari 4.0 - 8.0 */ animation-delay: 0.5s; } @-webkit-keyframes wipems { 0% { opacity: 0; } 100% { opacity: 1.0;} } @keyframes wipems { 0% { opacity: 0; } 100% { opacity: 1.0;} } .opani { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: opani1; animation-name: opani1; visibility: visible !important; -webkit-animation-delay: 2.5s; /* Safari 4.0 - 8.0 */ animation-delay: 2.5s; } @-webkit-keyframes opani1 { 0% { opacity: 1.0; z-index: 30; } 100% { opacity: 0; z-index: 5; } } @keyframes opani1 { 0% { opacity: 1.0; z-index: 30; } 100% { opacity: 0; z-index: 5; } } .opani2 { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: opani2; animation-name: opani2; visibility: visible !important; -webkit-animation-delay: 2.5s; /* Safari 4.0 - 8.0 */ animation-delay: 2.5s; } @-webkit-keyframes opani2 { 0% { opacity: 0; } 100% { opacity: 1.0;} } @keyframes opani2 { 0% { opacity: 0; } 100% { opacity: 1.0;} } .capin { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:0.5s; -ms-animation-duration:0.5s; animation-duration:0.5s; -webkit-animation-name: capin1; animation-name: capin1; visibility: visible !important; -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */ animation-delay: 1s; } @keyframes capin1 { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); } 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0, 0, 0, 1); } } .mlogo1 { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */ animation-delay: 1s; -webkit-animation-name: finlogo1; animation-name: finlogo1; visibility: visible !important; } @-webkit-keyframes finlogo1 { 0% { opacity: 0; } 100% { opacity: 1.0;} } @keyframes finlogo1 { 0% { opacity: 0; } 100% { opacity: 1.0;} } .imgin1 { transition-duration : 0.75s; transition-delay: 0s; opacity: 1; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } .imgsin1 { transition-timing-function: cubic-bezier(.86, 0, .07, 1); -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; } .imgin2 { transition-duration : 0.75s; transition-delay: .75s; opacity: 0.6; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .imgsin2 { transition-timing-function: cubic-bezier(.86, 0, .07, 1); -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); opacity: 0.6; } .imgin3 { transition-duration : 0.75s; transition-delay: 0s; -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); } .imgsin3 { transition-timing-function: cubic-bezier(.86, 0, .07, 1); -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .imgin4 { transition-duration : 0.75s; transition-delay: 0.5s; opacity: 0; transform : translate(25px, 0); } .imgsin4 { opacity: 1; transform : translate(0, 0); } .fadeinan1 { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: .5s; /* Safari 4.0 - 8.0 */ animation-delay: .5s; -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1; visibility: visible !important; } @-webkit-keyframes fadeInDown1 { 0% { opacity: 0; } 100% { opacity: 1.0;} } @keyframes fadeInDown1 { 0% { opacity: 0; } 100% { opacity: 1.0;} } .fadeinan2 { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2; visibility: visible !important; -webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */ animation-delay: 1.5s; } @-webkit-keyframes fadeInDown2 { 0% { opacity: 0; } 100% { opacity: 1.0;} } @keyframes fadeInDown2 { 0% { opacity: 0; } 100% { opacity: 1.0;} } #effect2 .fadein:nth-of-type(1) { -moz-transition-delay:0.2s; -webkit-transition-delay:0.2s; -o-transition-delay:0.2s; -ms-transition-delay:0.2s; } #effect2 .fadein:nth-of-type(2) { -moz-transition-delay:0.8s; -webkit-transition-delay:0.8s; -o-transition-delay:0.8s; -ms-transition-delay:0.8s; } #effect2 .fadein:nth-of-type(3) { -moz-transition-delay:0.4s; -webkit-transition-delay:0.4s; -o-transition-delay:0.4s; -ms-transition-delay:0.4s; } #effect2 .fadein:nth-of-type(4) { -moz-transition-delay:0.6s; -webkit-transition-delay:0.6s; -o-transition-delay:0.6s; -ms-transition-delay:0.6s; } #effect2 .fadein:nth-of-type(5) { -moz-transition-delay:0.8s; -webkit-transition-delay:0.8s; -o-transition-delay:0.8s; -ms-transition-delay:0.8s; } #effect2 .fadein:nth-of-type(6) { -moz-transition-delay:1.0s; -webkit-transition-delay:1.0s; -o-transition-delay:1.0s; -ms-transition-delay:1.0s; } #effect2 .fadein:nth-of-type(7) { -moz-transition-delay:1.2s; -webkit-transition-delay:1.2s; -o-transition-delay:1.2s; -ms-transition-delay:1.2s; } #effect2 .fadein:nth-of-type(8) { -moz-transition-delay:1.4s; -webkit-transition-delay:1.4s; -o-transition-delay:1.4s; -ms-transition-delay:1.4s; } .npin2 { } .npin2.npfin2 { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */ animation-delay: 1.5s; -webkit-animation-name: np2; animation-name: np2; visibility: visible !important; } @-webkit-keyframes np2 { 0% { -webkit-filter:grayscale(1); filter:grayscale(1); } 100% { -webkit-filter:grayscale(0); filter:grayscale(0); } } @keyframes np2 { 0% { -webkit-filter:grayscale(1); filter:grayscale(1); } 100% { -webkit-filter:grayscale(0); filter:grayscale(0); } } /* PC用 ここから */ @media screen and (min-width: 769px) { /* ナビゲーションボタン各種 */ /* バーガーメニュー */ .base { z-index: 60; top: 35px; left: 265px; background-image: url(../img/menu_open_p.png); position: fixed; width: 145px; height: 66px; background-size: 100%; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } body { font-family: sans-serif; } header { } header .burger { width: 145px; height: 66px; cursor: pointer; position: fixed; z-index: 60; top: 35px; left: 265px; } header .burger > div{ width: 100%; height: 3px; position: absolute; } .open_bg { opacity: 1; z-index: 100; background-image: url(../img/close_p.png); background-repeat: no-repeat; width: 145px; height: 66px; cursor: pointer; position: fixed; z-index: 160; top: 35px; left: 265px; background-size: 100%; display: none; } .open_base { opacity: 0.9; z-index: 70; background-color: #fff; width: 100%; height: 100%; position: fixed; display: none; } .nav { width: 100%; max-width: 1605px; display: none; position: fixed; padding: 135px 40% 15% 40%; top: 0; left: 50%; transform: translate(-50%, 0%); z-index: 75; overflow: scroll; height: 80%!important; text-align: center; background: #fff; } .nav::-webkit-scrollbar { width: 10px; } .nav::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 0px rgba(0, 0, 0, .0); } .nav::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .1); border-radius: 10px; box-shadow: 0 0 0 0px rgba(255, 255, 255, .0); } .nav .net_on { position: absolute; top: 10px; left: 70px; width: 200px; height: 57px; } .nav-list { text-align: left; margin: 8px; width: 18.6%; height: auto; display: inline-block; position: relative; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .nav-list img { width:100%; height:auto; } .nav-list .nmb { font-size:22.8px; font-style:italic; line-height: 20px; } .nav-list a { transition: 0.2s ease 0s; -webkit-transition: 0.2s ease 0s; -moz-transition: 0.2s ease 0s; -ms-transition: 0.2s ease 0s; } .nav-list a:hover { opacity: 0.9; -webkit-opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); -ms-filter: "alpha(opacity=90)"; } .nav-list img { transition: 0.2s ease 0s; -webkit-transition: 0.2s ease 0s; -moz-transition: 0.2s ease 0s; -ms-transition: 0.2s ease 0s; } .nav-list img:hover { opacity: 0.7; -webkit-opacity: 0.7; -moz-opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; } #totop_b_btn { z-index: 60; left: 40px; top: 40px; background-image: url(../img/logo_p.png); position: fixed; width: 79px; height: 100px; background-size: cover; } .m_back_top { background-image: url(../img/close_p.png); background-position: center center; background-size: cover; position: fixed; top: 0px; right: 0px; width: 79px; height: 80px; cursor: pointer; z-index: 50; } /* バーガーメニュー */ #navi_base { z-index: 10; top: 0; background-color:#fff; height:55px; width:100%; position: fixed; } #top_btn { z-index: 60; right: 10px; top: 0; left: 50%; margin: 0 0 0 -84px; background-image: url(../img/top_logo_p.png); position: fixed; width: 168px; height: 55px; } #item_btn { z-index: 60; right: 10px; top: 0; left:50%; margin:0 0 0 7px; background-image: url(../img/menu_open_p.png); position: fixed; width: 103px; height: 55px; } #cart_btn { z-index: 60; right: 10px; top: 50%; margin-top: -167px; background-image: url(../img/cart_btn_p.png?1); position: fixed; width: 64px; height: 118px; } #netshop_btn { z-index: 60; right: 10px; top: 50%; margin-top: -44px; background-image: url(../img/netshop_btn_p.png?1); height: 211px; position: fixed; width: 64px; } #pagetop_btn { z-index: 70; left: 50%; bottom: 0; margin: 0 0 0 -22px; background-image: url(../img/totop.png); position: fixed; width: 44px; height: 58px; background-size: cover; } #netshop_b_btn { z-index: 60; left: 20px; bottom: 0; background-image: url(../img/bl_logo_p.png); position: absolute; width: 180px; height: 54px; background-size: cover; } #headlogo { z-index: 160; left: -1px; top: 0px; background-image: url(../img/head_logo_2_p.png); position: fixed; width: 254px; height: 111px; background-size: 100%; background-position: center; } /* ナビゲーションボタン各種 */ /* トップエリア*/ #main_base { width:100%; } #main_area { position:absolute; width:100%; top:0; } #main_op { background: #cc7e8c; width: 100%; position: absolute; top: 0; } .motherday { background-image: url(../img/op_logo_2_p_2.png); background-repeat: no-repeat; position: absolute; width: 887px; height: 530px; left: 50%; top: 50%; margin: -265px 0 0 -444px; z-index: 100; background-size: contain; background-position: right top; } .motherday_s { background-image: url(../img/op_logo_p_1.png); background-repeat: no-repeat; position: absolute; width: 256px; height: 96px; left: 50%; top: 50%; margin: -240px 0 0 -390px; z-index: 100; background-size: contain; background-position: right top; } #mainimage_t , #mainimage_s { display: none; } #mainimage_p { position: relative; z-index: -1; margin-top: 10vh; } #mainimage_p .top_area_left { background-color: #fff; position: absolute; width:10%; max-width: 180px; height: 100%; left: 0; z-index: 100; } #mainimage_p .top_area_right { background-color: #fff; position: absolute; width:10%; max-width: 180px; height: 100%; right: 0; z-index: 100; } #title_area { position:absolute; top:0; width:100%; z-index:20; } #title_area .mainlogo { background-image: url(../img/main_logo_2_p.png); background-position: center top; position: absolute; background-size: 100%; width:30%; max-width:616px; height:414px; top: 40px; left: 37px; position: absolute; z-index: 50; background-repeat:no-repeat; } #main_area .mainlogo2 { background-image: url(../img/main_logo_2_p_2.png); background-position: center top; position: absolute; background-size: 100%; width:30%; max-width:616px; height:500px; top: 40px; left: 37px; position: absolute; z-index: 50; background-repeat:no-repeat; } #title_area .arrow { background-image: url(../img/arrow.png); background-position: center top; position: absolute; background-size: cover; z-index: 999; bottom: 45px; left: 50%; width: 80px; height: 80px; margin: 0px 0 0 -40px; -webkit-animation: bounce1 3000ms infinite; } @-webkit-keyframes bounce1 { 0% { margin-bottom:0; } 50% { margin-bottom:15px; } 100% { margin-bottom:0; } } /* リード*/ #read { width: 100%; margin: 18vh auto 50px auto; letter-spacing: 1px; position: relative; color: #666; } #read .midashi1 { background-image: url(../img/read_p.png); background-position: center top; margin: 0 auto; width:390px; height:21px; position:relative; z-index:1; } #read .midashi2 { margin: 15px auto 19px auto; font-size: 26px; text-align: center; position:relative; z-index:1; } #read .midashi3 { width: 635px; margin: 0 auto; padding: 0 20px; font-size: 16px; border-top: #eaeaea 1px solid; background-image: linear-gradient(90deg,rgba(234,234,234,0) 0%,rgba(223,234,234,0) 100%,rgba(255,255,255,100) 50%,rgba(255,255,255,100) 100%),linear-gradient(180deg,rgba(234,234,234,0) 0%,rgba(234,234,234,0) 98.8%,rgba(100,100,100,100) 100%); background-repeat: repeat-y; background-size: 4px 100%,100% 48px; line-height: 48px; position:relative; z-index:1; } #read .midashi4 { background-image: url(../img/read_bg_2_p.png); background-position: center top; margin: -97px 0 0 -10px; width: 447px; height: 267px; position: relative; z-index: 0; left: 50%; } /* リード */ /* カテゴリーのタイトルなど */ .cat_item { background-image: url(../img/title_item_p.png); background-position: center top; margin: 0 auto 0 auto; width: 103px; height: 52px; } .cat_arrow { background-image: url(../img/arrow_bottom_p.png); background-position: center top; margin: 0 auto 0 auto; width: 103px; height: 61px; background-size:100%; } .cat_products { background-image: url(../img/title_products_p.png); background-position: center top; margin: 0 auto 0 auto; width: 192px; height: 77px; } /* /カテゴリーのタイトルなど */ /* トップページのカテゴリー */ #item_area { width: 100%; min-width:1100px; margin: 110px auto 90px auto; height: 100%; position: relative; } #item_area .bg_area { width: 100%; height: 50%; position: absolute; bottom:4px; background:#fafafa; z-index:-1; } #item_area .image_area { width: 56%; display: inline-block; height: auto; position: relative; z-index:1; } #item_area .over { width: 100%; background: #fff; min-height:100%; position:absolute; bottom:0; z-index:10; } #item_area .image_area img { width: 100%; position: relative; z-index:0; } #item_area .cap_area { width: 43%; display: inline-block; min-height: 100%; position: absolute; height: auto; } #item_area .cap_name { position: absolute; font-size: 15px; top: 37px; left: 40px; } #item_area .cap_sub { position: absolute; font-size: 28px; top: 66px; left: 40px; } #item_area .cap_main { position: absolute; text-align: center; font-size: 15px; top: 49.5%; left: 50%; transform: translateY(-50%) translateX(-50%); line-height: 33px; width: 100%; color:#666; } #item_area .en { font-size: 16px; } #item_area .cap_logo { background-image: url(../img/cat_b_logo_p.png); background-position: center top; background-size: 100%; width: 153px; height: 66px; position: absolute; bottom: 30px; right: 45px; } /* 中ページの各種設定 */ #main_area .i_mainlogo { background-image: url(../img/c_logo_side_p.png); background-position: center top; position: absolute; background-size: 100%; width: 126px; height: 335px; top: 45px; left: 55px; position: absolute; z-index: 50; } #i_mainlogo_2 { z-index: 100; left: 50%; top: 0; margin-left: -150px; background-image: url(../img/c_logo_p.png); position: fixed; width: 299px; height: 139px; } #main { position: absolute; top: 0; z-index: -1; text-align: center; width: 100%; left: 50%; margin: 0 0 0 -50%; overflow: hidden; } #main img { width: auto; height: auto; height: 100%; } #main .img_l { margin-left: 75px; } #main_area .item_bg { width: 395px; min-height: 180px; background: #fff; position: absolute; bottom: 60px; right: 40px; border: 1px #ccc solid; } #main_area .item_bg_base { width: 395px; min-height: 180px; position: absolute; bottom: 60px; right: 40px; z-index: 10; } #main_area .item_line { width: 67px; border-bottom: 1px solid #a51c4b; margin: 5px 0 0 40px; } #main_area .item_name { font-size: 20px; margin: 25px 0 0 40px; letter-spacing: 1px; } #main_area .s { font-size: 17px; margin: 0 5px 0 0; } #main_area .price { font-size: 20px; color: #a51c4b; } #main_area .item_cap { font-size: 14px; margin: 15px 40px; letter-spacing: 1px; } #main_area .item_price { font-size: 15px; position: absolute; bottom: 95px; right: 326px; width: 365px; letter-spacing: 2px; height: 200px; text-align: right; } #i_mainlogo_t2 { z-index: 100; left: 20px; top: 20px; background-image: url(../img/cat_top_logo_p.png); position: absolute; width: 255px; height: 144px; background-size: 100%; background-repeat: no-repeat; opacity: 1; } /* 商品画像一覧エリア*/ #photo_area { width: 100%; margin: 120px auto 160px auto; display:table; } #img_area { width: 90%; margin: 0 auto; max-width: 1675px; min-width: 1000px; padding: 0 0 0 1.5%; } #img_area figure { width: 24%; margin: 0 3px; float: left; } #img_area figure img { width: 100%; } #itemlist_i { width: 100%; background-color: #f5f5f5; margin: 55px 0 0 0; min-width: 1000px; padding: 65px 0 0 0; position: relative; } #item_wrapper_i { margin: 0 auto; display: block; } .itemarea_i { margin: 70px auto 160px auto; width: 89%; padding-bottom: 135px; max-width: 1710px; font-size: 13px; display: block; text-align: center; } .itemarea_i a { height: auto; text-align: center; margin:1%; display: inline-block; position: relative; vertical-align: top; -webkit-transition: 0.2s ease; transition: 0.2s ease; filter: alpha(opacity=100); opacity: 1; } .itemarea_i img { width:100%; height:auto; margin:0; } .itemarea_i a:hover { filter: alpha(opacity=60); opacity: 0.60; } @media screen and (min-width: 1300px) { .itemarea_i a { width: 17.3%; } } @media screen and (max-width: 1300px) { .itemarea_i a { width: 22%; } } .itemlist_i img:hover { opacity:0.7; } /* 着用イメージ */ #photo_wrapper { width: 101%; margin: 40px auto 0 auto; padding: 65px 0 0 0; } #photocon { margin: 0 auto; width: 100%; max-width: 1920px; min-width: 1020px; padding: 0 0 440px 0; } #photo { margin: 0 auto; display: block; padding-left: 0; position: relative; text-align: center; } #photo figure { width: 272px; line-height: 20px; margin: 1.5% 1.1% 1.5% 0; display: inline-block; position: relative; vertical-align: middle; } #photo .y { width: 448px; margin: 0 1.1% 0 0; } @media screen and (max-width: 1600px) { #photo figure {width: 17.2%;} #photo .y {width: 27.5%;} } #photo figure img { width:100%; height:auto; } /* 着用イメージ */ /* 商品画像一覧エリア*/ #img_area { width: 90%; margin: 0 auto; max-width: 1675px; min-width: 1000px; padding: 0 0 0 1.5%; } #img_area figure { width: 24%; margin: 0 3px; display: inline-block; } #img_area figure img { width: 100%; } #itemlist { width: 100%; margin: 0; min-width: 1000px; padding: 0 0 0 0; } #item_wrapper { margin: 0 auto; display: block; } .itemarea { margin: 70px auto 120px auto; width: 89%; max-width: 1710px; font-size: 13px; display: block; text-align: center; } .itemarea a { height: auto; text-align: center; margin:1%; display: inline-block; position: relative; vertical-align: top; width: 21.7%; } .itemarea img { width:100%; height:auto; margin:0; } .itemarea a { display: inline-block; -webkit-transition: 0.2s ease; transition: 0.2s ease; filter: alpha(opacity=100); opacity: 1; } .itemarea a:hover { filter: alpha(opacity=60); opacity: 0.60; } .sozai { font-size:18px; text-align:center; margin:0; letter-spacing: 2px; } .itemname { font-size:27px; text-align:center; margin:0; letter-spacing: 3px; } .cat_name { font-size: 16px; text-align: left; margin: 0; letter-spacing: 2px; background-image: url(../img/arrow_right_p.png); background-position: 0px 3px; height: 25px; background-repeat: no-repeat; background-size: auto; text-indent: 35px; margin: 6px 0 0 10px; padding: 0 0 6px 0; } .cat_price { font-size: 14px; text-align: left; margin: 0; letter-spacing: 1px; text-indent: 46px; } .itemcaption { font-size:14px; text-align:left; display: table; margin: 15px auto -30px; padding-left: 20px; letter-spacing: 1px; } .itemlist img:hover { opacity:0.7; } /* 自動売消フラグ関連*/ a.so{ pointer-events: none; } .itemarea .so img { opacity: 0.2; } /* 掲載落としフラグ用*/ a.ds_none { display: none; } .itemarea .f:before { content: "売り切れ"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 38%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f400:before { content: "売り切れ\A再入荷未定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f500:before { content: "売り切れ\A再入荷予定なし"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f11:before { content: "売り切れ\A１月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f12:before { content: "売り切れ\A１月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f13:before { content: "売り切れ\A１月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f21:before { content: "売り切れ\A２月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f22:before { content: "売り切れ\A２月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f23:before { content: "売り切れ\A２月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f31:before { content: "売り切れ\A３月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f32:before { content: "売り切れ\A３月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f33:before { content: "売り切れ\A３月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f41:before { content: "売り切れ\A４月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f42:before { content: "売り切れ\A４月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f43:before { content: "売り切れ\A４月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f51:before { content: "売り切れ\A５月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f52:before { content: "売り切れ\A５月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f53:before { content: "売り切れ\５月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f61:before { content: "売り切れ\A６月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f62:before { content: "売り切れ\A６月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f63:before { content: "売り切れ\A６月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f713:before { content: "売り切れ\A７月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f72:before { content: "売り切れ\A７月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f73:before { content: "売り切れ\A７月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f81:before { content: "売り切れ\A８月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f82:before { content: "売り切れ\A８月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f83:before { content: "売り切れ\A８月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f91:before { content: "売り切れ\A９月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f92:before { content: "売り切れ\A９月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f93:before { content: "売り切れ\A９月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f101:before { content: "売り切れ\A１０月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f102:before { content: "売り切れ\A１０月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f103:before { content: "売り切れ\A１０月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f111:before { content: "売り切れ\A１１月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f112:before { content: "売り切れ\A１１月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f113:before { content: "売り切れ\A１１月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f112:before { content: "売り切れ\A１２月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f122:before { content: "売り切れ\A１２月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f123:before { content: "売り切れ\A１２月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 16px; font-weight: bold; position: absolute; text-align: center; top: 33%; width: 100%; z-index: 30; white-space: pre; } /* キーワード*/ #footer .keyword { width: 100%; text-align: center; top: -50px; position: absolute; font-size: 14px; z-index: 50; color: #000; } /* 汎用ヘアライン*/ #line { width: 100%; border-top:#ccc 1px solid; margin-right: -500%; margin-left: -500%; padding-right: 500%; padding-left: 500%; } #footer { width: 100%; height: 500px; text-align: center; overflow: visible; z-index: 0; position: relative; } #footer .copy { position: absolute; font-size: 12px; letter-spacing: 2px; bottom: 83px; color: #000; left: 50%; z-index: 10; margin: 0 0 0 35px; } #footer_bottom { width: 100%; height: 263px; position: absolute; z-index: 1; bottom:72px; background-color:#f6f6f6; } #footer_logo { background-image: url(../img/b_logo_bg_2_p.png); background-position: center bottom; max-width: 613px; width: 60%; height: 414px; bottom: -25px; right: 30px; position: absolute; z-index: 2; background-repeat: no-repeat; background-size: 100%; } /* SNSボタン */ #footer .sns { position: absolute; bottom: 49px; z-index: 10; right: 50%; margin: 0px -30px 0 0; } #footer .sns .logo_net { float:left; width:201px; height:55px; margin-top:16px; } #footer .sns .logo_net img { width:201px; height:55px; } #footer .sns .logo_sns { float:left; width:240px; height:55px; } .snsb { position: relative; } .snsb ul { position: relative; left: 70%; float: left; margin-left:-30px; } .snsb li { position: relative; float: left; left: -50%; margin-right: 10px; list-style:none; } .snsb iframe { margin: 0 !important; } } /* PC用 ここまで */ /* TABLET用 ここから */ @media screen and (min-width: 641px) and (max-width: 768px) { /* ナビゲーションボタン各種 */ /* バーガーメニュー */ .base { z-index: 60; top: 40px; left: 229px; background-image: url(../img/menu_open_p.png); position: fixed; width: 120px; height: 57px; background-size: 100%; background-repeat: no-repeat; background-position: center; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } body { font-family: sans-serif; } header { } header .burger { width: 120px; height: 57px; cursor: pointer; position: fixed; z-index: 60; top: 40px; left: 229px; } header .burger > div{ width: 100%; height: 3px; position: absolute; } .open_bg { opacity: 1; background-image: url(../img/close_p.png); background-repeat: no-repeat; background-position: top; width: 120px; height: 57px; cursor: pointer; position: fixed; z-index: 160; top: 41px; left: 229px; background-size: 100%; display: none; } .open_base { opacity: 0.9; z-index: 70; background-color: #fff; width: 100%; height: 100%; position: fixed; display: none; } .nav { width: 100%; background: #fff; display: none; position: fixed; padding: 135px 10% 10% 10%; top: 0; left: 50%; transform: translate(-50%, 0%); z-index: 75; overflow: scroll; height: 80%!important; text-align: center; } .nav::-webkit-scrollbar { width: 10px; } .nav::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 0px rgba(0, 0, 0, .0); } .nav::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .1); border-radius: 10px; box-shadow: 0 0 0 0px rgba(255, 255, 255, .0); } .nav .net_on { position: absolute; top: 10px; left: 70px; width: 200px; height: 57px; } .nav-list { text-align: left; margin: 8px; width: 18.6%; height: auto; display: inline-block; position: relative; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .nav-list img { width:100%; height:auto; } .nav-list .nmb { font-size:22.8px; font-style:italic; line-height: 20px; } .nav-list a { transition: 0.2s ease 0s; -webkit-transition: 0.2s ease 0s; -moz-transition: 0.2s ease 0s; -ms-transition: 0.2s ease 0s; } .nav-list a:hover { opacity: 0.9; -webkit-opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); -ms-filter: "alpha(opacity=90)"; } .nav-list img { transition: 0.2s ease 0s; -webkit-transition: 0.2s ease 0s; -moz-transition: 0.2s ease 0s; -ms-transition: 0.2s ease 0s; } .nav-list img:hover { opacity: 0.7; -webkit-opacity: 0.7; -moz-opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; } #totop_b_btn { z-index: 60; left: 40px; top: 40px; background-image: url(../img/logo_p.png); position: fixed; width: 79px; height: 100px; background-size: cover; } .m_back_top { background-image: url(../img/close_p.png); background-position: center center; background-size: cover; position: fixed; top: 0px; right: 0px; width: 79px; height: 80px; cursor: pointer; z-index: 50; } /* バーガーメニュー */ #navi_base { z-index: 10; top: 0; background-color:#fff; height:55px; width:100%; position: fixed; } #cart_btn { z-index: 100; right: 6px; top: 3px; background-image: url(../img/cart_btn_s.png?1); background-size: cover; position: fixed; width: 70px; height: 70px; background-repeat: no-repeat; } #netshop_btn { z-index: 60; left: 20px; bottom: 1px; background-image: url(../img/netshop_btn_t.png); background-size: 100%; height: 46px; position: fixed; width: 154px; background-repeat: no-repeat; } #pagetop_btn { z-index: 70; left: 50%; bottom: 0; margin: 0 0 0 -19px; background-image: url(../img/totop.png); position: fixed; width: 38px; height: 58px; background-size: 100%; background-position: center bottom; background-repeat: no-repeat; } #netshop_b_btn { z-index: 60; left: 9px; bottom: 130px; background-image: url(../img/bl_logo_p.png); position: absolute; width: 157px; height: 54px; background-size: 100%; background-repeat: no-repeat; } #headlogo { z-index: 160; left: 1px; top: 6px; background-image: url(../img/head_logo_2_p.png); position: fixed; width: 223px; height: 111px; background-size: 100%; background-position: top; background-repeat: no-repeat; } /* ナビゲーションボタン各種 */ /* トップエリア*/ #main_base { width:100%; } #main_area { position:absolute; width:100%; top:0; } #main_op { background: #cc7e8c; width: 100%; position: absolute; top: 0; } .motherday { background-image: url(../img/op_logo_2_p_2.png); background-repeat: no-repeat; position: absolute; width: 90%; height: 100%; left: 50%; margin: 0 0 0 -45%; z-index: 100; background-size: 100%; background-position: center center; } .motherday_s { background-image: url(../img/op_logo_p_1.png); background-repeat: no-repeat; position: absolute; width: 25%; height: 100%; left: 50%; margin: -22% 0 0 -35%; z-index: 100; background-size: 100%; background-position: center center; } #mainimage_p , #mainimage_s { display: none; } #mainimage_t { position: relative; z-index: -1; margin-top: 13vh; } #mainimage_t .top_area_left { background-color: #fff; position: absolute; width: 5%; height: 100%; left: 0; z-index: 100; } #mainimage_t .top_area_right { background-color: #fff; position: absolute; width: 5%; height: 100%; right: 0; z-index: 100; } #title_area { position:absolute; top:0; width:100%; z-index:20; } #title_area .mainlogo { background-image: url(../img/main_logo_2_p.png); background-position: center top; position: absolute; background-size: 100%; width: 67%; max-width: 616px; height: 414px; top: 20px; left: 20px; position: absolute; z-index: 50; background-repeat: no-repeat; } #main_area .mainlogo2 { background-image: url(../img/main_logo_2_p_2.png); background-position: center top; position: absolute; background-size: 100%; width: 43%; max-width: 616px; height: 414px; top: 20px; left: 20px; position: absolute; z-index: 50; background-repeat: no-repeat; } #title_area .arrow { background-image: url(../img/arrow.png); background-position: center top; position: absolute; background-size: cover; z-index: 999; bottom: 45px; left: 50%; width: 80px; height: 80px; margin: 0px 0 0 -40px; -webkit-animation: bounce1 3000ms infinite; } @-webkit-keyframes bounce1 { 0% { margin-bottom:0; } 50% { margin-bottom:15px; } 100% { margin-bottom:0; } } /* リード*/ #read { width: 100%; margin: 18vh auto 50px auto; letter-spacing: 1px; position: relative; color: #666; } #read .midashi1 { background-image: url(../img/read_p.png); background-position: center center; margin: 0 auto; width: 348px; height: 21px; position: relative; z-index: 1; background-size: 100%; background-repeat: no-repeat; } #read .midashi2 { margin: 15px auto 19px auto; font-size: 22px; text-align: center; position: relative; z-index: 1; letter-spacing: 2px; } #read .midashi3 { width: 520px; margin: 0 auto; padding: 0 20px; font-size: 13px; border-top: #eaeaea 1px solid; background-image: linear-gradient(90deg,rgba(234,234,234,0) 0%,rgba(223,234,234,0) 100%,rgba(255,255,255,100) 50%,rgba(255,255,255,100) 100%),linear-gradient(180deg,rgba(234,234,234,0) 0%,rgba(234,234,234,0) 98.6%,rgba(100,100,100,100) 100%); background-repeat: repeat-y; background-size: 4px 100%,100% 43px; line-height: 43px; position: relative; z-index: 1; } #read .midashi4 { background-image: url(../img/read_bg_2_p.png); background-position: center top; margin: -86px 0 0 -32px; width: 398px; height: 230px; position: relative; z-index: 0; left: 50%; background-size: 100%; background-repeat: no-repeat; } /* リード */ /* カテゴリーのタイトルなど */ .cat_item { background-image: url(../img/title_item_p.png); background-position: center top; margin: 0 auto 0 auto; width: 75px; height: 52px; background-size: 100%; background-repeat: no-repeat; } .cat_arrow { background-image: url(../img/arrow_bottom_p.png); background-position: center top; margin: 0 auto 0 auto; width: 75px; height: 61px; background-size:100%; background-repeat: no-repeat; } .cat_products { background-image: url(../img/title_products_p.png); background-position: center top; margin: 0 auto 0 auto; width: 140px; height: 77px; background-size: 100%; background-repeat: no-repeat; } /* /カテゴリーのタイトルなど */ /* トップページのカテゴリー */ #item_area { width: 100%; margin: 90px auto 65px auto; height: 100%; position: relative; } #item_area .bg_area { width: 100%; height: 31.5vh; position: absolute; bottom: 4px; background: #fafafa; z-index: -1; } #item_area .image_area { width: 100%; height: auto; position: relative; z-index: 1; } #item_area .over { width: 100%; background: #fff; min-height:100%; position:absolute; bottom:0; z-index:10; } #item_area .image_area img { width: 100%; position: relative; z-index:0; } #item_area .cap_area { width: 100%; min-height: 63vh; position: relative; height: auto; } #item_area .cap_name { position: absolute; font-size: 14px; top: 37px; left: 40px; } #item_area .cap_sub { position: absolute; font-size: 25px; top: 62px; left: 40px; } #item_area .cap_main { position: absolute; text-align: center; font-size: 13px; top: 49.5%; left: 50%; transform: translateY(-50%) translateX(-50%); line-height: 27px; width: 100%; color: #666; } #item_area .en { font-size: 16px; } #item_area .cap_logo { background-image: url(../img/cat_b_logo_p.png); background-position: center bottom; background-size: 100%; width: 135px; height: 66px; position: absolute; bottom: 30px; right: 45px; background-repeat: no-repeat; } /* 中ページの各種設定 */ #main_area .i_mainlogo { background-image: url(../img/c_logo_side_p.png); background-position: center top; position: absolute; background-size: 100%; width: 126px; height: 335px; top: 45px; left: 55px; position: absolute; z-index: 50; } #i_mainlogo_2 { z-index: 100; left: 50%; top: 0; margin-left: -150px; background-image: url(../img/c_logo_p.png); position: fixed; width: 299px; height: 139px; } #main { position: absolute; top: 0; z-index: -1; text-align: center; width: 100%; left: 50%; margin: 0 0 0 -50%; overflow: hidden; } #main img { width: auto; height: auto; height: 100%; } #main .img_l { margin-left: 75px; } #main_area .item_bg_sp { position: relative; width: 100%; height: 100%; } #main_area .item_bg { width: 330px; min-height: 150px; background: #fff; position: absolute; bottom: 25px; right: 25px; border: 1px #ccc solid; z-index:10; } #main_area .item_bg_base { width: 330px; min-height: 150px; position: absolute; bottom: 25px; right: 25px; z-index: 20; } #main_area .item_line { width: 57px; border-bottom: 1px solid #a51c4b; margin: 5px 0 0 30px; } #main_area .item_name { font-size: 17px; margin: 15px 0 0 30px; letter-spacing: 0px; } #main_area .s { font-size: 15px; margin: 0 5px 0 0; } #main_area .price { font-size: 17px; color: #a51c4b; } #main_area .item_cap { font-size: 12px; margin: 15px 30px; letter-spacing: 1px; } #main_area .item_price { font-size: 15px; position: absolute; bottom: 95px; right: 326px; width: 365px; letter-spacing: 2px; height: 200px; text-align: right; } #i_mainlogo_t2 { z-index: 100; left: 20px; top: 20px; background-image: url(../img/cat_top_logo_p.png); position: absolute; width: 255px; height: 144px; background-size: 100%; background-repeat: no-repeat; opacity: 1; } /* 着用イメージ */ #photo_wrapper { width: 101%; margin: 25px auto 0 auto; } #photocon { margin: 0 auto; width: 100%; padding: 45px 0 340px 0; } #photo { margin: 0 auto; display: block; padding-left: 0; position: relative; text-align: center; } #photo figure { width: 21.2%; line-height: 20px; margin: 1.5% 1.1% 1.5% 0; display: inline-block; position: relative; vertical-align: middle; } #photo .y { width: 34.8%; margin: 0 1.1% 0 0; } #photo figure img { width:100%; height:auto; } /* 着用イメージ */ /* 商品画像一覧エリア*/ #img_area { width: 83%; margin: 0 auto; padding: 75px 0 145px 1.5%; } #img_area figure { width: 47.5%; margin: 0 3px; display: inline-block; } #img_area figure img { width: 100%; } #itemlist { width: 100%; margin: 0; padding: 0 0 0 0; } #item_wrapper { margin: 0 auto; display: block; } .itemarea { margin: 50px auto 100px auto; width: 100%; font-size: 13px; display: block; text-align: center; } .itemarea a { height: auto; text-align: center; margin: 0.5% 0.5% 4.5% 0.5%; display: inline-block; position: relative; vertical-align: top; width: 30.8%; } .itemarea img { width:100%; height:auto; margin:0; } .itemarea a { display: inline-block; -webkit-transition: 0.2s ease; transition: 0.2s ease; filter: alpha(opacity=100); opacity: 1; } .itemarea a:hover { filter: alpha(opacity=60); opacity: 0.60; } .sozai { font-size:18px; text-align:center; margin:0; letter-spacing: 2px; } .itemname { font-size:27px; text-align:center; margin:0; letter-spacing: 3px; } .cat_name { font-size: 17px; text-align: left; letter-spacing: 2px; background-image: url(../img/arrow_right_p.png); background-position: 0px 4px; height: 10px; background-repeat: no-repeat; background-size: 22px; margin: 7px 0 2px 7px; padding: 0px 0px 16px 0px; text-indent: 30px; } .cat_price { font-size: 14px; text-align: left; margin: 0; letter-spacing: 1px; text-indent: 46px; } .itemcaption { font-size:14px; text-align:left; display: table; margin: 15px auto -30px; padding-left: 20px; letter-spacing: 1px; } .itemlist img:hover { opacity:0.7; } #itemlist_i { width: 100%; background-color: #f5f5f5; margin: 50px 0 0 0; padding: 35px 0 0 0; position: relative; } #item_wrapper_i { margin: 0 auto; display: block; } .itemarea_i { margin: 70px auto 160px auto; width: 100%; padding-bottom: 80px; font-size: 11px; display: block; text-align: center; } .itemarea_i a { height: auto; text-align: center; margin: 1% 1% 3% 1%; display: inline-block; position: relative; vertical-align: top; -webkit-transition: 0.2s ease; transition: 0.2s ease; filter: alpha(opacity=100); opacity: 1; } .itemarea_i img { width:100%; height:auto; margin:0; } .itemarea_i a:hover { filter: alpha(opacity=60); opacity: 0.60; } @media screen and (min-width: 1300px) { .itemarea_i a { width: 17.3%; } } @media screen and (max-width: 1300px) { .itemarea_i a { width: 22%; } } .itemlist_i img:hover { opacity:0.7; } /* 自動売消フラグ関連*/ a.so{ pointer-events: none; } .itemarea .so img { opacity: 0.2; } /* 掲載落としフラグ用*/ a.ds_none { display: none; } .itemarea .f:before { content: "売り切れ"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 35%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f400:before { content: "売り切れ\A再入荷未定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f500:before { content: "売り切れ\A再入荷予定なし"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f11:before { content: "売り切れ\A１月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f12:before { content: "売り切れ\A１月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f13:before { content: "売り切れ\A１月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f21:before { content: "売り切れ\A２月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f22:before { content: "売り切れ\A２月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f23:before { content: "売り切れ\A２月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f31:before { content: "売り切れ\A３月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f32:before { content: "売り切れ\A３月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f33:before { content: "売り切れ\A３月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f41:before { content: "売り切れ\A４月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f42:before { content: "売り切れ\A４月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f43:before { content: "売り切れ\A４月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f51:before { content: "売り切れ\A５月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f52:before { content: "売り切れ\A５月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f53:before { content: "売り切れ\５月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f61:before { content: "売り切れ\A６月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f62:before { content: "売り切れ\A６月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f63:before { content: "売り切れ\A６月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f713:before { content: "売り切れ\A７月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f72:before { content: "売り切れ\A７月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f73:before { content: "売り切れ\A７月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f81:before { content: "売り切れ\A８月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f82:before { content: "売り切れ\A８月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f83:before { content: "売り切れ\A８月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f91:before { content: "売り切れ\A９月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f92:before { content: "売り切れ\A９月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f93:before { content: "売り切れ\A９月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f101:before { content: "売り切れ\A１０月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f102:before { content: "売り切れ\A１０月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f103:before { content: "売り切れ\A１０月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f111:before { content: "売り切れ\A１１月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f112:before { content: "売り切れ\A１１月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f113:before { content: "売り切れ\A１１月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f112:before { content: "売り切れ\A１２月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f122:before { content: "売り切れ\A１２月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f123:before { content: "売り切れ\A１２月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 30%; width: 100%; z-index: 30; white-space: pre; } /* キーワード*/ #footer .keyword { width: 100%; text-align: center; top: 10px; position: absolute; font-size: 14px; z-index: 50; color: #000; } /* 汎用ヘアライン*/ #line { width: 100%; border-top:#ccc 1px solid; margin-right: -500%; margin-left: -500%; padding-right: 500%; padding-left: 500%; } #footer { width: 100%; height: 500px; text-align: center; overflow: visible; z-index: 0; position: relative; } #footer .copy { position: absolute; font-size: 9px; letter-spacing: 0px; bottom: 191px; color: #000; left: 215px; z-index: 10; } #footer_bottom { width: 100%; height: 200px; position: absolute; z-index: 1; bottom: 135px; background-color: #f6f6f6; } #footer_logo { background-image: url(../img/b_logo_bg_2_p.png); background-position: center top; width: 63%; height: 418px; bottom: -40px; right: 13px; position: absolute; z-index: 2; background-repeat: no-repeat; background-size: 100%; } /* SNSボタン */ #footer .sns { position: absolute; bottom: 155px; z-index: 10; left: -25px; } #footer .sns .logo_net { float:left; width:201px; height:55px; margin-top:16px; } #footer .sns .logo_net img { width:201px; height:55px; } #footer .sns .logo_sns { float:left; width:240px; height:55px; } .snsb { position: relative; } .snsb ul { position: relative; left: 70%; float: left; margin-left:-30px; } .snsb li { position: relative; float: left; left: -50%; margin-right: 10px; list-style:none; } .snsb iframe { margin: 0 !important; } } /* TABLET用 ここまで */ /* SMP用 ここから */ @media screen and (max-width: 640px) { /* ナビゲーションボタン各種 */ /* バーガーメニュー */ .base { z-index: 60; top: 5px; left: 149px; background-image: url(../img/menu_open_p.png); position: fixed; width: 115px; height: 57px; background-size: 100%; background-repeat: no-repeat; background-position: center; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } body { font-family: sans-serif; } header { } header .burger { width: 115px; height: 57px; cursor: pointer; position: fixed; z-index: 60; top: 5px; left: 149px; } header .burger > div{ width: 100%; height: 3px; position: absolute; } .open_bg { opacity: 1; background-image: url(../img/close_p.png); background-repeat: no-repeat; background-position: top; width: 115px; height: 57px; cursor: pointer; position: fixed; z-index: 160; top: 7px; left: 149px; background-size: 100%; display: none; } .open_base { opacity: 0.9; z-index: 70; background-color: #fff; width: 100%; height: 100%; position: fixed; display: none; } .nav { width: 100%; background: #fff; display: none; position: fixed; padding: 70px 10% 10% 10%; top: 0; left: 51%; transform: translate(-50%, 0%); z-index: 75; overflow: scroll; height: 85%!important; text-align: center; } .nav::-webkit-scrollbar { width: 10px; } .nav::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 0px rgba(0, 0, 0, .0); } .nav::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .1); border-radius: 10px; box-shadow: 0 0 0 0px rgba(255, 255, 255, .0); } .nav .net_on { position: absolute; top: 10px; left: 70px; width: 200px; height: 57px; } .nav-list { text-align: left; margin: 8px; width: 26%; height: auto; display: inline-block; position: relative; } .nav-list img { width:100%; height:auto; } #totop_b_btn { z-index: 60; left: 40px; top: 40px; background-image: url(../img/logo_p.png); position: fixed; width: 79px; height: 100px; background-size: cover; } .m_back_top { background-image: url(../img/close_p.png); background-position: center center; background-size: cover; position: fixed; top: 0px; right: 0px; width: 79px; height: 80px; cursor: pointer; z-index: 50; } /* バーガーメニュー */ #navi_base { z-index: 10; top: 0; background-color:#fff; height:55px; width:100%; position: fixed; } #cart_btn { z-index: 100; right: 0px; top: 0px; background-image: url(../img/cart_btn_s.png); background-size: cover; position: fixed; width: 65px; height: 65px; background-repeat: no-repeat; } #netshop_btn { z-index: 60; left: 12px; bottom: 2px; background-image: url(../img/netshop_btn_t.png); background-size: 100%; height: 42px; position: fixed; width: 130px; background-repeat: no-repeat; } #pagetop_btn { z-index: 70; left: 50%; bottom: 0; margin: 0 0 0 -19px; background-image: url(../img/totop.png); position: fixed; width: 38px; height: 58px; background-size: 100%; background-position: center bottom; background-repeat: no-repeat; } #headlogo { z-index: 160; left: 7px; top: 0px; background-image: url(../img/head_logo_s.png); position: fixed; width: 145px; height: 111px; background-size: 100%; background-position: top; background-repeat: no-repeat; } /* ナビゲーションボタン各種 */ /* トップエリア*/ #main_base { width:100%; } #main_area { position:absolute; width:100%; top:0; } #main_op { background: #cc7e8c; width: 100%; position: absolute; top: 0; } .motherday { background-image: url(../img/op_logo_2_p_2.png); background-repeat: no-repeat; position: absolute; width: 90%; height: 100%; left: 50%; margin: 0 0 0 -45%; z-index: 100; background-size: 100%; background-position: center center; } .motherday_s { background-image: url(../img/op_logo_p_1.png); background-repeat: no-repeat; position: absolute; width: 25%; height: 100%; left: 50%; margin: -22% 0 0 -37%; z-index: 100; background-size: 100%; background-position: center center; } #mainimage_p , #mainimage_t { display: none; } #mainimage_s { position: relative; z-index: -1; margin-top: 13vh; } #title_area { position:absolute; top:0; width:100%; z-index:20; } #title_area .mainlogo { background-image: url(../img/main_logo_2_p.png); background-position: center top; position: absolute; background-size: 100%; width: 86%; max-width: 616px; height: 414px; top: 14px; left: 20px; position: absolute; z-index: 50; background-repeat: no-repeat; } #main_area .mainlogo2 { background-image: url(../img/main_logo_2_p_2.png); background-position: center top; position: absolute; background-size: 100%; width: 67%; max-width: 616px; height: 414px; top: 14px; left: 20px; position: absolute; z-index: 50; background-repeat: no-repeat; } #title_area .arrow { background-image: url(../img/arrow.png); background-position: center top; position: absolute; background-size: cover; z-index: 999; bottom: 45px; left: 50%; width: 80px; height: 80px; margin: 0px 0 0 -40px; -webkit-animation: bounce1 3000ms infinite; } @-webkit-keyframes bounce1 { 0% { margin-bottom:0; } 50% { margin-bottom:15px; } 100% { margin-bottom:0; } } /* リード*/ #read { width: 100%; margin: 19vh auto -30px auto; letter-spacing: 1px; position: relative; color: #666; } #read .midashi1 { background-image: url(../img/read_p.png); background-position: center center; margin: 0 auto; width: 251px; height: 18px; position: relative; z-index: 1; background-size: 100%; background-repeat: no-repeat; } #read .midashi2 { margin: 13px auto 13px auto; font-size: 16px; text-align: center; position: relative; z-index: 1; letter-spacing: 2px; } #read .midashi3 { width: 90%; margin: 0 auto; padding: 0 5%; font-size: 13px; border-top: #eaeaea 1px solid; background-image: linear-gradient(90deg,rgba(234,234,234,0) 0%,rgba(223,234,234,0) 100%,rgba(255,255,255,100) 50%,rgba(255,255,255,100) 100%),linear-gradient(180deg,rgba(234,234,234,0) 0%,rgba(234,234,234,0) 98.1%,rgba(100,100,100,100) 100%); background-repeat: repeat-y; background-size: 4px 100%,100% 31px; line-height: 31px; position: relative; z-index: 1; } #read .midashi4 { background-image: url(../img/read_bg_2_p.png); background-position: right; margin: -70px 0 0 0px; width: 100%; height: 230px; position: relative; z-index: 0; background-size: 280px; background-repeat: no-repeat; } /* リード */ /* カテゴリーのタイトルなど */ .cat_item { background-image: url(../img/title_item_p.png); background-position: center top; margin: 0 auto 0 auto; width: 75px; height: 52px; background-size: 100%; background-repeat: no-repeat; } .cat_arrow { background-image: url(../img/arrow_bottom_p.png); background-position: center top; margin: 0 auto 0 auto; width: 75px; height: 61px; background-size:100%; background-repeat: no-repeat; } .cat_products { background-image: url(../img/title_products_p.png); background-position: center top; margin: 0 auto 0 auto; width: 130px; height: 77px; background-size: 100%; background-repeat: no-repeat; } /* /カテゴリーのタイトルなど */ /* トップページのカテゴリー */ #item_area { width: 100%; margin: 30px auto 25px auto; height: 100%; position: relative; } #item_area .bg_area { width: 100%; height: 21vh; position: absolute; bottom: 4px; background: #fafafa; z-index: -1; } #item_area .image_area { width: 100%; height: auto; position: relative; z-index: 1; } #item_area .over { width: 100%; background: #fff; min-height:100%; position:absolute; bottom:0; z-index:10; } #item_area .image_area img { width: 100%; position: relative; z-index:0; } #item_area .cap_area { width: 100%; min-height: 42vh; position: relative; height: auto; } #item_area .cap_name { position: absolute; font-size: 12px; top: 4px; left: 13px; } #item_area .cap_sub { position: absolute; font-size: 18px; top: 23px; left: 13px; } #item_area .cap_main { position: absolute; text-align: center; font-size: 11px; top: 48.5%; left: 50%; transform: translateY(-50%) translateX(-50%); line-height: 21px; width: 100%; color: #666; } #item_area .en { font-size: 16px; } #item_area .cap_logo { background-image: url(../img/cat_b_logo_p.png); background-position: center bottom; background-size: 100%; width: 79px; height: 66px; position: absolute; bottom: 16px; right: 14px; background-repeat: no-repeat; } /* 中ページの各種設定 */ #main_area .i_mainlogo { background-image: url(../img/c_logo_side_p.png); background-position: center top; position: absolute; background-size: 100%; width: 126px; height: 335px; top: 45px; left: 55px; position: absolute; z-index: 50; } #i_mainlogo_2 { z-index: 100; left: 50%; top: 0; margin-left: -150px; background-image: url(../img/c_logo_p.png); position: fixed; width: 299px; height: 139px; } #main { position: absolute; top: 0; z-index: -1; text-align: center; width: 100%; left: 50%; margin: 0 0 0 -50%; overflow: hidden; } #main img { width: auto; height: auto; height: 100%; margin-top: 90px; } #main .img_l { margin-left: 75px; } #main_area .item_bg_sp { width: 88%; background: #fff; position: absolute; top: 109%; left: 6%; border: 1px #ccc solid; } #main_area .item_bg_base { display: table; } #main_area .item_line { width: 57px; border-bottom: 1px solid #a51c4b; margin: 10px 0 0 20px; } #main_area .item_name { font-size: 15px; margin: 20px 0 0 20px; letter-spacing: 0px; line-height: 24px; } #main_area .s { font-size: 13px; margin: 0 5px 0 0; } #main_area .price { font-size: 14px; color: #a51c4b; } #main_area .item_cap { font-size: 12px; margin: 15px 20px 20px 20px; letter-spacing: 1px; } #main_area .item_price { font-size: 15px; position: absolute; bottom: 95px; right: 326px; width: 365px; letter-spacing: 2px; height: 200px; text-align: right; } /* 着用イメージ */ #photo_wrapper { width: 101%; margin: 25px auto 0 auto; } #photocon { margin: 0 auto; width: 100%; padding: 45px 0 340px 0; } #photo { margin: 0 auto; display: block; padding-left: 0; position: relative; text-align: center; } #photo figure { width: 21.2%; line-height: 20px; margin: 1.5% 1.1% 1.5% 0; display: inline-block; position: relative; vertical-align: middle; } #photo .y { width: 34.8%; margin: 0 1.1% 0 0; } #photo figure img { width:100%; height:auto; } /* 着用イメージ */ /* 商品画像一覧エリア*/ #photo_area { width: 100%; margin: 68% auto 80px auto; display:inline-block; } /* iPhone5 対策 */ @media screen and (max-width: 374px) { #photo_area {margin: 80% auto 80px auto;} } /* iPhone Plus 対策 */ @media screen and (min-width: 414px) { #photo_area {margin: 66% auto 80px auto;} } #img_area { width: 96%; margin: 0 auto; padding: 0 0 0 1.5%; } #img_area figure { width: 47.6%; margin: 0 0.6% -0.3% 0.6%; float: left; } #img_area figure img { width: 100%; } #itemlist { width: 102%; margin: 20px 0 90px -1%; padding: 1px 0 0 0; position: relative; z-index: 20; } #item_wrapper { margin: 0 auto; display: block; } .itemarea { margin: 10px auto 65px auto; width: 100%; font-size: 12px; display: block; text-align: center; } .itemarea a { height: auto; text-align: center; margin: 0 0.5% 1% 0.5%; display: inline-block; position: relative; vertical-align: top; line-height: 18px; } .itemarea img { width:100%; height:auto; margin:0; } .itemarea a { width: 48%; display: inline-block; } .sozai { font-size:18px; text-align:center; margin:0; letter-spacing: 2px; } .itemname { font-size:27px; text-align:center; margin:0; letter-spacing: 3px; } .price { font-size:14px; text-align:center; margin:0; letter-spacing: 1px; } .itemcaption { font-size:14px; text-align:left; display: table; margin: 15px auto -30px; padding-left: 20px; letter-spacing: 1px; } #itemlist_i { background-color: #f5f5f5; width: 100%; margin: 0 0 0 0; padding: 1px 0 0 0; position: relative; } #item_wrapper_i { margin: 0 auto; display: block; } .itemarea_i { margin: 10px auto 100px auto; width: 100%; padding-bottom: 80px; font-size: 11px; display: block; text-align: center; } .itemarea_i a { height: auto; text-align: center; margin: 1%; display: inline-block; position: relative; vertical-align: top; opacity: 1; width: 46%; } .itemarea_i img { width:100%; height:auto; margin:0; } .pcn , .cat_name , .cat_price { display: none; } /* iPhone5 対策 */ @media screen and (max-width: 374px) { #photo_area {margin: 80% auto 60px auto;} } /* iPhone Plus 対策 */ @media screen and (min-width: 414px) { #photo_area {margin: 66% auto 60px auto;} } /* 自動売消フラグ関連*/ a.so{ pointer-events: none; } .itemarea .so img { opacity: 0.2; } /* 掲載落としフラグ用*/ a.ds_none { display: none; } .itemarea .f:before { content: "売り切れ"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 47%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f400:before { content: "売り切れ\A再入荷未定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f500:before { content: "売り切れ\A再入荷予定なし"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f11:before { content: "売り切れ\A１月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f12:before { content: "売り切れ\A１月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f13:before { content: "売り切れ\A１月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f21:before { content: "売り切れ\A２月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f22:before { content: "売り切れ\A２月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f23:before { content: "売り切れ\A２月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f31:before { content: "売り切れ\A３月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f32:before { content: "売り切れ\A３月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f33:before { content: "売り切れ\A３月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f41:before { content: "売り切れ\A４月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f42:before { content: "売り切れ\A４月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f43:before { content: "売り切れ\A４月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f51:before { content: "売り切れ\A５月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f52:before { content: "売り切れ\A５月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f53:before { content: "売り切れ\５月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f61:before { content: "売り切れ\A６月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f62:before { content: "売り切れ\A６月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f63:before { content: "売り切れ\A６月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f713:before { content: "売り切れ\A７月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f72:before { content: "売り切れ\A７月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f73:before { content: "売り切れ\A７月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f81:before { content: "売り切れ\A８月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f82:before { content: "売り切れ\A８月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f83:before { content: "売り切れ\A８月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f91:before { content: "売り切れ\A９月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f92:before { content: "売り切れ\A９月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f93:before { content: "売り切れ\A９月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f101:before { content: "売り切れ\A１０月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f102:before { content: "売り切れ\A１０月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f103:before { content: "売り切れ\A１０月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f111:before { content: "売り切れ\A１１月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f112:before { content: "売り切れ\A１１月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f113:before { content: "売り切れ\A１１月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f112:before { content: "売り切れ\A１２月上旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f122:before { content: "売り切れ\A１２月中旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } .itemarea .f123:before { content: "売り切れ\A１２月下旬再入荷予定"; color: #666; letter-spacing: 2px; font-size: 13px; font-weight: bold; position: absolute; text-align: center; top: 39%; width: 100%; z-index: 30; white-space: pre; } /* キーワード*/ #footer .keyword { width: 100%; text-align: center; top: -80px; position: absolute; font-size: 13px; z-index: 50; color: #000; } /* 汎用ヘアライン*/ #line { width: 100%; border-top:#ccc 1px solid; margin-right: -500%; margin-left: -500%; padding-right: 500%; padding-left: 500%; } #footer { width: 100%; height: 400px; text-align: center; overflow: visible; z-index: 0; position: relative; } #footer .copy { position: absolute; font-size: 9px; letter-spacing: 0px; bottom: 85px; color: #000; left: 50%; z-index: 10; margin: 0 0 0 45px; } #footer_bottom { width: 100%; height: 27vh; position: absolute; z-index: 1; bottom: 135px; background-color: #f6f6f6; } #footer_logo { background-image: url(../img/b_logo_bg_2_p.png); background-position: center bottom; width: 92%; height: 418px; bottom: 112px; right: 13px; position: absolute; z-index: 2; background-repeat: no-repeat; background-size: 100%; } /* SNSボタン */ #footer .sns { position: absolute; bottom: 49px; z-index: 10; right: 50%; margin: 0px -45px 0 0; } #footer .sns .logo_net { float:left; width:201px; height:55px; margin-top:16px; } #footer .sns .logo_net img { width:201px; height:55px; } #footer .sns .logo_sns { float:left; width:240px; height:55px; } .snsb { position: relative; } .snsb ul { position: relative; left: 70%; float: left; margin-left:-30px; } .snsb li { position: relative; float: left; left: -50%; margin-right: 10px; list-style:none; } .snsb iframe { margin: 0 !important; } } /* SMP用 ここまで */