@charset "UTF-8";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/*

	小坂建設について
	採用情報
	社員紹介
	アクセス
	個人情報保護方針
    社員への取り組み

*/


/*------------------------------------------
	aboutBox01
------------------------------------------*/


/*	aboutBox01
---------------------------*/

.aboutBox01 {
    height: 760px;
}

.aboutBox01:nth-child(even) .txtBox {
    float: right;
}

.aboutBox01:nth-child(even) .txtBox .txtBoxIn {
    padding: 0 0 0 60px;
    margin: 0 auto 0 0;
}

.aboutBox01:nth-child(even) .imgBox {
    float: left;
}

.aboutBox01 .txtBox {
    width: 50%;
    float: left;
    margin-top: 140px;
}

.aboutBox01 .txtBox .txtBoxIn {
    max-width: 580px;
    padding-right: 60px;
    margin: 0 0 0 auto;
}

.aboutBox01 .imgBox {
    width: 50%;
    height: 100%;
    float: right;
}

@media screen and (max-width: 767px) {
    .aboutBox01 {
        height: auto;
    }
    .aboutBox01 .txtBox {
        width: 100%;
        float: none !important;
        margin-top: 0;
    }
    .aboutBox01 .txtBox .txtBoxIn {
        max-width: none;
        padding: 20px 10px !important;
        margin: 0 auto !important;
    }
    .aboutBox01 .txtBox .txtBoxIn .txt {
        font-size: 14px;
    }
    .aboutBox01 .imgBox {
        width: 100%;
        height: auto;
        float: none !important;
    }
}


/*	aboutBox02
---------------------------*/

.aboutBox02 {
    height: 760px;
}

.aboutBox02 .txtBox {
    width: 50%;
    float: left;
    margin-top: 140px;
    height: 620px;
}

.aboutBox02 .txtBox .txtBoxIn {
    height: 100%;
    max-width: 580px;
    padding-right: 60px;
    margin: 0 0 0 auto;
    position: relative;
}

.aboutBox02 .txtBox .txtBoxIn .name {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    left: 0;
    bottom: 0;
}

.aboutBox02 .imgBox {
    width: 50%;
    height: 100%;
    float: right;
    background: #C8C8C8;
}

.aboutBox02 .imgBox img {
    height: 100%;
    width: auto;
}

@media screen and (max-width: 767px) {
    .aboutBox02 {
        height: auto;
        display: block;
    }
    .aboutBox02 .txtBox {
        width: 100%;
        height: auto;
        float: none;
        padding: 20px 10px;
        margin: 0 auto;
    }
    .aboutBox02 .txtBox .txtBoxIn {
        max-width: none;
        padding: 0;
    }
    .aboutBox02 .txtBox .txtBoxIn .txt {
        font-size: 14px;
    }
    .aboutBox02 .txtBox .txtBoxIn .name {
        font-size: 18px;
        text-align: center;
        position: static;
        margin-top: 30px;
    }
    .aboutBox02 .imgBox {
        width: 100%;
        float: none;
        text-align: center;
        background: none;
    }
    .aboutBox02 .imgBox img {
        height: auto;
    }
}


/*------------------------------------------
	companyData
------------------------------------------*/

.btnMap {
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    margin-left: 15px;
    border-radius: 30px;
}

.btnMap a {
    padding: 6px 9px;
    display: block;
    background: #403D3C;
    border-radius: inherit;
}

.btnMap a:hover {
    opacity: 1;
    background: #E50012;
}

.btnMap i {
    margin-right: 5px;
}

@media screen and (max-width: 767px) {
    .btnMap {
        display: table;
        margin: 10px auto 0 0;
    }
}


/*	companyData01
---------------------------*/

.companyData01 th {
    width: 290px;
}


/*	companyData02
---------------------------*/

@media screen and (min-width: 768px) {
    .companyData02 th {
        text-align: left;
        border-right: none;
    }
    .companyData02 td {
        border-left: none;
    }
}


/*	companyData03
---------------------------*/

.companyData03 td {
    width: 25%;
    text-align: center;
    border-right: 1px solid #C8C8C8;
}


/*	companyData04
---------------------------*/

.companyData04 {
    padding: 20px;
    margin-bottom: 50px;
    border: 1px solid #C8C8C8;
}

.companyData04 p,
.companyData04 li {
    margin-bottom: 15px;
}

.companyData04 .txt {
    font-size: 14px;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .companyData04 {
        padding: 15px;
        margin-bottom: 30px;
    }
}


/*------------------------------------------
	staffProfile
------------------------------------------*/

