@charset "utf-8";

/*PC・タブレット・スマホ共通設定*/
body {
    margin: 0px;
    padding: 0px;
    color: #666; /*全体の文字色*/
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 15px; /*文字サイズ*/
    line-height: 2; /*行間*/
    -webkit-text-size-adjust: none;
    background: #fff; /*背景色*/
}

h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, form, figure, form {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
}

ul {
    list-style-type: none;
}

ol {
    padding-left: 40px;
    padding-bottom: 15px;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 三枚画像高さ揃え用 */
.triple-figures { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.triple-figures figure { flex:1 1 0; margin:0; background:#fff; text-align:center; box-sizing:border-box; display:flex; flex-direction:column; }
/* 画像は統一アスペクト比で最大高さを制限。大きすぎる画像でレイアウト崩れを防止 */
.triple-figures figure img {
    width:100%;
    height:auto; /* 自然な縦横比を維持 */
    max-height:440px; /* 高さを従来(220px)の2倍に拡張 */
    display:block;
    object-fit:contain; /* 全体を収め切り取り防止 */
    background:#fff; /* 余白が出る場合の背景 */
}
.triple-figures figure figcaption { font-size:0.9em; color:#666; margin-top:6px; }
@media (max-width:900px){
    .triple-figures { flex-direction:column; }
    .triple-figures figure img { max-height:520px; }
}

/* 2枚横並びのギャラリー (TFECなどのイベントで使用) */
.side-by-side {
    display:flex;
    gap:12px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:16px;
}
.side-by-side figure {
    margin:0;
    flex:1 1 calc(50% - 6px);
    text-align:center;
}
.side-by-side img {
    width:80%;
    height:auto;
    display:block;
    border:1px solid #ddd;
    margin:0 auto;
}
@media (max-width:600px){
    .side-by-side { flex-direction:column; }
    .side-by-side figure { flex:1 1 100%; }
}

/* 2枚組み画像（集合写真 + コーヒーメーカー） */
.imagepair {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}
.imagepair .imagebox {
    flex:1 1 420px; /* 最小幅の目安。幅が足りない時は折り返し */
    max-width:680px;
    background:#fff;
    box-sizing:border-box;
    text-align:center;
}
.imagepair .imagebox img {
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}
.imagepair { --pair-img-h: auto; }
/* 2枚目（コーヒーメーカー）を集合写真の高さに合わせる */
.imagepair .imagebox img.pair-match-height {
    height: var(--pair-img-h);
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.imagepair .caption {
    display:block;
    margin-top:6px;
}
@media (max-width:900px){
    .imagepair .imagebox { flex-basis:100%; max-width:none; }
    /* モバイルでは高さ同期を解除して自然な表示に戻す */
    .imagepair .imagebox img.pair-match-height { height:auto; width:100%; }
}

table {
    border-collapse: collapse;
    font-size: 100%;
    border-spacing: 0;
}

iframe {
    width: 100%;
}

/*リンク（全般）設定*/
a {
    color: #666; /*リンクテキストの色*/
    -webkit-transition: 0.5s; /*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
    transition: 0.5s; /*同上*/
}

a:hover {
    color: #0E426D; /*マウスオン時の文字色 (FEDL Blue) */
    text-decoration: none; /*マウスオン時にリンクの下線を消す設定*/
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
    /*background: #0E426D;	/*背景色*/
    background: #FFFFFF; /*背景色*/
}

header .inner {
    height: 180px; /*ヘッダーの高さ*/
    position: relative;
}

/*ロゴ画像*/
#logo img {
    width: auto;
    max-width: 450px;
    max-height: 140px;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

/*ヘッダー右側のアイコン類*/
#h-nav {
    position: absolute;
    right: 3%; /*右から3%の場所に配置*/
    top: 34px; /*上から34pxの場所に配置*/
}

/*ヘッダー右側のアイコン類（１個あたり）*/
#h-nav li {
    float: left;
    margin-left: 20px; /*アイコン間の余白*/
}

/*ヘッダー右側のアイコン類（画像）*/
#h-nav li img {
    display: block;
    width: 30px; /*幅*/
    height: 30px; /*高さ*/
    background: #fff; /*背景色*/
    border-radius: 4px; /*角丸のサイズ。50%にすると正円になる。*/
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar {
    background: #0E426D; /*背景色 (FEDL Blue) */
    overflow: hidden;
}

/*メニュー１個あたりの設定*/
#menubar li {
    float: left;
    margin-left: 3%;
    overflow: hidden;
    letter-spacing: 0.2em;
}

#menubar li a {
    text-decoration: none;
    display: block;
    color: #fff; /*文字色*/
    line-height: 46px; /*高さ。ここを変える場合、fixmenu.cssの「body.is-fixed header」のサイズも変える。*/
    padding-top: 4px; /*上にあける余白。下の「border-bottom」のサイズと合わせる。*/
    padding-left: 0.2em; /*上のletter-spacingの数字と揃える*/
}

/*下線のアニメーション設定*/
#menubar li::after {
    -webkit-transition: 0.5s;
    transition: 0.5s; /*0.5秒かけてアニメーションを実行する。*/
    content: "";
    display: block;
    border-bottom: 4px solid #ffffff; /*下線の幅、線種、色*/
    position: relative;
    left: 0px;
    bottom: -4px; /*bottomのサイズは上のborder-bottomの数字と合わせる。マイナス記号は残したまま。*/
}

