@charset "utf-8";

body #wrapper {
	background: #fff;
}
#company {
	margin: 125px auto 100px;
}
#company h1 {
	margin: 70px auto 0;
	font-size: 130%;
	line-height: 2;
}
#company h2 {
	padding: 22px 0;
	border-top: 3px solid #457380;
	border-bottom: 3px solid #457380;
	background: #fffdea;
	color: #457380;
	font-size: 130%;
}
#company .company_menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px auto 0;
	width: 80%;
}
#company .company_menu li {
	width: 17%;
	border-top: 2px solid #457380;
	border-bottom: 2px solid #457380;
}
#company .company_menu li a {
	display: block;
	padding: 22px 0;
	background: #fffdea;
	color: #457380;
	font-size: 90%;
}
#company .company_menu li a:hover {
	opacity: 0.6;
}

/*----------------------
goal
----------------------*/
#goal {
	padding: 120px 0 0;
}
#goal h2 + p {
	margin: 55px auto 0;
}
#goal .box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 90px auto 0;
	min-width: 1400px;
	width: 70%;
}
#goal .box > div {
	width: 40%;
}
#goal .box > div.inner {
	width: 54%;
}
#goal .box > div > img {
	width: 100%;
}
#goal .inner {
	display: flex;
	justify-content: space-between;
}
#goal .inner div {
	padding: 0 18px 30px 18px;
	width: 48%;
	border: 2px solid #467181;
	border-radius: 10px;
}
#goal .inner h3 {
	box-sizing: border-box;
	position: relative;
	margin: -45px auto 0;
	padding: 26px 4% 26px 32%;
	width: 58%;
	color: #467382;
	font-size: 120%;
}
#goal .inner div:nth-child(1) h3 {
	background: #fff url(../images/goal_icon_01.png) 18% center / contain no-repeat;
}
#goal .inner div:nth-child(2) h3 {
	background: #fff url(../images/goal_icon_02.png) 18% center / contain no-repeat;
}
#goal .inner p {
	font-size: 90%;
	text-align: left;
}
#goal .inner h3 + p {
	margin: 20px 0;
	font-size: 100%;
	text-align: center;
}

/*----------------------
award
----------------------*/
#award {
	margin: 100px auto 0;
	padding: 120px 0 0;
}
#award .award_2021 {
	position: relative;
	margin: 110px auto 0;
	padding: 30px 0;
	min-width: 1400px;
	width: 80%;
	background: #fffdea;
}
#award .award_2021:before,
#award .award_2021:after {
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	height: 15px;
	border-top: 3px solid #417582;
	border-bottom: 3px solid #417582;
	content: "";
}
#award .award_2021:before {
	top: -28px;
}
#award .award_2021:after {
	bottom: -28px;
}
#award .award_2021 + p {
	margin: 60px auto 0;
}
#award .box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px auto 0;
	min-width: 1400px;
	width: 80%;
}
#award .inner {
	display: flex;
	justify-content: space-between;
	width: 42%;
}
#award .inner div {
	width: 30%;
}
#award .inner div > span {
	display: block;
	margin: 12px auto 2px;
	font-size: 80%;
}
#award .inner > p {
	width: 65%;
	text-align: left;
}
#award .point {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 53%;
}
#award .point div {
	width: 30%;
}
#award .point div:nth-child(1) {
	padding: 5px 0;
	width: 100%;
	background: #457380;
	color: #fff;
}
#award .point div p {
	margin: 25px auto 0;
}
#award .point div p:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 3em;
	color: #457380;
}
#award .point div p:last-child {
}
#award .point div img {
	margin: 10px auto 0;
	width: 60%;
}

/*----------------------
sales
----------------------*/
#sales {
	margin: 100px auto 0;
	padding: 120px 0 0;
}
#sales img {
	margin: 100px auto 0;
	min-width: 1100px;
	width: 60%;
}
#sales .sp_only {
    display: none;
}

/*----------------------
history
----------------------*/
#history {
	margin: 100px auto 0;
	padding: 120px 0 0;
}
#history .box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 100px auto 0;
	width: 80%;
}
#history .box div {
	width: 45%;
}
#history .box div img {
	width: 100%;
}
#history .box p {
	width: 50%;
	text-align: left;
}
/*#history .list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 150px auto 0;
	width: 70%;
}*/
#history .list img {
	width: 100%;
}
#history .sp_only {
    display: none;
}

/*----------------------
about
----------------------*/
#about {
	margin: 100px auto 0;
	padding: 120px 0 0;
}
#about .list {
	display: flex;
	justify-content: space-between;
	margin: 130px auto 0;
	width: 80%;
	text-align: left;
}
#about .list > div:nth-child(1),
#about .list > div:nth-child(2) {
	width: 23%;
}
#about .list > div:nth-child(3) {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 45%;
}
#about .sub_title {
	padding: 15px 0;
	width: 100%;
	border-top: 1px solid #457382;
	border-bottom: 1px solid #457382;
	background: #eef3f6;
	text-align: center;
}
#about .list ul {
	margin: 25px auto 50px;
}
#about .list li {
	position: relative;
	margin: 5px auto 0;
	padding: 0 0 0 22px;
}
#about .list li:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 5px;
	margin: auto 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #000;
	content: "";
}
#about .list .square:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	width: 12px;
	height: 12px;
	border-radius: 0;
	background: #d3e2e7;
	content: "";
}
#about .list .mt {
	margin: 40px auto 0;
}
#about .company_data {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px auto 0;
	width: 80%;
	text-align: left;
}
#about .company_data dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 48%;
}
#about .company_data dt,
#about .company_data dd {
	box-sizing: border-box;
	border-bottom: 1px solid #457382;
}
#about .company_data dt {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 15px;
	width: 180px;
	background: #eef3f6;
}
#about .company_data dd {
	display: flex;
	align-items: center;
	padding: 30px 40px;
	width: calc( 100% - 180px);
}
#about .company_data dt:first-child,
#about .company_data dt:first-child + dd {
	border-top: 1px solid #457382;
}

