﻿@charset "utf-8";


/* ====================================================================================================
   非表示設定
   ---------------------------------------------------------------------------------------------------- */
   
/* PC用 */
.pc_non { display:none !important; }


/* ====================================================================================================
   フレックスボックス
   ---------------------------------------------------------------------------------------------------- */
   
.flex                       { -webkit-display:flex; display:-ms-flexbox; display:flex; }
.flex.wrap                  { flex-wrap:wrap; }
.flex.between               { -webkit-justify-content:space-between; justify-content:space-between; }


/* ====================================================================================================
   共通設定
   ---------------------------------------------------------------------------------------------------- */

/* タイトル */
#topics .atl_txt h1:first-child,
#topics .atl_txt h2:first-child,
#topics .atl_txt h3:first-child,
#topics .atl_txt h4:first-child { margin-top:0; }
.atl_txt h1, .atl_txt h2,
.atl_txt h3, .atl_txt h4,
.ttl                        { position:relative; font-weight:bold; line-height:1.4em; text-align:justify; text-justify:inter-ideograph; letter-spacing:0.05em; }
.ttl span                   { font-size:13px; font-weight:normal; color:rgba(0,0,0,0.7); letter-spacing:0.1em; margin:0 0 0 10px; }
#topics .atl_txt h1, .ttl_a { font-size:26px; margin:50px 0 25px 0; padding: 16px 20px 10px 20px; color:#fff; background:#222; text-align:center !important; border-left:20px solid #000; border-right:20px solid #000; }
#topics .atl_txt h1, .ttl_a span { color:#fff; }
#topics .atl_txt h2, .ttl_b { font-size:26px; margin:40px 0 20px 0; padding: 12px 30px; color:#4b4b4b; background:#eaeaea; border-left:3px solid #252525; }
#topics .atl_txt h3, .ttl_c { font-size:24px; margin:40px 0 20px 0; padding:  5px 20px; color:#ffffff; background:#6e560f; text-align:center; -webkit-border-radius:30px; border-radius:30px; }
#topics .atl_txt h4, .ttl_d { font-size:24px; margin:40px 0 20px 0; padding:0 0 0 20px; color:#4b4b4b; }
#topics .atl_txt h4:before, .ttl_d:before { content:""; position:absolute; top:0; left:0; bottom:0; z-index:2; width:2px; height:calc(100% - 28px); margin:auto 0; background:#222; }
#topics .atl_txt h4:before, .ttl_d:before { height:calc(100% - 8px); }

/* h1：大 */  

