@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Rubik+Mono+One';

/*  -------------------------------------------------

RESET

---------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video, figure {
    font-family:inherit;
    font-size:100%;
    font-weight:inherit;
    font-style:inherit;
    vertical-align:baseline;
    white-space:normal;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    line-height:1.8;
}

textarea{
    font-family:inherit;
    font-size:100%;
    font-weight:inherit;
    font-style:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    line-height:1.6;
    text-align:left
}
article,footer,header,section,main{
    display:block
}
ol,ul{
    list-style:none
}
table{
    border-collapse:collapse;
    border-spacing:0
}

/* ----------------------------------------------

* 共通 

---------------------------------------------- */
html {
    visibility: hidden;
}

html.wf-active,
html.loading-delay {
    visibility: visible;
}

#hero_abt, #hero_works, #hero_contact, #hero_thx, #hero_prv, #hero_soon {
    background-image: url("../image/cmn/bg.jpg");
    background-size: cover;
	height: auto;
    margin-bottom: -80px;	
}

.hero_title {
	display: flex;
    justify-content: center;
}

.profs, .works {
    padding: 60px 30px 100px 100px;
}

.profs .box_a, .works .box_a {
    width: 60%;
    margin: 0 auto;
	margin-bottom: 50px;
}

.soon .box_a {
    height: 100vh;
}

.box_a p {
	font-size: 1em;
    letter-spacing: 0.2em;	
}

.profs h2, .works h2 {
	text-align: left;
    font-style: italic;
    font-size: 1.4em;
    font-weight: bold;
    color: #fff;
	border-bottom: 1px solid #fff;
}

.soon h2 {
	text-align: center;
    font-style: italic;
    font-size: 1.4em;
    font-weight: bold;
    color: #fff;
    position: relative;
    top: 20%;
}


 body {
     margin: 0 auto;
     padding: 0;
     font-size: 15px;
     line-height: 1.6em;
     font-family: 'kozuka-gothic-pr6n', 'sans-serif';
     font-weight: 500;
     color: #fff;
     -webkit-text-size-adjust:100％;
}

 table {
     margin : 0;
     border-collapse: collapse;
     border-spacing: 0;
     empty-cells: show;
}

.tbl {
    width: 100%;
    margin: 0 auto;
    font-size: 0.9em;
	text-align: left;
    margin-top: 10px;
}

.tbl dl {
    display: flex;
    padding: 8px 0;
}

.tbl dt {
    flex: 1;
    font-weight: bold;}

 .dd-l {
    flex-basis: 15%;
	font-weight: bold;
	color: #fff;
	margin-right: 20px;
}

.dd-r {
    flex-basis: 90%;	
	color: #fff;
}

.tbl dl.prv {
    display: block;
}
dl.prv dt{
    margin: 1em 0;
}

dl.prv dd {
    font-size: 0.9em;
    letter-spacing: 0.1em;
}

 img {
	max-width: 80%;
    vertical-align: middle;
    border: none;
}

.img_box {
    text-align: center;
    margin: 20px;
}

.img_box img {
    width: 100%;
}

.mid {
	vertical-align: middle;
}

.brk {
	display: block;
}

.l-box, .m-box, .r-box  {
    width: 100%;
    padding: 20px;
}

.sub-t {
	font-size: 0.7em;
    vertical-align: middle;
    display: block;
    text-align: center;}

/* ----------------------------------------------

* アンカータグの設定 

---------------------------------------------- */
 a {
     outline:none;
     color: #fff;
}

 a:hover {
     text-decoration: none;
}
 a,a:hover,a:hover img {
     -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
     text-decoration: none;
}
 a:hover {
     filter: alpha(opacity=50);
     -moz-opacity:0.5;
     opacity:0.5;
}


/* ---------------------------------------------------

　   HEADER（ナビゲーション）

---------------------------------------------------- */
#header {
	z-index: 999;
    max-width: 100%;
    height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	transition: all 0.5s ease;
}

#h_top {
	position: absolute;
    top: 50%;
}

 #gNav a:hover {
     color: #9fa8da;
}
 nav li a {
     font-size: 1em;
     letter-spacing: 0.2em;
}
 nav .sub-menu,.mean-container .mean-nav ul ul {
     background: #fff;
     background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

/* ---------------------------------------------------------------------------------------------

　   ヒーロー

--------------------------------------------------------------------------------------------- */
.box {
    overflow: hidden;
    position: relative;
	width: 95%;
    height: 90vh;	
    background-color: rgb(0 0 0 / 20%);
    margin: 0px auto;
}

#hero_works .box, #hero_contact .box, #hero_prv .box  {
    overflow: hidden;
    height: auto;
}

/* ---------------------------------------------------------------------------------------------

　  サイトマップ・コピーライトエリア（フッター）

--------------------------------------------------------------------------------------------- */
footer {
    clear: both;
    float: none;
    width: 100%;
    position: relative;
}

#f_contents {
	padding: 20px;
}

