@charset "utf-8";

/*
## font
~~~
<p>株式会社エルテックス　eltexDC cssガイド</p>
~~~
*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    color: #000;
    font-family:"Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    background-color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 2;
    letter-spacing:1px;
    -webkit-text-size-adjust: 100%;
    margin:0;
    padding:0;
}
@media screen and (max-width:1320px){
	body {
		font-size: 14px;
	}
}

/*
## h1
~~~
<h1 class="level_h1">見出し1</h1>
<h1 class="level_h1"><span>見出し1</span></h1>
~~~
*/
.level_h1 {
    border-color: #f4a35d;
}

.level_h1 span {
    border-color: #ec8125;
}

/*
## h2
~~~
<h2 class="level_h2">見出し2</h2>
~~~
*/

.level_h2 {
    padding: 5px 0 0;
    font-size: 28px;
    line-height: 1.75;
    font-weight: 400;
    border-bottom: none;
}
h2.slider_fv_caption03 {
    margin: 0 !important;
}

.level_h2 span {
    display: block;
    font-size: 16px;
    border-bottom: none;
}

@media screen and (max-width:1000px){
	.level_h2 {
		font-size: 24px;
		line-height: 1.75;
		font-weight: 400;
		border-bottom: none;
	}
}

@media screen and (max-width:768px){
	.level_h2 {
		font-size: 20px;
		line-height: 1.75;
		font-weight: 400;
		border-bottom: none;
	}
}


/*
## h3
~~~
<h3 class="level_h3">見出し3</h2>
~~~
*/

.level_h3 {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.5;
    border-bottom: none;
    /*border-bottom: 1px solid #81b8da;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-bottom: 5px;*/
}

.level_h3.titleNews {
	font-size: 16px;
	font-weight: 400;
	padding: 0;
}

/*
## アンカー
~~~
<a href="asdf">テキストリンク</a><br/>
<a href="#">テキストリンク</a>
~~~
*/

/*a {
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}*/

a,a:hover {
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
	-o-transition: 0.7s;
	transition: 0.7s;
}

a:link,
a:visited {
    color: #000;
    /*text-decoration: underline;*/
}

/*a:link:hover,
a[href]:hover {
    color: #999;
    text-decoration: underline;
}*/

/*#information a:link:hover{
    color: #019140;
    text-decoration: underline;
}*/

a.underline_none {
    text-decoration: none;
}

/*
## ボタン
~~~
<div id="" class="set-group buttonArea">
        <div id="" class="itemWrap  linkWrap">
            <div class="items">
                <a href="/edc_fr/MemberRegister.jsp" id="memberRegisterLink_link" class="btn_lg btn_1 memberRegisterLink">新規会員登録</a>
            </div>
        </div>
    </div>
~~~
*/

/* ボタン基本 */

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="button"],
input[type="submit"],
input[type="reset"],
/*button[type="button"],*/
button[type="submit"],
button[type="reset"],
textarea,
select {
    font-size: 1.0em;
    font-weight: 400;
    border: none;
    border-bottom: solid 1px #000;
    border-radius: 0;
    padding: 8px 0 6px 0;
    box-sizing:border-box;
}

input:focus,
textarea:focus,
select:focus {
	border-color: none;
}

a[class*="btn_"],
input[type="button"],
input[type="submit"],
input[type="reset"],
/*button[type="button"],*/
button[type="submit"],
button[type="reset"] {
	font-size: 16px;
	cursor: pointer;
	border-radius: 0px;
	padding: 4px 16px;
	display: inline-block;
	text-decoration: none;
}

button[type="button"] {
	border-radius: 0px;
}


input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button[type="button"]:hover,
button[type="submit"]:hover,
button[type="reset"]:hover,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
button[type="button"]:focus,
button[type="submit"]:focus,
button[type="reset"]:focus,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button[type="button"]:active,
button[type="submit"]:active,
button[type="reset"]:active {
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	text-decoration: none;
}

a.btn_lg,
a[class*="btn_"],
input.btn_lg[type],
input.btn_lg[type="button"],
button.btn_lg[type] {
    display: inline-block;
    width: 392px;
    /*min-width: 150px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;*/
    font-size: 16px;
    margin: 0;
    padding: 0 10px;
    height: 60px;
    /*min-height: 2rem;*/
    line-height: 2.4;
    font-family:"Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-weight: 400;
    color: #333;
    text-decoration: none;
}
a.btn_lg:hover,
a.btn_lg:active,
a[class*="btn_"]:hover,
a[class*="btn_"]:active,
input.btn_lg[type]:hover,
input.btn_lg[type]:active,
button.btn_lg[type]:hover,
button.btn_lg[type]:active {
    /*opacity: 0.5;*/
    color: #000;
    text-decoration: none;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

@media screen and (max-width:1000px){
    a.btn_lg,
    a[class*="btn_"],
    input[type="button"], 
    input.btn_lg[type],
    button.btn_lg[type] {
        display: block;
        width: 100%;
        /*min-width: 150px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;*/
        font-size: 14px;
        margin: 0;
        padding: 0 10px;
        height: auto;
        /*min-height: 2rem;*/
        line-height: 2.4;
        /*font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;*/
        color: #333;
        text-decoration: none;
    }
}


/* ボタン色その1 */
a.btn_1,
input.btn_1[type],
button.btn_lg[type] {
    background: #000;
    /*border-color: #35b900;*/
    color: #fff;
    line-height: 60px;
    text-decoration: none;
}
@media screen and (max-width:600px){
	a.btn_1,
	input.btn_1[type],
	button.btn_lg[type] {
    	background: #000;
	color: #fff;
	line-height: 48px;
	text-decoration: none;
	}
}

a.btn_1,
input.btn_1[type="button"],
input.btn_1[type="submit"],
input.btn_1[type="reset"],
button.btn_1[type="button"],
button.btn_1[type="submit"],
button.btn_1[type="reset"] {
	color: #fff;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
}

a.btn_1:hover,
a.btn_1:active,
a.btn_1:link:hover,
a.btn_1[href]:hover,
input.btn_1[type]:hover,
input.btn_1[type]:active,
button.btn_1[type]:hover,
button.btn_1[type]:active {
    color: #fff;
    text-decoration: none;
}


/* 決定系ボタン */
a.btn_lg.loginButton,
a.btn_lg.saveButton,
a.btn_lg.nextButton,
a.btn_lg.orderLink2,
a.btn_lg.completeButton,
a.btn_lg.selfOrderLink,
a.btn_lg.giftOrderLink,
a.btn_lg.postageMsgLink,
input.btn_lg[type].loginButton,
input.btn_lg[type].saveButton,
input.btn_lg[type].nextButton,
input.btn_lg[type].orderLink2,
input.btn_lg[type].completeButton,
input.btn_lg[type].selfOrderLink,
input.btn_lg[type].giftOrderLink,
input.btn_lg[type].postageMsgLink,
button.btn_lg[type].loginButton,
button.btn_lg[type].saveButton,
button.btn_lg[type].nextButton,
button.btn_lg[type].orderLink2,
button.btn_lg[type].completeButton,
button.btn_lg[type].selfOrderLink,
button.btn_lg[type].giftOrderLink,
button.btn_lg[type].postageMsgLink {
    background: #000;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
   /* background: rgb(234,62,65);
    background: -moz-linear-gradient(top, rgb(234,62,65) 0%, rgb(176,63,64) 100%);
    background: -webkit-linear-gradient(top, rgb(234,62,65) 0%,rgb(176,63,64) 100%);
    background: linear-gradient(to bottom, rgb(234,62,65) 0%,rgb(176,63,64) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea3e41', endColorstr='#b03f40',GradientType=0 );
    border-color: #b03f40;*/
}

/* キャンセル系ボタン */
a.btn_lg.returnButton,
a.btn_lg.backButton,
a.btn_lg.continueLink2,
a.btn_lg.closeButton,
input.btn_lg[type].returnButton,
input.btn_lg[type].backButton,
input.btn_lg[type].continueLink2,
input.btn_lg[type].closeButton,
button.btn_lg[type].returnButton,
button.btn_lg[type].backButton,
button.btn_lg[type].continueLink2,
button.btn_lg[type].closeButton {
    /*background: rgb(217,217,217);
    background: -moz-linear-gradient(top, rgb(217,217,217) 0%, rgb(122,122,122) 100%);
    background: -webkit-linear-gradient(top, rgb(217,217,217) 0%,rgb(122,122,122) 100%);
    background: linear-gradient(to bottom, rgb(217,217,217) 0%,rgb(122,122,122) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9d9d9', endColorstr='#7a7a7a',GradientType=0 );
    border-color: #7a7a7a;
    color: #fff;*/
    text-align: center;
    background: #fff;
    border-color: #000;
    line-height: 60px;
    color: #000;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
@media screen and (max-width:600px){
	input.btn_lg[type].returnButton {
		line-height: 50px;
	}
}

a.btn_lg.returnButton:hover,
a.btn_lg.backButton:hover,
a.btn_lg.continueLink2:hover,
a.btn_lg.closeButton:hover,
input.btn_lg[type].returnButton:hover,
input.btn_lg[type].backButton:hover,
input.btn_lg[type].continueLink2:hover,
input.btn_lg[type].closeButton:hover,
button.btn_lg[type].returnButton:hover,
button.btn_lg[type].backButton:hover,
button.btn_lg[type].continueLink2:hover,
button.btn_lg[type].closeButton {
    background: #000;
}

input:focus,
textarea:focus,
select:focus {
	border-color: #000；
}

/* キャンセル系ボタンの左paddingを打ち消し */
.returnButtonItemWrap {
    padding-right: 0;
}

#returnButton {
	font-size: 16px;
}

@media screen and (max-width:1000px){
	#returnButton {
		font-size: 14px;
	}
}








