@charset "UTF-8";
/* ===================================================================
CSS information(スマホ版)
 URL：*
 説明：ヘッダー/フッターなど全ページ共通スタイル
=================================================================== */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
----------------------------------------------------------------
	スマホ
----------------------------------------------------------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width:1024px){
/*----------------------------------------------------
    サイドメニュー
----------------------------------------------------*/
#main aside {
    position: fixed;
    left: -220px;
    height: 100%;
    background: #f2f2f2;
    z-index: 102;
    margin: 0;
}
#side {
    overflow: auto;
}
#side.side-menu-show {
    width: 85%;
}
#side .sidebox {
    width: 100%;
}
#sideOverlay {
    position: fixed;
    width: 100%;
    height:100%;
    z-index: 101;
    top: 0;
    background: rgba(0,0,0,0.7);
}
/* -------------- */
/* ハンバーガーメニュー */
/* -------------- */
body.side header #hamburger {
    display: flex !important;
    align-items: center;
    padding: 0 0 0 20px;
}
#hamburger {
    position: relative;
}
#hamburger div {
    width: 30px;
    height: 25px;
    cursor: pointer;
    position: relative;
}
#hamburger span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #222222;
    transition: .35s ease-in-out;
}
#hamburger span:nth-child(1) {top:0}
#hamburger span:nth-child(2) {top:11px}
#hamburger span:nth-child(3) {top:22px}
 /* ボタン開 */
#hamburger.open span {
    border-color: #c03061;
}
#hamburger.open span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
#hamburger.open span:nth-child(2),
#hamburger.open span:nth-child(3) {
    top: 11px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg)
}
.side-menu-show {
    animation: side-menu-show 0.5s forwards;
}
@keyframes side-menu-show {
    from {
        transform: translateX(-220px);
    }
    to {
        transform: translateX(220px);
    }
}
.side-menu-hide {
    animation: side-menu-hide 0.5s forwards;
}
@keyframes side-menu-hide {
    from {
        transform: translateX(220px);
    }
    to {
        transform: translateX(-220px);
    }
}
.sub-item-menu > li > a {
    font-size: 1.1em;
    font-weight: 700;
    color: #000;
    padding: 5px 0 5px 0;
    display: block;
    position: relative;
}
.sub-item-menu a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* サイドメニュー内の商品一覧 */
#side .navi {
    padding: 0 10px;
    overflow: auto;
}
.products_list_level1 .box {
    width: 50%;
}
.products_list_level1 .box:nth-child(1n) {
    padding:  0 5px 0 0;
}
.products_list_level1 .box:nth-child(2n) {
    padding:  0 0 0 5px;
}
.products_list_level1 .box .item_title {
    font-size: 0.8em;
}
/* サイドメニュー内のご利用ガイド */
.children_list .wrap {
    width: 50%;
}
.layout_content {
    margin: 0;
}
.products_list_level1 .box .item_title {
    margin: 0;
}
.children_list .wrap .item_name {
    font-size: 0.8em;
}
/* テキスト */
.pc_tr{text-align:left;}
.pc_tc{text-align:left;}
.pc_tl{text-align:left;}
.sp_fwb{font-weight:700;}
.sp_fwn{font-weight:normal;}
.sp_block{display:block;}
.pc_fr{float:none;}
.pc_fl{float:none;}
/* 表示非表示 */
.sp_show {
    display: block;
}
.sp_hide {
    display: none;
}
.sp_hidden{
	display:none;
}
.sp_txt{
	display:inline-block;
}

/*----------------------------------------------------
	モーダル
----------------------------------------------------*/
.modaal-content-container div.modaal-title {
    margin: 0;
    padding: 10px 35px;
}
.modaal-content-container > .close {
    top: 10px;
    right: 5px;
}
.modaal_body {
    min-height: 100px;
}

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="number"], 
select, 
textarea{
	width:100%;
	box-sizing:border-box;
	font-size:1.0em;
}
input[type="text"]::placeholder, 
input[type="password"]::placeholder, 
input[type="email"]::placeholder, 
input[type="tel"]::placeholder, 
input[type="number"]::placeholder, 
textarea::placeholder {
	font-size: 0.8em;
    
}

