@charset "UTF-8";
/* SCSS Document */

/*
Theme Name: off Grid
*/

/*-------------------------------------------
	core-setting
-------------------------------------------*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}


/**PageNavi**/
.wp-pagenavi{
	margin-top:30px;
	text-align: center;
}


/**カタログ・資料請求**/

.content_wrap-document_request {
	width: 100%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
  }
  .document_request_title{
	font-size:1.6rem;
  }
  .document_request_title + p{
	font-size:1.2rem;
  }
  .content_wrap-document_request .section {
	text-align: center;
  }
  .content_wrap-document_request .formBox{
	max-width:1000px;
  }
  .document_request_flow {
	width: 90%;
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-flow: row wrap;
  }
  
  .document_request_item_wrap {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
  }
  
  .document_request_item_wrap>* {
	width: 90%;
	border:1px solid #e2e2e2;
	margin:0 auto 30px;
  }
  .document_item{
	display:none;
  }
  
  .document_request_item label{
	position: relative;
	/*display: flex;*/
	display:block;
	width:100%;
	/* height:100%; */
	padding:10px;
	flex-flow: row wrap;
	justify-content: center;
  }
  .document_request_item h3{
	font-size:0.96rem;
	height:3rem;
	display: flex;
	align-items: center;
	justify-content:center;
	width:100%;
  }
  .document_request_item p{
	text-align: left;
	line-height: 1.5;
	font-size:0.86rem;
	padding:1em;
  }
  .checkmark{
	display: none;
	bottom: 0;
	right: 0;
	width:100px;
	height: 100px;
	position: absolute;
  
	border:4px solid #0070ac;
	background-color: rgba(255,255,255,0.9);
  }
  .document_request_item img{
	pointer-events: none;
	/* max-height: 50%; */
	width: 60%;
	border:1px solid #f0f0f0;
  }
  .document_item:checked ~ .checkmark{
	display:block;
  }
  
  .checkboxbtn{
	border-radius: 5px;
	border:1px solid #0070ac;
	color: #0070ac;
	display: flex;
	align-items: center;
	justify-content: center;
	width:80%;
	margin: auto auto 10px;
	position: relative;
	height:30px;
  }
  .document_item:checked ~ .checkboxbtn{
	color:#fff;
	background-color: #0070ac;
  }
  .document_item:checked ~ .checkboxbtn::before{
	content:"";
	  display:block;
	  position:absolute;
	  border-left:5px solid #fff;
	  border-bottom:5px solid #fff;
	  width:25px;
	  height:13px;
	  -webkit-transform:rotate(-45deg);
	  transform:rotate(-45deg);
	  left:13px;
	  bottom:10px;
  }
  
  .checkmark:after{
	content:"";
	  display:block;
	  position:absolute;
	  border-left:5px solid #0070ac;
	  border-bottom:5px solid #0070ac;
	  width:50px;
	  height:25px;
	  -webkit-transform:rotate(-45deg);
	  transform:rotate(-45deg);
	  left:25px;
	  top:13px;
  }
  
  .document_request_item_wrap:after {
	content: "";
	display: block;
	width: 45%;
	height: 0;
  }
  
  .select_document {
	margin: 0 calc(50% - 50vw) 50px;
	width: 100vw;
	background-color: #0070ac;
	color: #fff;
	text-align: center;
  }
  .select_document h3{
	color: #fff;
  }
  
  .select_document_lists {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	height: 0;
	transition: height 1s ease-out;
  }
  
  .select_document_lists>* {
	width:20%;
	max-width: 150px;
	margin: 20px;
  }
  .document_request_item:not(.disable):hover{
	background-color: #d5eeff;
  }
  .popup {
	position: fixed;
	bottom: 0px;
	width: 100%;
	transition:all 0.5s ease-out;
	margin-bottom:0;
  }
  .popup .select_document_lists{
	height: 150px;
	transition: height 1s ease-out;
  }
  .static .select_document_lists{
	height:300px;
	transition: height 1s ease-out;
  }
  .content_wrap-document_request .formBox h3{
	border-left: 5px solid #000;
	padding-left: 10px;
  }
  .agreeBoxWrap{
	border:1px solid #e2e2e2;
	border-radius: 10px;
	padding:20px;
	line-height:1.8;
  }
  .agreeBoxWrap p{
	font-size:0.85rem;
  }
  @media screen and (min-width: 769px) {
	.document_request_item label{
	  max-height: 400px;
	}
	.document_request_item p{
	  height:7em;
	  padding: 10px;
	}
	.document_request_item img{
	  width: 37%;
	}
	.document_request_item img.wide{
	  width: 51.4%;
	}
	.popup {
	  position: fixed;
	  bottom: 0px;
	  right: 20px;
	  width: 300px;
	
	  transition:all 0.5s ease-out;
	}
	.popup .select_document_lists{
	  height: 150px;
	  transition: height 1s ease-out;
	}
	.document_request_item_wrap>* {
	  width: 32%;
	}
	.document_request_item_wrap:after {
	  width: 32%;
	  margin:0 auto 30px;
	}
	.document_request_item_wrap.row--4>* {
	  width: 23%;
	}
	.document_request_item_wrap.row--4:after {
	  width: 23%;
	  margin:0 auto 30px;
	}
  }
  @media screen and (min-width: 769px) and (max-width: 979px) {
	.document_request_item label{
	  padding:1vw;
	}
	.document_request_item h3{
	  font-size:1.6vw;
	}
	.document_request_item p{
	  font-size:1.4vw;
	  padding: 1.2em 0.8em;
	  height: 7.6em;
	}
	.document_request_item img{
	  width: 48%;
	}
	.document_request_item img.wide{
	  width: 67.6%;
	}
  }
