@charset "utf-8";

/*---------------------------------------------------------
Theme Name: toyo-setsubi
Theme URI: https://www.toyo-setsubi-kogyo.co.jp/
Description:東洋設備工業
Author: toyo-setsubi
Author URI: https://www.toyo-setsubi-kogyo.co.jp/
Text Domain: toyo-setsubi
Version: 1.0
---------------------------------------------------------*/

/* -----------------------------------------------------------
	common
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');

body {
	color: var(--color-black-01);
	font-family: var(--font-family-03);
	letter-spacing: 1px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

a {
	color: var(--color-link-a);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	text-decoration: none;
	transition: all 0.6s ease; /* アニメーションを加える */
}
a {
	word-break: break-all;
}

input:focus, select:focus, textarea:focus {outline: none;}

.notice {
	color: #ff0000;
	font-size: 110%;
	font-weight: bold;
}

.noticeW {
	font-size: 130%;
}

.textIndent li {
	margin-top: 10px;
	padding-left: 1em;
	text-indent: -1em;
}

.marker {
	background: linear-gradient(transparent 60%, #ffd5d5 40%);
}

.mt5 {margin-top: 5px!important;}
.mt10 {margin-top: 10px!important;}
.mt15 {margin-top: 15px!important;}
.mt20 {margin-top: 20px!important;}
.mt30 {margin-top: 30px!important;}
.mt50 {margin-top: 50px!important;}
.mb5 {margin-bottom: 5px!important;}
.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb50 {margin-bottom: 50px!important;}
.ml10 {margin-left: 10px!important;}
.ml20 {margin-left: 20px!important;}
.mr10 {margin-right: 10px!important;}
.mr20 {margin-right: 20px!important;}
.mtb10 {margin: 10px 0!important;}
.textBoth {clear: both;}

:root {
	--color-white: #fff;
	--color-black-01: #333;
	--color-black-02: #414141;
	--color-black-03: #7d7d7d;
	--color-black-04: #555;
	--color-black-05: #808080;
	--color-blue-01: #3e71bc;
	--color-blue-02: #170c56;
	--color-blue-03: #073880;
	--color-gray-01: #ccc;
	--color-gray-02: #dcdcdc;
	--color-gray-03: #999;
	--color-gray-04: #f3f3f3;
	--color-link-a: #0066ff;
	--color-link-hover: #6ba6fe;
	--font-family-01: "リュウミン M-KL";
	--font-family-02: 'Playfair Display', serif;
	--font-family-03: 'Noto Sans JP', sans-serif;
}

/* -----------------------------------------------------------
	mainSlider
----------------------------------------------------------- */

#mainSlider {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 800px;
	margin: 0 0 80px;
	background-color: var(--color-gray-01);
	z-index: 0;
}
.inner-content {
	color: white;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: var(--font-family-01);
	z-index: 1;
}
.inner-content h1 {
	font-size: 4rem;
	margin: 50px 0 0;
}
.inner-content p {
	font-size: 2rem;
	margin: 20px 0 0;
}

@media screen and (max-width:559px){
	#mainSlider {
		min-height: 500px;
	}
	.inner-content h1 {
		font-size: 1.5rem;
	}
	.inner-content p {
		font-size: 1rem;
	}
}


/* -----------------------------------------------------------
	mainContsBg
----------------------------------------------------------- */

.post-9, .businessBg {background-image: url("img/business/business_bg.jpg");}
.post-15, .worksBg {background-image: url("img/works/works_bg.jpg");}
.post-17, .post-42, .companyBg {background-image: url("img/company/company_bg.jpg");}
.post-19, .communityBg {background-image: url("img/community/community_bg.jpg");}
.blogBg {background-image: url("img/blog/blog_bg.jpg");}
.contactBg {background-image: url("img/contact/contact_bg.jpg");}

.single_bg {background: url("img/conts/story_bg.jpg") center no-repeat;}
.post-24 {background: url("img/conts/privacy_main.jpg") center no-repeat;}


#mainContsBg {
	text-align: center;
	color: var(--color-white);
	min-height: 550px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	border-top: 0px solid #f1733a;
}