#f_contents .copyright {
	color: #fff;
	text-align: center;
	display: flex;
	justify-content: center;
    font-size: 0.8em;
	letter-spacing: 0.2em;
}

     .f_logo,.f_logo p {
         text-align: center;
    }
     .copy {
         text-align: center;
    }

/* ----------------------------------------------

 * TOPへ戻る

---------------------------------------------- */
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 50px;
}
.pagetop a {
    display: block;
    text-align: center;
	opacity: 0.5;
    font-size: 1em;
    line-height: 0.6em;
    text-decoration: none;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    text-align: center;
    color: #9fa8da;
    font-size: 1.5em;
    text-decoration: none;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.top_btn {
	font-size: 0.8em;
}

/* ---------------------------------------------------------------------------------------------

　  メディアクエリ

--------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1440px){	
	.hero_title h1 {
        margin: 1em 0;
        text-align: center;
    }

    .hero_title h1 img {
        width: 70%;
    }
}

 @media only screen and ( max-width : 768px ) {	
	 #header {
	    position: fixed;
	 }
    
	 .h_logo {
         display: none;
    }

     #gNav .nav {
         overflow-y: auto;
         height: 100vh;
    }
     .mean-nav .container {
         padding: 0;
    }
     #topMv {
         margin-top: 80px;
    }

	.container {
		padding: 0 30px;
	}
	 
	.hero_Story {
    	top: 30px;
	}
	 
	 .hero_Story h3 {
		font-size: 1.5em;
	}

	 .hero_Story p {
		font-size: 1em;
    	line-height: 3.5em;
	}
	      	 	 
     .f_logo {
         padding: 0 20px;
         text-align: center;
        }
     .f_logo p {
         text-align: center;
        }
     .f_logo img {
         margin-bottom: 20px;
         width: 150px;
        }
	 
	 .box__centered {
		 width: 80%;
	 }
	 
	 .img_box {
    	margin: 20px 0 10px 0;
	}
	 .profs, .works {
    	padding: 30px;
	}
	.profs .box_a {
    	width: 90%;
	}
	.works .box_a {
    	width: 100%;
	}
}

 @media print, screen and ( min-width : 769px ) {
     .h_logo img {
         width: 100px;
    }
.h_nav {
    display: block;
    float: left;
    margin-left: 60%;
    text-align: left;
}
	 #gNav ul {
    	font-weight: 400;
    	font-style: normal;
    	font-family: inherit;
    	color: #fff;
    	font-size: 0.9em;
    	letter-spacing: 0.2em;
	 }
    
     #gNav li {
         margin: 1.5em 0.5em;
    }
     #gNav li i {
         font-size: 16px;
         margin-left: 5px;
    }
     #gNav li a {
		width: 80%;
		margin-left: 50px;
		position: relative;
		display: block;
		line-height: 2em;
	 }
     #gNav .sub-menu {
         visibility: hidden;
         opacity: 0;
         z-index: 1;
         display: block;
         position: absolute;
         top: 50px;
         left: 50%;
         margin-left: -100px;
         width: 200px;
         -webkit-transition: all .2s ease;
         transition: all .2s ease;
    }
     #gNav .sub-menu a {
         padding: 10px;
         display: block;
         border-bottom: none;
         line-height: 1.2em;
    }
     #gNav .sub-menu a:hover:after {
         content: none;
    }
     #gNav .sub-menu li {
         display: block;
         font-size: 16px;
         padding: 0;
         margin: 0;
    }
     #gNav .sub-menu li:last-child {
         border-bottom: none;
    }
     #gNav ul > li:hover {
         -webkit-transition: all .5s;
         transition: all .5s;
    }
     #gNav ul > li:hover a,#gNav .current-menu-item a,#gNav .current-menu-parent a, .sns ul > li:hover a {
         color: #9fa8da;
    }
     #gNav li:hover ul.sub-menu {
         top: 80px;
         visibility: visible;
         opacity: 1;
         z-index: 9999;
    }
     #gNav li ul li:after {
         content: none;
    }
     #gNav li:hover ul.sub-menu a {
         color: #111;
    }
     #gNav .sub-menu li a:hover {
         background: #fff;
    }
     #gNav .contact_btn a:hover {
         color: #fff;
    }
	 
     .f_logo img {
         margin-bottom: 20px;
         width: 200px;
        }
	 
	}


 @media only screen and ( max-width : 480px ) {	 
	.nav li a {
    	font-size: 0.9em;
    	letter-spacing: 0.2em;
	}
	 
	 .sns ul.tab {
		 display: none;
	 }
	 
	 #about_ep, #brekkie_ep, #restaurant_ep {
		 padding: 20px;
	 }
	 
    .l-box, .m-box, .r-box  {
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;    
    }

	.blk {
		display: block;
	}
	 
	.container {
		padding: 0 20px;
	}
	 
	#footer {
    	padding: 0;
	}
	 
	 .dd-l {
    flex-basis: 35%;
	}
	 .box {
    height: auto;
	}
	}
	 
 @media only screen and ( max-width : 374px ) {
	.container {
		padding: 0 10px;
	}
	
	.sign .l-box, .sign .r-box {
		padding: 20px 0;
	}
	 	 
}