input[type=file]{
	font-size: 0.9em;
}
input.sp_tb_short{width:85%;}
/* ajaxのオーバーレイ */
#overlay img {
	left: 42%;
}
/* ファイルアップロードのオーバーレイ */
#file_upload_overlay .info {
    width: 95%;
    margin: 50% auto;
    font-size: 1.2rem;
}
/*----------------------------------------------------
	ヘッダ
----------------------------------------------------*/
header > .inner {
    width: 100%;
}
/* -------------- */
/* 上段 */
/* -------------- */
header .top {
    width: 100%;
}
header .top .inner .left {
    width: 40%;
    display: flex;
    align-items: center;
    padding: 0;
}
header .top .inner .left h2.logo a {
    display: flex;
    align-items: center;
}
header .top .inner .left h2.logo img {
    max-width: 100%;
}
header .top .inner .right ul {
    float: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
header .top .inner .right ul > li {
    padding: 0;
    float: none;
}
header .top .inner .right ul li span.text {
    display: none;
}
header .top .inner .right ul li > a {
    top: 0;
}
header .top .inner .right ul li > a span.icon {
    margin: 0;
}
header .top .inner .left h1 {
    display: none;
}
header .top .inner .right {
    width: 55%;
}
header .top .inner .right ul li span.icon_num, header .top .inner .right ul li span.num {
    top: -9px;
    left: 15px;
}
header .top .inner .right ul li span.icon_login {
    top: -11px;
    left: 20px;
    font-size: 1.4em;
}
header .top .inner .right ul li:last-child {
    padding-right: 0;
}
/* -------------- */
/* 下段 */
/* -------------- */
body.side.children header .bottom {
    display: none;
}
header .bottom .inner .right {
    width: 100%;
}
header .bottom .inner .right ul li:last-child {
    margin-right: 0;
}
header .bottom .inner .right ul li span.icon {
    margin: 0;
    display: block;
    font-size: 1.5em;
}
header .bottom .inner .right ul li > a {
    height: 80px;
}
header .bottom .inner .right ul li > a .text {
    font-size: 0.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
    display: block;
}
/* -------------- */
/* ハンバーガーメニューがある場合 */
/* -------------- */
body.side header .top .inner #hamburger {
    width: 30%;
}
body.side header .top .inner .left {
    margin: 0;
}
body.side header .top .inner .left h2 {
    margin: 0 auto;
}
body.side header .top .inner .right {
    width: 30%;
}
/* -------------- */
/* 上段＆下段 */
/* -------------- */
header.fixed .bottom {
    display: none;
}
header.fixed ~ #contents {
    padding-top: 30px;
}
#header_submenu nav.children {
    width: 100%;
    border-top: none;
}
#header_submenu nav.children .products_list_level1 .box .image img {
    width: 100%;
}
#header_submenu nav.children .products_list_level1 .box {
    width: 50%;
}

/* -------------- */
/* 重要なお知らせ */
/* -------------- */
header .notice .title, 
header .notice .info {
    width: 100%;
}
header .notice .btn {
    top: 35px;
}
header .notice .btn a {
    font-size: 1.4em;
}
header .notice .link {
    width: 70%;
}

/*----------------------------------------------------
	#contents
----------------------------------------------------*/
#contents{
    width: 100%;
}
/* TOPページにサイドメニューがある場合 */
body.home.side #main {
    display: block;
}
body.home.side .layout_content.top_content {
    width: 100%;
}

/*----------------------------------------------------
	フッタ
----------------------------------------------------*/
/* 上段 */
footer .top .navi .menu .menu-item > a + ul.sub-menu li {
    width: 100%;
}
footer .top .navi .menu .menu-item > a + ul.sub-item-menu-child li{
    width: auto;
}
footer .top .navi .menu .menu-item > a + ul.sub-item-menu-child{
    display: inline-block;
}
/* 下段 */
footer .bottom .logo {
    width: 100%;
    margin: 0 0 10px 0;
}
footer .bottom .text {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0;
}
footer .bottom .cpi {
    width: 60px;
}
.pagetop{
	bottom: 5px;
	right:0;
}
/* クッキーのプライバシー */
.cookie_privacy {
    width: 100%;
    font-size: 0.8em;
}
footer.privacy_doui_not {
    padding: 0 0 170px 0;
}

/* -----------------------------------------------------------
	テーブル
----------------------------------------------------------- */
table{
	border-bottom:1px solid #746c67;
	border-left:1px solid #746c67;
}

