﻿@charset "utf-8";


/* ====================================================================================================
   非表示設定
   ---------------------------------------------------------------------------------------------------- */

.pc_non                                   { display:none !important; }


/* ====================================================================================================
   フレックスボックス
   ---------------------------------------------------------------------------------------------------- */

.flex                                     { display:flex; }
.flex.wrap,
.flex._wrap                               { flex-wrap:wrap; }
.flex.between, 
.flex._between                            { justify-content:space-between; }


/* ====================================================================================================
   フェード
   ---------------------------------------------------------------------------------------------------- */

._fade                                    { opacity:0; visibility:hidden; transition:1.2s 0.4s ease; transform:translateY(30px); }
._fade._fade_02                           { transition-delay:0.6s; }
._fade._fade_03                           { transition-delay:0.8s; }
._fade._fade_04                           { transition-delay:1.0s; }
._fade._fade_05                           { transition-delay:1.2s; }
._fade._fade_06                           { transition-delay:1.4s; }
._fade._fade_07                           { transition-delay:1.6s; }
._fade._fade_08                           { transition-delay:1.8s; }
._fade._fade_09                           { transition-delay:2.0s; }
._fade._fade_10                           { transition-delay:2.2s; }
._fade._fade_11                           { transition-delay:2.4s; }
._fade._fade_12                           { transition-delay:2.6s; }
._fade._fade_13                           { transition-delay:2.8s; }
._fade._fade_14                           { transition-delay:3.0s; }
._fade._fade_15                           { transition-delay:3.2s; }
._fade._fade_16                           { transition-delay:3.4s; }
._fade._fade_17                           { transition-delay:3.6s; }
._fade._fade_18                           { transition-delay:3.8s; }
._fade._fade_19                           { transition-delay:4.0s; }
._fade._fade_20                           { transition-delay:4.2s; }
._fade._fade_21                           { transition-delay:4.4s; }
._fade._fade_22                           { transition-delay:4.6s; }
._fade._fade_23                           { transition-delay:4.8s; }
._fade._fade_24                           { transition-delay:5.0s; }
._fade._fade_25                           { transition-delay:5.2s; }
._fade._fade_26                           { transition-delay:5.4s; }
._fade._fade_27                           { transition-delay:5.6s; }
._fade._fade_28                           { transition-delay:5.8s; }
._fade._fade_29                           { transition-delay:6.0s; }
._fade._fade_30                           { transition-delay:6.2s; }
._active                                  { opacity:1; visibility:visible; transform:translateY(0); }


/* ====================================================================================================
   共通設定
   ---------------------------------------------------------------------------------------------------- */