#menubar li:hover::after, #menubar li.current::after {
    bottom: 0px;
}

/* スライドショーの回り込み解除 */
#mainimg {
    clear: both;
}

/*小さい端末用(画面幅800px以下)メニューを表示させない*/
#menubar-s {
    display: none;
}

/*３本バーアイコンを表示させない*/
#menubar_hdr {
    display: none;
}

/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
    clear: both;
    margin: 3%; /*ボックスの外側にとる余白*/
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
/*メインコンテンツブロック*/
#main {
    float: right; /*右に回り込み*/
    width: 72%; /*ボックス幅*/
}

/*メインコンテンツブロック（１カラム時）*/
.c1 #main {
    float: none;
    width: 100%;
}

/*メインコンテンツのh2タグ*/
#main h2 {
    clear: both;
    margin-bottom: 20px;
    padding: 8px 20px; /*上下、左右への余白*/
    background: #fff; /*背景色*/
    color: #0E426D; /*文字色 (FEDL Blue) */
    border-bottom: 3px solid #00826D; /*下線の幅、線種、色 (少し明るめのアクセント) */
}

/*#main h2::first-letter {
	border-bottom: 3px solid #0E426D;	/*左側のアクセントラインの幅、線種、色*/
/*padding-left: 10px;
}*/
/*メインコンテンツのh3タグ*/
#main h3 {
    clear: both;
    margin-bottom: 20px;
    padding: 6px 20px; /*上下、左右への余白*/
    border: 1px solid #fff; /*枠線の幅、線種、色*/
    background: #fff; /*背景色*/
}

#main h3::first-letter {
    border-left: 3px solid #0E426D; /*左側のアクセントラインの幅、線種、色*/
    padding-left: 10px;
}

/*メインコンテンツの段落タグ*/
#main p {
    padding: 0px 20px 20px; /*上、左右、下への余白*/
}

#main h2 + p,
#main h3 + p {
    margin-top: -10px;
}

/*What new
---------------------------------------------------------------------------*/
#whatnew li {
    overflow: hidden;
}

/*小さい端末用(画面幅800px以下)メニューを表示させない*/
#whatnew-s {
    display: none;
}

/*SERVICEページ
---------------------------------------------------------------------------*/
/*各ボックスの設定（共通）*/
.list {
    background: #fff; /*背景色*/
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
    margin-bottom: 20px;
}

.list a {
    text-decoration: none;
    display: block;
    overflow: hidden;
}

/*画像の設定*/
.list img.img {
    float: left;
    width: 25%; /*画像の幅。ここを変更する場合は、下の.list .textのmargin-leftの数字も調整する。*/
}

/*右側のテキスト欄*/
.list .text {
    padding: 2% 60px 2% 2%; /*上、右、下、左への余白*/
    margin-left: 27%; /*左の画像とのバランスをとって設定*/
}

/*h4見出しタグの設定*/
.list h4 {
    color: #0E426D; /*文字色*/
}

/*pタグの設定*/
.list p {
    padding: 0 !important;
}

/*３カラムタイプのボックス設定*/
.list.c3 {
    width: 31%; /*ボックスの幅*/
    margin: 0 1% 20px; /*上、左右、下へのボックスの外側にとる余白*/
    float: left;
    height: 300px; /*高さ。下の「.list.c3 a」のheightと合わせる。*/
    text-align: center; /*文字をセンタリング*/
}

.list.c3 a {
    height: 300px;
}

