@charset "utf-8";

/* 全端末（PC・タブレット・スマホ）共通設定 
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* lightbox.cssの読み込み（画像のライトボックス表示用） 
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/* 全体の設定（bodyやhtmlのスタイル設定）
---------------------------------------------------------------------------*/
/* body と html 要素の幅と高さを 100% に設定 */
body,html {width: 100%;height: 100%;}

/* body 要素のスタイル設定 */
body {
    margin: 0px;  /* 余白をリセット */
    padding: 0px;  /* パディングをリセット */
    color: #ffffff;  /* 全体の文字色 */
    font-size: 18px;  /* 文字サイズ */
    font-family: Arial, Helvetica, sans-serif;  /* 使用するフォント */
    line-height: 2.2;  /* 行間の設定 */
    background: #1c315a;  /* 背景色 */
    -webkit-text-size-adjust: none;  /* テキストサイズの自動調整を無効化 */
}

/* HTML要素の基本スタイルをリセット */
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {
    margin: 0px; 
    padding: 0px; 
    font-size: 100%;
}

/* ul 要素のリストスタイルをリセット */
ul {list-style-type: none;}

/* ol 要素のパディング設定 */
ol {
    padding-left: 40px; 
    padding-bottom: 15px;
}

/* 画像のスタイルを設定 */
img {
    border: none;  /* ボーダーを無しに設定 */
    max-width: 100%;  /* 幅を最大100%に設定 */
    height: auto;  /* 高さを自動調整 */
    vertical-align: middle;  /* 垂直方向の位置を調整 */
}

/* テーブルのスタイルを設定 */
table {
    border-collapse:collapse;  /* ボーダーの結合 */
    font-size: 100%; 
    border-spacing: 0;  /* セル間のスペースをリセット */
}

/* iframe の幅を100%に設定 */
iframe {width: 100%;}

/* リンクの設定（リンクの色やアニメーション設定） 
---------------------------------------------------------------------------*/
/* リンクの基本スタイルを設定 */
a {
    color: #FF9800;  /* リンクテキストの色 */
    transition: 0.4s;  /* マウスオン時の移り変わるまでの時間設定 */
}

/* マウスオン時のリンクスタイルを設定 */
a:hover {
    color: #6983a9;  /* マウスオン時の文字色 */
    text-decoration: none;  /* マウスオン時に下線を消す設定 */
}

/* ヘッダーの設定（背景画像やテキストのスタイル） 
---------------------------------------------------------------------------*/
/* header 要素の基本スタイルを設定 */
header {
    width: 100%;  /* 幅を100%に設定 */
    height: 110%;  /* 高さを110%に設定 */
    overflow: hidden;  /* オーバーフローを隠す */
    position: relative;  /* 相対位置に設定 */
    background: #dcdcd8 url(../images/bg.jpg) no-repeat center center;  /* 背景画像（古いブラウザ用） */
    background: #dcdcd8 url(../images/bg.jpg) no-repeat center center / cover;  /* 背景画像 */
}

/* header 内の h1 要素のスタイルを設定 */
header h1 {
    position: absolute;  /* 絶対位置に設定 */
    top: 0px;  /* 上部の位置を設定 */
    width: 100%;  /* 幅を100%に設定 */
    text-align: center;  /* 中央寄せ */
    background: #99918b;  /* 古いブラウザ用の背景色 */
    background: rgba(103,87,74,0.5);  /* 半透明の背景色 */
    color: #fff;  /* 文字色 */
    font-weight: normal;  /* フォントのウェイトをノーマルに設定 */
    letter-spacing: 0.2em;  /* 文字間のスペースを設定 */
    font-size: 12px;  /* フォントサイズ */
    z-index: 10;  /* 重なり順を設定 */
}

/* inner クラス（コンテンツの最大幅とパディング） 
---------------------------------------------------------------------------*/
/* inner 要素のスタイルを設定 */
.inner {
    overflow: hidden;  /* オーバーフローを隠す */
    max-width: 1400px;  /* 最大幅を設定 */
    padding: 50px 10%;  /* パディングを設定 */
}