input[type="checkbox"] {
	position:relative;
	
}


.checkboxStyle {
	display: none;
}

.checkboxStylelabel {
	padding-left: 24px;
	position:relative;
}

.giftTypeLabelTdSurround .checkboxStylelabel,
.addAddressBookLabelTdSurround .checkboxStylelabel,
.memberInfoTitleItemWrap .checkboxStylelabel,
.changeAddLabelTdSurround .checkboxStylelabel {
	display: inline-block;
	padding-left: 24px;
	position:relative;
}

.checkboxStylelabel::before {
	content: "";
	display: block;
	position: absolute;
	top: 4px;
	left: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #ccc;
}

.giftTypeLabelTdSurround .checkboxStylelabel::before,
.addAddressBookLabelTdSurround .checkboxStylelabel::before,
.memberInfoTitleItemWrap .checkboxStylelabel::before,
.changeAddLabelTdSurround .checkboxStylelabel::before {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #ccc;
}
@media screen and (max-width:1320px){
	.checkboxStylelabel::before {
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #ccc;
	}
}
@media screen and (max-width:1320px){
	.changeAddLabelTdSurround .checkboxStylelabel::before {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #ccc;
	}
}

.checkboxStyle:checked + .checkboxStylelabel::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 5px;
	width: 7px;
	height: 14px;
	transform: rotate(40deg);
	border-bottom: 3px solid #000;
	border-right: 3px solid #000;
}
@media screen and (max-width:1320px){
	.checkboxStyle:checked + .checkboxStylelabel::after {
	content: "";
	display: block;
	position: absolute;
	top: -2px;
	left: 5px;
	width: 7px;
	height: 14px;
	transform: rotate(40deg);
	border-bottom: 3px solid #000;
	border-right: 3px solid #000;
	}
}


.radiobuttonLabel input,
.radiobuttonLabel:checked input {
	display: none !important;
}
.radiobuttonLabel input + span{
	padding-left: 24px;
	position:relative;
	margin-right: 24px;
}
.radiobuttonLabel input + span::before{
	content: "";
	display: block;
	position: absolute;
	top: 4px;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #999;
	border-radius: 50%;
}
.radiobuttonLabel input:checked + span{
	/*color: #e50044;*/
}
.radiobuttonLabel input:checked + span::after{
	content: "";
	display: block;
	position: absolute;
	top: 7px;
	left: 3px;
	width: 11px;
	height: 11px;
	background: #e50044;
	border-radius: 50%;
}
@media screen and (max-width:1320px){
	.radiobuttonLabel input + span::before{
		content: "";
		display: block;
		position: absolute;
		top: 2px;
		left: 0;
		width: 15px;
		height: 15px;
		border: 1px solid #999;
		border-radius: 50%;
	}
	.radiobuttonLabel input:checked + span::after{
		content: "";
		display: block;
		position: absolute;
		top: 5px;
		left: 3px;
		width: 11px;
		height: 11px;
		background: #e50044;
		border-radius: 50%;
	}
}





@media screen and (max-width: 641px) {
	#buttonGroup {
		width: 100%;
		height: auto;
		position: relative;
	}
	/* 上配置 */
	#reminderButton,
	#saveButton,
	#confirmButton,
	#newButton,
	#addInqButton,
	#shoppingButton_link,
	input.btn_lg[type="button"].nextButton,
	input.btn_lg[type="submit"].nextButton,
	a.nextButton {
		width: 100%;
		height: 60px;
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
	}
	/* 下配置 */
	#returnButton_link,
	#returnButton,
	#cartButton_link,
	input.btn_lg[type="button"].backButton,
	input.btn_lg[type="submit"].backButton,
	a.backButton {
		width: 100%;
		height: 60px;
		position: relative;
		bottom: 0;
		left: 0;
		margin: 0;
	}
}

@media screen and (max-width: 600px) {
	#buttonGroup {
		width: 100%;
		height: auto;
		position: relative;
	}
	#reminderButton,
	#saveButton,
	#confirmButton,
	#newButton,
	#addInqButton,
	#shoppingButton_link,
	input.btn_lg[type="button"].nextButton,
	input.btn_lg[type="submit"].nextButton,
	a.nextButton {
		width: 100%;
		height: 50px;
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
	}
	#returnButton_link,
	#returnButton,
	#cartButton_link,
	input.btn_lg[type="button"].backButton,
	input.btn_lg[type="submit"].backButton,
	a.backButton {
		width: 100%;
		height: 50px;
		position: relative;
		bottom: 0;
		left: 0;
		margin: 0;
	}
}



