@charset "utf-8";
/*
## font
~~~
株式会社エルテックス eltexDC cssガイド
~~~
*/
body {
/*font: 16px/1.4 Sans-Serif;*/
color: #171d1f;
}
@media screen and (max-width: 640px) {
body {
font-size: 14px;
}
}
/*
## h1
~~~
見出し1
見出し1
~~~
*/
.level_h1 {
border-color: #f4a35d;
}
.level_h1 span {
border-color: #ec8125;
}
/*
## h2
~~~
見出し2
~~~
*/
.level_h2 {font-size:1.6em;}
/*
## h3
~~~
見出し3
~~~
*/
.level_h3 {
position:relative;
font-size:1.4em;
border-left: 5px solid #ff6597;
}
.level_h3_2 {
position:relative;
font-size:1.4em;
}
/*
## アンカー
~~~
テキストリンク
テキストリンク
~~~
*/
a {
outline: none;
}
a:link {
color: #171d1f;
text-decoration: none;
}
a:visited {
color: #171d1f;
}
a:hover, a:active, a:focus {
color: #9b8453;
text-decoration: underline;
}
a:hover img {
transition: .7s;
opacity: 0.75;
}
@media screen and (max-width: 640px) {
a:hover img {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
a,a:hover {
transition: 0s;
text-decoration: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
}
#buttonGroup a:hover, a:active, a:focus {
text-decoration: none;
opacity:0.8;
}
@supports (-ms-ime-align: auto) {
/* Edge hack */
#buttonGroup a:hover, a:active, a:focus {
opacity:1;
}
}
/*
## ボタン
~~~
~~~
*/
a.btn_1, input.btn_1[type="button"], input.btn_1[type="submit"], input.btn_1[type="reset"], button.btn_1[type="button"], button.btn_1[type="submit"], button.btn_1[type="reset"] {
background: #f69c4f;
color: #fff;
border-style: solid;
border-width: 1px;
border-color: #f69c4f;
font-size: 1.2em;
font-weight: normal;
min-width: 180px;
min-height: 36px;
margin-left: 10px;
margin-right: 10px;
line-height: 36px;
cursor: pointer;
border-radius: 6px;
padding: 4px 16px;
display: inline-block;
text-decoration: none;
text-align:center;
}
input[type="image"]:hover {
opacity: 0.75;
}
/*
## 登録、確定ボタン
~~~
~~~
*/
#saveButton, #completeButton, #orderLink2, #selfOrderLink, #giftOrderLink {
background-color: #cc0033;
border-color: #cc0033;
}
/*
## 基本レイアウト
*/
#wrap {
width:100%;
margin:0;
position:relative;
text-align:left;
}
.contents {
width:980px;
margin:0 auto;
position:relative;
background-color:#fff;
}
.contents section {
padding:0;
margin:0;
}
.contents .information{
margin: 0 0 15px 5px;
}
.topGroupName {
width:710px;
float:left;
border-top-left-radius:6px;
-moz-border-top-left-radius:6px;
-webkit-border-top-left-radius:6px;
border-top-right-radius:6px;
-moz-border-top-right-radius:6px;
-webkit-border-top-right-radius:6px;
}
.layoutGroup {
margin-bottom: 10px;
}
@media screen and (min-width: 641px) and (max-width: 1000px) { /* スマホからPCまでの間の指定 */
body {
width: 1000px;
}
}
@media (max-width: 751px) and (orientation: landscape) { /* common.cssの上書き */
#wrap {
max-width: none;
}
}
@media screen and (max-width: 640px) {
.contents {
width: 100%;
}
.topGroupName {
width: 100%;
margin: 0;
padding: 0 10px 0 10px;
float: none;
}
.topGroupName label {
width:100%;
text-align:left;
}
}
/*
## 1カラム用レイアウト
*/
.oneColumn .topGroupName {
width: 100%;
float: none;
}
/*
## 2カラム用レイアウト
*/
.twoColumns form {
float: left;
}
/*
## 2カラム用レイアウト topGroupName
*/
.twoColumns .topGroupName {
width: 710px;
}
/*
## レスポンシブ用レイアウト
*/
@media screen and (max-width: 640px) {
.oneColumn .topGroupName, .twoColumns .topGroupName {
width: 100%;
}
.twoColumns form {
float: none;
}
}
/*
## レスポンシブ
~~~
PC非表示
SP非表示
~~~
*/
.no_pc{
display:none;
}
.no_sp{
display:block;
}
@media screen and (max-width: 640px) {
.no_sp{
display: none;
}
.no_pc{
display:inline-block;
}
}
/*
## テキスト
*/
em {
color: #171d1f;
}
.arrowLink:before {
content: "\f105";
font-family: FontAwesome;
color: #c5b89d;
font-size: 1.2em;
padding-right: 10px;
}
/*
## フォーム
*/
input:placeholder-shown {
opacity: 0.8;
}
input::-webkit-input-placeholder {
opacity: 0.8;
}
input::-moz-placeholder {
opacity: 0.8;
}
input:-ms-input-placeholder {
opacity: 0.8;
}
/*
## flexslider、bxSlider上書き
*/
html body #wrap .flex-control-paging li a {
width: 10px;
height: 10px;
border-radius: 5px;
background: #bcc2c5;
}
html body #wrap .flex-control-paging li a.flex-active {
background: #171d1f;
}
.flex-control-nav li {
margin: 0 16px;
}
@media screen and (max-width: 640px) {
.flexslider {
margin: 0 0 20px;
}
/* スライド枚数を表す丸 */
.flex-control-nav {
bottom: -30px;
}
.flex-control-nav li {
margin: 0 10px;
}
html body #wrap .flex-control-paging li a {
width: 6px;
height: 6px;
border-radius: 3px;
}
/* 次へ・戻るボタン */
.flex-direction-nav a {
display: block;
top: 37%;
width: 30px;
height: 30px;
margin: 0;
background-size: 247px auto;
background-color: #ffffff;
background-image: none;
border: 1px solid #bcc2c5;
border-radius: 15px;
text-indent: 0;
}
.flex-direction-nav a.flex-prev {
left: -10px;
}
.flex-direction-nav a.flex-prev:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%,-50%);
content: "\f104";
font-family: FontAwesome;
color: #c5b89d;
font-size: 1em;
}
.flex-direction-nav a.flex-next {
right: -10px;
}
.flex-direction-nav a.flex-next:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
content: "\f105";
font-family: FontAwesome;
color: #c5b89d;
font-size: 1em;
}
}
html body .bx-wrapper {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
background: transparent;
}
html body .bx-wrapper .bx-pager.bx-default-pager a {
background: #bcc2c5;
margin: 0 16px;
}
html body .bx-wrapper .bx-pager.bx-default-pager a:hover,
html body .bx-wrapper .bx-pager.bx-default-pager a.active,
html body .bx-wrapper .bx-pager.bx-default-pager a:focus {
background: #171d1f;
}
html body .bx-wrapper .bx-controls-direction a {
display: block;
top: 38%;
width: 40px;
height: 40px;
margin: 0;
background-size: 247px auto;
background-color: #ffffff;
background-image: none;
border: 1px solid #bcc2c5;
border-radius: 20px;
text-indent: 0;
}
html body .bx-wrapper .bx-controls-direction a:hover,
html body .bx-wrapper .bx-controls-direction a:active,
html body .bx-wrapper .bx-controls-direction a:focus {
text-decoration: none;
}
html body .bx-wrapper .bx-controls-direction a.bx-prev {
left: -15px;
}
html body .bx-wrapper .bx-controls-direction a.bx-prev:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%,-50%);
content: "\f104";
font-family: FontAwesome;
color: #c5b89d;
font-size: 2em;
}
html body .bx-wrapper .bx-controls-direction a.bx-next {
right: -15px;
}
html body .bx-wrapper .bx-controls-direction a.bx-next:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
content: "\f105";
font-family: FontAwesome;
color: #c5b89d;
font-size: 2em;
}
html body .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
bottom: -50px;
}
@media screen and (min-width: 641px) and (max-width: 979px) {
html body .bx-wrapper .bx-controls-direction a.bx-prev {
left: 5px;
}
html body .bx-wrapper .bx-controls-direction a.bx-next {
right: 5px;
}
}
@media screen and (max-width: 640px) {
/* スライド枚数を表す丸 */
html body .bx-wrapper .bx-pager {
bottom: -20px;
}
html body .bx-wrapper .bx-pager.bx-default-pager a {
width: 6px;
height: 6px;
border-radius: 3px;
margin: 0 10px;
}
/* 次へ・戻るボタン */
html body .bx-wrapper .bx-controls-direction a {
top: 43%;
width: 30px;
height: 30px;
border-radius: 15px;
}
html body .bx-wrapper .bx-controls-direction a.bx-prev:after,
html body .bx-wrapper .bx-controls-direction a.bx-next:after {
font-size: 1em;
}
html body .bx-wrapper .bx-controls-direction a.bx-prev {
left: -10px;
}
html body .bx-wrapper .bx-controls-direction a.bx-next {
right: -10px;
}
}
/*
## パンくず
~~~
~~~
*/
.panNav{
background-color: transparent;
padding: 10px 0;
margin-bottom: 20px;
}
.panNav ul {
font-size:0.8em;
}
.panNav ul li {
display:inline-block;
* display:inline;
* zoom:1;
}
.panNav ul li + li:before {
content:">";
padding:0 5px;
}
@media screen and (max-width: 640px){
.panNav {
padding: 10px;
margin-bottom: 0;
}
.panNav ul li {
display: inline;
}
}
/*
## ヘッダー
*/
.headerWrap {
background-color: #f0ede7;
}
/* 最上部テキスト&リンク */
.headerS {
padding: 5px 0;
}
.headerS h1 {
float: right;
color: #778185;
line-height: 1.4;
padding-top: 4px;
}
.headerS nav {
float: left;
}
.headerS nav ul li a {
color: #171d1f;
background: url(../images/header/ico_arrow.png) no-repeat center left;
margin-left: 20px;
padding-top: 1px;
padding-left: 18px;
font-size: 14px;
}
.headerS nav ul li a:hover {
color: #9b8453;
}
.headerS nav ul li:nth-child(1) a {
margin-left: 0;
}
/* ヘッダーメイン部分 */
.headerMain {
display: flex;
flex-wrap: wrap;
padding: 0;
position: relative;
margin-bottom: 0;
z-index: 200;
}
.headerMain .userStatus {
width: 100%;
text-align: right;
margin: 10px 0
}
.headerMain .userStatus p {
display: inline-block;
font-size: 13px;
}
.headerMain .userStatus p:nth-child(2) {
margin-left: 20px;
}
.headerMain .userStatus p span {
font-size: 16px;
font-weight: bold;
padding: 0 5px;
}
.headerMain .userStatus p.userPoint {
display: none;
}
.headerMain .userStatus p.userPoint.active {
display: inline-block;
}
.headerMain .logo {
float: none;
flex-grow: 2;
position: relative;
top: -15px;
width: auto;
margin: 0;
}
.headerMain .logo a {
width: 240px;
background: url(../images/header/img_logo_01.png) no-repeat 0 0;
background-size: contain;
height: 45px;
}
.headerMain .headerBanner {
position: relative;
top: -5px;
left: -23px;
float: none;
width: 165px;
font-size: 13px;
line-height: 1.7;
}
.headerMain .headerSubMenu {
float: none;
width: auto;
}
#wrap header .headerMain .headerSubMenu ul li {
width: auto;
height: 34px;
margin-left: 10px;
}
#wrap header .headerMain .headerSubMenu ul li.no_pc {
display: none;
}
#wrap header .headerMain .headerSubMenu ul li a {
background: #778185;
border-radius: 3px;
border: none;
height: 100%;
padding: 0 26px;
color: #ffffff;
font-size: 13px;
line-height: 2.8;
}
#wrap header .headerMain .headerSubMenu ul li.headerLogin a {
width: 100px;
padding: 0;
}
#wrap header .headerMain .headerSubMenu ul li.headerLogin.active a {
background-color: #bcc2c5;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser a {
width: 100px;
padding: 0;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser.active > a {
background-color: #cc0033;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser {
position: relative;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser > ul li a:hover {
color: #9b8453;
text-decoration: underline;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser > ul {
visibility: hidden;
width: 0;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser.active > ul {
position: absolute;
top: 34px;
left: 0;
padding-top: 10px;
z-index: 10;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser.active:hover > ul {
visibility: visible;
width: auto;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser.active > ul li {
height: auto;
margin-left: 0;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser.active > ul li a {
background-color: transparent;
border-radius: 0;
padding: 5px 0 5px 10px;
background-color: #eeeeee;
font-size: 13px;
line-height: 1.3;
color: #171d1f;
text-align: left;
opacity: 1;
height: 0;
transition: .2s;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser.active:hover > ul li a {
height: 26px;
}
#wrap header .headerMain .headerSubMenu ul li.headerUser.active > ul li a:hover {
color: #9b8453;
}
#wrap header .headerMain .headerSubMenu ul li.headerCart a {
min-width: 210px;
background-image: url(../images/header/ico_cart_02.png);
background-repeat: no-repeat;
background-position: 7px center;
background-size: 20px;
background-color: #9b8453;
text-align: right;
line-height: 2.2;
padding-right: 10px;
}
.headerMain .headerSubMenu ul li.headerCart .num {
top: 6px;
left: 31px;
background-color: #ffffff;
border-radius: 3px;
font-size: 13px;
line-height: 1;
width: 23px;
height: 22px;
padding: 3px 0;
box-sizing: border-box;
text-align: center;
color: #778185;
}
.headerMain .headerSubMenu ul li.headerCart .num.active {
color: #171d1f;
}
.headerMain .headerSubMenu ul li span.price {
font-size: 16px;
font-weight: bold;
padding: 0 2px;
}
.headerMain .headerSubMenu ul li span.taxIn {
font-size: 10px;
}
@media screen and (max-width: 640px) {
.headerS {
padding: 0;
}
.headerS h1 {
float: left;
font-size: 10px;
line-height: 1.4;
padding-top: 0;
}
.headerMain .logo {
display: block;
width: 100%;
top: 0;
height: 47px;
}
.headerMain p.logo a {
width: 126px;
background: url(../images/header/img_logo_01.png) no-repeat 0 0;
background-size: contain;
margin: 12px 0 0 3%;
padding: 0;
}
.headerMain .headerSPMenu {
position: absolute;
top: 0; right: 0;
width: 200px;
height: 46px;
z-index: 1;
}
.headerMain .headerSPMenu ul {
position: relative;
}
.headerMain .headerSPMenu ul li {
position: absolute;
min-width: 32px;
height: 30px;
}
.headerMain .headerSPMenu ul li.tel {
top: 10px;
right: 36%;
}
.headerMain .headerSPMenu ul li.menu {
top: 10px;
right: 7%;
}
.headerMain .headerSPMenu ul li a {
display: block;
width: 100%;
font-size: 10px;
font-weight: bold;
padding: 19px 0 0px;
text-align: center;
color: #171d1f;
}
.headerMain .headerSPMenu ul li a:hover {
text-decoration: none;
}
#wrap header .headerMain .headerSubMenu ul li.no_pc {
display: inline-block;
}
.headerMain .headerSPMenu ul li.tel a {
background: url(../images/header/ico_tel_01.png) no-repeat center 0/auto 18px;
}
.headerMain .headerSPMenu ul li.menu a {
background: url(../images/header/img_men_01.png) no-repeat center 0/auto 16px;
}
.headerMain .headerSPMenu ul li.menu.active a {
background: url(../images/header/img_men_02.png) no-repeat center 0/auto 18px;
}
.headerMain .headerSPMenu ul li.menu a,
.headerMain .headerSPMenu ul li.menu a:hover {
transition: none;
}
.headerMain .userStatus {
display: flex;
justify-content: space-between;
margin: 0;
margin: 0;
border-top: 1px solid #778185;
font-size: 12px;
padding: 2px 2% 1px;
}
.headerMain .userStatus p {
font-size: 12px;
}
.headerMain .userStatus p span {
font-size: 12px;
}
.headerMain .userStatus p.userName {
margin-left: 3px;
}
.headerMain .userStatus p.userPoint {
margin: 0 7px 0 0;
}
.headerMain .headerSubMenu {
display: block;
width: 100%;
}
.headerMain .headerSubMenu ul {
display: flex;
justify-content: space-between;
}
#wrap header .headerMain .headerSubMenu ul li {
width: calc(100% /3);
margin-left: 0;
height: auto;
font-size: 10px;
}
#wrap header .headerMain .headerSubMenu ul li a {
background-color: transparent;
border: 1px solid #778185;
border-left: none;
border-radius: 0;
color: #778185;
padding: 29px 0 4px;
line-height: 1;
height: auto;
font-size: 10px;
font-weight: bold;
}
#wrap header .headerMain .headerSubMenu ul li:last-child a {
border-right: none;
}
#wrap header .headerMain .headerSubMenu ul li.headerCart a {
min-width: 0;
background-color: transparent;
text-align: center;
padding-right: 0;
line-height: 1;
}
.headerMain .headerSubMenu ul li.headerCart span {
font-size: 10px;
font-weight: bold;
}
.headerMain .headerSubMenu ul li.headerCart .num {
display: none;
}
.headerMain .headerSubMenu ul li.headerCart .num.active {
display: block;
top: 3px;
left: 55%;
width: 16px;
height: 16px;
background-color: #cc0033;
color: #ffff;
padding: 1px 0 0 0;
border-radius: 8px;
font-size: 9px;
font-weight: normal;
line-height: 1.6;
border: none;
text-align: center;
}
#wrap header .headerMain .headerSubMenu ul li.headerTop a {
background: url(../images/header/ico_home_01.png) no-repeat center 6px/auto 19px;
}
#wrap header .headerMain .headerSubMenu ul li.headerLogin a {
background: url(../images/header/ico_login_01.png) no-repeat center 6px/auto 20px;
width: auto;
padding: 29px 0 4px;
}
#wrap header .headerMain .headerSubMenu ul li.headerLogin.active a {
background: url(../images/header/ico_logout_01.png) no-repeat center 6px/auto 20px;
}
#wrap header .headerMain .headerSubMenu ul li.headerCart a {
background: url(../images/header/ico_cart_01.png) no-repeat center 6px/auto 22px;
}
.headerMain .logo {
order: 1;
}
.headerMain .userStatus {
order: 2;
}
.headerMain .headerSubMenu {
order: 3;
}
}
/* ヘッダー検索部分 */
.headerSearch {
background: none;
padding: 0;
margin: 0;
border: none;
}
.headerSearch .search_ctrl {
display: flex;
justify-content: flex-end;
padding: 10px 0 13px;
}
.headerSearch .search_ctrl form {
display: inline-block;
font-size: 0.8em;
padding: 0 0 0 50px;
}
.searchNavi .search_text input {
width: 240px;
height: 2em;
border: none;
background-color: #eeeeee;
}
.searchNavi .search_btn input {
border: none;
background: none;
padding: 0;
width: 38px;
height: auto;
padding-left: 10px;
}
.searchNavi_orderNumber p {
display: inline-block;
}
.searchNavi_orderNumber p em a {
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
.searchNavi_orderNumber .search_text {
margin: 0 -4px 0 5px;
}
.searchNavi_orderNumber .search_text input {
width: 103px;
height: 2em;
border: 1px solid #bcc2c5;
background-color: #fff;
padding: 0 0 0 5px;
}
@media all and (-ms-high-contrast: none) {
/* IE11 hack */
*::-ms-backdrop,
.searchNavi_orderNumber .search_text input {
vertical-align: middle;
}
}
.searchNavi_orderNumber .search_btn input {
width: 4em;
height: 2em;
border: none;
background: none;
padding: 0;
background-color: #171d1f;
color: #ffffff;
font-size: 1em;
}
/*
## グローバルナビゲーション
*/
header {
background-image: url(../images/header/img_headerDot_PC.png);
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom: 4px;
}
.globalNavi {
background: none;
box-shadow: none;
z-index: 100;
}
.globalNavi ul li {
height: auto;
background: none;
border: none;
}
.globalNavi ul li:nth-child(1) {
border-left: none;
}
.globalNavi ul li:hover {
opacity: 1;
}
#globalNavi ul li a {
width: auto;
height: 40px;
box-sizing: border-box;
padding: 0;
line-height: 2.8;
font-size: 1em;
color: #171d1f;
text-shadow: none;
}
#globalNavi ul li a:hover {
color: #9b8453;
}
.globalNavi > ul > li {
position: relative;
top: 2px;
width: calc(100% / 5);
min-height: 40px;
box-sizing: border-box;
background: none;
}
@supports (-ms-ime-align: auto) { /* Edge hack */
.globalNavi > ul > li {
/*width: calc(16.66%);*/
}
}
.globalNavi > ul > li > a {
border-right: 1px solid #bcc2c5;
transition: 0s;
}
.globalNavi > ul > li:nth-child(1) > a {
border-left: 1px solid #bcc2c5;
}
.globalNavi > ul > li:hover > a {
border-bottom: 5px solid #e5decf;
}
/* 子メニュー */
.globalNavi > ul > li > ul {
position: absolute;
top: 40px;
width: 100%;
background-color: #ffffff;
text-align: left;
border-bottom: 2px solid #171d1f;
visibility: hidden;
opacity: 0;
}
.globalNavi > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
.globalNavi > ul > li > ul > li {
float: none;
display: block;
padding-left: 1em;
}
.globalNavi > ul > li > ul > li:nth-child(1) {
border-left: none;
padding-top: 10px;
}
#globalNavi > ul > li > ul > li > a {
font-size: 0.8em;
}
#globalNavi > ul > li > ul > li > a:hover {
text-decoration: underline;
}
/* アニメーション設定 */
#globalNavi > ul > li > ul > li > a {
height: 0;
transition: .2s;
}
#globalNavi > ul > li:hover > ul > li > a {
height: 40px;
}
@media screen and (max-width: 640px) {
header {
background: none;
padding-bottom: 0;
}
/* SP用アコーディオンメニュー */
.globalSPNavi {
position: absolute;
top: 65px;
width: 100%;
background-color: #ffffff;
z-index: 200;
display: none;
}
.globalSPNavi ul li.open > ul {
display: none;
}
.globalSPNavi ul li.open span,
.globalSPNavi ul li a {
position: relative;
display: block;
padding: 12px 10px;
font-size: 14px;
font-weight: bold;
color: #171d1f;
border-bottom: 1px solid #bcc2c5;
}
.globalSPNavi ul li a:hover {
text-decoration: none;
}
.globalSPNavi ul li.heading {
background-color: #171d1f;
padding: 6px 10px 5px;
color: #ffffff;
font-weight: bold;
}
.globalSPNavi ul li.open li.link a {
background-color: #eeeeee;
font-weight: normal;
}
.globalSPNavi ul li.open > span:after {
position: absolute;
right: 20px;
content: "\f067";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
}
.globalSPNavi ul li.open.active > span:after {
content: "\f068";
}
.globalSPNavi ul li.link > a:after {
position: absolute;
top: 18%;
right: 20px;
content: "\f105";
font-family: "FontAwesome";
font-size: 20px;
font-weight: normal;
color: #c5b89d;
}
/* SPメニュー内検索エリア */
.globalSPSearchNavi {
padding: 12px 0 12px 10px;
}
.globalSPSearchNavi .search_ctrl {
display: flex;
justify-content: flex-end;
padding: 10px 0 18px;
}
.globalSPSearchNavi .search_ctrl form {
display: inline-block;
font-size: 0.8em;
padding: 0 0 0 50px;
}
.globalSPSearchNavi .search_text input {
width: calc(100% - 50px);
min-width: 250px;
height: 2em;
border: none;
background-color: #eeeeee;
font-size: 12px;
}
.globalSPSearchNavi .search_btn input {
position: absolute;
border: none;
background: none;
padding: 0;
width: auto;
height: 24px;
padding-left: 10px;
}
}
/*
## フッター
*/
footer,
.footerContents {
background-color: #f0ede7;
}
.footerContents {
margin-bottom: 0;
}
.policyBanner img {
float: left;
margin-right: 1em;
}
.footerContents {
padding: 10px 0 0 0;
}
.footerNavi {
max-width: 980px;
width: 100%;
box-sizing: border-box;
padding: 30px;
margin-bottom: 0;
color: #171d1f;
}
.footerNavi .footerBox {
padding: 0;
float: left;
display: block;
width: 25%;
}
.footerNavi .footerBox:nth-child(1) {
width: 230px;
}
.footerNavi .footerBox:nth-child(2) {
width: calc(100% - 300px);
}
.footerNavi .footerBox h4 {
border-bottom: 1px solid #c5b89d;
padding: 0 0 15px 10px;
margin: 0 0 15px;
}
.footerNavi .footerBox h4 .allItems {
display: inline-block;
margin-left: 30px;
font-size: 0.9em;
}
.footerNavi .footerBox h4 .allItems:before {
font-size: 1em;
}
.footerNavi .footerBox h5 {
margin-bottom: 5px;
font-weight: bold;
font-size: 0.9em;
}
.footerNavi .footerBox ul, .footerNavi .footerBox dl {
font-size: 0.9em;
line-height: 1.8em;
}
.footerNavi .footerBox:nth-child(1) ul li {
padding-left: 10px;
}
.footerNavi .footerBox .footerBoxSubWrap {
display: flex;
justify-content: space-between;
padding: 0 10px;
}
.footerNavi .footerBox:nth-child(2) {
padding: 0;
margin-left: 70px;
}
.footerNavi a {
color: #171d1f;
text-decoration: none;
cursor: pointer;
}
.footerNavi a:hover {
color: #9b8453;
text-decoration: underline;
}
.footerSubNavi {
text-align: center;
}
.footerSubNavi .logo {
width: 220px;
margin: 0 auto 32px;
}
.footerSubNavi ul.companyLinks {
display: inline-block;
font-size: 1.2em;
}
.footerSubNavi ul.companyLinks li:after {
content: "|";
font-size: 0.7em;
position: relative;
top: -1px;
}
.footerSubNavi ul.companyLinks li:last-child:after {
content: "";
}
.footerSubNavi ul.companyLinks li a {
font-size: 0.8em;
color: #171d1f;
}
.footerSubNavi ul.companyLinks li a:hover {
color: #9b8453;
}
.footerSubNavi ul.license {
display: flex;
justify-content: space-between;
margin: 50px 0 0;
}
.footerSubNavi ul.license li {
display: inline-block;
text-align: left;
}
.footerSubNavi ul li + li {
border-left: none;
}
.footerSubNavi ul.license li img {
float: left;
margin-right: 10px;
}
.footerSubNavi ul.license li:nth-child(1) img {
position: relative;
top: 3px;
width: 87px;
}
.footerSubNavi ul.license li:nth-child(2) img {
position: relative;
top: -17px;
width: 65px;
}
.footerSubNavi ul.license li p {
float: left;
display: inline-block;
font-size: 0.7em;
}
.footerSubNavi ul.license li p a {
color: #171d1f;
font-size: 12px;
padding: 0;
}
footer .copy {
font-size: 0.8em;
text-align: center;
padding-top: 0;
}
.footerNaviSp {
display: none;
}
@media screen and (max-width: 640px) {
.footerSubNavi {
padding: 10px 5px 14px;
}
.footerSubNavi img {
width: 110px;
}
.footerSubNavi .logo {
margin-bottom: 14px;
}
.footerSubNavi ul.companyLinks li a {
font-size: 9px;
padding: 0 5px;
}
.footerSubNavi ul.companyLinks li:after {
font-size: 8px;
}
footer .copy {
font-size: 8px;
padding-bottom: 10px;
}
.footerSubNavi ul.companyLinks li:nth-child(4):after {
content: "";
}
}
/*
## サイドコンテンツ マイページメニュー
*/
.mypage_menu {
margin: 0 0 20px;
}
.mypage_menu li a {
background: url(../images/iconArrowPink.png) no-repeat 10px center;
padding: 0.2em 0.2em 0.2em 43px;
margin: 0;
color: #ff6597;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
display: block;
}
.mypage_menu li a:hover {
text-decoration: underline;
}
/*
## その他 スクロールアップ
*/
#scrollUp {
background: url(../images/top.png) no-repeat;
}
@media screen and (max-width: 640px) {
#scrollUp {
bottom: 10px;
right: 10px;
height: 25px;
width: 25px;
background-size: contain;
}
}
/*
## サイドコンテンツ
*/
.sideContents {
width: 240px;
float: right;
}
.sideContents section {
margin-bottom: 15px;
}
.sideContents aside {
display: block;
margin: 0 0 40px 0;
text-align: center;
}
.sideContents .bnr_wrap {
display: block;
margin: 0 0 20px 0;
}
/*
## サイドコンテンツ 初めてのお客様
*/
.contents section.first {
background: -moz-linear-gradient( top, rgba(100, 172, 0, 0.1) 0%, rgba(255, 255, 255, 0)), #fff;
background: -webkit-gradient( linear, left top, left bottom, from(rgba(100, 172, 0, 0.1)), to(rgba(255, 255, 255, 0))), #fff;
border: 1px solid #7fcd9c;
padding: 0 20px;
-moz-box-shadow: 0px 1px 5px #bbb;
-webkit-box-shadow: 0px 1px 5px #bbb;
box-shadow: 0px 1px 5px #bbb;
}
.contents section.first h3 {
border-top: 4px solid #009b3a;
}
.contents section.first h3.wakaba {
height: 61px;
background: url(../images/sideTtlWakaba.png) no-repeat 10px 10px;
}
.contents section.first h3.wakaba span {
display: none;
}
.contents section.first p.text {
font-size: 0.75em;
margin: 0 0 20px;
padding: 0 10px;
}
@media screen and (max-width: 640px) {
.contents section.first {
margin-left: 10px;
margin-right: 10px;
}
}
/*
## サイドコンテンツ 新規会員登録
*/
.memberRegister a {
display: block;
width: 100%;
height: 45px;
background-color: #009b3a;
color: #fff;
font-weight: bold;
font-size: 1.0em;
text-align: center;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
line-height: 45px;
text-decoration: none;
margin: 0 0 20px;
}
.memberRegister a:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
/*
## サイドコンテンツ about us
*/
.about_us_menu {
margin: 0 0 20px;
}
.about_us_menu .about_1 a {
width: 100%;
display: block;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
color: #fff;
font-weight: bold;
font-size: 0.9em;
padding: 10px 10px 10px 40px;
margin: 0 0 10px;
line-height: 1.5;
text-decoration: none;
text-align: left;
background: #009b3a url(../images/iconArrowWhite.png) no-repeat 10px center;
}
.about_us_menu .about_1 a .small {
font-size: 0.9em;
}
.about_us_menu .about_2 a, .about_us_menu .about_3 a {
width: 100%;
display: block;
color: #009b3a;
font-weight: bold;
text-decoration: none;
font-size: 0.9em;
padding: 10px 10px 10px 43px;
margin: 0;
line-height: 1.5;
}
.about_us_menu .about_1 a:hover, .about_us_menu .about_2 a:hover, .about_us_menu .about_3 a:hover {
text-decoration: underline;
}
.about_us_menu .about_2 a {
background: url(../images/icon_acai.png) no-repeat 0 center;
}
.about_us_menu .about_3 a {
background: url(../images/icon_propolis.png) no-repeat 0 center;
}
@media screen and (max-width: 640px) {
.about_us_menu .about_1 a .small {
padding-left: 1em;
}
}
/*
## サイドコンテンツ ようこそ ゲストさん
*/
.contents section.guest {
background: -moz-linear-gradient(center top , rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1)) repeat scroll 0 0%, #fff none repeat scroll 0 0;
background: -webkit-gradient( linear, left top, left bottom, from(rgba(255, 210, 225, 0.1)), to(rgba(255, 255, 255, 0))), #fff;
border: 1px solid #ffd2e1;
padding: 0 20px;
-moz-box-shadow: 0px 1px 5px #bbb;
-webkit-box-shadow: 0px 1px 5px #bbb;
box-shadow: 0px 1px 5px #bbb;
}
.contents section.guest h3 {
border-top: 4px solid #ff6597;
margin: 0 0 10px;
}
.contents section.guest h3.loginOff img {
padding: 20px 0 0;
}
.contents section.guest h3.loginOn {
padding: 20px 10px 0;
}
.contents section.guest h3.loginOn span {
padding: 0 5px;
}
.contents section.guest p.text {
font-size: 0.75em;
margin: 0 0 20px;
padding: 0 10px;
}
@media screen and (max-width: 640px) {
.contents section.guest {
margin-left: 10px;
margin-right: 10px;
}
}
/*
## サイドコンテンツ mypage ボタン
*/
.myPageBtn a {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
color: #fff;
font-weight: bold;
font-size: 1.0em;
padding: 11px 10px 9px 40px;
margin: 0 0 10px;
line-height: 1.5;
text-decoration: none;
text-align: center;
text-align: left;
/* !!!!!!!!!!! */
background: #ec8125 url(../images/iconArrowWhite.png) no-repeat 10px center;
}
.myPageBtn a:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
/*
## その他 規約同意チェックボックス
~~~
~~~
*/
#isMemberAgreementFlgItemWrap, #isUseAgreementFlgItemWrap {
background-color: #f3f3f3;
border: 1px solid #ccc;
text-align: center;
padding: 10px 0;
margin: 10px 0;
width: 100%;
}
/*
## その他 郵便番号検索ボタンはSPで非表示
*/
/*
@media screen and (max-width: 640px) {
input[type="button"].postCodeSearchButton,
input[type="button"].orderPostCodeSearchButton {
display: none;
}
}
*/
/*
## その他 入力項目必須
~~~
~~~
*/
.required:after {
background: #cc0033;
color: #fff;
}
/*
## その他 条件付き必須
~~~
~~~
*/
.required_condition:after {
content: "※";
background: #317dcb;
color: #fff;
}
/*
## フォーム 生年月日
*/
select.birthdayMonth,
select.birthdayDay {
vertical-align: top;
}
@media screen and (max-width: 640px) {
select.birthdayMonth,
select.birthdayDay {
vertical-align: baseline;
}
}
/*
## テキスト 右寄せ、センター、左寄せ
~~~
~~~
*/
/*
## 改行しない
~~~
~~~
*/
/*
## カラムわけ 2分割
~~~
~~~
*/
/*
## カラムわけ 3分割
~~~
~~~
*/
/*
## カラムわけ 4分割
~~~
~~~
*/
/*
## テーブル構造
~~~
~~~
*/
/*
## エラーページ系（systemError）
*/
#systemError .errorMessage {
text-align:center;
margin: 24px auto 48px;;
}
#systemError .mainText {
font-size: 1.3em;
}
#systemError .detailText {
margin: 2em auto;
}
@media screen and (max-width: 640px) {
#systemError .detailText {
width: 90%;
text-align: left;
}
}
/* 404 */
#systemError.notFound .mainText {
text-indent: 1em;
margin-bottom: 0;
}
#systemError.notFound .linkText li {
display: inline-block;
margin-right: 2em;
}
@media screen and (max-width: 640px) {
#systemError.notFound .mainText {
text-indent: 0;
font-size: 1.3rem;
}
}
/*
## margin
~~~
0 auto
top 0
top 5
bottom 0
bottom 5
left 0
left 5
right 0
right 5
~~~
*/
/*
## padding
~~~
top 0
top 5
bottop 0
bottop 5
left 0
left 5
right 0
right 5
~~~
*/
/* display
--------------------------------------------------------- */
.contents .dispB { display: block; }
.contents .dispIB { display: inline-block; }
.contents .dispI { display: inline; }
/* text-align
--------------------------------------------------------- */
.contents .txtaL { text-align: left; }
.contents .txtaC { text-align: center; }
.contents .txtaR { text-align: right; }
/* text-decoration
--------------------------------------------------------- */
.lineThrough {text-decoration: line-through;}
/* margin / padding
--------------------------------------------------------- */
.contents .m0auto { margin: 0 auto;}
.contents .mt-10 { margin-top: -10px; }
.contents .mt0 { margin-top: 0px; }
.contents .mt5 { margin-top: 5px; }
.contents .mt10 { margin-top: 10px; }
.contents .mt15 { margin-top: 15px; }
.contents .mt20 { margin-top: 20px; }
.contents .mt25 { margin-top: 25px; }
.contents .mt30 { margin-top: 30px; }
.contents .mt40 { margin-top: 40px; }
.contents .mt50 { margin-top: 50px; }
.contents .mt60 { margin-top: 60px; }
.contents .mt70 { margin-top: 70px; }
.contents .mt80 { margin-top: 80px; }
.contents .mt90 { margin-top: 90px; }
.contents .mt100 { margin-top: 100px; }
.contents .mb0 { margin-bottom: 0px; }
.contents .mb5 { margin-bottom: 5px; }
.contents .mb10 { margin-bottom: 10px; }
.contents .mb15 { margin-bottom: 15px; }
.contents .mb20 { margin-bottom: 20px; }
.contents .mb25 { margin-bottom: 25px; }
.contents .mb30 { margin-bottom: 30px; }
.contents .mb40 { margin-bottom: 40px; }
.contents .mb50 { margin-bottom: 50px; }
.contents .mb60 { margin-bottom: 60px; }
.contents .mb70 { margin-bottom: 70px; }
.contents .mb80 { margin-bottom: 80px; }
.contents .mb90 { margin-bottom: 90px; }
.contents .mb100 { margin-bottom: 100px; }
.contents .ml0auto { margin-left: auto;}
.contents .ml0 { margin-left: 0px; }
.contents .ml5 { margin-left: 5px; }
.contents .ml10 { margin-left: 10px; }
.contents .ml15 { margin-left: 15px; }
.contents .ml20 { margin-left: 20px; }
.contents .ml25 { margin-left: 25px; }
.contents .ml30 { margin-left: 30px; }
.contents .ml40 { margin-left: 40px; }
.contents .ml50 { margin-left: 50px; }
.contents .ml60 { margin-left: 60px; }
.contents .ml70 { margin-left: 70px; }
.contents .ml80 { margin-left: 80px; }
.contents .ml90 { margin-left: 90px; }
.contents .ml100 { margin-left: 100px; }
.contents .mr0auto { margin-right: auto;}
.contents .mr0 { margin-right: 0px; }
.contents .mr5 { margin-right: 5px; }
.contents .mr10 { margin-right: 10px; }
.contents .mr15 { margin-right: 15px; }
.contents .mr20 { margin-right: 20px; }
.contents .mr25 { margin-right: 25px; }
.contents .mr30 { margin-right: 30px; }
.contents .mr40 { margin-right: 40px; }
.contents .mr50 { margin-right: 50px; }
.contents .mr60 { margin-right: 60px; }
.contents .mr70 { margin-right: 70px; }
.contents .mr80 { margin-right: 80px; }
.contents .mr90 { margin-right: 90px; }
.contents .mr100 { margin-right: 100px; }
.contents .pt0 { padding-top: 0px; }
.contents .pt5 { padding-top: 5px; }
.contents .pt10 { padding-top: 10px; }
.contents .pt15 { padding-top: 15px; }
.contents .pt20 { padding-top: 20px; }
.contents .pt25 { padding-top: 25px; }
.contents .pt30 { padding-top: 30px; }
.contents .pt40 { padding-top: 40px; }
.contents .pt50 { padding-top: 50px; }
.contents .pt60 { padding-top: 60px; }
.contents .pt70 { padding-top: 70px; }
.contents .pt80 { padding-top: 80px; }
.contents .pt90 { padding-top: 90px; }
.contents .pt100 { padding-top: 100px; }
.contents .pb0 { padding-bottom: 0px; }
.contents .pb5 { padding-bottom: 5px; }
.contents .pb10 { padding-bottom: 10px; }
.contents .pb15 { padding-bottom: 15px; }
.contents .pb20 { padding-bottom: 20px; }
.contents .pb25 { padding-bottom: 25px; }
.contents .pb30 { padding-bottom: 30px; }
.contents .pb40 { padding-bottom: 40px; }
.contents .pb50 { padding-bottom: 50px; }
.contents .pb60 { padding-bottom: 60px; }
.contents .pb70 { padding-bottom: 70px; }
.contents .pb80 { padding-bottom: 80px; }
.contents .pb90 { padding-bottom: 90px; }
.contents .pb100 { padding-bottom: 100px; }
.contents .pl0 { padding-left:0px; }
.contents .pl5 { padding-left:5px; }
.contents .pl10 { padding-left:10px; }
.contents .pl15 { padding-left:15px; }
.contents .pl20 { padding-left:20px; }
.contents .pl25 { padding-left:25px; }
.contents .pl30 { padding-left:30px; }
.contents .pl40 { padding-left:40px; }
.contents .pl50 { padding-left:50px; }
.contents .pl60 { padding-left:60px; }
.contents .pl70 { padding-left:70px; }
.contents .pl80 { padding-left:80px; }
.contents .pl90 { padding-left:90px; }
.contents .pl100 { padding-left:100px; }
.contents .pr0 { padding-right:0px; }
.contents .pr5 { padding-right:5px; }
.contents .pr10 { padding-right:10px; }
.contents .pr15 { padding-right:15px; }
.contents .pr20 { padding-right:20px; }
.contents .pr25 { padding-right:25px; }
.contents .pr30 { padding-right:30px; }
.contents .pr40 { padding-right:40px; }
.contents .pr50 { padding-right:50px; }
.contents .pr60 { padding-right:60px; }
.contents .pr70 { padding-right:70px; }
.contents .pr80 { padding-right:80px; }
.contents .pr90 { padding-right:90px; }
.contents .pr100 { padding-right:100px; }
@media screen and (max-width: 640px) {
/* margin / padding
--------------------------------------------------------- */
.contents .sp_m0auto { margin: 0 auto;}
.contents .sp_mt-10 { margin-top: -10px; }
.contents .sp_mt0 { margin-top: 0px; }
.contents .sp_mt5 { margin-top: 5px; }
.contents .sp_mt10 { margin-top: 10px; }
.contents .sp_mt15 { margin-top: 15px; }
.contents .sp_mt20 { margin-top: 20px; }
.contents .sp_mt25 { margin-top: 25px; }
.contents .sp_mt30 { margin-top: 30px; }
.contents .sp_mt40 { margin-top: 40px; }
.contents .sp_mt50 { margin-top: 50px; }
.contents .sp_mt60 { margin-top: 60px; }
.contents .sp_mt70 { margin-top: 70px; }
.contents .sp_mt80 { margin-top: 80px; }
.contents .sp_mt90 { margin-top: 90px; }
.contents .sp_mt100 { margin-top: 100px; }
.contents .sp_mb0 { margin-bottom: 0px; }
.contents .sp_mb5 { margin-bottom: 5px; }
.contents .sp_mb10 { margin-bottom: 10px; }
.contents .sp_mb15 { margin-bottom: 15px; }
.contents .sp_mb20 { margin-bottom: 20px; }
.contents .sp_mb25 { margin-bottom: 25px; }
.contents .sp_mb30 { margin-bottom: 30px; }
.contents .sp_mb40 { margin-bottom: 40px; }
.contents .sp_mb50 { margin-bottom: 50px; }
.contents .sp_mb60 { margin-bottom: 60px; }
.contents .sp_mb70 { margin-bottom: 70px; }
.contents .sp_mb80 { margin-bottom: 80px; }
.contents .sp_mb90 { margin-bottom: 90px; }
.contents .sp_mb100 { margin-bottom: 100px; }
.contents .sp_ml0auto { margin-left: auto;}
.contents .sp_ml0 { margin-left: 0px; }
.contents .sp_ml5 { margin-left: 5px; }
.contents .sp_ml10 { margin-left: 10px; }
.contents .sp_ml15 { margin-left: 15px; }
.contents .sp_ml20 { margin-left: 20px; }
.contents .sp_ml25 { margin-left: 25px; }
.contents .sp_ml30 { margin-left: 30px; }
.contents .sp_ml40 { margin-left: 40px; }
.contents .sp_ml50 { margin-left: 50px; }
.contents .sp_ml60 { margin-left: 60px; }
.contents .sp_ml70 { margin-left: 70px; }
.contents .sp_ml80 { margin-left: 80px; }
.contents .sp_ml90 { margin-left: 90px; }
.contents .sp_ml100 { margin-left: 100px; }
.contents .sp_mr0auto { margin-right: auto;}
.contents .sp_mr0 { margin-right: 0px; }
.contents .sp_mr5 { margin-right: 5px; }
.contents .sp_mr10 { margin-right: 10px; }
.contents .sp_mr15 { margin-right: 15px; }
.contents .sp_mr20 { margin-right: 20px; }
.contents .sp_mr25 { margin-right: 25px; }
.contents .sp_mr30 { margin-right: 30px; }
.contents .sp_mr40 { margin-right: 40px; }
.contents .sp_mr50 { margin-right: 50px; }
.contents .sp_mr60 { margin-right: 60px; }
.contents .sp_mr70 { margin-right: 70px; }
.contents .sp_mr80 { margin-right: 80px; }
.contents .sp_mr90 { margin-right: 90px; }
.contents .sp_mr100 { margin-right: 100px; }
.contents .sp_pt0 { padding-top: 0px; }
.contents .sp_pt5 { padding-top: 5px; }
.contents .sp_pt10 { padding-top: 10px; }
.contents .sp_pt15 { padding-top: 15px; }
.contents .sp_pt20 { padding-top: 20px; }
.contents .sp_pt25 { padding-top: 25px; }
.contents .sp_pt30 { padding-top: 30px; }
.contents .sp_pt40 { padding-top: 40px; }
.contents .sp_pt50 { padding-top: 50px; }
.contents .sp_pt60 { padding-top: 60px; }
.contents .sp_pt70 { padding-top: 70px; }
.contents .sp_pt80 { padding-top: 80px; }
.contents .sp_pt90 { padding-top: 90px; }
.contents .sp_pt100 { padding-top: 100px; }
.contents .sp_pb0 { padding-bottom: 0px; }
.contents .sp_pb5 { padding-bottom: 5px; }
.contents .sp_pb10 { padding-bottom: 10px; }
.contents .sp_pb15 { padding-bottom: 15px; }
.contents .sp_pb20 { padding-bottom: 20px; }
.contents .sp_pb25 { padding-bottom: 25px; }
.contents .sp_pb30 { padding-bottom: 30px; }
.contents .sp_pb40 { padding-bottom: 40px; }
.contents .sp_pb50 { padding-bottom: 50px; }
.contents .sp_pb60 { padding-bottom: 60px; }
.contents .sp_pb70 { padding-bottom: 70px; }
.contents .sp_pb80 { padding-bottom: 80px; }
.contents .sp_pb90 { padding-bottom: 90px; }
.contents .sp_pb100 { padding-bottom: 100px; }
.contents .sp_pl0 { padding-left:0px; }
.contents .sp_pl5 { padding-left:5px; }
.contents .sp_pl10 { padding-left:10px; }
.contents .sp_pl15 { padding-left:15px; }
.contents .sp_pl20 { padding-left:20px; }
.contents .sp_pl25 { padding-left:25px; }
.contents .sp_pl30 { padding-left:30px; }
.contents .sp_pl40 { padding-left:40px; }
.contents .sp_pl50 { padding-left:50px; }
.contents .sp_pl60 { padding-left:60px; }
.contents .sp_pl70 { padding-left:70px; }
.contents .sp_pl80 { padding-left:80px; }
.contents .sp_pl90 { padding-left:90px; }
.contents .sp_pl100 { padding-left:100px; }
.contents .sp_pr0 { padding-right:0px; }
.contents .sp_pr5 { padding-right:5px; }
.contents .sp_pr10 { padding-right:10px; }
.contents .sp_pr15 { padding-right:15px; }
.contents .sp_pr20 { padding-right:20px; }
.contents .sp_pr25 { padding-right:25px; }
.contents .sp_pr30 { padding-right:30px; }
.contents .sp_pr40 { padding-right:40px; }
.contents .sp_pr50 { padding-right:50px; }
.contents .sp_pr60 { padding-right:60px; }
.contents .sp_pr70 { padding-right:70px; }
.contents .sp_pr80 { padding-right:80px; }
.contents .sp_pr90 { padding-right:90px; }
.contents .sp_pr100 { padding-right:100px; }
.contents .sp_displayB{display:block;}
.contents .sp_displayIB{display:inline-block;}
.contents .sp_displayI{display:inline;}
.contents .sp_txtaL { text-align: left; }
.contents .sp_txtaC { text-align: center; }
.contents .sp_txtaR { text-align: right; }
}
/* width
--------------------------------------------------------- */
.w0 { width: 0; }
.w1em { width: 1em; }
.w2em { width: 2em; }
.w3em { width: 3em; }
.w4em { width: 4em; }
.w5em { width: 5em; }
.w6em { width: 6em; }
.w7em { width: 7em; }
.w8em { width: 8em; }
.w9em { width: 9em; }
.w10em { width: 10em; }
@media screen and (max-width: 640px) {
.sp_w0 { width: 0; }
.sp_w1em { width: 1em; }
.sp_w2em { width: 2em; }
.sp_w3em { width: 3em; }
.sp_w4em { width: 4em; }
.sp_w5em { width: 5em; }
.sp_w6em { width: 6em; }
.sp_w7em { width: 7em; }
.sp_w8em { width: 8em; }
.sp_w9em { width: 9em; }
.sp_w10em { width: 10em; }
}
/* 追加 Mdx */
.detail_btn{
background: #ff6597;
color: #fff;
border-style: solid;
border-width: 1px;
border-color: #ff6597;
font-size: 0.7em;
font-weight: normal;
line-height: 24px;
cursor: pointer;
border-radius: 6px;
padding: 3px 10px;
display: inline-block;
text-decoration: none;
text-align: center;
position:absolute;
right:0;
top:0;
}
.contents .detail_btn:link {
color: #fff;
text-decoration: none;
}
.contents .detail_btn:visited {
color: #fff;
text-decoration: none;
}
.contents .detail_btn:hover{opacity:0.8;}
.contents .btn_darkbrown{
background: #9b8453 !important;
border: #9b8453 !important;
}
.contents .btn_pink{
background: #ff6597 !important;
border: #ff6597 !important;
color: #fff;
text-decoration: none;
font-weight: normal;
font-size: 1.2em;
padding: 6px 14px;
}
.contents .btn_pink:visited {
color: #fff !important;
text-decoration: none;
}
.contents .btn_pink:hover {
opacity:0.8;
}
.goodsName, .reglGoodsName{font-size:1.2em;}
.contents .btnS{
border-style: solid;
border-width: 1px;
font-size: 0.9em;
font-weight: normal;
margin-left: 0;
margin-right: 0;
min-height:0;
min-width:0;
line-height: 1em;
cursor: pointer;
border-radius: 6px;
padding: 12px 10px;
display: inline-block;
text-decoration: none;
text-align: center;
}
.contents .fontS { font-size: 0.8em; }
.contents .fontL { font-size: 1.3em; }
.contents .fontB { font-weight: bold; }
.contents .borderLN{border-left:none !important;}
.contents .borderRN{border-right:none !important;}
.colorPink{color:#ff6597;}
.colorRed{color:#cc0033;}
.contents .borderTdot {border-top:1px dotted #ccc;}
.contents .table .bg_lightbrown {background-color:#f0ede7;}
.contents .table .border_lightbrown {border: 1px solid #d4cfc6;}
.contents .contactDetail{
overflow-y: scroll;
height:200px;
}
.contents .contact{margin:15px;}
.contents .contactAns{margin:15px 15px 30px;}
.contactQ{
font-size: 1.3em;
border-bottom:1px dotted #ccc;
padding-bottom:5px;
}
.contactQ:before{
color:#9b8453;
font-size:1.5em;
content:"Q";
margin-right:10px;
font-weight:bold;
}
.contactA{
font-size: 1.3em;
border-bottom:1px dotted #ccc;
padding-bottom:5px;
display: block;
}
.contactA:before{
color:#cc0033;
font-size:1.5em;
content:"A";
margin-right:10px;
font-weight:bold;
}
.contents .enqueteDetail{
overflow-y: scroll;
height:80px;
}
.contents .enquete{margin:15px;}
#Member .contents .mypageBlock{margin:20px 0 60px;}
#Member .table{border:none;}
#MemberOrderList #topGroupName > .includeWrap,
#topGroupName > .set-group {margin: 20px 0;}
#RegularScheduleDetail .paymentMethodArea{margin-top: -12px;}
#RegularScheduleDetail #topGroupName .scheduleBlock{/*margin:0 0 60px;*/}
@media screen and (max-width: 640px){
#RegularScheduleDetail .level_h3 {
margin-top: 30px;
}
}
#RegularScheduleDetail > .includeWrap,
#topGroupName > #RegularScheduleDetail .set-group {margin: 0;}
.icon_cart{
background-image: url(../images/icon_cart.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 20px;
text-align: right;
line-height: 2.2;
padding-right: 40px;
vertical-align: middle;
background-size: 27px 26px;
}
.icon_present{
background-image: url(../images/icon_present.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 40px;
vertical-align: middle;
background-size: 18px 19px;
margin-left: 10px;
}
input.point{width:100px;}
.borderBD{border-bottom:1px dotted #ccc;}
.indent{
text-indent: -1em;
padding-left: 1em;
}
.arrowLink a{cursor:pointer;}
@media screen and (max-width: 640px){
.icon_cart{
background: url(../images/icon_cart.png) no-repeat center 6px/auto 20px;
background-repeat: no-repeat;
background-position: 0px 0px;
line-height: 1.2em;
padding-right: 30px;
vertical-align: middle;
}
.sp_fontS { font-size: 0.8em; }
}
/*====================================
commonのcss上書き系
=====================================*/
/***contents/css/common/common.css***/
@media screen and (max-width: 640px) {
input[type="text"],
input[type="password"],
select {
width: 100%;
height:46px;
}
}
input[type="checkbox"],
input[type="radio"] {
position: relative;
top: -1px;
vertical-align: middle;
margin: 0 3px;
cursor: pointer;
margin-right: 1em;
}
input.TEL_1,
input.TEL_2,
input.TEL_3 {
width: 90px;
}
#OrderInfoInput .orderList img,#OrderInfoConfirm .orderList img ,#Cart table.results img {
vertical-align: bottom;
-ms-interpolation-mode: bicubic;
width: 100% !important;
max-width: initial !important;
height: auto !important;
}
@media screen and (max-width: 640px){
#RegularScheduleDetail #buttonGroup, #OrderInfoComplete #buttonGroup,#MemberOrderList #buttonGroup{
width: 100%;
height: 50px;
position: relative;
}
}
/***contents/css/OrderInfoComplete.css***/
.orderNo {
color: #ff6597;
font-size: 1.2em;
font-weight: bold;
}
#OrderInfoComplete .contents .buttonArea{
margin: 30px 0 10px;
}
/***contents/css/OrderInfoInput.css***/
.requiredTitle:after {
background: #cc0033;
border-radius: 3px;
color: #fff;
content: "必須";
font-weight: normal;
font-size: 0.7em;
margin: 0 0 0 10px;
min-width: 2em;
padding: 3px 10px;
text-align: center;
}
.creditCardGroup .checked.radiobuttonLabel:before {
background: url(../../../img/common/icon/icon_arrow_14_8.png) 0 0 no-repeat;
background-position: 3px 2px;
background-size: 80%;
margin-right: 0;
}
/*====================================*/
/*郵便番号ポップアップ*/
#PostCodeRefSearch .level_h3 {
padding: 5px!important;
}
#PostCodeRefSearch .resultsChoiceCol a.btn_3.choice:visited {
color: #ffffff;
}
#PostCodeRefSearch .resultsChoiceCol a.btn_3.choice:link {
color: #ffffff;
}
/*マイページ下層ページ 幅980px*/
@media screen and (min-width: 641px){
#MemberPointList .twoColumns .topGroupName,
#MemberOrderList .twoColumns .topGroupName,
#MemberOrderDetail .twoColumns .topGroupName,
#RegularSchedule .twoColumns .topGroupName,
#RegularScheduleDetail .twoColumns .topGroupName,
#RegularChangePayment .twoColumns .topGroupName,
#RegularChangeDelivery .twoColumns .topGroupName,
#RegularChangeDestination .twoColumns .topGroupName,
#RegularPointUse .twoColumns .topGroupName,
#MemberInquiryHistory .twoColumns .topGroupName,
#MemberInquiryLogList .twoColumns .topGroupName,
#MemberModify .twoColumns .topGroupName,
#MemberModifyConfirm .twoColumns .topGroupName,
#MemberModifyComplete .twoColumns .topGroupName,
#FavoriteGoodsList .twoColumns .topGroupName,
#MailmagazineSubscribe .twoColumns .topGroupName,
#MailmagazineSubscribeConfirm .twoColumns .topGroupName,
#MailmagazineSubscribeComplete .twoColumns .topGroupName,
#MemberResignInput .twoColumns .topGroupName,
#MemberResignConfirm .twoColumns .topGroupName,
#MemberResignComplete .twoColumns .topGroupName,
#MemberAddressBookList .twoColumns .topGroupName,
#MemberAddressBook .twoColumns .topGroupName,
#MemberAddressBookConfirm .twoColumns .topGroupName,
#MemberAddressBookComplete .twoColumns .topGroupName,
#ReviewRegister .twoColumns .topGroupName,
#ReviewRegisterConfirm .twoColumns .topGroupName,
#ReviewRegisterComplete .twoColumns .topGroupName,
#EnqueteList .twoColumns .topGroupName,
#EnqueteAnswerInput .twoColumns .topGroupName,
#EnqueteAnswerConfirm .twoColumns .topGroupName,
#EnqueteAnswerComplete .twoColumns .topGroupName{
width: 980px;
}
}
/*お問い合わせ一覧*/
#MemberInquiryHistory .resultsRow td{
border-top: none;
}
/*メールマガジン設定*/
#MailmagazineSubscribe .detailsRow td{
border-top: none;
}
/*ポイントの確認*/
#MemberPointList .contents .table{
margin: 0 auto 2em auto;
}
#MemberPointList .resultsRow td{
border-top: none;
}
@media screen and (max-width: 640px){
#MemberPointList #returnButton_link{
margin: 50px 10%;
}
}