@charset "utf-8";

/*--- Font ---*/

@font-face{
  font-family: 'Baskerville';
  src:url('assets/fonts/Baskerville.woff')format('woff'),
    url('assets/fonts/Baskerville.eot')format('oldIE'),
    url('assets/fonts/Baskerville.ttf')format('truetype');
}
@font-face{
  font-family: 'Geogtq-Bd';
  src:url('assets/fonts/Geogtq-Bd.woff')format('woff'),
    url('assets/fonts/Geogtq-Bd.otf')format('opentype');
}
@font-face{
	font-family: 'Gotham-Bold';
 	src:url('assets/fonts/Gotham-Bold.woff')format('woff'),
  	  url('assets/fonts/Gotham-Bold.otf')format('opentype');
}
@font-face{
	font-family: 'GothamCondensed-Bold';
 	src:url('assets/fonts/GothamCondensed-Bold.woff')format('woff'),
  	  url('assets/fonts/GothamCondensed-Bold.otf')format('opentype');
}
@font-face{
	font-family: 'NotoSansCJKjp-Regular';
 	src:url('assets/fonts/NotoSansCJKjp-Regular.woff')format('woff'),
  	  url('assets/fonts/NotoSansCJKjp-Regular.otf')format('opentype');
}

/*---Common---*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}
html{
	font-size: 10px;
	font-family: "NotoSansCJKjp-Regular","メイリオ","ヒラギノ角ゴシック","MS Pゴシック",sans-serif;
	font-weight: 500;
}
body {
	width: 100%;
	margin: 0;
	height: auto;
	height: 100%;
	min-height: 100vh;
	position: relative;
	color: #fff;
	line-height: 1.7;
	box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,
div,p,a,ol,ul,table{
	margin: 0;
	padding: 0;
}

main {
	min-height: 100vh;
}
.container{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.contents{

}
.content_wrap{
	width: 100%;
	max-width: 1242px;
	margin: 0 auto;
}

.flex_container,
.flex_container_cancellation_none{
	display: flex;
	margin: 0 auto;
}
.sp_only{
	display: none;
}
.pc_only{
	display: inline-block;
}

div,a,p,li,table{
	font-size: 1.4rem;
}
h1{
	font-size:  rem;
}
h2{
	font-size:  1.7rem;
}
h3{
	font-size:  1.4rem;
}
h4{

}
h5{
	font-size: 0.9rem;
}
.text_big{
	font-size: 4.5rem;
}
.text_small{
	font-size: 1rem;
}
.text_color_red{
	color: #a40000;
}

img{
	width: 100%;
}
li{
	list-style-type: none;
}
a{
	text-decoration: none;
	color: #fff;
}

p{
	line-height: 2.2;
}
.text_center{
	text-align: center;
}
.text_right{
	text-align: right;
}
.hidden{
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	height: 0px;
	display: block;

}
.text_bold{
	font-weight: bold;
}
.img_right{
	flex-direction: row-reverse;
}
/*---header---*/
nav{
	z-index: 100;
}
.logo_text div{
	z-index: 100;
}
.bg{
	position: absolute;
    height: 60px;
    z-index: -1;
    width: 100%;
    top: 0px;
}
/*グローバルメニュードロップダウン*/
nav ul li.menu_single{
	position: relative;
}
 
nav ul li.menu_single ul.menu_level {
	display: none;
	position: absolute;
	margin: 0;
	padding: 0;
}
nav ul li.menu_single ul.menu_level li{
	margin: 0 auto;
	height: 25px;
    justify-content: center;
    align-items: center;
    display: flex;
}
nav ul li.menu_single:hover ul {
	display: block;
	position: absolute;
    text-align: center;
    margin-top: 92px;
    width: 100px;
}
header.fixed nav ul li:hover{
	background-color: rgba(3, 3, 3, 0.5); 
}
header.fixed nav ul li.menu_single ul.menu_level li:hover {
    background-color: rgba(3, 3, 3, 0.4); 
}
header.fixed nav ul li.menu_single:hover ul{
	background-color: rgba(3, 3, 3, 0.25);
}