/* 背景色（contentsとセットで使用するクラス） 
---------------------------------------------------------------------------*/
/* bg1 クラスのスタイルを設定 */
.bg1 {
    background: #fff;  /* 背景色を設定 */
    color: #1c315a !important;  /* 文字色を設定 */
}

/* bg2 クラスのスタイルを設定 */
.bg2 {
    background: #000 url(../images/bg2.jpg) no-repeat center center;  /* 背景画像を設定 */
    background: #000 url(../images/bg2.jpg) no-repeat center center / cover;  /* 背景画像をカバー */
    color: #fff !important;  /* 文字色を設定 */
}

/* bg2 クラス内のリンクのスタイルを設定 */
.bg2 a {color: #fff !important;}

/* bg_blue クラスのスタイルを設定 */
.bg_blue {
    background: #000 url(../images/bg_blue.jpg) no-repeat center center;  /* 背景画像を設定 */
    background: #000 url(../images/bg_blue.jpg) no-repeat center center / cover;  /* 背景画像をカバー */
    color: #fff !important;  /* 文字色を設定 */
}

/* bg_blue クラス内のリンクのスタイルを設定 */
.bg_blue a {color: #fff !important;}

/* contents クラス（見出しや段落のスタイル設定） 
---------------------------------------------------------------------------*/
/* contents クラス内の h2 要素のスタイルを設定 */
.contents h2 {
    clear: both;  /* フロートを解除 */
    margin-bottom: 30px;  /* 下マージンを設定 */
    font-size: 40px;  /* フォントサイズを設定 */
    text-align: center;  /* 中央寄せ */
    letter-spacing: 0.2em;  /* 文字間のスペースを設定 */
    line-height: 1.5;  /* 行間を設定 */
}

/* contents クラス内の h2 要素内の span 要素のスタイルを設定 */
.contents h2 span {
    display: block;  /* ブロック要素に設定 */
    font-size: 16px;  /* フォントサイズを設定 */
}

/* contents クラス内の h3 要素のスタイルを設定 */
.contents h3 {
    clear: both;  /* フロートを解除 */
    margin-bottom: 20px;  /* 下マージンを設定 */
    font-size: 20px;  /* フォントサイズを設定 */
    background: url(../images/line.png) no-repeat center bottom;  /* 背景画像を設定 */
    background: url(../images/line.png) no-repeat center bottom / 100% 8px;  /* 背景画像をカバー */
    padding: 0 10px;  /* パディングを設定 */
}

/* contents クラス内の p 要素のスタイルを設定 */
.contents p {
    padding: 0px 10px 30px;  /* パディングを設定 */
}

/* 連続する p 要素のマージンを設定 */
.contents p + p {
    margin-top: -10px;  /* 上マージンを設定 */
}

/* 連続する section 要素のマージンを設定 */
.contents section + section {
    margin-top: 50px;  /* 上マージンを設定 */
}

/* ギャラリー用リスト（画像リストのスタイル設定） 
---------------------------------------------------------------------------*/
/* list クラスのスタイルを設定 */
.list {
    width: 33%;  /* 幅を33%に設定 */
    float: left;  /* 左寄せフロート */
    background: #000;  /* 背景色を設定 */
}

/* list クラス内の画像リンクのスタイルを設定 */
.list a img {
    opacity: 0.5;  /* 透明度を設定 */
}

/* マウスオン時の画像透明度を設定 */
.list a:hover img {
    opacity: 1;  /* 透明度を設定 */
}

/* フッターの設定（背景画像やテキストのスタイル） 
---------------------------------------------------------------------------*/
/* footer 要素のスタイルを設定 */
footer {
    clear: both;  /* フロートを解除 */
    text-align: center;  /* 中央寄せ */
    background: #000 url(../images/bg_blue.jpg) no-repeat center center;  /* 背景画像を設定 */
    background: #000 url(../images/bg_blue.jpg) no-repeat center center / cover;  /* 背景画像をカバー */
    color: #fff;  /* 文字色を設定 */
    padding: 10px 0;  /* パディングを設定 */
}

/* footer 内のリンクのスタイルを設定 */
footer a {
    text-decoration: none;  /* 下線を消す設定 */
    color: #fff;  /* 文字色を設定 */
}

/* footer 内の .pr クラスのスタイルを設定 */
footer small {
    display: block;  /* ブロック要素に設定 */
    font-size: 12px;  /* フォントサイズを設定 */
}

/* 「更新情報・お知らせ」ブロック（詳細リストのスタイル設定）
---------------------------------------------------------------------------*/
/* #intro 要素内の dl 要素のスタイルを設定 */
#intro dl {
    padding: 0 10px;  /* パディングを設定 */
}

/* #intro 要素内の dt 要素のスタイルを設定 */
#intro dt {
    float: left;  /* 左寄せフロート */
    width: 9em;  /* 幅を設定 */
    letter-spacing: 0.1em;  /* 文字間のスペースを設定 */
}

