@charset "UTF-8";
/* ######################################################################################

　ボタン　button

###################################################################################### */

/* ====================================================
　基本スタイル
==================================================== */
.button {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    border: none;
    padding: 0.5em 1em;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    cursor: pointer;
}
.button.block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
.button.block_w75 {
    display: block;
    width: 75%;
    margin: 1em auto;
    padding: 0.75em 1em;
}
.button.block_w250 {
    width: 250px;
    margin: auto;
}
@media print, screen and (min-width: 768px) {
    .button:not(.disabled):hover {opacity:0.85;}
}
@media print, screen and (max-width: 767px) {
    .button:not(.disabled):active {background: #eeeeee; top:1px;}
}

.button.round {
    background: #ffffff;
    border-radius: 50px;
}
.button.round a { text-decoration: none; color: #000000;}

.button.round_g {
    background: #f5f5f5;
    border-radius: 50px;
}
.button.round_g a { text-decoration: none; color: #000000;}

.button.squareborder {
    background: #ffffff;
    border: solid 1px #1b1b1b;
    padding: 20px;
}
.button.squareborder a { text-decoration: none; color: #ffffff;}

.button.squareborderB {
    background: #000000;
    border: solid 1px #1b1b1b;
    padding: 20px;
    color: #ffffff;
}
.button.squareborderB a { text-decoration: none; color: #ffffff;}

.button.circle {
    position: absolute;
    background: #1b1b1b;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    border: solid 3px #ffffff;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    transition: .4s;
}
.button.circle a { text-decoration: none; color: #ffffff;}

/* ######################################################################################

　ボタンボックス（ページ遷移）　buttonBox

###################################################################################### */

/* ====================================================
　基本スタイル
==================================================== */
.buttonBox { text-align: center; }
.buttonBox p { text-align: center; }
.buttonBox li .button {
    display: block;
    width:100%;
    /*padding: 1em 2em;*/
}
.buttonBox.center .row {
    display: inline-block;
    width: 100%;
    max-width: 500px;
}
.buttonBox.center.single .row { max-width: 384px; }

/* ====================================================
　ブロックボタンは上下に余白を作る
==================================================== */
@media print, screen and (max-width: 767px) {
    .buttonBox > .row > .col-xs-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}
@media print, screen and (max-width: 991px) {
    .buttonBox > .row > .col-sm-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}
@media screen and (max-width: 1199px) {
    .buttonBox > .row > .col-md-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
    }
@media screen and (max-width: 9999px) {
    .buttonBox > .row > .col-lg-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}


/* ######################################################################################

    imgFit

###################################################################################### */
.imgFitBox.cover img, img.imgFit.cover {
  object-fit: cover;
  font-family: "object-fit:cover";
}



/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */
/* ====================================================
　3＠デフォルト
==================================================== */

/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide {margin: 0px 0;}

@media print, screen and (min-width: 768px) {
.slick-slide { padding:0 10px;}
.thumb-item2-nav .slick-slide:nth-child(9n+1) {clear: left;}
}
@media screen and (max-width: 767px){
.slick-slide {padding:0 1px 0;}
    .slickSlider.thumb-item2{margin-bottom: 5px;}
}





/* 左右ボタンスタイル DF
-------------------------------------*/
.slick-prev,
.slick-next {
    z-index:10;
    width:40px;
    height:auto;
}
@media print, screen and (min-width: 768px) {
.slick-prev {left: 0;}
.slick-next {right: 0;}
}
@media screen and (max-width: 767px){
.slick-prev {left: 0;}
.slick-next {right: 0;}
}
.slick-prev:before,
.slick-next:before {
    font-family: FontAwesome;
    opacity: .75;
    text-shadow:0 0 5px rgba(0,0,0,0.5);
}

/* ====================================================
　左右ボタンスタイル：＜＞
==================================================== */
.slick-prev:before,
.slick-next:before {color: #ffffff;}    /* ＜＞ 色 */
.slick-prev::before {content:"\f104";}    /* ＜ 形状 */
.slick-next::before {content:"\f105";}    /* ＞ 形状 */

@media print, screen and (min-width: 768px) {
    .slick-prev:before,
    .slick-next:before {font-size: 40px;}    /* ＜＞ サイズ */
}
@media screen and (max-width: 767px){
    .slick-prev:before,
    .slick-next:before {font-size: 30px;}    /* ＜＞ サイズ */
}

/* ============================================================================
  [9] 768以上：センター配置＋自動再生＋画面幅に応じて左右が見える＋サムネイルタイル配置
      767以下：センター配置＋サムネイル３つ中央アクティブ
============================================================================ */
@media print, screen and (min-width: 768px) {
.centerRes2.slickSlider {
    margin-bottom:40px;
}
.centerRes2.slickSlider .slick-slide{
    width:800px !important;    /* ※PCの時の画像サイズ指定 */
}
.thumb-item2-nav {
    margin:0 auto;
    max-width:990px;
}
.thumb-item2-nav .slick-track {
    transform:translate3d(0, 0, 0) !important;
    width:100% !important;
}
.thumb-item2-nav .slick-slide {width:11.1111% !important; padding:0 5px 10px; cursor:pointer;}
.thumb-item2-nav .slick-slide img {width:100% !important; height:auto;}
.thumb-item2-nav .slick-slide:not(.slick-active) {opacity:0.6;}
}


.slick-track {position:relative;}
/* 薄紙 */
.slick-arrow {
    display:block;
    position:absolute;
    height:100%;
    background:rgba(255,255,255,0.4) !important; /* hoverさせない */
    z-index:10;
}
/* ＜＞の位置 */
.slick-arrow:before {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:auto;
    left:auto;
}
@media print, screen and (min-width: 768px) {
/* 【大】左右リンクエリア */
.thumb-item2 .slick-arrow {width:50%;}
.thumb-item2 .slick-prev {right:50%; margin-left:-410px;}
.thumb-item2 .slick-next {left:50%; margin-left:410px;}

/* 【大】＜＞の位置*/
.thumb-item2 .slick-next:before {left:30px;}
.thumb-item2 .slick-prev:before {right:30px;}
}
@media screen and (max-width: 767px){

/* 【大】左右リンクエリア */
.thumb-item2 .slick-prev {left:0;}
.thumb-item2 .slick-next {right:0;}
.thumb-item2 .slick-arrow {width:60px; background:none !important;}

/* 【大】＜＞の位置*/
.thumb-item2 .slick-next:before {right:10px;}
.thumb-item2 .slick-prev:before {left:10px;}

/* 【小】左右リンクエリア */
.thumb-item2-nav .slick-prev {left:0;}
.thumb-item2-nav .slick-next {right:0;}
.thumb-item2-nav .slick-arrow {width:33.3333%;}

/* 【小】＜＞非表示*/
.thumb-item2-nav .slick-arrow:before {display:none;}
}


/* ######################################################################################

　タイトル　title

###################################################################################### */

/* ====================================================
　デフォルトタイトル
==================================================== */

h1,h2,h3,h4,h5,h6 {
    margin:0 0 0.75em;
    padding:0;
    line-height:1.25;
    font-weight:normal;
    font-size:100%;
    letter-spacing: 0.075em;
}
.pageTitle      {font-size:3.8rem;}
.contentsTitle  {font-size:3.4rem;}
.paragraphTitle {font-size:20px;}
.accentTitle    {font-size:18px;}
.smallTitle     {font-size:16px;}
.contentsTitle span { display: block; font-size: 1.6rem; margin-top: 30px;}
h1.contentsTitle { margin-top: 0!important;}

.titleBox h1.pageTitle {
    color:#ffffff;
    text-align: center;
    margin-top: 190px;
    margin-bottom: 0;
}
.titleBox h1 span { display: block; margin-top: 20px;}
/*.header.fixed .titleBox {
    opacity: 0;
    transform: translateY(-120px);
    -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
    
}*/
@media screen and (max-width: 1119px) {
    .titleBox {
        background: url(../img/header/sub_bg.jpg) no-repeat 70% 90%;
        height: 120px;
        margin-top: 50px;
        padding-top: 20px;
    }
    .titleBox h1.pageTitle {
        margin-top: 0;
        font-size: 2.8rem;
        padding-top: 15px;        
    }
    .titleBox h1 span { display: block; margin-top: 10px;}
}

/* ######################################################################################

　帯背景　wallBelt

###################################################################################### */
.wallBelt.paper {
    background: url(../img/contents/bg01.jpg) no-repeat top center, url(../img/contents/bg01_r.jpg) repeat-y 50% center;
    margin-top: -50px;
    padding-top: 220px !important;
}
.wallBelt.paperB {
    background: url(../img/contents/bgB01.jpg) no-repeat top center, url(../img/contents/bg01B_r.jpg) repeat-y 50% center;
    margin-top: -50px;
    padding-top: 220px !important;
    color:#ffffff;
}
.wallBelt.paperB.top{
    background: url(../img/contents/bgB02.jpg) no-repeat top center, url(../img/contents/bg01B_r.jpg) repeat-y 50% center;
}

.wallBelt.paperC {
    background: url(../img/contents/bgC.png) repeat-y top center;
    padding-bottom: 0px!important;
}

.wallBelt.paperB a { color: #ffffff;}
@media print, screen and (min-width: 768px) {
    .wallBelt {
        padding: 60px 0;
        overflow: hidden;
    }
    .wallBelt.zero { padding: 0 0; }
    .wallBelt.narrow { padding: 30px 0; }
    .wallBelt.wide { padding: 80px 0; }
}

@media screen and (max-width: 767px) {
    .wallBelt { padding: 30px 0; }
    .wallBelt.zero { padding: 0 0; }
    .wallBelt.narrow { padding: 15px 0; }
    .wallBelt.wide { padding: 40px 0; }
    .wallBelt.paper {margin-top: -100px;}
}

/* ######################################################################################

　テーブル　table

###################################################################################### */

/* ====================================================
　罫線色
==================================================== */
th,td,td:before {border-color: #dcdcdc;}

/* ====================================================
　見出しセル
==================================================== */
th, td:before {
    background: #ffffff;
    vertical-align: top;
}
th[scope="row"],
td:before {width:6em;}

/* [cell**-create] 時の対応
-------------------------------------*/
@media print, screen and (max-width: 767px) {
    table.cell-xs-create td {padding-left: 7em;}
}
@media print, screen and (max-width: 991px) {
    table.cell-sm-create td {padding-left: 7em;}
}
@media screen and (max-width: 1199px) {
    table.cell-md-create td {padding-left: 7em;}
}
@media screen and (max-width: 9999px) {
    table.cell-lg-create td {padding-left: 7em;}
}

/* ====================================================
　文字サイズ
==================================================== */
@media print, screen and (min-width: 768px) {
    table,th,td {font-size:14px;}
    caption {font-size:80%;}
}
@media screen and (max-width: 767px) {
    table,th,td {font-size:14px;}
    caption {font-size:80%;}
}

/* ====================================================
　セル余白
==================================================== */
th,td,
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {padding: 1em;}
@media print, screen and (min-width: 768px) {
    th,td {padding: 1em;}
}
@media screen and (min-width: 992px) {
    th,td {padding: 1em;}
}
@media screen and (min-width: 1200px) {
    th,td {padding: 1em;}
}

/* [**-block] 時の対応
-------------------------------------*/
@media print, screen and (max-width: 767px) {
    table.xs-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.xs-block tr + tr {margin-bottom:-1px;}
    table.cell-xs-create tr + tr {margin-top:1px;}
}
@media print, screen and (max-width: 991px) {
    table.sm-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.sm-block tr + tr {margin-bottom:-1px;}
    table.cell-sm-create tr + tr {margin-top:1px;}
}
@media screen and (max-width: 1199px) {
    table.md-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.md-block tr + tr {margin-bottom:-1px;}
    table.cell-md-create tr + tr {margin-top:1px;}
}
@media screen and (max-width: 9999px) {
    table.lg-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.lg-block tr + tr {margin-top:-1px;}
    table.cell-lg-create tr + tr {margin-top:1px;}
}

/* ====================================================
　基本設定
==================================================== */
table {width: 100%;}
caption {
    margin-bottom:0.5em;
    text-align: left;
}
th, td {
    text-align: left;
    font-weight: normal;
}
/* ====================================================
　罫線タイプ
==================================================== */

/* 囲み
-------------------------------------*/
.borderBox th,
.borderBox td { border-bottom-width: 1px; border-top-width: 1px; }

.borderBox tr:not(:first-child) th,
.borderBox tr:not(:first-child) td {border-top-width:0;}

.borderBox th:not(:first-child),
.borderBox td:not(:first-child) {border-left-width:0;}

/* 水平線
-------------------------------------*/
.borderHorizon th,
.borderHorizon td { border-width: 1px 0; }

.borderHorizon tr:not(:first-child) th,
.borderHorizon tr:not(:first-child) td {border-top-width:0;}

/* ====================================================
　線種
==================================================== */
.borderSolid th { border-style: solid; white-space: nowrap; }
.borderSolid td { border-style: solid; }
.borderSolid td:before { border-style: solid; }
.borderDotted th { border-style: dotted; }
.borderDotted td { border-style: dotted; }
.borderDotted td:before { border-style: dotted; }
.borderDashed th { border-style: dashed; }
.borderDashed td { border-style: dashed; }
.borderDashed td:before { border-style: dashed; }
/* ====================================================
　*のときTHをサイドに作る
==================================================== */
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 1px 0 0;
    height: 100%;
}
table.borderHorizon.cell-xs-create td:before,
table.borderHorizon.cell-sm-create td:before,
table.borderHorizon.cell-md-create td:before,
table.borderHorizon.cell-lg-create td:before { border: none; }

@media print, screen and (max-width: 767px) {
/* ====================================================
　xsのときcellをBlock
==================================================== */
    table.xs-block,
    table.xs-block caption,
    table.xs-block thead,
    table.xs-block tbody,
    table.xs-block tr,
    table.xs-block th,
    table.xs-block td { display: block; width:100%; }

    table.xs-block th:not(:first-child),
    table.xs-block td:not(:first-child) {border-top-width:0 !important;}
    table.xs-block tr:not(:first-child) th,
    table.xs-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.xs-block th:not(:first-child),
    table.borderBox.xs-block td:not(:first-child) {}

    table.cell-xs-create th { display: none; }
    table.cell-xs-create td {
        position: relative;
        overflow: hidden;
    }
    table.cell-xs-create td:before { content: attr(title); }
}
@media print, screen and (max-width: 991px) {
/* ====================================================
　smのときcellをBlock
==================================================== */
    table.sm-block,
    table.sm-block caption,
    table.sm-block thead,
    table.sm-block tbody,
    table.sm-block tr,
    table.sm-block th,
    table.sm-block td { display: block; width:100%; }

    table.sm-block th:not(:first-child),
    table.sm-block td:not(:first-child) {border-top-width:0 !important;}
    table.sm-block tr:not(:first-child) th,
    table.sm-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.sm-block th:not(:first-child),
    table.borderBox.sm-block td:not(:first-child) {border-left-width:1px;}

    table.cell-sm-create th { display: none; }
    table.cell-sm-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-sm-create td:before { content: attr(title); }
}
@media screen and (max-width: 1199px) {
/* ====================================================
　mdのときcellをBlock
==================================================== */
    table.md-block,
    table.md-block caption,
    table.md-block thead,
    table.md-block tbody,
    table.md-block tr,
    table.md-block th,
    table.md-block td { display: block; width:100%; }

    table.md-block th:not(:first-child),
    table.md-block td:not(:first-child) {border-top-width:0 !important;}
    table.md-block tr:not(:first-child) th,
    table.md-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.md-block th:not(:first-child),
    table.borderBox.md-block td:not(:first-child) {border-left-width:1px;}

    table.cell-md-create th { display: none; }
    table.cell-md-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-md-create td:before { content: attr(title); }
}
@media screen and (max-width: 9999px) {
/* ====================================================
　lgのときcellをBlock
==================================================== */
    table.lg-block,
    table.lg-block caption,
    table.lg-block thead,
    table.lg-block tbody,
    table.lg-block tr,
    table.lg-block th,
    table.lg-block td { display: block; width:100%; }

    table.lg-block th:not(:first-child),
    table.lg-block td:not(:first-child) {border-top-width:0 !important;}
    table.lg-block tr:not(:first-child) th,
    table.lg-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.lg-block th:not(:first-child),
    table.borderBox.lg-block td:not(:first-child) {border-left-width:1px;}

    table.cell-lg-create th { display: none; }
    table.cell-lg-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-lg-create td:before { content: attr(title); }
}

/* ######################################################################################

　フォーム　form

###################################################################################### */
input + br {
    display: block;
    content: "";
    width: 100%;
    height: 3px;
}

/* ====================================================
　フォーム長さ
==================================================== */
.size-input-name { width: 16em; }
.size-input-nameS { width: 8em; }
.size-input-company { width: 17em; }
.size-input-division { width: 17em; }
.size-input-quantity { width: 5em; }
.size-input-zip { width: 7em; }
.size-input-zip3 { width: 4em; }
.size-input-zip4 { width: 5em; }
.size-input-pref { width: 6em; }
.size-input-address { width: 30em; }
.size-input-tel { width: 12.5em; }
.size-input-telS { width: 5em; }
.size-input-homepage { width: 35em; }
.size-input-email { width: 25em; }
.size-input-message { width: 100%; }

/* ====================================================
　フォームテーブル
==================================================== */
form table { width: 100%; }
@media print, screen and (min-width: 768px) {
    form th {white-space:nowrap;}
}

/* ====================================================
　必須アイコン
==================================================== */
form th.required:before {
    content: "必須";
    display: inline-block;
    position: relative;
    top: 0.2em;
    float: right;
    background: #eb6100;
    border-radius: 3px;
    margin-left: 2em;
    padding: 0.25em 0.5em;
    vertical-align: middle;
    line-height: 1;
    color: #ffffff;
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1.3rem;
}

/* ====================================================
　入力サンプル、補足
==================================================== */

form .sample {
    margin: 0.5em 0;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1;
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1.3rem;
}
form .sample:before { content: "※"; }
@media screen and (max-width: 767px) {
    form .sample { display: block;}
}
/* ====================================================
　エラー表示
==================================================== */
form .error {
    background: #F7F8CF;
    color: #D31F1F;
    margin-bottom: 0;
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1.3rem;
    padding: 4px;
    border-radius: 4px 8px;
    margin-top: 2px;
    font-weight: bold;
}
form .error:before {
    content: "\f071";
    margin-right:0.25em;
    font-family: Fontawesome;
}

form .error.top {
    text-align: center;
    font-size: 2.0rem;
    margin: 30px 0;
}

/* ====================================================
　基本スタイル
==================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background-color: #ffffff;
    max-width: 100%;
    padding: 0.25em 0.5em;
    font-size: 14px;
    color: #000000 !important;
    font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background-color: #ffffff;
    max-width: 100%;
    padding: 0.25em 0.5em;
    font-size: 14px;
    color: #000000 !important;
    font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] { height: 2.25em; }
textarea {
    width: 100%;
    height: 6em;
}
select { padding-right: 2.7em; }
select:not([multiple]) {
    box-shadow: none;
    background: -moz-linear-gradient(top, white 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -webkit-linear-gradient(top, white 0%, rgba(0, 0, 0, 0.15) 100%);
    background: linear-gradient(to bottom, white 0%, rgba(0, 0, 0, 0.15) 100%);
    margin: 0;
}
label.select {
    display: inline-block;
    position: relative;
    line-height: 0;
}
label.select:before,
label.select:after {
    display: inline-block;
    position: absolute;
    font-size: 50%;
}
label.select:before {
    content: "";
    border-left: 1px solid #e5e5e5;
    right: 3em;
    height: 100%;
}
label.select:after {
    pointer-events: none;
    content: "▼";
    top: 50%;
    transform: translateY(-50%);
    right: 1em;
    line-height: 1;
    color: #777777;
}

/* ====================================================
　placeholder
==================================================== */
/* 個別に書かないと効かない */
::-webkit-input-placeholder {color: #bbbbbb !important; opacity:1;}
:-moz-placeholder           {color: #bbbbbb !important; opacity:1;}
::-moz-placeholder          {color: #bbbbbb !important; opacity:1;}
:-ms-input-placeholder      {color: #bbbbbb !important; opacity:1;}
input-placeholder           {color: #bbbbbb !important; opacity:1;}
-webkit-input-placeholder   {color: #bbbbbb !important; opacity:1;}
-ms-input-placeholde        {color: #bbbbbb !important; opacity:1;}
input:-ms-input-placeholder {color: #bbbbbb !important; opacity:1;}
-moz-placeholder            {color: #bbbbbb !important; opacity:1;}
/* ====================================================
　フォーカス
==================================================== */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: #f00;
}
select:focus,
textarea:focus {
    border-color: #f00;
}
select:not([multiple]):focus { box-shadow: none; }

/* ====================================================
　ラジオボタン・チェックボックス
==================================================== */
input[type="checkbox"],
input[type="radio"] { display: none; }
input[type="checkbox"] + label,
input[type="checkbox"] + span {
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
}
input[type="radio"] + label,
input[type="radio"] + span {
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
}
input[type="checkbox"] + label:before,
input[type="checkbox"] + span:before,
input[type="radio"] + label:before,
input[type="radio"] + span:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0.25em;
    transform: translateY(-50%);
    font-family: FontAwesome;
}
input[type="checkbox"] + label:before,
input[type="checkbox"] + span:before { content: "\f096"; }
input[type="radio"] + label:before,
input[type="radio"] + span:before { content: "\f10c"; }
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:checked + span:before { content: "\f046"; }
input[type="radio"]:checked + label:before,
input[type="radio"]:checked + span:before { content: "\f192"; }
.buttonBox { margin: 20px 0; }

@media screen and (max-width: 767px) {
input[type="checkbox"] + label,
input[type="checkbox"] + span,
input[type="radio"] + label,
input[type="radio"] + span {
    display: block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked + span,
input[type="radio"]:checked + label,
input[type="radio"]:checked + span { background-color: #f0f0ff; }
}

/* ######################################################################################

　ページトップ　pageTop

###################################################################################### */
/* ====================================================
　コンテンツ内配置
==================================================== */
.pageTop {
    display:inline-block;
    border:1px solid #cccccc;
    background:#ffffff;
    padding:0.5em 1em;
    cursor:pointer;
}
/* ====================================================
　右下固定配置
==================================================== */
.pageTopFix {
    display:inline-block;
    position: fixed;
    border:1px solid #a78838;
    background-color: #a78838;
    background-size: contain;
    z-index: 8000;
    cursor: pointer;
}

.pageTopFix:before{
    content: "";
    position: absolute;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media print, screen and (min-width: 768px) {
    .pageTopFix {
        bottom: 50px;
        right: 50px;
        width: 80px;
        height: 80px;
    }
    .pageTopFix:before{
        top: calc(50% - 5px);
        left: calc(50% - 10px);
        width: 20px;
        height: 20px;
        border-top: 3px solid #fff;
        border-left: 3px solid #fff;
    }
}

@media screen and (max-width: 767px) {
    .pageTopFix {
        bottom: 50px;
        right: 20px;
        width: 40px;
        height: 40px;
}
    .pageTopFix:before{
    top: calc(50% - 2.5px);
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}
}