@charset "utf-8";
/* CSS Document */

/* ====================================================================================================
   ナイタイテラス
   ---------------------------------------------------------------------------------------------------- */

/* ベース */
#naitai_open #wrap                              { position:relative; padding:0; }
#naitai_open .container                         { position:relative; width:90%; margin:0 auto; }
#naitai_open h1.tp_title                        { width:100%; }
#naitai_open #check_01                          { position:absolute; width:10px; height:10px; top:200px; }

/* カバー */
#naitai_open #cover,
#naitai_open #cover:after                       { background:#070707; background-image:linear-gradient( -45deg, #070707 25%, #000 25%, #000 50%, #070707 50%, #070707 75%, #000 75%, #000 ); background-attachment:fixed; background-position:center center; -webkit-background-size:50px 50px; background-size:50px 50px; } 
#naitai_open #cover .spinner:before,
#naitai_open #cover .spinner:after              { background:#070707; }

/* ヘッタ */
#naitai_open header                             { position:absolute; top:0; left:0; z-index:100; width:100%; height:100px; }
#naitai_open header .bg                         { display:none; }
#naitai_open header h1                          { top:17px !important; right:auto; left:12px; margin:0; }
#naitai_open header h1,
#naitai_open header h1 a,
#naitai_open header h1 img                      { width:50px; height:25px; }
#naitai_open header nav                         { position:absolute; top:0; right:0; left:0; z-index:100; width:100%; margin:0 auto; padding:240px 0 0 0; }
#naitai_open header nav ul                      { display:flex; flex-wrap:wrap; width:306px; margin:0 auto; }
#naitai_open header nav ul li                   { width:48%; height:50px; margin:1%; }
#naitai_open header nav ul li a                 { display:block; background:#000; font-size:14px; line-height:48px; text-align:center; border:1px solid #222; letter-spacing:0.05em; font-weight:bold; font-feature-settings:"palt"; color:#eaeaea !important; }
#naitai_open header nav ul li:nth-child(5)      { display:none; }
#naitai_open header nav a.btn                   { position:absolute; top:0px; right:0px; width:130px; height:45px; line-height:45px; margin:0; font-size:13px; background:#111; color:#fff; border:none; -webkit-border-radius:0 0 0 6px; border-radius:0 0 0 6px; overflow:hidden; }

/* ヘッタ検索 */
#naitai_open #lang_btn                          { top:0px; left:55px; }
#naitai_open #lang #lang_box                    { top:10px; left:100px; }
#naitai_open .goog-te-banner-frame              { position:absolute !important; top:120px !important; left:40px !important; z-index:3 !important; width:calc(100% - 80px) !important; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.05) !important; box-shadow: 0 0 5px rgba(0,0,0,0.05) !important; border-top:0 !important; border-bottom:none !important; -webkit-border-radius:0 0 4px 4px; border-radius:0 0 3px 4px; }

/* メインビジュアル */
#naitai_open #mv                                { position:relative; width:100%; height:1120px; border-bottom:1px solid #111; background:url(../../img/naitai_open/mv/sm_bg.jpg) no-repeat center top #111; -webkit-background-size:100% auto; background-size:100% auto; } 
#naitai_open #mv h1                             { position:absolute; top:80px; left:0; width:100%; height:133px; margin:0 auto; }
#naitai_open #mv h1 img                         { width:300px; height:133px; margin:auto; display:block; }

/* ビデオ */
#video,
.video_cover #control,
#naitai_open .arrowWrap                         { display:none; }

/* 関連トピックス */
#naitai_open #box_topics_rt                     { position:absolute; top:340px; left:0; z-index:4; width:100%; height:550px; padding:50px 0 0 0; background:none; }
#naitai_open #box_topics_rt .tp_title           { display:none; }
#naitai_open #box_topics_rt .container          { width:90%; }
#naitai_open #box_topics_rt a.btn               { width:300px; margin:35px auto 0 auto; }