.staffProfile {
    margin-bottom: 50px;
}

.staffProfile .txtBox {
    width: 46%;
    float: left;
}

.staffProfile .txtBox .number {
    color: #0058A2;
    width: 100px;
    height: 100px;
    padding-top: 15px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    border: 1px solid #0058A2;
    margin-bottom: 20px;
}

.staffProfile .txtBox .number span {
    display: block;
    font-size: 50px;
}

.staffProfile .txtBox .name {
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #000;
}

.staffProfile .txtBox .name span {
    display: block;
    font-size: 15px;
}

.staffProfile .imgBox {
    width: 50%;
    height: 480px;
    float: right;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .staffProfile {
        margin-bottom: 15px;
    }
    .staffProfile .txtBox {
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }
    .staffProfile .txtBox .number {
        width: 50px;
        height: 50px;
        font-size: 10px;
        padding-top: 5px;
        margin-bottom: 10px;
    }
    .staffProfile .txtBox .number span {
        font-size: 25px;
    }
    .staffProfile .txtBox .name {
        font-size: 18px;
    }
    .staffProfile .txtBox .txt {
        font-size: 14px;
    }
    .staffProfile .imgBox {
        width: 100%;
        height: 65vw;
        float: none;
    }
}


/*------------------------------------------
	staffComment
------------------------------------------*/

.staffCommentWrap {
    margin-bottom: 50px;
}

.staffCommentWrap .btn {
    color: #0058A2;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px;
    border: 1px solid #0058A2;
}

@media screen and (max-width: 767px) {
    .staffCommentWrap {
        margin-bottom: 50px;
    }
}

.staffComment {
    padding: 30px 30px 50px;
    border: 1px solid #C8C8C8;
    border-top: none;
}

.staffComment .txt+.ttl {
    margin-top: 80px;
}

@media screen and (max-width: 767px) {
    .staffComment {
        padding: 20px 10px;
    }
    .staffComment .txt+.ttl {
        margin-top: 30px;
    }
}


/*------------------------------------------
	recruitData
------------------------------------------*/

.recruitData {
    margin: 150px auto 0;
}

.recruitData th {
    width: 290px;
}

.recruitData .txt {
    font-size: 14px;
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .recruitData {
        margin: 50px auto 0;
    }
}


/*------------------------------------------
	accessMap
------------------------------------------*/

.accessMap {
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .accessMap {
        position: relative;
        padding-bottom: 72%;
        height: 0;
        overflow: hidden;
    }
    .accessMap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}


/*------------------------------------------
	accessData
------------------------------------------*/


/*	accessData01
---------------------------*/

.accessData01 {
    margin-bottom: 80px;
}

.accessData01 th {
    width: 290px;
    letter-spacing: 5px;
}

@media screen and (max-width: 767px) {
    .accessData01 {
        margin-bottom: 50px;
    }
}


/*	accessData02
---------------------------*/

.accessData02 {
    margin-bottom: 40px;
}

.accessData02 table {
    margin-bottom: 50px;
}

.accessData02 table th {
    width: 290px;
}

.accessData02 table td,
.accessData02 table td {
    font-size: 15px;
}

.accessData02 .stepWrap li {
    width: 340px;
    float: left;
    margin-right: 30px;
}

.accessData02 .stepWrap li img {
    display: block;
    margin: 0 auto 10px;
}

.accessData02 .stepWrap li p {
    font-size: 14px;
}

@media screen and (max-width: 767px) {
    .accessData02 table {
        margin-bottom: 30px;
    }
    .accessData02 table th,
    .accessData02 table td {
        font-size: 14px;
    }
    .accessData02 table td {
        padding-left: 20px;
    }
    .accessData02 .stepWrap li {
        width: 100%;
        float: none;
        margin: 0 auto 30px;
    }
    .accessData02 .stepWrap li p {
        text-align: center;
    }
}


/*------------------------------------------
	privacyBox01
------------------------------------------*/

.privacyBox01 .ttl {
    margin-bottom: 20px;
}

*+.privacyBox01 .ttl {
    margin-top: 30px;
}

.privacyBox01 .txt {
    font-weight: 500;
    margin-bottom: 5px;
}

.privacyBox01 .txt+table {
    margin-top: 30px !important;
}

.privacyBox01 th,
.privacyBox01 td {
    font-size: 15px;
}

@media screen and (max-width: 767px) {
    .privacyBox01 th,
    .privacyBox01 td {
        font-size: 14px;
    }
    .privacyBox01 td {
        padding-left: 20px;
    }
}


/*# sourceMappingURL=company.css.map */


