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

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

/* ベース */
#naitai_open #wrap                              { position:relative; padding:0; }
#naitai_open .container                         { position:relative; width:72%; max-width:1200px; 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:fixed; top:0; left:0; z-index:100; width:100%; height:100px; }
#naitai_open header .bg                         { position:absolute; top:0; left:0; z-index:0; width:100%; height:100px; background:rgba(0,0,0,0); -webkit-transition:all 2s ease; transition:all 2s ease;}
#naitai_open header h1                          { top:20px !important; right:auto; left:15px; margin:0; }
#naitai_open header h1,
#naitai_open header h1 a,
#naitai_open header h1 img                      { width:100px; height:50px; }
#naitai_open header nav                         { position:fixed; top:40px; right:0; left:0; z-index:100; width:440px; height:30px; margin:0 auto; }
#naitai_open header nav ul                      { display:flex; -webkit-justify-content:space-between; justify-content:space-between; }
#naitai_open header nav ul li                   { font-size:15px; font-weight:bold; font-feature-settings:"palt"; letter-spacing:0.05em; }
#naitai_open header nav ul li a                 { color:#eaeaea !important; }
#naitai_open header nav ul li:nth-child(5)      { display:none; }
#naitai_open header nav a.btn                   { position:fixed; top:0px; right:0px; width:130px; height:90px; line-height:90px; margin:0; font-size:15px; background:#111; border:none; -webkit-border-radius:0 0 0 6px; border-radius:0 0 0 6px; overflow:hidden; }
#naitai_open header nav a.btn.black:before      { background:#453c37; }
#naitai_open header nav a.btn:hover             { width:150px; }

/* ヘッタ検索 */
#naitai_open #lang_btn                          { top:20px; left:110px; }
#naitai_open #lang #lang_box                    { top:20px; left:180px; }
#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:100vh; min-height:900px; padding-top:100px; background:rgba(0,0,0,0.1) } 
#naitai_open #mv h1                             { position:relative; width:100%; height:calc(100% - 350px); }
#naitai_open #mv h1 img                         { position:absolute; top:0; left:0; bottom:0; right:0; width:900px; height:400px; margin:auto; }

/* ビデオ */
#video                                          { position:fixed; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1; -webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); background:url(../../mov/poster_naitai) no-repeat center center; -webkit-background-size:cover; background-size:cover; }
.video_cover #control                           { display:none; }

/* BOX動画 */
#box_movie                                      { position:absolute; bottom:0; right:0; left:0; z-index:4; width:100%; height:100px; margin:0 auto; }
#box_movie #movie_play                          { position:absolute; top:0; bottom:0; left:0; z-index:4; width:100px; height:100px; margin:auto 0; cursor:pointer; }
#box_movie .note                                { position:absolute; top:0; bottom:0; left:100px; z-index:4; width:auto; height:20px; margin:auto; color:rgba(255,255,255,0.7); font-size:11px; line-height:20px; text-align:center; font-weight:normal; }

/* スクロールダウン（アニメーション設定） */
#naitai_open .arrowWrap                         { position:absolute; right:0; bottom:0; z-index:6; height:200px; display:block; }
#naitai_open .arrowInner p                      { font-size:12px; letter-spacing:0.1em; font-weight:bold; text-align:end; -webkit-transform:rotate(90deg); transform:rotate(90deg); color:rgba(255,255,255,0.9); }
#naitai_open .arrow                             { width:1px; height:100px; margin:55px auto 0; background-color:rgba(255,255,255,0.2); position:relative; overflow:hidden;　}
#naitai_open .arrow::before                     { content:""; width:100px; height:100px; margin:0 auto; background-color:#fff; position:absolute; top:-100px; left:0; right:0; -webkit-animation: arrow 2.5s linear 0s infinite normal; animation:arrow 2.5s linear 0s infinite normal; }
@-webkit-keyframes arrow                        { 0% { top:-100px; } 100% { top: 110px; }}
@keyframes arrow                                { 0% { top:-100px; } 100% { top: 110px; }}