/* 会員登録ボタン */
a.btn_lg.memberRegisterLink,
input.btn_lg.memberRegisterLink,
button.btn_lg.memberRegisterLink {
    background: rgb(240,135,72);
    background: -moz-linear-gradient(top, rgb(240,135,72) 0%, rgb(240,135,72) 100%);
    background: -webkit-linear-gradient(top, rgb(240,135,72) 0%,rgb(240,135,72) 100%);
    background: linear-gradient(to bottom, rgb(240,135,72) 0%,rgb(240,135,72) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f08748', endColorstr='#f08748',GradientType=0 );
    border-color: #ff000d;
    color: #fff;
}

/* お気に入りに追加、ボタンレビューを書くボタン */
a.btn_1.addFavoriteLink,
a.btn_1.reviewLink {
    min-width: 0;
    min-height: 0;
}
/* レビュー投稿済 */
.reviewWrittenMsg {
    display: inline-block;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #7a7a7a;
    font-size: 0.9em;
    margin: 0;
    padding: 0 10px;
    line-height: 2.4;
    /*font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;*/
    color: #333;
    text-decoration: none;
    background: rgb(217,217,217);
}


/* アンケート回答ボタン */
@media screen and (max-width: 641px) {
    a.btn_1.enqueteLink {
        min-width: 0;
    }
}

/* ボタンエリアの余白 */
.contents #buttonGroup {
    margin: 80px 0 0;
}
@media screen and (max-width:600px){
    .contents #buttonGroup {
        margin: 48px 0 0;
    }
}

/* ボタン周りのdiv */
#buttonGroup > div {
    vertical-align: top;
}

/* ボタン間の余白 */
.buttonGroup > div:nth-child(2) {
    /*margin-left: 20px;*/
}
/* 注文ボタン */
body.orderInfoConfirm .buttonGroup > .returnButtonItemWrap + .completeButtonItemWrap {
    width: 150px;
}
body.orderInfoConfirm .buttonGroup > .returnButtonItemWrap + .completeButtonItemWrap img {
    vertical-align: bottom;
}

/*@media screen and (max-width: 641px) {
    #contents a.btn_lg,
    #contents input.btn_lg[type],
    #contents button.btn_lg[type] {
        position: static;
        width: auto;
        margin: 0;
        height: auto;
    }
}*/

/* 横幅320デバイス用指定 */
@media screen and (max-width: 320px) {
    a.btn_lg,
    input.btn_lg[type],
    button.btn_lg[type] {
        min-width: 140px;
    }
    /* ボタン間の余白 */
    .buttonGroup > div:nth-child(2) {
        margin-left: 10px;
    }
}


/*
## フォーム
*/
@media screen and (max-width: 641px) {
    input[type="email"] {
        width: 100%;
    }
    input[type="tel"] {
        width: inherit;
    }
    input[type="tel"][name^="postCode"] {
        /*width: 50%;*/
    }
    input.birthdayYear {
        width: 55px;
    }
}
@media screen and (max-width: 450px) {
	select.birthdayYear {
		display: block;
	}
	select.birthdayMonth,
	select.birthdayDay {
		margin-top: 0;
		margin-left: 0;
	}
}


/*
## 表組み
*/
.th,
.table th,
.table.th_30 .th,
.table.th_30 th {
    /*background: #f0f0f0;*/
}
/*.table input[type],
.table select {
    border: none;
    border-bottom: solid 1px #000;
    padding: 10px 0 !important;
    box-sizing:border-box;
}*/
.table select {
    vertical-align: middle;
}
select::-ms-expand {
    display: none;
}
#isMemberAgreementFlg_label {
    display: block;
    text-align: center;
}


@media screen and (max-width: 641px) {
    .table select {
        vertical-align: initial;
    }
    .table .__error {
        display: inline-block;
        margin-top: 5px;
    }

    /* スマホのとき、表を横スクロールで表示 */
    .scrollTable {
        overflow: auto;
        white-space: nowrap;
    }
    .scrollTable .table {
        width: 100%;
    }
    .scrollTable .th,
    .scrollTable .td {
        display: table-cell;
        border: inherit;
    }
    .scrollTable::-webkit-scrollbar{
     height: 5px;
    }
    .scrollTable::-webkit-scrollbar-track{
     background: #F1F1F1;
    }
    .scrollTable::-webkit-scrollbar-thumb {
     background: #BCBCBC;
    }
}


/*
## 基本レイアウト
*/
#wrap {
    width:100%;
    margin:0;
    position:relative;
    text-align:left;
}
.contents {
    width:100%;
    margin:0 auto;
    padding-bottom: 104px;
    position:relative;
    background-color:#fff;
    z-index: 2;
    /*margin-bottom: 434px;*/
}
@media screen and (max-width:1059px){
    .contents {
        width:auto;
    }
}
/*@media screen and (max-width:1000px){
    .contents {
        margin-bottom: 370px;
    }
}*/
@media screen and (max-width:767px){
    .contents {
    padding-top: 0;
    padding-bottom: 80px;
    width: 100%;
    }
    body.myPage .contents {
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    }
}

.contents section {
    padding:0;
    margin:0;
}
.contents .information{
    margin: 0 0 15px 5px;
}
.topGroupName {
    width: 1016px;
    margin:0 auto;
    /*width: 100%;*/
    float: none;
/*  margin:20px 0 50px;
    border-top-left-radius:6px;
    -moz-border-top-left-radius:6px;
    -webkit-border-top-left-radius:6px;
    border-top-right-radius:6px;
    -moz-border-top-right-radius:6px;
    -webkit-border-top-right-radius:6px;*/
}
@media screen and (max-width:1056px){
.topGroupName {
    width: auto;
    margin:0 20px;
    float: none;
}
}
.layoutGroup {
    margin-bottom: 10px;
}
@media (max-width: 751px) and (orientation: landscape) { /* iPhone6- 横向き用 */
    #wrap {
        max-width:980px;
    }
}
@media screen and (max-width: 767px) {
    .contents {
        width: 100%;
    }
    .topGroupName {
        margin: 0;
        padding: 0 20px;
    }
    /* LP用設定 */
    form[action="/LP.jsp"] .topGroupName {
        padding: 0;
    }
    .topGroupName label {
        width:100%;
        text-align:left;
    }
}

/*
## 2カラム用レイアウト
*/
.twoColumns form {
    float: right;
    width: calc( 100% - 326px );
 }
@media screen and (min-width: 1636px) {
	.twoColumns form {
    	width: calc( 100% - 308px );
	}
}
/*
## 2カラム用レイアウト topGroupName
*/
.twoColumns .topGroupName {
   width: 710px;
}


/*
## 悠悠館用ヘッダー
*/
/*.oneColumns ,.twoColumns {
    padding-top: 48px;
}*/
/* iPad用設定 */
/*@media screen and (min-width: 642px) and (max-width: 768px) {
    .oneColumns ,.twoColumns {
        padding-top: 150px;
    }
}*/
/* スマホ用設定 */
/*@media screen and (max-width: 641px) {
    .oneColumns ,.twoColumns {
        padding-top: 105px;
    }
}*/


/*
## レスポンシブ用レイアウト
*/
@media screen and (max-width: 1280px) {
    .twoColumns form {
        width: calc( 100% - 316px );
    }
}
@media screen and (max-width: 980px) {
    .twoColumns form {
        width: calc( 100% - 296px );
    }
}
@media screen and (max-width: 767px) {
    .twoColumns form {
	float: none;
        width: 100%;
    }
}