/* タイトル */
.ttl                                      { position:relative; font-weight:bold; color:#000; line-height:1.4em; letter-spacing:0.05em; font-feature-settings:"palt"; text-align:justify; text-justify:inter-ideograph; letter-spacing:0.05em; }
.atl_txt h1, .ttl_a                       { font-size:1.80rem; margin:0 0 40px 0; padding:15px  0px 15px  0px; }
.atl_txt h2, .ttl_b                       { font-size:1.40rem; margin:0 0 40px 0; padding:14px  0px 14px  0px; letter-spacing:0.2em; border-top:1px solid #eee9dd; border-bottom:1px solid #eee9dd; }
.atl_txt h3, .ttl_c                       { font-size:1.05rem; margin:0 0 25px 0; padding:10px 15px 10px 15px; }
.atl_txt h4, .ttl_d                       { font-size:1.20rem; margin:0 0 25px 0; padding: 0px  0px  0px  0px; }
.atl_txt h1 em,
.atl_txt h2 em,
.atl_txt h3 em,
.atl_txt h4 em, .ttl em                   { font-style:normal; font-weight:900; font-family: 'Lato', sans-serif; margin:0 15px 0 0; }
.atl_txt h1 span,
.atl_txt h2 span,
.atl_txt h3 span,
.atl_txt h4 span, .ttl span               { font-size:0.7rem; letter-spacing:0.05em; }

/* タイトル：H3 */
.atl_txt h3, .ttl_c                       { background:#ededed; border-radius:5px; position:relative; }
.atl_txt h3::before, .ttl_c::before       { content:""; width:0; height:0; position:absolute; top:100%; left:32px; z-index:2; border-right:7px solid transparent; border-top:7px solid #ededed; border-left:7px solid transparent; }

/* フレーム内の場合 */ 
.frame .ttl_c,
.atl_txt .frame h3                        { display: inline-block;　}

/* タイトル：大 */  
.ttl_l                                    { width:100%; padding:0 0 30px 0; color:#000; }
.ttl_l strong                             { display:block; font-size:3.6rem; line-height:1.3; font-weight: 400; letter-spacing:0.04em; white-space:nowrap; font-family: 'Cormorant Garamond', serif; }
.ttl_l span                               { display:block; font-size:0.9rem; line-height:1.3; font-weight:bold; letter-spacing:0.10em; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }
.ttl_l._center                            { text-align:center; }

/* タイトル：大：白 */ 
.ttl_l._wt                                { color:#fff; }

/* タイトル：小 */ 
.ttl_s                                    { position:relative; font-size:1.0rem; line-height:1.2; letter-spacing:0.05em; margin:0 0 25px; font-weight:bold; display:inline-block; color:#000; }
.ttl_s._center                            { text-align:center; }

/* タイトル：アイコン付 */ 
p.icon                                    { width:100%; margin-bottom:15px; padding:2px 0 2px 40px; font-size:1.05rem; line-height:1.3; font-weight:500; letter-spacing:0.02em; background:url(#) no-repeat left 0; background-size:24px; }
p.icon._tel                               { background-image:url(../../img/common/bk/tel.svg); }
p.icon._time                              { background-image:url(../../img/common/bk/time.svg); }

/* マージン調整 */
._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_50                                 { margin-top:50px !important; }
._mg_b_50                                 { margin-bottom:50px !important; }

/* 余白調整 */
._pd_0                                    { padding:0 !important; }
._pd_t_0                                  { padding-top:0px !important; }
._pd_b_0                                  { padding-bottom:0px !important; }
._pd_t_25                                 { padding-top:25px !important; }
._pd_b_25                                 { padding-bottom:25px !important; }
._pd_t_50                                 { padding-top:50px !important; }
._pd_b_50                                 { padding-bottom:50px !important; }

/* PDFリンク */
p.pdf                                     { margin:15px 0; padding:5px 0 5px 30px; line-height:1.2; background:url(../../img/common/etc/pdf.svg) no-repeat left 3px; background-size:25px; }
p.pdf a                                   { font-size:0.7rem; }
p.pdf a strong                            { font-size:1.1rem; margin-right:0.3em; }

/* テキストリンク */
a.link                                    { font-weight:bold; color:#ab9353; text-decoration:underline; padding:0 20px 0 0; background:url(../../img/common/bk/next.svg) no-repeat right -2px center; background-size:18px; }
a.link._blank                             { background-image:url(../../img/common/bk/blank.svg); }


/* ====================================================================================================
   リンク：ボタン
   ---------------------------------------------------------------------------------------------------- */

/* 基本ボタン */
a.btn                                     { position:relative; display:flex; justify-content:center; align-items:center; min-height:44px; margin:0 auto 30px auto; padding:10px; font-size:0.9rem; line-height:1.4; font-weight:bold; letter-spacing:0.1em; text-align:center; color:#ab9353; background:#transparent; border:2px solid #ab9353; border-radius:4px; transition:.3s; }
a.btn:after                               { content:""; display:inline-block; width:18px; height:18px; margin:0 -10px 0 5px; background:url(../../img/common/bk/next.svg) no-repeat center center; background-size:16px; transition:.3s; }
a.btn:hover                               { color:#73551b; background-color:rgba(171,147,83,0.1); border-color:#73551b; }
a.btn:hover:after                         { filter:brightness(0.7) contrast(1.5); }
a.btn._radius                             { border-radius:22px; }

/* ボタンサイズ */
a.btn._l                                  { min-height:100px; font-size:1.4rem; }
a.btn._l::after                           { width:36px; height:36px; background-size:cover; }
a.btn._m                                  { width:50%; max-width:600px; min-width:300px; font-size:1.2rem; }
a.btn._s                                  { width:25%; max-width:300px; min-width:150px; }
a.btn._ss                                 { width:auto; height:30px; min-height:30px; border:none; background:#eee9dd; font-size:0.9re,; line-height:30px; font-weight:normal; padding:0 15px; border-radius:15px; }
a.btn._ss._serif                          { font-weight:bold; letter-spacing:0.05em; font-family: 'Cormorant Garamond', serif; }
a.btn._left                               { margin:0 40px 30px 0; }
a.btn._right                              { margin:0 0 30px 40px; }

/* ボタン:L バリエーション */
a.btn._calendar::after                    { background-image:url(../../img/common/bk/calendar.svg); }
a.btn._plan::after                        { background-image:url(../../img/common/bk/plan.svg); }
a.btn._stay::after                        { background-image:url(../../img/common/bk/stay.svg); }
a.btn._login::after                       { background-image:url(../../img/common/bk/login.svg); }
a.btn._howto::after                       { background-image:url(../../img/common/bk/howto.svg); }

/* ボタン:moreタイプ */
a.btn._more                               { max-height:30px; padding:0 0 0 50px; font-size:0.9rem; line-height:1.4; font-weight:bold; letter-spacing:0.1em; text-decoration:underline; color:#ab9353; background:none; border:none; justify-content:left; align-items:center; }
a.btn._more::after                        { display:none; }
a.btn._more::before                       { content:""; position:absolute; z-index:2; display:block; top:0; left:-8px; bottom:0; width:40px; height:40px; margin:auto 0; background:url(../../img/common/wt/next.svg) no-repeat center center #ab9353; background-size:16px; border:2px solid #ab9353; box-sizing:border-box; border-radius:50%; transition:all .2s; }
a.btn._more:hover                         { color:#73551b; }
a.btn._more:hover::before                 { transform:scale(1.3); background-image:url(../../img/common/wt/next.svg); background-color:#73551b; border-color:#73551b; }
a.btn._more._bottom::before               { background-image:url(../../img/common/wt/bottom.svg); }
a.btn._more._blank::before                { background-image:url(../../img/common/wt/blank.svg); }
a.btn._more._serif                        { font-size:1.1rem; letter-spacing:0.05em; font-family: 'Cormorant Garamond', serif; }

/* ボタン:ホワイト */
a.btn._wt                                 { background-color:rgba(255,255,255,0.8); }
a.btn._wt:hover                           { background-color:rgba(255,255,255,1.0); }

/* ボタン:ブラウン */
a.btn._bn                                 { background-color:#ab9353; color:#fff; }
a.btn._bn:hover                           { background-color:#73551b; }
a.btn._bn:after                           { background-image:url(../../img/common/wt/next_s.svg); background-size:20px; }
a.btn._bn:hover:after                     { filter:brightness(1) contrast(1); }

/* 下へ:_bottom */
a.btn._bottom:after                       { background-image:url(../../img/common/bk/bottom.svg); }

/* PDF */
a.btn._pdf                                { background-color:#ffc0ac; color:#000; border-color:#000; }
a.btn._pdf:hover                          { background-color:#fff; }
a.btn._pdf:after                          { background-image: url(../../img/common/etc/pdf.svg); background-size:20px; }
a.btn._pdf:hover:after                    { filter:brightness(1) contrast(1); }

/* _blank */
a.btn._blank:after                        { background-image:url(../../img/common/bk/blank.svg); }
a.btn._bn._blank:after                    { background-image:url(../../img/common/wt/blank.svg);  }

/* 並列ボタン */
.btns                                     { display:flex; flex-wrap:wrap; justify-content:space-between; width:60%; max-height:600px; margin:15px auto 50px auto; }
.btns a.btn                               { width:48%; margin:0; }
.btns.wrap a.btn                          { margin-bottom:4% }
.btns._100                                { width:100%; max-height:100%; }
 

/* ====================================================================================================
   動画 ※Youtube貼り付け
   ---------------------------------------------------------------------------------------------------- */
   
.youtube_if                               { position:relative; width:100%; padding-top:56.25%; margin:0 0 1.6em 0; background:#000; border-radius:10px; }
.youtube_if iframe                        { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:10px; }
.youtube_if:before                        { position:absolute; content:""; top:0; left:0; z-index:2; width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid #ab9353; border-radius:8px; pointer-events:none; }


/* ====================================================================================================
   地図 ※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 50px 0; }
.tab_switch                               { position:relative; display:flex; justify-content:left; margin-bottom:15px; }
.tab_switch::before                       { content:""; position:absolute; bottom:0; left:0; z-index:-1; width:100%; height:1px; background:#ab9353; }
.tab_switch li                            { position:relative; width:100%; max-width:calc(33.33% - 4px); min-width:100px; margin:0 4px 0 0; padding:11px 4px; font-size:0.9rem; line-height:1.2; letter-spacing:0.1em; font-weight:bold; text-align:center; color:#fff; background:#ab9353; border:1px solid #ab9353; border-bottom:none; border-radius:5px 5px 0 0; cursor:pointer; transition:all .2s; }
.tab_switch li:hover                      { background-color:#73551b; border-color:#73551b; }
.tab_switch li.select,
.tab_switch li.select:hover               { color:#ab9353; background:#fff; border-color:#ab9353; }
.tab .hide                                { display:none; }


/* ====================================================================================================
   タグリスト
   ---------------------------------------------------------------------------------------------------- */

 /* 基本設定 */
.tag                                      { display:flex; flex-wrap:wrap; margin:0 0 20px 0; }
.tag a                                    { position:relative; float:left; width:auto; margin:0 5px 5px 0; padding:8px 24px 8px 24px; font-size:0.75rem; line-height:1.3; font-weight:bold; text-align:center; color:#fff; display:block; background:#ab9353; white-space:nowrap; border-radius:16px; transition:all 0.3s ease; overflow:hidden; }
.tag a:hover                              { background-color:#73551b; border-color:#73551b; box-shadow:1px 1px 4px rgba(0,0,0,0.3); }

/* 調整 */
.tag._center                              { justify-content:center; }
.frame .tag                               { margin:10px 0 1em 12px; }
#col_side .tag                            { margin-bottom:40px; }


/* ====================================================================================================
   枠（フレーム）
   ---------------------------------------------------------------------------------------------------- */

.frame                                    { padding:34px; background:#f8f8f8; border: 1px solid #ddd; margin-bottom:1.8em; border-radius:5px; }
.frame p:last-child,
.frame .btn: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; 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; 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); 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); 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); }
.frame.toggle .toggle_btn.on:after        { transform:rotate(45deg); }


/* ====================================================================================================
   BOXレイアウト
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
.boxs                                     { margin:0 -2.5% 1em -2.5%; display:flex; flex-wrap:wrap; }
.boxs .box                                { position:relative; padding:0 2.5% 5% 2.5%; }
.boxs .box h1                             { font-size:1.4rem; line-height:1.4; margin:20px 0 10px; position:relative; display:block; border-radius:4px;}
.boxs .box p                              { font-size:0.9rem; line-height:1.8; margin:8px 0 16px 0; letter-spacing:0.05em; }
.boxs .box p:last-child                   { margin-bottom:0; }
.boxs .box img                            { width:100%; border-radius:20px; }

/* カラム */
.boxs._01 .box                            { width:100%; margin:0;  }
.boxs._02 .box                            { width:50%; }
.boxs._03 .box                            { width:33.33%; }
.boxs._04 .box                            { width:25%; }
.boxs._05 .box                            { width:20%; }


/* ====================================================================================================
   カラム・フロート設定
   ---------------------------------------------------------------------------------------------------- */

.col_left                                 { float: left; width:47%; }
.col_right                                { float:right; width:47%; }
._left                                    { float: left; }
._right                                   { float:right; }
.cf:after                                 { content: "."; display:block; clear:both; height:0; visibility:hidden; }
.cf                                       { min-height:1px; }
.clear                                    { clear:both; }


/* ====================================================================================================
  イメージフロート
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
img.img_center ,
div.img_center                            { max-width:100%; margin:8px auto 45px auto; display:block; text-align:center; }
img.img_center_s ,
div.img_center_s                          { max-width: 52%; margin:8px auto 45px auto; display:block; text-align:center; }
img.img_left ,
div.img_left                              { max-width: 52%; margin:8px 65px 45px  0px; display:block; clear:both; float:left; }
img.img_right ,
div.img_right                             { max-width: 52%; margin:8px  0px 45px 65px; 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_center img,
.img_left img,
.img_right img                            { width:100%; }
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:rgba(0,0,0,0.2); }
.at                                       { text-indent:-1em; padding-left:1em; }
p.read                                    { font-size:1.05rem; line-height:1.8em; font-weight:500; color:#444; }
p._center                                 { text-align:center; }
.hide                                     { display:none; }
