/* 全社共通CSS（企業別CSSはadd.cssへ） */
:root {
--maincolor: #9dc216;
--maincolor-hover: #92b11f;
--accentcolor: #f68010;
--accentcolor-hover: #e37c1c;
--triangle-color: #dceba5;
}
@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: -7px;
}
}
/************************************************
共通設定
************************************************ */
/* コンテンツ */
#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*/
}
/* サイドカラム
----------------------------------------------- */
#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: 115px;
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: 130px;
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;
}
/* .ec-borderedDefs .password-field:first-child{
margin-bottom: 8px;
}
.ec-borderedDefs .password-field:last-child{
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 p {
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;
}
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
.ec-layoutRole__contentTop {
margin-top: 25px;
}
.ec-layoutRole__contents {
margin-top: 25px;
}
}
/*-------------------------------------------------
PCログイン(ログイン前)
-------------------------------------------------*/
#login_area {
width: 375px;
}
.pc-login {
padding-right: 13px;
padding-left: 0;
height: 52px;
}
/* goodp V002.5 不要なCSSを削除 */
.pd12 {
padding-top: 12px;
}
/* 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 0.15s,
box-shadow ease-in-out 0.15s;
-webkit-transition: border-color ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.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, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 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, 0.075),
0 0 8px rgba(102, 175, 233, 0.6);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(102, 175, 233, 0.6);
border-color: #66afe9;
-webkit-transition: border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
-webkit-transition: border-color ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.15s;
}
/* goodp V002.5 パスワード表示切り替え ここまで*/
#login_form {
background-color: #f5f5f5;
border: 1px #dddddd solid;
padding: 27px 30px;
border-radius: 4px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.05);
height: 500px;
}
#login_area h2 {
font-size: 23px;
margin-bottom: 22px;
border-bottom: 1px #333 solid;
}
.login_title {
padding-bottom: 10px;
}
.login_btn {
background-color: var(--accentcolor);
height: 49px;
border: none;
border-radius: 30px;
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, 0.05);
height: 500px;
}
.block_up {
background-color: #f5f5f5;
border-bottom: 3px #dddddd solid;
display: flex;
align-items: center;
padding: 11px 20px 9px;
height: 102px;
}
.block_up .user_name {
font-size: 20px;
margin-bottom: 0;
}
.block_up .user_icon {
width: 40px;
margin-right: 14px;
}
.user_info p:first-child {
margin-bottom: 2px;
}
.block_down {
background-color: #fff;
margin-bottom: 25px;
text-align: center;
}
.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;
}
.block_down_circle_closed {
width: 82%;
margin: 65px auto;
width: 100%;
}
.block_down_circle_closed p {
padding: 30px 0;
border-top: 2px #333 solid;
border-bottom: 2px #333 solid;
font-size: 28px;
font-weight: bold;
text-align: center;
width: 80%;
margin: 0 auto;
}
#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: 20px;
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: 13px;
}
#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: 85px;
}
.block_up .user_name {
font-size: 17px;
}
.block_down {
margin-bottom: 15px;
}
.user_info p:first-child {
font-size: 13px;
}
.block_up .user_icon {
margin-right: 12px;
width: 40px;
}
.afterlogin_panel {
height: 410px;
}
.block_down_circle_closed {
margin: 51px auto;
}
.block_down_circle_closed p {
font-size: 18px !important;
}
}
/*-------------------------------------------------
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, 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: 0.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: 0.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: 0.3s;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.menu_category_all:hover::before {
width: 31%;
}
/* SRS_MAINT-50 */
.menu_category_all.menu_single::before {
left: 50%;
}
.menu_category_all.menu_single:hover::before {
width: 96%;
}
}
/* SRS_MAINT-50 */
@media screen and (max-width: 768px) {
.menu_category_all.menu_single a {
position: relative;
padding: 10px 0;
padding-bottom: 8px;
font-size: 14px;
font-weight: normal;
}
}
/*-------------------------------------------------
ヘッダーレイアウト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;
}
.personalpoint_left {
margin-right: 10px;
}
@media screen and (min-width: 768px) {
.personalpoint_right .price02-default {
margin: 0;
font-size: 23px;
}
}
.loginnow {
background-color: #e00000;
padding: 6px 5px 5px 5px;
border-radius: 3px;
color: #fff;
font-size: 12px;
}
.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: 1px;
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: 14px;
}
.personalpoint {
padding: 7px 15px;
max-width: 100%;
height: 62px;
}
.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 {
padding: 10px;
/* padding: 10px 13px; */
height: 60px;
}
.navbar-right-right a {
font-size: 13px;
margin-left: 20px;
}
.personalpoint_right .price02-default {
font-size: 17px;
}
.navbar-header {
width: 64%;
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: 16px;
padding: 2px 7px 0;
}
.navbar-header .pconlytext:first-child {
width: 56%;
/* max-width: 275px; */
max-width: 255px;
}
.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, 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, 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, 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 0.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: 0.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 1em;
}
#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;
}
.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: 85px;
background-color: #333;
position: absolute;
top: 25%;
left: 55%;
}
.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 50px 30px 55px;
}
.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: 0.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: 0.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: 0.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: 0.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: 1em;
}
#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-layoutRole__mainBottom:first-child {
margin-top: -60px;
}
.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: 9px;
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;
}
/* おすすめの個別メッセージ */
.recommend_ind_message {
margin-top: -25px;
}
@media screen and (min-width: 768px) {
.ec-shelfGrid a:hover {
box-shadow: 0 3px 6px rgba(0, 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;
}
/* おすすめ優待品4つまでの場合、下記有効化（5つからはコメントアウト）※全部で３か所有効化必要 */
/* .ec-recomend .slick-track{
width: 100%!important;
} */
}
@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;
}
/* おすすめ優待品4つまでの場合、下記有効化（5つからはコメントアウト） */
/* .ec-recomend .ec-shelfGrid .ec-shelfGrid__item{
width: calc(92.8% / 5)!important;
margin: 0 8px;
} */
}
@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;
}
/* おすすめ優待品4つまでの場合、下記有効化（5つからはコメントアウト） */
/* .ec-recomend .ec-shelfGrid .ec-shelfGrid__item{
width: calc(94% / 4)!important;
margin: 0 5px;
} */
}
/*-------------------------------------------------
抽選申込
-------------------------------------------------*/
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: 10px;
color: #333;
}
.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: 30px;
}
.ec-productRole__btn-detail .ec-blockBtn--action {
width: 100%;
height: 68px;
line-height: 1.4;
}
.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;
}
.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;
}
@media only screen and (min-width: 768px) {
.ec-productRole img {
width: 97%;
}
.ec-productRole .ec-productRole__profile {
padding: 33px;
padding-bottom: 28px;
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, 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;
}
}
@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 0.4s ease-in-out 3 alternate;
-moz-animation: blink 0.4s ease-in-out 3 alternate;
animation: blink 0.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-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: 10px;
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;
}
@media only screen and (min-width: 1100px) {
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
min-width: 255px;
}
}
.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-cartRole {
margin-top: -50px;
}
.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%;
min-width: 408px;
}
.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;
}
}
/* 追加20231128 */
.unit_sm .ec-cartRow__amountColumn {
height: 140px;
width: 100%;
display: block;
border-bottom: none;
}
.unit_sm .ec-cartRow__delColumn {
height: 140px;
width: 100%;
display: block;
border-bottom: none;
}
.ec-cartRole__cart
.ec-cartRow
.ec-cartRow__amountColumn
.ec-cartRow__amountUpDown {
align-items: center;
}
/* .inv_msg {
margin-top: 0.25rem !important;
} */
.cart_input {
display: inline;
margin-top: 0.5rem;
}
.cart_input input {
height: 45px;
}
.error input {
margin-bottom: 5px;
border-color: #e00000;
background: #fff4f1;
}
/* form_errorsで表示されるタグに設定するスタイル */
.ec-errorMessage {
margin-bottom: 0px;
font-size: 14px;
font-weight: bold;
color: #e00000;
}
.ec-cartRole .ec-cartRole__totalText {
margin-top: 40px;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__cart .cartflex .sp-ec-cartTable {
width: 50%;
}
.ec-cartRole__cart .sp-ec-cartTable .ec-cartRow {
display: flex;
margin-bottom: 0;
border: none;
border-top: 1px #ccc dotted;
}
.ec-cartRole__cart .sp-ec-cartTable .ec-cartRow:first-child {
border-top: none;
}
.ec-cartRole__cart .cartflex:nth-child(n + 2) .ec-cartHeader__content {
display: none;
}
.ec-cartRole__cart .ec-cartHeader__content {
border-bottom: 3px #ddd solid;
font-weight: bold;
padding: 15px;
}
.ec-cartRole__cart .ec-cartRow .ec-cartRow__contentColumn {
width: auto;
min-width: auto;
border-bottom: none;
}
.unit_bg {
display: flex;
}
.unit_sm:first-child {
width: 39%;
}
.unit_sm:nth-child(2) {
width: 33%;
}
.unit_sm:nth-child(3) {
width: 29%;
}
.unit_sm .ec-cartRow__amountColumn {
line-height: 140px;
}
.unit_sm .ec-cartRow__delColumn {
line-height: 140px;
}
.cart_input_area {
margin-top: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
background: #f5f5f5;
padding: 15px;
margin-bottom: 17px;
padding-top: 8px;
}
.cart_input_no {
display: flex;
align-items: baseline;
}
.cart_inout_no1 {
margin-right: 15px;
}
.cart_input_moji {
font-size: 16px;
}
.ec-cartRole .ec-cartRole__total {
border-top: #ccc 1px dotted;
}
/* 個別メッセージ */
.ec-cartRole__cart .ec-cartTable {
margin-top: 50px;
}
}
@media only screen and (max-width: 767px) {
.ec-cartRole__cart .unit_sm {
display: flex;
justify-content: space-between;
}
.sp-ec-cartTable .ec-cartRow__contentColumn {
border-bottom: 1px #ddd solid;
}
.ec-cartRole__cart .unit_sm .ec-cartRow__amountColumn {
height: auto;
padding: 10px;
padding-right: 15px;
}
.ec-cartRole__cart .unit_sm .ec-cartRow__delColumn {
height: auto;
padding: 10px;
padding-right: 15px;
}
.ec-cartRole__cart .ec-cartHeader__content {
width: 30%;
padding-bottom: 18px;
}
.ec-cartRole__cart .ec-cartTable_content {
margin-bottom: 20px;
border: 1px #ddd solid;
}
.ec-cartRole__cart .sp_contenttitle {
width: 100%;
padding-bottom: 10px;
}
.ec-cartRole__cart .sp-ec-cartTable .ec-cartRow__summary {
width: auto;
}
.ec-cartRole__cart .sp-ec-cartTable .ec-cartRow__img {
width: 100%;
padding-right: 0;
}
.cart_input_area {
padding: 12px 15px;
margin-top: -21px;
border: 1px #ddd solid;
margin-bottom: 20px;
padding-bottom: 15px;
}
.cart_input_moji {
margin-bottom: 10px;
line-height: 1.3;
}
/* 個別メッセージ */
.ec-cartRole__cart .ec-cartTable {
margin-top: 45px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
.cart_input_moji {
font-size: 15px;
width: 56%;
}
.cart_inout_no1 {
margin-right: 8px;
}
}
/* 追加20231128 */
/*-------------------------------------------------
お届け先の指定
-------------------------------------------------*/
.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: 3px;
}
.shipping_title {
display: table-cell;
font-weight: bold;
font-size: 17px;
}
.ec-addressList .ec-addressList__remove {
display: table-cell;
padding: 0;
padding-right: 10px;
scale: 1.2;
}
.ec-addressList .ec-addressList__remove input[type="radio"] {
margin: 0;
}
.ec-addressList__name label {
background-color: #f1f1f1;
border-bottom: 1px #ddd solid;
border-radius: 3px 3px 0 0;
padding: 15px 20px 12px 20px;
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;
}
@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;
}
}
/*-------------------------------------------------
申込内容の確認
-------------------------------------------------*/
.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-of-type {
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: 23px;
}
.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;
word-break: break-all;
}
.ec-imageGrid .ec-imageGrid__img {
padding: 0;
vertical-align: middle;
}
.ec-totalBox .ec-totalBox__spec {
align-items: center;
}
.shipping_info {
font-weight: normal;
word-break: break-all;
}
@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: 0px;
}
.ec-orderDelivery__item {
padding: 20px 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, 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: 14px;
padding: 12px 7px;
}
}
/*-------------------------------------------------
株主様情報ー申込履歴一覧
-------------------------------------------------*/
/* 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 {
border: none;
}
.ec-orderDelivery .ec-cartTable {
border-bottom: none;
}
.ec-mypageRole .ec-cartRow .ec-cartRow__contentColumn {
border-bottom: 1px #ddd solid;
vertical-align: middle;
}
.ec-mypageRole .ec-cartRow .ec-cartRow__amountColumn {
border-bottom: 1px #ddd solid;
}
.ec-mypageRole .ec-cartRow .ec-cartRow__delColumn {
border-bottom: 1px #ddd solid;
}
.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__delColumn {
width: 8.3333333%;
}
.ec-mypageRole .ec-cartRow .ec-cartRow__amountColumn {
width: 8.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;
}
}
@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);
}
/* クーポン（グンゼ）
----------------------------------------------- */
/* TOPページ：クーポン*/
.top_cp a {
color: #333;
text-decoration: underline;
}
/* クーポン交換ページ*/
.ec-progress {
margin-bottom: 50px;
}
.colboxstyle {
/* border: #CCCCCC solid 1px; */
background-color: #ffffff;
width: 100%;
margin: 0;
/* font-weight: bold; */
font-size: 16px;
}
.colboxstyle .col_l {
vertical-align: middle;
padding: 18px;
border-top: none;
border-left: none;
}
.colboxstyle .col_l2 {
vertical-align: middle;
padding: 18px;
border-top: none;
border-left: none;
}
.colboxstyle .col_r {
vertical-align: middle;
padding: 18px;
border-top: none;
border-left: none;
}
.col_l {
width: 35%;
background-color: #f5f5f5;
/* padding:5px 5px 5px 5px; */
height: 90px;
}
.col_r {
width: 65%;
/* padding: 10px 0px 5px 0px; */
}
.colboxstyle2 {
/* border: #CCCCCC solid 1px; */
width: 50%;
margin: 0;
padding: 0px 0px 0px 0px;
font-size: 16px;
}
.colboxstyle2 .col_l2 {
vertical-align: middle;
padding: 18px;
border: none;
border-bottom: 1px #ddd solid;
}
.colboxstyle2 .col_r {
vertical-align: middle;
padding: 18px;
}
.colboxstyle2 .col_r2 {
border-top: none;
border-right: none;
border-left: none;
}
.col_l2 {
width: 35%;
background-color: #f5f5f5;
height: 70px;
}
.col_r2 {
width: 65%;
}
.col_l3 {
height: auto;
text-align: center;
background: #e1efff;
font-weight: normal;
}
.col_r3 {
text-align: center;
display: table-cell;
padding: 20px;
}
/* 手順タイトル */
.inf_msg {
padding: 0em 0em 0em 8px;
border-left: 5px #333 solid;
font-weight: bold;
font-size: 18px;
margin-bottom: 15px;
}
.posigzp2 {
/* padding-top: 5px;
padding-left: 15px; */
margin-bottom: 20px;
}
.colboxstyle2 .ec-input input {
margin-bottom: 0;
}
.cpbox2 {
margin-top: 65px;
}
.complete_gz_btm {
display: flex;
margin-top: 60px;
}
.complete_gz_numcheck {
background-color: #fff3d9;
padding: 25px;
margin-right: 20px;
width: 50%;
}
.complete_gz_numcheck h4 {
color: #e89b00;
font-weight: bold;
font-size: 18px;
border-left: 3px #e89b00 solid;
padding-left: 8px;
}
.complete_gz_numcheck p {
line-height: 1.5;
margin-bottom: 0;
}
.complete_gz_usage {
margin-left: 20px;
width: 50%;
}
.cp_btn .ec-off4Grid .ec-off4Grid__cell {
width: auto;
margin-left: 0;
display: block;
}
.cp_btn_cancel a {
margin: 0 auto;
}
.button_solid007 {
text-align: center;
}
.button_solid007 p {
margin-bottom: 7px;
color: #333;
letter-spacing: 0.04rem;
display: inline-block;
position: relative;
}
.button_solid007 p:before,
.button_solid007 p:after {
display: inline-block;
position: absolute;
top: 54%;
width: 18px;
height: 2px;
border-radius: 5px;
background-color: #333;
content: "";
}
.button_solid007 p:before {
left: -20px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.button_solid007 p:after {
right: -18px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.button_solid007 a {
position: relative;
margin: 0 auto;
}
/* .button_solid007 a:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
} */
.btn_copy {
background: #f7f7f7;
border: 1px #777777 solid;
border-radius: 3px;
font-size: 15px;
padding: 4px;
padding-bottom: 2px;
margin-left: 3px;
}
@media screen and (min-width: 768px) {
.top_cp a:hover {
text-decoration: underline;
}
.colboxstyle2 .col_l2 {
border-right: 1px #ddd solid;
}
.cp_btn_cancel a {
max-width: 360px;
}
}
@media screen and (max-width: 767px) {
.Android .btn_copy {
display: none;
}
.ec-progress {
margin-bottom: 25px;
}
/* .top_cp_mb{
margin-bottom: 60px;
} */
.col_l,
.col_r,
.col_l2,
.col_r2 {
display: block;
text-align: left;
border: none;
}
/* .table-bordered>tbody>tr>td{
display: block;
text-align: left;
border: none;
}
.table>tbody>tr>td{
border: none;
} */
.colboxstyle .col_l {
padding: 13px;
width: 100%;
height: auto;
border-right: none;
}
.colboxstyle .col_l2 {
padding: 13px;
width: 100%;
height: auto;
border-right: none;
}
.colboxstyle2 .col_l2 {
padding: 13px;
width: 100%;
height: auto;
}
.colboxstyle .col_r {
padding: 13px;
width: 100%;
border-right: none;
}
.colboxstyle2 .col_r2 {
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
}
.colboxstyle2 .col_r {
padding: 13px;
width: 100%;
height: auto;
border: none;
border-top: 1px #ddd solid;
}
.col_l3 {
width: auto;
}
.cpbox2 {
margin-top: 45px;
}
}
@media screen and (max-width: 1000px) {
.complete_gz_btm {
display: flex;
flex-direction: column-reverse;
}
.complete_gz_numcheck {
background-color: #fff3d9;
padding: 18px;
margin-right: 0px;
width: 100%;
}
.complete_gz_usage {
width: 100%;
max-width: 400px;
margin: 0 auto;
margin-bottom: 15px;
}
}
/*-------------------------------------------------
東邦ガス がすてきポイント交換ページ
-------------------------------------------------*/
.inner-box {
border: 1px solid #ccc;
height: 100%;
}
.point {
display: flex;
align-items: center;
background-color: #f2fcff;
padding: 15px 50px;
width: 64.9%;
max-width: 728px;
margin-top: -98px;
float: right;
border: 1px solid #ddd;
border-top: none;
border-bottom: none;
border-left: none;
}
.point_number {
font-size: 16px;
}
.point_lead {
font-size: 16px;
text-align: center;
padding: 14px 47px 0px 13px;
}
.triangle02 {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 27px 40.5px 0 40.5px;
border-color: #009acc transparent transparent transparent;
}
.tg-index td.col_r.col_r_pc {
padding: 49px 0 125px 23px;
}
.attention {
padding: 28px;
background-color: #fff1f1;
margin-bottom: 70px;
text-align: center;
}
.gstktoha {
text-align: end;
margin-top: 10px;
margin-bottom: 25px;
}
.tg-index .colboxstyle .col_l {
text-align: left;
}
.tg-index .ec-input .ec-errorMessage {
margin-bottom: 0;
}
.tg-index .ec-select .ec-errorMessage {
margin: 0 25px;
}
@media screen and (max-width: 767px) {
.point_lead {
font-size: 16px;
padding: 13px 109px;
padding: 13px;
background-color: #d4f1fa;
margin-bottom: 0;
}
.text-center1 {
background-color: #fff;
border: 1px solid #ddd;
padding-top: 20px;
padding-bottom: 20px;
}
.tg-index .text-center {
border: 1px solid #dddddd;
}
.triangle01 {
display: none;
}
.point {
display: block;
padding: 0;
max-width: 735px;
width: 100%;
margin-top: 17.5px;
/* margin-bottom: 12px; */
border: none;
}
.attention {
width: 100%;
padding: 15px;
}
.tg-index .colboxstyle .col_l2 {
background-color: white;
border-bottom: none;
padding: 0;
font-size: 15px;
}
.tg-index .table-bordered {
border: none;
}
.tg-index .table-bordered_sp {
border: 1px solid #ddd;
}
.tg-index .colboxstyle_sp {
display: flex;
align-items: center;
}
.tg-index .colboxstyle .col_r {
width: 65%;
border-bottom: none;
}
.tg-index td.col_r.col_r_pc {
padding: 18px;
width: 100%;
text-align: center;
}
.tg-index .colboxstyle .col_l {
text-align: center;
}
.attention {
padding: 20px 15px;
}
.tg-index .colboxstyle2 .ec-input input {
margin-bottom: 0;
}
.gstktoha {
margin-bottom: 20px;
}
.colboxstyle_spright {
text-align: right;
padding-right: 0;
}
}
@media screen and (min-width: 768px) {
.gstktoha a:hover {
opacity: 0.8;
}
}
/*-------------------------------------------------
東邦ガス がすてきポイント交換ページ（確認画面）
-------------------------------------------------*/
.triangle03 {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 41px 0 41px 34px;
border-color: transparent transparent transparent #009acc;
}
.triangle_pc {
padding: 4.2%;
}
.text-center_2 {
float: left;
}
.text-center_point {
border: none;
}
.row-eq-height {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 43.666667%;
}
.tg-confirm .table-bordered > tbody > tr > td,
.tg-confirm .table-bordered > tbody > tr > th,
.tg-confirm .table-bordered > tfoot > tr > td,
.tg-confirm .table-bordered > tfoot > tr > th,
.tg-confirm .table-bordered > thead > tr > td,
.tg-confirm .table-bordered > thead > tr > th {
vertical-align: middle;
}
.tg-confirm .table-bordered {
border: none;
}
.tg-confirm .colboxstyle2 {
border: #cccccc solid 1px;
}
.text_large {
font-size: 40px;
}
.col_l_point {
height: 70px;
}
.ec-font-bold {
font-size: 16px;
}
@media screen and (max-width: 767px) {
.tg-confirm .colboxstyle2 {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
border-top: none;
}
.row-eq-height {
flex-direction: column;
}
.triangle03 {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 50px 0 50px;
border-color: #009acc transparent transparent transparent;
}
.inner-box2 {
width: 100%;
}
.tg-confirm .colboxstyle2 .col_r {
border-top: none;
border-bottom: none;
}
.box {
width: 100%;
}
.tg-confirm .col_l {
width: 100%;
height: auto;
}
.ec-font-left {
text-align: left;
}
.text_large {
font-size: 30px;
}
.ec-font-bold {
font-size: 18px;
}
.font_normal {
font-size: 16px;
font-weight: normal;
}
}
/*-------------------------------------------------
東邦ガス がすてきポイントコース（交換完了画面）
-------------------------------------------------*/
.btn-shinki {
background-color: #f88b16;
height: 58px;
padding: 10px;
margin-top: 35px;
position: relative;
color: #fff;
font-weight: bold;
text-decoration: none;
border-radius: 3px;
display: block;
width: 36%;
min-width: 250px;
}
.btn-shinki:before {
content: "初めてClub TOHOGASをご利用の方はこちら";
position: absolute;
left: -7px;
width: 105%;
top: -22px;
color: #333;
font-weight: normal;
font-size: 13.6px;
}
.btn_login {
background-color: #086cd8;
height: 58px;
padding: 10px;
position: relative;
margin-top: 35px;
color: #fff;
font-weight: bold;
text-decoration: none;
border-radius: 3px;
width: 36%;
min-width: 250px;
display: block;
margin-right: 30px;
}
.btn_login:before {
content: "既にClub TOHOGAS会員の方はこちら";
position: absolute;
left: 5px;
width: 100%;
top: -22px;
color: #333;
font-weight: normal;
font-size: 13.6px;
}
.btn-shinki:focus,
.btn_login:focus {
color: #fff;
}
.btn-shinki:hover,
.btn_login:hover {
color: #fff;
}
.point_number3 {
color: #333;
font-size: 16px;
}
@media screen and (max-width: 767px) {
.col_number {
background-color: #ddd;
padding: 12px 0;
}
.col_border {
border: #cccccc solid 1px;
}
.btn-shinki {
width: 100%;
margin-bottom: 10px;
}
.btn_login {
width: 100%;
margin-right: 0;
}
.text_large3 {
font-size: 18px;
font-weight: bold;
}
}
@media screen and (min-width: 768px) {
.btn-shinki:hover {
background-color: #eb8211;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.btn_login:hover {
background-color: #0051a8;
color: #fff;
font-weight: bold;
text-decoration: none;
}
}
/*-------------------------------------------------
東邦ガス 株主情報「がすてきポイント交換コードの確認」
-------------------------------------------------*/
.serial_text {
margin-bottom: 70px;
font-size: 16px;
}
.text_inline {
display: inline-block;
}
@media screen and (max-width: 767px) {
.serial_text {
margin-bottom: 38.5px;
font-size: 15px;
}
}
/*-------------------------------------------------
東邦ガス 株主情報「がすてきポイント交換コードの確認」navi
-------------------------------------------------*/
.naviButton .btn-code {
font-size: 13px;
padding: 5px 10px;
}
@media screen and (max-width: 767px) {
.naviButton .btn-code {
padding: 3.6px 10px !important;
font-size: 13px !important;
}
}
/* eギフト送付先の指定 goodp V002.5
----------------------------------------------- */
.padding-md {
padding: 15px !important;
}
.deliv-heading {
padding: 10px 15px;
display: block;
background-color: #f5f5f5;
}
.padding-none {
padding: 0 !important;
}
.margin-top-sm {
margin-top: 10px !important;
}
.egift .margin-top-lg {
margin-top: 20px !important;
}
/*20231129追加*/
.egift-send .ec-addressList__address {
display: flex;
width: 100%;
justify-content: space-between;
margin-right: 0;
align-items: center;
padding: 16px 20px;
}
.egift-send .ec-addressList__address > :first-child {
width: 71%;
}
.egift-caution {
text-align: left;
font-size: 15px;
margin: 10px 0 25px;
}
.egift-send .ec-addressList__action .ec-inlineBtn {
padding: 10px 10px 8px;
width: 71px;
font-size: 15px;
}
@media only screen and (max-width: 767px) {
.egift-send .ec-addressList__address {
flex-direction: column;
align-items: flex-start;
padding: 16px;
}
.egift-send .ec-addressList__action {
flex-direction: row;
margin-top: 12px;
}
.egift-send .ec-addressList__action .ec-inlineBtn {
width: 69px;
}
.egift-send .ec-addressList__action .ec-inlineBtn:first-child {
margin-bottom: 0;
margin-right: 8px;
}
.egift-send .ec-addressList__address > :first-child {
width: 100%;
}
}
#egift_other_send_main_text {
margin-bottom: 16px;
}
#egift_other_send_email_first {
margin-bottom: 8px;
}
#egift_other_send_email_second {
margin-bottom: 0;
}
.sendinfo {
margin: 5px 0 25px;
font-weight: bold;
font-size: 16px;
}
.ec-cartCompleteRole {
font-size: 15px;
}
.mypage-egift-send .ec-addressList__address {
padding: 20px 16px;
}
@media only screen and (max-width: 767px) {
.mypage-egift-send .ec-addressList__item {
display: flex !important;
flex-direction: column;
}
.mypage-egift-send .ec-addressList__address {
margin: 0;
width: 100%;
padding-bottom: 12px;
}
.mypage-egift-send .ec-addressList__action {
flex-direction: row;
}
.mypage-egift-send .ec-addressList__action .ec-inlineBtn {
width: 69px;
padding: 10px 10px 8px;
font-size: 15px;
}
.mypage-egift-send .ec-addressList__action .ec-inlineBtn:first-child {
margin-bottom: 0;
margin-right: 8px;
}
.mypage-egift-send .ec-addressList__actionbox {
padding-left: 16px;
padding-top: 0;
}
}