/*グローバルメニュー２コンテンツ目で出現*/
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.fixed_bg{
	background-color: rgba(3, 3, 3, 0.4);
}
/*header.fixed .header_content_wrap{
	background-color: rgba(3, 3, 3, 0.4);
}*/
.fixed nav li{
line-height: 20px;
}
/*header .content_wrap{
	position: relative;
}*/
header .container{
	posi.header_content_wraption: relative;
}
header {
	position: absolute;
	/*background-color: rgba(3, 3, 3, 0.4); */
	z-index: 1;
	width: 100%;
	height: 60px;
}
header .contents{
	width: 100%;
	max-width: 1242px;
    margin: 0 auto;
}
nav{
	margin: 0 0 0 auto;
	font-family: Baskerville,"NotoSansCJKjp-Regular",sans-serif;
}
nav li{
	/*margin-left: 35px;*/
	height: 60px;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100px;
}
.slider_wrap{
	position: relative;
}
.slider_logo{
	position: absolute;
	z-index: 0;
	width: 30%;
    top: 20%;
    left: 35%;
}
.logo_text{
	margin-left: 35px;
	justify-content: center;
    align-items: center;
    display: flex;
    height: 60px;
    padding-right: 20px;
}
/*---footer---*/
footer{
	font-family: Baskerville,"NotoSansCJKjp-Regular",sans-serif;
	position: relative;
	box-sizing: border-box;
}
footer .container{
	background-color: rgba(3, 3, 3, 0.4); 
	/*height: 50PX;*/
	box-sizing: border-box;
	padding-top: 20px;
	padding-bottom: 20px;
	/*position: absolute;*/
	bottom: 0;
}
footer .contents{
	width: 100%;
	max-width: 1145px;
}
footer .footer_nav{
	margin: 0 0 0 auto;
}
footer .footer_nav div{
	margin-left: 30px;
}
/*---top page---*/
.box{
   /* height: 100vh;*/
    
}
.slick-dots li{
	display: none;
}
.slides img{
	vertical-align: bottom;
}
.top h2{
	margin-top: 10px;
    margin-bottom: 20px;
}

.concept .contents{
	width: 100%;
	max-width: 587px;
	background-color: rgba(3, 3, 3, 0.4);
	padding-right: 50px;
	padding-left: 60px;
	padding-top: 30px;
	padding-bottom: 45px;
}
.link{
	width: 200px;
	border: #fff solid 1px ;
	text-align: center;
	margin-top: 25px;
	padding-top: 8px;
    padding-bottom: 8px;
    margin-right: 25px;
    font-size: 1rem;
}
.link:hover {
    background-color: rgba(3, 3, 3, 0.4); 
}
.link::after{
	content: '';
    color: #fff;
    display: inline-block;
    background: url(assets/img/top/arrow.png)no-repeat;
    vertical-align: -1px;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    background-size: contain;
}

.concept{
	background : url(assets/img/top/concept.jpg)no-repeat ;
	background-size: cover;
	background-position:  center center; 
}
#concept .content_wrap{
	padding-top: 115px;
	padding-bottom: 40px;
}
#concept h3{
	margin-top: 30px;
}
#concept p{
	margin-top: 20px;
	line-height: 2.2;
}
#concept .contents div p:last-child{
	margin-top: 25px;
}

.top .text_wrap{
	width: 100%;
	max-width: 455px;
}

.lb-outerContainer{
	margin-top: 50px;
}

/*--2020.1追加--*/

#gallery .contents{
	padding-top: 105px;
	max-width: 1150px;
    margin: 0 auto;
}
#gallery .case{
	padding-right: 30px;
	padding-left: 10px;
}
.top .case .case1,
.top .case .case2,
.top .case .case3,
.top .case .case4,
.top .case .case5{
	width: 100%;
	max-width: 310px;
	background-color: #333;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 25px;
	min-height: 200px;
	margin-bottom: 5px;
}
#gallery p{
	font-size: 0.7rem;
}
#gallery .price{
	font-size: 0.8rem;
	padding-top: 15px;
}
.gallery a{
	/*display: inline-flex;*/
	/*vertical-align: bottom;*/
}
.gallery{
	text-align: center;
	margin-bottom: 40px;
}
.gallery .slider_responsive {
	display: flex;
	flex-wrap: wrap;
}
.gallery .slider_responsive > div {
	margin: 2px;
	position: relative;
}
.gallery a::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.gallery img{
	width: 200px;
	height: 200px;
	object-fit: cover;
	margin: 0 auto;
	/*padding-bottom: 5px;*/
	/*padding-right: 5px;*/
	vertical-align: top;
}
.lb-outerContainer {
	margin: 0 auto !important;
}
.lb-container::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.lb-container::after {
	content: '(c) inout-journey.us';
	color: #fff;
	position: absolute;
	bottom: 20px;
	right: 20px;
}