/*３カラムタイプの画像設定*/
.list.c3 img.img {
    float: none;
    width: 100%;
}

.list.c3 .text {
    padding: 0;
    margin-left: 0;
}

/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list a::before {
    content: "→"; /*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
    position: absolute;
    right: 20px; /*ボックスの右から20pxの場所に配置*/
    top: 20px; /*ボックスの上から20pxの場所に配置*/
    background: #000; /*背景色（古いブラウザ用）*/
    background: rgba(0, 0, 0, 0.5); /*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
    color: #fff; /*文字色*/
    border: 1px solid #fff; /*枠線の幅、線種、色*/
    border-radius: 4px; /*角丸のサイズ*/
    width: 30px; /*幅*/
    line-height: 30px; /*高さ*/
    text-align: center;
    -webkit-transition: 0.5s; /*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
    transition: 0.5s; /*同上*/
}

/*マウスオン時の「→」マーク*/
.list a:hover::before {
    background: #000; /*背景色*/
    width: 40px; /*幅*/
    line-height: 40px; /*高さ*/
}

/*１カラムでページを表示時の３カラムボックスの高さ*/
.c1 .list.c3,
.c1 .list.c3 a {
    height: 400px;
}

/*一覧ページの各物件ボックス内のテーブル（CMS用）
---------------------------------------------------------------------------*/
.list table {
    font-size: 10px; /*文字サイズ*/
    width: 100%;
}

.list table,
.list table td,
.list table th {
    border: 1px solid #ccc; /*枠線の幅、線種、色*/
}

.list table td,
.list table th {
    padding: 1%; /*テーブル内の余白*/
}

/*色のついた見出しブロック*/
.list table th {
    width: 18%; /*幅*/
    background: #f5f5f5; /*背景色*/
    text-align: center; /*文字をセンタリング*/
    font-weight: normal; /*デフォルトの太字を標準にする設定*/
}

/*白い説明用ブロック*/
.list table td {
    width: 30%; /*幅*/
}

/*サブコンテンツ
---------------------------------------------------------------------------*/
/*メインコンテンツブロック*/
#sub {
    float: left; /*左に回り込み*/
    width: 24%; /*幅*/
    background: #fff; /*背景色*/
}

/*メインコンテンツブロック（１カラム時）*/
.c1 #sub {
    display: none; /*非表示にする設定*/
}

/*subコンテンツ内のh2タグ設定*/
#sub h2 {
    padding: 40px 15px; /*上下左右へのボックス内の余白*/
    font-weight: normal; /*hタグのデフォルトの太字を標準にする設定*/
    letter-spacing: 0.2em; /*文字間隔を少し広くとる設定*/
    font-size: 28px; /*文字サイズ*/
    line-height: 1.5; /*行間*/
    color: #000; /*文字色*/
    background: #fff; /*背景色（サンプルテンプレートでは以下のキーボードやグリーンの背景画像とともに設定しているので注意）*/
    border-top: 1px solid #ccc; /*上の線の幅、線種、色*/
    border-bottom: 1px solid #ccc; /*下の線の幅、線種、色*/
}

/*navの直後にnavとh2が続いた場合と、navタグの直後にh2が続いた場合に、h2の上のラインを消す設定*/
#sub nav + nav h2,
#sub nav + h2 {
    border-top: none;
}

/*subコンテンツ内のh2タグ内のspanタグ設定*/
#sub h2 span {
    display: block;
    font-size: 13px; /*文字サイズ*/
    letter-spacing: normal; /*文字間隔を標準に戻す設定*/
}

/*bg1背景（キーボード）*/
#sub h2.bg1 {
    background: #fff url(../images/bg1.png) no-repeat right center; /*背景色、背景画像読み込み、rightは右寄せ、center上下の中央という意味*/
}

/*bg2背景（グリーン）*/
#sub h2.bg2 {
    background: #fff url(../images/bg2.png) no-repeat right center; /*背景色、背景画像読み込み、rightは右寄せ、center上下の中央という意味*/
}

/*subコンテンツ内のpタグ設定*/
#sub p {
    padding: 15px;
}

/*サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/*メニュー全体の設定*/
#sub ul.submenu {
    border-top: 1px solid #ccc; /*上の線の幅、線種、色*/
}

/*h2タグの直後にsubmenuが入った場合にsubmenuの上のラインを消す設定*/
#sub h2 + ul.submenu {
    border-top: none;
}

