@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;
}
.scheh{
font-family:'Scheherazade New',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:#333;
font-size: 1.4rem;
background:#fff;
-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{
width: 137px;
left: 5%;
top: 50%;
transform: translate(0,-50%);
}
@media screen and (max-width:767px){
.header .logo{
width: 90px;
}
}
.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:9999;
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: 999;
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{
width: 100px;
}
.accordionMenu li{
line-height: 1.2;
letter-spacing:0.1em;
cursor:pointer;
}

/*loaded*/
#loading{
width: 100%;
height: 100vh;
z-index: 9999;
background: #f0f0f0;
}
#loading .logo{
top: 50%;
left: 50%;
opacity: 1;
width: 300px;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
#loading .logo{
width: 200px;
}
}
#loading.animation .logo{
opacity: 0;
transition:all 2.5s ease 2s;
}
/*logo*/
.topLogo{
width: 137px;
top: 70px;
left: 5%;
z-index: 999;
}
@media screen and (max-width:767px){
.topLogo{
width: 115px;
top: 30px;
}
}
/*topArea*/
.topArea{
width: 100%;
height: 100vh;
min-height: 800px;
background: url("../images/bn-top.jpg")bottom center repeat;
background-size: 462px auto;
}
@media screen and (max-width:767px){
.topArea{
min-height: 400px;
background: url("../images/bn-top.jpg")bottom center repeat;
background-size: 231px auto;
}
}
.topArea .imgOuter{
top: 50%;
left: 50%;
width: 50%;
min-width: 650px;
height: 800px;
transform: translate(-50%,-50%);
opacity: 0;
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}
@media screen and (max-width:767px){
.topArea .imgOuter{
top: 55%;
width: 90%;
min-width:90%;
height: 500px;
}
}
.loaded .topArea .imgOuter{
opacity: 1;
width: 32%;
min-width: 416px;
height: 707px;
}
@media screen and (max-width:767px){
.loaded .topArea .imgOuter{
width: 65%;
min-width:65%;
height: 400px;
}
}
.topArea .imgOuter .bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:url("../images/img-top.jpg") center no-repeat;
background-size:cover;
}
.topArea .discription{
top: 15px;
right: 5%;
}
@media only screen and (max-width:767px){
.topArea .discription{
top: 8px;
}
}
.topArea .navi{
top: 200px;
left: 5%;
}
/*ttlBox*/
.ttlBox{
top: 0;
left: 0;
}
@media only screen and (max-width:767px){
.ttlBox{
position: static;
margin-bottom: 30px;
}
}
.ttlBox .ttl{
letter-spacing: 0.2em;
}
@media only screen and (max-width:767px){
.ttlBox .ttl{
letter-spacing: 0.1em;
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
}
}
.ttlBox .en{
top: 0;
right: -10px;
width: 1em;
height: 1em;
transform: rotate(90deg);
}
@media only screen and (max-width:767px){
.ttlBox .en{
position: static;
transform: none;
}
}
.ttlBox .en .txtIn{
white-space: nowrap;
}
/*blgArea*/
.blgArea .blogList{
padding-top: 50px;
margin-left: 100px;
}
@media only screen and (max-width:767px){
.blgArea .blogList{
padding-top: 0;
margin-left: 0;
}
}
.blgArea .blogList .blog{
width: 31%;
margin-right: 3.5%;
}
@media only screen and (max-width:980px){
.blgArea .blogList .blog{
width: 48%;
margin-right:4%;
}
}
.blgArea .blogList .blog:nth-child(3n){
margin-right: 0;
}
@media only screen and (max-width:980px){
.blgArea .blogList .blog:nth-child(3n){
margin-right:4%;
}
.blgArea .blogList .blog:nth-child(2n){
margin-right: 0;
}
.blgArea .blogList .blog:nth-child(9){
display: none;
}
}
.blgArea .blog .img{
width: 100%;
height: 0;
padding-top: 56.25%;
overflow: hidden;
background: #e1e1e1;
}
.blgArea .blog .img img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: auto;
transition: all 0.3s ease;
}
.blgArea .blog .img a:hover img{
transform: translate(-50.25%,-50.25%) scale(1.05,1.05);
}
.blgArea .moreLink{
padding-bottom: 5px;
}
.blgArea .moreLink:before,
.blgArea .moreLink:after{
content: '';
position: absolute;
bottom: 0;
height: 1px;
background: #333;
}
.blgArea .moreLink:before{
width: 100%;
right: 0;
transition: all 0.3s ease 0.25s;
}
.blgArea .moreLink:hover:before{
width: 0;
transition: all 0.3s ease;
}
.blgArea .moreLink:after{
width: 0;
left: 0;
transition: all 0.3s ease;
}
.blgArea .moreLink:hover:after{
width: 100%;
transition: all 0.3s ease 0.25s;
}
/*aboutArea*/
.aboutArea .img{
width: 89%;
height: 500px;
background: url("../images/img-about.jpg") 15% top no-repeat;
background-size: cover;
}
@media screen and (max-width:980px){
.aboutArea .img{
width: 95%;
background: url("../images/img-about.jpg") 25% top no-repeat;
background-size: cover;
}
}
@media screen and (max-width:767px){
.aboutArea .img{
width: 100%;
height: 250px;
}
}
.aboutArea .txtBox{
width: 72%;
margin-top: -120px;
padding: 60px 0 30px calc(50vw - 490px);
box-sizing: border-box;
}
@media screen and (max-width:1088px){
.aboutArea .txtBox{
padding: 60px 0 30px 5%;
}
}
@media screen and (max-width:980px){
.aboutArea .txtBox{
width: 82%;
}
}
@media screen and (max-width:767px){
.aboutArea .txtBox{
width: 95%;
margin-top: -50px;
}
}
.aboutArea .txtBoxIn{
padding: 0 20px 0 120px;
}
@media screen and (max-width:767px){
.aboutArea .txtBoxIn{
padding: 0 20px 0 60px;
}
}
.aboutArea .txtBoxIn .logo{
top: 0;
left: 0;
width: 45px;
transform: translate(-50%,0);
}
@media screen and (max-width:1088px){
.aboutArea .txtBoxIn .logo{
transform: translate(0,0);
}
}
@media screen and (max-width:767px){
.aboutArea .txtBoxIn .logo{
top: -30px;
width: 35px;
}
}
/*mapArea*/
.mapArea .ttlBox{
top: 100px;
}
.mapArea .infoBox{
width: 72%;
margin-left: 28%;
}
@media screen and (max-width:767px){
.mapArea .infoBox{
width: 100%;
margin-left: 0;
}
}
.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 .logo{
width: 45px;
}
@media screen and (max-width:767px){
#footer .logo{
width: 35px;
}
}
#footer .logo .jp{
width: 38px;
margin: 30px auto 0;
}
@media screen and (max-width:767px){
#footer .logo .jp{
font-size: 1.4rem;
width: 22px;
margin: 15px auto 0;
}
}
#footer .naviBox,
#footer .infoBox{
width: 50%;
}
@media screen and (max-width:767px){
#footer .naviBox,
#footer .infoBox{
width: 80%;
margin-left: 20%;
text-align: left;
}
#footer .naviBox{
margin-bottom: 50px;
}
}
#footer .infoBox .link span:before,
#footer .infoBox .link a:before,
#footer .infoBox .link a:after{
content: '';
position: absolute;
top: 50%;
height: 1px;
background: #333;
}
#footer .infoBox .link a:before{
width: 65px;
right: 0;
transition: all 0.3s ease 0.25s;
}
#footer .infoBox .link span:before{
width: 65px;
right: 0;
background: #b3b3b3;
}
#footer .infoBox .link a:hover:before{
width: 0;
transition: all 0.3s ease;
}
#footer .infoBox .link a:after{
width: 0;
left: calc(100% - 65px);
transition: all 0.3s ease;
}
#footer .infoBox .link a:hover:after{
width: 65px;
transition: all 0.3s ease 0.25s;
}
/*basePage*/
.basePage{
padding-top: 200px;
}
@media screen and (max-width:767px){
.basePage{
padding-top: 130px;
}
}
/*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;
}