/**WEB展示場を見る**/
.web_showroom_item_wrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
  }
  .web_showroom_item_wrap>* {
	width: 94%;
	border:1px solid #e2e2e2;
	margin:0 auto 30px;
  }
  .web_showroom_item label{
	position: relative;
	display:block;
	width:100%;
	padding:1vw;
	flex-flow: row wrap;
	justify-content: center;
  }
  .web_showroom_item h3{
	display: flex;
	align-items: center;
	justify-content:center;
	width:100%;
	margin-top:20px;
  } 
  .web_showroom_item h3 img{
	max-height:9vw;
	width:auto;
	height:auto;
	max-width:100%;
  }
  .web_showroom_item p{
	line-height: 1.5;
	font-size:2vw;
	padding:1em 0.5em;
  }
  .web_showroom_item img.main{
	display:block;
	max-width:70%;
	margin:auto;        
  }
  .web_showroom_item img.map{
	display:block;
	max-width:90%;
	margin:3vw auto ;        
  }
  @media screen and (max-width: 480px) {
	.web_showroom_item p{
	  font-size: 3.6vw;
	}
	.web_showroom_item p br{
	  display: none;
	}
  }
  @media screen and (min-width: 769px) {
	.web_showroom_item_wrap>* {
		width:48%
	}
	.web_showroom_item label{
	  padding:10px;
	}
	.web_showroom_item h3 img{
	  max-height: 2.5rem;
	}
	.web_showroom_item p{
	  font-size:0.86rem;
	  padding:15px 10px;
	}
	.web_showroom_item img.main{
	  max-height:300px;
	  max-width:70%;
	}
	.web_showroom_item img.map{
	  max-height:150px;
	  max-width:90%;
	  margin:20px auto ;        
	}
  }
  @media screen and (min-width: 769px) and (max-width: 1099px) {
	  .web_showroom_item label{
		  padding:1vw;
	  }
	.web_showroom_item p{
	  font-size: 1.2vw;
	  padding: 1.5vw 0vw;
	}
  }
  
  .center{
	text-align: center;
  }
  
  
  
  .catalogitem{
	display:flex;
	flex-direction: column;
  }
  .catalogitem h3{
	margin-top:0.75rem;
	margin-bottom: auto;
	height:3rem;
  }
  .catalogitem p{
	margin:0 auto;
	height:auto;
  }
  .catalogitem figure p{
	text-align: center;
	margin:0;
	padding:0;
  }
  .catalogitem .catalogfoot{
	text-align: left;
	margin-bottom: 0;
	margin-top:auto;
	height:120px;
	font-size:0.9rem;
  }
  .catalogitem .noborifoot{
	height:120px;
  }
  
  .item_poster figure{
	margin:0;
  }
  
  .catalog-info{
  margin-bottom:10px;
  font-size:0.9rem;
  }
  
  .main_inner {
	padding-top:40px;

  }

  .reservation-information{
	margin-bottom: 40px;
  }

  .sumpricewrap{
	text-align: right;
	max-width:900px;
	padding:0 20px;
	margin:20px auto;
  }
  
  .sumpricesection{
	border-radius: 10px;
	border:5px double #e2e2e2;
	padding:20px;
	max-width:900px;
	margin:20px auto;
	display:none;
  }
  
  /***導入事例***/
  .reservation-information{
	font-size:0.9rem;
	margin-bottom:10px;

  }
  @media screen and (max-width: 769px) {
	.formBox .form  table,
	.formBox .form  tbody{
		display: contents;
	}
	.formBox .form  tr{
		display: flex;
		flex-direction: column;
		padding-top:20px;
		padding-bottom:20px;
	}
	 .formBox .form table tr th{
		display: flex;
	
		width: 100%;
	}
	 .formBox .form table tr td{
		display: flex;
	
		width: 100%;
	}
	 .formBox .form table tr td p{
		width:100%;	
	}
	 .formBox .form table tr td textarea{
		width: 100%;
		max-width: 100%;
	}
  }


  input[type="text"],input[type="email"],input[type="serach"],input[type="password"],textarea {
	padding: 8px 8px 7px;
	border: solid 1px #bfbfbf;
	border-radius: 0;
	background: #fff;
	box-shadow: inset 1px 2px 1px rgba(191, 191, 191, 0.6);
	-webkit-appearance: none;
}

