@charset "UTF-8";
/* CSS Document */
/* CSS Document */
.subpage .single_col .flex_box {
  width: 100%;
  max-width: 970px;
  margin: 0 auto 30px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .subpage .single_col .flex_box {
    flex-direction: row;
    justify-content: space-between;
  }
}
.subpage .single_col .flex_box .box {
  background-color: #b69b50;
  width: calc(100% - 10px);
  margin: 0 auto 5px;
}
.subpage .single_col .flex_box .box:nth-of-type(even) {
  background-color: #c6b177;
}
@media (min-width: 768px) {
  .subpage .single_col .flex_box .box {
    width: calc((100% / 3) - 6px);
    justify-content: space-between;
  }
}
.subpage .single_col .flex_box .box h2 {
  font-size: 2.4rem;
  text-align: center;
  color: #fff;
  padding: 10px;
}
.subpage .single_col .flex_box .box img {
  display: block;
  margin: 5px auto;
}
@media (min-width: 768px) {
  .subpage .single_col .flex_box .box img {
    margin: 10px auto;
  }
}
.subpage .single_col .flex_box .box p {
  font-size: 1.4rem;
  color: #fff;
  padding: 10px 20px;
}
.subpage .single_col .catch h1, .subpage .single_col .catch h2 {
  text-align: center;
  font-size: 6vw;
  color: #ba9132;
  line-height: 1.25;
  margin: 30px auto 10px;
}
@media (min-width: 768px) {
  .subpage .single_col .catch h1, .subpage .single_col .catch h2 {
    font-size: min(4.8rem, 4vw);
  }
}
.subpage .single_col .photo_box {
  background: #ddc580;
  background: linear-gradient(90deg, #ddc580 0%, #fffbd7 25%, #fffbd7 75%, #ddc580 100%);
  width: 100%;
}
.subpage .single_col .photo_box .inner {
  width: 100%;
  max-width: 970px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.subpage .single_col .photo_box .inner p {
  width: calc(100% / 3);
}
.subpage .single_col .photo_box .inner p img {
  display: block;
  width: 100%;
}
.subpage .single_col .article ul.square {
  font-size: min(2rem, 3.8vw);
  background-repeat: no-repeat;
  background-position: right bottom;
  margin-left: 10px;
}
@media (min-width: 768px) {
  .subpage .single_col .article ul.square.bg1 {
    background-image: url("/img/business/1.png");
  }
  .subpage .single_col .article ul.square.bg2 {
    background-image: url("/img/business/2.png");
  }
}
.subpage .single_col .article ul.square li {
  list-style-type: none;
  text-indent: -1.5em;
  margin-left: 1.5em;
}
.subpage .single_col .article ul.square li::before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-right: .5em;
  background: #ba9132;
}
.subpage .single_col .article ul.square li span {
  font-size: 0.7em;
  padding-left: 3em;
  vertical-align: middle;
  display: block;
  margin: -4px 0 4px;
}

/*
.subpage .article {
	text-align: left;
	strong{
		color: $base_color;

	}
	.greet{
		margin: 0 10px;
		.ph{
			margin-right: 20px;
			float: right;
			width: 40%;
			margin: 0 0 10px 10px;
			img{
				width: 100%;
			}
		}
		p{
			text-align: left;
			font-size:  min(2rem,3.8vw);
		}
	}
	@media (min-width: 768px) {
		.greet{
			display: flex;
			flex-direction: row-reverse;
			.ph{
				margin-right: 20px;
				width: 100%;
				margin: 0 10px 10px  0;
				img{
					width: 100%;
				}
			}
			p{
				text-align: left;
				font-size: 1.8rem;
			}
		}
	}
	.company_overview{
		display: flex;
		flex-direction: column;

		.flex_dl{
			font-size:  min(2rem, 3.8vw);
			margin: 10px;
			dl{
				display: flex;
				padding: 0;
				margin: 0 0 5px;
				dt{
					width: 6em;
				}
				dd{
					width: calc(100% - 7em);
				}
			}
		}
		.ph{
			margin: 0 10px;
			img{
				width: 100%;
			}
		}
	}
	@media (min-width: 768px) {
	.company_overview{
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.flex_dl{
			width:90%;
			font-size: 1.8rem;
			dl{
				display: flex;
				padding: 0;
				margin: 0 0 5px;
				dt{
					width: 6em;
				}
				dd{
					width: calc(100% - 7em);
				}
			}
		}
		.ph{
			width: 50%;
			
			img{
				width: 100%;
			}
		}

	}
		
		
		
	}
	.history{
		.flex_dl{
			font-size:  min(2rem, 3.8vw);
			dl{
				display: flex;
				padding: 0 0 10px;
				margin: 0 0 5px;
				border-bottom: 1px dotted #646464;
				dt{
					width: 10em;
				}
				dd{
					width: calc(100% - 11em);
				}
			}
		}
	}
	@media (min-width: 768px) {
	.history{
		.flex_dl{
			font-size: 1.8rem;
			dl{
				display: flex;
				padding: 0 0 10px;
				margin: 0 0 5px;
				dt{
					width: 9em;
				}
				dd{
					width: calc(100% - 10em);
				}
			}
		}
	}
	}
	
	ul.maru{
		font-size: min(2rem, 3.8vw);
		>li{
			list-style-type: none;
			&::before{
				content: "○";
			}
			ol{
				counter-reset: my-counter;
				list-style: none;
				padding: 0 0 0 1em;
				margin: 0;
				>li{
					line-height: 1.5;
					padding-left: 30px;
					position: relative;
					&::before {
						content: counter(my-counter);
						counter-increment: my-counter;
						background-color: #fff;
						border: 1px solid #333;
						border: 1px solid;
						border-radius: 50%;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 1.2em;
						width:  1.2em;
						color: #000;
						font-size: 85%;
						line-height: 1;
						position: absolute;
						top: 4px;

						left: 0;
						margin:auto;
					}
				}
			}
		}
		
		
	}
	li ul{
		padding: 0 0 0 2em;
	}

	.tokuteikasan{
		h2{
			background:$base_color;
			color: #fff;
			font-size: 2rem;
			text-align: center;
			display: block;
			padding: 10px 60px;
			margin: auto;
			width: 20em;
			max-width: calc(100% - 20px);
		}
		p{
			text-align: center;
		}
	}
	
	
	
	.box{
		background: #fffacd;
		padding: 20px;
		border-radius: 8px;
		margin:0 auto 40px;
		max-width: calc(100% - 20px);
		dl{
			dt{
				font-size: 1.8rem;	
			}
			dd{
				font-size: 1.6rem;
				margin-left: 40px;
			}
		}
	}
}

.icon { grid-area: icon; }

.name { grid-area: name; }

.ph { grid-area: ph; }

.text { grid-area: text; }


.floor{
	@include content-width();
	margin-bottom: 80px;
	.article{
		border-top: 1px solid $base_color;
		padding: 20px 0;
		margin: 20px auto;
		width: calc(100% - 20px);
		.grid_container {  display: grid;
		  grid-template-columns: 80px auto;
		  grid-template-rows: auto auto;
		  gap: 10px 10px;
		  grid-auto-flow: row;
			align-items: center;
			grid-template-areas:
			"icon name "
			"text text";
		}

		.icon { grid-area: icon;
			img{
				width: 100%; 
			}
		}

		.text { grid-area: text;
			font-size: 1.4rem;
			img{
				float: right;
				width: 50%;
				margin: 0 0 5px 5px;
			}
		}

		.name { grid-area: name;
			h1{
				font-size: 2rem;
				color: $base_color;
				line-height: 1.2;
			}
		
		
		
		}

		.ph { grid-area: ph; 
			img{
				width: 100%;
			}
		}
		.floor_ph{
			width: max-content;
			
			max-width:calc(100% - 20px);
			margin: auto;
			img{
				width: 100%;
			}
			.btn{
				background: rgba($base_color,50%);
				display: block;
				color: #fff;
				text-align: center;
				padding: 8px;
				font-size: 2.0rem;
				border-radius: 4px;
				text-decoration: none;
			}
		}
		
	}
}

@media (min-width: 768px) {
	
	
.floor{
	@include content-width();
	margin-bottom: 80px;
	.article{
		border-top: 1px solid $base_color;
		padding: 20px 0;
		margin: 20px auto;
		.grid_container { 
			display: grid;
			margin-bottom: 40px;
			grid-template-columns: 120px auto minmax( 100px,50%);
			grid-template-rows: auto auto;
			gap: 0px 10px;
			grid-auto-flow: row;
			grid-template-areas:
			"icon name ph"
			"text text ph";
		}

		.icon { grid-area: icon; }

		.name { grid-area: name;
			h1{
				font-size:min(2.6rem, 2.6vw);
				color: $base_color;
				line-height: 1.5;
			}
		
		
		}

		.ph { grid-area: ph; }

		.text { grid-area: text;
					font-size: 1.8rem;

		
		}
		.floor_ph{
			width: max-content;
			
			max-width:calc(100% - 20px);
			margin: auto;
			img{
				width: 100%;
			}
			.btn{
				background: rgba($base_color,50%);
				display: block;
				color: #fff;
				text-align: center;
				padding: 10px;
				font-size: 2.6rem;
				border-radius: 4px;
				text-decoration: none;
			}
		}
		
	}
}
	
}


.flex_box{
	@include content-width();
	display: flex;
	flex-direction: column;
	.box{
		padding: 10px 0 0;
		width: calc(100% );
		background: $base_color;
		margin: 1px auto;
		color: #fff;
		font-size: 1.4rem;
		h2{
			font-size:2.4rem; 
			text-align: center;
		}
		p{
			padding:5px 20px;
		}
		img{
			display: block;
			margin:5px auto;
		}
		&:nth-child(2){
			background: lighten($base_color,10%);
		}
	}
}


.photo_box{
	margin-bottom: 60px;
	background-size: auto auto;
	background-color: rgba($base_color,70%);
	background-image: repeating-linear-gradient(0deg, transparent, transparent 6px, rgba(255, 255, 255, 0.5) 6px, rgba(255, 255, 255, 0.5) 7px );
	.inner{
		@include content-width();
		display: flex;
		flex-wrap: wrap;
		p{
			width: calc(100% / 3);
			display: block;
			img{
				display: block;
				width: 100%;
			}
		}
	}
}
.bana_box{
	ul{
		display: flex;
		justify-content: center;
		align-items: center;
		list-style-type: none;
		margin: 10px;
		img{
			width: 100%;
		}

	}
	p{
		text-align: center;
		line-height: 1.2;
		a{
			background: $base_color;
			color: #fff;
			display: inline-block;
			font-size: 2.4rem;
			text-decoration: none;
			padding: 5px 50px;
			border-radius: 2em;
			margin: 10px auto;
		}
	}
}

.news{
	border-top:30px solid rgba($base_color,45%);
	background: rgba($base_color,10%);
	padding: 30px 0;
	.inner{
		@include content-width(calc(100% - 20px));
		dl{
			display: flex;
			flex-direction: column;
			line-height: 2;
			padding: 5px 0;
			dt{
				padding: 0;
				margin-right: 10px;
			}
			dd{
				padding: 0;
				a{
					color: #000;
				}
			}
		}
		p.link{
			text-align: right;
			a{
				display: inline-block;
				text-decoration: none;
				background: rgba($base_color,50%);
				color: #000;
				padding: 3px 10px;
				border-radius: 4px;
			}
		}
		
	}
}

.article{
	text-align: center;
	margin-bottom: 50px;
	h2{
		font-size: min(4.8rem,5vw);
		text-align: center;
		color: $base_color;
	}
	p{
		font-size: 2rem;
		font-size: min(2rem,3.5vw);
		line-height: 2;
	}
	.btn_block{
		a{
			background: rgba($base_color,50%);
			text-decoration: none;
			color:#fff;
			width: calc(100% - 20px);
			font-size: 2rem;
			padding: 5px 0;
			margin: 10px auto;
			text-align: center;
			display: inline-block;
			border-radius: 4px;
			
		}
	}
}
.category_icon {
	font-size: 1.2rem;
	padding: 3px 10px;
	margin-right: 1em;
	border-radius: 20px;
  i {
    font-style: normal;
	}
}

@media (min-width: 768px) {
.flex_box{
	@include content-width(calc(100% - 20px));
	display: flex;
	flex-direction: row;
	margin-top: -50px;
	margin-bottom: 30px;
	.box{
		padding: 30px 0 0;
		width: 33%;
		background: $base_color;
		margin: 1px;
		color: #fff;
		font-size: 1.4rem;
		h2{
			font-size:2.4rem; 
			text-align: center;
		}
		p{
			padding: 20px;
		}
		img{
			display: block;
			margin:10px auto;
		}
		&:nth-child(2){
			background: lighten($base_color,10%);
		}
	}
}
	
.news{
	border-top: 60px solid rgba($base_color,45%);
	.inner{
		
		font-size: 1.8rem;
		dl{
			display: flex;
			flex-direction: row;
			line-height: 2;
			padding: 5px 0;
			dt{
				padding: 0;
				margin-right: 10px;
			}
			dd{
				padding: 0;
			}
		}
	}

}
	
.article{
	text-align: center;
	margin-bottom: 50px;
	h2{
		font-size: min(4rem,4vw);
		text-align: center;
		color: $base_color;
	}
	p{
		font-size: 2rem;
		font-size: min(2rem,2vw);
	}
	.btn_block{
		display: flex;
		justify-content: center;
		div{
				width: 380px;
				max-width: 49%;
			a{
				background: rgba($base_color,50%);
				text-decoration: none;
				font-size: 2.6rem;
				padding: 5px 0;
				margin:50px 10px;
				text-align: center;
				display: inline-block;
				border-radius: 4px;
			}
			img{
				display: block;
				width: 100%;
			}
		}
	}
}
	
	
	
}
*/