@charset "UTF-8";

/* -----------------------------------------------------------------------------
   #Box
   -------------------------------------------------------------------------- */
/*
  Box系(display,width,height,margin,padding,float等)の汎用クラス
*/
/* -----------------------------------------------------------------------------
   #Display
   -------------------------------------------------------------------------- */
.u-dsp_none {
    display: none !important;
}

.u-dsp_block {
    display: block !important;
}

.u-dsp_inline-block {
    display: inline-block !important;
}

.u-dsp_tbl {
    display: table !important;
}

.u-dsp_tbl-cell {
    display: table-cell !important;
}

.u-flx_wrap {
    display: flex !important;
    flex-wrap: wrap !important;
}

.u-flx_nowrap {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.u-flx_space-between {
    display: flex !important;
    justify-content: space-between !important;
}

.u-flx_center {
    display: flex !important;
    justify-content: center;
}

.u-flx_align-item-center {
    justify-content: center !important;
}

@media print,
screen and (min-width: 768px) {
    .u-flx_nowrap_pc {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .u-flx_space-between_pc {
        display: flex !important;
        justify-content: space-between !important;
    }
}

.u_clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.u-flt_left {
    float: left !important;
}

.u-flt_right {
    float: right !important;
}

@media print,
screen and (min-width: 768px) {
    .u-flt_left_pc {
        float: left !important;
    }

    .u-flt_right_pc {
        float: right !important;
    }
}

/* -----------------------------------------------------------------------------
   #Margin
   -------------------------------------------------------------------------- */
.u-m10 {
    margin: 10px !important;
}

.u-mt10 {
    margin-top: 10px !important;
}

.u-mt20 {
    margin-top: 20px !important;
}

.u-mt30 {
    margin-top: 30px !important;
}

.u-mt40 {
    margin-top: 40px !important;
}

.u-mt50 {
    margin-top: 50px !important;
}

.u-mt60 {
    margin-top: 60px !important;
}

.u-mt100 {
    margin-top: 100px !important;
}

.u-mb0 {
    margin-bottom: 0px !important;
}

.u-mb10 {
    margin-bottom: 10px !important;
}

.u-mb20 {
    margin-bottom: 20px !important;
}

.u-mb30 {
    margin-bottom: 30px !important;
}

.u-mb40 {
    margin-bottom: 40px !important;
}

.u-mb50 {
    margin-bottom: 50px !important;
}

.u-mb60 {
    margin-bottom: 60px !important;
}

.u-mr10 {
    margin-right: 10px !important;
}

.u-mr20 {
    margin-right: 20px !important;
}

.u-mr30 {
    margin-right: 30px !important;
}

.u-ml10 {
    margin-left: 10px !important;
}

.u-ml20 {
    margin-left: 20px !important;
}

.u-ml30 {
    margin-left: 30px !important;
}

@media only screen and (max-width: 767px) {
    .u-m10_sp {
        margin: 10px !important;
    }

    .u-mt0_sp {
        margin-top: 0px !important;
    }

    .u-mt10_sp {
        margin-top: 10px !important;
    }

    .u-mt20_sp {
        margin-top: 20px !important;
    }

    .u-mt30_sp {
        margin-top: 30px !important;
    }

    .u-mt40_sp {
        margin-top: 40px !important;
    }

    .u-mt50_sp {
        margin-top: 50px !important;
    }

    .u-mt60_sp {
        margin-top: 60px !important;
    }

    .u-mb0_sp {
        margin-bottom: 0 !important;
    }

    .u-mb10_sp {
        margin-bottom: 10px !important;
    }

    .u-mb20_sp {
        margin-bottom: 20px !important;
    }

    .u-mb30_sp {
        margin-bottom: 30px !important;
    }

    .u-mb40_sp {
        margin-bottom: 40px !important;
    }

    .u-mb50_sp {
        margin-bottom: 50px !important;
    }

    .u-mb60_sp {
        margin-bottom: 60px !important;
    }

    .u-mr10_sp {
        margin-right: 10px !important;
    }

    .u-mr20_sp {
        margin-right: 20px !important;
    }

    .u-mr30_sp {
        margin-right: 30px !important;
    }

    .u-ml0_sp {
        margin-left: 0 !important;
    }

    .u-ml10_sp {
        margin-left: 10px !important;
    }

    .u-ml20_sp {
        margin-left: 20px !important;
    }

    .u-ml30_sp {
        margin-left: 30px !important;
    }
}

/* -----------------------------------------------------------------------------
   #Padding
   -------------------------------------------------------------------------- */
.u-p10 {
    padding: 10px !important;
}

.u-pt10 {
    padding-top: 10px !important;
}

.u-pt20 {
    padding-top: 20px !important;
}

.u-pt30 {
    padding-top: 30px !important;
}

.u-pt40 {
    padding-top: 40px !important;
}

.u-pt50 {
    padding-top: 50px !important;
}

.u-pt60 {
    padding-top: 60px !important;
}

.u-pt70 {
    padding-top: 70px !important;
}

.u-pt80 {
    padding-top: 80px !important;
}

.u-pt90 {
    padding-top: 90px !important;
}

.u-pt100 {
    padding-top: 100px !important;
}

.u-pb10 {
    padding-bottom: 10px !important;
}

.u-pb20 {
    padding-bottom: 20px !important;
}

.u-pb30 {
    padding-bottom: 30px !important;
}

.u-pb40 {
    padding-bottom: 40px !important;
}

.u-pb50 {
    padding-bottom: 50px !important;
}

.u-pb60 {
    padding-bottom: 60px !important;
}

.u-pl10 {
    padding-left: 10px !important;
}

.u-pl20 {
    padding-left: 20px !important;
}

.u-pl30 {
    padding-left: 30px !important;
}

.u-pl50 {
    padding-left: 50px !important;
}

.u-pl90 {
    padding-left: 90px !important;
}

.u-pr10 {
    padding-right: 10px !important;
}

.u-pr20 {
    padding-right: 20px !important;
}

.u-pr30 {
    padding-right: 30px !important;
}

@media only screen and (max-width: 767px) {
    .u-p10_sp {
        padding: 10px !important;
    }

    .u-pt0_sp {
        padding-top: 0px !important;
    }

    .u-pt10_sp {
        padding-top: 10px !important;
    }

    .u-pt20_sp {
        padding-top: 20px !important;
    }

    .u-pt30_sp {
        padding-top: 30px !important;
    }

    .u-pt40_sp {
        padding-top: 40px !important;
    }

    .u-pt50_sp {
        padding-top: 50px !important;
    }

    .u-pt60_sp {
        padding-top: 60px !important;
    }

    .u-pt70_sp {
        padding-top: 70px !important;
    }

    .u-pt80_sp {
        padding-top: 80px !important;
    }

    .u-pt90_sp {
        padding-top: 90px !important;
    }

    .u-pt100_sp {
        padding-top: 100px !important;
    }

    .u-pb10_sp {
        padding-bottom: 10px !important;
    }

    .u-pb20_sp {
        padding-bottom: 20px !important;
    }

    .u-pb30_sp {
        padding-bottom: 30px !important;
    }

    .u-pb40_sp {
        padding-bottom: 40px !important;
    }

    .u-pb50_sp {
        padding-bottom: 50px !important;
    }

    .u-pb60_sp {
        padding-bottom: 60px !important;
    }

    .u-pl0_sp {
        padding-left: 0px !important;
    }

    .u-pl10_sp {
        padding-left: 10px !important;
    }

    .u-pl20_sp {
        padding-left: 20px !important;
    }

    .u-pl30_sp {
        padding-left: 30px !important;
    }

    .u-pl90_sp {
        padding-left: 90px !important;
    }

    .u-pr10_sp {
        padding-right: 10px !important;
    }

    .u-pr0_sp {
        padding-right: 0px !important;
    }

    .u-pr20_sp {
        padding-right: 20px !important;
    }

    .u-pr30_sp {
        padding-right: 30px !important;
    }
}

.u-w100 {
    width: 100%;
}

.u-w95 {
    width: 100%;
}

.u-mlrauto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* #u-fluid-img
   -------------------------------------------------------------------------- */
/*
ウィンドウ幅に合わせて画像サイズを変えるクラス

*/
.u-fluid-img {
    max-width: 100%;
    height: auto;
}

@media print,
screen and (min-width: 768px) {
    .u-fluid-img_pc {
        max-width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .u-fluid-img_sp {
        max-width: 100%;
        height: auto;
    }
}

/* #Show
   -------------------------------------------------------------------------- */
/*
PCとスマホの表示・非表示切り替え
*/
@media print,
screen and (min-width: 768px) {
    .u-show_sp {
        display: none !important;
    }
}

@media only screen and (max-width: 767px) {
    .u-show_sp {
        display: inherit;
    }
}

@media print,
screen and (min-width: 768px) {
    .u-show_pc {
        display: inherit;
    }
}

@media only screen and (max-width: 767px) {
    .u-show_pc {
        display: none !important;
    }
}

.adminTable,
.plainTable,
.minimumTable {
    margin: 10px 0 24px 0;
    padding: 0;
    border-collapse: collapse;
    border-top: 2px solid #888;
    border-bottom: 2px solid #888;
    border-right: 0;
    border-left: 0;
    font-size: 14px;
}

.adminTable th,
.plainTable th,
.minimumTable th {
    padding: 3px 5px 3px 5px;
    font-weight: normal;
    text-align: left;
    line-height: 1.3;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-right: 0;
    border-left: 0;
    background-color: #a1906c;
    color: white;
}

.adminTable td,
.plainTable td,
.minimumTable td {
    background-color: #fff;
    padding: 3px 3px 3px 5px;
    line-height: 1.2;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-right: 0;
    border-left: 0;
}

.plainTable,
.minimumTable {
    margin: 0;
    padding: 0;
    border: none;
}

.minimumTable td {
    padding: 0 0 0 2px;
    border-bottom: thin silver solid;
    font-size: 11px;
    line-height: 120%;
    border: none;
}

/* INPUT エレメント定義 */
input {
    font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", Tahoma;
    vertical-align: middle;
    font-size: 12px;
    border: 1px solid silver;
}

select {
    font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", Tahoma;
    vertical-align: middle;
    font-size: 12px;
    border: 1px solid silver;
}

textarea {
    font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", Tahoma;
    vertical-align: middle;
    font-size: 12px;
    border: 1px solid silver;
}

.cbx14 {
    font-size: 14px;
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
}

.cbx12 {
    font-size: 12px;
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
}

.cbx10 {
    font-size: 10px;
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
}

.select10 {
    font-size: 10px;
}

.select11 {
    font-size: 11px;
}

.select12 {
    font-size: 12px;
}

.select14 {
    font-size: 14px;
}

.btn16 {
    font-size: 16px;
    text-align: center;
    padding-top: 1px;
    width: 100px;
    cursor: pointer;
}

.btn14 {
    font-size: 14px;
    text-align: center;
    padding-top: 1px;
    width: 100px;
    cursor: pointer;
}

.btn12 {
    font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", Tahoma;
    font-size: 12px;
    text-align: center;
    padding-top: 1px;
    width: 100px;
    vertical-align: middle;
    cursor: pointer;
}

.btn11 {
    font-size: 11px;
    margin: 0;
    padding-top: 1px;
    cursor: pointer;
}

.btn10 {
    font-size: 10px;
    margin: 0;
    padding-top: 1px;
    cursor: pointer;
}

.tbox14 {
    font-size: 14px;
    background-color: white;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    vertical-align: middle;
}

.tbox12 {
    font-size: 12px;
    background-color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    vertical-align: middle;
}

.tbox10 {
    font-size: 10px;
    background-color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    vertical-align: middle;
}

.rad11 {
    font-size: 11px;
    background-color: white;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    height: 20px;
    vertical-align: middle;
}

.rad12 {
    font-size: 12px;
    background-color: white;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    height: 20px;
    vertical-align: middle;
}

.rad14 {
    font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", Tahoma;
    font-size: 14px;
    background-color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    height: 22px;
    vertical-align: middle;
}

.tx10 {
    font-size: 10px;
    line-height: 1.5em;
}

.tx10red {
    font-size: 10px;
    color: Red;
}

.tx12 {
    font-size: 12px;
    line-height: 1.5em;
}

.tx14 {
    font-size: 14px;
    line-height: 1.4em;
}

.field-validation-error,
.validation-error {
    font-size: 1rem;
    padding: 5px;
    color: #fff;
    background-color: red;
    border-radius: 10px;
}

.input-validation-error {
    border: 1px solid #fd67a4;
    background-color: #fff0f0;
}

.w25 {
    width: 25px;
}

.w50 {
    width: 50px;
}

.w75 {
    width: 75px;
}

.w100 {
    width: 100px;
}

.w150 {
    width: 150px;
}

.w200 {
    width: 200px;
}

.w250 {
    width: 250px;
}

.w300 {
    width: 300px;
}

.w350 {
    width: 350px;
}

.w400 {
    width: 400px;
}

label.error,
p.error {
    color: red;
}

input.error {
    border: 1px solid red;
    background-color: #fff0f0;
}

/* -----------------------------------------------------------------------------
   #Text
   -------------------------------------------------------------------------- */
/*
  テキストのスタイルを指定する汎用クラスです。
*/
/*---------------テキスト寄せ
------------------------*/
.u-text_left {
    text-align: left !important;
}

.u-text_right {
    text-align: right !important;
}

.u-text_center {
    text-align: center !important;
}

@media only screen and (max-width: 767px) {
    .u-text_left_sp {
        text-align: left !important;
    }

    .u-text_right_sp {
        text-align: right !important;
    }

    .u-text_center_sp {
        text-align: center !important;
    }
}

.u-mincho {
    font-family: 'EB Garamond', "A1明朝", "A1 Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "Meiryo", serif;
}

.u-bold {
    font-weight: bold !important;
}

.u-red {
    color: #870000 !important;
}

.u-brown {
    color: #786C27 !important;
}

.u-black {
    color: #000 !important;
}

.u-f10 {
    font-size: 1.0rem !important;
}

.u-f11 {
    font-size: 1.1rem !important;
}

.u-f12 {
    font-size: 1.2rem !important;
}

.u-f13 {
    font-size: 1.3rem !important;
}

.u-f14 {
    font-size: 1.4rem !important;
}

.u-f15 {
    font-size: 1.5rem !important;
}

.u-f16 {
    font-size: 1.6rem !important;
}

.u-f17 {
    font-size: 1.7rem !important;
}

.u-f18 {
    font-size: 1.8rem !important;
}

.u-f19 {
    font-size: 1.9rem !important;
}

.u-f20 {
    font-size: 2.0rem !important;
}

.u-f21 {
    font-size: 2.1rem !important;
}

.u-f22 {
    font-size: 2.2rem !important;
}

.u-f23 {
    font-size: 2.3rem !important;
}

.u-f24 {
    font-size: 2.4rem !important;
}

.u-f25 {
    font-size: 2.5rem !important;
}

.u-f26 {
    font-size: 2.6rem !important;
}

.u-f27 {
    font-size: 2.7rem !important;
}

.u-f28 {
    font-size: 2.8rem !important;
}

.u-f29 {
    font-size: 2.9rem !important;
}

.u-f30 {
    font-size: 3.0rem !important;
}

.u-f31 {
    font-size: 3.1rem !important;
}

.u-f32 {
    font-size: 3.2rem !important;
}

.u-f33 {
    font-size: 3.3rem !important;
}

.u-f34 {
    font-size: 3.4rem !important;
}

.u-f35 {
    font-size: 3.5rem !important;
}

.u-f36 {
    font-size: 3.6rem !important;
}

.u-f37 {
    font-size: 3.7rem !important;
}

.u-f38 {
    font-size: 3.8rem !important;
}

.u-f39 {
    font-size: 3.9rem !important;
}

.u-f40 {
    font-size: 4.0rem !important;
}

.u-f41 {
    font-size: 4.1rem !important;
}

.u-f42 {
    font-size: 4.2rem !important;
}

.u-f43 {
    font-size: 4.3rem !important;
}

.u-f44 {
    font-size: 4.4rem !important;
}

.u-f45 {
    font-size: 4.5rem !important;
}

.u-f46 {
    font-size: 4.6rem !important;
}

.u-f47 {
    font-size: 4.7rem !important;
}

.u-f48 {
    font-size: 4.8rem !important;
}

.u-f49 {
    font-size: 4.9rem !important;
}

.u-f50 {
    font-size: 5.0rem !important;
}

@media only screen and (max-width: 767px) {
    .u-f10_sp {
        font-size: 1.0rem !important;
    }

    .u-f11_sp {
        font-size: 1.1rem !important;
    }

    .u-f12_sp {
        font-size: 1.2rem !important;
    }

    .u-f13_sp {
        font-size: 1.3rem !important;
    }

    .u-f14_sp {
        font-size: 1.4rem !important;
    }

    .u-f15_sp {
        font-size: 1.5rem !important;
    }

    .u-f16_sp {
        font-size: 1.6rem !important;
    }

    .u-f17_sp {
        font-size: 1.7rem !important;
    }

    .u-f18_sp {
        font-size: 1.8rem !important;
    }

    .u-f19_sp {
        font-size: 1.9rem !important;
    }

    .u-f20_sp {
        font-size: 2.0rem !important;
    }

    .u-f21_sp {
        font-size: 2.1rem !important;
    }

    .u-f22_sp {
        font-size: 2.2rem !important;
    }

    .u-f23_sp {
        font-size: 2.3rem !important;
    }

    .u-f24_sp {
        font-size: 2.4rem !important;
    }

    .u-f25_sp {
        font-size: 2.5rem !important;
    }

    .u-f26_sp {
        font-size: 2.6rem !important;
    }

    .u-f27_sp {
        font-size: 2.7rem !important;
    }

    .u-f28_sp {
        font-size: 2.8rem !important;
    }

    .u-f29_sp {
        font-size: 2.9rem !important;
    }

    .u-f30_sp {
        font-size: 3.0rem !important;
    }

    .u-f31_sp {
        font-size: 3.1rem !important;
    }

    .u-f32_sp {
        font-size: 3.2rem !important;
    }

    .u-f33_sp {
        font-size: 3.3rem !important;
    }

    .u-f34_sp {
        font-size: 3.4rem !important;
    }

    .u-f35_sp {
        font-size: 3.5rem !important;
    }

    .u-f36_sp {
        font-size: 3.6rem !important;
    }

    .u-f37_sp {
        font-size: 3.7rem !important;
    }

    .u-f38_sp {
        font-size: 3.8rem !important;
    }

    .u-f39_sp {
        font-size: 3.9rem !important;
    }

    .u-f40_sp {
        font-size: 4.0rem !important;
    }

    .u-f41_sp {
        font-size: 4.1rem !important;
    }

    .u-f42_sp {
        font-size: 4.2rem !important;
    }

    .u-f43_sp {
        font-size: 4.3rem !important;
    }

    .u-f44_sp {
        font-size: 4.4rem !important;
    }

    .u-f45_sp {
        font-size: 4.5rem !important;
    }

    .u-f46_sp {
        font-size: 4.6rem !important;
    }

    .u-f47_sp {
        font-size: 4.7rem !important;
    }

    .u-f48_sp {
        font-size: 4.8rem !important;
    }

    .u-f49_sp {
        font-size: 4.9rem !important;
    }

    .u-f50_sp {
        font-size: 5.0rem !important;
    }
}

/* #Wrapper
   -------------------------------------------------------------------------- */
/*
	画面の最大幅を設定するクラス

*/
/*-------------------レイアウト共通
---------------------------*/
.u-wrapper {
    margin-left: auto;
    margin-right: auto;
}

@media print,
screen and (min-width: 768px) {
    .u-wrapper {
        max-width: 960px;
    }
}

@media only screen and (max-width: 767px) {
    .u-wrapper {
        width: 100%;
        max-width: 960px;
    }
}

.u-wrapper_inner {
    margin-left: auto;
    margin-right: auto;
}

@media print,
screen and (min-width: 768px) {
    .u-wrapper_inner {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 960px;
    }
}

@media only screen and (max-width: 767px) {
    .u-wrapper_inner {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        max-width: 960px;
    }
}

.u-wrapper_inner_pc {
    margin-left: auto;
    margin-right: auto;
}

@media print,
screen and (min-width: 768px) {
    .u-wrapper_inner_pc {
        max-width: 960px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .u-wrapper_inner_pc {
        width: 100%;
        max-width: 960px;
    }
}

.u-wrapper_inner_sp {
    margin-left: auto;
    margin-right: auto;
}

@media print,
screen and (min-width: 768px) {
    .u-wrapper_inner_sp {
        max-width: 960px;
    }
}

@media only screen and (max-width: 767px) {
    .u-wrapper_inner_sp {
        width: 100%;
        max-width: 960px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

#product h2 {
    border: none;
    margin-top: 20px;
    border-left: 4px solid #47AB34;
    background-image: none;
    background-color: #f0f0f0;
    padding: 10px 0 10px 24px;
    margin: 30px 0;
}

#product .pictures {
    box-sizing: border-box;
    width: 90%;
    margin: 30px auto 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#product .pictures.single {
    flex-wrap: nowrap;
    justify-content: center;
}

@media only screen and (max-width: 767px) {
    #product .pictures {
        width: 100%;
        flex-direction: column;
    }
}

#product .pict-box {
    width: 48.5%;
}

#product .pict-box.single {
    width: 80%;
}

#product .pict-box.zeroh {
    height: 0;
}

