@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: 0.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: 1em;
    }
    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 ul#menu-header li:last-child {
        margin-right: 0;
    }
    header ul#menu-header li span.icon {
        margin: 0;
        display: block;
        font-size: 1.5em;
    }
    header ul#menu-header li > a {
        height: 80px;
    }
    header ul#menu-header 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 ul#menu-header {
        padding: 0 27px 0 0;
    }
    header ul#menu-header li > a {
        font-size: 1.4em;
        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;
    }
}
/*タブレットの終了タグ*/