table th,
table td, 
.in2cart_tbl th,
.in2cart_tbl td, 
.in2cart_tbl.up50 th,
.in2cart_tbl.up50 td {
	border-left:none;
	border-bottom: none;
	display:block;
	width:100%;
	padding:5px;
}
table.sp_mp_order td{
	border:none;
	padding:0;
}
td span.sp_txt{
	display:inline;
}
.sp_th{
    background-color: #f2f2f2;
    border: 1px solid #757575!important;
    border-radius: 2px;
    display: block;
    padding: 0 10px!important;
	margin:10px 0;
	text-align:center;
}
.th_tr th,.th_tr td {
	text-align: left!important;
}
/* width設定 */
.table_money,.col2hd,.mid,.midiu,.midium,.short,.sshort,.large,.largest{width:100%;}
table.clear th,table.clear td {
	display: table-cell;
}
/* スマホの時もPCと同じテーブルレイアウトにする */
.force_tbl th,
.force_tbl td{
	width:auto!important;
	display:table-cell;
}
/* テンプレート */
.temp th {
    background: #efefef;
    text-align: center;
    width:auto;
}
.temp td {
    padding: 10px;
    text-align: center;
    width:auto;
}

/* -----------------------------------------------------------
	営業日カレンダー
----------------------------------------------------------- */
table.in2cart_calendar{
   table-layout: fixed;
   width: 100%;
}
table.in2cart_calendar th,
table.in2cart_calendar td{
	display:table-cell;
}
.calendar_readme ul li .today, 
.calendar_readme ul li .holiday {
    top: 2px;
}
/* google recaptcha */
.grecaptcha-badge {
	bottom: 70px !important;
}

/*----------------------------------------------------
	投稿関連のページング
----------------------------------------------------*/
.nav-below {
    padding: 20px 0 0 0;
}
.nav-below i {
    font-size: 2em;
}
.nav-previous a {
    padding: 0 0 0 10px;
}
.nav-next a {
    padding: 0 10px 0 0;
}
.nav-below a {
	width: 85%;
    top: 10px;
}

/* パンくずリスト */
.breadcrumb {
    margin: 10px;
}


}/*スマホの終了タグ*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
----------------------------------------------------------------
	タブレット
----------------------------------------------------------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (min-width:600px) and ( max-width:1024px){

/*----------------------------------------------------
	ヘッダ
----------------------------------------------------*/
#header_right{
	padding:10px 0;
}
ul#header_navi li{
	margin:0;
}
ul#header_navi li a{
	width:90px;
	text-align:center;
}
header .top .inner .right ul {
    padding: 0 27px 0 0;
}

header .bottom .inner .right ul li > a {
    font-size: 1.4em;
}
header .bottom .inner .right ul li > a {
    height: 85px;
}

/* -------------- */
/* 重要なお知らせ */
/* -------------- */
header .notice .link {
    width: 80%;
}

/*----------------------------------------------------
	フッタ
----------------------------------------------------*/
.copyright{
	font-size:1em;
}
#footer, #footer-box{
	padding:15px 15px 180px;
}
/* クッキーのプライバシー */
.cookie_privacy .text {
    max-width: 80%;
}

/*----------------------------------------------------
	カレンダー
----------------------------------------------------*/
.calendar_single{
	width:48%;
}
.calendar_left .calendar_single:nth-child(even){
	float:left;
}
.calendar_left .calendar_single:nth-child(odd){
	float:right;
}
.calendar_readme{
	clear:both;
}


/* -----------------------------------------------------------
	テーブル
----------------------------------------------------------- */
table th{
	padding:5px;
	text-align:left;
}
table th,table td{
    border: 1px solid #746c67;
	display: table-cell;
	padding:5px;
}

/* テンプレート */
.temp th {
    background: #efefef;
    text-align: center;
    width:50%;
}
.temp td {
    padding: 10px;
    text-align: center;
    width:30%;
}

/* システム系の共通テーブル */
.in2cart_tbl th {
    width: 30%;
    display: table-cell;
}
.in2cart_tbl.up50 th {
    width: 40%;
    display: table-cell;
}
.in2cart_tbl td, 
.in2cart_tbl.up50 td {
    display: table-cell;
}

/* ページトップ */
.pagetop{
	bottom:120px;
}

table.traffic-table th, table.traffic-table td{
    display: block;
}


/* -----------------------------------------------------------
	サイドメニュー
----------------------------------------------------------- */

#side .products_list_level1 .box {
    width: 31.5%;
}
body #side .children_list .wrap {
    width: 33%;
    margin: 0;
    padding: 0 5px;
}

}
/*タブレットの終了タグ*/