@media only screen and (max-width: 767px) {
    #product .pict-box {
        width: 100%;
        margin-bottom: 10px;
    }
}

#product .pict-box .pict-wrap {
    position: relative;
    background-color: #b0c6dd;
}

#product .pict-box .pict-wrap:before {
    content: "";
    display: block;
    padding-top: 75%;
    /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}

#product .pict-box img.pict,
#product .pict-box .pict-text {
    box-sizing: border-box;
    border: 1px solid silver;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#product .pict-box img.pict {
    display: block;
    object-fit: cover;
    opacity: 1.0;
}

#product .pict-box img.pict:hover {
    opacity: 0.5;
}

#product .pict-box .pict-text {
    font-size: 24px;
    color: white;
    font-weight: bold;
    padding: 10px;
}

#product .pict-box .title {
    background: #47AB34;
    color: white;
    height: 48px;
    line-height: 48px;
    text-align: center;
}

#product .pict-box .title span {
    font-size: 14px;
    font-size: 14px;
}

#product .pict-box .title span em {
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
}

#product .infos {
    box-sizing: border-box;
    width: 90%;
    margin: 30px auto;
    border: 2px solid silver;
    padding: 20px;
}

@media only screen and (max-width: 767px) {
    #product .infos {
        width: 100%;
        margin: 16px auto;
        padding: 12px;
    }
}

