/* CSS Document */
/* CSS Document */
.subpage .article .greet {
  margin: 0 10px; }
  .subpage .article .greet .ph {
    margin-right: 20px;
    float: right;
    width: 40%;
    margin: 0 0 10px 10px; }
    .subpage .article .greet .ph img {
      width: 100%; }
  .subpage .article .greet p {
    text-align: left;
    font-size: min(2rem, 3.8vw); }
@media (min-width: 768px) {
  .subpage .article .greet {
    display: flex; }
    .subpage .article .greet .ph {
      margin-right: 20px;
      width: 100%;
      margin: 0 10px 10px 0; }
      .subpage .article .greet .ph img {
        width: 100%; }
    .subpage .article .greet p {
      text-align: left;
      font-size: 1.8rem; } }
.subpage .article .company_overview {
  display: flex;
  flex-direction: column; }
  .subpage .article .company_overview .flex_dl {
    font-size: min(2rem, 3.8vw);
    margin: 10px; }
    .subpage .article .company_overview .flex_dl dl {
      display: flex;
      padding: 0;
      margin: 0 0 5px; }
      .subpage .article .company_overview .flex_dl dl dt {
        width: 6em; }
      .subpage .article .company_overview .flex_dl dl dd {
        width: calc(100% - 7em); }
  .subpage .article .company_overview .ph {
    margin: 0 10px; }
    .subpage .article .company_overview .ph img {
      width: 100%; }
@media (min-width: 768px) {
  .subpage .article .company_overview {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
    .subpage .article .company_overview .flex_dl {
      width: 50%;
      font-size: 1.8rem; }
      .subpage .article .company_overview .flex_dl dl {
        display: flex;
        padding: 0;
        margin: 0 0 5px; }
        .subpage .article .company_overview .flex_dl dl dt {
          width: 6em; }
        .subpage .article .company_overview .flex_dl dl dd {
          width: calc(100% - 7em); }
    .subpage .article .company_overview .ph {
      width: 50%; }
      .subpage .article .company_overview .ph img {
        width: 100%; } }
.subpage .article .history .flex_dl {
  font-size: min(2rem, 3.8vw); }
  .subpage .article .history .flex_dl dl {
    display: flex;
    padding: 0;
    margin: 0 0 5px; }
    .subpage .article .history .flex_dl dl dt {
      width: 10em; }
    .subpage .article .history .flex_dl dl dd {
      width: calc(100% - 11em); }
@media (min-width: 768px) {
  .subpage .article .history .flex_dl {
    font-size: 1.8rem; }
    .subpage .article .history .flex_dl dl {
      display: flex;
      padding: 0;
      margin: 0 0 5px; }
      .subpage .article .history .flex_dl dl dt {
        width: 9em; }
      .subpage .article .history .flex_dl dl dd {
        width: calc(100% - 10em); } }

.icon {
  grid-area: icon; }

.name {
  grid-area: name; }

.ph {
  grid-area: ph; }

.text {
  grid-area: text; }

.floor {
  width: 100%;
  max-width: 970px;
  margin: auto;
  margin-bottom: 80px; }
  .floor .article {
    border-top: 1px solid #ba9132;
    padding: 20px 0;
    margin: 20px auto;
    width: calc(100% - 20px); }
    .floor .article .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"; }
    .floor .article .icon {
      grid-area: icon; }
      .floor .article .icon img {
        width: 100%; }
    .floor .article .text {
      grid-area: text;
      font-size: 1.4rem; }
      .floor .article .text img {
        float: right;
        width: 50%;
        margin: 0 0 5px 5px; }
    .floor .article .name {
      grid-area: name; }
      .floor .article .name h1 {
        font-size: 2rem;
        color: #ba9132;
        line-height: 1.2; }
    .floor .article .ph {
      grid-area: ph; }
      .floor .article .ph img {
        width: 100%; }
    .floor .article .floor_ph {
      width: max-content;
      max-width: calc(100% - 20px);
      margin: auto; }
      .floor .article .floor_ph img {
        width: 100%; }
      .floor .article .floor_ph .btn {
        background: rgba(186, 145, 50, 0.5);
        display: block;
        color: #fff;
        text-align: center;
        padding: 8px;
        font-size: 2.0rem;
        border-radius: 4px;
        text-decoration: none; }

@media (min-width: 768px) {
  .floor {
    width: 100%;
    max-width: 970px;
    margin: auto;
    margin-bottom: 80px; }
    .floor .article {
      border-top: 1px solid #ba9132;
      padding: 20px 0;
      margin: 20px auto; }
      .floor .article .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"; }
      .floor .article .icon {
        grid-area: icon; }
      .floor .article .name {
        grid-area: name; }
        .floor .article .name h1 {
          font-size: min(2.6rem, 2.6vw);
          color: #ba9132;
          line-height: 1.5; }
      .floor .article .ph {
        grid-area: ph; }
      .floor .article .text {
        grid-area: text;
        font-size: 1.8rem; }
      .floor .article .floor_ph {
        width: max-content;
        max-width: calc(100% - 20px);
        margin: auto; }
        .floor .article .floor_ph img {
          width: 100%; }
        .floor .article .floor_ph .btn {
          background: rgba(186, 145, 50, 0.5);
          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%;
			}
		}
	}
}
	
	
	
}
*/