.mainContsText {
	font-size: 30px;
	font-weight: 900;
	padding: 100px 0 0;
}

@media (max-width: 559px) {
	#mainContsBg {
		margin-bottom: 10px;
		min-height: 300px;
	}
	.mainContsText {
		font-size: 26px;
		padding: 70px 0 0;
	}
}

/* -----------------------------------------------------------
	breadcrumb
----------------------------------------------------------- */

#breadcrumb {
	width: 1200px;
	font-size: 0.9em;
	margin: 0 auto;
	padding: 7px 0px 0;
}

#breadcrumb li {
	display: inline;
}

#breadcrumb li:after {
	content: '\03e';
	padding: 0 5px;
}

#breadcrumb li:last-child:after {
	content: '';
}

#breadcrumb li a {
	color: var(--color-black-01);
}
#breadcrumb li a:hover {
	text-decoration: underline;
}

#breadcrumb li:first-child a:before {
	font-family: 'Font Awesome 5 Free';
	content: '\f015';
	font-size: 0.9em;
	padding-right: 5px;
	font-weight: 900;
}

@media (max-width: 559px) {
	#breadcrumb {
		width: 90%;
		padding: 0;
	}
}

/* -----------------------------------------------------------
	container
----------------------------------------------------------- */

.containerWrap {
	width: 1200px;
	margin: 80px auto;
}

.containerWrap p {
	margin: 20px 0 0;
}

.container01 {
	display: flex;
	flex-flow: row wrap;
	margin: 100px 0px;
	clear: both;
}
.container02 {
	display: flex;
	flex-flow: row wrap;
	margin: 0px 0px;
	clear: both;
}

.containerImg {
	flex: 2;
	margin: 0 0px 0 0;
}
.imgR {
	text-align: right;
}
.containerImg img {
	max-width: 700px;
}

.contsText {
	flex: 1;
	margin: 20px auto;
}

.contsText p {
	margin: 20px 0 0;
}

@media screen and (max-width: 559px) {
	.containerWrap {
		width: 100%;
		padding: 0 20px;
	}
	.container01 {
		flex-flow: column;
		text-align: left;
		margin: 50px 0px;
	}
	.contsText {
		order: -1;
	}
	.containerImg img {
		width: 100%;
	}
}


.sContainer {
	width: 33.3%;
	padding: 10px;
	text-align: center;
}

.sContainer02 {
	width: 66.6%;
	padding: 10px;
	text-align: center;
}

.sContainer h3 {
	font-size: 130%;
	margin: 20px 0 0px;
}

.sContainer p {
	margin: 10px 0 0px;
	text-align: left;
}

@media screen and (max-width: 559px) {
	.sContainer {
		width: 100%;
		padding: 0px;
	}
	.sContainer02 {
		width: 100%;
	}
	.sContainer p {
		margin: 10px 0 50px;
	}
}

.imgCenter {
	width: 50%;
	margin: 0 auto;
}
.imgCenter02 {
	width: 80%;
	margin: 0 auto 30px;
}

@media screen and (max-width: 559px) {
	.imgCenter {
		width: 100%;
	}
	.imgCenter02 {
		width: 100%;
	}
}

.topics {
	font-size: 150%;
	text-align: center;
	margin: 50px auto ;
}

/* -----------------------------------------------------------
	ttl
----------------------------------------------------------- */

h2 {
	font-family: var(--font-family-01);
}

.ttl01 {
	position: relative;
	width: 100%;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	margin: 0px auto 0px;
	padding: 30px 30px 15px;
}
.ttl01::before,
.ttl01::after {
	position: absolute;
	content: '';
	width: 30px;
	height: 30px;
}
.ttl01::before {
	top: 0;
	left: 0;
	border-top: 1px solid var(--color-black-04);
	border-left: 1px solid var(--color-black-04);
}
.ttl01::after {
	top: 0;
	right: 0;
	border-top: 1px solid var(--color-black-04);
	border-right: 1px solid var(--color-black-04);
}

.ttl01 span {
	font-size: 70%;
}