#product .infos li {
    display: flex;
    padding: 6px 0;
    border-bottom: 1px solid silver;
    font-size: 1.5rem;
}

@media only screen and (max-width: 767px) {
    #product .infos li {
        padding: 0;
        flex-direction: column;
    }
}

#product .infos li:first-child {
    padding-top: 0;
}

#product .infos li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

#product .infos li time {
    display: block;
    width: 16%;
}

@media only screen and (max-width: 767px) {
    #product .infos li time {
        width: 100%;
    }
}

#product .infos li span {
    display: block;
    width: 84%;
}

@media only screen and (max-width: 767px) {
    #product .infos li span {
        width: 100%;
    }
}

#product img.pictL {
    box-sizing: border-box;
    display: block;
    width: 90%;
    height: auto;
    margin: 30px auto;
    border: 1px solid silver;
}

body,
a,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
textarea,
p,
blockquote,
th,
td,
address,
section {
    margin: 0;
    padding: 0;
    text-transform: none;
    text-decoration: none;
    box-sizing: content-box;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
}

hr {
    display: none;
}

p {
    clear: both;
}

/* -----------------------�y�}�[�W���z-------------------------- */
.marginTop60 {
    margin-top: 60px;
}

.marginTop50 {
    margin-top: 50px;
}

.marginTop40 {
    margin-top: 40px;
}