/* 小タイトル */
.ttl_s                      { font-size: 28px; line-height:60px; font-weight:500; letter-spacing:0.05em; }
.ttl_s  span                { display:inline-block; margin-bottom:50px; border-bottom:1px solid #F30; font-weight:normal; font-family: "Times New Roman", Times, serif; }
.ttl_s.white                { color:#fff; }

/* マージン調整 */
.mg_0                       { margin:0 !important; }
.mg_t_0                     { margin-top:0px !important; }
.mg_b_0                     { margin-bottom:0px !important; }
.mg_t_25                    { margin-top:25px !important; }
.mg_b_25                    { margin-bottom:25px !important; }
.mg_t_35                    { margin-top:35px !important; }
.mg_b_35                    { margin-bottom:35px !important; }

/* アイコン */
p.icon                      { position:relative; background:url(#) no-repeat 0 5px; min-height:30px; line-height:1.5em; padding:5px 10px 5px 34px; margin:0 5px 0 0; display:block; -webkit-background-size:24px; background-size:24px; }
p.add                       { background-image:url(../../img/common/bk/add.svg); }
p.tel                       { background-image:url(../../img/common/etc/tel.svg); }
p.fax                       { background-image:url(../../img/common/bk/fax.svg); }
p.parking                   { background-image:url(../../img/common/bk/parking.svg); }
p.price                     { background-image:url(../../img/common/bk/price.svg); }
p.blank                     { background-image:url(../../img/common/bk/blank.svg); }
p.time                      { background-image:url(../../img/common/etc/time.svg); }
.icons                      { margin-bottom:1.5em; }

/* 3つタイルレイアウト */
.layout_tile3               { position:relative; margin:0px 0px 25px 0px; }
.layout_tile3 h1            { font-size:125%; color:rgba(0,0,0,1.0); font-weight:bold; margin:15px 0px 10px 0px; line-height:1.6em; text-align:center; }
.layout_tile3 h2            { font-size:116%; color:rgba(0,0,0,1.0); font-weight:normal; line-height:1.7em; }
.layout_tile3 img           { max-width:100%; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
.layout_tile3 li , 
.layout_tile3 div ,
.layout_tile3 article:nth-child(1)   { width:66.4%; float:left; }
.layout_tile3 article:nth-child(2)   { position:relative; width:31.6%; float:right; margin-bottom:2% }
.layout_tile3 article:nth-child(3)   { position:relative; width:31.6%; float:right; }
.layout_tile3 article:nth-child(4)   { clear:both; padding:2% 0px 0px 0px; }
.layout_tile3 article:nth-child(4) p { margin:0px 0px 0.5em 0px; }


/* ====================================================================================================
   動画 ※Youtube貼り付け
   ---------------------------------------------------------------------------------------------------- */
   
.youtube_if                 { position:relative; width:100%; padding-top:56.25%; margin:0 0 1.6em 0; }
.youtube_if iframe          { position:absolute; top:0; left:0; width:100%; height:100%; }


/* ====================================================================================================
   地図 ※Googleマップ貼り付け
   ---------------------------------------------------------------------------------------------------- */
   
.googlemap_if               { position:relative; width:100%; padding-top:56.25%; margin:0 0 1.6em 0; }
.googlemap_if iframe        { position:absolute; top:0; left:0; width:100%; height:100%; -webkit-border-radius:6px; border-radius:6px; }


 /* ====================================================================================================
   タブ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
.tab                        { margin:0 auto; padding:0 0 30px 0; }
.tab_switch                 { display:-webkit-box; display:-ms-flexbox; display:flex; margin-bottom:30px; }
.tab_switch li              { background:#49b430; color:#fff; position:relative; width:100%; padding:15px 5px; text-align:center; font-size:14px; line-height:20px; font-weight:bold; cursor:pointer; -webkit-transition:all .2s; transition:all .2s; }
.tab_switch li:first-child  { -webkit-border-radius:4px 0 0 0;  border-radius:4px 0 0 0; }
.tab_switch li:last-child   { -webkit-border-radius:0 4px 0 0;  border-radius:0 4px 0 0; }
.tab_switch li:hover        { background:#4b7e2e; }
.tab_switch li:before       { content:""; position:absolute; top:0; right:0; bottom:0; z-index:2; width:2px; height:calc(100% - 20px); margin:auto -1px auto 0; background:#cddec4 }
.tab_switch li:last-child:before { display:none; }
.tab_switch li.select       { background-color:#ff6400; color:#fff; }
.tab_switch li.select:after { content:""; position: absolute; bottom:-10px; left:50%; margin:0 0 0 -10px; width:0; height:0; border-right:10px solid transparent; border-top:10px solid #ff6400; border-left:10px solid transparent; -webkit-transition:all .2s; transition:all .2s; } 
.tab_switch li.select:hover { background-color:#e15800; color:#fff; }
.tab_switch li.select:hover:after { border-top:10px solid #e15800; }
.tab .hide                  { display:none; }


/* ====================================================================================================
   タグリスト
   ---------------------------------------------------------------------------------------------------- */

 /* 基本設定 */
.tag                        { -webkit-display:flex; display:flex; flex-wrap:wrap; margin:10px 0 1em; }
.tag li                     { overflow:hidden; }
.tag a                      { position:relative; float:left; width:auto; max-width:150px; margin:3px 6px 3px 0px; padding:0px 12px 0px 12px; font-size:13px; line-height:26px; font-weight:bold; text-align:center; color:#e9483c; display:block; border:2px solid #e9483c; white-space:nowrap; -webkit-border-radius:5px; border-radius:15px; }
.tag a:hover                { color:#fff; background:#e9483c; color:#fff; }
.tag a:hover:before         { color:#fff; }

/* 調整 */
.frame .tag                 { margin:10px 0 1em 12px; }
#col_side .tag              { margin-bottom:40px; }


/* ====================================================================================================
   枠（フレーム）
   ---------------------------------------------------------------------------------------------------- */

.frame                                   { padding:25px; border:3px solid #cddec4; background:#f2f9ee; margin-bottom:1em; -webkit-border-radius:4px; border-radius:4px; }
.frame p:last-child                      { margin-bottom:0; }

.frame.toggle                            { padding:0px; margin-bottom:10px; }
.frame.toggle .toggle_btn                { position:relative; width:90%; padding:10px 5%; border-bottom:1px solid rgba(0,0,0,0); text-align:center; font-size:108%; font-weight:normal; line-height:1.6em; cursor:pointer;  -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; }
.frame.toggle .toggle_btn:hover          { background:rgba(0,0,0,0.05); }
.frame.toggle .toggle_btn span:before    { content:""; position:absolute; top:50%; left:10px; width:20px; height:20px; z-index:2; margin:-10px 0px 0px  0px; background:#6c9; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; }  
.frame.toggle .toggle_btn:before         { content:""; position:absolute; top:50%; left:10px; width:20px; height: 2px; z-index:4; margin: -1px 0px 0px  0px; background:rgba(255,255,255,0.6); -webkit-transition:all 0.2s ease; transition:all 0.2s ease; }
.frame.toggle .toggle_btn:after          { content:""; position:absolute; top:50%; left:20px; width: 2px; height:20px; z-index:4; margin:-10px 0px 0px -1px; background:rgba(255,255,255,0.6); -webkit-transition:all 0.2s ease; transition:all 0.2s ease; }
.frame.toggle .toggle_box                { padding:40px; }

.frame.toggle .toggle_btn.on             { background:rgba(0,0,0,0.05); border-bottom:1px solid rgba(0,0,0,0.1); }
.frame.toggle .toggle_btn.on span:before { background:#c36; }
.frame.toggle .toggle_btn.on:before      { transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform:rotate(45deg); }
.frame.toggle .toggle_btn.on:after       { transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform:rotate(45deg); }


/* ====================================================================================================
   リンク：ボタン
   ---------------------------------------------------------------------------------------------------- */

/* 基本ボタン */
a.btn                     { position:relative; width:100%; margin:15px auto; font-size:14px; color:#000; background:#e9483c; font-weight:600; letter-spacing:0.05em; padding:0 15px 1px 15px; line-height:34px; position:relative; display:block; text-overflow:ellipsis; white-space:nowrap; font-family: 'Oswald', sans-serif; }
a.btn:hover               {  }


/* ====================================================================================================
   カラム・フロート設定
   ---------------------------------------------------------------------------------------------------- */

.col_left                 { float: left; width:48%; }
.col_right                { float:right; width:48%; }
.left                     { float: left; }
.right                    { float:right; }


/* ====================================================================================================
  イメージフロート
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
img.img_center ,
div.img_center            { max-width:100%; margin:30px auto 30px auto; display:block; text-align:center; }
img.img_center_s ,
div.img_center_s          { max-width: 50%; margin:30px auto 30px auto; display:block; text-align:center; }
img.img_left ,
div.img_left              { max-width: 48%; margin: 8px 35px 30px  0px; display:block; clear:both; float:left; }
img.img_right ,
div.img_right             { max-width: 48%; margin: 8px  0px 30px 35px; display:block; clear:both; float:right; }
.img_center p,
.img_right p,
.img_left p               { font-size:85% !important; color:#888 !important; margin-top:10px !important; }
.img_left p:last-child,
.img_right p:last-child   { margin-bottom:0; }
.img_left img,
.img_right img,
.img_center img,
.img_center_s img         { width:100%; }
.img_left .img_center,
.img_right .img_center    { margin:0 auto 10px auto; }
.img_left img,
.img_right img,
.img_center img,
img.img_left,
img.img_right,
img.img_center            { -webkit-border-radius:3px; border-radius:3px; }
p.caption                 { font-size:78% !important; color:#888 !important; margin:-18px 0 2.2em 0 !important; }


/* ====================================================================================================
   その他
   ---------------------------------------------------------------------------------------------------- */

hr                        { border:0; height:1px; margin:30px 0px; background:#666; }
hr.size_s                 { margin:15px 0px; }
p.at                      { text-indent:-1em !important; padding-left:1em !important; }
p.read                    { font-size:18px; line-height:1.8em; font-weight:500; color:#444; letter-spacing:0.05em; }