@media screen and (max-width: 641px) {
    .oneColumn .topGroupName, .twoColumns .topGroupName {
        width: 100%;
    }
    .twoColumns form {
        float: none;
    }
}

/*
## メイン画像
*/
@media screen and (max-width: 767px) {
    .slider_fv {
        left: -10px;
        width: calc(100% + 20px);
    }
    .colnum1 .slider_fv {
        padding-top: 95px;
    }
}


/*
## 文言指定
*/
.attention {
    color: #f00;
}


/*
## グローバルナビ
*/
/* よくあるご質問/お問い合わせのアニメーションoff、横空白調整 */
#header_navi_wrapper a.pt6 {
    transition: 0s;
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/*
## パンくず
~~~
<nav id="panNav" class="panNav">
    <ul class="cf">
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/Shop.jsp" itemprop="url"><span itemprop="title">トップ</span></a></li>
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">デザインテンプレート</span></li>
    </ul>
</nav>
~~~
*/
.panNav{
	position: relative;
	width: auto;
	margin: 124px 0 0 20px;
	padding: 0;
	background: #fff;
	z-index: 2;
}
.panNav ul {
    font-size:14px;
}
.panNav ul li {
    display:inline-block;
    * display:inline;
    * zoom:1;
}
.panNav ul li + li:before {
    content:">";
    color: #666;
    padding:0 5px;
}
}
.panNav ul li a {
    color: #f00 !important;
    display: none;
}
.panNav ul li span,
.panNav ul li a span {
    color: #666;
}
.panNav ul li a:hover span {
    color: #000;
}
@media screen and (max-width: 767px){
    .panNav {
	margin: 54px 0 0 20px;
    }
    .panNav ul {
        font-size:12px;
    }
}
@media screen and (max-width: 641px){
    .panNav {
	margin: 48px 0 0 0;
        padding: 6px 0 0 20px;
    }
}


/*
## ヘッダー
*/
.headerWrap {
    background-color: #ec8125;
}

.headerS nav ul li a.hajimete {
    background: url(../images/headerWakaba.png) no-repeat 0 0;
}

.headerMain .headerSubMenu ul li.headerCart .num {
    background-color: #ec8125;
}

.headerMain .logo {
    margin: 0;
}

.headerMain .logo a {
    background: url(../images/logo.png) no-repeat 0 0;
    height: 58px;
}

.headerMain .headerSubMenu ul li.headerLogin a {
    background: url(../images/headerLogin.png) no-repeat center 8px;
    padding: 40px 0 0;
}

.headerMain .headerSubMenu ul li.headerUser a {
    background: url(../images/headerUser.png) no-repeat center 8px;
    padding: 40px 0 0;
}

.headerMain .headerSubMenu ul li.headerFavo a {
    background: url(../images/headerFavo.png) no-repeat center 8px;
    padding: 40px 0 0;
}

.headerMain .headerSubMenu ul li.headerCart a {
    background: url(../images/headerCart.png) no-repeat center 8px;
    padding: 40px 0 0;
}

@media screen and (max-width: 767px) {
    .button-toggle {
        box-sizing: content-box;
    }
    .menu a {
        text-decoration: none;
        box-sizing: content-box;
    }
    .menu a span {
        font-weight: bold;
    }
    body.myPage .button-toggle {
        display: none;
    }
}

@media screen and (max-width: 641px) {
    .headerMain p.logo a {
        background: url(../images/logo.png) no-repeat 0 0;
        background-size: contain;
        padding: 0;
        margin: 5%;
        height: auto;
        width: auto;
    }
}


/*
## ヘッダー 検索
*/
@media screen and (max-width: 641px) {
    .searchNavi input.searchNaviButton {
        background: #000 url(../images/headerSearch_sp.png) no-repeat 50% 50%;
        background-size: 50%;
    }
}


/*
## フッター
*/

footer div, footer section, footer nav {
	margin: 0;
}

.footerGuide {
    margin: 0 auto 10px;
    padding: 20px 0 0;
}

.footerGuide .footerGuideBox {
    float: left;
}

.footerGuide .footerGuideBox.guide_1 {
    width: 260px;
    padding: 20px;
}

.footerGuide .footerGuideBox.guide_2 {
    width: 458px;
    padding: 20px;
    border-left: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
}

.footerGuide .footerGuideBox.guide_3 {
    width: 260px;
    padding: 20px;
}

.footerGuide .footerGuideBox h4 {
    margin: 0 0 20px 0;
}

.footerGuide .footerGuideBox ul li {
    font-size: 0.8em;
    list-style-type: disc;
    margin: 0 0 1.5em 1em;
}

.footerGuide .footerGuideBox .table.shipping_timetable {
    font-size: 0.7em;
}

.footerGuide .footerGuideBox .table.shipping_timetable th {
    width: 100%;
    text-align: center;
    background: #b1e4c4;
    padding: 0.6em;
}

.footerGuide .footerGuideBox .table.shipping_timetable td {
    width: auto;
    padding: 0.6em;
}

.footerGuide .footerGuideBox ul.list_payment {
    margin: 0 0 1.5em 0;
}

.footerGuide .footerGuideBox ul.list_payment li {
    margin: 0 0 0.5em 1em;
    font-weight: bold;
}

.footerGuide .footerGuideBox ul.list_kome li:before {
    content: "どちらか必須";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}

.footerGuide .footerGuideBox ul.list_kome li {
    padding-left: 1em;
    position: relative;
    list-style-type: none;
    margin: 0 0 1.5em 0;
}

.footerContents {
    background-color: #ec8125;
}

.footerContents .footerInfo .infoBox {
    width: 690px;
    margin: 0;
    float: left;
    height: 140px;
    padding: 20px;
}

.footerContents .footerInfo .policyBox {
    width: 260px;
    font-size: 0.68em;
    margin: 0;
    float: right;
    height: 140px;
    padding: 40px 15px;
}

.footerContents .footerInfo .infoBox .info_tel_wrap {
    float: left;
    margin: 0;
}

.footerContents .footerInfo .infoBox .info_btn_wrap {
    width: 200px;
    float: right;
    margin: 0;
}

.footerContents .footerInfo .infoBox .info_btn_wrap .btn_inquiry a, .footerContents .footerInfo .infoBox .info_btn_wrap .btn_faq a {
    width: 200px;
    height: 45px;
    display: block;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 1.0em;
    padding: 0 10px;
    margin: 0 0 10px;
    line-height: 45px;
    text-decoration: none;
    text-align: center;
    background: #ec8125;
}

.footerContents .footerInfo .policyBox .policy_img_wrap {
    float: left;
}

.footerContents .footerInfo .policyBox .policy_text_wrap {}

.policyBanner img {
    float: left;
    margin-right: 1em;
}

.footerContents {
    padding: 10px 0 0 0;
}

.footerNavi .footerBox ul, .footerNavi .footerBox dl {
    font-size: 0.9em;
    line-height: 1.8em;
}

.footerNavi {
    padding: 30px;
}

.footerNavi .footerBox {
    padding: 0 20px 0 0;
    float: left;
    display: block;
    width: 25%;
}