.marginTop30 {
    margin-top: 30px;
}

.marginTop20 {
    margin-top: 20px;
}

.marginTop18 {
    margin-top: 18px;
}

.marginTop16 {
    margin-top: 16px;
}

.marginTop14 {
    margin-top: 14px;
}

.marginTop12 {
    margin-top: 12px;
}

.marginTop10 {
    margin-top: 10px;
}

.marginTop7 {
    margin-top: 7px;
}

.marginTop5 {
    margin-top: 5px;
}

.marginTop4 {
    margin-top: 4px;
}

.marginTop2 {
    margin-top: 2px;
}

.marginTop-60 {
    margin-top: -60px;
}

.marginTop-50 {
    margin-top: -50px;
}

.marginTop-40 {
    margin-top: -40px;
}

.marginTop-30 {
    margin-top: -30px;
}

.marginTop-25 {
    margin-top: -25px;
}

.marginTop-20 {
    margin-top: -20px;
}

.marginTop-15 {
    margin-top: -15px;
}

.marginTop-10 {
    margin-top: -10px;
}

.marginTop-5 {
    margin-top: -5px;
}

.marginBtm60 {
    margin-bottom: 60px;
}

.marginBtm50 {
    margin-bottom: 50px;
}

.marginBtm40 {
    margin-bottom: 40px;
}

.marginBtm30 {
    margin-bottom: 30px;
}

.marginBtm20 {
    margin-bottom: 20px;
}

.marginBtm15 {
    margin-bottom: 15px;
}

.marginBtm10 {
    margin-bottom: 10px;
}

.marginBtm9 {
    margin-bottom: 9px;
}

.marginBtm8 {
    margin-bottom: 8px;
}

.marginBtm7 {
    margin-bottom: 7px;
}

.marginBtm6 {
    margin-bottom: 6px;
}

.marginBtm5 {
    margin-bottom: 5px;
}

.marginBtm4 {
    margin-bottom: 4px;
}

.marginBtm1 {
    margin-bottom: 1px;
}

.marginBtm-3 {
    margin-bottom: -3px;
}

.marginBtm-4 {
    margin-bottom: -4px;
}

.marginBtm-5 {
    margin-bottom: -5px;
}

.marginBtm-7 {
    margin-bottom: -7px;
}

.marginBtm-10 {
    margin-bottom: -10px;
}

.marginBtm-15 {
    margin-bottom: -15px;
}

.marginBtm-20 {
    margin-bottom: -20px;
}

.marginBtm-60 {
    margin-bottom: -60px;
}

.marginLeft60 {
    margin-left: 60px;
}

.marginLeft50 {
    margin-left: 50px;
}

.marginLeft40 {
    margin-left: 40px;
}

.marginLeft30 {
    margin-left: 30px;
}

.marginLeft25 {
    margin-left: 25px;
}

.marginLeft20 {
    margin-left: 20px;
}

.marginLeft18 {
    margin-left: 18px;
}

.marginLeft16 {
    margin-left: 16px;
}

.marginLeft14 {
    margin-left: 14px;
}

