@charset "utf-8";
/* ------------------------------------------------------------ common */
body { min-width: 1200px; font-family: 'Noto-Sans-JP-Regular',sans-serif; }
a:link { color: #111; text-decoration: none; }
a:visited { color: #111; text-decoration: none; }
a:hover,
a:hover img,
input[type="submit"]:hover { color: #111; text-decoration: none; filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
input[type="text"],
select,
textaera { border: 1px solid #b5b5b5; border-radius: inherit; outline: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input[type="submit"] { -webkit-appearance: button; cursor: pointer; padding: 0; border: none; }

.inner { width: 1100px; margin: 0 auto; }
.m_inner { width: 1200px; margin: 0 auto; }
.SP { display: none; }


/* ------------------------------------------------------------ header */
header { position: fixed; top: 0; width: 100%; z-index: 10; padding: 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; transition: 0.5s; min-width: 1200px; display: flex; justify-content: space-between; }
header #logo_h1 { padding: 50px 0 0 50px; }
header #logo_h1 .logo { }
header #logo_h1 .logo img { width: 263px; height: auto; }
header #logo_h1 .logo img.off { display: block; }
header #logo_h1 .logo img.on { display: none; }

header #logo_h1 h1 span { display: block; font-size: 12px; margin: 8px 0 0; }
header nav { padding: 50px 0 0 ; }
header nav a { padding: 0 0 0 50px; color: #fff;}
header nav a:link { padding: 0 0 0 50px; color: #000;}

header .reserve .movie { padding: 10px 0 0; }
header .reserve .movie p { background: #000; color: #fff; text-align: center; font-size: 14px; padding: 5px 0; margin-top: -2px; }


header #language_btn_menu { float: right; }
header #language_btn_menu #language { float: left; margin: 15px 0 0; }
header #language_btn_menu #language a { float: left; font-size: 16px; font-family: 'AvenirNext-DemiBold'; color: #fff; margin: 0 0 0 25px; letter-spacing: 1px; }
header #language_btn_menu #language a.on { border-bottom: solid 1px #fff; }
header #language_btn_menu .btn { float: left; text-align: center; margin: 0 0 0 55px; }
header #language_btn_menu .btn a { display: inline-block; *display: inline; *zoom: 1; font-size: 15px; background: #fff; padding: 15px 42px 15px 30px; position: relative; }
header #language_btn_menu .btn a::before { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 20px; display: block; width: 8px; height: 8px; border-top: solid 1px #000; border-right: solid 1px #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }
header #language_btn_menu .btn a::after { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 15px; display: block; width: 8px; height: 8px; border-top: solid 1px #000; border-right: solid 1px #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }
header #language_btn_menu p { float: left; color: #fff; font-size: 16px; font-family: 'AvenirNext-DemiBold'; letter-spacing: 1px; margin: 15px 0 0 30px; }
header #language_btn_menu #nav_toggle { float: left; margin: 14px 0 0 25px; }
header #language_btn_menu #nav_toggle span { display: block; width: 27px; height: 1px; background: #000; margin: 0 0 6px; }
header #language_btn_menu #nav_toggle span:last-of-type { margin: 0 auto; }

header.on { background: #fff; /* box-shadow: 10px 10px 20px rgba(0,0,0,0.1);  */transition: 0.5s; height: 100px;}
header.on.pad { }
header.on #logo_h1 .logo img.off { display: none; }
header.on #logo_h1 .logo img.on { display: block; width: 170px; height: auto;}
header.on #logo_h1 h1 { color: #000; }
header.on #language_btn_menu #language a { color: #000; }
header.on #language_btn_menu #language a.on { border-bottom: solid 1px #000; }
header.on #language_btn_menu .btn { float: left; text-align: center; margin: 0 0 0 55px; }
header.on #language_btn_menu .btn a { background: #000; color: #fff; }
header.on #language_btn_menu .btn a::before { border-top: solid 1px #fff; border-right: solid 1px #fff; }
header.on #language_btn_menu .btn a::after { border-top: solid 1px #fff; border-right: solid 1px #fff; }
header.on #language_btn_menu p { color: #000; }
header.on #language_btn_menu #nav_toggle span { background: #000; }

header.on nav a { color: #000;}



body #gloval_nav { background: #fff; color: #000; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 500; visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility .6s ease; }
body #gloval_nav nav .logo,
body #gloval_nav #close_nav { display: none; }
body.open #gloval_nav { visibility: visible; opacity: 1; }
body.open #gloval_nav .menu_fv { float: left; width: 60vw; height: 100vh; background: url(../images/index/fv.jpg) no-repeat center center/cover; }
body.open #gloval_nav nav { padding: 5%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; overflow-y: scroll; position: relative; height: 100vh; z-index: 1; right: 0; top: 0; }
body.open #gloval_nav nav .logo { display: block; margin: 0 auto 40px; }
body.open #gloval_nav nav .logo img { width: 230px; height: auto; }
body.open #gloval_nav nav ul li { margin: 0 auto 35px; }
body.open #gloval_nav nav ul li a { color: #000; font-size: 30px; letter-spacing: 3px; font-family: 'AvenirNext-Medium';}
body.open #gloval_nav nav .btn { margin: 50px auto 0; }
body.open #gloval_nav nav .btn a { display: inline-block; *display: inline; *zoom: 1; font-size: 18px; color: #fff; background: #000; padding: 25px 0; position: relative; min-width: 300px; text-align: center; }
body.open #gloval_nav nav .btn a::before { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 25px; display: block; width: 8px; height: 8px; border-top: solid 1px #000; border-right: solid 1px #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }
body.open #gloval_nav nav .btn a::after { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 20px; display: block; width: 8px; height: 8px; border-top: solid 1px #000; border-right: solid 1px #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }
body.open #gloval_nav #close_nav { display: block; font-size: 40px; position: absolute; right: 30px; top: 30px; z-index: 10; }


/* ------------------------------------------------------------ reservation */

/* ------------------------------------------------------------ footer */


/* ------------------------------------------------------------ title */
.title { text-align: center; font-size: 16px; letter-spacing: 3px; }
.title span { display: block; font-size: 64px; font-family: 'NexaBold'; margin: 0 auto 2px; letter-spacing: 6px; }

/* ------------------------------------------------------------ btn */
.viewmore_btn { text-align: center; }
.viewmore_btn a { display: inline-block; *display: inline; *zoom: 1; border: 1px solid #000; font-size: 18px; font-family: 'AvenirNext-Medium'; letter-spacing: 2px; min-width: 245px; padding: 18px 15px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: relative; }
.viewmore_btn a::before { position: absolute; content: ""; width: 62px; height: 10px; background: url(../images/common/arrow_01_on.svg) no-repeat center center/62px; right: -34px; top: 17px; }

.viewmore_btn.white a { border: 1px solid #fff; color: #fff; }
.viewmore_btn.white a::before { background: url(../images/common/arrow_01_off.svg) no-repeat center center/62px; }




/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width:640px){
body { min-width: 100%; }
.inner,
.m_inner { width: 90%; margin: 0 auto; }
.PC { display: none; }
.SP { display: block; }

/* ------------------------------------------------------------ header */
header { width: 100%; padding: 15px; min-width: 100%; }
header #logo_h1 { padding: 0; }
header #logo_h1 .logo { float: left; }
header #logo_h1 .logo img { width: 100px; height: auto; }
header #logo_h1 .logo img.off { display: block; }
header #logo_h1 .logo img.on { display: none; }
header #logo_h1 h1 { display: none; }
header #language_btn_menu { float: right; padding: 0 119px 0 0; }
header #language_btn_menu #language { margin: 8px 0 0; }
header #language_btn_menu #language a { font-size: 16px; margin: 0 0 0 20px; }
header #language_btn_menu .btn { display: none; }
header #language_btn_menu p { display: none; }
header #language_btn_menu #nav_toggle { margin: 4px 0 0 25px; }
header #language_btn_menu #nav_toggle span { width: 35px; height: 1px; margin: 0 0 5px; }
header #language_btn_menu #nav_toggle span:last-of-type { margin: 0 auto; }

header.on { background: #fff; /* box-shadow: 10px 10px 20px rgba(0,0,0,0.1); */ transition: 0.5s; height: 55px;}
header.on #logo_h1 .logo img.off { display: none; }
header.on #logo_h1 .logo img.on { display: block; width: 100px; height: auto;}
header.on #logo_h1 h1 { color: #000; }
header.on #language_btn_menu #language a { color: #000; }
header.on #language_btn_menu #language a.on { border-bottom: solid 1px #000; }
header.on #language_btn_menu .btn { float: left; text-align: center; margin: 0 0 0 55px; }
header.on #language_btn_menu .btn a { background: #000; color: #fff; }
header.on #language_btn_menu .btn a::before { border-top: solid 1px #fff; border-right: solid 1px #fff; }
header.on #language_btn_menu .btn a::after { border-top: solid 1px #fff; border-right: solid 1px #fff; }
header.on #language_btn_menu p { color: #000; }
header.on #language_btn_menu #nav_toggle span { background: #000; }

body.open #gloval_nav .menu_fv { display: none; }
body.open #gloval_nav nav { float: none; width: 100vw; padding: 5%; }
body.open #gloval_nav nav .logo { margin: 25px auto 40px; text-align: center; }
body.open #gloval_nav nav .logo img { width: 140px; height: auto; }
body.open #gloval_nav nav ul { padding: 30px 0 10px; }  
body.open #gloval_nav nav ul li { margin: 0 auto 30px; }
body.open #gloval_nav nav ul li a { font-size: 18px; letter-spacing: 3px; }
body.open #gloval_nav nav .btn { margin: 50px auto 0; text-align: center; }
body.open #gloval_nav nav .btn a { font-size: 16px; padding: 20px 0; min-width: 270px; text-align: center; }
body.open #gloval_nav nav .btn a::before { right: 25px; width: 8px; height: 8px; }
body.open #gloval_nav nav .btn a::after { right: 20px; width: 8px; height: 8px; }
body.open #gloval_nav #close_nav { font-size: 30px; right: 15px; top: 15px; }

/* ------------------------------------------------------------ reservation */
#reservation { padding: 50px 0; }
#reservation h2 { margin: 0 auto 30px; }
#reservation .online_reserve_btn { float: none; margin: 0 auto 20px; }
#reservation .online_reserve_btn a { padding: 25px 0; min-width: 270px; }
#reservation .online_reserve_btn a span { background-size: 20px; font-size: 16px; padding: 0 0 0 35px; }
#reservation .tel_btn { float: none; }
#reservation .tel_btn a { min-width: 270px; }
#reservation .tel_btn a p { font-size: 14px; }
#reservation .tel_btn a p strong { font-size: 27px; }

/* ------------------------------------------------------------ video_photo_nav */
#video_photo_nav article { float: none; width: 100%; }
#video_photo_nav article a { padding: 65px 25px 25px; }
#video_photo_nav article:nth-of-type(1) { background: url(../images/index/video_production_bg.jpg) no-repeat center center/cover; }
#video_photo_nav article:nth-of-type(2) { background: url(../images/index/photo_shooting_bg.jpg) no-repeat center center/cover; }
#video_photo_nav article h2 { margin: 0 auto 30px; }
#video_photo_nav article p { font-size: 13px; letter-spacing: 1px; }

/* ------------------------------------------------------------ footer */
footer { padding: 48px 0 112px; }
footer nav { display: block; text-align: left; margin: 0 5% 40px; }
footer nav a { float: none; font-size: 14px; margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 15px; position: relative; }
footer nav a:first-of-type { margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); }
footer nav a::before { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 15px; display: block; width: 8px; height: 8px; border-top: solid 1px #fff; border-right: solid 1px #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }

footer .logo { margin: 0 auto 30px; }
footer .logo img { width: 140px; height: auto; }

footer p { font-size: 11px; line-height: 22px; margin: 0 auto 30px; }
footer ul { margin: 0 auto 30px; }
footer ul li { float: left; margin: 0 0 0 25px; }
footer ul li:first-child { margin: 0 auto; }
footer ul li:nth-child(3) { padding: 2px 0; }
footer small { font-size: 11px; }

/* ------------------------------------------------------------ title */
.title { font-size: 14px; letter-spacing: 2px; }
.title span { font-size: 27px; line-height: 32px; letter-spacing: 4px; }

/* ------------------------------------------------------------ btn */
.viewmore_btn a { font-size: 14px; min-width: 220px; padding: 15px; }
.viewmore_btn a::before { width: 45px; height: 10px; background: url(../images/common/arrow_01_on.svg) no-repeat center center/45px; right: -24px; top: 15px; }

.viewmore_btn.white a::before { background: url(../images/common/arrow_01_off.svg) no-repeat center center/45px; }

}