/*---case1---*/
main.case1_page{
	background : url(assets/img/case1/case01_bg.jpg)no-repeat ;
	background-size: cover;
}
/*---case2---*/
main.case2_page{
	background : url(assets/img/case2/case02_bg.jpg)no-repeat ;
	background-size: cover;
}
/*---case3---*/
main.case3_page{
	background : url(assets/img/case3/case03_bg.jpg)no-repeat ;
	background-size: cover;
}
/*---case4---*/
main.case4_page{
	background : url(assets/img/case4/case04_bg.jpg)no-repeat ;
	background-size: cover;
}
/*---case5---*/
main.case5_page{
	background : url(assets/img/case5/case05_bg.jpg)no-repeat ;
	background-size: cover;
}
/*---case5---*/
main.contact{
	background : url(assets/img/case5/case05_bg.jpg)no-repeat ;
	background-size: cover;
}
/*---privacy---*/
main.privacy{
	background : url(assets/img/case5/case05_bg.jpg)no-repeat ;
	background-size: cover;
}


/*--- case---*/
#case_page .contents,
.privacy .contents,
.contact .contents {
	width: 100%;
	max-width: 1045px;
	margin: 0 auto;
	padding-top: 126px; 
	padding-bottom: 55px;
}
.privacy .contents {
	max-width: 750px;
}
h5{
	width: 62px;
	height: 17px;
	background-color: rgba(3, 3, 3, 0.5);
	margin-bottom: 10px;
	text-align: center;
}
h2{
	margin-top: 20px;
	margin-bottom: 50px;
}
.example{
	margin-top: 35px;
}
#case_page .details{
	width: 100%;
	max-width: 375px;
}
.details_img{
	width: 66%;
	max-width: 665px;
}
.case4_page .pagecontents_wrap,
.case5_page .pagecontents_wrap{
	margin-left: 10px;
}
.contact{
	text-align: right;
	margin-bottom: 20px;
}
.contact > div{
	background-color: #fff;
	width: 125px;
	display: inline-block;
	text-align: center;
	font-size: 0.9rem;
	font-weight: bold;
	height: 27px;
	padding-top: 5px;
}
.contact > div > a{
	color: #000;
	font-size: 0.9rem;
}
.contact > div a::after{
	content: '';
    color: #fff;
    display: inline-block;
    background: url(assets/img/case1/arrow_black.png)no-repeat;
    width: 9px;
    height: 9px;
    margin-left: 9px;
    background-size: contain;
    vertical-align: -2px;
}
.contact > div:hover {
    background-color: rgba(3, 3, 3, 0.4); 
}
.map{
	width: 100%;
    max-width: 565px;
}
.case4_page .map,
.case5_page .map{
	width: 100%;
    max-width: 335px;
}
.side_img{
	display: grid;
	text-align: right;
}
.side_img ul li a img{
	width: 99px;
    height: 96px;
    object-fit: cover;
}
.side_img ul li,
.side_img ul li a{
	font-size: 0;
}

.side_img img{
	width: 100%;
    max-width: 100px;
}
.case4_page .side_img img,
.case5_page .side_img img{
	width: 100%;
    max-width: 160px;
    height: 120px;
    object-fit: cover;
}
.case4_page .side_img,
.case5_page .side_img{
	flex-wrap: wrap;
	display: flex;
	margin-top: 115px;
}
.case4_page .side_img a,
.case4_page .side_img img,
.case5_page .side_img a,
.case4_page .side_img img{
	font-size: 0;
}
.case4_page .couse,
.case5_page .couse{
	margin-top: 30px;
}
.couse{
	margin-top: 15px;
}
.couse ul li:nth-child(odd){
	width: 60px;
	height: 80px;
	background-color: rgba(3, 3, 3, 0.5);
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	justify-content: center;
    align-items: center;
    display: flex;
    font-family: "GothamCondensed-Bold","NotoSansCJKjp-Regular","メイリオ",sans-serif;
    letter-spacing: 1px;
}
.couse ul li:last-child{
	margin-right: 0;
}
.couse ul li.arrow::after{
	content: '';
    color: #fff;
    display: inline-block;
    background: url(assets/img/top/arrow.png)no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 33px;
}
.couse ul li:last-child::after{
	content: none;
}
.privacy .details{
	padding-bottom: 25px;
	width: 100%;
}
.privacy .content h2 {
	margin: 30px auto 10px;
	text-align: center;
	font-size: 3.6rem;
}
.privacy .content.overview h2 {
	text-align: left;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.33;
}
.privacy .content .table {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	padding-top: 25px;
}
.privacy .content .table .th {
	width: 174px;
	padding-bottom: 24px;
}
.privacy .content .table .td {
	width: calc(100% - 174px);
	padding-bottom: 24px;
}
.privacy .overview .revision {
	width: 100%;
	max-width: 240px;
	margin: 0;
	margin-left: auto;
	padding-top: 26px;
}


