@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

// 固定色
$main-blue: #003685;
$main-yellow: #bf9a0e;
$sub-blue: #d6dfeb;

#header-img{
	background: url("../img/01-header.jpg") center / cover no-repeat ;
}

#philosophy{
	padding: 10rem 0 7rem;
	margin-bottom: 10rem;
	background: $sub-blue;
	position: relative;
	@include xs{
		padding: 10rem 0 5rem;
		margin-bottom: 5rem;
	}
	.philosophy-container{
		max-width: 670px;
		@include md{max-width: 600px;}
	}
	img{
		position: absolute;
		top: 0;
		right: 10rem;
		height: 130px;
		@include md{
			right: 5rem;
			height: 100px;
		}
		@include sm{
			right: 1rem;
			height: 80px;
		}
	}
	h3,dt,dd{
		font-family: YuMincho,"Hiragino Mincho ProN",serif;
		font-weight: 100;
	}
	h3{
		text-align: center;
		font-size: 35px;
		font-size: 3.5rem;
		font-weight: 700;
		color: $main-blue;
		letter-spacing: 0.1em;
		margin-bottom: 3rem;
	}
	dt{
		font-size: 25px;
		font-size: 2.5rem;
		letter-spacing: 0.1em;
		margin-bottom: 2rem;
		line-height: 1.5em;
		text-align: center;
	}
	dd{
		text-indent: -2em;
  		padding-left: 2em;
		text-align: justify;
		display: inline-block;
	}
}

#message{
	margin-bottom: 15rem;
	@include md{margin-bottom: 10rem;}
	h2,p{text-align: justify;}
	.ceo-name{
		text-align: end;
		span{
			font-size: 23px;
			font-size: 2.3rem;
			font-weight: 600;
		}
		@include sm{margin-bottom: 3rem;}
	}
	img{
		@include sm{
			height: 390px;
			width: 100%;
			object-fit: cover;
			object-position: 0px -23px;
		}
		@include xs{height: 320px;}
	}	
}

#profile{
	margin-bottom: 15rem;
	@include md{margin-bottom: 10rem;}
	.companyimg{
		overflow: hidden;
		margin-left: calc(1140px - 100vw);
		@include lg{margin-left: calc(960px - 100vw);}
		@include md{margin-left: calc(720px - 100vw);}
		@include sm{margin-left:0;}
		img{
			width: 100%;
			height: 680px;
			object-fit: cover;
			@include md{height: 600px;}
			@include sm{
				height: auto;
				margin-bottom: 2rem;
			}
		}
	}
}

#history{
	margin-bottom: 15rem;
	@include md{margin-bottom: 10rem;}
	th{
		width: 15%;
		@include xs{
			width: 30%;
		}
	}
}

#profile,#history{
	table{
		width: 100%;
		th{
			vertical-align: top;
			padding: 1rem;
			font-weight: 100;
			border-bottom: 1px solid $main-blue;
			@include xs{padding: 1rem 0 1rem 1rem;}
		}
		td{
			text-align: justify;
			border-bottom: 1px solid #C8C8C8;
			padding: 1rem 2rem;
			@include xs{padding: 1rem 0rem 1rem 1rem;}
		}
	}
}