/* 記事リスト */
#naitai_open .atls_list                         { width:100%; height:400px; margin:0 auto; }
#naitai_open .atls_list article                 { width:100%; height:90px; margin:0 0 15px 0; position:relative; display:block; background:rgba(0,0,0,0.5) }
#naitai_open .atls_list article:hover:before    { background-color:#453c37; } 
#naitai_open .atls_list a                       { width:100%; height:100%; display:block; }
#naitai_open .atls_list a img                   { width:146px; height:90px; }
#naitai_open .atls_list article .hgroup         { position:absolute; top:0; left:146px; width:calc(100% - 146px); height:90px; padding:10px 15px; color:#eaeaea; }
#naitai_open .atls_list article .hgroup h2      { font-size:12px; line-height:30px; letter-spacing:0.05em; margin:0; font-weight:normal; text-align:center; width:70px; position:absolute; bottom:0; left:0; background:#000; color:#eaeaea; }
#naitai_open .atls_list article .hgroup h3      { font-size:15px; line-height:22px; letter-spacing:0.08em; margin:0; font-weight:bold; height:44px; overflow:hidden; font-feature-settings:"palt"; }
#naitai_open .atls_list article .hgroup time    { font-size:8.6px; line-height:10px; letter-spacing:0.1em; font-weight:normal; letter-spacing:0.05em; font-feature-settings:"palt"; color:rgba(255,255,255,0.5); position:absolute; bottom:10px; left:80px; }
#naitai_open .atls_list article .hgroup .view   { font-size:8.6px; line-height:10px; letter-spacing:0.1em; font-weight:normal; letter-spacing:0.05em; font-feature-settings:"palt"; color:rgba(255,255,255,0.5); position:absolute; bottom:10px; left:140px; }
#naitai_open .atls_list article .new,
#naitai_open .atls_list article .look           { left:0; }
#naitai_open .atls_list article .new,
#naitai_open .atls_list article .look           { background:#129458; position:absolute; top:-10px; left:-10px; z-index:4; font-size:14px; font-feature-settings:"palt"; font-weight:bold; line-height:20px; letter-spacing:0.05em; width:60px; padding:5px 10px; font-family:Arial, Helvetica, sans-serif; color:#fff; text-align:center; border-radius:20px; }
#naitai_open .atls_list article .new:before,
#naitai_open .atls_list article .look:before    { -webkit-animation:lo_b 1.5s linear 0s infinite normal; animation:lo_b 1.5s linear 0s infinite normal; content:""; position:absolute; bottom:-8px; left:18px; border-top:8px solid #129458; border-right:8px solid #129458; border-bottom:8px solid transparent; border-left:8px solid transparent; }
#naitai_open .atls_list article .look           { -webkit-animation:look 1.5s linear 0s infinite normal; animation:look 1.5s linear 0s infinite normal; }
@-webkit-keyframes look                         { 0% { background:#129458; top:-10px; } 15% { background:#00b4b4; top:-15px; } 30% { background:#129458; top:-10px;} 100% { background:#129458; top:-10px; }}
@keyframes look                                 { 0% { background:#129458; top:-10px; } 15% { background:#00b4b4; top:-15px; } 30% { background:#129458; top:-10px;} 100% { background:#129458; top:-10px; }}
@-webkit-keyframes lo_b                         { 0% { border-top-color:#129458; border-right-color:#129458; } 15% { border-top-color:#00b4b4; border-right-color:#00b4b4; } 30% { border-top-color:#129458; border-right-color:#129458; } 100% { border-top-color:#129458; border-right-color:#129458; }}
@keyframes lo_b                                 { 0% { border-top-color:#129458; border-right-color:#129458; } 15% { border-top-color:#00b4b4; border-right-color:#00b4b4; } 30% { border-top-color:#129458; border-right-color:#129458; } 100% { border-top-color:#129458; border-right-color:#129458; }}

/* BOX動画 */
#box_movie                                      { position:absolute; bottom:0; right:0; left:0; z-index:4; width:100%; height:200px; margin:0 auto; background:url(../../img/naitai_open/mv/sm_movie.jpg) no-repeat center center; -webkit-background-size:cover; background-size:cover; }
#box_movie #movie_play                          { position:absolute; top:0; bottom:0; left:0; right:0; z-index:4; width:100%; height:100%; margin:auto; display:block; cursor:pointer; }
#box_movie #movie_play img                      { width:150px; height:150px; display:block; margin:25px auto; }
#box_movie .note                                { position:absolute; bottom:10px; left:0; right:0; z-index:4; width:100%; height:20px; margin:0 auto; color:rgba(255,255,255,0.7); font-size:11px; line-height:20px; text-align:center; font-weight:normal; }

/* 営業時間／概要 */
#box_naitai_ol                                  { z-index:2; padding:0; background:#241f1c; }
#box_naitai_ol .thumb                           { position:relative; }
#box_naitai_ol .thumb h1                        { position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; width:72%; height:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; }
#box_naitai_ol .thumb h1 img                    { width:100%; max-width:100%; height:auto; margin:0 auto; filter:drop-shadow(0 0 3px rgba(0,0,0,0.3)); }
#box_naitai_ol .thumb .col_left,
#box_naitai_ol .thumb .col_right                { width:50%;}
#box_naitai_ol .container                       { margin:-15px auto 0 auto; }
#box_naitai_ol .atl_txt                         { width:100% !important; }
#box_naitai_ol .frame                           { background:rgba(255,255,255,0.85); margin-bottom:5px; padding:20px; }
#box_naitai_ol .frame .read                     { font-size:18px; font-weight:bold; margin-bottom:25px; }

/* メニュー */
#box_menu                                       { z-index:2; margin-top:-50px; padding:50px 0 40px 0; background:#241f1c; }
#box_menu h1                                    { margin-bottom:50px; }
#box_menu h1 img                                { width:100%; max-width:100%; height:auto; }
#box_menu p.menu_time                           { font-size:16px; color:#e3dfd4; font-weight:bold; }

/* ナイタイ高原牧場について */
#naitai_open #box_access                        { background:#111; }
#naitai_open #box_access .container             { width:90%;}
#naitai_open #box_access #map,
#naitai_open #box_access #txt                   { padding-top:40px; padding-bottom:20px;}
#naitai_open #box_access #txt ul                { margin-bottom:40px; font-size:16px; line-height:1.8em; }
#naitai_open #box_access #txt ul li             { position:relative; padding-left:20px; }
#naitai_open #box_access #txt ul li:before      { content:""; position:absolute; top:10px; left:0; z-index:2; width:10px; height:10px; background:rgba(255,255,255,0.5); -webkit-border-radius:50%; border-radius:50%; }
#naitai_open #box_access h2                     { font-size:24px; margin:-10px 0 35px 0; font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#naitai_open #box_access p.read                 { border-bottom:none; }
#naitai_open #box_access a.btn                  { width:100%; margin:0; }

/* フォーム:パーツ */
#naitai_open form select                        { background-image:url(../../img/common/etc/select_bk.svg) }
#naitai_open form select,
#naitai_open form input,
#naitai_open form textarea                      { border:2px solid #111; }
#naitai_open form input[type="submit"], 
#naitai_open form input[type="button"],
#naitai_open button.btn                         { background-color:#111; }
#naitai_open form input[type="submit"]:hover, 
#naitai_open form input[type="button"]:hover,
#naitai_open button.btn:hover                   { background-color:#000; }

/* ページヘッタ */
#naitai_open #box_pghd                          { width:100%; height:120px; margin-bottom:50px; background:#070707; background-image:linear-gradient( -45deg, #070707 25%, #000 25%, #000 50%, #070707 50%, #070707 75%, #000 75%, #000 ); background-attachment:fixed; background-position:center center; -webkit-background-size:50px 50px; background-size:50px 50px; }
#naitai_open #topic_pass                        { top:0; display:none; }
#naitai_open .container.size_s                  { padding-bottom:50px; }

/* フッター */
#naitai_open footer                             { background:#241f1c; }


/* ====================================================================================================
   その他調整
   ---------------------------------------------------------------------------------------------------- */

#naitai_open .atl_txt h2                        { font-size:20px; margin:0 0 15px 0; padding:10px 10px; }
#naitai_open .atl_txt h3                        { font-size:18px; margin:25px 0 15px 0; }


/* ====================================================================================================
   BOX／動画
   ---------------------------------------------------------------------------------------------------- */

/* ポップアップ動画 */
#videoPopup                               { position:fixed; z-index:9999; top:0; right:0; bottom:0; left:0; background:#FFF; background:url(../../img/common/etc/bg_icon.png) rgba(255,255,255,.95);  opacity:0; filter:alpha(opacity=0); visibility:hidden; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; }
#videoPopup .videoBody                    { position:absolute; top:0; right:0; bottom:0; left:0; width:300px; height:169px; margin: auto; background:rgba(0,0,0,0) }
#videoPopup .videoBody iframe             { width:100%; height:100%; }
#videoPopup.on                            { opacity:1; filter:alpha(opacity=4100); visibility:visible; }

#close_btn                                { position:absolute; top:0px; left:0px; z-index:2; width:100px; height:100px; background:rgba(0,0,0,0.0); 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; }
#close_btn:hover                          { background:rgba(0,0,0,0.1); }
#close_btn:before                         { content:""; position:absolute; top:50%; left:50%; width:40px; height:3px; margin:0px 0px 0px -20px; background:rgba(0,0,0,0.5); -webkit-transform: rotate( 45deg); transform:rotate( 45deg); -webkit-border-radius:3px; border-radius:3px; }
#close_btn:after                          { content:""; position:absolute; top:50%; left:50%; width:40px; height:3px; margin:0px 0px 0px -20px; background:rgba(0,0,0,0.5); -webkit-transform: rotate(-45deg); transform:rotate(-45deg); -webkit-border-radius:3px; border-radius:3px; }