.marginLeft12 {
    margin-left: 12px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginLeft9 {
    margin-left: 9px;
}

.marginLeft8 {
    margin-left: 8px;
}

.marginLeft7 {
    margin-left: 7px;
}

.marginLeft6 {
    margin-left: 6px;
}

.marginLeft5 {
    margin-left: 5px;
}

.marginLeft4 {
    margin-left: 4px;
}

.marginLeft3 {
    margin-left: 3px;
}

.marginLeft2 {
    margin-left: 2px;
}

.marginLeft1 {
    margin-left: 1px;
}

.marginRight10 {
    margin-right: 10px;
}

.marginRight13 {
    margin-right: 13px;
}

.marginRight20 {
    margin-right: 20px;
}

.marginRight21 {
    margin-right: 21px;
}

.marginRight30 {
    margin-right: 30px;
}

.marginRight60 {
    margin-right: 60px;
}

html {
    font-size: 10px;
}

/* ボディー */
body {
    border-top: solid 5px #47AB34;
    font-size: 1.6rem;
    font-family: Meiryo, "メイリオ", Geneva, Arial, "MS UI Gothic", "ＭＳ Ｐゴシック", "MS PGothic";
    line-height: 1.8;
}

/* 共通 */
.center {
    text-align: center;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.clear {
    clear: both;
    overflow: hidden;
    width: 100%;
}

.underline {
    text-decoration: underline;
}

.style-bold {
    font-weight: bold;
}

.style-green {
    color: #009844;
}

.style-orange {
    color: #F3A91B;
}

.style-red {
    color: #A6172B;
}

.style-red02 {
    color: #FF7BA8;
}

.style-blue {
    color: #4F9BF8;
}

.style-gray {
    color: #999;
}

.dn {
    display: none !important;
}

.text-type {
    font-size: 150%;
    font-weight: bold;
}

.border-b-box {
    border-bottom: solid 1px #CCC;
    margin-bottom: 60px;
    padding-bottom: 60px;
}

/* リンクテキスト */
a {
    color: #6699CC;
    text-decoration: underline;
}

a:hover {
    color: #333;
    text-decoration: none;
}

a.internal {
    background-image: url(../images/second/internal.png);
    background-repeat: no-repeat;
    background-position: right;
    margin-right: 5px;
    padding-right: 25px;
}

a.external {
    background-image: url(../images/second/external.png);
    background-repeat: no-repeat;
    background-position: right;
    margin-right: 5px;
    padding-right: 25px;
}

a.pdf {
    background-image: url(../images/second/pdf.gif);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 25px;
}

a.email {
    background-image: url(../contact/images/email.gif);
    background-repeat: no-repeat;
    background-position: right;
    padding: 5px 50px 5px 0;
}

header ul a:hover img,
header ul a.current img,
article a:hover img,
article a.current img,
footer a:hover img,
footer a.current img {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha( opacity=50 )";
}

/* ナビ */
.nav-button {
    display: none;
}

/* フッター */
#f-area {
    background-color: #F5F5F5;
    border-top: solid 1px #CCC;
}

#licence {
    background-color: #009844;
    color: #FFF;
    font-size: 75%;
    padding: 10px 0;
    text-align: center;
}

/* breadCrumb */
#breadCrumb {
    font-size: 75%;
    padding: 10px 0;
}

#breadCrumb li {
    display: inline;
    margin-right: 10px;
}

#breadCrumb li a {
    border-right: solid 1px #DDD;
    display: inline-block;
    padding-right: 10px;
    text-decoration: underline;
}

#breadCrumb li:first-child a {
    background-image: url(../images/second/home.gif);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 15px;
}

#breadCrumb li a:hover {
    text-decoration: none;
}

/* リスト */
.ul-box {
    margin: 10px 0;
}

.ul-box li {
    background-image: url(../images/second/list01.png);
    background-repeat: no-repeat;
    background-position: left 8px;
    padding-left: 15px;
}

.ul-box ul li {
    background-image: url(../images/second/list02.png);
    background-repeat: no-repeat;
    background-position: left 10px;
    padding-left: 15px !important;
}

/* 定義リスト */
.dl-box {
    border: solid 1px #CCC;
    margin: 20px 0;
    padding-bottom: 20px;
}

.dl-box dt {
    background-color: #E9F1E9;
    border-bottom: solid 1px #CCC;
    font-size: 113%;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 20px 25px;
    color: #46AB33;
}

.dl-box dd {
    padding: 0 25px;
}

/* テーブル */
table {
    border-collapse: collapse;
    clear: both;
    line-height: 1.8;
    margin: 30px 0px;
    text-align: left;
    width: 100%;
}

th {
    background-color: #F5F5F5;
    border: solid 1px #CCC;
    font-weight: bold;
    padding: 10px;
}

td {
    border: solid 1px #CCC;
    padding: 10px;
}

/* 産業ガス情報 */
.dl-qa dt {
    background-image: url(../service/images/industry04/q.gif);
    background-repeat: no-repeat;
    background-position: left 1px;
    color: #009844;
    font-weight: bold;
    margin: 40px 0 20px;
    padding: 5px 0 5px 50px;
}

.dl-qa dd {
    background-image: url(../service/images/industry04/a.gif);
    background-repeat: no-repeat;
    background-position: left 1px;
    border-bottom: solid 1px #CCC;
    margin-bottom: 20px;
    padding: 5px 0 20px 50px;
}

.p-dd {
    color: #F08D91;
    font-weight: bold;
    margin-bottom: 10px;
}

.dl-qa li {
    margin-bottom: 10px;
}

/* サポート・メンテナンス */
.support-ul {
    margin: 40px 0;
}

.support-ul li {
    background-repeat: no-repeat;
    background-position: left top;
    padding: 0 0 20px 45px;
}

.li-no01 {
    background-image: url(../support/images/no01.gif);
}

.li-no02 {
    background-image: url(../support/images/no02.gif);
}

.li-no03 {
    background-image: url(../support/images/no03.gif);
}

.li-no04 {
    background-image: url(../support/images/no04.gif);
}

/* メールフォーム */
table input {
    width: 80%;
}

textarea {
    width: 80%;
}

.center input {
    max-width: 100%;
}

#text5 {
    width: 10%;
}

#RadioGroup1_0,
#RadioGroup1_1 {
    width: auto;
}

@media screen and (min-width: 750px),
print {

    /* ボディー */
    body {
        min-width: 1120px;
    }

    /* 横スクロール禁止 */
    html {
        overflow-x: hidden;
        overflow-y: scroll;
    }
}

@media screen and (min-width: 750px) and (max-width: 1300px) {
    html {
        overflow-x: scroll;
    }
}