@media screen and (max-width: 559px) {
	.ttl01 {
		width: 85%;
		margin-bottom: 20px;
	}
}

.pageTtl {
	margin: 50px 0 10px;
	text-align: center;
	font-size: 200%;
	line-height: 1.4;
	font-weight: bold;
}


@media screen and (max-width: 559px) {
	.pageTtl {
		margin: 0 10px 20px;
		font-size: 150%;
	}
}

h2.ttl02 {
	position: relative;
	font-size: 200%;
	margin: 3em 0;
	text-align: center;
}
h2.ttl02 span {
	display: block;
	font-size: 75%;
	margin: 10px 0 0;
}
h2.ttl02 span a {
	color: var(--color-black-01);
}
h2.ttl02:before {
	content: '';
	position: absolute;
	bottom: -20px;
	display: inline-block;
	width: 200px;
	height: 1px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: var(--color-black-01);
}
@media screen and (max-width: 559px) {
	h2.ttl02 {
		font-size: 170%;
	}
}

.imgPut {
	position: relative;
	margin: 80px 0px 0px;
}

.ttl03 {
	position: absolute;
	width: 100%;
	color: rgba(255,255,255, 1); 
	font-size: 170%;
	text-align: center;
	padding: 10px 10px 10px;
	background : rgba(12,38,87,0.8);
}

@media screen and (max-width: 559px) {
	.ttl03 {
		position: static;
		font-size: 100%;
	}
	.imgFit {
		object-fit: cover;
		height: 35vh;
	}
}

.lineText {
	font-size: 130%;
	margin: 30px 0 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-gray-01);
}


/* --------------------------------------------------------
	works
-------------------------------------------------------- */

.worksTtl {
	font-size: 150%;
	padding: 3px 0.5em;
	color: var(--color-black-01);
	background: transparent;/*背景透明に*/
	border-left: solid 5px var(--color-blue-02);
}

.worksContainer {
	display: flex;
	flex-flow: row nowrap;
	margin: 20px 0px 80px;
	clear: both;
}

.worksContainer00 div:nth-child(-n + 2) {
	width: 350px;
	margin: 0 20px 0 0;
}

.worksContainer div {
	width: 30%;
	margin: 0 20px 0 0;
}

.worksImg {
	position: relative;
}

.worksImg p {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	color: white;
	background: var(--color-blue-02);/*背景色*/
	font-size: 15px;
	line-height: 1;
	padding: 8px 10px 10px;
}

@media screen and (max-width: 559px) {
	.worksContainer {
		display: flex;
		flex-flow: column;
		text-align: left;
	}
	.worksContainer div {
		width: 100%;
	}
}


/* --------------------------------------------------------
	massageArea
-------------------------------------------------------- */

.massageArea {
	position: relative;
	margin: 150px auto;
}

.massageText {
	position: absolute;
	top: 80px;
	left: 0px;
	text-align: left;
}

.massageTextM {
	font-family: var(--font-family-02);
	font-size:70px;
	color: var(--color-black-01);
	position: relative;
	margin: 0 0 20px 30px;
	display: block;
	line-height: 1;
}


.massageText_inner {
	 padding: 30px;
	 -moz-box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 -o-box-sizing: border-box;
	 -ms-box-sizing:border-box;
	 box-sizing: border-box;
	 background-color: var(--color-white);
	 opacity: 0.9 ;
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
}

.massageText_inner h2 {
	font-size: 24px;
	color: var(--color-black-01);
	margin-bottom: 20px;
}

.massageArea img {
	width: 1000px;
	float: right;
}


@media only screen and (max-width:559px) {
	.massageArea {
		width: 100%;
		margin: 50px auto;
	}
	.massageText {
		position: static;
		text-align: left;
	}
	.massageTextM {
		font-size:50px;
		margin: 0 0 20px 0px;
	}
	.massageText_inner {
		 padding: 10px 0;
	 }
	.massageArea img {
		width: 100%;
		margin-top: 20px;
	}
}

/* --------------------------------------------------------
	contsAreaL
-------------------------------------------------------- */