.CategorylistWrap{
	display:grid;
	width:100%;
	max-width:980px;
	margin: 0 auto;
	grid-template-columns: 1fr 1fr 1fr;
	gap:20px;
  }
  .CategoryItem{
	background-color: hsl(220deg, 70%, 95%);
	border:1px solid hsl(220deg,100%,70%);
  }
  .CategoryItemSaleTool .CategoryItem{
	background-color: hsl(160deg, 70%, 95%);
	border:1px solid hsl(160deg,100%,70%);
  }
  .CategoryItemattrActingcustomerstool .CategoryItem{
	background-color: hsl(100deg, 70%, 95%);
	border:1px solid hsl(100deg,100%,70%);
  }
  .CategoryItemDesigntool .CategoryItem{
	background-color: hsl(40deg, 65%, 97%);
	border:1px solid hsl(40deg,100%,70%);
  }
  .CategoryItem{
  
	display: flex;
	border-radius: 10px;
  }
  .CategoryItem a{
	display:flex;
	justify-content: center;
	padding:10px;
	width: 100%;
	height: 100%;
	flex-flow: row wrap;
  }
  .CategoryItemTitle{
  
	font-weight: 700;
  }
  .CategoryItemFigure{
	display: flex;
	align-items: center;
	justify-content: center;
	width:100%;
	max-width:300px;
	aspect-ratio: 1/1;
  
	border-radius: 20px;
  }
  @media screen and  (max-width:768px)  {
	.CategorylistWrap{
	  grid-template-columns: 1fr 1fr;
	}
	.CategoryItemTitle{
  
	  font-size: 3.5vw;
	}
  }


  .top_news_tit .ja {
	font-size: 0.94rem;
  }
  
  .top_news_tit .ja-member {
	font-size: 1.2rem;
  }

  .top_news_tit {
	color: #040000;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	margin-bottom: 1em;
  }
  
  
/**説明動画**/
.infomovie-cnt{
	max-width: 1060px;
    padding: 30px 30px 0;
    margin: 0 auto;
}
.infomovie-cnt h3{
	font-size:1em;
	margin-top:20px;
	color:#000;
}
ul.movie_cattab {
	list-style: none;      /* リストマーカーを非表示に */
	margin: 0;
	padding: 0;
	display: flex;         /* 横並びに */
	flex-wrap: wrap;
	  gap: 10px;
  
  }
  
  ul.movie_cattab li {
	margin-right: 10px;    /* 各リンク間に余白を設定 */
  }
  
  ul.movie_cattab li a {
	display: block;
	padding: 10px 20px;
	border: 1px solid #ccc;
	background-color: #f5f5f5;
	color: #333;
	text-decoration: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
  }
  
  ul.movie_cattab li a:hover {
	background-color: #e9e9e9; /* ホバー時の背景色 */
  }
  
  ul.movie_cattab li.active a {
	background-color: #007BFF; /* アクティブなリンクの背景色 */
	border-color: #007BFF;
	color: #fff;
  }
  
  .CategoryMovieWrap{
	display: flex;
	flex-direction: column;
	align-items: center;
  }