@media screen and (min-width: 750px),
print {

    /* 共通 */
    .float-left {
        float: left !important;
    }

    .float-right {
        float: right !important;
    }

    /* ヘッダー */
    header {
        margin: 0 auto;
        overflow: hidden;
        padding: 28px 0;
        width: 1000px;
    }

    #h-logo {
        float: left;
    }

    #h-contact {
        display: flex;
        float: right;
        width: 375px;
    }

    #h-contact a:first-child {
        padding-right: 15px;
    }

    #h-contact a:hover,
    #h-contact a.current {
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha( opacity=70 )";
        text-decoration: none;
    }

    /* ナビ */
    #nav-area button {
        display: none;
    }

    #nav-area {
        border-bottom: solid 1px #CCC;
        border-top: solid 1px #CCC;
    }

    nav ul {
        display: flex;
        margin: 0 auto;
        width: 1000px;
    }

    nav span {
        display: none;
    }

    nav li a {
        display: block;
        height: 63px;
        background-size: contain;
    }

    #nv01 a {
        background-image: url(../images/nav/nav_menu1.png);
        width: 103px;
    }

    #nv02 a {
        background-image: url(../images/nav/nav_menu2.png);
        width: 103px;
    }

    #nv03 a {
        background-image: url(../images/nav/nav_menu3.png);
        width: 138px;
    }

    #nv04 a {
        background-image: url(../images/nav/nav_menu4.png);
        width: 138px;
    }

    #nv05 a {
        background-image: url(../images/nav/nav_menu5.png);
        width: 262px;
    }

    #nv06 a {
        background-image: url(../images/nav/nav_menu6.png);
        width: 153px;
    }

    #nv07 a {
        background-image: url(../images/nav/nav_menu7.png);
        width: 103px;
    }

    nav li a:hover,
    nav li a.current {
        opacity: 0.5;
        filter: alpha(opacity=50);
        -ms-filter: "alpha( opacity=50 )";
        text-decoration: none;
    }

    nav .sp {
        display: none;
    }

    /* article */
    #sec-service ul {
        clear: both;
        margin: 60px auto;
        overflow: hidden;
        width: 1040px;
        /* 1000px */
    }

    #sec-service li {
        float: left;
        margin: 0 40px 40px 0;
        width: 220px;
    }

    #sec-service li img {
        width: 220px;
    }

    #sec-service li a {
        text-decoration: none;
    }

    #sec-service li a p {
        border-bottom: solid 1px #CCC;
        border-top: solid 1px #CCC;
        color: #333;
        display: block;
        font-weight: bold;
        margin: 10px 0;
        padding: 10px 0;
        text-align: center;
    }

    #sec-service li a:hover p {
        color: #6699CC;
    }

    #sec-service li span {
        color: #777;
        font-size: 94%;
    }

    /* フッター */
    footer {
        border-top: solid 1px #CCC;
        margin-top: 50px;
    }

    #f-nav {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        width: 1000px;
    }

    #f-nav li {
        border-right: 1px solid #ccc;
    }

    #f-nav li:nth-child(1) {
        border-left: 1px solid #ccc;
    }

    #f-nav li a {
        display: block;
        padding: 20px 0;
        text-align: center;
        width: 430px;
        text-decoration: unset;
    }

    #f-nav li a p {
        color: #333;
        font-size: 17px;
        font-weight: bold;
        line-height: 1;
        margin-top: 12px;
    }

    #f-nav li a span {
        font-size: 13px;
        color: #8C8C8C;
    }

    #f-nav li a:hover p,
    #f-nav li a:hover span {
        opacity: .5;
    }

    #f-area {
        padding: 50px 0;
    }

    #f-banner {
        clear: both;
        margin: 0 auto;
        overflow: hidden;
        padding-left: 40px;
        width: 1040px;
        /* 1000px */
    }

    #f-banner li {
        float: left;
        margin: 0 40px 20px 0;
        width: 480px;
    }

    #f-list {
        border-top: solid 1px #CCC;
        clear: both;
        justify-content: space-between;
        margin: 0 auto;
        overflow: hidden;
        padding-top: 30px;
        width: 1000px;
    }

    .f-list-inner {
        border-right: solid 1px #CCC;
        float: left;
        margin-right: 20px;
    }

    .f-list-inner:first-child {
        width: 150px;
    }

    .f-list-inner:nth-child(2) {
        width: 250px;
    }

    .f-list-inner:nth-child(3) {
        width: 100px;
    }

    .f-list-inner:nth-child(4) {
        width: 210px;
    }

    .f-list-inner:last-child {
        border-right: none;
        margin-right: 0;
        width: 195px;
    }

    .f-list-inner a {
        text-decoration: none;
    }

    .f-list-inner a:hover,
    .f-list-inner a.current {
        color: #6699CC;
        text-decoration: underline;
    }

    .f-list-inner p a {
        color: #333;
        font-size: 82%;
    }

    .f-list-inner ul {
        clear: both;
        overflow: hidden;
    }

    .f-list-inner li a {
        color: #666;
        font-size: 63%;
    }

    .f-list-inner:nth-child(2) ul {
        width: 200px;
    }

    .f-list-inner:nth-child(2) li:nth-child(odd) {
        float: left;
        width: 100px;
    }

    .f-list-inner:nth-child(2) li:nth-child(even) {
        float: right;
        width: 82px;
    }

    /* ページトップ */
    .pagetop {
        bottom: 10px;
        display: none;
        right: 5px;
        position: fixed;
    }

    .pagetop a {
        background-repeat: no-repeat;
        background-image: url(../images/jump.png);
        background-position: center center;
        display: block;
        height: 80px;
        width: 80px;
    }

    /* お知らせ */
    #sec-news {
        margin: 0 auto;
        width: 1000px;
    }

    #sec-news .paging {
        display: flex;
        justify-content: center;
    }

    #dl-news {
        border-top: solid 1px #CCC;
        margin: 30px 0 50px;
    }

    #dl-news dl {
        display: flex;
        border-bottom: solid 1px #CCC;
        padding: 12px 0;
        width: 1000px;
    }

    #dl-news dl:nth-child(even) {
        background-color: #F0F0F0;
    }

    #dl-news dt {
        padding-left: 20px;
        flex: 200px 0.2 0.2;
    }

    #dl-news dd {
        flex: 760px 1 1;
    }

    #dl-news dd a {
        color: #36b51e;
        text-decoration: none;
    }
}

@media screen and (min-width: 750px),
print {

    /* Basic jQuery Slider essential styles */
    #bjqs-slide02 {
        display: none;
    }

    #bjqs-slide {
        margin: 0 auto;
        width: 100%;
    }

    #bjqs-slide_sp {
        display: none;
    }

    ul.bjqs {
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        display: none;
    }

    li.bjqs-slide {
        position: absolute;
        display: none;
    }

    ul.bjqs-controls.v-centered li a {
        position: absolute;
    }

    ol.bjqs-markers {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    ol.bjqs-markers.h-centered {
        text-align: center;
    }

    ol.bjqs-markers li {
        display: inline;
    }

    ol.bjqs-markers li a {
        display: inline-block;
    }

    p.bjqs-caption {
        display: block;
        width: 96%;
        margin: 0;
        padding: 2%;
        position: absolute;
        bottom: 0;
    }

    /* 

ul.bjqs-controls{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 980px;
	z-index: 9999;
}


ul.bjqs-controls li a{
	background-repeat: no-repeat;
    display:block;
    height:15px;
    padding:0px;
    position:absolute;
    text-decoration:none;
    text-transform:uppercase;
    width:11px;
}

a.bjqs-prev{
	background-image: url(../images/top/pre.png);
	margin-top: 390px;
}
 
a.bjqs-next{
	background-image: url(../images/top/next.png);
	margin: 390px 0 0 739px;
}

*/
    ol.bjqs-markers {
        margin-top: -30px;
        position: relative;
        width: 160px;
        z-index: 2;
    }

    ol.bjqs-markers li {
        float: left;
        margin: 0 10px;
    }

    ol.bjqs-markers li a {
        background-image: url(../images/top/btn-navi.png);
        display: block;
        font-size: 0%;
        height: 12px;
        overflow: hidden;
        text-align: center;
        width: 12px;
    }

    ol.bjqs-markers li.active-marker a {
        background-image: url(../images/top/btn-navi_on.png);
    }

    /* article */
    h2 {
        margin: 60px 0 30px;
        text-align: center;
    }

    #sec-service {
        margin: 0 auto;
        width: 1000px;
    }

    #sec-staff {
        background-image: url(../images/top/staff-bg.jpg);
        background-repeat: repeat-x;
        background-position: center top;
        margin-bottom: -50px;
    }

    #sec-staff p a {
        background-image: url(../images/top/staff.png);
        background-repeat: no-repeat;
        background-position: center center;
        display: block;
        height: 600px;
        margin: 0 auto;
        width: 1000px;
    }

    #sec-staff p a:hover {
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha( opacity=70 )";
        text-decoration: none;
    }

    #sec-staff img {
        display: none;
    }

    /* お知らせ */
    #news-list {
        margin-top: 30px;
        /* margin-bottom: 50px; */
        margin-bottom: 100px;
        text-align: center;
    }
}