.footerNavi *:last-child.footerBox {
    padding: 0;
}


.footerNavi:before, .footerNavi:after {
    content: "";
    display: table;
}

.footerNavi:after {
    clear: both;
}

.footerNavi {
    zoom: 1;
}

.footerNavi a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.footerNavi a:hover {
    color: #fff;
    text-decoration: underline;
}

.footerSubNavi {
    font-size: 1.2em;
}

.footerNaviSp {
    display: none;
}

.footerBox ul.tree_list {
    position: relative;
    font-size: 1.0em;
}

.footerBox ul.tree_list li, .footerBox ul.tree_list li>ul>li, .footerBox ul.tree_list li>ul>li>ul>li {
    margin: 0 0 0.5em 0;
}

.footerBox ul.tree_list>li>img, .footerBox ul.tree_list>li>ul>li img, .footerBox ul.tree_list>li>ul>li>ul>li img {
    position: relative;
    top: 0.5em;
    left: 0;
    margin: 0 0.5em 0 0;
    vertical-align: top;
}

.footerBox ul.tree_list>li>ul, .footerBox ul.tree_list>li>ul>li>ul, .footerBox ul.tree_list>li>ul>li>ul>li>ul {
    margin: 0.5em 0 0 0;
}

.footerBox ul.tree_list>li>ul>li, .footerBox ul.tree_list>li>ul>li>ul>li, .footerBox ul.tree_list>li>ul>li>ul>li>ul>li {
    background: url(../images/tree_list_line_white.png) no-repeat left top;
    padding: 0 0 1em 1em;
    margin: 0 0 0 0.5em;
}

.footerBox ul.tree_list>li>ul>li:last-child, .footerBox ul.tree_list>li>ul>li>ul>li:last-child, .footerBox ul.tree_list>li>ul>li>ul>li>ul>li:last-child {
    background: url(../images/tree_list_line_last_white.png) no-repeat left top;
}

.footerBox ul.tree_list li {
    font-weight: bold;
    margin-top: 2em;
    background: url(../images/iconArrowWhite.png) no-repeat 0 4px;
    padding-left: 21px;
}

.footerBox ul.tree_list li li {
    font-weight: normal;
    margin-top: 0;
}

@media screen and (max-width: 641px) {
    footer > div {
        margin-bottom: 0;
    }
    .footerGuide, .footerContents .footerNavi, .footerContents .footerInfo {
        display: none;
    }
    .footerContents {
        background: #fff;
    }
    .footerNaviSp {
        display: block;
        width: 100%;
        background: #f3f3f3;
        margin: 0;
    }
    .footerNaviSp .to_pc {
        background: #fff;
        margin: 0;
        padding: 10px;
    }
    .footerNaviSp .to_pc a {
        display: block;
        border-radius: 1000px;
        background: #f3f3f3;
        collor: #333;
        border: 1px solid #ccc;
        height: 48px;
        line-height: 48px;
        text-align: center;
        margin: 0;
        text-shadow: 0 2px 0 #fff;
    }
    .footerNaviSp .pagetop_link {
        border-bottom: 1px solid #ccc;
        background: -moz-linear-gradient( top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.05)), #fff;
        background: -webkit-gradient( linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.05))), #fff;
        box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 1);
        height: 70px;
        text-align: center;
        margin: 0;
    }
    .footerNaviSp .pagetop_link a {
        display: block;
        padding: 10px;
    }
    .footerNaviSp .pagetop_link .pagetop_icon {
        display: inline-block;
        height: 50px;
        padding-top: 10px;
        text-align: center;
        border-style: solid;
        border-width: 10px;
        border-color: transparent;
        border-top-width: 0;
        border-bottom: 10px solid #ccc;
        width: 0;
        height: 0;
        font-size: 0;
        line-height: 0;
    }
    .footerNaviSp .pagetop_link .pagetop_text {
        display: block;
        line-height: 20px;
        text-align: center;
        color: #666;
        text-shadow: 0 2px 0 #fff;
        font-size: 1.0em;
    }
    .footerNaviSp .footerGlobalNavi ul {
        margin: 30px 10px;
        border: 1px solid #ccc;
    }
    .footerNaviSp .footerGlobalNavi ul li a {
        margin: 0;
        padding: 18px;
        border-bottom: 1px dotted #ccc;
        display: block;
        background: #fff;
    }
    .footerNaviSp .footerGlobalNavi ul li a:after {
        content: "";
        margin: 0;
        padding: 0;
        line-height: 0;
        background: url(../images/iconArrowGreen2_sp_18@2x.png) no-repeat center center;
        background-size: 100%;
        display: inline-block;
        width: 18px;
        height: 21px;
        float: right;
    }
    .footerNaviSp .contact_tel {
        margin: 10px 10px 30px;
    }
    .footerNaviSp .policyBanner {
        display: block;
        margin: 10px;
        background: #fff;
        padding: 20px;
        text-align: center;
    }
    .footerNaviSp .policyBanner ul {
        text-align: center;
    }
    .footerNaviSp .policyBanner li {
        display: inline-block;
    }
    .footerSubNavi {
        background: #f3f3f3;
        padding-bottom: 0;
    }
    .footerSubNavi ul {
        margin: 0 auto;
        text-align: center;
    }
    .footerSubNavi ul li {
        margin-bottom: 1em;
        float: none;
    }
    .footerSubNavi ul li a {
        color: #333;
        font-size: 0.9em;
    }
    .footerSubNavi ul li+li {
        border-left: none;
    }
}

@media screen and (max-width: 641px) {
    .copy {
        background: #ec8125;
        color: #fff;
        font-size: 0.9em;
        text-align: center;
    }
    .copy .policyBanner {
        display: none;
    }
}


/*
## サイドコンテンツ
*/
.sideContents {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    width: 268px;
    margin: 48px 20px 0;
}
@media screen and (max-width: 1320px) {
        .sideContents {
		width: 238px;
	}
}


.sideContents aside {
    display: block;
    margin: 0 0 40px 0;
    text-align: center;
}

.sideContents .bnr_wrap {
    display: block;
    margin: 0 0 20px 0;
}

