@charset "utf-8";
html {
font-size: 62.5%;
line-height: 1.8;
}
@media screen and (max-width:767px){
html {
font-size: 53.5%;
}
}
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
font-family: YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:500;
}
.mincho{
font-family:YakuHanMP, "游明朝 Medium","YuMincho Medium","游明朝","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",Meiryo,"Times New Roman",serif;
font-weight:500;
}
.hannari{
font-family: "Hannari",YakuHanMP, "游明朝 Medium","YuMincho Medium","游明朝","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",Meiryo,"Times New Roman",serif;
}
.adel{
font-family:'Abel',YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:400;
}
body{
color:#000;
font-size: 1.4rem;
background:url("../images/bg-body.gif") top left repeat #fff;
background-size: 50px 50px;
-webkit-text-size-adjust: 100%;
}
/*header*/
.header{
width: 100%;
height: 100px;
line-height: 100px;
top: 0;
left: 0;
z-index: 999;
}
@media screen and (max-width:767px){
.header{
height: 70px;
line-height: 70px;
}
}
.header .logo{
left: 5%;
top: 50%;
transform: translate(0,-50%);
}
.header .logo .logo-mark{
width: 50px;
margin-right: 15px;
}
@media screen and (max-width:767px){
.header .logo .logo-mark{
width: 30px;
}
}
.header .logo .ttl{
letter-spacing: 0.3rem;
}
@media screen and (max-width:1220px){
.header .logo .ttl{
    position: relative;
    top: -24px;
    }
}
@media screen and (max-width:767px){
.header .logo .ttl{
position: static;
}
}
.header .logo .name{
letter-spacing: 0.5rem;
margin-left: 30px;
top:-3px;
padding-bottom: 5px;
}
@media screen and (max-width:1220px){
.header .logo .name{
position: absolute;
    top: 40px;
    left: 34px;
    padding-bottom: 0;
}
}
@media screen and (max-width:767px){
.header .logo .name{
position: relative;
margin-left: 20px;
top:-3px;
left:auto;
padding-bottom: 5px;
}
}
.header .logo .en{
bottom: 0;
left: 50%;
letter-spacing: 0.45rem;
transform: translate(-50%,100%);
white-space: nowrap;
}
.header .hNavi{
top: 0;
right: 200px;
}
@media screen and (max-width:980px){
.header .hNavi{
right: 0;
}
}
.header .hNavi .navi{
margin-right: 3em;
}
@media screen and (max-width:1050px){
.header .hNavi .navi{
margin-right: 2em;
}
}
.contactBtn a{
width: 200px;
height: 100px;
line-height: 100px;
top: 0;
right: 0;
z-index: 999;
box-sizing: border-box;
border: 1px solid #333;
}
@media screen and (max-width:980px){
.contactBtn a{
top: auto;
bottom: 0;
width: 100%;
height: 70px;
line-height: 70px;
border-left:none;
border-right:none;
border-bottom:none;
}
}
.contactBtn a:hover{
background: #fff;
}
/* spNavi */
a.c_nav-bt{
position:fixed;
width:70px;
height:70px;
right:0;
top:0;
z-index:10000;
cursor:pointer;
}
#panel-btn-icon{
display: block;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,0);
width:20px;
height:1px;
background: #333;
transition: .2s;
}
#panel-btn-icon.close{
border-bottom:none;
}
#panel-btn-icon:before,
#panel-btn-icon:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
height:1px;
background: #333;
transition: .3s;
}
#panel-btn-icon:before{
margin-top: -8px;
width:20px;
}
#panel-btn-icon.close:before{
width:26px;
}
#panel-btn-icon:after{
margin-top:6px;
width:20px;
}
#panel-btn-icon.close:after{
width:26px;
}
#panel-btn-icon.close{
background: transparent;
}
#panel-btn-icon.close:before,
#panel-btn-icon.close:after{
margin-top: 0;
}
#panel-btn-icon.close:before{
transform: rotate(-45deg);
}
#panel-btn-icon.close:after{
transform: rotate(-135deg);
}
.panel-btn-txt{
position: absolute;
bottom:10px;
left: 50%;
transform: translate(-50%,0);
font-size:1.0rem;
color:#333;
}
div.accordion{
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom:0;
z-index: 9999;
padding: 0 0 0 10px;
}
.accordionInbox{
background:rgba(255,255,255,0.9);
width:100vw;
padding:80px 10% 20px;
height:auto;
min-height:100vh;
overflow:hidden;
position: relative;
box-sizing: border-box;
}
.accordionLogo .logo-mark{
width: 30px;
margin-right: 15px;
}
.accordionLogo .ttl{
letter-spacing: 0.3rem;
}
.accordionLogo .name{
letter-spacing: 0.5rem;
margin-left: 20px;
top:-3px;
padding-bottom: 5px;
}
.accordionLogo .en{
bottom: 0;
left: 50%;
letter-spacing: 0.45rem;
transform: translate(-50%,100%);
white-space: nowrap;
}
.accordionMenu li{
line-height: 1.2;
letter-spacing:0.1em;
cursor:pointer;
}


