@charset "UTF-8";

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

　アコーディオンメニュー

###################################################################################### 

.accMenu {padding:1em;}
.accBox:not(:last-child) {margin-bottom:1em;}
.accBtn {
    display:block;
    position:relative;
    border:1px solid #cccccc;
    background:#eaeaea;
    padding:1em 3em 1em 1em;
}
.accBtn:after {
    display:inline-block;
    position:absolute;
    top:50%;
    right:1em;
    transform:translateY(-50%);
}
.accData {
    background:#f0f0f0;
    padding:1em;
}
@media screen and (max-width: 767px){
.accBtn {cursor:pointer;}
.accBtn:after {content:"→";}
.accBtn.open:after {content:"↓";}
}
*/



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

　ボタン　button

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

/* ====================================================
　基本スタイル
==================================================== */
.button {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    border: none;
    background: #bbbbbb;
    padding: 0.5em 1em;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #000000;
    cursor: pointer;
}
.button.block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
@media print, screen and (min-width: 768px) {
    .button:not(.disabled):hover {opacity:0.85;}
}

/* ====================================================
　xs以下でブロックボタン
==================================================== */
@media print, screen and (max-width: 767px) {
    .button.xs-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}
/* ====================================================
　sm以下でブロックボタン
==================================================== */
@media print, screen and (max-width: 991px) {
    .button.sm-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}

/* ====================================================
　md以下でブロックボタン
==================================================== */
@media screen and (max-width: 1199px) {
    .button.md-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}
/* ====================================================
　lg以下でブロックボタン
==================================================== */
@media screen and (max-width: 9999px) {
    .button.lg-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}

/* ====================================================
　個人情報保護方針に同意して次へ
==================================================== */
.button.form-submit {
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}
/* 送信可 */
.button.next:not(.disabled) {
    background: #9a882e;
    color: #ffffff;
}

.radiusBtn {
  width: 35%;
  height: 80px;
  border: none;
  border-radius: 40px;
  line-height: 40px;
  font-size: 2rem;
  /*line-height: 1.4;*/
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .radiusBtn {
    width: 80%;
    height: 60px;
    border-radius: 30px;
    line-height: 60px;
    font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 700;
  }
}




/* ====================================================
　矢印・アイコン付き　≪≫
==================================================== */
.button.before:after,
.button.before:before,
.button.after:before,
.button.after:after {
    display:inline-block;
    vertical-align:middle;
    font-family:FontAwesome;
    content:"";
    width:1em;
    height:1em;
}
.button.before:after,
.button.after:after {margin-left:0.5em;}
.button.before:before,
.button.after:before {margin-right:0.5em;}

.button.snap {padding-left:2em; padding-right:2em;}