/* #intro 要素内の dd 要素のスタイルを設定 */
#intro dd {
    padding-left: 9em;  /* 左パディングを設定 */
}

/* テーブル（ta1 クラス）のスタイル設定 
---------------------------------------------------------------------------*/
/* ta1 クラスのスタイルを設定 */
.ta1 {
    width: 100%;  /* 幅を設定 */
    margin: 0 auto 30px;  /* マージンを設定 */
}

/* ta1 クラス内のテーブルセルのスタイルを設定 */
.ta1, .ta1 td, .ta1 th {
    border: 1px solid #67574a;  /* ボーダーを設定 */
    padding: 10px 15px;  /* パディングを設定 */
    word-break: break-all;  /* 単語の折り返しを設定 */
}

/* ta1 クラス内のキャプションのスタイルを設定 */
.ta1 caption {
    border: 1px solid #67574a;  /* ボーダーを設定 */
    border-bottom: none;  /* 下ボーダーを無しに設定 */
    padding: 10px 15px;  /* パディングを設定 */
    background: rgba(255,255,255,0.3);  /* 背景色を設定 */
    text-align: left;  /* 左寄せ */
}

/* ta1 クラス内の th 要素のスタイルを設定 */
.ta1 th {
    width: 300px;  /* 幅を設定 */
    text-align: center;  /* 中央寄せ */
}

/* ta1 クラス内の td 要素のスタイルを設定 */
.ta1 td {
    text-align: center;  /* 中央寄せ */
}

/* ページトップへのリンクボタン（スクロール用リンク） 
---------------------------------------------------------------------------*/
/* スクロール表示の設定 */
.scroll-show {
    display: block;  /* ブロック要素に設定 */
}

/* スクロール用リンクのスタイルを設定 */
.scroll a {
    display: block;  /* ブロック要素に設定 */
    text-decoration: none;  /* 下線を消す設定 */
    text-align: center;  /* 中央寄せ */
    width: 50px;  /* 幅を設定 */
    line-height: 50px;  /* 行の高さを設定 */
    position: fixed;  /* 固定位置に設定 */
    right: 30px;  /* 右位置を設定 */
    bottom: 30px;  /* 下位置を設定 */
    color: #fff;  /* 文字色を設定 */
    background: rgba(0,0,0,0.4);  /* 背景色を設定 */
    border: 1px solid #fff;  /* ボーダーを設定 */
}

/* マウスオン時のスクロール用リンクのスタイルを設定 */
.scroll a:hover {
    background: rgba(0,0,0,0.8);  /* 背景色を設定 */
}

/* その他のスタイル（アイコンやマージン設定） 
---------------------------------------------------------------------------*/
/* .newicon クラスのスタイルを設定 */
.newicon {
    background: #F00;  /* 背景色を設定 */
    color: #FFF;  /* 文字色を設定 */
    font-size: 70%;  /* フォントサイズを設定 */
    line-height: 1.5;  /* 行間を設定 */
    padding: 2px 5px;  /* パディングを設定 */
    border-radius: 2px;  /* ボーダーの半径を設定 */
    margin: 0px 5px;  /* マージンを設定 */
    vertical-align: text-top;  /* 垂直位置を調整 */
}