/*メニュー１個ごとの設定*/
#sub ul.submenu li a {
    text-decoration: none;
    display: block;
    padding: 15px; /*メニュー内の余白*/
    border-bottom: 1px solid #ccc; /*下の線の幅、線種、色*/
}

/*マウスオン時*/
#sub ul.submenu li a:hover {
    background: #999; /*背景色*/
    color: #fff; /*文字色*/
}

/*「>」マーク*/
#sub ul.submenu li a::before {
    display: block;
    float: right; /*右側に配置*/
    content: ">"; /*このテキストを表示させる。変更してもOKですが機種依存文字は使わないように。*/
    color: #999; /*文字色*/
}

/*マウスオン時の「>」マーク*/
#sub ul.submenu li a:hover::before {
    color: #fff; /*文字色*/
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
    clear: both;
}

#pagetop a {
    text-decoration: none;
    text-align: center;
    display: block;
    float: right;
    margin-right: 3%;
    color: #FFF; /*文字色*/
    font-size: 20px; /*文字サイズ*/
    padding: 0px 30px; /*上下、左右へのボックス内余白*/
    background: #0E426D; /*背景色*/
    border-radius: 4px 4px 0px 0px; /*角丸のサイズ。左上、右上、右下、左下。*/
}

/*マウスオン時*/
#pagetop a:hover {
    background: #999; /*背景色*/
    color: #FFF; /*文字色*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
    clear: both;
    background: #fff; /*背景色*/
    color: #ccc; /*文字色*/
    text-align: center;
}

footer a {
    color: #ccc;
    text-decoration: none;
}

footer a:hover {
    color: #ccc;
}

footer .pr {
    display: block;
    font-size: 80%;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
    padding-left: 15px;
    margin-bottom: 15px;
    height: 110px; /*高さ*/
    overflow: auto; /*高さの設定を超えるとスクロールが自動で出る設定。全部表示させていたいならこの行と上の行を削除。*/
}

/*日付設定*/
#new dt {
    font-weight: bold; /*太字にする設定。標準がいいならこの行削除。*/
    float: left;
    width: 8em;
}

/*記事設定*/
#new dd {
    padding-left: 8em;
}

/*よく頂く質問ページ
---------------------------------------------------------------------------*/
/*ブロック全体*/
.faq {
    padding: 0px 15px; /*上下、左右への余白*/
}

/*質問の設定*/
.faq dt {
    color: #0E426D; /*文字色*/
    font-weight: bold; /*太字*/
    padding-top: 15px;
}

.faq dt a {
    color: #1a4ef7;
}

/*回答の設定*/
.faq dd {
    border-bottom: 1px solid #CCC; /*下線の幅、線種、色*/
    overflow: hidden;
    padding-bottom: 15px;
}

/*一覧ページのボックス右下のオプションマーク
（CMSの場合は管理ページの「オプション1」～のプルダウンと、setup.phpの「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
.option1 {
    font-size: 10px;
    color: #FFF;
    background: #F00;
    text-align: center;
    display: block;
    width: 120px;
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-transform: rotate(-45deg) translate(-35px);
    transform: rotate(-45deg) translate(-35px);
}

h2 span.option1 {
    width: auto;
    padding: 0px 5px;
    position: static;
    -webkit-transform: none;
    transform: none;
    display: inline-block;
}

.option2 {
    font-size: 10px;
    color: #FFF;
    background: #069;
    text-align: center;
    display: block;
    width: 120px;
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-transform: rotate(-45deg) translate(-35px);
    transform: rotate(-45deg) translate(-35px);
}

h2 span.option2 {
    width: auto;
    padding: 0px 5px;
    position: static;
    -webkit-transform: none;
    transform: none;
    display: inline-block;
}

/*テーブル ta1
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1 {
    width: 96%;
    margin: 0 2% 20px;
    background: #fff; /*背景色*/
}

.ta1, .ta1 td, .ta1 th {
    border: 1px solid #ccc; /*テーブルの枠線の幅、線種、色*/
    padding: 10px; /*ボックス内の余白*/
    word-break: break-all;
}

/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
    width: auto;
    text-align: left; /*左よせ*/
    background: #eee; /*背景色*/
}

/*ta1の左側ボックス*/
.ta1 th {
    width: 140px; /*幅*/
    text-align: center; /*センタリング*/
}

