/* 全社共通CSS（企業別CSSはadd.cssへ） */
:root{
--maincolor : #758E39;
--maincolor-hover: #586b2c;
--accentcolor: #EB6100;
--accentcolor-hover: #d35b05;
--triangle-color:#EAF0DA;
}
@media screen and (min-width: 768px) {
.ec-sliderRole img{
width: 100%;
height: 500px;
object-fit: cover;
}
}
@media screen and (min-width: 768px) and (max-width: 1100px){
.ec-sliderRole img{
width: 100%;
height: 410px;
object-fit: cover;
/* 20230726 kashiwa 文字がTOP画像に入っていれば、下記コメントアウト外す必要アリかも*/
/* object-position: -40px; */
}
}
/************************************************
共通設定
************************************************ */
/* コンテンツ */
#container {
min-height: 700px; /*offcanvas対策 カテゴリ数が増えると増やさなくてはいけない？*/
}
.ec-layoutRole .ec-layoutRole__contents{
padding-left: 15px;
padding-right: 15px;
}
.ec-layoutRole__footer{
position: sticky;
top: 100vh;
margin-top: 100px;
}
@media screen and (max-width: 767px){
.ec-layoutRole__footer{
margin-top: 50px;
}
/* #shadow{
margin-top: -60px;
} */
}
/* ==============================================
カラム指定
=============================================== */
.col-wrap {
/*bs3 leftカラムとmainカラムの幅を調整する*/
padding-left: 0;
padding-right: 0;
}
/* メイン部
----------------------------------------------- */
#main_column {
padding-bottom: 40px; /*bs3*/
}
/* goodp V003 メインブロック下部 */
/* .ec-layoutRole__mainBottom {
margin: 0 15px;
}
@media only screen and (min-width: 768px) {
.ec-layoutRole__mainBottom {
width: 60%;
margin: auto;
}
} */
/* サイドカラム
----------------------------------------------- */
#leftcolumn {
padding-bottom: 40px; /*bs3*/
}
#rightcolumn {
padding-bottom: 40px; /*bs3*/
}
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ
----------------------------------------------- */
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__left {
width: 27%;
padding-left: 15px;
}
.ec-layoutRole .ec-layoutRole__right {
width: 73%;
}
.ec-shelfGrid .ec-shelfGrid__item {
width: 33%;
}
}
@media only screen and (min-width: 1024px) {
.ec-shelfGrid .ec-shelfGrid__item {
width: 25%;
}
}
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ
----------------------------------------------- */
/* ==============================================
▼エラー
=============================================== */
.message_area .error {
padding: 20% 10%;
}
.price02-default {
color: #E00000;
display: inline-block;
font-size: 26px;
font-weight: bold;
font-family: 'Verdana';
}
.table-bordered {
border: 1px solid #ddd;
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
}
.table-bordered>tbody>tr>th {
background: #F3F3F3
}
.text-red {
color:#E00000;
}
@media screen and (min-width: 768px){
.message_area{
width: 85%;
margin: 0 auto;
}
}
/*-----------------------------------------------
アラート（エラー）
----------------------------------------------- */
.ec-alert-warning{
padding: 23px 40px;
background: #fff;
border: 1px #e00000 solid;
text-align: left;
}
.ec-alert-warning .ec-alert-warning__text{
color: #e00000;
font-size: 17px;
}
@media screen and (max-width: 767px){
.ec-alert-warning{
padding: 17px 20px;
background: #fff;
border: 1px #e00000 solid;
text-align: left;
}
.ec-alert-warning .ec-alert-warning__text{
font-size: 16px;
}
}
/* 企業カラー属性 (アイコンの色)*/
#compcol-font {
color: var(--maincolor);
}
/* 株主様名 */
.user_name {
font-weight: bold;
}
/*全体
----------------------------------------------- */
body{
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
overflow-x: hidden;
display:grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
word-wrap:break-word;
}
/* textarea {
font-size: 1.2rem !important;
padding: 4px !important;
} */
label.col-xs-1, label.col-sm-1, label.col-md-1 {
width: 1%;
}
a:focus{
text-decoration: none;
}
@media screen and (max-width: 767px){
a:focus, a:hover{
text-decoration:none;
}
}
/*ボタン
----------------------------------------------- */
.ec-off4Grid .ec-off4Grid__cell{
width: auto;
margin-left: 0;
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.ec-blockBtn--action{
border: none;
font-size: 18px;
border-radius: 3px;
color: #fff;
background-color: var(--maincolor);
display: block;
width: 100%;
padding: 0;
height: 58px;
line-height: 59px;
width: 36%;
min-width: 250px;
}
.ec-blockBtn--action:active ,.ec-blockBtn--action:focus, .ec-blockBtn--action:hover {
background-color: var(--maincolor);
border:none;
}
.ec-blockBtn--action[disabled]:hover, .ec-blockBtn--action[disabled]:focus, .ec-blockBtn--action[disabled]:active{
background-color: var(--maincolor);
border:none;
}
.ec-blockBtn--action:active:hover{
background-color:var(--maincolor);
border:none;
}
/*ボタン（カゴに入れるボタン）
----------------------------------------------- */
.ec-productRole .ec-blockBtn--action{
border: none;
font-size: 18px;
border-radius: 3px;
color: #fff;
background-color: var(--accentcolor);
display: block;
width: 100%;
padding: 0;
height: 58px;
line-height: 59px;
width: 39%;
min-width: 250px;
}
.ec-productRole .ec-blockBtn--action:active , .ec-productRole.ec-blockBtn--action:focus, .ec-productRole.ec-blockBtn--action:hover {
background-color: var(--accentcolor);
border:none;
}
.ec-productRole .ec-blockBtn--action[disabled]:hover, .ec-productRole .ec-blockBtn--action[disabled]:focus, .ec-productRole .ec-blockBtn--action[disabled]:active{
background-color: var(--accentcolor);
border:none;
}
.ec-blockBtn--cancel{
border-radius: 3px;
font-weight: bold;
font-size: 18px;
background: #fff;
color: #333;
border: #707070 1px solid;
padding: 0;
height: 58px;
line-height: 58px;
width: 36%;
margin-right: 30px;
min-width: 250px;
}
.ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel:active:focus{
background: #fff;
color: #333;
border: #707070 1px solid;
box-shadow: none;
outline: 0px auto -webkit-focus-ring-color;
outline-offset: 0px;
-webkit-tap-highlight-color: transparent;
outline: none!important;
}
.ec-blockBtn--cancel:active:hover{
background: #fff;
color: #333;
border: #707070 1px solid;
box-shadow: none;
}
/*インラインのボタン（モーダルウィンドウ内）
----------------------------------------------- */
.ec-inlineBtn--action{
border: none;
font-size: 16px;
border-radius: 3px;
color: #fff;
background-color: var(--maincolor);
width: 100%;
padding: 0;
height: 53px;
line-height: 53px;
width: 50%;
}
.ec-inlineBtn--action:active ,.ec-inlineBtn--action:focus, .ec-inlineBtn--action:hover, .ec-inlineBtn--action:active:focus {
background-color: var(--maincolor);
border:none;
}
.ec-inlineBtn--action[disabled]:hover, .ec-inlineBtn--action[disabled]:focus, .ec-inlineBtn--action[disabled]:active{
background-color: var(--maincolor);
border:none;
}
.ec-inlineBtn--cancel{
border-radius: 3px;
font-weight: bold;
font-size: 16px;
background: #fff;
color: #333;
border: #707070 1px solid;
padding: 0;
height: 53px;
line-height: 53px;
width: 36%;
margin-right: 20px;
}
.ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel:active:focus{
background: #fff;
color: #333;
border: #707070 1px solid;
box-shadow: none;
}
/*インラインのボタン（「新しいお届け先を追加する」ボタン）
----------------------------------------------- */
.ec-inlineBtn{
border-radius:3px;
background: #f5f5f5;
border: 1px #ddd solid;
color: var(--maincolor);
font-size: 17px;
padding: 13px 15px 10px 42px;
position: relative;
}
.ec-inlineBtn::before{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 18px;
height: 18px;
background-color: var(--maincolor);
position: absolute;
top: 14px;
left: 17px;
}
.ec-inlineBtn:hover, .ec-inlineBtn:active:hover, .ec-inlineBtn:active:focus,
.ec-inlineBtn:focus, .ec-inlineBtn:active{
background: #f5f5f5;
border: 1px #ddd solid;
color: var(--maincolor);
box-shadow: none;
}
/* 画面にボタン１つの場合の中央揃え */
.btn {
font-weight: bold;
}
.btn-gray02 {
background: #666666;
color: #ffffff;
}
.btn-gray02:hover { /* gray02のhoverを分離して背景色変更 */
background: #737373;
color: #ffffff;
}
.ec-pageHeader h1{
border: none;
color: #333;
border-left:6px solid #EEEEEE;
padding: 1px 8px;
margin: 10px 0 30px;
font-size: 25px;
font-weight: normal;
}
.ec-role{
font-size: 15px;
color: #333;
}
.ec-blockBtn--action:active:hover, .ec-blockBtn--action:active:focus{
background-color: var(--maincolor);
}
.ec-blockBtn--action:focus, .ec-blockBtn--action:active:focus{
outline: 0px auto -webkit-focus-ring-color;
outline-offset: 0px;
}
@media screen and (min-width: 768px){
.ec-blockBtn--action:active:hover, .ec-blockBtn--action:active:focus{
background-color: var(--maincolor-hover);
}
.ec-blockBtn--action:active, .ec-blockBtn--action:focus, .ec-blockBtn--action:hover {
background-color: var(--maincolor-hover);
}
.ec-blockBtn--action[disabled]:hover, .ec-blockBtn--action[disabled]:focus, .ec-blockBtn--action[disabled]:active{
background-color: var(--maincolor);
}
.ec-blockBtn--action:active:hover{
border: none;
}
.ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel:active{
background: #f7f7f7;
}
.ec-blockBtn--cancel:active:hover{
background: #f7f7f7;
color: #333;
border-color: #707070;
}
.ec-productRole .ec-blockBtn--action:active:hover, .ec-productRole .ec-blockBtn--action:active:focus{
background-color: var(--accentcolor-hover);
}
.ec-productRole .ec-blockBtn--action:active, .ec-productRole .ec-blockBtn--action:focus, .ec-productRole .ec-blockBtn--action:hover {
background-color: var(--accentcolor-hover);
}
.ec-productRole .ec-blockBtn--action[disabled]:hover, .ec-productRole .ec-blockBtn--action[disabled]:focus, .ec-productRole .ec-blockBtn--action[disabled]:active{
background-color: var(--accentcolor);
}
/*インラインのボタン */
.ec-inlineBtn--action:active:hover, .ec-inlineBtn--action:active:focus{
background-color: var(--maincolor-hover);
}
.ec-inlineBtn--action:active, .ec-inlineBtn--action:focus, .ec-inlineBtn--action:hover {
background-color: var(--maincolor-hover);
}
.ec-inlineBtn--action[disabled]:hover, .ec-inlineBtn--action[disabled]:focus, .ec-inlineBtn--action[disabled]:active{
background-color: var(--maincolor);
}
.ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel:active{
background: #f7f7f7;
}
.ec-inlineBtn--cancel:active:hover{
background: #f7f7f7;
color: #333;
border-color: #707070;
}
/*インラインのボタン（「新しいお届け先を追加する」ボタン） */
.ec-inlineBtn:hover, .ec-inlineBtn:active:hover, .ec-inlineBtn:active:focus,
.ec-inlineBtn:focus{
background-color: #EEEEEE;
border: 1px #ddd solid;
color: var(--maincolor);
}
.ec-inlineBtn:active{
background-color: #EEEEEE;
border: 1px #ddd solid;
color: var(--maincolor);
box-shadow: none;
}
}
@media screen and (max-width: 767px) {
.ec-pageHeader h1{
font-size: 21px;
margin: 10px 0 15px;
padding: 1px 6px;
}
.ec-off4Grid .ec-off4Grid__cell{
flex-direction: column;
}
.ec-blockBtn--action{
width: 100%;
}
.ec-blockBtn--cancel{
width: 100%;
margin-right: 0;
}
}
@media screen and (max-width: 1100px){
.ec-inlineBtn--action{
width: 70%;
}
.ec-inlineBtn--cancel{
margin-right: 8px;
width: 45%;
}
}
/*-------------------------------------------------
ページトップへ戻るボタン
----------------------------------------------- */
.pagetop{
background-color: var(--maincolor);
border-radius: 50%;
width: 52px;
height: 52px;
opacity: 1;
text-align: center;
/* line-height: 69px; */
line-height: 71px;
right:10px ;
bottom: 20px;
}
@media screen and (min-width: 768px) {
.pagetop:hover{
background-color: var(--maincolor-hover);
}
.pagetop{
right: 30px;
bottom: 30px;
width: 60px;
height: 60px;
line-height: 77px;
}
}
.pagetop_detail{
background-color: var(--accentcolor);
border-radius: 100vh;
width: 145px;
height: 42px;
opacity: 1;
text-align: center;
line-height: 42px;
font-size: 14px;
right:10px ;
bottom: 80px;
color: #fff;
z-index: 1;
}
.ec-detailTopBtn{
position: fixed;
display: none;
}
@media screen and (min-width: 768px) {
.pagetop_detail:hover{
background-color: var(--accentcolor-hover);
}
.pagetop_detail{
right: 30px;
bottom: 105px;
width: 160px;
height: 50px;
line-height: 50px;
font-size: 15px;
cursor: pointer;
}
}
/*-------------------------------------------------
フォームデザイン
----------------------------------------------- */
.form-control{
height: 40px;
}
.ec-off4Grid{
display: block;
margin-top: 30px;
}
.ec-borderedDefs{
border-top: none;
margin-bottom: 25px;
}
.ec-borderedDefs dt{
font-size: 16px;
position: relative;
}
.ec-telInput input{
display: inline;
margin-right: 8px;
}
#entry_email_first{
margin-bottom: 8px;
}
#entry_email_second{
margin-bottom: 0;
}
/* #entry_password_first{
margin-bottom: 8px;
}
#entry_password_second{
margin-bottom: 0;
} */
.ec-input p{
margin-top: 5px;
margin-bottom: 16px;
}
.ec-halfInput p{
margin-top: 5px;
margin-bottom: 16px;
}
.about_mail{
margin-top: 30px;
}
.ec-birth span{
margin-left: 3px;
margin-right: 3px;
}
.ec-select select, .ec-birth select{
height: 40px;
padding: 6px 5px;
}
.ec-zipInput input, .ec-telInput input{
padding: 6px 7px;
}
.ec-zipInput input{
margin-bottom: 10px;
margin-right: 8px;
}
.ec-select{
margin-bottom: 10px;
}
.ec-zipInputHelp .ec-zipInputHelp__icon{
top: -5px;
right: 0px;
}
.ec-zipInputHelp{
margin-left: 15px;
}
/*必須ラベル*/
.ec-required{
color: #E00000;
border: 1px #E00000 solid;
padding: 3px 6px;
font-size: 14px;
font-weight: bold;
border-radius: 2px;
vertical-align: middle;
background: #fff;
}
/*同意するかのチェックボックス&リンク*/
.ec-checkbox{
background-color: #f5f5f5;
width: 100%;
padding: 25px 0 20px;
}
.ec-checkbox label{
font-size: 17px;
cursor: pointer;
margin-bottom: 0;
}
.ec-checkbox input{
scale: 1.14;
margin-right: 2px;
margin-bottom: 0;
}
.ec-link{
display: block;
font-weight: normal;
margin-bottom: 17px;
font-size: 15px;
position: relative;
}
.ec-link::after{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 13px;
height: 13px;
background-color: #0092C4;
position: absolute;
top: 18%;
right: 9%;
}
.ec-radio input{
margin-right: 2px;
}
.ec-radio label{
margin-right: 25px;
}
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input{
height: 45px;
}
/*エラー*/
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage{
font-size: 14px;
margin-bottom: 15px;
color: #e00000;
}
.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select, .error.ec-input textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea, .error.ec-select textarea, .error.ec-birth textarea{
margin-bottom: 5px;
border-color: #e00000;
background: #FFF4F1;
}
@media screen and (min-width: 768px){
.ec-borderedDefs dt{
padding-top: 7px;
width: 40%;
}
.ec-borderedDefs dl{
padding:16px 0 0px;
border-bottom: 1px #eee solid;
}
.ec-birth select{
margin: 0 8px 16px;
cursor: pointer;
}
.ec-required{
position: absolute;
right: 10%;
}
.ec-radio label{
margin-bottom: 14px;
cursor: pointer;
}
.ec-radio input{
cursor: pointer;
}
.ec-halfInput input[type='text']{
width: 56%;
}
}
@media screen and (max-width: 767px) {
.ec-registerRole{
padding-left: 0;
padding-right: 0;
}
.ec-halfInput input[type='text']{
width: 100%;
}
.ec-borderedDefs dl{
padding:22px 0 12px;
border-bottom: 1px #eee solid;
}
.ec-label{
margin-bottom: 10px;
}
.ec-radio label{
margin-bottom: 0px;
}
.ec-input p{
margin-bottom: 10px;
}
.about_mail{
margin-top: 30px;
}
.ec-blockBtn--action{
margin-bottom: 10px;
}
.ec-zipInputHelp a:hover{
color: #337ab7;
text-decoration: none;
}
}
/*-------------------------------------------------
【アンケート】フォームデザイン
----------------------------------------------- */
.ec-question .ec-label{
display: inline;
}
.ec-question .checkbox,
.ec-question .radio{
position: relative;
margin-top: 10px;
border: 1px #ddd solid;
}
.ec-question .ec-radio input{
margin-right: 0;
margin-bottom: 0;
cursor: pointer;
position: absolute;
left: 15px;
top: 15px;
}
.ec-question .table-bordered,
.ec-question .table-bordered>tbody>tr>td{
border: none;
}
.ec-question .checkbox label{
width: 100%;
padding: 15px;
position: relative;
padding-left: 37px;
font-weight: normal;
font-size: 16px;
}
.ec-question .ec-required{
margin-bottom: 0;
padding: 2px 4px;
}
.ec-radio span{
font-size: 16px;
}
.ec-question .ec-input{
padding-top: 10px;
}
.ec-question textarea{
margin-bottom: 10px;
white-space: pre-wrap;
}
.ec-checkbox-question .checkbox input[type=checkbox]{
margin-left: 0;
cursor: pointer;
position: absolute;
left: 15px;
top: 15px;
box-sizing: border-box;
}
.ec-checkbox-question .checkbox input[type=checkbox]:checked+label{
border: 1px #1d5ca3 solid;
}
.ec-radio .checkbox input[type=radio]:checked+label{
border: 1px #1d5ca3 solid;
}
.ec-radio .ec-errorMessage{
font-size: 14px;
margin-bottom: 15px;
color: #e00000;
}
.ec-checkbox-question .ec-errorMessage{
font-size: 14px;
margin-bottom: 15px;
color: #e00000;
font-weight: bold;
}
@media screen and (min-width: 768px){
.ec-editRole .ec-required{
position: relative;
right: 0;
font-size: 14px;
}
.ec-question .checkbox label{
margin-bottom: 0;
}
.ec-question .checkbox:last-child,
.ec-question .radio:last-child{
margin-bottom: 35px;
}
.ec-question .checkbox:hover,
.ec-question .radio:hover{
background-color: #fbfbfb;
}
}
/*-------------------------------------------------
フォーム（確認画面）
----------------------------------------------- */
.confirm_form .ec-borderedDefs{
border: 1px #ddd solid;
}
.confirm_form .ec-borderedDefs dl{
padding:0;
border: 1px #ddd solid;
}
.confirm_form .ec-borderedDefs dt{
background-color: #f5f5f5;
border-right: 1px #ddd solid;
/* padding-top: 17px;
padding-left: 20px; */
padding: 18px;
padding-bottom: 14px;
}
.confirm_form .ec-borderedDefs dd{
line-height: 1.4;
padding: 20px;
margin-left: 5px;
}
.confirm_form .ec-label{
padding-top: 3px;
}
.ec-required{
margin-bottom: 4px;
}
@media screen and (max-width: 767px) {
.confirm_form .ec-borderedDefs dt{
/* padding-top: 9px; */
padding: 10px;
padding-bottom: 4px;
border-right: none;
border-bottom: 1px #ddd solid;
}
}
/*-------------------------------------------------
スライダーエリア
----------------------------------------------- */
.pc_ec-sliderRole {
width: 66%;
margin-right: 25px;
}
*{
min-width: 0;
min-height: 0;
}
.ec-layoutRole__contentTop{
display: flex;
max-width: 1180px;
margin: auto;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
margin-top: 25px;
}
.ec-layoutRole__contents{
margin-top: 25px;
}
@media screen and (max-width: 768px) {
.ec-layoutRole__contentTop{
width: 100%;
}
.sp_ec-sliderRole{
margin-bottom: 0;
}
.sp_ec-sliderRole_deadline{
border:1px #E00000 solid;
padding: 8px 10px;
margin-bottom: 15px;
color: #333;
}
}
@media screen and (max-width: 768px){
.ec-layoutRole__contentTop{
padding-left: 15px;
padding-right: 15px;
/* margin-top: 75px; */
}
/* .ec-layoutRole__contents{
margin-top: 75px;
} */
.ec-layoutRole__contents{
margin-top: 12px;
}
}
@media screen and (min-width: 768px) and (max-width: 1100px){
.ec-layoutRole__contentTop{
margin-top: 25px;
}
}
/* goodp V002.5 パスワード表示切り替え */
.password-field input {
display: inline;
border: none;
width: 92%;
margin-bottom: 0px;
}
.password-field {
border: 1px solid #ccc;
width: 100%;
border-radius: 4px;
margin-bottom: 16px;
background-color: #fff;
background-image: none;
}
.password-field:focus-within {
box-shadow: none;
border-color: #3c8dbc;
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.error .password-field {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0;
}
::-ms-reveal {
display: none;
}
@media (any-hover: hover) {
.password-toggle:hover {
opacity: 0.7;
}
}
@media screen and (max-width: 768px) {
.password-field input {
width: 90%;
}
}
.block_body .password-field input {
height: 42px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.block_body .password-field{
border-radius: 0px;
}
.block_body .password-field:focus-within {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
border-color: #66afe9;
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
/* goodp V002.5 パスワード表示切り替え ここまで*/
/*-------------------------------------------------
PCログイン(ログイン前)
-------------------------------------------------*/
#login_area{
width: 375px;
}
.pc-login {
padding-right: 13px;
padding-left: 0;
height: 52px;
}
/* goodp V002.5 不要なCSSを削除 */
.pd12 {
padding-top: 12px;
}
/* goodp V003 株主番号 */
.login_stockholder_num {
display: inline-block;
padding: 0 .3em;
font-size: 16px;
}
#login_form{
background-color: #F5F5F5;
border: 1px #DDDDDD solid;
padding: 27px 30px;
border-radius: 4px;
box-shadow: 3px 3px 6px rgba(0,0,0,.05);
height: 500px;
}
#login_area h2{
font-size: 23px;
margin-bottom: 22px;
border-bottom: 1px #333 solid;
margin-top: 18px;
}
.login_title{
padding-bottom: 10px;
}
.login_btn{
background-color: var(--accentcolor);
height: 52px;
border: none;
border-radius: 36px;
color: #fff;
font-size: 18px;
margin-top: 33px;
padding-top: 10px;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
outline: 0px auto -webkit-focus-ring-color;
outline-offset: 0px;
}
.btn.active, .btn:active{
box-shadow: none;
-webkit-box-shadow: none;
}
.login_btn:focus, .login_btn:hover{
color: #fff;
}
@media screen and (min-width: 768px) {
.login_btn:hover ,.login_btn:focus{
background-color: var(--accentcolor-hover);
color: #fff;
}
.ec-off2Grid__cell #login_form{
padding: 27px 65px;
width: 73%;
margin: 0 auto;
min-width: 450px;
}
}
.block_body{
margin-top: 30px;
}
.block_body p{
margin-bottom: 5px;
}
.block_body .font-size-sm a{
display: block;
margin: auto;
color: #333333;
margin-top: 8px;
text-align: center;
}
.ec-off2Grid__cell #login_form{
height: auto;
}
.ec-off2Grid__cell .block_body{
margin-top: 20px;
}
.ec-off2Grid__cell .login_btn{
margin-top: 25px;
}
#login_mypage .input-group{
display: flex;
}
#login_mypage .col-xs-7{
width: 64.333333%;
}
#login_mypage .col-md-7{
width: 64.333333%;
}
/*-------------------------------------------------
PCログイン（ログイン後）
-------------------------------------------------*/
.afterlogin_panel{
border: 1px #DDDDDD solid;
border-radius: 4px;
box-shadow: 3px 3px 6px rgba(0,0,0,.05);
height: 500px;
}
.block_up{
background-color: var(--triangle-color);
/* border-bottom: 3px #DDDDDD solid; */
/* display: flex; */
align-items: center;
/* padding: 11px 20px 9px; */
height: 145px;
position: relative;
}
.block_up .user_name{
font-size: 20px;
margin-bottom: 0;
}
.block_up .user_icon{
position: absolute;
top: 63%;
left: 50%;
width: 110px;
height: 110px;
transform: translateX(-50%);
}
.user_icon::before{
content:"";
display: block;
width: 110px;
height: 110px;
border-radius: 50%;
background: #F5F5F5;
border: 2px #fff solid;
position: absolute;
box-shadow: 0 1px 6px rgba(0,0,0,.08);
top: -2px;
}
.user_icon::after{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 48px;
height: 48px;
background-color: #333;
position: absolute;
top: 29px;
left: 35px;
}
.user_info p:first-child{
margin-bottom: 18px;
font-size: 25px;
line-height: 1.3;
/* min-height: 65px; */
color: #333;
}
.block_down{
background-color: #fff;
/* margin-bottom: 25px; */
text-align: center;
padding: 25px 27px;
}
.user_info{
margin-top: 60px;
min-height: 105px;
}
.under_user_info{
margin-top: 50px;
}
.block_down_circle{
background-color: #FFF4F1;
text-align: center;
width: 230px;
height: 230px;
border-radius: 50%;
margin-top: 20px;
margin-bottom: 18px;
display: inline-grid;;
align-content: center;
line-height: 40px;
}
.block_down_circle p{
position: absolute;
left: 26%;
top: 50%;
margin-bottom: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.block_down_circle .price02-default{
font-size: 35px;
}
#login_area .block_down a{
background-color: var(--maincolor);
color: #fff;
padding: 15px 40px;
padding-bottom: 12px;
text-align: center;
border-radius: 4px;
font-weight: bold;
font-size: 17px;
/* width: 85%; */
margin: auto;
margin-top: 15px;
display: block;
position: relative;
}
@media screen and (min-width: 768px) {
#login_area .block_down a:hover{
background-color: var(--maincolor-hover);
text-decoration: none;
}
}
#login_area .block_down a::after{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 2rem;
height: 2rem;
background-color: #fff;
position: absolute;
top: 30%;
right: 10px;
}
.ec-layoutRole .ec-layoutRole__contentTop{
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 768px) and (max-width: 1100px){
/*ログイン前*/
#login_area{
width: 41%;
max-width: 342px;
}
.pc_ec-sliderRole{
width: 60%;
margin-right: 15px;
margin-left: 0;
}
#login_form{
padding: 15px 17px;
height: 410px;
}
#login_form p{
font-size: 14px;
}
#login_area h2{
font-size: 18px;
margin-bottom: 12px;
}
.block_body p{
margin-bottom: 2px;
}
.login_btn{
height: 43px;
font-size: 16px;
margin-top: 25px;
}
.block_body{
margin-top: 16px;
}
.block_body .font-size-sm a{
font-size: 13px;
width: 90%;
}
.pc-login{
height: 48px;
}
/*ログイン後*/
.block_down_circle{
width: 170px;
height: 170px;
margin-bottom: 20px;
line-height: 32px;
}
.block_down_circle .price02-default{
font-size: 24px;
}
.block_down p:last-child{
font-size: 15px;
}
#login_area .block_down a{
padding: 15px 29px;
padding-bottom: 12px;
font-size: 15px;
margin-top: 15px;
}
.block_up{
/* padding: 10px 15px 6px 15px; */
height: 120px;
}
.block_up .user_name{
font-size: 17px;
}
.block_down{
/* margin-bottom: 15px; */
padding: 10px 17px;
}
.user_info{
min-height: 90px;
}
.user_info p:first-child{
font-size: 22px;
margin-bottom: 14px;
/* min-height: 50px; */
}
.block_up .user_icon{
width: 95px;
height: 95px;
}
.afterlogin_panel{
height: 410px;
}
.under_user_info{
margin-top: 30px;
}
.user_icon::before{
width: 95px;
height: 95px;
}
.user_icon::after{
width: 45px;
height: 45px;
top: 23px;
left: 30px;
}
}
@media (max-width: 767px){
#login_area{
width: auto;
}
.afterlogin_panel{
margin-top: 15px;
height: auto;
}
.under_user_info {
margin-top: 25px;
}
.block_up{
height: 85px;
}
.block_up .user_icon{
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 82px;
height: 82px;
}
.user_icon::before{
width: 82px;
height: 82px;
}
.user_icon::after{
width: 39px;
height: 39px;
top: 19px;
left: 25px;
}
.user_info{
margin-top: 28px;
min-height: 75px;
}
.user_info p:first-child{
font-size: 21px;
}
.block_down{
padding-bottom: 18px;
}
#login_area .block_down a{
margin-top: 0;
}
#login_area .block_down a:hover,
#login_area .block_down a:focus{
text-decoration: none;
}
#login_area .block_down a::after{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 2rem;
height: 2rem;
background-color: #fff;
position: absolute;
top: 30%;
right: 10px;
-webkit-transform:rotate(-90deg);
}
}
/*-------------------------------------------------
PCサイドカテゴリ
-------------------------------------------------*/
details.active>summary {
background-color: #337ab7;
}
details.active>summary>a {
color: #fff;
}
/**
* list-style: none; ←デフォルト三角削除（Chrome非対応）
* cursor: pointer; ←カーソルをポインターに
**/
details summary {
display: block;
cursor: pointer;
padding: 5px;
color: #333;
font-size: 17px;
font-weight: bold;
padding-bottom: 3px;
}
/**
* Chrome用のデフォルト三角削除
**/
details summary::-webkit-details-marker {
display: none;
}
.category_flex{
display: flex;
background: linear-gradient(to bottom, #FFFFFF, #F5F5F5);
border: 1px #DDDDDD solid;
align-items: center;
border-radius: 4px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
/* height: 66px; */
justify-content: space-around;
}
#category_area{
margin-right: auto;
}
/* @media screen and (max-width: 768px){
.category_flex{
height: auto;
justify-content: space-around;
}
} */
@media screen and (min-width: 768px){
.category_flex{
height: 66px;
/* justify-content: space-around; */
}
}
/**
ポイントから選ぶ
**/
.menu_category_point{
position: relative;
transition: transform 0.4s;
cursor: pointer;
display: block;
cursor: pointer;
padding: 17px 25px 13px 18px;
color: #333;
font-size: 17px;
font-weight: bold;
}
.inner_menu{
display: none;
position: absolute;
z-index: 2;
background: #f5f5f5;
left: -1px;
top: 98px;
width: 100%;
padding: 18px 28px;
}
.inner_menu nav{
max-height: 330px;
overflow-y: auto;
overscroll-behavior: contain;
}
.category_nav_pc_close{
cursor: pointer;
background: #777777;
color: #fff;
padding: 8px 0px;
border-radius: 3px;
width: 24%;
max-width: 110px;
margin: 0 auto;
text-align: center;
padding-top: 9px;
}
@media screen and (min-width: 768px){
.category_nav_pc_close:hover{
background: #5d5d5d;
}
}
/*------------------------------------
メニュークリックした後 ↓
------------------------------------*/
.nav_open .inner_menu{
display: block;
}
.nav_open .inner_menu_category_point{
display: flex;
flex-wrap: wrap;
padding-left: 0;
}
.nav_open .overlay {
opacity: 0.5;
visibility: visible;
}
@media screen and (min-width: 768px) {
.menu_category_point:hover {
color: var(--maincolor);
}
.menu_category_point:hover::after{
color: var(--maincolor);
}
.menu_category_point::before{
position: absolute;
bottom: 62px;
left: 49%;
content: '';
width: 0;
height: 2px;
background-color: var(--maincolor);
transition: .3s;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.menu_category_point:hover::before{
width: 98%;
}
.menu_category_point:focus {
color: var(--maincolor);
}
.menu_category_point:focus::after{
color: var(--maincolor);
}
.menu_category_point:focus::before{
width: 98%;
}
}
.menu_category_hover{
color: var(--maincolor);
}
.menu_category_hover::after{
color: var(--maincolor);
}
.menu_category_hover::before{
width: 97%;
}
/*------------------------------------
メニュークリック後メニュー外の背景 ↓
------------------------------------*/
.overlay {
background-color: #000;
cursor: pointer;
height: 100vh;
left: 0;
opacity: 0;
position: fixed;
top: 168px;
transition: all 0.4s;
visibility: hidden;
width: 100vw;
z-index: 1;
}
/**
吹き出しの三角部分
**/
.triangle_menu_category_point{
position: absolute;
border-style: solid;
border-color: transparent transparent #f5f5f5 transparent;
border-width: 0 55px 23px 55px;
left: 58px;
top: -21px;
}
.list_select_products_nav{
list-style: none;
width: 32%;
text-align: center;
display: table;
min-height: 85px;
margin: 0 5px 5px 0;
}
.list_select_products_nav a{
font-size: 18px;
color: #333;
font-family: 'Verdana';
display: table-cell;
padding: 0px 10px;
background-color: #fff;
border: 1px #DDDDDD solid;
border-radius: 4px;
vertical-align: middle;
}
.list_select_products_nav_sp{
list-style: none;
width: 48%;
text-align: center;
display: table;
min-height: 65px;
margin: 0 5px 5px 0;
}
.list_select_products_nav_sp a{
font-size: 18px;
color: #333;
font-family: 'Verdana';
display: table-cell;
padding: 0px 10px;
background-color: #fff;
border: 1px #DDDDDD solid;
border-radius: 4px;
vertical-align: middle;
}
.list_select_products_nav_sp a:focus, .list_select_products_nav_sp a:hover{
text-decoration: none;
}
.active_nav{
color: #fff;
background-color: var(--maincolor-hover);
border: 1px var(--maincolor-hover) solid;
}
@media screen and (min-width: 768px) {
.list_select_products_nav a:hover{
color: #fff;
text-decoration: none;
background-color: var(--maincolor-hover);
border: 1px var(--maincolor-hover) solid;
}
}
@media screen and (max-width: 768px){
.navbar_sp{
margin-top: 10px;
margin-bottom: 10px;
}
.menu_category_point{
position: relative;
padding: 10px 0;
padding-bottom: 8px;
font-size: 14px;
font-weight: normal;
}
.menu_category_point::after{
font-size: 15px;
top: 12px;
right: -8px;
}
.inner_menu{
left: 0px;
top: 64px;
padding: 18px 20px;
padding-bottom: 20px;
}
.triangle_menu_category_point{
left: 11%;
top: -11px;
}
.overlay{
top: 187px;
}
.category_nav_pc_close{
width: 38%;
max-width: 95px;
margin-bottom: 12px;
}
.inner_menu_category_point details summary{
width: 146px;
}
.inner_menu_category_point a{
font-size: 16px;
}
}
/**
カテゴリから選ぶ
**/
.menu_category_category{
position: relative;
display: block;
cursor: pointer;
padding: 17px 25px 13px;
color: #333;
font-size: 17px;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.menu_category_category:hover {
color: var(--maincolor);
}
.menu_category_category:hover::after{
color: var(--maincolor);
}
.menu_category_category::before{
position: absolute;
bottom: 62px;
left: 50%;
content: '';
width: 0;
height: 2px;
background-color: var(--maincolor);
transition: .3s;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.menu_category_category:hover::before{
width: 96%;
}
}
.menu_category_hover2{
color: var(--maincolor);
}
.menu_category_hover2::after{
color: var(--maincolor);
}
.menu_category_hover2::before{
width: 96%;
}
/**
吹き出しの三角部分
**/
.triangle_menu_category_category{
position: absolute;
border-style: solid;
border-color: transparent transparent #f5f5f5 transparent;
border-width: 0 55px 23px 55px;
left: 275px;
top: -21px;
}
.inner_menu_category{
display: none;
position: absolute;
z-index: 2;
background: #f5f5f5;
left: -1px;
top: 98px;
width: 100%;
padding: 18px 28px;
}
.inner_menu_category nav{
max-height: 330px;
/* max-height: 380px; */
overflow-y: auto;
overscroll-behavior: contain;
}
/*------------------------------------
メニュークリックした後 ↓
------------------------------------*/
.nav_open2 .inner_menu_category{
display: block;
}
.nav_open2 .inner_menu_category_category{
display: flex;
flex-wrap: wrap;
padding-left: 0;
}
.nav_open2 .overlay {
opacity: 0.5;
visibility: visible;
}
@media screen and (max-width: 768px){
.menu_category_category{
position: relative;
padding: 10px 0;
padding-bottom: 8px;
font-size: 14px;
font-weight: normal;
}
.menu_category_category::after{
font-size: 15px;
top: 12px;
right: -18px;
}
.inner_menu_category{
left: 0px;
top: 64px;
padding: 18px 20px;
}
.triangle_menu_category_category{
left: 61%;
top: -11px;
}
.inner_menu_category_category details summary{
width: 146px;
}
.inner_menu_category_category a{
font-size: 16px;
}
}
@media (min-width: 768px) and (max-width: 1100px){
.overlay{
top:158px ;
}
.triangle_menu_category_category{
left: 218px;
top: -19px;
}
.inner_menu_category{
top: 92px;
}
.triangle_menu_category_point{
left: 45px;
top: -19px;
}
.inner_menu{
top: 92px;
}
}
/**
すべての商品から選ぶ
**/
.menu_category_all a{
display: block;
cursor: pointer;
padding: 5px;
color: #333;
font-size: 17px;
font-weight: bold;
padding: 17px 18px 17px 25px;
}
@media screen and (min-width: 768px) {
.menu_category_all a:hover {
color: var(--maincolor);
}
.menu_category_all::before{
position: absolute;
bottom: 63px;
left: 84.5%;
content: '';
width: 0;
height: 2px;
background-color: var(--maincolor);
transition: .3s;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.menu_category_all:hover::before{
width: 31%;
}
}
/*-------------------------------------------------
ヘッダーレイアウト1段目
----------------------------------------------- */
#header{
display: flex;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
align-items: center;
}
.container:before{
content: none;
}
.navbar:before{
content: none;
}
.navbar:after{
content: none;
}
.container:after{
content: none;
}
.navbar-header{
display: flex;
margin-top: 6px;
align-items: center;
justify-content: space-between;
}
.container>.navbar-header{
margin-left: 15px;
margin-right: 0px;
}
.personalpoint_red{
background-color: #E00000;
padding:20px 40px 10px 10px;
}
.personalpoint_red p{
color: #fff;
text-align: left;
font-size: 17px;
}
.personalpoint{
background-color: #FFF4F1;
padding: 9px 18px;
justify-content: space-between;
display: flex;
height: 68px;
flex-wrap: wrap;
align-items: center;
max-width: 400px;
padding-bottom: 7px;
}
.personalpoint_left{
margin-left: 5px;
width: 45px;
margin-top: 6px;
}
.loginnow{
background-color: #E00000;
padding:4px 5px 3px 5px;
border-radius: 3px;
color: #fff;
font-size: 12px;
margin-left: 5px;
}
.user_num{
margin-bottom: 5px;
font-size: 14px;
}
.personalpoint_left .user_icon_header{
position: relative;
}
.personalpoint_left .user_icon_header .svg{
position: relative;
z-index: 1;
}
.personalpoint_left .user_icon_header::after{
content:"";
display: block;
width: 45px;
height: 45px;
border-radius: 50%;
background: #fff;
position: absolute;
left: -13px;
top: -10px;
}
.personalpoint .user_name{
font-size: 15px;
margin-bottom: 0;
}
.header_right{
display: flex;
justify-content: space-between;
align-items: end;
height: 77px;
}
.navbar-right-right a{
color: #333;
display: block;
position: relative;
margin-left: 30px;
}
.navbar-right-right a:first-child{
margin-bottom: 2px;
}
.navbar-right-right a:nth-child(2){
margin-bottom: 2px;
}
.navbar-right-right a::before{
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
left: -13px;
margin-top: -6px;
}
/*PC 電話番号*/
.textTel {
text-align: center;
border: 1px #333 solid;
}
.textTel p:first-child{
background: #333;
color: #fff;
padding-top: 5px;
padding-bottom: 3px;
margin-bottom: 5px;
font-size: 13px;
border: none;
}
.textTel p:last-child{
padding-left: 15px;
padding-right: 15px;
font-size: 22px;
font-weight: bold;
margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
.personalpoint_red{
background-color: #E00000;
padding: 9px 15px;
display: flex;
justify-content: space-between;
align-items: center;
height: 62px;
}
.personalpoint_red p{
font-size: 13px;
margin-bottom: 0;
}
.personalpoint_red a{
background: #fff;
border-radius: 50px;
padding: 9px 18px;
padding-bottom: 5px;
color: #333;
}
.personalpoint_red a:hover{
text-decoration: none;
}
.personalpoint .user_name{
font-size: 15px;
}
.personalpoint{
padding: 7px 20px;
max-width: 100%;
height: 62px;
justify-content: flex-start;
}
.price02-default{
font-size: 21px;
margin-bottom: 0;
}
.personalpoint_left p:last-child{
margin-bottom: 0px;
}
.navbar-header .sponlytext img{
padding-left: 15px;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.personalpoint .user_name{
font-size: 14px;
}
.personalpoint .user_num{
margin-bottom: 2px;
font-size: 12px;
}
.personalpoint{
padding: 10px 7px;
height: 60px;
width: 280px;
padding-bottom: 8px;
justify-content: space-around;
}
.personalpoint_left{
margin: 5px 8px 0 8px;
width:auto ;
}
.personalpoint_left .user_icon_header::after{
width: 40px;
height: 40px;
left: -10px;
top: -7px;
}
.navbar-right-right a{
font-size: 13px;
margin-left: 20px;
}
.personalpoint_right .price02-default{
font-size: 17px;
}
.navbar-header{
width: 67%;
justify-content: flex-start;
margin-top: 0;
}
.textTel{
height: 60px;
}
.textTel p:first-child{
font-size: 12px;
margin-bottom: 5px;
}
.textTel p:last-child{
font-size: 15px;
padding: 2px 5px 0;
}
.navbar-header .pconlytext:first-child{
width: 56%;
max-width: 210px;
}
.personalpoint_red{
padding: 12px 10px 0;
height: 60px;
display: grid;
place-items: center center;
}
.header_right{
height: 65px;
}
}
/*-------------------------------------------------
ヘッダーレイアウト2段目
----------------------------------------------- */
/*ブロックタイトル変更*/
.panel-title {
font-weight: normal;
font-size: 1.2rem;
margin-top: 2px;
}
.ec-layoutRole__header_shadow{
box-shadow: 0 3px 3px rgba(0,0,0,.07) ;
position: sticky;
z-index: 1001;
top: 90px;
width: 100%;
padding: 10px 20px;
background: #fff;
box-sizing: border-box;
padding-top: 1px;
}
@media screen and (max-width: 768px) {
.ec-layoutRole__header{
width: 100%;
display: block;
padding-left: 15px;
padding-right: 15px;
}
/* .ec-layoutRole__header_shadow{
position: fixed;
z-index: 999;
top: 124px;
padding:0;
} */
}
@media screen and (min-width: 768px){
.ec-layoutRole__header{
display: flex;
max-width: 1140px;
margin: auto;
justify-content: flex-end;
align-items: center;
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 768px){
.ec-layoutRole__header_shadow{
position: fixed;
z-index: 999;
top: 124px;
padding:0;
}
}
/*-------------------------------------------------
株主様情報ボタン
----------------------------------------------- */
.user_btn{
width: 6%;
height: 0%;
background: linear-gradient(to bottom, #FFFFFF, #F5F5F5);
border: 1px #DDDDDD solid;
font-size: 12px;
padding: 10px 0px;
color: #333;
margin-left: 13px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
height: 66px;
}
@media screen and (min-width: 768px){
.user_btn:hover{
text-decoration: none;
background: linear-gradient(to bottom, #fbfbfb, #ececec);
}
}
.inner_user_btn{
text-align: center;
}
/*-------------------------------------------------
カゴの中ボタン
----------------------------------------------- */
.ec-headerRole__cart a{
color: #333;
}
.cart_flex{
display: flex;
background: linear-gradient(to bottom, #FFFFFF, #F5F5F5);
border: 1px #DDDDDD solid;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
border-radius: 3px;
height: 66px;
position: relative;
}
.title_background{
padding: 10px 13px;
text-align: center;
}
@media screen and (min-width: 768px){
.ec-headerRole__cart a:hover{
text-decoration: none;
}
.ec-headerRole__cart a:focus{
outline: none;
}
.cart_flex:hover{
background: linear-gradient(to bottom, #fbfbfb, #ececec);
}
}
.information{
margin-bottom: 0;
padding: 10px 26px 10px 0;
position: relative;
z-index: 0;
}
.information::before{
content: "";
display: block;
width: 22px;
height: 66px;
background-color: #E00000;
position: absolute;
top: -1px;
right: 0;
z-index: -1;
border-radius: 0 3px 3px 0;
}
.information::after{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 2rem;
height: 2rem;
background-color: #fff;
position: absolute;
top: 32%;
right: 0px;
}
.information .item{
margin-bottom: 0;
}
.information .total{
margin-bottom: 0;
font-family: Verdana;
}
.information .price02-default{
font-size: 18px;
}
.panel-default>.panel-heading{
border: none;
}
.cart_flex .cart-total-quantity{
display: none;
}
/* ==============================================
ヘッダー（768px~1100pxのスタイル）
=============================================== */
@media (min-width: 768px) and (max-width: 1100px){
.menu_category_point{
font-size: 15px;
padding: 18px 12px;
}
.menu_category_category{
font-size: 15px;
padding: 18px 12px;
}
.menu_category_all a{
font-size: 15px;
padding: 18px 12px;
}
.cart_flex .title_background{
padding: 10px 5px;
width: 65px;
}
.information{
font-size: 13px;
padding: 12px 23px 0px 0;
display: none;
}
.ec-layoutRole__header_shadow{
padding: 5px 15px 10px;
top: 78px;
position: sticky;
}
.user_btn{
margin-left: 10px;
width: 65px;
}
.personalpoint_red p{
font-size: 13px;
margin-bottom: 10px;
}
.cart_flex .cart-total-quantity{
display: block;
position: absolute;
top: -10%;
right: -3%;
font-size: 13px;
}
.navbar-default{
height: 78px;
}
}
/* ==============================================
ヘッダー
=============================================== */
/* レイアウト
----------------------------------------------- */
#errorHeader {
color: #d44950;
font-weight: bold;
font-size: 12px;
background-color: #FEB;
text-align: center;
padding: 5px;
}
/* -----------------------------------------------
SPヘッダーナビ
----------------------------------------------- */
/* ハンバーガーメニュー（メニュー） */
.hamburger_menu{
padding:8px 15px 5px 10px ;
min-width: 65px;
}
.hamburger{
width: 29px;
height: 21px;
position: relative;
margin: 0 auto;
}
.hamburger span{
position: absolute;
width: 100%;
height: 2px;
background-color: #333;
border-radius: 10px;
transition: all .4s;
}
.hamburger span:first-of-type{/* ハンバーガーメニューの1番目の線 */
top: 0;
}
.hamburger span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
top: 50%;
}
.hamburger span:last-of-type{/* ハンバーガーメニューの3番目の線 */
top: 100%;
}
.hamburger_title {
color: #333;
font-size: 1rem;
margin-top: 10px;
text-transform: uppercase;
}
.slide-menu{
background-color:#fff;
position: fixed;
top: 130px;
width: 100%;
left: 0;
transform: translateX(100%);
transition: .5s;
list-style: none;
padding: 0;
height: 90%;
padding-bottom: 90px;
overflow-x: auto;
}
.slide-menu li{
color: #333;
line-height: 350%;
text-align: center;
border-top: 1px #ddd solid;
}
.slide-menu li a{
color: #333;
display: block;
}
.hamburger.active span:first-of-type{/* ハンバーガーメニューの1番目の線 */
top: 50%;
transform: rotate(45deg);
}
.hamburger.active span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
opacity: 0;/* 透明にする */
}
.hamburger.active span:last-of-type{/* ハンバーガーメニューの3番目の線 */
top: 50%;
transform: rotate(-45deg);
}
.slide-menu.active{
transform: translateX(0);
}
.hamburger_close{
cursor: pointer;
background: #666666;
color: #fff;
padding: 8px 0px;
border-radius: 3px;
width: 25%;
margin: 0 auto;
text-align: center;
margin-top: 30px;
}
/*for mobile*/
#mobile-nav .nav>li>a {
padding-left: 0;
padding-right: 0;
}
.navbar-default {
background-color: white;
border-color: #fff;
}
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ
----------------------------------------------- */
#mobile-nav .pd5 {
padding: 5px 1.0em;
}
#mobile-nav .pd5 p {
margin: 0;
}
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ
----------------------------------------------- */
/* ヘッダー調整 */
.navbar-default {
background: #fff;
position: sticky;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
padding: 0px 20px 8px 20px;
box-sizing: border-box;
margin-bottom: 0;
box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 3px;
}
.navbar-brand {
background: url(/html/template/default/assets/img/common/logo.jpg) !important;
width: 290px;
height: 75px;
text-indent: -9999px;
}
.sp_menu{
display: flex;
}
.sp_menu .panel-title{
font-size: 1.1rem;
text-align: center;
margin-top: 2px;
}
.navbar-header::before{
content: none;
}
.navbar-header::after{
content: none;
}
.navbar-header .visible-xs{
width: 50%;
}
.navbar-default .btn-link{
color: #333;
}
.navbar-default .btn{
padding:6px 8px;
}
.page-header {
border-bottom: none;
font-weight: bold;
padding-left: 1em;
padding-top: 2px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 1%, #61b6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 1%, #61b6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 1%, #61b6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#61b6f6', GradientType=1 ); /* IE6-9 */
}
/*ドロップダウンメニュー*/
.nav>li, .nav col-xs-3 {
position: static;
}
#menu li ul li {
margin: 0;
padding: 0;
width: 100%;
border: none;
text-align: left;
font-weight: bold;
}
#menu li ul li a {
display: inline-block;
width: 100%;
padding: 7px;
}
#menu li ul li a:hover {
background: #999;
color: #fff;
}
.navbar-default .navbar-nav>li>a {
color: #333;
background:none;
}
.navbar-category>a {
margin-left: 20px
}
/*sp カート数量*/
.bg-red {
background-color: #E00000 !important;
}
#menu .cart-total-quantity {
position: absolute;
top: 2%;
left: 55%;
padding: 3px 5px;
font-size: 9px;
}
/*-------------------------------------------------
PC,SPヘッダー切り替え
-------------------------------------------------*/
@media screen and (max-width: 768px) {
#header{
display: block;
padding: 0;
}
.navbar-default{
padding: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1100px){
.navbar-default{
padding: 5px 15px;
}
#header{
display: flex;
}
}
/*-------------------------------------------------
PC,SPテキスト表示非表示切り替え
-------------------------------------------------*/
/* .pconlytext {
display: block;
}
.sponlytext {
display:none;
} */
/*スマホの指定*/
/* @media screen and (max-width: 767px) {
.pconlytext {
display: none!important;
}
.sponlytext {
display: block!important;
}
} */
.pconlytext {
display: none;
}
.sponlytext {
display:block;
}
@media screen and (min-width: 768px) {
.pconlytext {
display: block!important;
}
.sponlytext {
display: none!important;
}
}
/*-------------------------------------------------
フッター
-------------------------------------------------*/
.ec-footerRole .ec-footerRole__inner {
background-color: #333333;
padding-bottom: 20px;
}
.ec-footerRole {
background-color: #333333;
}
#pcfooter a {
color: #ffffff;
text-decoration: none;
}
#pcfooter ul li:not(:last-child) {
border-right: solid 1px #fff;
}
.ec-footerTitle{
padding:20px;
}
.ec-footerTitle__white{
display: flex;
justify-content: space-between;
background: #fff;
padding: 30px 55px 30px 30px;
width: 620px;
margin: auto;
position: relative;
align-items: center;
}
.footer_tel{
text-align: left;
}
.footer_tel::before{
content:"";
display:inline-block;
width:1px;
height:67px;
background-color:#333;
position:absolute;
top:26%;
left:54%;
}
.footer_tel p{
color: #333;
margin-bottom: 0;
}
.footer_tel h3{
color: #333;
margin-top: 6px;
margin-bottom: 4px;
font-weight: 600;
}
.ec-footerTitle__copyright{
text-align: center;
margin-top: 25px;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.ec-footerNavi .ec-footerNavi__link a:hover{
opacity: 1;
}
#pcfooter a:hover{
text-decoration: underline;
}
.ec-footerRole {
margin-top: 0px;
}
}
@media screen and (max-width: 767px) {
.ec-footerTitle__white {
width: 100%;
padding:30px;
}
.footer_tel{
margin: auto;
}
.footer_tel::before{
display: none;
}
.footer_tel h3{
font-size: 28px;
}
.footer_tel p{
font-size: 17px;
}
.ec-footerTitle:last-child{
padding: 0;
}
.ec-footerRole {
margin-top: 0px;
}
}
/*-------------------------------------------------
個人情報保護方針
-------------------------------------------------*/
#privacy h2 {
font-size: 24px;
padding: 0.6em 0;
font-weight: bold;
color: #000000;
padding: 0.6em 0.6em;
border-top: 2px solid #778899;
border-bottom: 4px solid #778899;
border-left: 2px solid #778899;
border-right: 2px solid #778899;
}
@media screen and (max-width: 767px) {
#privacy h2 {
font-size: 20px;
}
}
#privacy {
line-height: 1.5em;
}
#privacy .lead {
font-size: 14px;
line-height: 1.8em;
}
#privacy h3 {
font-size: 18px;
font-weight: bold;
color: #000000;
margin-top: 2em;
padding-bottom: .6em;
border-bottom: 1px solid #C0C0C0;
}
#privacy ol {
margin:0;
padding:0;
margin-left: 1em;
text-indent: -1em;
list-style-type: none;
}
#privacy ol li {
text-indent: -1em;
margin-left:1em;
}
@media screen and (max-width: 767px) {
#privacy .pconly {
display: none;
}
}
#privacy .sponly {
display: none;
}
@media screen and (max-width: 767px) {
#privacy .sponly {
display: block;
clear: both;
padding: 2px 0;
font-size: small;
}
}
/*-------------------------------------------------
よくあるご質問（ナビは、株主様情報のブロックに記載）
-------------------------------------------------*/
#faq {
line-height: 1.5em;
}
#faq h3 {
font-size: 18px;
margin-top: 0.5em;
padding: .8em;
border: 1px #333 solid;
font-weight: bold;
}
#faq #acMenu {
margin-bottom: 3em;
}
#faq #acMenu:last-child {
margin-bottom: 0;
}
#faq #acMenu h4{
display:block;
border-bottom: #999 1px dotted;
cursor:pointer;
padding: 1em 0;
position: relative;
padding-left: 20px;
font-size: 15px;
margin-bottom:0;
}
#faq #acMenu h4 span {
display:block;
cursor:pointer;
position: relative;
padding-left: 20px;
}
#faq #acMenu h4 span::before {
content: '';
width: 6px;
height: 6px;
border: 0px;
border-bottom: solid 2px #000;
border-right: solid 2px #000;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}
#faq #acMenu h4 span.active::before {
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #000;
border-left: solid 2px #000;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}
#faq #acMenu .subInner {
background:#f5f5f5;
padding: 1em;
display:none;
}
@media screen and (max-width: 767px){
.col-xs-6, .col-sm-6 ,.col-md-3{
padding-right: 4px;
padding-left: 4px;
}
.naviButton{
margin-right: -3px;
margin-left: -3px;
}
}
/*-------------------------------------------------
ご利用ガイド
-------------------------------------------------*/
#user_guide h2 {
font-size: 24px;
background: #ffffff;
padding: 0.6em 0.4em;
border-top: 2px solid #778899;
border-bottom: 4px solid #778899;
border-left: 2px solid #778899;
border-right: 2px solid #778899;
}
@media screen and (max-width: 767px) {
#user_guide h2 {
font-size: 20px;
}
}
#user_guide {
line-height: 1.2em;
}
#user_guide .naviButton .btn-primary {
background: #dcdcdc;
margin-bottom: 13px;
color: #000000;
border:1px solid #000000;
}
@media screen and (max-width: 375px) {
#user_guide .naviButton .btn-primary {
font-size: 13px;
}
}
#user_guide h3 {
font-size: 18px;
margin-top: 1.5em;
background: #ffffff;
padding: .6em;
padding-bottom: 0.6em;
border-top: 1px solid #778899;
border-bottom: 2px solid #778899;
border-left: 1px solid #778899;
border-right: 1px solid #778899;
}
#user_guide h4 {
font-size: 16px;
margin-top: 2em;
background: #ffffff;
padding: .6em;
border-bottom: 1px solid #778899;
}
#user_guide {
margin-bottom: 4em;
}
#user_guide h5 {
display:block;
border-bottom: #999 1px dotted;
cursor:pointer;
padding: 1em 0;
position: relative;
padding-left: 20px;
font-size: 14px;
margin-bottom:0;
}
#user_guide h5 span {
display:block;
cursor:pointer;
position: relative;
padding-left: 20px;
}
#user_guide h5 span::before {
content: '';
width: 6px;
height: 6px;
border: 0px;
border-bottom: solid 2px #000;
border-right: solid 2px #000;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}
#user_guide h5 span.open::before {
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #000;
border-left: solid 2px #000;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}
#user_guide h6 {
font-weight: bold;
}
.subInner {
background:#F8F8FF;
padding: 1em;
display:none;
}
#user_guide .sponly {
display: none;
}
@media screen and (max-width: 767px) {
#user_guide .sponly {
display: block;
clear: both;
padding: 2px 0;
font-size: small;
}
}
#user_guide dt {
margin-top: 1.4em;
}
#user_guide dd {
margin-left: 1.0em;
}
#category table a:hover {
background: #f5f5f5;
color: #ffffff;
}
/*-------------------------------------------------
トップページ：ブロックごと？
-------------------------------------------------*/
.ec-role{
max-width: 1000px;
margin-bottom: 60px;
padding-left: 0;
padding-right: 0;
}
.ec-role:last-child{
margin-bottom:0;
}
/*TOP各ブロックタイトル*/
.ec-recomendrole>h3 {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 21px;
justify-content: space-between;
}
.ec-recomendrole>h3:after{
background-color: #333; /* 横線の色 */
border-radius: 5px; /* 横線の両端を丸く */
content: "";
flex-grow: 1; /* 横幅いっぱい */
height: 2px; /* 横線の高さ */
margin-left: 15px;
}
@media screen and (max-width: 767px) {
.ec-role{
width: 100%;
margin-bottom: 40px;
}
.ec-recomendrole>h3 {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
justify-content: space-between;
}
}
/*-------------------------------------------------
商品を選ぶブロック
-------------------------------------------------*/
.select_products{
background-color: #F5F5F5;
border: 1px #DDDDDD solid;
padding: 25px 0 20px 0;
}
.select_products:first-child{
margin-bottom: 23px;
}
.select_products:nth-child(2){
margin-bottom: 20px;
}
.inner_select_products{
width: 83%;
margin: auto;
}
.inner_select_products h4{
margin-bottom: 17px;
font-weight: bold;
color: #333;
}
.inner_select_products ul{
padding-left: 0;
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
}
.inner_select_products li{
list-style: none;
width: 24%;
text-align: center;
display: table;
min-height: 85px;
margin: 0 5px 5px 0;
}
.inner_select_products li a{
font-size: 19px;
color: #333;
font-family: 'Verdana';
display: table-cell;
padding: 0px 10px;
background-color: #fff;
border: 1px #DDDDDD solid;
border-radius: 4px;
vertical-align: middle;
}
@media screen and (min-width: 768px) {
.inner_select_products li a:hover{
color: #fff;
text-decoration: none;
background-color: var(--maincolor-hover);
border: 1px var(--maincolor-hover) solid;
}
}
.select_products_all{
text-align: end;
}
.select_products_all a{
position: relative;
color: #333;
font-size: 18px;
}
.select_products_all a::before{
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
left: -13px;
margin-top: -6px;
}
@media screen and (max-width: 767px){
.inner_select_products li a{
font-size: 18px;
}
.inner_select_products li{
width: 49.2%;
min-height: 68px;
}
.inner_select_products{
width: 93%;
}
.select_products{
padding-top: 15px;
}
.inner_select_products li:nth-child(even){
margin-right: 0;
}
.inner_select_products h4{
font-size: 17px;
}
}
@media (min-width: 768px) and (max-width: 1100px){
.inner_select_products{
width: 90%;
}
}
/*-------------------------------------------------
トップメッセージ
-------------------------------------------------*/
#top-well-gnze2 {
display: flex;
padding: 0;
}
.top-well-box1{
background-color: var(--maincolor);
color: #fff;
width: 40%;
padding: 35px 20px 30px 20px;
display: flex;
flex-direction: column;
}
.inner_top-well-box{
margin-top: auto;
margin-bottom: auto;
}
.inner_top-well-box h3{
margin: 0;
line-height:1.2;
}
.inner_top-well-box h4{
margin-bottom: 0;
}
.top-well-box2{
background-color: #fff;
color: #333;
width: 60%;
padding: 35px 20px 30px 20px;
border: 1px #DDDDDD solid;
}
.top-well-box2 p{
line-height: 1.7;
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
#top-well-gnze2 {
display: block;
}
.top-well-box1{
width: 100%;
padding:18px 20px;
}
.inner_top-well-box h3{
font-size: 21px;
}
.inner_top-well-box h4{
font-size: 16px;
margin-top: 8px;
}
.top-well-box2{
width: 100%;
padding: 15px 20px;
}
.top-well-box2 p{
line-height: 1.5;
}
}
/*-------------------------------------------------
お知らせ
-------------------------------------------------*/
.news-panel{
margin-bottom: 20px;
}
.news-panel-heading{
position: relative;
background-color: #F5F5F5;
border-radius: 4px;
padding: 15px 0 10px 0;
border: 1px #e9e9e9 solid;
}
.news-panel-title{
margin-left: 15px;
display: flex;
}
.news-panel-title a{
color: #333;
font-size: 16px;
width: 78%;
display: block;
}
.news-panel-title p{
margin-right: 30px;
}
.news-panel-title a::after{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 2rem;
height: 2rem;
background-color: #333;
position: absolute;
top: 16px;
right: 24px;
}
.news-panel-body{
padding: 15px;
padding-left: 38px;
border: 1px #DDDDDD solid;
border-top: none;
border-radius: 0 0 4px 4px;
}
@media screen and (max-width: 767px){
.news-panel-title{
display: block;
margin-right: 15px;
}
.news-panel-title a{
display: block;
width: 100%;
}
}
/*-------------------------------------------------
商品カード(おすすめ・商品一覧)
-------------------------------------------------*/
@media screen and (min-width: 768px) {
.slider-arrow{
position: relative;
display: inline-block;
/* padding: 10px; */
cursor: pointer;
}
.slider-arrow-prev{
position: absolute;
top: 50%;
left: -10px;
z-index: 1;
}
.slider-arrow-prev::after {
content: '';
width: 12px;
height: 12px;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
position: absolute;
left: 15px;
top: 8px;
}
.slider-arrow-next{
position: absolute;
top: 50%;
right:25px;
z-index: 1;
}
.slider-arrow-next::after {
content: '';
width: 12px;
height: 12px;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
position: absolute;
left: 11px;
top: 8px;
border-radius: 1px;
}
.slider-arrow::before{
border-radius: 50%;
content: '';
width: 38px;
height: 38px;
position: absolute;
left:0px;
top: -5px;
background-color: var(--accentcolor);
}
.slider-arrow.prev-arrow::after {
transform: rotate(-135deg);
}
.slider-arrow.next-arrow::after {
transform: rotate(45deg);
}
}
.ec-shelfGrid__item-name {
font-weight: bold;
}
.ec-productRole__label {
background-color: rgba(255, 255, 255, 0.66);
color: #333;
padding-top: 23px;
padding-bottom: 23px;
touch-action: unset;
position: absolute;
width: 100%;
top: 17%;
font-weight: bold;
text-align: center;
pointer-events: none;
}
.ec-recomend{
margin-bottom: 85px;
}
@media screen and (max-width: 767px){
.ec-recomend{
margin-top: -60px;
}
}
.ec-shelfGrid__item{
border: 1px #DDDDDD solid;
border-radius: 2px;
padding: 0px;
position: relative;
}
.ec-shelfGrid .ec-shelfGrid__item{
margin-bottom: 0px;
}
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd){
padding: 0px;
}
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even){
padding: 0px;
}
.ec-shelfGrid .ec-shelfGrid__item img {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: contain;
}
.ec-shelfGrid__item-moji{
padding: 10px;
margin-bottom: 0;
/* padding-bottom: 0px; */
}
.ec-shelfGrid__item-name{
font-size: 16px;
margin-bottom: 12px;
/* margin-bottom: 16px; */
color: #333;
min-height: 67px;
/* min-height: 47px; */
}
.ec-shelfRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
font-size: 15px;
}
.ec-shelfGrid__item .price02-default{
font-size: 21px;
margin-bottom: 10px;
}
.ec-shelfGrid{
flex-direction: row;
margin-bottom: 0;
}
.ec-shelfGrid .ec-shelfGrid__item-image{
margin-bottom: 4px;
}
.ec-productRole .ec-productRole__category a{
color: #337ab7;
}
/* タイトル */
.ec-searchnavRole__topicpath{
display: flex;
justify-content: space-between;
margin-bottom: 35px;
align-items: center;
}
.ec-topicpath{
border: none;
color: #333;
border-left:6px solid #EEEEEE;
padding: 1px 8px;
padding-right: 20px;
font-size: 25px;
font-weight: normal;
}
.ec-searchnavRole .ec-searchnavRole__counter{
width: auto;
margin-bottom: 0;
}
.ec-topicpath .ec-topicpath__item--active{
font-weight: normal;
text-align: left;
}
/* トップページのみのスタイル */
.ec-role .ec-shelfGrid{
margin-bottom: 0;
}
.ec-shelfGrid a:focus{
outline: 0px auto -webkit-focus-ring-color;
outline-offset: 0px;
}
@media screen and (min-width: 768px) {
/* .ec-shelfGrid a:hover{
box-shadow: 0 3px 6px rgba(0,0,0,.17) ;
} */
.ec-shelfGrid__item-name:hover{
text-decoration: underline;
}
.ec-searchnavRole{
max-width: 1000px;
padding-right: 0;
padding-left: 0;
}
.ec-shelfGrid{
margin-right: 0;
margin-left: 0;
max-width: 1000px;
}
}
@media screen and (min-width: 1101px){
.detail .ec-shelfGrid .ec-shelfGrid__item:not(:nth-child(5n)) {
margin-right: 1.8%;
}
.ec-shelfGrid .ec-shelfGrid__item{
width: calc(92.8% / 5);
margin: 0 8px;
}
.detail .ec-shelfGrid .ec-shelfGrid__item:nth-child(n+6){
margin-top: 26px;
}
.detail .ec-shelfGrid .ec-shelfGrid__item{
width: calc(92.8% / 5);
margin: 0;
}
}
@media screen and (max-width: 767px){
.detail .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd){
margin-right:3%;
margin-left: 0;
}
.ec-shelfGrid .ec-shelfGrid__item{
width: calc(97% / 2);
margin: 0 5px;
}
.detail .ec-shelfGrid .ec-shelfGrid__item:nth-child(n+3){
margin-top: 11px;
}
.ec-searchnavRole__topicpath{
margin-bottom: 0;
margin: 10px 0 15px;
}
.ec-shelfGrid__item .price02-default{
margin-bottom: 8px;
font-size: 19px;
}
.ec-shelfGrid__item-name{
font-size: 14px;
/* margin-bottom: 7px; */
}
.ec-topicpath{
font-size: 21px;
padding: 1px 6px;
padding-right: 20px;
}
.detail .ec-shelfGrid .ec-shelfGrid__item{
width: calc(97% / 2);
margin: 0;
}
}
@media (min-width: 768px) and (max-width: 1100px){
.detail .ec-shelfGrid .ec-shelfGrid__item{
width: calc(94.6% / 4);
margin: 0;
}
.detail .ec-shelfGrid .ec-shelfGrid__item:not(:nth-child(4n)) {
margin-right: 1.8%;
}
.detail .ec-shelfGrid .ec-shelfGrid__item:nth-child(n+5){
margin-top: 15px;
}
.ec-shelfGrid .ec-shelfGrid__item{
width: calc(94.6% / 4);
margin: 0 8px;
}
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn{
padding: 0 10px;
margin-bottom: 0;
}
.ec-productRole__btn .ec-blockBtn--action{
min-width: 0;
width: 100%;
height: 53px;
line-height: 21px;
font-size: 15px;
border-radius: 1px;
}
.ec-productRole__btn .font-small{
font-size: 14px;
}
.ec-shelfGrid .ec-shelfGrid__item .list-detail-btn{
padding-bottom: 13px;
margin-top: 9px;
}
.ec-shelfGrid .ec-shelfGrid__item .notlogin_detail{
padding-bottom: 13px;
}
.ec-shelfGrid__item-name{
margin-bottom: 0;
}
.ec-shelfGrid__item .ec-blockBtn{
height: 53px;
line-height: 52px;
border: 1px var(--maincolor) solid ;
font-size: 15px;
border-radius: 2px;
color: var(--maincolor);
background-color: #fff;
padding: 0;
border-radius: 1px;
}
@media screen and (max-width: 767px){
.ec-productRole__btn .ec-blockBtn--action{
margin-bottom: 0;
font-size: 14px;
}
.ec-shelfGrid__item-name{
font-size: 15px;
}
.ec-shelfGrid__item .ec-blockBtn{
font-size: 14px;
}
}
@media screen and (min-width: 768px){
.ec-shelfGrid__item .ec-blockBtn:hover{
background: #f7f7f7;
}
}
.ec-blockBtn:active:hover, .ec-blockBtn:active:focus, .ec-blockBtn.active:focus{
background: #fff;
color: var(--maincolor);
border: 1px var(--maincolor) solid ;
}
.ec-blockBtn:active{
box-shadow: none;
}
/*-------------------------------------------------
抽選申込
-------------------------------------------------*/
div#ex_text div#inputtitle{
font-size: 150%;
text-align: center;
font-weight: bold;
}
div#ex_text div#inputtext{
margin: 15px auto 0 auto;
padding: 15px;
border: 5px solid #ccc;
letter-spacing: 0;
}
div#ex_text {
font-size:14px;
text-align:center;
}
div#ex_text2 {
font-size:14px;
}
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ(コメントアウトされていた)
----------------------------------------------- */
/* div#attention1 {
padding:0 0 0 180px;
text-align:left;
font-size:12px;
} */
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ(コメントアウトされていた)
----------------------------------------------- */
div#attention2 {
text-align:left;
font-size:12px;
}
#lebsty-cop-tilte {
color: #000000;
font-family: メイリオ, ヒラギノ角ゴシック, sans-serif;
line-height: 2.4em;
text-align: left;
border-style: outset;
border-width: 1px;
padding-top: 0.6em;
background: #FFC90E;
}
div#ex_text {
font-size:14px;
text-align:center;
}
div#ex_text2 {
font-size:14px;
}
div#attention1 {
padding:0 0 0 80px;
text-align:left;
font-size:12px;
}
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ
----------------------------------------------- */
@media only screen and (max-width: 1024px) {
div#attention1 {
padding: 0;
}
}
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ
----------------------------------------------- */
div#attention2 {
text-align:left;
font-size:12px;
}
/*ボタン*/
.btn-primary {
height: 34px;
border-style: none;
font-weight: bold;
background: var(--maincolor);
}
.btn-primary:hover {
height: 34px;
border-style: none;
font-weight: bold;
}
.btn_area {
margin-top: 20px;
}
/*-------------------------------------------------
完了メッセージ
----------------------------------------------- */
#complete_area{
margin-bottom: 15px;
background: #EFFBEF;
border: 2px #017501 solid;
padding: 25px 55px;
}
#complete_area h3{
color: #017501;
font-weight: bold;
margin: 0;
font-size: 20px;
position: relative;
}
#complete_area h3::before{
display: inline-block;
content: "";
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-size: contain;
-webkit-mask-repeat:no-repeat;
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: contain;
mask-repeat:no-repeat;
width: 20px;
height: 20px;
background-color: #017501;
position: absolute;
top: 1px;
left: -28px;
}
#complete_area p{
margin-bottom: 0;
}
div#complete_area .message, div#undercolumn_entry .message {
margin-bottom: 20px;
}
@media screen and (max-width: 767px){
#complete_area{
padding: 17px 20px 14px 45px;
}
#complete_area h3{
font-size: 17px;
line-height: 1.3;
}
#complete_area h3::before{
width: 17px;
height: 17px;
position: absolute;
left: -24px;
}
}
/*-------------------------------------------------
商品詳細ページ
-------------------------------------------------*/
@media only screen and (min-width: 768px){
.ec-modal .ec-modal-wrap{
max-width: 650px;
}
}
.ec-productRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
}
.ec-sliderItemRole{
padding-left: 0;
padding-right: 0;
}
.ec-productRole .ec-productRole__code{
border: none;
padding: 0;
}
.ec-productRole .ec-productRole__category{
border: none;
padding: 0;
}
.ec-rectHeading h2{
padding: 12px 18px;
margin-bottom: 15px;
}
.ec-productRole__profile .price02-default{
font-size: 30px;
margin-bottom:20px ;
}
.ec-productRole__samecategory{
text-align: center;
margin-top: 80px;
}
.ec-productRole__samecategory h3{
font-size: 19px;
font-weight: bold;
margin-bottom: 20px;
}
.ec-productRole__samecategory p{
display: inline-block;
font-size: 16px;
margin-right: 15px;
}
.ec-productRole__samecategory a{
display: block;
color: #333;
padding: 9px 30px 7px 30px;
border: 1px #ddd solid;
border-radius: 3px;
}
.ec-productRole .ec-productRole__title .ec-headingTitle{
font-weight: bold;
margin-bottom: 28px;
color: #333;
line-height: 1.3;
}
.ec-productRole .ec-productRole__price{
color: #E00000;
border: none;
}
.ec-productRole .ec-productRole__actions{
padding: 0;
margin-top: 20px;
}
.ec-productRole__btn-detail{
margin-top: 0px;
}
.ec-productRole__btn-detail .ec-blockBtn--action{
width: 100%;
height: 68px;
line-height: 1.4;
}
.ec-productRole .ec-off4Grid{
margin-top: 70px;
}
.ec-productRole__profile th{
vertical-align: top;
padding-bottom: 5px;
padding-right: 15px;
width: 30%;
}
.ec-productRole__profile td{
padding-bottom: 5px;
vertical-align: top;
display: inline;
}
.ec-productRole .ec-productRole__profile{
border: 1px #ddd solid;
}
.ec-productRole__description_bottom{
margin-top: 24px;
margin-bottom: 10px;
}
.sub_area_description{
margin-top: 15px;
padding-left: 20px;
padding-right: 20px;
}
.disabled {
cursor: inherit;
}
.ec-numberInput button{
height: 45px;
width: 45px;
border: 1px #ddd solid;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
background-color: #f5f5f5;
}
::-webkit-full-page-media, :future, :root .ec-numberInput button{
padding-right:30px;
padding-top: 2px;
}
.ec-numberInput input[type='number']{
text-align: center;
max-width: 75px;
font-size: 16px;
margin: 0 5px;
}
.spinner-container{
margin-left: 17px;
}
.ec-numberInput{
display: flex;
align-items: center;
margin-top: 20px;
}
.ec-numberInput span{
font-weight: bold;
}
.quantity::-webkit-inner-spin-button,
.quantity::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.ec-productRole .ec-productRole__actions .ec-select select{
min-width: 100%;
max-width: 100%;
height: 45px;
margin-bottom: 15px;
font-size: 15px;
}
.ec-productRole .ec-productRole__description{
margin-bottom: 0;
}
@media only screen and (min-width: 768px){
.ec-productRole img{
width: 97%;
}
.ec-productRole .ec-productRole__profile{
padding: 33px;
padding-bottom: 18px;
margin-left: 50px;
}
.ec-productRole__bottom{
margin-left:50px;
}
.ec-sliderItemRole .slideThumb{
width: 30.6%;
}
.ec-productRole__samecategory a:hover{
background-color: #f8f8f8;
text-decoration: none;
}
.ec-numberInput button:hover{
background-color: #eee;
}
.ec-numberInput .disabled:hover {
background-color: #f5f5f5;
}
}
@media screen and (max-width: 767px){
.ec-productRole .ec-productRole__profile{
padding: 20px 15px;
}
.ec-productRole__profile .price02-default{
font-size: 28px;
}
.ec-productRole__profile th{
padding-bottom: 8px;
padding-right: 12px;
width: 33%;
}
.ec-productRole__profile td{
padding-bottom: 8px;
}
.ec-productRole__samecategory{
margin-top: 60px;
}
.float_cart{
position: fixed;
right: 0;
bottom: 0;
background-color: #fff;
padding: 10px 20px;
width: 100%;
z-index: 1;
box-shadow: 0 -2px 3px 0px rgba(0,0,0,.07);
display: none;
}
.float_cart_flex{
display: flex;
justify-content: space-between;
}
.float_cart .ec-productRole__actions{
margin-top: 0;
}
.float_cart .ec-productRole__btn-detail{
margin-top: 0;
}
.float_cart .ec-productRole__btn-detail .ec-blockBtn--action{
height: 43px;
font-size: 15px;
font-weight: normal;
}
.ec-productRole .ec-off4Grid{
margin-top: 40px;
}
.ec-productRole .ec-productRole__title .ec-headingTitle{
font-size: 24px;
}
}
@media (min-width: 768px) and (max-width: 1100px){
.ec-productRole .ec-productRole__profile{
margin-left: 15px;
}
.ec-productRole__bottom{
margin-left: 15px;
}
.ec-productRole__profile th{
width: 37%;
}
}
.is-animated {
-webkit-animation:blink .4s ease-in-out 3 alternate;
-moz-animation:blink .4s ease-in-out 3 alternate;
animation:blink .4s ease-in-out 3 alternate;
}
@-webkit-keyframes blink{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes blink{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes blink{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
/*-------------------------------------------------
利用者登録ページ
----------------------------------------------- */
.ec-registerRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
}
.ec-registerRole .ec-registerRole__actions{
text-align: center;
}
.ec-registerRole .ec-blockBtn--action{
margin-bottom: 10px;
}
.ec-registerRole #faq #acMenu h4{
border-bottom: none;
}
.ec-registerRole #faq #acMenu .subInner{
padding-bottom: 5px;
}
/*-------------------------------------------------
利用者登録(完了)ページ
-------------------------------------------------*/
.ec-registerCompleteRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
}
.ec-off3Grid .ec-off3Grid__cell .ec-blockBtn--action{
margin-top: 0;
margin-bottom:10px ;
}
.complete_triangle{
border-style: solid;
border-color: var(--triangle-color) transparent transparent transparent;
border-width: 35px 90px 0px 90px;
width: 18%;
margin: 18px auto;
}
.step1{
margin-bottom: 40px;
margin-top: 30px;
}
.step1 a{
position: relative;
}
.step1 p{
position: absolute;
right: 0;
color: #333;
font-size: 13px;
}
/*-------------------------------------------------
カゴの中
-------------------------------------------------*/
.ec-cartRole .ec-cartRole__error .ec-alert-warning{
max-width: 100%;
}
.ec-delate{
padding: 13px 14px;
background-color: #f5f5f5;
border: 1px #ddd solid;
border-radius: 3px;
color: #333333;
}
.ec-delate:hover, .ec-delate:active:hover, .ec-delate:active:focus,
.ec-delate:focus{
color: #333;
text-decoration: none;
}
.ec-progress .is-complete .ec-progress__number{
background-color: var(--maincolor);
}
.ec-progress .is-complete .ec-progress__label{
color: var(--maincolor);
}
.ec-cartRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
display: block;
color: #333;
}
.ec-cartRole .ec-cartRole__cart{
margin: 0;
}
.ec-cartRole .ec-cartRole__actions{
width: 100%;
margin-right: 0;
}
.ec-cartRole .ec-cartRole__total{
background-color: #FFF4F1;
margin-bottom: 20px;
padding: 15px;
font-size: 16px;
}
.not_complete{
border: 1px #E00000 solid;
padding: 15px 0 5px;
text-align: center;
margin-bottom: 30px;
}
.ec-cartHeader .ec-cartHeader__label{
background: #f5f5f5;
border-bottom: 3px #ddd solid;
padding: 15px;
margin-bottom: 40px;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount{
display: block;
font-size: 18px;
margin-top: 2px;
margin-bottom: 0;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton{
border: 1px solid #ddd;
border-radius: 3px;
background: #f5f5f5;
margin: 0 13px;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton,
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled{
border: 1px solid #ddd;
border-radius: 3px;
background:#f5f5f5;
margin: 0 13px;
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name{
font-size: 18px;
margin-bottom: 0;
}
.ec-cartRow__unitPrice{
font-size: 18px;
font-family: 'Verdana';
}
.ec-cartRow .ec-cartRow__subtotalColumn{
text-align: center;
width: 16.666667%;
font-size: 16px;
font-family: 'Verdana';
}
.ec-cartRole .ec-cartRole__totalText{
margin-top: 50px;
margin-bottom: 0px;
padding: 0;
}
/* SP用表デザイン */
.sp-ec-cartTable .ec-cartRow{
display: table;
width: 100%;
}
.sp-ec-cartTable .ec-cartHeader{
display: block;
background: #f5f5f5;
}
.sp-ec-cartTable .ec-cartHeader .ec-cartHeader__label{
display: block;
margin-bottom: 0;
}
.sp-ec-cartTable thead{
float: left;
width: 35%;
border-top: 1px #ddd solid;
border-right: 1px #ddd solid;
}
.sp-ec-cartTable tbody{
width: 100%;
border-top: 1px #ddd solid;
}
.sp-ec-cartTable tr td,
.sp-ec-cartTable tr th{
text-align: center;
display: table-cell;
padding: 10px;
vertical-align: middle;
padding-bottom: 18px;
}
.sp-ec-cartTable tr th{
background-color: #f5f5f5;
}
.ec-cartHeader__content{
text-align: center;
background: #f5f5f5;
padding: 10px;
}
.sp-ec-cartTable .ec-cartRow__contentColumn{
display: flex;
padding: 15px;
align-items: center;
}
.sp-ec-cartTable .ec-cartRow__img{
max-width: 110px;
}
.sp-ec-cartTable .ec-cartRow__summary{
margin-left: 20px;
}
.sp-ec-cartTable .ec-cartRow__name{
font-weight: bold;
font-size: 17px;
}
.ec-cartTable_content{
margin-bottom: 20px;
border: 1px #ddd solid;
}
@media only screen and (max-width: 767px){
.ec-cartTable{
border-top: none;
margin-top: 10px;
}
.ec-cartHeader__label{
font-weight: normal;
}
.ec-cartRow .ec-cartRow__amountColumn{
border-bottom: none;
text-align: right;
width: 65vw;
background-color: #fff;
padding-bottom: 18px;
}
.ec-cartRow .ec-cartRow__delColumn{
border-bottom: none;
text-align: right;
width: 65vw;
background-color: #fff;
padding-bottom: 18px;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown{
justify-content: end;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton{
margin-right: 0;
}
.ec-cartRole .ec-cartRole__total{
border-top: 3px #ddd solid;
padding: 20px;
}
.ec-cartRole__total .price02-default{
font-size: 24px;
}
.ec-cartRow__unitPrice{
font-size: 16px;
}
.ec-delate{
padding: 10px 12px;
}
}
@media only screen and (min-width: 768px){
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown{
display: flex;
}
.ec-cartRow__codeColumn{
width: 12.666667%;
}
.ec-cartRow .ec-cartRow__amountColumn{
width: 19.666667%;
}
.ec-cartRow .ec-cartRow__delColumn{
width: 14.333333%;
}
.ec-cartRow .ec-cartRow__summary{
width: calc(100% - 135px);
}
.ec-cartRow .ec-cartRow__img{
max-width: 110px;
}
.ec-cartRow .ec-cartRow__contentColumn{
padding: 15px;
width: 41.666667%;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount{
font-size: 20px;
}
.ec-delate:hover, .ec-delate:active:hover, .ec-delate:active:focus,
.ec-delate:focus{
background-color: #EEEEEE;
border: 1px #ddd solid;
color: #333;
text-decoration: none;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton:hover{
background-color: #eee;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton:hover{
background-color: #eee;
}
}
@media only screen and (min-width: 768px) and (max-width: 1100px){
.ec-cartRole__total .price02-default{
font-size: 26px;
}
}
/*-------------------------------------------------
お届け先の指定
-------------------------------------------------*/
.ec-registerRole .ec-registerRole__actions{
padding-top: 0;
}
.ec-addressList .ec-addressList__item{
display: revert;
width: 100%;
border: 1px solid #ddd;
margin-bottom: 15px;
border-radius: 0 0 3px 3px;
}
.shipping_title{
display: table-cell;
font-weight: bold;
font-size: 17px;
}
.ec-addressList .ec-addressList__remove{
display: table-cell;
padding: 0;
/* scale: 1.2; */
font-size: 16px;
position: relative;
}
.ec-addressList .ec-addressList__remove input[type=radio]{
margin: 0;
scale: 1.1;
left: -20px;
position: absolute;
top: 3px;
}
.ec-addressList__name label{
background-color:#f1f1f1 ;
/* border-bottom: 1px #ddd solid; */
border-radius: 3px 3px 0 0;
padding: 15px 20px 12px 37px;
display: block;
margin-bottom: 0;
cursor: pointer;
}
.shipping_title_memo{
color:#e00000;
/* margin-left:30px; */
display:inline-block;
}
.ec-addressRole .ec-addressRole__actions{
border-bottom: none;
margin-top: 20px;
}
#address0_lb{
margin-bottom:15px;
}
#another_address{
padding:7px 30px;
}
@media only screen and (max-width: 767px){
.shipping_title_memo{
margin-left:0px;
display: block;
margin-top: 2px;
}
.ec-addressRole .ec-addressRole__actions{
margin-top: 15px;
}
#another_address{
padding:0px 20px;
}
}
/*-------------------------------------------------
申込内容の確認
-------------------------------------------------*/
.ec-orderRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
justify-content: space-between;
font-size: 15px;
}
.ec-imageGrid{
border-top: none;
}
.ec-orderRole .ec-borderedList{
border-top: none;
}
.ec-borderedList li{
border-bottom: 1px #ddd solid;
padding-top: 17px;
padding-bottom: 17px;
}
.ec-borderedList li:first-child{
padding-top: 0;
}
.ec-borderedList li:last-child{
border-bottom: none;
padding-bottom: 0;
}
.ec-imageGrid .ec-imageGrid__content p{
font-size: 15px;
}
.ec-totalBox .ec-totalBox__btn a{
color: #333;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action{
width: 100%;
font-size: 18px;
min-width: 0;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel{
width: 100%;
min-width: 0;
}
.ec-totalBox .ec-totalBox__spec dd{
font-family: 'Verdana';
margin-left: 10px;
}
.ec-orderRole:after{
content: none;
}
.ec-orderRole .ec-totalBox{
padding: 20px 25px;
}
.ec-totalBox .ec-totalBox__btn{
margin-top: 20px;
}
.ec-rectHeading h2{
margin-bottom: 0;
padding: 15px 20px;
border-radius: 3px 3px 0 0 ;
}
.ec-orderDelivery__item{
padding:20px;
border: 1px #ddd solid;
border-top: none;
border-radius: 0 0 3px 3px;
}
.ec-orderRole .ec-borderedList{
margin-bottom:0;
}
.ec-imageGrid .ec-imageGrid__content{
padding-left: 20px;
}
.ec-imageGrid .ec-imageGrid__content p:first-child{
font-size:18px;
font-weight:bold;
/* margin-bottom:7px; */
}
.ec-imageGrid .ec-imageGrid__img{
padding: 0;
vertical-align: middle;
}
.ec-totalBox .ec-totalBox__spec{
align-items: center;
}
.shipping_info{
font-weight: normal;
}
@media only screen and (min-width: 768px){
.ec-orderRole .ec-orderRole__detail{
width: 57.66666%;
}
.ec-orderRole .ec-orderRole__summary{
width: 41.66666%;
}
.ec-imageGrid .ec-imageGrid__img{
width: 150px;
}
}
@media only screen and (max-width: 767px){
.ec-orderDelivery__item{
padding: 12px 15px;
}
.ec-imageGrid .ec-imageGrid__img{
padding-left: 0;
}
.ec-borderedList li{
padding-top: 12px;
padding-bottom: 12px;
}
.ec-imageGrid .ec-imageGrid__content p:first-child{
font-size:16px;
font-weight:bold;
/* margin-bottom:8px; */
}
.ec-rectHeading h2{
font-size: 18px;
}
.ec-orderRole .ec-totalBox{
padding: 15px 20px;
}
.ec-totalBox .ec-totalBox__spec .price02-default{
font-size: 25px;
}
.ec-orderRole .ec-orderRole__detail{
margin-bottom: 20px;
}
.ec-orderRole .ec-totalBox{
margin-bottom: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1100px){
.ec-totalBox .ec-totalBox__spec .price02-default{
font-size: 23px;
}
.ec-orderRole .ec-totalBox{
padding: 15px;
}
.ec-orderRole .ec-orderRole__summary{
padding: 0 10px;
}
}
/*-------------------------------------------------
申込完了
-------------------------------------------------*/
.ec-cartCompleteRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
}
/*-------------------------------------------------
株主様情報ー共通
-------------------------------------------------*/
.ec-mypageRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
}
/*各ページへのボタン*/
.naviButton{
margin-bottom: 15px;
}
.naviButton .btn-primary {
background: #fff;
margin-bottom:10px;
color: #333;
padding: 12px 10px;
font-size: 16px;
height: auto;
font-weight:normal;
border-radius: 3px;
border: 1px #ddd solid;
box-shadow: 0px 3px 6px rgba(0,0,0,.08);
text-align: center;
}
.naviButton .active a {
color: var(--maincolor);
border: var(--maincolor) 1px solid;
}
.btn-primary:focus,
.btn-primary:hover{
text-decoration: none;
}
.btn-primary:active:hover,
.btn-primary:active:focus{
color: #333;
background-color: #fff;
border:1px #ddd solid;
}
@media only screen and (min-width: 768px){
.ec-mypageRole .ec-pageHeader h1{
margin: 10px 0 30px;
padding: 1px 8px;
}
/*各ページへのボタン*/
.naviButton .btn-primary:active,
.naviButton .btn-primary:hover,
.naviButton .btn-primary:focus{
color: var(--maincolor);
text-decoration: none;
background-color: #fff;
}
.naviButton .btn-primary:active:hover{
color: var(--maincolor);
text-decoration: none;
background-color: #fff;
border: 1px #ddd solid;
}
}
@media only screen and (max-width: 767px){
/*各ページへのボタン*/
.ec-navlistRole__item:nth-child(even){
padding-left: 0;
}
.naviButton .btn-primary {
font-size: 13px;
padding: 12px 4px;
}
}
/*-------------------------------------------------
株主様情報ー申込履歴一覧
-------------------------------------------------*/
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ(コメントアウトされていた)
----------------------------------------------- */
/* @media only screen and (min-width: 768px) and (max-width: 1023px) {
#page_mypage_history div.ec-orderRole__summary {
width: 40%;
padding: 0 5px;
}
#page_mypage_history div.ec-orderRole__summary div.ec-totalBox {
padding: 0 5px;
}
#page_mypage_history .ec-totalBox .ec-totalBox__paymentTotal {
padding: 16px 0;
}
#page_mypage_history div.ec-orderRole__summary div.ec-totalBox span.ec-totalBox__price {
margin-left: 5px;
font-size: 18px;
}
} */
/* @media only screen and (min-width: 1024px) {
#page_mypage_history div.ec-orderRole__summary {
width: 40%;
padding: 0 5px;
}
} */
/* 20230721 kashiwa dev-gz-orgにはいっていたやつ(コメントアウトされていた)
----------------------------------------------- */
.ec-historyRole .ec-historyRole__contents{
border: 1px #ddd solid;
margin-bottom: 15px;
padding: 20px 30px;
color:#333;
border-radius: 4px;
padding-bottom: 10px;
}
.ec-definitions{
font-size: 15px;
}
.ec-historyRole__header{
display: flex;
justify-content: space-between;
padding-bottom: 8px;
border-bottom: 1px #ddd solid;
}
.ec-historyRole .ec-historyRole__detail{
padding-top: 15px;
border-top: none;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle{
font-weight: normal;
}
.ec-definitions dt{
font-weight: normal;
}
.ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content{
padding-left: 0;
padding-bottom: 10px;
}
.ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content p:first-child{
font-weight: normal;
font-size: 1.6rem;
margin-bottom: 0;
}
.ec-historyListHeader .ec-historyListHeader__date{
margin-bottom: 0;
}
.ec-historyListHeader__action a{
font-size: 16px;
font-weight: normal;
color: #333;
padding: 12px 15px 9px;
width: 78px;
}
.ec-historyListHeader__action a::before{
content: none;
}
@media only screen and (min-width: 768px){
.ec-historyRole .ec-historyRole__contents{
flex-direction: column;
}
.ec-historyRole .ec-historyRole__header{
width: 100%;
}
.ec-historyRole .ec-historyRole__detail{
width: 100%;
}
.ec-historyListHeader__action .ec-inlineBtn:hover,
.ec-historyListHeader__action .ec-inlineBtn:active:hover,
.ec-historyListHeader__action .ec-inlineBtn:active:focus,
.ec-historyListHeader__action .ec-inlineBtn:focus,
.ec-historyListHeader__action .ec-inlineBtn:active{
color: #333;
}
}
@media only screen and (max-width: 767px){
.ec-historyRole .ec-historyRole__contents{
padding: 15px 15px 8px;
}
.ec-historyListHeader .ec-historyListHeader__date{
font-size: 17px;
font-weight: bold;
}
.ec-historyListHeader__action a{
font-size: 14px;
padding: 9px 19px 8px;
width: auto;
}
.ec-historyListHeader{
width: 67%;
}
.ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content p:first-child{
font-size: 15px;
}
.ec-historyListHeader__action .ec-inlineBtn:hover,
.ec-historyListHeader__action .ec-inlineBtn:active:hover,
.ec-historyListHeader__action .ec-inlineBtn:active:focus,
.ec-historyListHeader__action .ec-inlineBtn:focus,
.ec-historyListHeader__action .ec-inlineBtn:active{
color: #333;
}
}
/*-------------------------------------------------
株主様情報ー申込履歴詳細
-------------------------------------------------*/
.ec-mypageHeading h2{
font-size: 19px;
font-weight: bold;
margin-bottom: 10px;
}
/* .ec-orderOrder{
border-left: 5px #333 solid;
padding: 1px 12px;
margin-bottom: 45px;
} */
.ec-mypageRole .ec-orderRole__detail{
/* padding: 40px;
border: 1px #e8e8e8 solid;
border-radius: 3px; */
padding-bottom:15px;
}
.ec-mypageRole .ec-orderDelivery__item .ec-borderedList{
border: none;
margin-bottom: 0;
}
.table_line{
display: table;
}
.shipping_info{
display: table-cell;
}
/* .ec-mypageRole .ec-orderDelivery__item{
border: none;
} */
.ec-mypageRole .ec-imageGrid .ec-imageGrid__content{
padding-left: 0px;
}
.ec-mypageRole .ec-imageGrid .ec-imageGrid__content p:first-child{
font-size: 15px;
font-weight: normal;
}
.ec-orderDelivery .ec-cartTable{
border-bottom: none;
}
.ec-mypageRole .ec-cartRow .ec-cartRow__contentColumn{
border-bottom: 1px #ddd solid;
vertical-align: middle;
}
.Shipping_info{
display: table-cell;
}
.ec-mypageRole .ec-totalBox{
background-color: #fff;
padding: 5px 0 0;
margin-bottom: 0;
}
.ec-orderDelivery .sp-ec-cartTable .ec-cartRow{
display: table;
width: 100%;
}
.ec-orderDelivery .sp-ec-cartTable tbody{
display: table-row-group;
float: unset;
width: auto;
border-top: none;
}
.ec-orderDelivery .sp-ec-cartTable tr th{
background-color: #f5f5f5;
font-size: 15px;
width: 26vw;
}
.ec-cartRow__codeColumn{
border-bottom:none;
display: table-cell;
text-align: center;
font-size: 16px;
background-color: #fff;
}
.ec-mypageRole .ec-definitions{
margin-top: 2px 0;
}
.mp-label{
background-color: #f5f5f5;
font-size: 15px;
text-align: center;
display: table-cell;
padding: 10px;
vertical-align: top;
font-weight: normal;
width: 9vw;
max-width: 130px;
padding-bottom: 18px;
}
.mp-content{
text-align: left;
font-size: 15px;
display: table-cell;
padding: 10px;
vertical-align: top;
border-bottom: none;
background-color: #fff;
padding-left: 20px;
}
@media only screen and (min-width: 768px){
.ec-historyListHeader__date{
font-size: 21px;
font-weight: bold;
}
.ec-mypageRole .ec-cartRow__codeColumn{
width: 13.666667%;
}
.ec-mypageRole .ec-cartRow .ec-cartRow__contentColumn{
text-align: center;
}
}
@media only screen and (max-width: 767px){
/* .ec-mypageRole .ec-orderRole__detail{
padding: 20px 15px;
} */
.ec-historyListHeader__date{
font-size: 19px;
font-weight: bold;
}
.ec-orderDelivery .sp-ec-cartTable tr td{
text-align: left;
font-size: 15px;
}
.ec-orderDelivery .ec-cartTable_content{
margin-bottom: 10px;
}
.ec-totalBox{
padding: 0;
}
.ec-orderOrder{
margin-bottom: 0;
padding: 0 10px;
}
.ec-totalBox__paymentTotal .price02-default{
font-size: 23px;
}
.ec-orderDelivery .ec-cartTable{
border:none ;
}
.ec-mypageHeading h2{
margin-top: 35px;
}
.mp-content{
padding-left: 10px;
}
.mp-label{
width: 26vw;
}
.ec-mypageRole .ec-totalBox .ec-totalBox__paymentTotal{
padding: 0;
}
.ec-mypageRole .ec-totalBox{
padding: 0;
}
.ec-mypageRole .ec-imageGrid .ec-imageGrid__content p:first-child{
font-size: 15px;
font-weight: normal;
}
}
@media only screen and (min-width: 768px) and (max-width: 1100px){
/* .ec-mypageRole .ec-orderRole__detail{
padding: 25px;
} */
.ec-totalBox__paymentTotal .price02-default{
font-size: 23px;
}
.mp-label{
width: 13vw;
}
}
/*-------------------------------------------------
株主様情報ーお届け先一覧
-------------------------------------------------*/
.ec-mypageRole .ec-addressList .ec-addressList__item{
display: table;
}
.ec-addressList .ec-addressList__action{
position: unset;
display: flex;
padding: 0px;
}
.ec-addressList__action .ec-inlineBtn{
font-size: 16px;
font-weight: normal;
color: #333;
padding: 11px 15px 8px;
width: 78px;
}
.ec-addressList__action a::before{
content: none;
}
.ec-addressList .ec-addressList__address{
width: 90%;
}
.ec-addressList__actionbox{
display: table-cell;
vertical-align: middle;
padding: 16px;
padding-left: 0;
}
.ec-addressList__action .ec-inlineBtn:hover,
.ec-addressList__action .ec-inlineBtn:active:hover,
.ec-addressList__action .ec-inlineBtn:active:focus,
.ec-addressList__action .ec-inlineBtn:focus,
.ec-addressList__action .ec-inlineBtn:active{
color: #333;
}
@media only screen and (max-width: 767px){
.ec-addressList__action .ec-inlineBtn{
font-size: 14px;
padding: 10px 11px 8px;
width: auto;
}
.ec-addressList__action .ec-inlineBtn:first-child{
margin-bottom: 8px;
}
.ec-addressList .ec-addressList__action{
flex-direction: column;
}
}
@media only screen and (min-width: 768px){
.ec-addressList__action .ec-inlineBtn:first-child{
margin-right: 10px;
}
}
/*-------------------------------------------------
お問い合わせ
-------------------------------------------------*/
.ec-contactRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
}
#contact_email_first{
margin-bottom: 8px;
}
#contact_email_second{
margin-bottom: 0;
}
#contact_contents{
margin-bottom: 16px;
}
#contact-outer {
height: 350px;
margin-bottom: 30px;
padding: 15px 30px;
overflow-y: auto;
border: 1px solid #ccc;
overscroll-behavior: contain;
}
#contact-inner h3 {
font-size: 18px;
font-weight: bold;
color: #000000;
}
@media only screen and (max-width: 767px){
#contact-outer{
padding: 0 15px 15px;
height: 300px;
}
}
/*-------------------------------------------------
お問い合わせ(確認)
-------------------------------------------------*/
.ec-contactConfirmRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
}
.ec-contactConfirmRole .ec-blockBtn--action{
margin-bottom: 10px;
}
/*-------------------------------------------------
お問い合わせ(完了)
-------------------------------------------------*/
.ec-contactCompleteRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
}
/*-------------------------------------------------
パスワードの再発行
-------------------------------------------------*/
.ec-forgotRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
margin-bottom: 25px;
/* margin-top: -20px; */
}
/* @media only screen and (max-width: 767px){
.ec-forgotRole{
margin-top: -50px;
}
} */
/*-------------------------------------------------
パスワードの再発行(完了ページ)
-------------------------------------------------*/
.ec-forgetCompleteRole{
padding-left: 0;
padding-right: 0;
max-width: 1000px;
color: #333;
font-size: 15px;
margin: 0 auto;
margin-bottom: 25px;
/* margin-top: -20px; */
}
/* @media only screen and (max-width: 767px){
.ec-forgetCompleteRole{
margin-top: -50px;
}
} */
/*-------------------------------------------------
SVG
-------------------------------------------------*/
.svg{
display: inline-block;
vertical-align: middle;
}
.svg .svg-size{
width:18px;
height:19px;
}
@media (min-width: 768px) and (max-width: 1100px){
.svg .svg-size{
width:14px;
height:15px;
}
}
.svg .svg-size_nav_sp{
width: 15px;
height: 16px;
}
.company_color{
color: var(--maincolor);
}
/*-------------------------------------------------
申込期間終了後
-------------------------------------------------*/
.order_closed_btn{
background-color: var(--maincolor);
color: #fff;
padding: 15px;
padding-bottom: 12px;
text-align: center;
border-radius: 4px;
font-weight: bold;
font-size: 17px;
/* width: 85%; */
margin: auto;
margin-top: 15px;
display: block;
position: relative;
opacity: 0.75;
cursor: not-allowed;
}
@media (min-width: 768px) and (max-width: 1100px){
.order_closed_btn{
padding: 13px;
}
}
@media only screen and (max-width: 767px){
.order_closed_btn{
padding: 12px;
}
}