/*----------------------
entry
----------------------*/
#company .entry {
	margin: 300px auto 0;
}
#company .back_btn {
	margin: 110px auto 0;
}

@media screen and (max-width:767px) {
	#company {
		margin: 45px auto 80px;
	}
	#company h1 {
		margin: 30px auto 0;
		line-height: normal;
	}
	#company h2 {
		padding: 14px 0;
		border-top: 2px solid #457380;
		border-bottom: 2px solid #457380;
	}
	#company .company_menu {
		display: block;
	}
	#company .company_menu li {
		margin: 12px auto 0;
		width: 100%;
		border-top: none;
		border-bottom: none;
	}
	#company .company_menu .sp_only {
		display: inline;
	}
	#company .company_menu li a {
		padding: 12px 0;
	}

	/*----------------------
    goal
    ----------------------*/
	#goal {
		padding: 50px 0 0;
	}
	#goal h2 + p {
		margin: 40px auto 0;
	}
	#goal .box {
		display: block;
		margin: 40px auto 0;
		min-width: auto;
		width: 90%;
	}
	#goal .box > div,
	#goal .box > div.inner {
		width: 100%;
	}
	#goal .inner {
		display: block;
	}
	#goal .inner div {
		margin: 60px auto 0;
		width: 100%;
	}
	#goal .inner h3 {
		margin: -28px auto 0;
		padding: 16px 4% 16px 24%;
		width: 42%;
	}
	#goal .inner div:nth-child(1) h3 {
		background: #fff url(../images/goal_icon_01.png) 14% center / contain no-repeat;
	}

	/*----------------------
    award
    ----------------------*/
	#award {
		margin: 30px auto 0;
		padding: 50px 0 0;
	}
	#award .award_2021 {
		margin: 50px auto 0;
		padding: 10px;
		min-width: auto;
		width: 90%;
	}
	#award .award_2021:before,
	#award .award_2021:after {
		height: 8px;
		border-top: 2px solid #417582;
		border-bottom: 2px solid #417582;
	}
	#award .award_2021:before {
		top: -15px;
	}
	#award .award_2021:after {
		bottom: -15px;
	}
	#award .award_2021 + p {
		margin: 40px auto 0;
	}
	#award .box {
		margin: 30px auto 0;
		min-width: auto;
		width: 90%;
	}
	#award .inner,
	#award .point {
		width: 100%;
	}
	#award .inner div > span {
		margin: 8px auto 0;
	}
	#award .point {
		display: block;
		margin: 40px auto 0;
	}
	#award .point div {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	#award .point div p:first-child {
		order: 2;
		margin: 40px 0 0;
		width: 50%;
		min-height: auto;
	}
	#award .point div img {
		order: 1;
		margin: 40px 0 0;
		width: 22%;
	}
	#award .point div p:last-child {
		order: 3;
		margin: 15px auto 0;
		padding: 0 10%;
		width: 100%;
		text-align: left;
	}

	/*----------------------
    sales
    ----------------------*/
	#sales {
		margin: 30px auto 0;
		padding: 50px 0 0;
	}
	#sales img {
		margin: 50px auto 0;
		min-width: auto;
		width: 90%;
	}

    #sales .pc_only {
        display: none;
    }

    #sales .sp_only {
        display: block;
    }

	/*----------------------
    history
    ----------------------*/
	#history {
		margin: 30px auto 0;
		padding: 50px 0 0;
	}
	#history .box {
		display: block;
		margin: 35px auto 0;
		width: 75%;
	}
	#history .box div,
	#history .box p {
		width: 100%;
	}
	#history .box p {
		margin: 25px auto 0;
	}
	#history .list {
		display: block;
		margin: 40px auto 0;
		width: 75%;
	}
	#history .list img {
		width: 100%;
	}
    #history .pc_only {
        display: none;
    }
    #history .sp_only {
        display: block;
    }

	/*----------------------
    about
    ----------------------*/
	#about {
		margin: 30px auto 0;
		padding: 50px 0 0;
	}
	#about .list {
		flex-wrap: wrap;
		margin: 40px auto 0;
		width: 90%;
	}
	#about .sub_title {
		padding: 8px 0;
	}
	#about .list > div:nth-child(1),
	#about .list > div:nth-child(2) {
		width: 47%;
	}
	#about .list > div:nth-child(3) {
		width: 100%;
	}
	#about .list ul {
		margin: 15px auto 30px;
	}
	#about .list .mt {
		margin: 20px auto 0;
	}
	#about .company_data {
		display: block;
		margin: 10px auto 0;
		width: 90%;
		border-top: 1px solid #457382;
	}
	#about .company_data dl {
		width: 100%;
	}
	#about .company_data dt {
		padding: 15px;
		width: 120px;
	}
	#about .company_data dd {
		padding: 15px 20px;
		width: calc( 100% - 120px);
	}
	#about .company_data dt:first-child,
	#about .company_data dt:first-child + dd {
		border-top: none;
	}

	/*----------------------
    entry
    ----------------------*/
	#company .entry {
		margin: 130px auto 0;
	}
	#company .back_btn {
		margin: 80px auto 0;
	}
}