/* ボタン：SNS */
#naitai_open #sns                               { position:fixed; top:60px; right:80px; z-index:20; width:85px; height:40px; }
#naitai_open #sns .btn:hover                    { background:#fff; }
#naitai_open #sns .btn                          { width:30px; height:30px; padding:5px; -webkit-border-radius:3px; border-radius:3px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
#naitai_open #sns:before,
#naitai_open #sns .btn span                     { position:absolute; top:40px; right:0; z-index:2; color:rgba(0,0,0,0); width:200px; font-size:11px; line-height:30px; font-weight:bold; text-align:right; -webkit-border-radius:2px; border-radius:2px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; pointer-events:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#naitai_open #sns .btn:hover span               { color:#444; height:50px; }
#naitai_open #sns:before                        { color:rgba(0,0,0,0.4); content:"Official Owned Media"; font-size:13px; font-weight:normal; letter-spacing:0.05em; font-family:"Times New Roman", Times, serif; }
#naitai_open #sns:hover:before                  { color:rgba(0,0,0,0); }

/* 関連トピックス */
#naitai_open #box_topics_rt                     { position:absolute; bottom:100px; left:0; z-index:4; width:100%; height:400px; padding:150px 0 0 0; background:none; }
#naitai_open #box_topics_rt .tp_title           { display:none; }
#naitai_open #box_topics_rt .container          { width:900px; max-width:900px; }
#naitai_open #box_topics_rt a.btn               { display:none; }

/* 記事リスト */
#naitai_open .atls_list                         { width:100%; height:250px; margin:0 auto; -webkit-display:flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between; }
#naitai_open .atls_list article                 { width:200px; height:250px; margin:0 25px 0 0; position:relative; display:block; background:rgba(0,0,0,0.5) }
#naitai_open .atls_list article:nth-child(4)    { margin-right:0; }
#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:200px; height:124px; }
#naitai_open .atls_list article .hgroup         { position:absolute; top:124px; left:0; width:100%; height:126px; 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:16px; line-height:25px; letter-spacing:0.08em; margin:0; font-weight:bold; height:75px; 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:-15px; left:-18px; 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:-15px; } 15% { background:#00b4b4; top:-20px; } 30% { background:#129458; top:-15px;} 100% { background:#129458; top:-15px; }}
@keyframes look                                 { 0% { background:#129458; top:-15px; } 15% { background:#00b4b4; top:-20px; } 30% { background:#129458; top:-15px;} 100% { background:#129458; top:-15px; }}
@-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_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; }
#box_naitai_ol .thumb .col_left,
#box_naitai_ol .thumb .col_right                { width:50%;}
#box_naitai_ol .container                       { margin:-100px auto 0 auto; }
#box_naitai_ol .atl_txt                         { width:100% !important; }
#box_naitai_ol .atl_txt h3                      { marin:30px 0 15px 0; }
#box_naitai_ol .frame                           { background:rgba(255,255,255,0.85); margin-bottom:5px; padding:40px; }

/* メニュー */
#box_menu                                       { z-index:2; margin-top:-150px; padding:150px 0 80px 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:18px; text-align:center; color:#e3dfd4; font-weight:bold; }

/* ナイタイ高原牧場について */
#naitai_open #box_access                        { background:rgba(0,0,0,0.5); }
#naitai_open #box_access .container             { width:90%;}
#naitai_open #box_access #map,
#naitai_open #box_access #txt                   { padding-top:120px; padding-bottom:120px;}
#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:rgba(0,0,0,0.8); }


/* ====================================================================================================
   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:1400px; height:788px; 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; }

@media screen and (max-width:1500px) { #videoPopup .videoBody { width:1200px; height:675px; }}
@media screen and (max-width:1400px) { #videoPopup .videoBody { width:1000px; height:562px; }}
@media screen and (max-width:1200px) { #videoPopup .videoBody { width: 900px; height:506px; }}
@media screen and (max-width:1000px) { #videoPopup .videoBody { width: 800px; height:450px; }}
@media screen and (max-width: 900px) { #videoPopup .videoBody { width: 700px; height:394px; }}
@media screen and (max-width: 800px) { #videoPopup .videoBody { width: 600px; height:338px; }}


/* ====================================================================================================
   タブレット対応
   ---------------------------------------------------------------------------------------------------- */

@media screen and (max-width:1000px) { 
#naitai_open #mv h1 img                   { width:680px; height:302px; }
#naitai_open #box_topics_rt .container    { width:680px; }
#naitai_open .container                   { width:86%; }
#naitai_open .atls_list article .hgroup time  { font-size:7px; bottom:5px; left:80px; }
#naitai_open .atls_list article .hgroup .view { font-size:7px; bottom:15px; left:80px; }
}