/*----2022追加----*/

ol.desit {
    list-style-type: decimal;
    width: 95%;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
}

ol.desit li {
    font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
}

table .none {
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #999 50%, #999 calc(50% + 0.5px), transparent calc(50% + 1px));
}

.sp_scroll_table small {
    font-size: 12px
}

.sp_scroll_table th,
.sp_scroll_table td {
    padding: 8px 16px;
    border-left: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}

.sp_scroll_table th {
    background-color: #25599E;
    color: #fff;
    text-align: center;
    width: 33%
}

/*.sp_scroll_table th:nth-child(2) {
    width: 10%
}*/

.sp_scroll_table td {
    vertical-align: middle;
}

.sp_scroll_table td.md {
    background-color: #DBE0EA;
}

.sp_scroll_table td.submd {
    background-color: #F4F4F8;
    padding: 8px 16px 8px 24px;
}

.sp_scroll_table table th,
.sp_scroll_table table td {
    border-left: none;
    padding: 0
}

.sp_scroll_table table td {
    padding: 8px 0
}

.sp_scroll_table td ul {
    width: 95%;
    display: block;
    margin: 0 auto;
}

.sp_scroll_table table tr:last-child td {
    border-bottom: none;
}

.sp_scroll_table {
    border-right: 1px solid #efefef;
}

@media screen and (max-width: 767px) {
    ol.desit {
        width: 90%;
    }
    .sp_scroll_area {
        overflow-x: scroll;
        padding: 16px 8px
    }
    .sp_scroll_table td:first-child,
    .sp_scroll_table td:nth-child(2) {
        white-space: nowrap;
    }
}

@keyframes updown1 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

.form_down {
    margin: 80px auto 100px auto;
    width: 80%;
}