/* .look クラスのスタイルを設定 */
.look {
    background: #c3b5a2;  /* 背景色を設定 */
    background: rgba(0,0,0,0.1);  /* 背景色を設定 */
    padding: 5px 10px;  /* パディングを設定 */
    border-radius: 4px;  /* ボーダーの半径を設定 */
}

/* マージン設定 */
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.clear {clear: both;}

/* ul 要素のリストスタイルを設定 */
ul.disc {
    padding: 0em 25px 15px;  /* パディングを設定 */
    list-style: disc;  /* リストスタイルを設定 */
}

/* .color1 クラスとそのリンクのスタイルを設定 */
.color1, .color1 a {
    color: #FF9800 !important;  /* 文字色を設定 */
}

/* .pr クラスのスタイルを設定 */
.pr {
    font-size: 10px;  /* フォントサイズを設定 */
}

/* 幅の設定 */
.wl {width: 96%;}
.ws {width: 50%;}

/* テキストの配置設定 */
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}

/* フロートの設定 */
.fl {float: left;}
.fr {float: right;}

/* フォントサイズの設定 */
.big1 {font-size: 40px;}
.mini1 {
    font-size: 11px;  /* フォントサイズを設定 */
    display: inline-block;  /* インラインブロック要素に設定 */
    line-height: 1.5;  /* 行間を設定 */
}

/* 表示設定 */
.sh {display: none;}

/* .left クラスのスタイルを設定 */
.left {
    float: left;  /* 左寄せフロート */
    width: auto;  /* 幅を自動設定 */
    margin: 10px 10px 20px 10px;  /* マージンを設定 */
}

/* .right クラスのスタイルを設定 */
.right {
    float: right;  /* 右寄せフロート */
    width: auto;  /* 幅を自動設定 */
    margin: 10px 10px 20px 10px;  /* マージンを設定 */
}

/* フロート解除の設定 */
.clear {clear: both;}
.clearleft {clear:left;}
.clearright {clear:right;}

/* Google Map の埋め込みスタイル設定 
---------------------------------------------------------------------------*/
/* ggmap クラスのスタイルを設定 */
.ggmap {
    position: relative;  /* 相対位置に設定 */
    padding-bottom: 56.25%;  /* 下パディングを設定 */
    padding-top: 30px;  /* 上パディングを設定 */
    height: 0;  /* 高さを0に設定 */
    overflow: hidden;  /* オーバーフローを隠す */
}

/* ggmap クラス内の iframe, object, embed 要素のスタイルを設定 */
.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;  /* 絶対位置に設定 */
    top: 0;  /* 上位置を設定 */
    left: 0;  /* 左位置を設定 */
    width: 100%;  /* 幅を100%に設定 */
    height: 100%;  /* 高さを100%に設定 */
}

/* メールフォームのスタイル設定 
---------------------------------------------------------------------------*/
/* mf_wrapper ID のスタイルを設定 */
div#mf_wrapper {
    width: 100%;  /* 幅を100%に設定 */
    text-align: left;  /* 左寄せ */
    margin: 0px auto 0px auto;  /* マージンを設定 */
}

/* mailform ID のスタイルを設定 */
form#mailform {
    padding: 5px;  /* パディングを設定 */
}

/* mailform クラスのスタイルを設定 */
table.mailform {
    width: 100%;  /* 幅を100%に設定 */
}

/* mailform クラスのテーブル行とセルのスタイルを設定 */
table.mailform tr th,
table.mailform tr td {
    text-align: left;  /* 左寄せ */
    font-weight: normal;  /* フォントウェイトをノーマルに設定 */
    font-size: 18px;  /* フォントサイズを設定 */
    border-bottom: solid 1px #FF9800;  /* 下ボーダーを設定 */
    padding: 7px 5px;  /* パディングを設定 */
}

/* mailform クラス内の th 要素のスタイルを設定 */
table.mailform tr th {
    width: 25%;  /* 幅を設定 */
}

/* mailform クラス内の textarea 要素のスタイルを設定 */
table.mailform tr td textarea {
    width: 100%;  /* 幅を100%に設定 */
    height: 120px;  /* 高さを設定 */
}

