/* Color Scheem #Red : e50012 #Green : 32a400 #Glay01 : 717171 （明るい） #Glay02 : 363636 （暗い） */ /* ページセット -------------------------------------------------------------*/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html { overflow-y: scroll; } body { background: #000; color: #fff; } @media screen and (max-width: 640px) { body { -webkit-text-size-adjust: 100%; } img { max-width: 100%; height: auto; width /***/:auto; } } @media screen and (min-width: 641px) { .forSP { display: none; } .forPC { display: inline; } .navBtn, .logoSP { display: none; } body.white { background: #fff; color: #000; } body.white #header { background: #fff; } body.white #headerInner h1 { background: url(../images/logo_bk.png) left top no-repeat; } body.white #header a { color: #000!important; } } @media screen and (max-width: 640px) { .forSP { display: inline!important; } .forPC { display: none!important; } body.white { background: #fff; color: #000; } } /* module ------------------------------------------------------------------------*/ .clearfix:after { content: ""; clear: both; display: block; } .txtSmall { font-size: 1.2rem; } .clear { clear: both; } /* header ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #header { background: #000; } #headerInner { margin: 0 auto; padding: 15px 0; width: 1000px; } #headerInner h1 { float: left; margin: 0 auto; width: 300px; height: 31px; background: url(../images/logo.png) left top no-repeat; background-size: 300px 31px; text-indent: -9999px; } #headerInner h1 a { display: block; width: 300px; height: 31px; } #headerInner #headerNav { float: right; } #headerInner #headerNav li { float: left; padding-left: 25px; font-size: 14px; line-height: 31px; } #headerInner #headerNav li a { padding-left: 16px; background: url(../images/arrow.png) left center no-repeat; color: #fff; text-decoration: none; white-space: nowrap; } #headerInner #headerNav li a:hover { text-decoration: underline; } } @media screen and (max-width: 640px) { #header { background: #000; } #headerInner { margin: 0 auto; } #headerInner h1 { margin: 0 0 0 10px; padding: 12px 0; height: 50px; box-sizing: border-box; } #headerInner h1 a { display: block; width: 250px; height: 26px; box-sizing: border-box; background: url(../images/logo.png) left center no-repeat; background-size: 250px 26px; text-indent: -9999px;} #headerNav { } #headerNav ul { display: none; background: #000; width: 100%; } #headerNav ul li { position: relative; border-top: 1px solid #272727; } #headerNav ul li a { display: block; padding: 15px 10px; font-size: 1.3rem; text-decoration: none; color: #fff; } #headerNav ul li a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 15px; margin-top: -5px; } #trigger { position: absolute; top: 17px; right: 5px; display: block; width: 40px; cursor: pointer; } #trigger .menu-trigger, #trigger .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } #trigger .menu-trigger { position: relative; margin-left: 10px; width: 21px; height: 18px; } #trigger .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 2px; } #trigger .menu-trigger span:nth-of-type(1) { top: 0; } #trigger .menu-trigger span:nth-of-type(2) { top: 8px; } #trigger .menu-trigger span:nth-of-type(3) { bottom: 0; } #trigger .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); } #trigger .menu-trigger.active span:nth-of-type(2) { opacity: 0; } #trigger .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); } body.white #header { background: #fff; } body.white #header a { color: #000!important; } body.white #headerInner h1 a { background: url(../images/logo_bk.png) left center no-repeat; background-size: 250px 26px; } body.white #headerNav ul { background: #fff; } body.white #headerNav ul li a::after { border-color: #272727; } body.white #trigger .menu-trigger span { background-color: #272727; } .banner { margin: 0 10px 10px 10px } } /* トップページ ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #contents { margin: 0 auto; width: 1000px; } #slide { clear: both; margin: 0 auto 45px auto; width: 1000px; border-bottom: 5px solid #e60012; box-sizing: border-box; } #brandList { margin: 20px auto 40px auto; width: 1000px; } #brandList li { float: left; width: 235px; margin-left: 20px; background: #fff; text-align: center; } #brandList li.first { margin-left: 0; } #brandList li a { display: block; padding: 10px 0; } .mente { margin: -10px auto 20px auto; width: 1000px; border: 2px solid #e8192d; padding: 15px 15px 0 15px; } .mente h3 { font-weight: bold; font-size: 20px; color: #e8192d; margin-bottom: 15px;} .mente p { font-size: 14px; margin-bottom: 15px; line-height: 1.6; } /*.mente p:last-child { margin: -15px 0 0 0!important; text-align: right; }*/ .mente02 { margin: -10px auto 30px auto; width: 1000px; border: 2px solid #e8192d; background: #fff; text-align: center; } .mente02 h3 { font-weight: bold; font-size: 20px; padding: 10px 15px 15px 15px; background: #e8192d; margin-bottom: 15px; color: #fff; } .mente02 p { font-size: 16px; margin-bottom: 15px; padding: 0 15px; line-height: 1.6; color: #000; } .mente02 p span { font-size: 12px; } .mente02 p a { color: #e8192d; font-weight: bold; } .banner { margin: 0 auto 30px; width: 1000px; background: #fff; text-align: center; } #topics { padding: 50px 0; width: 100%; background: #fff; } #topics #topicsInner { margin: 0 auto; width: 960px; } #topics #topicsInner { display: table; } #topics #topicsInner .title { display: table-cell; width: 140px; vertical-align: top; font-size: 26px; font-family: YuMincho, 'Yu Mincho', serif; color: #000; } #topics #topicsInner .detail { display: table-cell; width: 820px; vertical-align: top; } #topics #topicsInner .detail ul { margin-top: -10px; overflow:auto; height: 200px; } #topics #topicsInner .detail li { border-bottom: 1px dashed #e5e5e5; } #topics #topicsInner .detail li dl { display: table; } #topics #topicsInner .detail li dt { display: table-cell; padding: 10px 0 10px 48px; width: 160px; vertical-align: top; box-sizing: border-box; font-size: 14px; color: #000;line-height: 1.6; } /*newあり */ /* #topics #topicsInner .detail li dt { display: table-cell; padding: 10px 0 10px 0px; width: 112px; vertical-align: top; box-sizing: border-box; font-size: 14px; color: #000;line-height: 1.6; } /* new無し */ #topics #topicsInner .detail li dt.new { background: url(../images/icon_new.png) 0 10px no-repeat; } #topics #topicsInner .detail li dd { display: table-cell; padding: 10px 0; vertical-align: top; font-size: 14px; color: #000; line-height: 1.6; } #topics #topicsInner .detail li dd a { color: #000; text-decoration: underline; } #topics #topicsInner .detail li dd a:hover { text-decoration: underline; color: #e60012; } #topics #topicsInner .detail li.last { border: none; } #linkList { margin: 0 auto; padding: 50px 0 50px 0; width: 852px; width: 1000px; box-sizing: border-box;} /*#linkList .first { float: left; } #linkList .last { float: right; }*/ #linkList li { float: left; margin-right: 12px; /*width: 297px; */ } #linkList li.last { margin-right: 0; } /* #linkList .last li { float: left; /*width: 297px; }*/ #linkList .linkRecruit { float: left; width: /*406px; */ 132px; } #linkList .linkRecruit dl { width: 132px; } #linkList .linkRecruit dl dd { text-align: left; } #linkList .linkContact { float: left; width: /*406px; */ 132px; } #linkList .linkContact dl { width: 132px; } #linkList .linkContact dl dd { text-align: left; } /* #linkList .linkTmg { float: left; width: 132px; } #linkList .linkTmg dl { width: 132px; }*/ #linkList li dt { margin-bottom: 10px; } #linkList li dd { text-align: center; font-size: 13px; color: #fff; line-height: 1.6; } #linkList .linkBrand { float: left; width: 132px; } #linkList .linkBrand dl { width: 132px/*276px*/; } #linkList .linkBrand img { width: 132px; height: 132px; } /*#linkList .linkBrand dl dt { width: 408px; }*/ /*#linkList .linkBrand dl dd { width: 276px; } #linkList .linkBrand a { float: left; }*/ /*#linkList .linkBrand .brandHpf { display: block; width: 132px; border: 3px 3px 2px 2px; border: solid; border-color: #79cef5; box-sizing: border-box; }*/ /*#linkList .linkBrand .brandTks { float: left; display: block; margin: 0 5px; width: 132px; border: 3px 3px 2px 2px; border: solid; border-color: #ed7506; box-sizing: border-box; } #linkList .linkBrand .brandOuf { float: right; display: block; width: 132px; border: 3px 3px 2px 2px; border: solid; border-color: #fff; box-sizing: border-box; } #linkList .linkTmg .brandTmg { display: block; width: 132px; box-sizing: border-box; } #linkList .linkTmg .brandTmg img { width: 100%; }*/ } @media screen and (max-width: 640px) { #contents { margin: 0 auto; width: 100%; } #slide { clear: both; margin: 0 auto 35px auto; border-bottom: 5px solid #e60012; box-sizing: border-box; } #brandList { margin: 10px; } #brandList li { margin: 0 0 2% 0; width: 49%; background: #fff; text-align: center; } #brandList li:nth-child(1) { float: left; margin-right: 0.5%; } #brandList li:nth-child(2) { float: right; margin-left: 0.5%; } #brandList li:nth-child(3) { float: left; margin-right: 0.5%; } #brandList li:nth-child(4) { float: right; margin-left: 0.5%; } #brandList li a { display: block; padding: 10px; } .mente { margin: 0 10px 20px 10px; border: 2px solid #e8192d; padding: 15px 15px 0 15px; } .mente h3 { font-weight: bold; font-size: 20px; color: #e8192d; margin-bottom: 15px;} .mente p { font-size: 14px; margin-bottom: 15px; line-height: 1.6; } /*.mente p:last-child { margin: 0 0 0 0!important; text-align: right; }*/ .mente02 { margin: 0 10px 20px 10px; border: 2px solid #e8192d; background: #fff; } .mente02 h3 { font-weight: bold; font-size: 20px; padding: 10px 15px 15px 15px; background: #e8192d; margin-bottom: 15px; color: #fff; line-height: 1.6; } .mente02 p { font-size: 16px; margin-bottom: 15px; padding: 0 15px; line-height: 1.6; color: #000; } .mente02 p a { color: #e8192d; font-weight: bold; } .mente02 p span { font-size: 12px;} #topics { padding: 20px 0; width: 100%; background: #fff; } #topics #topicsInner { margin: 0 auto; } #topics #topicsInner { } #topics #topicsInner .title { margin-bottom: 15px; font-size: 20px; font-family: YuMincho, 'Yu Mincho', serif; color: #000; text-align: center; } #topics #topicsInner .detail { } #topics #topicsInner .detail ul { margin: 0 10px; padding-top: 5px; overflow: auto; height: 150px; border-top: 1px dashed #e5e5e5; } #topics #topicsInner .detail li { border-bottom: 1px dashed #e5e5e5; } #topics #topicsInner .detail li dl { } #topics #topicsInner .detail li dt { padding: 10px 0; box-sizing: border-box; font-size: 1.3rem; color: #000; } #topics #topicsInner .detail li dt.new { padding-left: 48px; background: url(../images/icon_new.png) left center no-repeat; } #topics #topicsInner .detail li dd { padding: 0 0 10px 0; font-size: 1.3rem; color: #000; line-height: 1.6 } #topics #topicsInner .detail li dd a { color: #000; text-decoration: none; } #topics #topicsInner .detail li dd a:hover { text-decoration: underline; } #topics #topicsInner .detail li.last { border: none; } #linkList { margin: 20px 10px; } #linkList li { margin-bottom: 15px; width: 100%; } #linkList li dl { } #linkList li dt { margin-bottom: 10px; } #linkList li dt img { width: 100%; } #linkList li dd { text-align: center; font-size: 1.2rem; color: #fff; line-height: 1.5; } #linkList .last { width: 100%; } #linkList .linkBrand { float: left; width: 46%; box-sizing: border-box; } #linkList .linkBrand a img { width: 100%; } #linkList .linkBrand.odd { margin-right: 2%; } #linkList .linkBrand.even { margin-left: 2%; } /*#linkList .linkBrand .brandHpf { display: block; box-sizing: border-box; } #linkList .linkBrand .brandTks { float: left; display: block; margin-right: 1%; width: 49%; box-sizing: border-box; } #linkList .linkBrand .brandOuf { float: right; display: block; margin-left: 1%; width: 49%; box-sizing: border-box; } #linkList .linkTmg { float: left; margin: 0 26% 10px 26%; width: 48%; } #linkList .linkTmg .brandTmg img { width: 100%; }*/ } /* フッター ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #footer { clear: both; padding: 0; background: #272727; color: #fff; text-align: center; border-top: 1px solid #272727; } #footerInner { padding: 30px 0; background: #fff; } #footerInner dl { margin: 0 auto; width: 1000px; } #footerInner dt { margin-bottom: 15px; text-align: center; } #footerInner dd { text-align: center; } #footerInner dd a { padding-left: 16px; font-size: 13px; color: #000; background: url(../images/arrow.png) left center no-repeat; text-decoration: none; } #footerInner dd a:hover { text-decoration: underline; } #footer .gNav { padding: 25px; } #footer .gNav li { display: inline; padding: 0 20px 0 15px; border-right: 1px solid #fff; font-size: 14px; } #footer .gNav li.last { border: none; } #footer .gNav li a { color: #fff; text-decoration: none; } #footer .gNav li a:hover { text-decoration: underline; } #footer #copyright { padding: 0 0 20px 0; font-size: 14px; text-align: center; } #pageTop a { display: inline-block; padding: 10px; position: fixed; bottom: 20px; right: 20px; font-size: 10px; font-weight: normal; text-decoration: none; background-color: rgba( 000, 000, 000, 0.55 ); color: #fff; background: #000; } #pageTop a:hover { background-color: #e60012; } } @media screen and (max-width: 640px) { #footer { clear: both; padding: 0; background: #000; color: #fff; text-align: center; } #footerInner { padding: 15px 0; background: #fff; } #footerInner dl { margin: 0 auto; } #footerInner dt { margin-bottom: 15px; text-align: center; } #footerInner dt img { width: 120px; } #footerInner dd { text-align: center; } #footerInner dd a { padding-left: 15px; font-size: 1.2rem; color: #000; background: url(../images/arrow.png) left center no-repeat; text-decoration: none; background-size: 14px auto; } #footerInner dd a:hover { text-decoration: underline; } #footer .gNav { display: none; } #footer .gNav li { position: relative; font-size: 1.3rem; text-align: left; border-bottom: 1px solid #272727; } #footer .gNav li a { display: block; padding: 15px 10px; color: #fff; text-decoration: none; } #footer .gNav li a:hover { text-decoration: none; } #footer .gNav li a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 15px; margin-top: -5px; } #footer #copyright { padding: 20px 0; font-size: 1.2rem; text-align: center; } #pageTop { position: relative; border-bottom: 1px solid #272727; text-align: center; background: #fff; } #pageTop a { display: block; padding: 15px 0 10px 0; color: #fff; text-decoration: none; font-size: 1.2rem; text-indent: -9999px; } #pageTop a::after { position: absolute; content: ''; margin-top: -3px top: 50%; left: 50%; width: 10px; height: 10px; border: 0px; border-top: solid 3px #272727; border-right: solid 3px #272727; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } /* 2階層目 ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #title2nd { display: table; margin: 0 auto 30px auto; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #333; } #title2nd h2 { display: table-cell; width: 330px; vertical-align: middle; text-align: center; background: #000; color: #fff; line-height: 1.4; border-right: 0; box-sizing: border-box; } #title2nd h2 .en { font-size: 28px; font-family: Georgia, "Times New Roman", Times, "serif"; letter-spacing: 2px; font-weight: normal; } #title2nd h2 .en .first-letter { color: #e60012; } #title2nd h2 .jp { font-size: 14px; } #title2nd p { display: table-cell; width: 670px; vertical-align: middle; } } @media screen and (max-width: 640px) { #title2nd { margin: 0 auto 20px auto; padding: 10px; border: 1px solid #333; background: url(../images/title_company.jpg) center center no-repeat; background-size: cover; } #title2nd h2 { color: #fff; line-height: 1.4; border-right: 0; box-sizing: border-box; } #title2nd h2 .en { font-size: 1.5rem; font-family: Georgia, "Times New Roman", Times, "serif"; letter-spacing: 2px; font-weight: normal; } #title2nd h2 .en .first-letter { color: #e60012; } #title2nd h2 .jp { font-size: 1.2rem; } #title2nd p { display: none; } } /* 会社概要 ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #profile { margin-bottom: 80px; width: 1000px; } #profile h2 { margin-bottom: 20px; padding: 15px; background: #272727; font-size: 16px; border-left: 8px solid #e60012; } #profileInner { position: relative; } #profileInner img { position: absolute; right: 0; top: 0; } #profile table { width: 100%; } #profile table th { padding: 15px; width: 18%; font-size: 14px; text-align: left; background: #272727; border-bottom: 3px solid #000; box-sizing: border-box; line-height: 2.0; vertical-align: middle; font-weight: normal;text-align: center; } #profile table td { padding: 15px; width: 82%; font-size: 14px; text-align: left; border-bottom: 3px solid #000; box-sizing: border-box; line-height: 2.0;} #profile table td span { font-size: 10px; } #profile table td a { color: #e60012; } #history { margin-bottom: 50px; width: 1000px; } #history h2 { margin-bottom: 20px; padding: 15px; background: #272727; font-size: 16px; border-left: 8px solid #e60012; } #history dl { display: table; width: 100%; } #history dt { display: table-cell; padding: 15px; width: 18%; border-bottom: 3px solid #000; font-size: 14px; line-height: 2.0; box-sizing: border-box;background: #272727; text-align: center; vertical-align: middle; } #history dd { display: table-cell; padding: 15px; width: 82%; border-bottom: 3px solid #000; font-size: 14px; line-height: 2.0; box-sizing: border-box; } } @media screen and (max-width: 640px) { #profile { margin: 0 10px 30px 10px; } #profile h2 { margin-bottom: 10px; padding: 10px; background: #272727; font-size: 1.4rem; border-left: 8px solid #e60012; } #profileInner { } #profileInner img { display: block; margin-bottom: 10px; width: 50%; } #profile table { width: 100%; } #profile table th { padding: 15px; width: 25%; font-size: 1.3rem; text-align: left; background: #272727; border-bottom: 3px solid #000; box-sizing: border-box; line-height: 1.8; vertical-align: middle; font-weight: normal;text-align: center; } #profile table td { padding: 15px; width: 75%; font-size: 1.3rem; text-align: left; border-bottom: 3px solid #000; box-sizing: border-box; line-height: 1.8; } #profile table td span { font-size: 10px; } #profile table td a { color: #e60012; } #history { margin: 0 10px 30px 10px; } #history h2 { margin-bottom: 10px; padding: 10px; background: #272727; font-size: 1.4rem; border-left: 8px solid #e60012; } #history dl { display: table; width: 100%; } #history dt { display: table-cell; padding: 10px; width: 25%; border-bottom: 3px solid #000; font-size: 1.3rem; line-height: 1.8; box-sizing: border-box;background: #272727; text-align: center; vertical-align: middle; } #history dd { display: table-cell; padding: 10px; width: 75%; border-bottom: 3px solid #000; font-size: 1.3rem; line-height: 1.8; box-sizing: border-box; } } /* 店舗一覧 ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #shop #retail { /* display: none; */} #retail h2 { margin-bottom: 15px; padding: 15px 10px; background: #fff; color: #000; font-size: 1.6rem; /*border: 1px solid #e50012;*/ box-sizing: border-box; } #retail h2 span { padding-left: 15px; font-size: 1.2rem; } #retail h2 span a { color: #e50012; text-decoration: none; } #retail h2 span a:hover { color: #e50012; text-decoration: underline; } .groupe { margin-bottom: 55px; border-bottom: 2px solid #272727; } .groupe.last { border: none; } .groupe .brandTitle { display: table; margin-bottom: 20px; } .groupe .brandTitle dt { display: table-cell; width: 350px; vertical-align: middle; } .groupe .brandTitle dd { display: table-cell; width: 650px; vertical-align: middle; font-size: 13px; line-height: 1.6; } .groupe .brandTitle dd span { font-size: 11px; } ul.shopList { display: flex; flex-wrap: wrap; width: 1000px; } .shopList li { width: 470px; } .shopList li:nth-child(odd) { margin-right: 30px; } .shopList li:nth-child(even) { margin-left: 30px; } .shopList li .shopListInner { position: relative; margin-bottom: 50px; } .shopList li .shopListInner ul { margin-left: 15px; padding-top: 10px; } .shopList li .shopListInner ul:after { content: ""; clear: both; display: block; } .shopList li .shopListInner ul li { float: left; margin: 0!important; width: 48%; } .shopList li .shopListInner ul li:first-child { margin: 0 2% 2% 0!important; } .shopList li .shopListInner .map {/* position: absolute; right: 0; bottom: 0; x display: inline;*/ font-size: 13px; } .shopList li .shopListInner .map a { display: block; padding: 10px 10px; background: #e60012; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .shopList li .shopListInner .map a:hover { background: #272727; } .shopList li .shopListInner .map a span { padding-left: 15px; background: url(../images/icon_pin.png) left center no-repeat;} .shopList li .shopListInner p.map { margin-right: 10px; width: 33%; background: #f0f } .shopList li .shopListInner .tabelog { /*position: absolute; right: 0; bottom: 0; display: inline;*/ font-size: 13px; } .shopList li .shopListInner .tabelog a { display: block; padding: 10px 10px; background: #e60012; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .shopList li .shopListInner .tabelog a:hover { background: #272727; } .shopList li .shopListInner .tabelog a span { padding-left: 20px; background: url(../images/icon_link.png) left center no-repeat;} .shopList li .shopListInner .mobile { clear: both; /* position: absolute; right: 0; bottom: 0; display: inline;*/ font-size: 13px; } .shopList li .shopListInner .mobile a { display: block; padding: 10px 10px; background: #65bf97; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .shopList li .shopListInner .mobile a:hover { background: #272727; } .shopList li .shopListInner .mobile a span { padding-left: 15px; background: url(../images/icon_mobile.png) left center no-repeat;} .shopList li .shopListInner .caution { margin-top: 10px; padding-right: 130px; color: #e60012; font-size: 12px; line-height: 1.6; } .shopList li h3 { margin-bottom: 10px; padding: 5px 0 5px 10px; border-left: 5px solid #e60012; font-size: 16px; line-height: 1.6; } .shopList li h3 .new { padding-left: 0px; color: #e60012; } .shopList li p.caution { margin-left: 15px; padding-left: 0!important; text-align: left;} .shopList li dl { display: table; margin-bottom: 10px; padding-left: 15px; width: 470px; box-sizing: border-box; } .shopList li dt { display: table-cell; width: 80px; font-size: 14px; line-height: 1.6 } .shopList li dd { display: table-cell; width: 390px; font-size: 14px; line-height: 1.6; text-align: left; } .shopList li dl.border { padding-top: 10px; border-top: 1px dashed #272727; } } @media screen and (max-width: 640px) { #shop #retail { /*display: none; */} #retail h2 { margin: 0 10px 15px 10px; padding: 15px 10px; background: #fff; color: #000; font-size: 1.4rem; } #retail h2 span { display: block; padding-top: 5px; font-size: 1.2rem; } #retail h2 span a { color: #e50012; text-decoration: none; } #retail h2 span a:hover { color: #e50012; text-decoration: underline; } .groupe { margin: 0 0 30px 0; } .groupe.last { border: none; } .groupe .brandTitle { margin: 0 10px 20px 10px; } .groupe .brandTitle dt { } .groupe .brandTitle dt img { width: 100%; } .groupe .brandTitle dd { padding: 10px 0 0 0; font-size: 1.3rem; line-height: 1.6; } .groupe .brandTitle dd span { font-size: 1.1rem; } .shopList { margin: 0; } .shopList li { padding: 0 10px 30px 10px; } .shopList li .shopListInner { margin-bottom: 50px; } .shopList li .shopListInner ul { margin-left: 15px; padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; } .shopList li .shopListInner ul:after { content: ""; clear: both; display: block; } .shopList li .shopListInner ul li:first-child { float: left; padding: 0!important; width: 48%; } .shopList li .shopListInner ul li:nth-child(2) { float: right;padding: 0!important; width: 48%; } .shopList li .shopListInner ul li.mobile { clear: both; margin-top: 10px; padding: 0!important; width: 100%; } .shopList li .shopListInner .map { font-size: 13px; } .shopList li .shopListInner .map a { display: block; padding: 10px; background: #e60012; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .shopList li .shopListInner .map a:hover { } .shopList li .shopListInner .map a span { padding-left: 15px; background: url(../images/icon_pin.png) left center no-repeat;} .shopList li .shopListInner .tabelog { /*position: absolute; right: 0; bottom: 0;*/ display: inline; font-size: 13px; } .shopList li .shopListInner .tabelog a { display: block; padding: 10px 15px; background: #e60012; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .shopList li .shopListInner .tabelog a:hover { background: #272727; } .shopList li .shopListInner .tabelog a span { padding-left: 20px; background: url(../images/icon_link.png) left center no-repeat;} .shopList li .shopListInner .mobile { /*position: absolute; right: 0; bottom: 0;*/ display: inline; font-size: 13px; } .shopList li .shopListInner .mobile a { display: block; padding: 10px 15px; background: #65bf97; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .shopList li .shopListInner .mobile a:hover { background: #272727; } .shopList li .shopListInner .mobile a span { padding-left: 15px; background: url("../images/icon_mobile.png") left center no-repeat;} .shopList li h3 { margin-bottom: 10px; padding: 5px 0 5px 10px; border-left: 5px solid #e60012; font-size: 1.5rem; line-height: 1.6; } .shopList li h3 .new { display: block; clear: both; color: #e60012; } .shopList li dl { display: table; margin-bottom: 10px; padding-left: 15px; width: 100%; box-sizing: border-box; } .shopList li dt { display: table-cell; width: 25%; font-size: 1.3rem; line-height: 1.6; } .shopList li dd { display: table-cell; width: 75%; font-size: 1.3rem; line-height: 1.6; } .shopList li dd a { color: #e60012;} .shopList li dl.border { padding-top: 10px; border-top: 1px dashed #272727; } } /* お問い合わせ ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #tab { margin-bottom: 20px; } #tab li { position: relative; float: left; background: #272727; border-left: 1px solid #000; border-right: 1px solid #000; text-align: center; z-index: 0; width: 25%;} #tab li a { display: block; padding: 15px; color: #fff; text-decoration: none; font-size: 1.4rem; -webkit-transition: all .3s; transition: all .3s; background: #272727; line-height: 1.5; vertical-align: middle; } #tab li.active:after { content: ""; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 0 10px; } #tab li a:hover { background: #e50012; } #tab li.active a { background: #e50012; } #tab li.active:after { border-color: #e50012 transparent transparent transparent; } #tab #KeyContact01 a { padding-top: 26px; } #list div { margin-bottom: 50px; } #contactDetail { margin-bottom: 50px; padding: 50px; border: 1px solid #272727; text-align: center; } #contactDetail h3 { margin-bottom: 25px; padding-bottom: 25px; font-size: 26px; border-bottom: 1px solid #272727; line-height: 1.4; } #contactDetail h4 { margin: 30px 100px 20px 100px; padding: 10px; font-size: 20px; background: #272727; font-weight: normal; } #contactDetail h5 { margin: 0 100px 15px 100px; font-size: 16px; text-align: left; font-weight: normal; padding: 10px; border-left: 8px solid #e60012; } #contactDetail p { font-size: 16px; line-height: 1.8; } #contactDetail table { margin: 0 100px; width: 700px; } #contactDetail table.first { margin-bottom: 50px; } #contactDetail table th { padding: 20px 15px; width: 20%; font-size: 14px; background: #272727; border-bottom: 2px solid #000; text-align: center; font-weight: normal; box-sizing: border-box; } #contactDetail table td { padding: 20px 15px; width: 80%; font-size: 14px; border-bottom: 2px solid #272727; text-align: left; box-sizing: border-box;} #contactDetail table th.borderBtm { border-bottom: 2px solid #272727; } #contactDetail table th.borderTop { border-top: 2px solid #272727; } #contactDetail table td.borderTop { border-top: 2px solid #272727; } #contactDetail .tl { margin: 0 100px; text-align: left; } #contactDetail .mb50 { margin-bottom: 50px; } #contactDetail .caution { margin: 10px 100px 50px 100px; text-align: left; font-size: 12px; } #contactDetail .btn { margin-top: 50px; } #contactDetail .btn a { position: relative; display: inline-block; padding: 20px 50px; background: #e60012; font-weight: bold; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #contactDetail .btn a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 20px; margin-top: -5px; } } @media screen and (max-width: 640px) { #tab { margin-bottom: 20px; } #tab li { position: relative; float: left; background: #272727; border-left: 1px solid #000; border-right: 1px solid #000; text-align: center; z-index: 0; width: 25%;} #tab li a { display: block; padding: 5px; color: #fff; text-decoration: none; font-size: 1.2rem; -webkit-transition: all .3s; transition: all .3s; background: #272727; line-height: 1.5; vertical-align: middle; } #tab li.active:after { content: ""; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 0 10px; } #tab li a:hover { background: #e50012; } #tab li.active a { background: #e50012; } #tab li.active:after { border-color: #e50012 transparent transparent transparent; } #contactDetail { margin-bottom: 30px; padding: 10px; text-align: center; } #contactDetail h3 { margin-bottom: 25px; padding-bottom: 25px; font-size: 1.6rem; border-bottom: 1px solid #272727; line-height: 1.4; } #contactDetail h4 { margin: 30px 0px 20px 0px; padding: 10px; font-size: 1.4rem; background: #272727; font-weight: normal; } #contactDetail h5 { margin: 0 0 15px 0; font-size: 1.3rem; text-align: left; font-weight: normal; padding: 10px; border-left: 8px solid #e60012; } #contactDetail p { font-size: 1.3rem; line-height: 1.6; } #contactDetail p.introduction { padding: 0 10px; text-align: left; } #contactDetail table { margin: 0; width: 100%; } #contactDetail table.first { margin-bottom: 50px; } #contactDetail table th { padding: 20px 15px; width: 25%; font-size: 1.3rem; background: #272727; border-bottom: 2px solid #000; text-align: center; font-weight: normal; box-sizing: border-box; line-height: 1.6; } #contactDetail table td { padding: 20px 15px; width: 75%; font-size: 1.3rem; border-bottom: 2px solid #272727; text-align: left; box-sizing: border-box; line-height: 1.6; } #contactDetail table th.borderBtm { border-bottom: 2px solid #272727; } #contactDetail table th.borderTop { border-top: 2px solid #272727; } #contactDetail table td.borderTop { border-top: 2px solid #272727; } #contactDetail .fcTable th { width: 50%!important; } #contactDetail .fcTable td { width: 50%!important; } #contactDetail .tl { margin: 0; text-align: left; } #contactDetail .mb50 { margin-bottom: 50px; } #contactDetail .caution { margin: 10px 0 50px 0; text-align: left; font-size: 12px; } #contactDetail .btn { margin: 20px 10px 0 10px; } #contactDetail .btn a { position: relative; display: inline-block; padding: 20px 0; width: 100%; background: #e60012; font-weight: bold; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #contactDetail .btn a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 20px; margin-top: -5px; } } /* ブランドページ共通 ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #contents .title { margin-bottom: 20px; padding: 10px; font-size: 2.0rem; } #contents .title span { padding-left: 10px; font-size: 1.4rem; } .menuImage { margin: 20px 0 30px 0; } .menuList { margin-bottom: 80px; } .caution { font-size: 1.2rem; line-height: 1.6; text-align: center; } .caution2 { margin-top: 15px; font-size: 1.2rem; line-height: 1.6; text-align: center; } .btnMenu { margin: 30px auto 0 auto; width: 500px; text-align: center; } .btnMenu a { position: relative; display: block; padding: 20px 20px; width: 500px; background: #e60012; font-weight: bold; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 18px; box-sizing: border-box; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btnMenu a:hover { background: #000; } .btnMenu a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 20px; margin-top: -5px; } #brandMain { margin: 0 auto 30px auto; width: 1000px; } #brandMain .image { margin-bottom: 30px; } #brandMain .intro { margin-bottom: 30px; text-align: center; font-size: 1.8rem; line-height: 1.8; } #brandMain .intro span { font-size: 1.2rem; } /* 魚河岸まぐろ市場 */ #brandUogashi .title { background: #e60012; color: #fff; } /* どんぶりまぐろ＆エキナカ */ #brandMaguro .title { background: #c70917; color: #fff; } #brandMaguro .shopList li .shopListInner .map a { color: #fff; background: #c70917; } #brandMaguro .shopList li .shopListInner .tabelog a { color: #fff; background: #c70917; } #brandMaguro .shopList li .shopListInner .map a:hover, #brandMaguro .shopList li .shopListInner .tabelog a:hover { background: #000;} #brandMaguro .shopList li h3 { border-left: 5px solid #c70917; } #brandMaguro .btnMenu a { background: #c70917; } #brandMaguro .btnMenu a:hover { background: #000; } /* いなせ庵 */ #brandInasean .title { background: #000; color: #fff; } #brandInasean .shopList li .shopListInner .map a { color: #fff; background: #000; } #brandInasean .shopList li .shopListInner .tabelog a { color: #fff; background: #000; } #brandInasean .shopList li .shopListInner .map a:hover, #brandInasean .shopList li .shopListInner .tabelog a:hover{ background: #555; } #brandInasean .shopList li h3 { border-left: 5px solid #000; } #brandInasean .btnMenu a { background: #000; } #brandInasean .btnMenu a:hover { background: #555; } /* テキサスキングステーキ */ #brandTks .title { background: #e9550f; color: #fff; } #brandTks .shopList li .shopListInner .map a { color: #fff; background: #e9550f; } #brandTks .shopList li .shopListInner .map a:hover { background: #f5990a; } #brandTks .shopList li h3 { border-left: 5px solid #e9550f; } #brandTks .btnMenu a { background: #e9550f; } #brandTks .btnMenu a:hover { background: #f5990a; } #brandTks .intro strong { color: #f5990a; font-weight: bold; } /* デリッシュウフ */ #brandDelish .title { background: #f5ca00; color: #fff; } #brandDelish .shopList li .shopListInner .map { } #brandDelish .shopList li .shopListInner .map a { color: #fff; background: #f5ca00; } #brandDelish .shopList li .shopListInner .map a:hover { background: #000; } #brandDelish .shopList li h3 { border-left: 5px solid #f5ca00; } #brandDelish .btnMenu a { background: #f5ca00; } #brandDelish .btnMenu a:hover { background: #000; } #brandDelish #retail h2 { margin-bottom: 15px; padding: 15px 10px; background: #000; color: #fff; font-size: 1.6rem; /*border: 1px solid #e50012;*/ box-sizing: border-box; } #brandDelish #retail h2 span { padding-left: 15px; font-size: 1.2rem; } #brandDelish #retail h2 span a { color: #fff; text-decoration: none; } #brandDelish #retail h2 span a:hover { color: #fff; text-decoration: underline; } } @media screen and (max-width: 640px) { #contents .title { margin-bottom: 15px; padding: 15px 10px; font-size: 1.6rem; } #contents .title span { padding-left: 5px; font-size: 1.0rem; } .menuImage { margin: 15px 10px 15px 10px; } .menuList { margin-bottom: 40px; } .caution { margin: 0 10px; font-size: 1.1rem; line-height: 1.5; text-align: center; } .logoSP { padding: 20px 0 0 0; text-align: center; } .logoSP img { width: 170px; } .btnMenu { margin: 30px 10px 0 10px; text-align: center; line-height: 1.5; } .btnMenu a { position: relative; display: block; padding: 15px 30px; background: #e60012; font-weight: bold; color: #fff; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 1.5rem; box-sizing: border-box; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btnMenu a:hover { background: #000; } .btnMenu a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 20px; margin-top: -5px; } #brandMain { margin: 0 0 30px 0; } #brandMain .image { } #brandMain .intro { margin: 15px 10px 30px 10px; font-size: 1.3rem; line-height: 1.6; } #brandMain .intro span { font-size: 1.2rem; } /* 魚河岸まぐろ市場 */ #brandUogashi .title { background: #e60012; color: #fff; } /* どんぶりまぐろ＆エキナカ */ #brandMaguro .title { background: #c70917; color: #fff; } #brandMaguro .shopList li .shopListInner .map a { color: #fff; background: #c70917; } #brandMaguro .shopList li .shopListInner .tabelog a { color: #fff; background: #c70917; } #brandMaguro .shopList li .shopListInner .map a:hover, #brandMaguro .shopList li .shopListInner .tabelog a:hover { background: #000;} #brandMaguro .shopList li h3 { border-left: 5px solid #c70917; } #brandMaguro .btnMenu a { background: #c70917; } #brandMaguro .btnMenu a:hover { background: #000; } /* いなせ庵 */ #brandInasean .title { background: #000; color: #fff; } #brandInasean .shopList li .shopListInner .map a { color: #fff; background: #000; } #brandInasean .shopList li .shopListInner .tabelog a { color: #fff; background: #000; } #brandInasean .shopList li .shopListInner .map a:hover, #brandInasean .shopList li .shopListInner .tabelog a:hover{ background: #555; } #brandInasean .shopList li h3 { border-left: 5px solid #000; } #brandInasean .btnMenu a { background: #000; } #brandInasean .btnMenu a:hover { background: #555; } /* テキサスキングステーキ */ #brandTks .title { background: #e9550f; color: #fff; } #brandTks .shopList li .shopListInner .map a { color: #fff; background: #e9550f; } #brandTks .shopList li .shopListInner .map a:hover { background: #f5990a; } #brandTks .shopList li h3 { border-left: 5px solid #e9550f; } #brandTks .btnMenu a { background: #e9550f; } #brandTks .btnMenu a:hover { background: #f5990a; } #brandTks .intro strong { color: #f5990a; font-weight: bold; } #brandTks .logoSP { padding-bottom: 20px; background: #e9550f; } /* デリッシュウフ */ #brandDelish .title { background: #f5ca00; color: #fff; } #brandDelish .shopList li .shopListInner .map { } #brandDelish .shopList li .shopListInner .map a { color: #fff; background: #f5ca00; } #brandDelish .shopList li .shopListInner .map a:hover { background: #000; } #brandDelish .shopList li h3 { border-left: 5px solid #f5ca00; } #brandDelish .btnMenu a { background: #f5ca00; } #brandDelish .btnMenu a:hover { background: #000; } #brandDelish #retail h2 { margin: 0 10px 15px 10px; padding: 15px 10px; background: #000; color: #fff; font-size: 1.4rem; /*border: 1px solid #e50012;*/ box-sizing: border-box; } #brandDelish #retail h2 span { display: block; padding-top: 5px; font-size: 1.2rem; } #brandDelish #retail h2 span a { color: #fff; text-decoration: none; } #brandDelish #retail h2 span a:hover { color: #fff; text-decoration: underline; } } /* ブランドページ用Nav ------------------------------------------------------------------------*/ @media screen and (min-width: 641px) { #navBrand ul { margin: 0 auto; padding: 50px 0 15px 0; width: 1000px; text-align: center;} #navBrand ul li { display: inline; padding: 0 15px 0 10px; border-right: 1px solid #000; font-size: 1.3rem; } #navBrand ul li.last { border: none!important; } #navBrand ul li a { color: #000; text-decoration: none; } #navBrand ul li a span { padding-right: 3px; font-size: 1.0rem; } #navBrand ul li a:hover { text-decoration: underline; } #brandTks #navBrand ul li { border-right: 1px solid #fff; } #brandTks #navBrand ul li a { color: #fff; text-decoration: none; } #brandTks #navBrand ul li a:hover { color: #fff; text-decoration: underline } } @media screen and (max-width: 640px) { #navBrand ul { width: 100%; border-top: 1px solid #272727; } #navBrand ul li { position: relative; font-size: 1.3rem; text-align: left; border-bottom: 1px solid #272727;} #navBrand ul li a { display: block; padding: 15px 10px; color: #fff; text-decoration: none; } #navBrand ul li a span { padding-right: 3px; font-size: 1.0rem; } #navBrand ul li a:hover { text-decoration: none; } #navBrand ul li a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 15px; margin-top: -5px; } body.white #navBrand ul { border-top: 1px solid #000; } body.white #navBrand ul li a { color: #000; } body.white #navBrand ul li a::after { border-color: #000; } } .covidMessage { padding: 15px; margin: 15px; text-align: center; background: #fff; border: 2px solid #f00; line-height: 1.6; } .covidMessage dt.title { margin-bottom: 10px; padding: 0 0 12px 0; font-size: 16px; font-weight: bold; color: #f00; border-bottom: 1px solid #f00; } .covidMessage dt.titleDanoi { margin-bottom: 10px; padding: 0 0 12px 0; font-size: 16px!important; font-weight: bold; color: #f00; border-bottom: 1px solid #f00; } .covidMessage dd.term { margin-bottom: 10px; font-size: 16px; color: #f00; font-weight: bold; } .covidMessage dd.link { font-size: 14px } .covidMessage dd.link a { color: #000; }