/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
    width: 100%;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
    background: #F00;
    color: #FFF;
    font-size: 70%;
    line-height: 1.5;
    padding: 0 5px;
    border-radius: 2px;
    margin: 0px 5px;
    display: inline-block;
    vertical-align: text-top
}

.newicon[hidden] {
    display: none;
}

/*その他
---------------------------------------------------------------------------*/
.look {
    color: #fff;
    background: #666;
    padding: 5px;
    border-radius: 4px;
}

.mb15, .mb1em {
    margin-bottom: 15px;
}

.clear {
    clear: both;
}

ul.disc {
    padding: 0em 25px 1em;
    list-style: disc;
}

.color1 {
    color: #0E426D;
}

.pr {
    font-size: 10px;
}

.wl {
    width: 96%;
}

.ws {
    width: 50%;
}

.c {
    text-align: center;
}

.r {
    text-align: right;
}

.l {
    text-align: left;
}

.fr {
    float: right;
    margin-left: 1%;
    margin-bottom: 15px;
    width: 45%;
}

.fl {
    float: left;
    margin-right: 1%;
    margin-bottom: 15px;
    width: 45%;
}

.big1 {
    font-size: 30px;
    letter-spacing: 0.2em;
}

.mini1 {
    font-size: 11px;
}

.sh {
    display: none;
}

.dn {
    display: none;
}

/*画面幅1200px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1200px) {
    /*SERVICEページ
    ---------------------------------------------------------------------------*/
    /*３カラムタイプのボックスの高さ*/
    .list.c3,
    .list.c3 a {
        height: 380px;
    }

    /*１カラムでページを表示時の３カラムボックスの幅*/
    .c1 .list.c3 {
        width: 23%;
    }
}

#whatnew, .whatnew {
    overflow-y: scroll;
    /*縦方向はスクロール可*/
    overflow-x: hidden;
    /*横方向はスクロール不可*/
    width: 100%;
}

@media screen and (max-width:1200px) {
    /*What new
    ---------------------------------------------------------------------------*/
    #whatnew-s {
        display: block;
        overflow: auto;
    }

    /*
    #whatnew-s figure {
        display: inline-block;
        align-items: center;

    }*/
    /*小さい端末用(画面幅801px以上)メニューを表示させない*/
    #whatnew, .whatnew {
        overflow-y: scroll;
        /*縦方向はスクロール可*/
        overflow-x: hidden;
        /*横方向はスクロール不可*/
        width: 100%;
        height: 200px;
    }
}

/*画面幅1600px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1600px) {
    /*SERVICEページ
    ---------------------------------------------------------------------------*/
    /*３カラムタイプのボックスの高さ*/
    .list.c3,
    .list.c3 a {
        height: 450px;
    }

    /*１カラムでページを表示時の３カラムボックスの幅*/
    .c1 .list.c3 {
        width: 18%;
    }

    /*共通*/
    .list.c3,
    .c1 .list.c3 {
        max-width: 400px; /*この幅以上には広がらないようにする*/
    }
}

#whatnew, .whatnew {
    overflow-y: scroll;
    /*縦方向はスクロール可*/
    overflow-x: hidden;
    /*横方向はスクロール不可*/
    width: 100%;
    height: 200px;
}