/* 画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
    /* inner クラスのパディングを再設定 */
    .inner {
        padding: 50px 3%;
    }

    /* 特定要素を非表示に設定 */
    body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
    .big1 {font-size: 20px;}  /* big1 クラスのフォントサイズを再設定 */
    .fl {float: none;}  /* fl クラスのフロートを解除 */
    .fr {float: none;}  /* fr クラスのフロートを解除 */
    .sh {display:block;}  /* sh クラスを表示に設定 */
    .pc {display:none;}  /* pc クラスを非表示に設定 */
}

/* 画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
    /* 全体の文字サイズ・行間を再設定 */
    body {
        font-size: 12px;  /* フォントサイズを設定 */
        line-height: 1.5;  /* 行間を設定 */
    }

    /* inner クラスのパディングを再設定 */
    .inner {
        padding: 30px 3%;
    }

    /* h2, h3, p 要素の余白・文字サイズを再設定 */
    h2 {
        margin-bottom: 20px;  /* 下マージンを設定 */
        font-size: 24px;  /* フォントサイズを設定 */
        letter-spacing: normal;  /* 文字間のスペースを通常に設定 */
    }
    h3 {
        margin-bottom: 10px;  /* 下マージンを設定 */
        font-size: 16px;  /* フォントサイズを設定 */
        padding-bottom: 5px;  /* 下パディングを設定 */
    }
    .contents p {
        padding: 0px 10px 20px;  /* パディングを設定 */
    }
    .contents section + section {
        margin-top: 20px;  /* 上マージンを設定 */
    }

    /* ta1 クラスのテーブルセルのパディングを再設定 */
    .ta1, .ta1 td, .ta1 th {
        padding: 5px;  /* パディングを設定 */
    }
    .ta1 th {
        width: 100px;  /* 幅を再設定 */
    }

    /* left, right クラスのスタイルを再設定 */
    .left,
    .right {
        float: none !important;  /* フロートを解除 */
        display: block !important;  /* ブロック要素に設定 */
        width: 100% !important;  /* 幅を100%に設定 */
        margin: 0 auto 15px auto !important;  /* マージンを設定 */
        text-align: center !important;  /* 中央寄せ */
    }
    .left img,
    .right img {
        display: block !important;  /* ブロック要素に設定 */
        margin: 0 auto !important;  /* マージンを設定 */
    }

    /* mailform クラスのテーブルスタイルを再設定 */
    table.mailform {
        width: 94% !important;  /* 幅を再設定 */
        margin: 0 auto !important;  /* マージンを設定 */
    }
    table.mailform tr {
        display: block !important;  /* ブロック要素に設定 */
        margin-bottom: 15px;  /* 下マージンを設定 */
    }
    table.mailform tr th,
    table.mailform tr td {
        display: block !important;  /* ブロック要素に設定 */
        width: 100% !important;  /* 幅を100%に設定 */
        text-align: left !important;  /* 左寄せ */
        margin: 0;  /* マージンをリセット */
        padding: 5px 0;  /* パディングを設定 */
        border-bottom: none !important;  /* 下ボーダーを無しに設定 */
    }

    /* mailform クラス内の入力要素のスタイルを再設定 */
    table.mailform tr td input:not([type="checkbox"]):not([type="radio"]),
    table.mailform tr td textarea {
        width: 100% !important;  /* 幅を100%に設定 */
        box-sizing: border-box;  /* ボックスサイズを設定 */
    }

    /* mailform クラス内のチェックボックスとラジオボタンのスタイルを再設定 */
    table.mailform tr td input[type="checkbox"],
    table.mailform tr td input[type="radio"] {
        width: auto !important;  /* 幅を自動設定 */
        display: inline-block !important;  /* インラインブロック要素に設定 */
        margin-right: 5px !important;  /* 右マージンを設定 */
        vertical-align: middle !important;  /* 垂直位置を設定 */
    }

    /* その他のスタイルを再設定 */
    .ws, .wl {
        width: 94%;  /* 幅を再設定 */
    }
    .big1 {
        font-size: 16px;  /* フォントサイズを再設定 */
    }
}