.button.snap:after,
.button.snap:before {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.button.snap:after {right:0.75em;}
.button.snap:before {left:0.75em;}

/* アイコン
-------------------------------------*/
.button.ico.before:before,
.button.ico.after:after {
    content:"";
    width:1em;
    height:1em;
    background-size:contain !important;
    background:#ffffff;
}

/* ≫ */
.button.ico.next.before:before,
.button.ico.next.after:after   {content:"\f101"; background:none;}

/* ≪ */
.button.ico.back.before:before,
.button.ico.back.after:after   {content:"\f100"; background:none;}

/* 人物チーム */
.button.ico.before.before.peoples:before,
.button.ico.after.after.peoples:after {background:url(ico-peoples.svg);}

/* GoogleMaps */
.button.ico.before.before.gmap:before,
.button.ico.after.after.gmap:after {background:url(ico-gmap.svg);}


/* ====================================================
　操作不可
==================================================== */
.button.disabled {
    box-shadow:none;
    cursor: no-drop;
    background:#cccccc;
    color:#aaaaaa;
}
/* ====================================================
　送信
==================================================== */
.button.submit {
    /*background: #7abe05;
    color: #ffffff;*/
}
/* ====================================================
　戻る
==================================================== */
.button.back {
    /*background: #777777;*/
    background: #666;
    color: #ffffff;
}
/* ====================================================
　削除
==================================================== */
.button.del {
    background: #cc0000;
    color: #ffffff;
}

/* ====================================================
　黒ボタン
==================================================== */
.button.black {
    background: #000000;
    color: #ffffff;
}
.button.black.reverse {
    border:1px solid #000000;
    background:#ffffff;
    color: #000000;
}

/* ====================================================
　赤ボタン
==================================================== */
.button.red {
    background: #dc143c;
    color: #ffffff;
}
.button.red.reverse {
    border:1px solid #dc143c;
    background:#ffffff;
    color: #dc143c;
}

/* ====================================================
　青ボタン
==================================================== */
.button.blue {
    background: #005bac;
    color: #ffffff;
}
.button.blue.reverse {
    border:1px solid #005bac;
    background:#ffffff;
    color: #005bac;
}

/* ====================================================
　緑ボタン
==================================================== */
.button.green {
    /*background: #76b52a;*/
    background: #9a882e; /* 茶に変更2024 */
    color: #ffffff;
}
.button.green.reverse {
    border:1px solid #3cb371;
    background:#ffffff;
    color: #3cb371;
}

/* ====================================================
　オレンジボタン
==================================================== */
.button.orange {
    background: #f65007;
    color: #ffffff;
}
.button.orange.reverse {
    border:1px solid #f65007;
    background:#ffffff;
    color: #f65007;
}
/* ====================================================
　イエローオレンジボタン
==================================================== */
.button.yelloworange {
    background: #ffa726;
    color: #ffffff;
}
.button.yelloworange.reverse {
    border:1px solid #ffa726;
    background:#ffffff;
    color: #ffa726;
}
/* ====================================================
　茶色ボタン
==================================================== */
.button.brown {
    background: #805e24;
    color: #ffffff;
}
.button.brown.reverse {
    border:1px solid #805e24;
    background:#ffffff;
    color: #805e24;
}

/* ====================================================
　角丸
==================================================== */
.button.radiusBtn{
    /*border-radius: 3px;*/
    font-weight: bold;
}
/* ミニボタン
-------------------------------------*/
 .button.radiusBtn.mini{
	 	width:100%;
		padding:0.8em 1em;
        font-size: 14px;
    }
/* PAGE TOP
-------------------------------------*/
 .button.radiusBtn.aboutTop{
	 	width:8em;
		padding:0.5em 1em;
        font-size: 14px;	
	 }
@media print, screen and (min-width: 768px) {
    .button.radiusBtn{
        width: 360px;
        padding: 1em 0;
        font-size: 20px;
    }
}
@media screen and (max-width: 767px) {
    .button.radiusBtn{
        display: block;
        padding: 1.0556em 0 0.8889em;
        font-size: 18px;
    }
}

/* 角丸ボタン
-------------------------------------*/
.button.radiusBtn.border{background: none; border:2px solid #111;}
@media print, screen and (min-width: 768px) {
    .button.radiusBtn.border:hover{background: #111; color: #fff;}
}

/* ボーダー
-------------------------------------*/
.button.cornerBtn{
    background: none;
    border: 2px solid #000;
}


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

　ボタンボックス（ページ遷移）　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;
    }
}

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

　表示・非表示　pc sp

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

/* ====================================================
　表示・非表示
==================================================== */
br.pc, span.pc, em.pc, img.sp, div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp,
br.sp, span.sp, em.sp, img.pc, div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc {display:none;}
@media print, screen and (min-width: 768px) {
    div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc { display: block; }
    img.pc, span.pc, em.pc, br.pc { display: inline; }
}
@media screen and (max-width: 767px) {
    div.sp, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc { display: block; }
    img.sp, span.sp, em.sp, br.sp { display: inline; }
}

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

　フォーム　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: 26em; }
.size-input-tel { width: 12.5em; }
.size-input-telS { width: 5em; }
.size-input-homepage { width: 35em; }
.size-input-email { width: 20em; }
.size-input-message { width: 100%; }

.middle-size{width: 300px;}
.short-size{width: 200px;}
.long-size{width: 500px;}
.tel-size{width: 280px;}


