@charset="UTF-8";

body{
font-family: 'Noto Sans JP', sans-serif;
color: #444444;
}
h1,.machi,.overlay p{
font-family: 'Noto Serif JP', serif;
}

/*js*/
#gnav.is-active{
display:block;
}

/*--------SP header---------*/
header{
width:100%;
height:50vh;
background:url(../img/yokohama_960x699.jpg)no-repeat center center/cover;
}
.header-inner{
width:100%;
height:60px;
padding:0 30px;
line-height:60px;
background:rgba(255, 255, 255, 0.9);
position: fixed;
display: flex;
justify-content: space-between;
z-index:100;
}
h1{
color:#000;
font-size: 20px;
font-weight: 600;
}
.heading p{
display: none;
}

/*overlay*/

.overlay{
text-align: center;
position: relative;
}
.overlay p{
color:#fff;
font-size:20px;
position:absolute;
top:150px;
left:0;
right:0;
	line-height:1.5;
}

@media (min-width:960px){
.overlay p{
font-size:50px;
}
}


/*----gnav-----*/
#gnav{
overflow: hidden;
transition:0.5s ease;
width:100%;
height:100vh;
padding-top:90px;
display:none;
z-index: 10;
background: rgba(255, 255, 255, 0.9);
position:fixed;
}
#gnav li{
margin:auto;
padding:0 0 40px 30px;
}
#gnav a{
display: block;
color: #000;
}
#gnav .en{
font-size:22px;
}
#gnav .jp{
font-size:13px;
}

/*--------hamburger--------*/
.check{
display: none;
}
#box:checked~nav{
display:block;
}


h2{
padding:60px 0 40px;
text-align: center;
}


/*---------info--------*/
.info-box{
display: flex;
flex-wrap: wrap;
padding:20px 0 0;
}
.info-box li{
width:100px;
height:100px;
margin: auto;
text-align: center;
box-sizing: border-box;
border: 1px #4444 solid;
border-radius: 50%;
}
.info-box li:hover{
background: #eee;
}
.info-box a{
display: block;
}
.info-inner{
padding:0 14px;
}
#short-term{
padding-bottom:0;
}
.info-box img{
width:40px;
padding-top:20px;
}
.info-box p{
font-size:14px;
color:#100;
}

/*-----business tab----*/
.business-tab li{
width:90%;
height:60px;
margin:20px auto;
padding-left:30px;
line-height:60px;
text-align: center;
border:1px #4444 solid;
border-radius: 30px;
}
.business-tab li:hover{
background: #eee;
}
.business-tab a{
display: block;
color:#444444;
}
.business-tab i{
float: right;
padding-right:30px;
line-height:60px;
}

@media (min-width:960px){
.business-tab{
display: flex;
flex-wrap: wrap;
}
.business-tab li{
width:45%;
height:100px;
line-height:100px;
font-size:22px;
border-radius: 50px;
}
.business-tab i{
line-height:100px;
}
.tab1,.tab3{
border-right:1px solid #000;
}
.tab1,.tab2{
border-top:1px solid #000;
}
}
/*info-texts*/
.info p{
font-size:14px;
}
/*----------news----------*/
#news{
width:100%;
margin: auto;
}
.twitter{
width:90%;
margin:auto;
}
@media (min-width:960px){
.twitter{
width:60%;
}
}

/*----------business----------*/
h3{
padding:0 0 20px;
font-size:18px;
}
.h3-first{
padding-top:0;
}
.info-inner{
padding-top: 70px;
}
.info-inner:first-child{
padding-top:0;
}
.business img{
width:100%;
}
.biz-img{
padding:10px 10px 0;
}
.biz-img.owner{
width:75%;
margin:auto;
}


/*-----------philosophy---------*/
#philosophy p{
padding:0 10px 10px;
line-height:1.6;
}
.hoshin{
margin-top:20px;
}
.hoshin p{
line-height:2;
}
.ceo-photo{
margin-top:30px;
}
.ceo-photo img{
width:100%;
}

/*-----------company---------*/
#company dl{
width:100%;
padding:0 10px;
display:flex;
flex-wrap: wrap;
}
#company dt{
width:25%;
padding-bottom:10px;
}
.company dd{
width:75%;
}

/*-----------------TB----------------*/
@media (min-width:640px){
#news{
width:65%;
margin: auto;
}
}

/*-----------------PC----------------*/
@media (min-width:960px){
header{
width:100%;
height:95vh;
background:url(../img/yokohama_960x699.jpg)no-repeat center bottom/cover;
}
.gnav{
text-align: center;
}
#gnav li{
height:calc(90vh/6);
}
    
.container{
margin: auto;
padding-bottom:100px;
}
    
.info-box{
width:100%;
}
    

h2{
font-size:30px;
}
    
#news{
margin: auto;
}
    
.business,.philosophy{
width:960px;
margin: auto;
}
.info-inner{
padding-bottom:40px;
display: flex;
}
.biz-text{
width:50%;
padding:20px;
}
.biz-img{
width:50%;
}
.biz-img.owner{
width:35%;
margin:auto;
}
    
.wrapper{
display: flex;
justify-content: space-between;
}
.philosophy_text{
width:40%;
}
.philosophy_text p{
font-size:14px;
}
.hoshin{
padding-top:10px;
}
.hoshin p{
line-height:2;
}
.ceo-photo{
width:50%;
}
.ceo-photo img{
width:100%;
}
    
.company{
width:50%;
margin:auto;
}
}


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

footer{
width:100%;
margin-top:50px;
padding:30px 10px 0;
background: #eee;
}
.footer-contact{
padding-bottom:30px;
line-height:2;
}
.machi{
font-size: 18px;
font-weight: bold;
}
.adress{
line-height:1.5;
}
.googlemaps{
width:100%;
height:200px;
}

.copy{
text-align: center;
padding:20px 0;
}
.copy a{
color: #444444;
}

/*-----page top------*/

#scroll-top{
width:30px;
height:30px;
position:fixed;
bottom:20px;
right:20px;
display: block;
z-index:100;
cursor: pointer;
}
#scroll-top img{
width:100%;
height:100%;
}

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

@media (min-width:960px){
.footer-wrap{
width:960px;
margin:auto;
display: flex;
justify-content: space-around;
}
.footer-contact{
width:960px;
margin:auto;
}
.googlemaps{
width:70%;
}
}