/*----ブレークポイント----*/
@media only screen and (max-width:950px){
	/*case_page*/
	.details_img .flex_container,
	.couse ul, .side_img ul{
		flex-wrap: wrap;
    	display: inline-flex; 
	}
	#case_page .details_img{
		text-align: center;
		margin: 0 auto;
		width: 100%;
	}
	.case4_page .contact,
	.case5_page .contact{
		text-align: center;
	}
}
@media only screen and (max-width:750px){
	.sp_only{
		display: inline-block;
	}
	.pc_only{
		display: none;
	}
	
	.flex_container{
		display:  block;
	}
	/*ハンバーガーメニュー*/
	nav{
		display: none;
		position: absolute;
		/*top:72px;*/
		width: 100%;
		background-color: rgba(3, 3, 3, 0.7);
		left: 0;
	}
	header nav ul{
		display: block;
		margin: 0 auto;
		width: 90%;
	}
	header nav ul li{
	/*	margin: 0 auto;*/
	/*	text-align: center;*/
		padding: 0px;
		height: 45px;
		line-height: 45px;
		justify-content: unset;
	}
	
	header nav ul li:last-child{
		border: none;
	}
	header nav ul li a{
		display: block;
	}
	header nav {
		padding-bottom: 50px;
		bottom: initial;
		margin-top: 13px;
	}
	/*開閉ボタン*/
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 2px;
		background: #fff;
		position:absolute;
		width: 30px;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:8px;
	}
	#nav_toggle span:nth-child(3){
		top:16px;
	}
	#nav_toggle{
		position: absolute;
		right: 50px;
		top: 20px;
	}
	nav ul li.menu_single:hover ul{
		background-color: unset;
	}

	nav ul li.menu_single ul.menu_level{
		padding-left: 160px;
	}
	nav ul li.menu_single ul.menu_level li{
		margin-bottom: 15px;
	}
	header.fixed nav ul li.menu_single:hover ul{
		background-color: initial;
	}
	main.top .content_wrap{
		width: 95%;
		margin: 0 auto;
		/*text-align: center;*/
	}
	header .header_content_wrap{
		padding-top: 15px;
	}
	.top #inout-house .text_wrap,
	.top #trailer .text_wrap{
		margin: 0 auto;
	}
	#concept .link{
		display: block;
		margin: 0 auto;
    	margin-top: 20px;
	}
	
	.slider_responsive{
		display: block;
		text-align: center;
	}

	footer .flex_container{
		display: flex;
	}
	footer .contents{
		width: 95%;
	}
	.couse{
		padding-bottom: 30px;
	}
	/*2020.1追加*/
	.top .case .case1,
	.top .case .case2, 
	.top .case .case3, 
	.top .case .case4, 
	.top .case .case5{
		margin: 10px auto;

	}
	#gallery .case{
		padding-right: 0;
		padding-left: 0;
	}
	#gallery p,
	#gallery .price {
		font-size: 1.2rem;
	}
	.gallery{
		margin-top: 40px;
	}
	.gallery .slider_responsive {
		justify-content: center;
	}
	.gallery img{
		max-width: 200px;
		max-height: 200px;
		width: calc(95vw / 3 - 4px);
		height: calc(95vw / 3 - 4px);
	}

	.gallery img1{
		padding-bottom: 2px;
		padding-right: 2px;
	}
	.privacy .contents{
		width: 95vw;
	}
}
@media only screen and (max-width:500px){
	.slider_responsive{
		display: grid; 
    	grid-template-columns: repeat(3,1fr);
	}
	
/*	.gallery img{
		max-width: 200px;
		max-height: 200px;
		width: calc(95vw / 3 - 4px);
		height: calc(95vw / 3 - 4px);
	}
*/
}