/* loading */
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 9999;
}
#loading .blackBg{
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,1);
transition: all 3s ease;
}
#loading.animation .blackBg{
background:rgba(0,0,0,0.8);
}
#loading .fade01{
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/bg-loading.jpg) center;
background-size:cover;
transition: transform 10s ease,opacity 1s ease 5s;
}
#loading.animation .fade01{
transform:scale(1.1,1.1);
opacity:0;
}
#loading .txtBox{
top:50%;
left:0;
width:100%;
transform:translate(0,-50%);
}
#loading .txt{
font-size: 4.5rem;
filter: blur(40px);
opacity:0;
letter-spacing: 0.5em;
transition:filter 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2s,opacity 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2s;
}
#loading.animation .txt{
opacity:1;
filter: blur(0);
}
#loading .en{
top:50%;
left:0;
width:100%;
transform:translate(0,-50%);
margin-top:20px;
letter-spacing: 1em;
opacity:0;
transition:opacity 3s cubic-bezier(0.075, 0.82, 0.165, 1) 4s
}
#loading.animation .en{
opacity: 1;
}
/*topArea*/
.topArea{
width: 100%;
height: 100vh;
min-height: 550px;
}
.topArea .img{
width: 68%;
height: 100%;
top: 0;
left: 0;
background: url("../images/bg-top.jpg") 68% center no-repeat;
background-size: cover;
opacity: 0;
transition: all 1.5s ease 2s;
}
.loaded .topArea .img{
opacity: 1;
}
@media screen and (max-width:1120px){
.topArea .img{
background: url("../images/bg-top.jpg") 63% center no-repeat;
background-size: cover;
}
}
@media screen and (max-width:1120px){
.topArea .img{
background: url("../images/bg-top.jpg") 56% center no-repeat;
background-size: cover;
}
}
.topArea .ttl{
top: 4%;
right: 5%;
letter-spacing: 0.3em;
opacity: 0;
transition: all 1.5s ease 2s;
}
.loaded .topArea .ttl{
opacity: 1;
}
@media screen and (max-width:980px){
.topArea .ttl{
right: 2%;
}
}
@media screen and (max-width:767px){
.topArea .ttl{
top:2%;
}
}
.topArea .ttl .logo-mark{
width: 50px;
left: -3px;
margin-bottom: 20px;
 }
 @media screen and (max-width:767px){
.topArea .ttl .logo-mark{
width: 30px;
left: -3px;
margin-bottom: 10px;
 }
}
.topArea .discription{
top: 15%;
right: 15%;
letter-spacing: 0.1em;
line-height: 1.5;
opacity: 0;
transition: all 1.5s ease 2.7s;
}
.loaded .topArea .discription{
opacity: 1;
}
@media screen and (max-width:980px){
.topArea .discription{
right: 12%;
}
}
@media screen and (max-width:767px){
.topArea .discription{
top: 57%;
right: 11%;
}
.android .topArea .discription .androidOff{
display: none;
}
}
.topArea .name{
top: 15%;
right: 20%;
letter-spacing: 0.5em;
font-size: 4.5rem;
opacity: 0;
transition: all 1.5s ease 2.3s;
}
.loaded .topArea .name{
opacity: 1;
}
@media screen and (max-width:767px){
.topArea .name{
right: 12%;
top: 7%;
font-size: 3.5rem;
}
}
.topArea .en{
top: 15%;
right: 20%;
width: 1em;
height: 1em;
transform: rotate(90deg) translate(290px, 36px);
opacity: 0;
transition: all 1.5s ease 2.5s;
}
.loaded .topArea .en{
opacity: 1;
}
@media screen and (max-width:767px){
.topArea .en{
right: 12%;
top: 7%;
transform: rotate(90deg) translate(180px, 22px);
}
}
.topArea .en .txtIn{
white-space: nowrap;
letter-spacing: 0.5em;
}
@media screen and (max-width:767px){
.topArea .en .txtIn{
font-size: 1.2rem;
}
}
/*newsArea*/
.newsArea .areaInner{
padding: 50px 4% 30px; 
}
.newsArea .news{
width: 22%;
margin-right: 4%;
}
@media screen and (max-width:980px){
.newsArea .news{
width: 45%;
margin-right: 10%;
margin-bottom: 40px;
}
}
@media screen and (max-width:767px){
.newsArea .news{
width: 47.5%;
margin-right: 5%;
}
}
.newsArea .news:last-child{
margin-right: 0;
}
@media screen and (max-width:980px){
.newsArea .news:nth-child(2n){
margin-right: 0;
}
}
.newsArea .news .img{
width: 100%;
height: 0;
padding-top: 100%;
overflow: hidden;
background: #e1e1e1;
}
.newsArea .news .img img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: auto;
transition: all 0.3s ease;
}
.newsArea .news .img a:hover img{
transform: translate(-50.25%,-50.25%) scale(1.05,1.05);
}
.newsArea .moreLink{
margin-right: 13%;
}
/*movieArea*/
.movieArea{
padding: 0 4%;
}
.movieArea .movieList{
width: 76%;
}
@media screen and (max-width:980px){
.movieArea .movieList{
width: 90%;
}
}
@media screen and (max-width:767px){
.movieArea .movieList{
width: 100%;
}
}
.movieArea .movieListTop{
margin-right: 24%;
}
@media screen and (max-width:980px){
.movieArea .movieListTop{
margin-right: 10%;
}
}
@media screen and (max-width:767px){
.movieArea .movieListTop{
margin-right: 0;
margin-bottom: 0;
}
}
.movieArea .movieListBottom{
margin-left: 24%;
}
@media screen and (max-width:980px){
.movieArea .movieListBottom{
margin-left: 10%;
}
}
@media screen and (max-width:767px){
.movieArea .movieListBottom{
margin-left: 0;
}
}
.movieArea .movie{
width: 47%;
}
@media screen and (max-width:767px){
.movieArea .movie{
width: 100%;
margin-bottom: 30px;
}
}
.movieArea .movie .img .play-button {
width: 48px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
.movieArea .movie .img .play-button {
width: 50px;
}
}
.movieArea .movie .img .play-button .icon.on{
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease;
}
.movieArea .movie .img a:hover .play-button .icon.on{
opacity: 1;
}
.movieArea .movie .img .play-button .icon.off{
transition: all 0.3s ease;
}
.movieArea .movie .img a:hover .play-button .icon.off{
opacity: 0;
}
/*aboutArea*/
.aboutArea .messageBox{
width: 32%;
}
@media screen and (max-width:767px){
.aboutArea .messageBox{
width: 100%;
}
}
.aboutArea .messageBox .txt{
font-size: 4.5rem;
letter-spacing: 0.2em;
line-height: 1.7;
width: 153px;
white-space: nowrap;
}
@media screen and (max-width:767px){
.aboutArea .messageBox .txt{
font-size: 3.5rem;
width: 100%;
margin-bottom: 30px;
line-height: 1.4;
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
}
.aboutArea .messageBox .txt .line2{
margin-top: 2em;
}
@media screen and (max-width:767px){
.aboutArea .messageBox .txt .line2{
margin-top: 0;
margin-left: 1.5em;
}
}
.aboutArea .txtBox{
width: 62%;
}
@media screen and (max-width:767px){
.aboutArea .txtBox{
width: 100%;
}
}
/*imageArea*/
.imageArea{
width: 90%;
margin-right: 10%;
max-width: 1500px;
}
@media screen and (max-width:767px){
.imageArea{
width: 100%;
margin-right: 0;
}
}
.imageAreaIn{
width: 100%;
height: 933px;
}
@media screen and (max-width:1300px){
.imageAreaIn{
height: 0;
padding-top: 79.47189%;
}
}
.imageAreaIn .img01{
top: 0;
left: 0;
height: 530px;
width: 62.3509%;
background: url("../images/img-image01.jpg") right center no-repeat;
background-size: cover;
}
@media screen and (max-width:1300px){
.imageAreaIn .img01{
height: 56.806002%;
}
}
.imageAreaIn .img02{
width: 300px;
top: 31.83279%;
right: 0;
}
@media screen and (max-width:1300px){
.imageAreaIn .img02{
width: 25.553662%;
}
}
.imageAreaIn .img03{
width: 244px;
bottom: 0;
right: 30.8347529%;
}
@media screen and (max-width:1300px){
.imageAreaIn .img03{
width: 20.78364%;
}
}
/*mapArea*/
.mapArea{
padding: 0 4%;
}
.mapArea .ttl{
width: 27%;
}
@media screen and (max-width:767px){
.mapArea .ttl{
width: 100%;
}
}
.mapArea .infoBox{
width: 72%;
}
@media screen and (max-width:767px){
.mapArea .infoBox{
width: 100%;
}
}
.mapArea .infoBoxIn{
max-width: 640px;
margin: 0 0 0 auto;
}
.mapArea .infoBox table{
width: 100%;
}
.mapArea .infoBox table tr{
}
.mapArea .infoBox table th{
width: 24.5%;
}
.mapArea .infoBox table td{
width: 75.5%;
padding-bottom: 40px;
}
.mapArea .mapLink .mappin{
width: 12px;
margin-right: 10px;
}
/*contactArea*/
.contactArea{
padding: 100px 0;
}
@media only screen and (max-width:767px){
.contactArea{
padding: 80px 0;
}
}
.contactArea .areaInner{
padding: 50px;
box-sizing: border-box;
}
@media only screen and (max-width:767px){
.contactArea .areaInner{
padding: 40px 15px;
}
}
.contactArea .areaInner .unit{
top: 2px;
}

/*footer*/
#footer{
padding-bottom: 100px;
}
@media screen and (max-width:767px){
#footer{
padding-bottom: 50px;
}
}
#footer .naviBox{
width: 45%;
}
@media screen and (max-width:767px){
#footer .naviBox{
width: 100%;
margin-bottom: 70px;
}
}
#footer .naviBox .ttl{
top: 0;
right: 0;
}
@media screen and (max-width:767px){
#footer .naviBox .ttl{
position: static;
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
}
#footer .naviBox .navi{
top: 0;
right: 135px;
width: 100%
}
@media screen and (max-width:767px){
#footer .naviBox .navi{
position: static;
}
#footer .naviBox .naviIn{
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
  width: 100%;
}
}
#footer .linkBox{
width: 47%;
}
@media screen and (max-width:767px){
#footer .linkBox{
width: 100%;
}
}
#footer .linkBox .ttl{
padding-left: 10%;
}
@media screen and (max-width:767px){
#footer .linkBox .ttl{
padding-left: 0;
}
}
#footer .linkBox .ttl .logo-mark{
width: 50px;
margin-right: 25px;
}
@media screen and (max-width:767px){
#footer .linkBox .ttl .logo-mark{
width: 30px;
margin-right: 15px;
}
}
#footer .linkBox .link{
width: 50%;
box-sizing: border-box;
border-right: 1px solid #000;
}
#footer .linkBox .link:first-child{
border-left: 1px solid #000;
}
#footer .linkBox .link a,
#footer .linkBox .link span.dpBlock{
padding: 15px 0;
width: 100%;
box-sizing: border-box;
height: 100%;
transition: all 0.3s ease;
}
#footer .linkBox .link a:hover{
background: rgba(35, 24, 21, 0.03);
}
/*footerBottom*/
.footerBottom{
padding: 100px 0;
}
@media screen and (max-width:767px){
.footerBottom{
padding: 50px 0;
}
}
.footerBottom .copy{
bottom: 0;
right: 0;
}
@media screen and (max-width:767px){
.footerBottom .copy{
position: static;
margin-top: 20px;
}
}
/*basePage*/
.basePage{
padding-top: 200px;
}
@media screen and (max-width:767px){
.basePage{
padding-top: 100px;
}
}
/*btn*/
.btn a{
width: 100%;
max-width: 340px;
height: 75px;
line-height: 75px;
border: 1px solid #000;
}
.btn a .arrow{
width: 5px;
height: 5px;
border-top: 1px solid #000;
border-right: 1px solid #000;
top: 50%;
right: 30px;
transform: translate(0,-50%) rotate(45deg);
}
.btn a:hover{
background: #000;
}
.btn a:hover .arrow{
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}

/*---------------------------------------*/
/* layout */
/*---------------------------------------*/
#container{
min-height:100vh;
}