@media screen and (max-width: 1000px) {
	.sideContents {
    		/*position: relative;*/
   		width: 238px;
    		margin: 24px 0 0 20px;
    		/*float: left;*/
	}
}
@media screen and (max-width: 767px) {
	.sideContents {
		top: 48px;
		left: 0px;
		width: 100%;
		height: 100%;
		display: none;
		margin: 0;
		overflow: hidden;
		z-index:999999;
		position:fixed;
	}
	/*.sideContents.sidebar-in {
		left: 0%;
	}*/
	.sideContents section {
		margin-bottom: 0;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/*
## サイドコンテンツ 初めてのお客様
*/
.contents section.first {
    background: -moz-linear-gradient( top, rgba(100, 172, 0, 0.1) 0%, rgba(255, 255, 255, 0)), #fff;
    background: -webkit-gradient( linear, left top, left bottom, from(rgba(100, 172, 0, 0.1)), to(rgba(255, 255, 255, 0))), #fff;
    border: 1px solid #7fcd9c;
    padding: 0 20px;
    -moz-box-shadow: 0px 1px 5px #bbb;
    -webkit-box-shadow: 0px 1px 5px #bbb;
    box-shadow: 0px 1px 5px #bbb;
}

.contents section.first h3 {
    border-top: 4px solid #009b3a;
}

.contents section.first h3.wakaba {
    height: 61px;
    background: url(../images/sideTtlWakaba.png) no-repeat 10px 10px;
}

.contents section.first h3.wakaba span {
    display: none;
}

.contents section.first p.text {
    font-size: 0.75em;
    margin: 0 0 20px;
    padding: 0 10px;
}

@media screen and (max-width: 641px) {
    .contents section.first {
        margin-left: 10px;
        margin-right: 10px;
    }
}


/*
## サイドコンテンツ 新規会員登録
*/
.memberRegister a {
    display: block;
    width: 100%;
    height: 45px;
    background-color: #009b3a;
    color: #fff;
    font-weight: bold;
    font-size: 1.0em;
    text-align: center;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    line-height: 45px;
    text-decoration: none;
    margin: 0 0 20px;
}

.memberRegister a:hover {
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}

/*
## ネット会員登録
*/
.forgetCustomerNumber {
    display: block;
    margin: 10px 0 0 20px;
}
@media screen and (max-width: 641px) {
    .forgetCustomerNumber {
        margin: 0 20px 0 0;
        text-align: right;
    }
}

/*
## サイドコンテンツ about us
*/
.about_us_menu {
    margin: 0 0 20px;
}

.about_us_menu .about_1 a {
    width: 100%;
    display: block;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    padding: 10px 10px 10px 40px;
    margin: 0 0 10px;
    line-height: 1.5;
    text-decoration: none;
    text-align: left;
    background: #009b3a url(../images/iconArrowWhite.png) no-repeat 10px center;
}

.about_us_menu .about_1 a .small {
    font-size: 0.9em;
}

.about_us_menu .about_2 a, .about_us_menu .about_3 a {
    width: 100%;
    display: block;
    color: #009b3a;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9em;
    padding: 10px 10px 10px 43px;
    margin: 0;
    line-height: 1.5;
}

.about_us_menu .about_1 a:hover, .about_us_menu .about_2 a:hover, .about_us_menu .about_3 a:hover {
    text-decoration: underline;
}

.about_us_menu .about_2 a {
    background: url(../images/icon_acai.png) no-repeat 0 center;
}

.about_us_menu .about_3 a {
    background: url(../images/icon_propolis.png) no-repeat 0 center;
}

@media screen and (max-width: 641px) {
    .about_us_menu .about_1 a .small {
        padding-left: 1em;
    }
}


/*
## サイドコンテンツ ようこそ　ゲストさん
*/
.contents section.guest {
}

.contents section.guest h3 {
    margin: 0 0 20px;
}

.contents section.guest h3.loginOff img {
    padding: 20px 0 0;
}

.contents section.guest h3.loginOn span {
    padding: 0 5px;
}

.contents section.guest p.text {
    font-size: 0.75em;
    margin: 0 0 20px;
    padding: 0 10px;
}

@media screen and (max-width: 767px) {
.contents section.guest {
		margin-left: 0px;
		margin-right: 0px;
}

.sidebar-button-toggle {
	display:block;
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	margin:0;
	background: #000;
	z-index:9999;
	cursor: pointer;
	position:fixed;
}
.sidebar-button-toggle span {
	position: absolute;
	left: 15px;
	width: 18px;
	height: 2px;
	background-color: #fff;
}
.sidebar-button-toggle span:nth-of-type(1) {
	top: 17px;
}
.sidebar-button-toggle span:nth-of-type(2) {
	top: 23px;
}
.sidebar-button-toggle span:nth-of-type(3) {
	bottom: 17px;
}
.sidebar-button-toggle span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #fff;
	z-index:9999;
}
.sidebar-button-toggle.sidebar-active span:nth-of-type(1) {
	transform: translateY(20px) scale(0);
}
.sidebar-button-toggle.sidebar-active span:nth-of-type(2) {
	background-color: #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.sidebar-button-toggle.sidebar-active span:nth-of-type(2)::after {
	background-color: #fff;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.sidebar-button-toggle.sidebar-active span:nth-of-type(3) {
	transform: translateY(-20px) scale(0);
}

}


/*
## サイドコンテンツ mypage ボタン
*/
.myPageBtn a {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 1.0em;
    padding: 11px 10px 9px 40px;
    margin: 0 0 10px;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    text-align: left;
    /* !!!!!!!!!!! */
    background: #ec8125 url(../images/iconArrowWhite.png) no-repeat 10px center;
}

.myPageBtn a:hover {
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}


/*
## サイドコンテンツ マイページメニュー
*/

.mypage_menu {
    margin: 18px 0;
    border-top: 1px solid #ccc;
}

.mypage_menu-last {
     margin-bottom: 0;
     padding-bottom: 20px;
     border-bottom: 1px solid #ccc;
}

.mypage_menu li:first-child {
    margin-top: 18px;
}

.mypage_menu li a {
    display: block;
    line-height: 40px;
}

.mypage_menu li a:hover {
    //text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.mypage_menu {
		margin: 0;
		border-top: 1px solid #ccc;
	}
	.mypage_menu-last {
		margin-bottom: 38px;
		padding-bottom: 0;
		border-bottom: none;
	}
	.mypage_menu li:first-child {
		margin-top: 0;
	}
	.mypage_menu li a {
		padding: 0 20px;
		background:rgba(250,250,250,1);
	}
	.mypage_menu li:first-child a {
		padding-top: 10px;
	}
	.mypage_menu li:last-child a {
		padding-bottom: 10px;
	}
	.mypage_menu li a:hover {
		background:rgba(255,255,255,1);
	}

}

/*
## マイページ共通パーツ
*/
.goodsNameItemWrap,
.reglGoodsNameItemWrap,
.reglTermItemWrap {
    margin-bottom: 10px;
}
.orderNumItemWrap,
.reglOrderNumItemWrap {
    margin: 10px 0;
}
.orderFooter .orderDetailLink {
    background-size: contain;
}


/*
## マイページトップ
*/
body.myPage #topGroupName > .set-group {
	margin: 48px 0 0;
}
.newsDisplayPeriodStartCol {
    position: relative;
}
.displayPeriodStart {
    position: absolute;
}
@media screen and (max-width: 767px) {
	.newsGroup .newsTitle {
   	 	margin-bottom: 0;
	}
}
.newsGroup .newsTitle {
    padding-left: 8em;
    display: inline-block;
}


/*
## マイページ、注文詳細ページ
*/
.table .detailsGoodsNameCol {
    vertical-align: top;
}
.detailsGoodsNameCol .goodsName {
    margin-bottom: 10px;
}
.detailsGoodsNameCol .btn_1 {
    line-height: 2.4;
}
.detailsGoodsNameCol .btn_1:nth-child(2) {
    margin-right: 0;
}
.detailsGoodsNameCol .btn_1:nth-of-type(2) {
    margin-top: 20px;
    margin-right: 10px;
}
@media screen and (max-width: 641px) {
    .orderGoodsList .detailsGoodsNameCol .goodsName {
        text-align: left;
    }
    #contents .orderGoodsList .detailsGoodsNameCol .btn_1 {
        display: inline-block;
        float: none;
        margin-bottom: 10px;
        font-size: 0.82em;
        padding: 0 6px;
    }
    #contents .orderGoodsList .detailsGoodsNameCol a:nth-of-type(2) {
        margin-top: 20px;
        margin-right: 10px;
    }
}