@media screen and (max-width: 750px) {

    /*===============================================
●sp-top.css  画面の横幅が750pxまで
===============================================*/
    img {
        height: auto;
        max-width: 100%;
        width: auto;
    }

    /* iframe */
    .iframe-wrap {
        height: 0;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        width: 100%;
    }

    .iframe-wrap iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    /* ヘッダー */
    header {
        padding: 20px 0;
    }

    #h-logo {
        padding-left: 10px;
    }

    #h-contact {
        display: none;
    }

    /* ナビ */
    .drawer-open {
        overflow: hidden !important;
    }

    .drawer-nav {
        position: fixed;
        z-index: 101;
        top: 0;
        overflow: hidden;
        width: 16.25rem;
        height: 100%;
        color: #222;
        background-color: #fff;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .drawer-brand {
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 3.75rem;
        display: block;
        padding-right: .75rem;
        padding-left: .75rem;
        text-decoration: none;
        color: #222;
    }

    .drawer-menu {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .drawer-menu-item {
        font-size: 1rem;
        display: block;
        padding: .75rem;
        text-decoration: none;
        color: #222;
    }

    .drawer-menu-item:hover {
        text-decoration: underline;
        color: #555;
        background-color: transparent;
    }

    /*! overlay */
    .drawer-overlay {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .drawer-open .drawer-overlay {
        display: block;
    }

    /*!------------------------------------*
.drawer--top .drawer-nav {
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--top.drawer-open .drawer-nav {
  top: 0;
}

.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
  right: 0;
}
    Top
\*!------------------------------------*/
    /*!------------------------------------*    Left

.drawer--left .drawer-nav {
  left: -16.25rem;
  -webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  left: 0;
}

.drawer--left.drawer-open .drawer-hamburger {
  left: 16.25rem;
}
\*!------------------------------------*/
    /*!------------------------------------*    Right
\*!------------------------------------*/
    .drawer--right .drawer-nav {
        right: -16.25rem;
        -webkit-transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .drawer--right.drawer-open .drawer-nav,
    .drawer--right .drawer-hamburger,
    .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
        right: 0;
    }

    .drawer--right.drawer-open .drawer-hamburger {
        right: 16.25rem;
    }

    /*!------------------------------------*    Hamburger
\*!------------------------------------*/
    .drawer-hamburger {
        z-index: 104;
        top: 20px;
        display: block;
        box-sizing: content-box;
        width: 20px;
        padding: 15px 10px;
        -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        border: 0;
        outline: 0;
        background-color: transparent;
        background-color: #009844;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        position: absolute;
        /*-----
    position: fixed; (ナビを固定にする場合)
    ------*/
    }

    .drawer-hamburger:hover {
        cursor: pointer;
        background-color: transparent;
        background-color: transparent;
        background-color: #009844;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .drawer-hamburger-icon {
        position: relative;
        display: block;
        margin: 5px 0;
    }

    .drawer-hamburger-icon,
    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after {
        width: 20px;
        height: 2px;
        -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        background-color: #FFF;
        border-radius: 4px;
    }

    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after {
        position: absolute;
        top: -6px;
        left: 0;
        content: ' ';
    }

    .drawer-hamburger-icon:after {
        top: 6px;
    }

    .drawer-open .drawer-hamburger-icon {
        background-color: transparent;
    }

    .drawer-open .drawer-hamburger-icon:before,
    .drawer-open .drawer-hamburger-icon:after {
        top: 0;
    }

    .drawer-open .drawer-hamburger-icon:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .drawer-open .drawer-hamburger-icon:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /*!------------------------------------*    accessibility
\*!------------------------------------*/
    /*!
 * Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content
 */
    .sr-only {
        position: absolute;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
    }

    /*!
 * Use in conjunction with .sr-only to only display content when it's focused.
 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */
    .sr-only-focusable:active,
    .sr-only-focusable:focus {
        position: static;
        overflow: visible;
        clip: auto;
        width: auto;
        height: auto;
        margin: 0;
    }

    /*!------------------------------------*    Sidebar
\*!------------------------------------*/
    .drawer--sidebar {
        background-color: #fff;
    }

    .drawer--sidebar .drawer-contents {
        background-color: #fff;
    }
}

@media screen and (max-width: 750px) and (min-width: 64em) {
    .drawer--sidebar .drawer-hamburger {
        display: none;
        visibility: hidden;
    }

    .drawer--sidebar .drawer-nav {
        display: block;
        -webkit-transform: none;
        transform: none;
        position: fixed;
        width: 12.5rem;
        height: 100%;
    }

    /*! Left */
    .drawer--sidebar.drawer--left .drawer-nav {
        left: 0;
        border-right: 1px solid #ddd;
    }

    .drawer--sidebar.drawer--left .drawer-contents {
        margin-left: 12.5rem;
    }

    /*! Right */
    .drawer--sidebar.drawer--right .drawer-nav {
        right: 0;
        border-left: 1px solid #ddd;
    }

    .drawer--sidebar.drawer--right .drawer-contents {
        margin-right: 12.5rem;
    }

    /*! container */
    .drawer--sidebar .drawer-container {
        max-width: 48rem;
    }
}

@media screen and (max-width: 750px) and (min-width: 75em) {
    .drawer--sidebar .drawer-nav {
        width: 16.25rem;
    }

    .drawer--sidebar.drawer--left .drawer-contents {
        margin-left: 16.25rem;
    }

    .drawer--sidebar.drawer--right .drawer-contents {
        margin-right: 16.25rem;
    }

    /*! container */
    .drawer--sidebar .drawer-container {
        max-width: 60rem;
    }
}

@media screen and (max-width: 750px) {

    /*!------------------------------------*    Navbar
\*!------------------------------------*/
    .drawer--navbarTopGutter {
        padding-top: 3.75rem;
    }

    .drawer-navbar .drawer-navbar-header {
        border-bottom: 1px solid #ddd;
        background-color: #fff;
    }

    .drawer-navbar {
        z-index: 102;
        top: 0;
        width: 100%;
    }

    /*! .drawer-navbar modifier */
    .drawer-navbar--fixed {
        position: fixed;
    }

    .drawer-navbar-header {
        position: relative;
        z-index: 102;
        box-sizing: border-box;
        width: 100%;
        height: 3.75rem;
        padding: 0 .75rem;
        text-align: center;
    }

    .drawer-navbar .drawer-brand {
        line-height: 3.75rem;
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;
        text-decoration: none;
    }

    .drawer-navbar .drawer-brand:hover {
        background-color: transparent;
    }

    .drawer-navbar .drawer-nav {
        padding-top: 3.75rem;
    }

    .drawer-navbar .drawer-menu {
        padding-bottom: 7.5rem;
    }
}

@media screen and (max-width: 750px) and (min-width: 64em) {
    .drawer-navbar {
        height: 3.75rem;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
    }

    .drawer-navbar .drawer-navbar-header {
        position: relative;
        display: block;
        float: left;
        width: auto;
        padding: 0;
        border: 0;
    }

    .drawer-navbar .drawer-menu--right {
        float: right;
    }

    .drawer-navbar .drawer-menu li {
        float: left;
    }

    .drawer-navbar .drawer-menu-item {
        line-height: 3.75rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .drawer-navbar .drawer-hamburger {
        display: none;
    }

    .drawer-navbar .drawer-nav {
        position: relative;
        left: 0;
        overflow: visible;
        width: auto;
        height: 3.75rem;
        padding-top: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .drawer-navbar .drawer-menu {
        padding: 0;
    }

    /*! dropdown */
    .drawer-navbar .drawer-dropdown-menu {
        position: absolute;
        width: 16.25rem;
        border: 1px solid #ddd;
    }

    .drawer-navbar .drawer-dropdown-menu-item {
        padding-left: .75rem;
    }
}

@media screen and (max-width: 750px) {

    /*!------------------------------------*    Dropdown
\*!------------------------------------*/
    .drawer-dropdown-menu {
        display: none;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
    }

    .drawer-dropdown-menu>li {
        width: 100%;
        list-style: none;
    }

    .drawer-dropdown-menu-item {
        line-height: 3.75rem;
        display: block;
        padding: 0;
        padding-right: .75rem;
        padding-left: 1.5rem;
        text-decoration: none;
        color: #222;
    }

    .drawer-dropdown-menu-item:hover {
        text-decoration: underline;
        color: #555;
        background-color: transparent;
    }

    /*! open */
    .drawer-dropdown.open>.drawer-dropdown-menu {
        display: block;
    }

    /*! drawer-caret */
    .drawer-dropdown .drawer-caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 4px;
        -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
        transition: opacity .2s ease, -webkit-transform .2s ease;
        transition: transform .2s ease, opacity .2s ease;
        transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        vertical-align: middle;
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }

    /*! open */
    .drawer-dropdown.open .drawer-caret {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .drawer-menu li {
        border-bottom: solid 1px #CCC;
        padding: 10px;
    }

    .drawer-menu li a {
        text-decoration: none;
        color: #333;
    }

    .drawer-menu li a:hover,
    .drawer-menu li a.current {
        text-decoration: underline;
        color: #6699CC;
    }

    /* article */
    #sec-service ul {
        clear: both;
        margin: 20px auto;
        overflow: hidden;
        width: 90%;
    }

    #sec-service li {
        margin-bottom: 20px;
        width: 45%;
    }

    #sec-service li:nth-child(odd) {
        float: left;
    }

    #sec-service li:nth-child(even) {
        float: right;
    }

    #sec-service li a {
        text-decoration: none;
    }

    #sec-service li a p {
        border-bottom: solid 1px #CCC;
        border-top: solid 1px #CCC;
        color: #333;
        display: block;
        font-weight: bold;
        margin: 10px 0;
        padding: 10px 0;
        text-align: center;
    }

    #sec-service li a:hover p {
        color: #6699CC;
    }

    #sec-service li span {
        color: #777;
        font-size: 94%;
    }

    /* フッター */
    #f-nav li {
        border-top: solid 1px #CCC;
        padding: 20px 0;
        text-align: center;
    }

    #f-nav li a {
        text-decoration: unset;
    }

    #f-nav li a p {
        color: #333;
        font-size: 17px;
        font-weight: bold;
        line-height: 1;
        margin-top: 12px;
    }

    #f-nav li a span {
        font-size: 13px;
        color: #8C8C8C;
    }

    #f-area {
        padding: 20px 0;
    }

    #f-banner li {
        margin: 10px auto;
        width: 90%;
    }

    #f-list {
        display: none;
    }

    /* ページトップ */
    .pagetop {
        bottom: 20px;
        display: none;
        right: 5px;
        position: fixed;
    }

    .pagetop a {
        background-repeat: no-repeat;
        background-image: url(../images/jump.png);
        background-position: center center;
        display: block;
        padding: 40px;
        background-size: 65% auto;
    }

    /* お知らせ */
    #dl-news {
        border-top: solid 1px #CCC;
        margin: 20px 0;
    }

    #dl-news dl {
        border-bottom: solid 1px #CCC;
        padding: 10px;
    }

    #dl-news dl:last-child {
        border-bottom: solid 1px #CCC;
    }

    #dl-news dl:nth-child(even) {
        background-color: #F8F8F8;
    }

    #dl-news dd a {
        color: #47AB34;
    }
}