.contsAreaL,.contsAreaR {
	position: relative;
	margin: 80px auto;
}

.textAreaL {
	position: absolute;
	top: 80px;
	left: 00px;
}

.textAreaR {
	position: absolute;
	bottom: 100px;
	right: 0px;
}

.textArea_inner {
	width: 550px;
	 padding: 30px;
	 -moz-box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 -o-box-sizing: border-box;
	 -ms-box-sizing:border-box;
	 box-sizing: border-box;
	 background-color: #e8f5ff;
	 opacity: 0.9 ;
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
}

.textArea_inner h2 {
	font-size: 24px;
	color: var(--color-black-01);
	margin-bottom: 20px;
}

.contsAreaL img {
	width: 700px;
	float: right;
}

.contsAreaR img {
	width: 700px;
}

.contsSpace {
	clear: both;
	padding: 80px 0px 20px;
}

hr.heartLine {
	clear: both;
	border-width: 1px 0px 0px 0px;
	border-style: dotted;
	border-color: #666;
	width: 100%;
	height: 1px;
	margin: 20px 0px;
	padding: 0px 0px 0px 0px;
}


@media only screen and (max-width:559px) {
	.contsAreaL,.contsAreaR {
		width: 100%;
		margin: 50px auto;
	}
	.textAreaL,.textAreaR {
		position: static;
		text-align: left;
	}
	.textArea_inner {
		 width: 100%;
		 padding: 20px;
	 }
	.contsAreaL img,.contsAreaR img {
		width: 100%;
		margin-top: 20px;
	}
}

/* -----------------------------------------------------------
	community
----------------------------------------------------------- */

.textMd {
	width: 95%;
	margin: 50px auto 0;
}

@media only screen and (max-width:559px) {
	.textMd {
		width: 100%;
	}
}

.sdgsContainer {
	width: 100%;
	margin: 0px auto;
}
.sdgsContainer dl {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
.sdgsContainer dt {
	width: 15%;
	padding: 10px 30px 0 0;
}
.sdgsContainer dt img {
	min-width: 100px;
}
.sdgsContainer dd {
	width: 84%;
	font-size: 1.1rem;
	padding: 0px;
}
.sdgsContainer dd.sdgsNotice {
	color: #0687ae;
	font-size: 2.0rem;
}

dl.sdgs_t dt {
	width: 20%;
	padding: 10px 10px 0 0;
}
dl.sdgs_t dt img {
	width: 210px;
}
dl.sdgs_t dd {
	width: 75%;
	font-size: 0.9rem;
}

@media screen and (max-width: 559px) {
	.sdgsContainer {
		width: 100%;
	}
	.sdgsContainer dl {
		width: 100%;
	}
	.sdgsContainer dt {
		width: 100px;
		margin: 20px 5px 20px 0;
		padding: 0px 10px 0 0;
	}
	.sdgsContainer dd {
		width: 69%;
		font-size: 0.9rem;
	}
	.sdgsContainer dd.sdgsNotice {
		font-size: 1.5rem;
	}
	dl.sdgs_t dt {
		width: 100%;
	}
	dl.sdgs_t dd {
		width: 100%;
	}
}

#sdgs_r {
	padding-top: 70px;
	margin-top: -70px;
}

.sdg_r_text {
	font-size: 110%;
	font-weight: 500;
	padding: 50px 0 0;
}

/* --------------------------------------------------------
	story
-------------------------------------------------------- */

h2.storyTtl {
	font-family: var(--font-family-01);
	font-size: 170%;
	margin: 1em 0;
	font-weight: bold;
}

.storyImg {
	width: 30%;
}

.storySpace {
	margin: 40px 0;
}

@media only screen and (max-width:559px) {
	.storyImg {
		width: 100%;
	}
}


/* -----------------------------------------------------------
	btn
----------------------------------------------------------- */

.center_btn{
	text-align: center;
	margin: 50px 0 100px;
}

.btn01 {
	position: relative;
	display: inline-block;
	color: var(--color-white);
	padding: 10px 50px;
	border-radius: 100vh;
	text-align: center;
	background: var(--color-blue-01);
	transition: ease .2s;
}