/*
## マイページ、定期注文内容ページ
*/
.deliveryDateChangeButtonItemWrap,
.packingSlipChangeButtonItemWrap,
.destinationChangeButtonItemWrap {
    text-align: center;
}


/*
## マイページ、お問い合わせ追加入力ページ
*/
.inquiryResponseAddConfirmButton {
    margin-right: auto;
    margin-left: auto;
}


/*
## マイページ、アンケート入力ページ
*/
.periodEndItemWrap {
    text-align: right;
}
.choiceSingleItemWrap {
    padding-top: 30px;
}


/*
## サイドコンテンツ カテゴリ
*/

.sideCategory h3 {
    font-size: 1.1em;
    border-bottom: 1px solid #2fa700;
    margin: 0;
    padding: 0 0 10px 0;
}

.sideCategory h3 span {
    border-bottom: 3px solid #2fa700;
    font-weight: bold;
    padding: 10px 10px 6px 10px;
}

.sideCategory ul li {
    border-bottom: 1px dotted #ccc;
    padding: 10px;
}

.sideCategory ul li a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8em;
    height: 30px;
    line-height: 30px;
}

.sideCategory ul li a:hover {
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}


/*
## サイドコンテンツ 価格帯
*/
.priceRange ul li img {
    vertical-align: middle;
    margin-left: 10px;
}

.priceRange ul li span a {
    text-decoration: none;
    color: #333;
    font-size: 0.8em;
}

.priceRange ul li span a:hover {
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    text-decoration: underline;
}

.priceRange .level_h1 {
    font-size: 1.2em;
    margin: 10px 0 10px;
}


/*
## その他　スクロールアップ
*/
#scrollUp {
    bottom: 50px;
    right: 2%;
    height: 32px;  /* Height of image */
    width: 32px; /* Width of image */
   /* background: url(../img/custom/page_top.jpg) no-repeat #939598 center center;*/
    /*background: url(../img/custom/page_top.png) no-repeat center center;*/
    background: url(../images/page_top.png) no-repeat center center;
    background-size: 32px 32px;
}
#scrollUp:hover {
    filter: alpha(opacity=75);
    -moz-opacity:0.75;
    opacity:0.75;
}


/*
## その他　規約同意チェックボックス
~~~
<div id="isMemberAgreementFlgItemWrap" class="itemWrap isMemberAgreementFlgItemWrap clearfix checkboxWrap">
            <div class="items">
                <label id="isMemberAgreementFlg_label" for="isMemberAgreementFlg" class=" isMemberAgreementFlg_itemLabel checkboxLabel"><input type="checkbox" id="isMemberAgreementFlg" name="isMemberAgreementFlg" class="checkboxStyle REQUIRED_CHECK isMemberAgreementFlg" value="1">同意する</label>
                <span id="__error_isMemberAgreementFlg" class="__error __error_isMemberAgreementFlg"><span class="alertMessage alertMessageContent alertMessage-important">必須選択項目です。選択してください。</span></span>
            </div>
        </div>
~~~
*/
#isMemberAgreementFlgItemWrap, #isUseAgreementFlgItemWrap {
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px 0;
    margin: 10px 0;
    width: 100%;
}


/*
## その他　郵便番号検索ボタンはSPで非表示
*/
@media screen and (max-width: 641px) {
    input[type="button"].postCodeSearchButton,
    input[type="button"].orderPostCodeSearchButton {
        display: none;
    }
}

/*
## その他　入力項目必須
~~~
<div class="required"></div>
~~~
*/
.required:after {
	display: inline-block;
	background: #e50044 !important;
	border-radius: 2px !important;
	font-size: 12px !important;
	color: #fff;
	content: "必須";
	line-height: 20px;
	font-weight: 400 !important;
	margin: 5px 0 10px 0;
	min-width: 2em;
	padding: 0 5px !important;
	text-align: center;
}
@media screen and (max-width:767px){
	.required:after {
		float: none;
		margin-left: 5px;
	}
}


/*
## その他　条件付き必須
~~~
<div class="required_condition"></div>
~~~
*/
.required_condition:after {
    content: "必須";
    background: #cf646b;
}

/*
## テキスト 右寄せ、センター、左寄せ
~~~
<div style="width:400px;"><div class="text_right">右寄せ</div></div><br/>
<div style="width:400px;"><div class="text_center">センター</div></div><br/>
<div style="width:400px;"><div class="text_left">左寄せ</div></div>
~~~
*/

/*
## 改行しない
~~~
<div style="width:50px;"><div class="text_nowrap">改行しない</div></div></br>
<div style="width:50px;"><div class="nowrap">改行しない</div></div>
~~~
*/

/*
## カラムわけ 2分割
~~~
<div class="wrap_parent" style="width:600px;">
<div class="left_wrap"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
<div class="right_wrap"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
</div>
~~~
*/
/*
## カラムわけ 3分割
~~~
<div class="wrap_parent_3" style="width:600px;">
<div class="part_wrap_3"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
<div class="part_wrap_3"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
<div class="part_wrap_3"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
</div>
~~~
*/
/*
## カラムわけ 4分割
~~~
<div class="wrap_parent_4" style="width:600px;">
<div class="part_wrap_4"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
<div class="part_wrap_4"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
<div class="part_wrap_4"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
<div class="part_wrap_4"><p style="width:100px;height:30px;background-color:#ccc;"></p></div>
</div>
~~~
*/

/*
## テーブル構造
~~~
<div class="table">
    <div class="tr">
        <div class="th">ヘッダー1</div>
        <div class="th">ヘッダー2</div>
    </div>
    <div class="tr table_striped">
        <div class="td">カラム1</div>
        <div class="td">カラム2</div>
    </div>
    <div class="tr table_striped">
        <div class="td">カラム1</div>
        <div class="td">カラム2</div>
    </div>
    <div class="tr table_striped">
        <div class="td">カラム1</div>
        <div class="td">カラム2</div>
    </div>
    <div class="tr table_striped">
        <div class="td">カラム1</div>
        <div class="td">カラム2</div>
    </div>
</div>
~~~
*/

/*
## レスポンシブ
~~~
<div class="no_pc">PC非表示</div></br>
<div class="no_sp">SP非表示</div>
~~~
*/
.no_pc{
    display:none;
}
.no_sp{
    display:block;
}
@media screen and (max-width: 641px) {
    .no_sp{
        display: none !important;
    }
    .no_pc{
        display:inline-block;
    }
}

/*
## margin
~~~
<div style="width:100%;background-color:#eee;">
<div class="m0auto">0 auto</div>
<div class="mt0">top 0</div>
<div class="mt5">top 5</div>
<div class="mb0">bottom 0</div>
<div class="mb5">bottom 5</div>
<div class="ml0">left 0</div>
<div class="ml5">left 5</div>
<div class="mr0">right 0</div>
<div class="mr5">right 5</div>
</div>
~~~
*/