@media screen and (max-width: 750px) {

    /*===============================================
●sp-top.css  画面の横幅が750pxまで
===============================================*/
    /* 横スクロール禁止 */
    html {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    /* Basic jQuery Slider essential styles */
    #bjqs-slide {
        display: none;
    }

    #bjqs-slide_sp {
        margin: 0 auto;
        width: 100%;
    }

    ul.bjqs {
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        display: none;
    }

    li.bjqs-slide {
        position: absolute;
        display: none;
    }

    ul.bjqs-controls.v-centered li a {
        position: absolute;
    }

    ol.bjqs-markers {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    ol.bjqs-markers.h-centered {
        text-align: center;
    }

    ol.bjqs-markers li {
        display: inline;
    }

    ol.bjqs-markers li a {
        display: inline-block;
    }

    p.bjqs-caption {
        display: block;
        width: 96%;
        margin: 0;
        padding: 2%;
        position: absolute;
        bottom: 0;
    }

    /* 

ul.bjqs-controls{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 980px;
	z-index: 9999;
}


ul.bjqs-controls li a{
	background-repeat: no-repeat;
    display:block;
    height:15px;
    padding:0px;
    position:absolute;
    text-decoration:none;
    text-transform:uppercase;
    width:11px;
}

a.bjqs-prev{
	background-image: url(../images/top/pre.png);
	margin-top: 390px;
}
 
a.bjqs-next{
	background-image: url(../images/top/next.png);
	margin: 390px 0 0 739px;
}

*/
    ol.bjqs-markers {
        margin: 5px auto 0;
        width: 160px;
    }

    ol.bjqs-markers li {
        float: left;
        margin: 0 10px;
    }

    ol.bjqs-markers li a {
        background-image: url(../images/top/btn-navi.png);
        display: block;
        font-size: 0%;
        height: 12px;
        overflow: hidden;
        text-align: center;
        width: 12px;
    }

    ol.bjqs-markers li.active-marker a {
        background-image: url(../images/top/btn-navi_on.png);
    }

    /* article */
    h2 {
        margin: 20px auto 10px;
    }

    #sec-service h2 {
        width: 30%;
    }

    #sec-news {
        margin: 0 auto;
        width: 90%;
    }

    #sec-news h2 {
        width: 60%;
    }
    #sec-news h2 img {
        vertical-align: bottom;
    }

    /* お知らせ */
    #sec-news dl:nth-child(n+6) {
        display: none;
    }

    #news-list a {
        border: solid 1px #CCC;
        display: block;
        margin: 30px auto;
        padding: 15px 0 10px;
        text-align: center;
        width: 80%;
    }
    /* お知らせ */
    #news-list {
        margin-top: 30px;
        margin-bottom: 50px;
    }

    #sec-staff img {
        vertical-align: top;
    }

    /* footer */
}