@media screen and (min-width: 901px) {
    figure {
        float: left;
        text-align: center;
    }
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px) {
    header {
        /*background: #0E426D;	/*背景色*/
        background: #FFFFFF; /*背景色*/
    }

    header .inner {
        height: 100px; /*ヘッダーの高さ*/
        position: relative;
    }

    /*ヘッダー（ロゴが入った最上段のブロック）
    ---------------------------------------------------------------------------*/
    /*ロゴ画像*/
    #logo img {
        width: 350px; /*画像幅*/
    }

    /*ヘッダー（ロゴが入った最上段のブロック）
    ---------------------------------------------------------------------------*/
    /*ヘッダー右側のアイコン類*/
    #h-nav {
        right: 20%; /*右から20%の場所に配置*/
    }

    /*メインメニュー
    ---------------------------------------------------------------------------*/
    /*メニューブロックの設定*/
    #menubar-s {
        display: block; /*小さい端末用(画面幅800px以下)メニューを非表示から表示に切り替える*/
        background: #0E426D;
        overflow: hidden;
    }

    /*メニュー１個あたりの設定*/
    #menubar-s li {
        float: left;
        width: 50%; /*幅*/
    }

    #menubar-s li a {
        text-decoration: none;
        display: block;
        text-align: center;
        line-height: 50px; /*行間（高さ）*/
        color: #fff;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
    }

    #menubar-s li:nth-child(even) a {
        border-right: none;
    }

    /*大きな端末用(画面幅801px以上)メニューを非表示にする*/
    #menubar {
        display: none;
    }

    /*３本バーアイコン設定
    ---------------------------------------------------------------------------*/
    /*３本バーブロック*/
    #menubar_hdr {
        display: block;
        z-index: 4;
        position: absolute;
        top: 25px; /*上から25pxの場所に配置*/
        right: 3%; /*右から3%の場所に配置*/
        width: 30px; /*幅*/
        border: 1px solid #0E426D; /*枠線の幅、線種、色*/
        padding: 12px 10px 5px; /*上、左右、下へのボックス内余白*/
    }

    #top #menubar_hdr {
        border: 1px solid #0E426D; /*トップページでの枠線の幅、線種、色*/
    }

    /*３本のバー（1本あたり）*/
    #menubar_hdr span {
        display: block;
        border-top: 3px solid #0E426D; /*枠線の幅、線種、色*/
        margin-bottom: 7px; /*バー同士の余白*/
    }

    #top #menubar_hdr span {
        border-top: 3px solid #0E426D; /*トップページでの枠線の幅、線種、色*/
    }

    /*main,subコンテンツ
    ---------------------------------------------------------------------------*/
    #main, #sub {
        float: none;
        width: auto;
    }

    /*トップページ内「更新情報・お知らせ」ブロック
    ---------------------------------------------------------------------------*/
    section#new h2.open {
        background: #0E426D url(../images/btn_minus.png) no-repeat right center/34px 34px;
    }

    section#new h2.close {
        background: #0E426D url(../images/btn_plus.png) no-repeat right center/34px 34px;
    }

    /*その他
    ---------------------------------------------------------------------------*/
    body.s-n #sub {
        display: none;
    }

    figure {
        float: bottom;
        text-align: center;
    }
}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px) {
    header {
        /*background: #0E426D;	/*背景色*/
        background: #FFFFFF; /*背景色*/
    }

    header .inner {
        height: 100px; /*ヘッダーの高さ*/
        position: relative;
    }

    /*ヘッダー（ロゴが入った最上段のブロック）
    ---------------------------------------------------------------------------*/
    /*ロゴ画像*/
    #logo img {
        width: 300px; /*画像幅*/
    }
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px) {
    header {
        /*background: #0E426D;	/*背景色*/
        background: #FFFFFF; /*背景色*/
    }

    header .inner {
        height: 100px; /*ヘッダーの高さ*/
        position: relative;
    }

    /*ヘッダー（ロゴが入った最上段のブロック）
    ---------------------------------------------------------------------------*/
    /*ロゴ画像*/
    #logo img {
        width: 300px; /*画像幅*/
        left: 5%; /*左から5%の場所に配置*/
        top: 5px;
    }

    /*ヘッダー右側のアイコン類*/
    #h-nav {
        display: none;
        right: 20%; /*左から0pxの場所に配置*/
        top: 40px; /*上から55pxの場所に配置*/
    }

    /*メインメニュー
    ---------------------------------------------------------------------------*/
    /*メニュー１個あたりの設定*/
    #menubar-s li {
        float: none;
        width: 100%;
    }

    #menubar-s li a {
        border-right: none;
    }

    /*SERVICEページ
    ---------------------------------------------------------------------------*/
    /*画像の設定*/
    .list img.img {
        float: none;
        width: 100%;
    }

    /*右側のテキスト欄*/
    .list .text {
        padding: 2%;
        margin-left: 0;
    }

    /*３カラムタイプのボックス設定*/
    .list.c3 {
        width: auto;
        margin: 0 0 20px;
        float: none;
        height: auto;
    }

    .list.c3 a {
        height: auto;
    }

    /*テーブル
    ---------------------------------------------------------------------------*/
    /*テーブル内の左側*/
    .ta1 th {
        width: 90px;
        padding: 5px;
    }

    /*テーブル内の右側*/
    .ta1 td {
        width: auto;
        padding: 5px;
    }

    /*その他
    ---------------------------------------------------------------------------*/
    .ws, .wl {
        width: 95%;
    }

    .fr, .fl {
        float: none;
        margin: 0;
        margin-bottom: 10px;
        width: 100%;
    }

    .sh {
        display: block;
    }

    .pc {
        display: none;
    }
}