/* ====================================================
　フォームテーブル
==================================================== */
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: #990000;
    border-radius: 3px;
    margin-left: 2em;
    padding: 0.25em 0.5em;
    vertical-align: middle;
    line-height: 1;
    color: #ffffff;
    font-size: 70%;
    font-weight:bold;
}

/* ====================================================
　入力サンプル、補足
==================================================== */
form .sample {
    display: block;
    margin: 0.5em 0;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1;
    color: #555555;
    font-size: 80%;
}
form .sample:before { content: "※"; }

/* ====================================================
　Datepicker：カレンダーアイコン
==================================================== */
form .datePicker + button {
    border: 1px solid #cccccc;
    border-radius:2px;
    padding: 0.33em 0.5em;
    line-height: 1;
    vertical-align: middle;
}
form .datePicker + button:before {
    content:"\f073";
    display:inline-block;
    font-family:FontAwesome;
}

/* ====================================================
　エラー表示
==================================================== */
form .error {
    display: block;
    background:#990000;
    margin: 0.5em 0;
    padding:0.25em 1em 0.25em 1.5em;
    text-indent: -1.25em;
    line-height: 1.25;
    color: #ffffff;
    font-size: 90%;
    font-weight: bold;
}
form .error:before { content: "※"; margin-right:0.25em;}

/* ====================================================
　基本スタイル
==================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #cccccc;
    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 #ccc;
    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: 34px; }
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 #999999;
    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;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}
select:focus,
textarea:focus {
    border-color: #f00;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}
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"] + label span: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;
    color: #ccc;
}
input[type="checkbox"] + label:before,
input[type="checkbox"] + label span: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 + label span: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; }
}

/* ====================================================
　個人情報保護方針スクロール
==================================================== */
.privacyPolicyBox {
    border:1px solid #cccccc;
}
.privacyPolicyBox .scroll {
    overflow-y:scroll;
}
.privacyPolicyBox .scroll .policyTitle{
    font-weight: normal;
    text-align: center;
}
.privacyPolicyBox .scroll p,
.privacyPolicyBox .scroll dd{}
.privacyPolicyBox .scroll dt{font-weight: bold;}

@media print, screen and (min-width: 768px) {
    .privacyPolicyBox .scroll {
        height:300px;
        padding:30px 30px 30px;
    }
    .privacyPolicyBox .scroll .policyTitle{font-size: 24px;}
    .privacyPolicyBox .scroll dl + dl{margin-top: 2em;}
    .privacyPolicyBox .scroll p,
    .privacyPolicyBox .scroll dd,
    .privacyPolicyBox .scroll li{font-size: 16px; line-height: 1.625;}
    .privacyPolicyBox .scroll dt{margin-bottom: 5px; font-size: 18px;}
    .privacyPolicyBox .scroll p{margin-bottom: 42px;}
    .privacyPolicyBox .scroll ol{margin-top: 1.5em;}

}
@media screen and (max-width: 767px){
    .privacyPolicyBox .scroll {height:300px; padding: 1em 0.5em;}
    .privacyPolicyBox .scroll .policyTitle{font-size: 18px;}
    .privacyPolicyBox .scroll dl + dl{margin-top: 1.5em;}
    .privacyPolicyBox .scroll p,
    .privacyPolicyBox .scroll dd,
    .privacyPolicyBox .scroll li{font-size: 14px; line-height: 1.625;}
    .privacyPolicyBox .scroll dt{margin-bottom: 3px; font-size: 15px;}
    .privacyPolicyBox .scroll p{margin-bottom: 2em;}
    .privacyPolicyBox .scroll ol{margin-top: 1em;}
}