.form_down a {
    border-radius: 5px;
    text-align: center;
    background-color: #D22C25;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    animation-name: updown1;
    animation-delay: 0s;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.form_down a:hover {
    opacity: 1;
    background-color: #e65005;
}

.form_down a span {
    margin-right: 12px;
    font-size: 22px;
}

.form_down a p {
    padding: 0;
    font-size: 22px;
}

@media screen and (max-width: 767px) {
    .form_down {
        margin: 50px auto 80px auto;
        width: 100%;
    }
    .form_down a span {
        font-size: 16px;
    }
    .form_down a p {
        font-size: 16px;
    }
}

td a {
    color: #D22C25;
}

td .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

td .flex .left,
td .flex .right {
    width: 49%;
}

td .flex .left {
    margin-right: 24px;
}

@media screen and (max-width: 767px) {
    td .flex {
        flex-direction: column;
    }
    td .flex .left,
    td .flex .right {
        width: 90%;
        margin: 0 auto;
    }
    td .flex .left {
        margin: 0 auto 16px auto;
    }
}

td .flex .left input,
td .flex .right input {
    width: 90%;
}

.ast {
    color: #D22C25;
}

.mailform {
    margin: 80px auto 0 auto;
    box-sizing: border-box;
}

.mailform .mail_inner {
    padding: 60px 40px 0 40px;
    background-color: #efefef;
}

.mailform .mail_inner form {
    margin: 40px auto 0 auto;
}

@media screen and (max-width: 767px) {
    .mailform .mail_inner {
        padding: 40px 20px 0 20px;
    }
}

.mailform .mail_inner input {
    padding: 16px;
}

@media screen and (max-width: 767px) {
    .mailform .mail_inner input {
        padding: 12px;
        width: 80%;
        margin: 0 auto;
        display: block;
    }
}

.instagram_area {
    margin: 80px auto;
    padding: 40px;
    background-color: #f5f3f3;
}

.instagram_area h3 {
    background: linear-gradient(90deg, #BF3A9C, #EB8136 30%, #D82F36);
    background: -webkit-linear-gradient(0deg, #BF3A9C, #EB8136 30%, #D82F36);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: none;
    width: 30%;
    margin: 0 auto 30px auto;
    font-size: 22px;
}

.instagram_area h3+p {
    text-align: center;
}

.instagram_area .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.instagram_area .flex {
    display: flex;
    justify-content: space-between;
    margin: 40px auto 0 auto;
}

.instagram_area .flex li {
    width: 31%;
    background-color: #ccc;
    text-align: center;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px 0;
}

@media screen and (max-width: 767px) {
    .instagram_area {
        padding: 20px;
    }
    .instagram_area h3 {
        width: 90%;
    }
    .instagram_area h3+p {
        text-align: left;
    }
    .instagram_area .flex li {
        width: 45%;
        height: 150px;
        margin: 12px 0;
    }
}

.right_link {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    background-color: #D22C25;
    width: 50px;
    height: 230px;
    z-index: 99;
    border-right: 5px solid #24579D;
}

.right_link p {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: center;
    color: #fff;
    line-height: 45px;
    height: 230px;
    padding-top: 20px;
}

.right_link a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.right_link a:hover {
    opacity: 1;
}

.right_link a:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 999;
    content: '\e0be';
    font-family: "Material Icons";
    color: #fff;
    text-align: center;
    font-size: 22px;
}

@media screen and (max-width: 767px) {
    .right_link {
        width: 40px;
        height: 200px;
        border-right: 3px solid #24579D;
    }
    .right_link p {
        font-size: 15px;
        line-height: 35px;
        height: 200px;
    }
    .right_link a:before {
        font-size: 18px;
    }
}
/*------------------------------------------
	アーカイブボタン
------------------------------------------*/
.link_archive {
	border: 2px solid #000000;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	max-width: 300px;
	padding: 10px 0;
	text-align: left;
    margin-bottom: 20px;
}
.link_archive span {
	line-height: 1.5em;
}
@media screen and (max-width: 834px) and (orientation: portrait) {
	.link_archive {
		max-width: 100%;
		justify-content: center;
	}
	.link_archive span {
		padding: 0 15px;
		font-size: 14px;
	}
	.link_archive br {
		display: none;
	}
}
/*------------------------------------------
	戦略マップ
------------------------------------------*/
.strategymap_ttl {
	font-size: 18px;
	font-weight: bold;
}
.strategymap {
	display: grid;
	/* grid-template-rows: 34vh; */
	grid-template-columns: 45% 10% 45%;
}
.strategymap i {
	font-size: 3vw;
	color: #0058A2;
}
.strategymap_thisyear {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.strategymap_thisyear > p {
	background: #ddefff;
	text-align: center;
	width: 100%;
	height: 2.5em;
    padding: 5px 0;
}
.strategymap_thisyear ul {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
}
.strategymap_thisyear ul li {
	width: 45%;
	margin-bottom: 0;
	border: 3px solid #0058A2;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.2em;
}
.strategymap_thisyear ul li:nth-child(2) {
	border: none;
	width: 10%;
    height: 20vw;
}
.strategymap_arrow {
	display: flex;
	align-items: center;
}
.strategymap_arrow i {
	padding-top: 2.5vw;
}
.strategymap_future {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.strategymap_future > p {
	background: #9ac6ed;
	text-align: center;
	width: 100%;
	/* font-size: 16px; */
    height: 2.5em;
    padding: 5px 0;
}
.strategymap_future ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	/* grid-template-rows: 33% 33% 33%;
    height: 100%; */
}
.strategymap_future ul li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.strategymap_future ul li:last-child {
	margin-bottom: 0;
}
.strategymap_future ul li span {
	border: 3px solid #0058A2;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40%;
	height: 100%;
	font-weight: bold;
    font-size: 18px;
}
.strategymap_future ul li span br {
	display: none;
}
.strategymap_future ul li p {
	width: 58%;
	margin-bottom: 0;
}
@media screen and (max-width: 834px) and (orientation: portrait) {
	.strategymap {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.strategymap i {
		font-size: 8vw;
		margin-left: 5px;
	}
	.strategymap_thisyear ul li {
		font-size: 15px;
	}
	.strategymap_arrow i {
		transform: rotate(90deg);
    	padding: 10px 0;
	}
	.strategymap_future ul li {
		width: 100%;
	}
	.strategymap_future ul li span {
		font-size: 15px;
		line-height: 1.2em;
		text-align: center;
	}
	.strategymap_future ul li span br {
		display: inline-block;
	}
}
/*------------------------------------------
	取り組み状況
------------------------------------------*/
.initiatives_theme {
	text-align: center;
	font-weight: bold;
	background: #eeeeee;
    padding: 30px 0;
	font-size: 18px;
}
.initiatives_imgbox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.initiatives_imgbox li {
	width: 49%;
	margin-bottom: 50px;
}
.initiatives_imgbox li p {
	height: 3em;
}
.initiatives_improvement li:first-child {
	width: 100%;
}
.initiatives_improvement li:first-child img {
	width: 35vw;
}
@media screen and (max-width: 834px) and (orientation: portrait) {
	.initiatives_imgbox li {
		width: 100%;
	}
	.initiatives_improvement li:first-child img {
		width: 100%;
	}
	.initiatives_imgbox li p {
		height: auto;
	}
}