/*
## padding
~~~
<div style="width:100%;background-color:#eee;">
<div class="pt0">top 0</div>
<div class="pt5">top 5</div>
<div class="pb0">bottop 0</div>
<div class="pb5">bottop 5</div>
<div class="pl0">left 0</div>
<div class="pl5">left 5</div>
<div class="pr0">right 0</div>
<div class="pr5">right 5</div>
</div>
~~~
*/


/*
## ページネーション
*/
ul.pagination {
    margin: 48px auto 10px;
}
ul.pagination > li {
    width: 40px;
    margin: 0 5px;
    text-align: center;
}
ul.pagination li a.PAGING_LINK_PAGE,
ul.pagination li.PAGING_LINK_NOW_PAGE,
ul.pagination li.PAGING_LINK_NOW_PAGE:hover {
    padding: 0px;
    font-size: 1.2em;
    line-height: 38px;
}
ul.pagination li.PAGING_LINK_NOW_PAGE,
ul.pagination li.PAGING_LINK_NOW_PAGE:hover {
    background-color: #000;
    border-color: #000;
}
ul.pagination li a.PAGING_LINK_PAGE:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
}


/*
## エラー、systemError
*/
#systemError .errorMessage {
    text-align:center;
    margin: 24px auto 48px;;
}
.alertMessageContent {
    margin: 5px 0;
}
#systemError .detailText {
    margin: 2em auto;
}
#systemError .concept_title {
    margin-bottom: 0;
}
#systemError .linkHoverNone:hover {
    text-decoration: none;
}
@media screen and (max-width: 641px) {
    #systemError .detailText {
        width: 90%;
        text-align: left;
    }
    #systemError .linkHoverUnderline {
        text-decoration: underline;
    }
}

/* 404 */
#systemError.notFound .mainText {
    text-indent: 1em;
}
#systemError.notFound .linkText li {
    display: inline-block;
    margin-right: 2em;
}

@media screen and (max-width: 641px) {
    #systemError.notFound .mainText {
        text-indent: 0;
    }
    #systemError.notFound .concept_title {
        font-size: 1.3rem;
    }
}


/*
## Top
*/
.information_tel a,
.information_fax span {
    font-weight: bold;
}
@media screen and (min-width: 642px) {
    .information_tel a,
    .information_tel a:hover {
        text-decoration: none;
    }
}

.information_pt3 {
    background-color: #fff !important;
}
.formlist input[type="search"] {
    width:180px;
}
.formlist input[type="image"] {
    cursor: pointer;
}

/*#news_wrapper h2,
#news_wrapper th,
#news_wrapper td > a {
    font-weight:bold;
}*/

@media screen and (max-width: 768px) {
    .formlist input[type="search"] {
        width:140px;
    }
}
@media screen and (max-width: 641px) {
    #pc_tel_wrapper {
        display: block;
        margin: 10px 0 20px;
    }
}


/*
## 商品一覧
*/
/*@media screen and (max-width: 768px) {
    .u_list_products {
        border-top: 5px solid #f4e7e5;
    }
}*/


/*
## 商品ページ
*/
@media screen and (min-width:768px) and (max-width: 1000px){
    #add_01_product_cart .cart_yuyu_detail {
        margin: 2% 30% 2% 0;
    }
}
@media screen and (min-width:768px) and (max-width: 768px){
    #htmlText2_innerId .u_pro_wrap:nth-of-type(2) {
        display: flex;
        flex-wrap: wrap-reverse;
    }
}


/*
## 汎用
*/
/* ブロックレベル汎用指定 */
.dispBlock {
    display: block;
}
.dispInlineBlock {
    display: inline-block;
}
.dispBlockInline {
    display: inline;
}
.onTablet_dispBlock {
    display: none;
}
.onTablet_dispInlineBlock {
    display: none;
}
.onTablet_dispBlockInline {
    display: none;
}
.onSp_dispBlock {
    display: none;
}
.onSp_dispInlineBlock {
    display: none;
}
.onSp_dispBlockInline {
    display: none;
}

@media screen and (min-width: 642px) and (max-width: 768px) {
    .onTablet_dispBlock {
        display: block;
    }
    .onTablet_dispInlineBlock {
        display: inline-block;
    }
    .onTablet_dispBlockInline {
        display: inline;
    }
    .dispBlock {
        display: none;
    }
    .dispInlineBlock {
        display: none;
    }
    .dispBlockInline {
        display: none;
    }
    .onSp_dispBlock {
        display: none;
    }
    .onSp_dispInlineBlock {
        display: none;
    }
    .onSp_dispBlockInline {
        display: none;
    }

}

@media screen and (max-width: 641px) {
    .onSp_dispBlock {
        display: block;
    }
    .onSp_dispInlineBlock {
        display: inline-block;
    }
    .onSp_dispBlockInline {
        display: inline;
    }
    .dispBlock {
        display: none;
    }
    .dispInlineBlock {
        display: none;
    }
    .dispBlockInline {
        display: none;
    }
    .onTablet_dispBlock {
        display: none;
    }
    .onTablet_dispInlineBlock {
        display: none;
    }
    .onTablet_dispBlockInline {
        display: none;
    }
}


/* margin、padding汎用指定 */
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.mt60 {
    margin-top: 60px;
}
.mt80 {
    margin-top: 80px;
}
.mr10 {
    margin-right: 10px;
}
.mr20 {
    margin-right: 20px;
}
.mr30 {
    margin-right: 30px;
}
.mr60 {
    margin-right: 60px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb60 {
    margin-bottom: 60px;
}
.ml10 {
    margin-left: 10px;
}
.ml20 {
    margin-left: 20px;
}
.ml30 {
    margin-left: 30px;
}
.ml60 {
    margin-left: 60px;
}
.mLRauto {
    margin-left: auto;
    margin-right: auto;
}

.pt10 {
    padding-top: 10px;
}
.pt20 {
    padding-top: 20px;
}
.pt30 {
    padding-top: 30px;
}
.pt60 {
    padding-top: 60px;
}
.pr10 {
    padding-right: 10px;
}
.pr20 {
    padding-right: 20px;
}
.pr30 {
    padding-right: 30px;
}
.pr60 {
    padding-right: 60px;
}
.pb10 {
    padding-bottom: 10px;
}
.pb20 {
    padding-bottom: 20px;
}
.pb30 {
    padding-bottom: 30px;
}
.pb60 {
    padding-bottom: 60px;
}
.pl10 {
    padding-left: 10px;
}
.pl20 {
    padding-left: 20px;
}
.pl30 {
    padding-left: 30px;
}
.pl60 {
    padding-left: 60px;
}

.w50p {
    width: 50%;
}
.w60p {
    width: 60%;
}
.w70p {
    width: 70%;
}
.w80p {
    width: 80%;
}
.w90p {
    width: 90%;
}
.w100p {
    width: 100%;
}
@media screen and (max-width: 767px) {
    .sp_w50p {
        width: 50%;
    }
    .sp_w60p {
        width: 60%;
    }
    .sp_w70p {
        width: 70%;
    }
    .sp_w80p {
        width: 80%;
    }
    .sp_w90p {
        width: 90%;
    }
    .sp_w100p {
        width: 100%;
    }
}

.textC {
    text-align: center;
}
.textR {
    text-align: right;
}
.textL {
    text-align: left;
}

.fontBold {
    font-weight: bold;
}

.alertMsg p {
    color:#b94a48;
}