/* ====================================================
　個人情報保護方針に同意して送信
==================================================== */
.agreementBox {
    margin-top:1em;
    text-align:center;
    background:#f0f0f0;
}
.agreementBox input[type="checkbox"] + label{
    display: block;
    padding:1em;
    color: #f65007;
}
.agreementBox label span{position: relative; display: inline-block; padding-left: 1.5em;}
.agreementBox input[type="checkbox"] + label span:before{color: #111;}
.agreementBox input[type="checkbox"] + label:before{display: none;}
@media print, screen and (min-width: 768px) {
    .agreementBox label,
    .agreementBox label span{font-size: 16px;}
}
@media screen and (max-width: 767px) {
}





/* ====================================================
　MW MPForm向け
==================================================== */
.checkConf { display: block; }




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

　ハンバーガーメニュー：meanMenu

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

/* ====================================================
　PCでは非表示
==================================================== */
@media print, screen and (min-width: 768px) {
    .meanMenu {display:none !important;}
    .header {position:relative !important; height:auto !important;}
    .header .contents {height:auto !important;}
}

/* ====================================================
　3＠デフォルト
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {background:none !important; border:none !important;}
.mean-container .mean-bar {padding:0; min-height:0; background: #fff;}
.header {width:100%;}

.header{border-bottom: 1px solid #805e23;}
.mean-container .mean-bar{height: 0;}
.mean-container .mean-nav ul li a {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
}
.mean-container .mean-nav ul li a:not(.mean-expand) {width:100% !important;}

/* 重なり順 DF
-------------------------------------*/
.header   {}
.header .logo  {position: relative; z-index: 9999999;}
.mean-bar {z-index:10000;}

/* ＋・－　スタイル DF
-------------------------------------*/
.mean-container .mean-nav ul li a.mean-expand {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
    padding: 0px !important;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    content:"";
    display:block;
    position:relative;
}
.mean-container .mean-nav ul li a.mean-expand:after {transform:rotate(90deg);}
.mean-container .mean-nav ul li a.mean-expand.mean-clicked:after {display:none;}

/* MENU・CLOSE　スタイル DF
-------------------------------------*/
.mean-container a.meanmenu-reveal em {
    display:block;
    position:absolute;
    width:100%;
    text-indent:0;
    text-align:center;
    font-weight:normal;
    font-style:normal;
    color:#000000;
    font-size:11px;
}

/* *********************************
　　　ここから設定：meanMenu
********************************* */

/* ====================================================
　ヘッダスタイル
==================================================== */
.header .contents {
    position:relative;
}
.mean-container .mean-nav {margin-top:60px;} /* ヘッダ高さ　common.js で[meanNavPush]にヘッダの高さを設定 */

/* ====================================================
　≡ボタン
==================================================== */
.mean-container a.meanmenu-reveal {
	width: 60px;
	height: 60px;
	padding:0;
}

/* ====================================================
　≡スタイル
==================================================== */
.mean-container a.meanmenu-reveal span {
    position:relative;
    top:8px;         /* ≡の位置調整 */
    width:55%;        /* ≡の長さ */
	background: #7c5a1d; /* ≡の色 */
	height: 3px;      /* ≡の太さ */
	margin:5px auto;  /* ≡の間隔 */
    border-radius: 5px / 5px;
}

/* ====================================================
　×スタイル
==================================================== */
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(1) {transform:rotate(45deg);}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(2) {opacity:0;}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(3) {transform:rotate(-45deg);}
.mean-container a.meanmenu-reveal.meanclose span {top: 14px; left: 16px;} /* 位置調整 */

/* ====================================================
　MENU・CLOSE　スタイル
==================================================== */
.mean-container a.meanmenu-reveal em {
    bottom:6px;
    color:#7c5a1d;
    font-size:11px;
    font-weight: bold;
}

/* ====================================================
　メニュースタイル
==================================================== */
.mean-container .mean-nav {background:#fafafa;}/* メニュー色 */
.mean-container .mean-nav ul li + li{border-top: 1px solid #cac7c6;}
.mean-container .mean-nav ul li a {
    border:none !important;      /* 区切り線上 */
    padding:0.9375em !important; /* ボタン余白 */
    color:#5f4b3e;                              /* 文字色 */
    font-size: 1.6rem;
    font-weight: bold;
}

.mean-container .mean-nav ul li.mean-last a {border-bottom: 1px solid #cccccc;}/* 下端の罫線 */
.mean-container .mean-nav ul li a:before{
    content: "\f105";
    display: inline-block;
    font-family: FontAwesome;
}
.mean-container .mean-nav ul li a:before{margin-right: 12px;}

/* ====================================================
　＋・－　スタイル
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {
    width: 50px;
    height: 50px;
    background:#eaeaea !important;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    background:#000;   /* ＋－の色 */
    width:30%;         /* ＋－の間隔 */
    height:3px;        /* ＋－の太さ */
    margin:5px auto;   /* ＋－の感覚 */
}
.mean-container .mean-nav ul li a.mean-expand:before {top:35%;} /* －の位置調整 */
.mean-container .mean-nav ul li a.mean-expand:after {top:19%;}  /* ｜の位置調整 */

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

　スライドメニュー＋固定ヘッダ　button

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

@media screen and (max-width: 767px) { /**/
    #ContentsBase {
        background: #fff;
    }
}



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

　スライダー：slickSlider

###################################################################################### */
.slickSlider .slick-slide a{display: block;}
@media screen and (max-width: 767px) {
    .slickSlider .slick-slide img{width: 100%; height: auto;}
}


/* ====================================================
　3＠デフォルト
==================================================== */
/* スライドloading DF
-------------------------------------*/

/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide {margin: 0px 0;}
@media print, screen and (min-width: 768px) {
    .slick-slide {padding:2px;}
}
@media screen and (max-width: 767px) {
    .slick-slide {padding:0px;}
}


/* 左右ボタンスタイル DF
-------------------------------------*/

button.slick-arrow:before{display: block; content: ""; opacity: 1;}
button.slick-arrow:hover:before{opacity: 0.75;}
.slick-prev,
.slick-next {
    z-index:10;
    width:auto;
    height:auto;
}
.slick-prev {left: 0;}
.slick-next {right: 0;}
.slick-prev:before{background-position: left top;}
.slick-next:before {background-position: right top;}


@media print, screen and (min-width: 768px) {
    button.slick-arrow:before{
        width: 48px;
        height: 48px;
        background-image: url(../img/contents/slideArrow.png);
    }
}
@media screen and (max-width: 767px) {
        button.slick-arrow:before{
        width: 26px;
        height: 26px;
        background-image: url(../img/contents/slideArrow_sp.png);
        background-size: 52px 26px;
    }

}


/* 黒丸ボタンスタイル DF　 使用しない
-------------------------------------
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before {
    display:inline-block;
    padding:0;
    width:auto;
    height:auto;
    line-height:1;
}
.slick-dots li button {display:block;}
.slick-dots li button:before {
    position:relative;
    padding:0.25em;
    border-radius:50%;
    opacity:1;
}
@media print, screen and (min-width: 768px) {
    .slick-dots {bottom:-37px;}
}
@media screen and (max-width: 767px) {
    .slick-dots {bottom:-25px;}
}
*/

/* ====================================================
　左右ボタンスタイル：＜＞
==================================================== */
.slick-prev:before,
.slick-next:before {color: #000000;}    /* ＜＞ 色 */
.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;}    /* ＜＞ サイズ */
}

/* ====================================================
　黒丸ボタンスタイル：・・・ 使用しない
==================================================== 
.slick-dots li {margin:0 4px;}

.slick-dots li button::before {color:#cccccc;}
.slick-dots li button:hover:before {color:#f00;}
.slick-dots li.slick-active button::before {color:#000000;}

.slick-dots li button:before{content: ""; background: #9ea7a9;}
.slick-dots li.slick-active button:before{background: #fdae39;}

@media print, screen and (min-width: 768px) {
    .slick-dots li button:before{width: 8px; height: 8px;}
    .slick-dots li{margin: 0 6px;}
}
@media screen and (max-width: 767px){
    .slick-dots li button:before{width: 7px; height: 7px;}
    .slick-dots li{margin: 0 5px;}
}
*/

/* ====================================================
　黒丸ボタンカスタマイズ：長方形横 使用しない
==================================================== */
.dotteSolid .slick-dots li {margin:0 2px;}                           /* ●の間隔 */
.dotteSolid .slick-dots li button:before {display:none;}             /* ●の非表示 */
.dotteSolid .slick-dots li button {width:30px; height:5px;}          /* ボタンの形状 */
.dotteSolid .slick-dots li button {background:#75975e;}              /* ● DFの色 */
.dotteSolid .slick-dots li.slick-active button {background:#d9a300;} /* ● active色 */


/* ====================================================
　黒丸ボタンカスタマイズ：長方形縦 使用しない
==================================================== */
.dotteBar .slick-dots {text-align:right;}              /* ●の配置 */
.dotteBar .slick-dots li {margin:0 4px;}               /* ●の間隔 */
.dotteBar .slick-dots li button:before {display:none;} /* ●の非表示 */
.dotteBar .slick-dots li button {                      /* ボタンの形状 */
    width:8px;
    height:15px;
    transform:rotate(45deg);
    }
.dotteBar .slick-dots li button {background:#cccccc;}              /* ● DFの色 */
.dotteBar .slick-dots li.slick-active button {background:#000000;} /* ● active色 */



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

　ページトップ　pageTop

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

/* ====================================================
　右下固定配置
==================================================== */
.pageTopFix {
    display:inline-block;
    position: fixed;
    background-size: contain;
    z-index: 8000;
    cursor: pointer;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

@media print, screen and (min-width: 768px) {
    .pageTopFix {
        bottom: 50px;
        right: 50px;
        width: 79px;
        height: 104px;
        background-image: url(../img/contents/pageTop_pc.png);
    }
}

@media screen and (max-width: 767px) {
    .pageTopFix {
        bottom: 50px;
        right: 20px;
        width: 61px;
        height: 61px;
        background-size: 61px;
        background-image: url(../img/contents/pageTop_sp.png);
    }
}



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

　タイトル　title

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

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

h2,h3,h4,h5,h6 {
    margin:0 0 0.75em;
    padding:0;
    line-height:1.25;
    font-weight:bold;
    font-size:100%;
}
.contentsTitle  {font-size:30px;}
.paragraphTitle {font-size:20px;}
.accentTitle    {font-size:18px;}
.smallTitle     {font-size:16px;}


/* ====================================================
  ページタイトル
==================================================== */
.pageTitle{
    position: relative;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat;
}
.pageTitle span{
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}
@media print, screen and (min-width: 768px) {
    .pageTitle{
        height: 280px;
        background-position: center top;
    }
    .pageTitle span{font-size: 32px;}
}
@media screen and (max-width: 767px) {
    .pageTitle{
        height: 100px;
        background-position: center center;
		background-size: auto 100%;
    }
    .pageTitle span{font-size: 24px;}
}

/* ====================================================
  titleHoarse
==================================================== 
.titleHoarse{position: relative;}
.titleHoarse:before,
.titleHoarse:after{
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
}
.titleHoarse:before{top: 0;}
.titleHoarse:after{bottom: 0;}
@media print, screen and (min-width: 768px) {
    .titleHoarse{padding: 20px 0 18px;}
    .titleHoarse:before,
    .titleHoarse:after{height: 4px;}
    .titleHoarse:before{background-image: url(../img/contents/subBox/hoarseLineTop.png);}
    .titleHoarse:after{background-image: url(../img/contents/subBox/hoarseLineBottom.png);}
}
@media screen and (max-width: 767px) {
    .titleHoarse{padding: 23px 0 25px;}
    .titleHoarse:before,
    .titleHoarse:after{height: 5px; background-size: 100% 5px;}
    .titleHoarse:before{background-image: url(../img/contents/subBox/hoarseLineTop_sp.png);}
    .titleHoarse:after{background-image: url(../img/contents/subBox/hoarseLineBottom_sp.png);}
}
*/

/* ====================================================
  大見出し　splashTitle
==================================================== 
.titleSplash{
    background-image: url(../img/contents/splashTitle.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Times New Roman", "游明朝 medium", "Yu Mincho medium", "游明朝体", "YuMincho", "メイリオ", Meiryo,  serif;
}
.titleSplash.number:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.titleSplash.number.first:before{background-image: url(../img/contents/number01.png);}
.titleSplash.number.second:before{background-image: url(../img/contents/number02.png);}
.titleSplash.number.third:before{background-image: url(../img/contents/number03.png);}
.titleSplash.number.four:before{background-image: url(../img/contents/number04.png);}


@media print, screen and (min-width: 768px) {
    .titleSplash{padding-bottom: 24px; font-size: 30px;}
    .titleSplash.number:before{
        width: 80px;
        height: 46px;
        margin-right: 20px;
        background-size: 80px 38px;
    }
}
@media screen and (max-width: 767px) {
    .titleSplash{
        position: relative;
        padding-bottom: 12px; 
        background-size: 100% auto;
        font-size: 20px;
    }
    .titleSplash.number{
        padding-left: 70px;
    }
    .titleSplash.number:before{
        position: absolute;
        left: 0;
        top: 0;
        width: 55px;
        height: 29px;
        margin-right: 16px;
        background-size: 55px 26px;
		display:block;
    }
}
*/

/* ====================================================
  中見出し　titleBicolor
==================================================== */

@media print, screen and (min-width: 768px) {
    .titleBicolor{font-size: 28px; 
		font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Times New Roman", "游明朝 medium", "Yu Mincho medium", "游明朝体", "YuMincho", "メイリオ", Meiryo,  serif;
	}
}
@media screen and (max-width: 767px) {
    .titleBicolor{
        font-size: 18px;
        font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Times New Roman", "游明朝 medium", "Yu Mincho medium", "游明朝体", "YuMincho", "メイリオ", Meiryo,  serif;
	}
}

/* ====================================================
  小見出し　titleBorderColor
==================================================== */
.titleBorderColor{border-bottom: 2px solid #7a5518; color: #7d5b1f;}

@media print, screen and (min-width: 768px) {
    .titleBorderColor{padding-bottom: 10px; font-size: 22px;}
}
@media screen and (max-width: 767px) {
    .titleBorderColor{
        margin-bottom: 0.5em;
        padding-bottom: 6px;
        font-size: 18px;
    }
}

/* アイコン付き
-------------------------------------*/
	.titleBorderColor.ico{background-size: 27px 27px; background-position:top left;}
    .titleBorderColor.ico.car{background:url(../img/contents/company/icon_car.png) no-repeat; background-size: 27px 27px; background-position:top left;}
    .titleBorderColor.ico.bus{background:url(../img/contents/company/icon_bus.png) no-repeat; background-size: 21px 24px;  background-position:top left;}
    .titleBorderColor.ico.train{background:url(../img/contents/company/icon_train.png) no-repeat; background-size: 21px 24px;  background-position:top left;}

/* ====================================================
  孫見出し　titleRoughBorder
==================================================== */
.titleRoughBorder{
    background-image: url(../img/contents/titleRoughBorder.png);
    background-size: 320px 3px;
    background-repeat: repeat-x;
    background-position: bottom left;
    color: #5f4b3e;
    font-weight: bold;
}

@media print, screen and (min-width: 768px) {
    .titleRoughBorder{
        margin-bottom: 12px;
        padding-bottom: 12px;
        font-size: 18px;
    }
}
@media screen and (max-width: 767px) {
    .titleRoughBorder{
        margin-bottom: 12px;
        padding-bottom: 8px;
        font-size: 16px;
    }
}



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

　パンくずリスト：widget.css_topicPath

###################################################################################### */
.topicPath {
    clear: both;
    width: 100%;
    margin: 0 auto;
    line-height: 1;
    text-align: left;
}
.topicPath ol li{color: #111;}
.topicPath ol li a {
    color: #503c32;
    text-decoration: underline;
}
@media print, screen and (min-width: 768px) {
    .topicPath { display: block; padding-top: 20px; padding-bottom: 36px;}
    .topicPath ol+ol {display:none;}
    .topicPath ol li {display: inline-block; font-size: 14px;}
    .topicPath ol li:not(:first-child):before {
        content: "\f105";
        display: inline-block;
        font-family: FontAwesome;
        padding: 0 0.75em 0 0.5em;
    }
    .topicPath a,
    .topicPath span {font-size: 14px; color: #503c32;}
    .topicPath ol li a:hover { text-decoration: none; }
}
@media screen and (max-width: 767px) {
    .topicPath {display: none;}
}




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

　メニュー

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

/* ====================================================
  squareMenu
==================================================== */
.squareMenu li a{display: block; background-position: center; background-repeat: no-repeat;}
.squareMenu li:nth-of-type(1) a{background-image: url(../img/contents/square01.png);}
.squareMenu li:nth-of-type(2) a{background-image: url(../img/contents/square02.png);}
.squareMenu li:nth-of-type(3) a{background-image: url(../img/contents/square03.png);}
.squareMenu li:nth-of-type(4) a{background-image: url(../img/contents/square04.png);}

.squareMenu li a span{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 100%;
    font-family: "游ゴシック体 Medium", 'Yu Gothic Medium', YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    font-weight: bold;
    color: #291f18;
    text-align: center;
}
.squareMenu li a:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    margin: auto;
    background-image: url(../img/contents/squareArrow.png);
    background-repeat: no-repeat;
    background-position: center top;
}

@media print, screen and (min-width: 768px) {
    .squareMenu {padding: 0 160px;}
    .squareMenu li a{
        width: 180px;
        height: 180px;
        padding-top: 52px;
        padding-bottom: 53px;
        text-decoration: none;
    }
    .squareMenu li:nth-of-type(1) a,
    .squareMenu li:nth-of-type(2) a{background-size: 180px;}
    .squareMenu li:nth-of-type(3) a,
    .squareMenu li:nth-of-type(4) a{background-size: 179px 181px;}
    
    
    .squareMenu li a:after{
        bottom: 30px;
        height: 24px;
        margin-right: 5px;
        background-size: 24px;
    }
    .squareMenu li a span{
        padding: 0 36px 0 28px;
        font-size: 17px;
        line-height: 1.2941;
    }
}
@media screen and (max-width: 767px) {
    .squareMenu{margin: 0 -8px;}
    .squareMenu li{margin-bottom: 0.75em; padding: 0 8px;}
    .squareMenu li a{
        padding-top: 100%;
        background-size: 100% auto;
    }
    .squareMenu li a:after{
        bottom: 15px;
        height: 25px;
        background-size: 20px;
    }
    .squareMenu li a span{
        padding: 0 20px;
        font-size: 15px;
    }  
    
}




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

　帯背景　wallBelt

###################################################################################### */
.wallBelt.roughBeigeBelt {
    background-image: url(../img/contents/beige_rough_wall.png);
    background-position: center top;
}
.wallBelt.creamBelt {
    background-image: url(../img/contents/creamBelt.png);
    background-position: center top;
}


/*
@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; }
}
*/


/* ====================================================
　squareDotted
==================================================== */
.wallBelt.squareDotted{background-image: url(../img/contents/subNavi_bg.png);}

@media screen and (max-width: 767px) {
    .wallBelt.squareDotted{background-size: 13px 13px;}
}


/* ====================================================
　キャプション表示

　<a href="#" class="imageHover zoomCaption">
　    <figure>
　        <img src="">
　        <figcaption>キャプション</figcaption>
　    </figure>
　</a>
==================================================== */
.imageHover.zoomCaption {
    display:block;
    overflow: hidden;
}
.imageHover.zoomCaption figure {
    position:relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
}
.imageHover.zoomCaption figure:before,
.imageHover.zoomCaption figcaption {
    -webkit-transition:all 0.25s ease-in-out;
       -moz-transition:all 0.25s ease-in-out;
        -ms-transition:all 0.25s ease-in-out;
         -o-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
    opacity: 0;
    position:absolute;
    left:0;
    width:100%;
}
.imageHover.zoomCaption figure:before {
    content:"";
    display:block;
    z-index:5;
    background-color: rgba(0,0,0,0.4);
    top:0;
    height:100%;
}
.imageHover.zoomCaption figcaption {
    transform:translateY(-50%);
    top: 50%;
    z-index:6;
    text-align: center;
    color: #FFF;
    font-size: 16px;
}
.imageHover.zoomCaption img {
    -webkit-transition:all 0.25s ease-in-out;
       -moz-transition:all 0.25s ease-in-out;
        -ms-transition:all 0.25s ease-in-out;
         -o-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
    width: 100%;
    height: 176px;
    vertical-align: bottom;
    object-fit: cover;
    font-family:"object-fit:cover;";

}
.imageHover.zoomCaption:hover figure:before,
.imageHover.zoomCaption:hover figcaption {opacity:1;}