.btn01:hover {
	color: var(--color-white);
	background: var(--color-blue-03);
}

.btnarrow01::after {
	content: '';
	position: absolute;
	top: 45%;
	right: 25px;
	/*矢印の形状*/
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--color-white);
	border-right: 2px solid var(--color-white);
	transform: rotate(45deg);
	transition: all .3s;
}

.btnarrow01:hover::after {
	right: 20px;
}


/* -----------------------------------------------------------
	pageTop
----------------------------------------------------------- */

#scrollUp {
	bottom: 20px;
	right: 20px;
	background-image: url("img/common/pagetop.png");
	width: 38px;
	height: 38px;
}
#scrollUp:hover {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0.7;
}


/* -----------------------------------------------------------
	companyList
----------------------------------------------------------- */

.companyList li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-bottom: 1px solid var(--color-gray-01);
	padding: 20px 10px;
}
.companyList li .head {
	min-width: 15%;
	max-width: 15%;
}

@media only screen and (max-width:559px) {
	.companyList li {
		flex-flow: column;
	}
	.companyList li .head {
		max-width: 100%;
	}
}

/*----------------------------------------------------
	table01
----------------------------------------------------*/
.table01 {
	width: 100%;
	margin: 20px 0 0;
}

.table01 th,td {
	padding: 15px;
	border: 1px solid #ddd;
}

.table01 th {
	background: #f4f4f4;
	width: 20%;
	text-align: left;
}

@media only screen and (max-width:559px) {
	.table01 th,td {
		width: 100%;
		display: block;
		border-top: none;
	}
	.table01 tr:first-child th { border-top: 1px solid #ddd; }
}

/*----------------------------------------------------
	form
----------------------------------------------------*/

input:::-webkit-input-placeholder { color: #666; }
input::-moz-placeholder { color: #666; }
 
input:focus, select:focus, textarea:focus {
	background: #ebebeb;
	outline: none;
}
 
.form-text {
	width: 100%;
	border: 1px solid #999;
	border-radius: 5px;
	padding: 10px;
	background: #f5f5f5;
}

.form-submit {
	font-size: 120%;
	padding: 10px 20px;
	border:1px solid #1172a4;
	border-radius: 5px;
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;
	color:#fff;
	background: #1172a4;
	cursor: pointer;
	clear: both;
}

.form-submit:hover {
	background: #0483c5;
}

.submitCenter {
	width: 170px;
	margin: 30px auto 0;
}

/* -----------------------------------------------------------
	footer
----------------------------------------------------------- */

#footer {
	color: var(--color-white);
	padding: 60px 0px 40px;
	border-top: 1px solid #2f2f2f;
	background: #2f2f2f;
	background-image: url(img/common/footer_dot.png);
	background-repeat: repeat;
	background-blend-mode: overlay;
	background-size: auto;
}
#footerInner {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 1200px;
	margin: 0px auto;
	padding: 0px 20px;
}
.footerLogo {
	margin-bottom: 10px;
}
.footerInfo li {
	line-height: 1.9;
}
.footerInfo li a {
	color: var(--color-white);
}
.footerLink {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}
.footerLink li a {
	position: relative;
	color: var(--color-white);
	line-height: 1.9;
	opacity: 0.6;
	margin-left: 3em;
	padding-left: 1.5em;
}
.footerLink li a:hover {
	opacity: 1;
}
.footerLink li a::before {
	font-family: 'Font Awesome 5 Free';
	content: "\f138 ";
	position: absolute;
	font-size: 1em;
	font-weight: 900;
	left: 0;
	top: -3px;
}
.copyright {
	width: 100%;
	font-size: 80%;
	text-align: right;
	margin-top: 3em;
}

@media screen and (max-width: 559px) {
	#footerInner, .footerLink {
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		width: 100%;
		text-align: left;
	}
	.footerInfo, .footerLink {
		margin-bottom: 30px;
	}
	.footerLink li a {
		margin-left: 0em;
	}
	.footerLogo {
		width: 218px;
		height: 40px;
	}
	.copyright {
		text-align: center;
	}
}