@charset "UTF-8";

/* Color */
:root{
    --msblue:#0f71c6;
    --msyellow:#F7E662;
    --msgreen:#8cc640;
    --background-color-obi:#D6E2F3;
    --font-color-default:#363636;
    
    --fontsize-base:20px;
    
    --contents-max-width:1500px;
    --contents-width:78%;
    
    --sdgs-box:30%;
}
/* overall */
.ie_alert{
	display: block;
/*     position: fixed; */
    top: 5%;
    left: 5%;
    height: 230px;
    text-align: center;
    z-index: 1000;
}
.ie-add-control {
    position: fixed;
    width: 100%;
    top: 25%;
    z-index: 1500;
}
.ie-btn {
    color: #fff;
    background: #0f71c6;
    padding: .3em .5em;
    border-radius: .3em;
    text-align: center;
    display: table;
    cursor: pinter;
}
.ie-btn:hover {
    cursor: pinter;
}
.ie-btn:active {
    background: #59d5ff;
}
.ie-box {
    border: 2px solid #0f71c6;
    border-radius: .3em;
    height: 250px;
}

/* close button */
.ie-action-close {
    background: #fff;
    position: relative;
    margin: 2em;
    border-radius: 0.3em;
}
.ie-action-close .ie-btn {
    position: absolute;
    right: 0;
    top: -1em;
}
.ie-action-close .ie-box {
    margin-bottom: 2em;
    border: 2px solid #0f71c6;
}

/* checkbox 非表示 */
.ie-add-control .ie-checkbox {
    display: none;
    position: relative !important;
}

/* close button's control */
.ie-add-control .ie-action-close #close:checked ~ .ie-btn {
    display: none;
}
.ie-add-control .ie-action-close #close:checked ~ .ie-box {
    display: none;
}
.ie-add-control .ie-action-close #close:checked ~ .ie-add-control {
    display: none;
}


.alert {
	color:#fa8d3b;
    padding-top: 1em;
    font-size: 2rem;
}

body {
    font-size: var(--fontsize-base);
    color: var(--font-color-default);
    padding: 0;
    margin: 0;
}
.sp-view {
    display: none;
}
p,
.inner,
#corporate-info table .about_tbl,
#confirm table {
	font-size: calc(10px + 10 * (100vw - 576px)/1344);    
}
h1,h2 {
    font-family: serif;
	font-size: calc(16px + 24 * (100vw - 576px)/1344);
}
h2 {
	line-height: 2em;
}
h3 {
    font-family: serif;
	font-size: calc(12px + 24 * (100vw - 576px)/1344);
	font-weight: bold;
}
h4 {
	font-size: calc(10px + 24 * (100vw - 576px)/1344);
}
.font-large {
	font-size: calc(16px + 24 * (100vw - 576px)/1344);
}

/* header */
#header {
	height: calc(50px + 30 * (100vw - 767px)/1153);
	background: var(--white);
}
.header_wrap {
	max-width: var(--contents-max-width);
	width: var(--contents-width);
}
/*
.header_wrap .pc {
    width: calc(250px + 15 * (100vw - 767px)/1153);
    justify-content: space-between;
}
.header_wrap .sp {
/*     width: calc(200px + (3vw - 6px)*3); */
width: 50px;
}
*/
.flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.header_warp {
    display: inline;
}
.pc.logo {
/*     width: calc(340px + 15 * (100vw - 767px)/1153); */
    width: calc(200px + 140 * (100vw - 767px)/1153);
    margin-top: 5px;
}
.header_wrap .tel {
    float: right;
    width: calc(150px + 102 * (100vw - 767px)/1153);
    margin-top: 10px;
    margin-right: 10px;
}
.header_wrap .btn {
    float: right;
/* 	font-size: calc(0.7em + 11 * (100vw - 767px)/1153); */
	font-size: calc(10px + 6 * (100vw - 767px)/1153);
	margin-top: calc(4px + 11 * (100vw - 767px)/1153);
    background-color: var(--msyellow);
    border-color: var(--msyellow);
    padding: 13px 30px;
}
.header_wrap .btn:hover {
	color: var(--msblue);
}



/* Section */
#second,
#third,
#fourth,
#fifth,
#sixth,
#corporate-info {
	padding: 40px 0 40px;
}

#top {
    width: 100vw;
    height: calc(100vw * 0.64);
    background-image: url(../img/top_bg.jpg);
    background-size: 100% 100%;
    padding-top: calc(100vw * 0.05);
}

.image-vw {width: 100vw;}

.header_wrap,
.top,
.second,
.third,
.fourth,
.fifth,
.sixth,
.inner,
#confirm .confirmation {
	max-width: var(--contents-max-width);
	width: var(--contents-width);
}
#third,
#fifth,
#corporate-info,
#contact {
	background-color: var(--background-color-obi);
}

.top p {
    font-family: serif;
    padding-top: calc(100vw * 0.05);
    line-height: 2em;
/*     width: 68em; */
	font-size: calc(10px + 14 * (100vw - 767px)/1153);
}
.top .top-img {
    margin-top: calc(100vw * 0.05);
}
.top .top-img img {
    width: 80vw;
    top: calc(100vw * 0.01);
}
#second .merit-box {
	margin-bottom: 20px
}
#second .merit {
	background-color: var(--background-color-obi);
	border-radius: 10px;
	border: solid #fff 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 0;
	font-size: calc(9px + 10 * (100vw - 576px)/1344);
	line-height: 2em;
}

#second .suggestion {
	width: 80vw;
}
#second .market-development {
	text-align: center;
	font-weight: bold;
	font-size: calc(16px + 24 * (100vw - 576px)/1344);
	margin: 5vw 0 4vw;
}
.third h2 {
    margin-bottom: 40px;
}
.iso-bg-gray {
	margin-top: 1em;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: gray;
	color: #FFF;
	text-align: center;
	padding: 0.5em;
}
.iso-bg-white {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #fff;
	text-align: center;
	padding: 20px 0;
}
.iso-bg-white img {
    width: 75vw;
    max-width: 1421px;
}

.flow {
	text-align: center;
}
.flow img {
    width: 80vw;
}
.fourth p {
    font-family: serif;
    line-height: 2em;
}
.fourth .client,
.fourth .management {
    padding-top: calc(100vw * 0.1);
}
.fourth .management {
/* 	background: url(../img/management.png) no-repeat; */
}
.fourth .talk-obi {
	color: var(--white);
	background-color: #3270c0;
	height: 100px;
}
.fourth .client .talk-obi:after {
    background: url(../img/client.png) no-repeat;
	background-position: left bottom;	
	background-size: cover;
	height: 200px;
	width: 144px;
	content: '';
	display: block;
	position: absolute;
	left: 15px;
	top: calc((100vw * 0.1) - 100px);
}
.fourth .client .talk-obi h3 {
	padding-left: calc(50vw * 0.2);
	padding-top: 0.5em;
	font-family: cursive;
	font-weight: normal;
	margin-bottom: 0;
}
.fourth .client .talk-obi p {
	margin-block-end: 0;
	text-align: right;
    padding-right: 1em;
 }
.fourth .management .talk-obi:after {
    background: url(../img/manage-2.png) no-repeat;
	background-position: right bottom;	
	background-size: cover;
	height: 200px;
	width: 186px;
	content: '';
	display: block;
	position: absolute;
	right: 15px;
	top: calc((100vw * 0.1) - 100px);
}
.fourth .management .talk-obi h3 {
	padding-left: 1em;
	padding-top: 0.5em;
	font-family: cursive;
	font-weight: normal;
	margin-bottom: 0;
}
.fourth .management .talk-obi p {
	margin-block-end: 0;
	text-align: right;
    padding-right: 207px;
}
.fourth .client-talk,
.fourth .manage-talk {
	background: var(--background-color-obi);
	padding: 6% 8%;
}
.fifth .photo-txt {
    font-family: cursive;
    margin-top: 1em;
	font-size: calc(15px + 1 * (100vw - 767px)/1153);
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}
.fifth .photo-txt p {
    background: var(--msblue);
    color: #fff;
    border-radius: 3px;
    padding: 0.5em 0 0.3em;
    width: 14em;
}
.fifth .work-photos {
	display: flex;
}
.fifth .work-photos img {
	width: 23vw;
	margin-top: 0 !important;
}
.fifth .photo-square {
    width: 23vw;
}

.sixth div p {
	font-family: serif;
	line-height: 2em;
}
.sixth h3 {
	padding: 1em 0;
}
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: -10px;
	width: 100%;
	height: 140px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(214, 226, 243, 1) 95%);
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 30px;
	left: 50%;
	width: 16rem;
	font-family: FontAwesome;
	content: '\f13a'' もっと見る';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 20px;
	background-color: rgba(27, 37, 56, 1);
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 23vw; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: FontAwesome;
	content: '\f139'' 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}

.sustainable-box {
	 display: flex;
 }
 
.sustainable-item {
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: solid #fff 5px;
}
.sustainable-item:nth-child(1) {
	background-color: #E3F0FF;
}
.sustainable-item:nth-child(1) h4::before {
	content: "1.";
}
.sustainable-item:nth-child(2) {
	background-color: #FFEAEA;
}
.sustainable-item:nth-child(2) h4::before {
	content: "2.";
}
.sustainable-item:nth-child(3) {
	background-color: #EBFDE2;
}
.sustainable-item:nth-child(3) h4::before {
	content: "3.";
}
.sdgs-theme {
    height: 9em;
}
.sdgs-box {
	display: flex;
	justify-content: center;
	padding-bottom: 10px;
}
.sdgs-box img {
    width: var(--sdgs-box);
    height: calc(7vw);
    margin-left: 10px;
}
.sdgs-box img:nth-child(1) {
    margin-left: 0;
}
.sustainable-box .sustainable-item:nth-child(2) .sdgs-box {

}
.sdgs-box img:nth-child(3) {

}

#corporate-info .inner {
	padding: 20px 10%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #fff;	
}
#corporate-info .inner th {
	width: 10em;
	font-weight: normal;
	vertical-align: baseline;
}
#corporate-info .about_tbl th,
#corporate-info .about_tbl td {
	padding: calc(10px + 10 * (100vw - 576px)/1344);
}
#corporate-info .about_tbl img {
	width: 18vw;
}
#map .map {
	font-size: 0;
}

/* form */
#contact {
	padding: 40px;
}
#contact .white-bg {
	background: var(--white);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 20px 10%;
}
#contact .offer {
	margin: 20px 0;
}
#contact .btnwrap {
	text-align: center;
}
#contact th {
	text-align: left;
	font-weight: normal;
    vertical-align: initial;
    width: 12em;
}
.contact .tel h3 {
	line-height: 2em;
}
.contact .form h3 {
	line-height: 3em;
}
.content.sp img {
    width: 100%;
}
.form .check_wrap label {
    display: block;
    cursor: pointer;
    text-align: left;
}
.form .form-tbl {
	width: 90%;
}

.form .form-tbl td {
    padding-bottom: 18px;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"] {
/*     border-radius: 5px; */
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    padding: 10px 15px;
    height: 40px;
    width: 100%;
}
.form textarea {
/*     border-radius: 10px; */
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
    padding: 15px;
    height: 200px;
    resize: vertical;
    width: 100%;
}
.form .btn {
    height: 4em;
}
.form .btn input {
    height: 100%;
    width: 100%;
    min-width: 12em;
    border: none;
    background-color: var(--msyellow);
    cursor: pointer;
}
.formError .formErrorContent {
    width: 100%;
    background: #FF7B00;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px 4px 10px;
    text-align: left;
}
.form .check_wrap label input[type="checkbox"]:checked + span:after {
    border-left: 3px solid #192f60;
    border-bottom: 3px solid #192f60;
}
/* footer */
#footer .footer {
	background-color: var(--msblue);
	color: #fff;
	text-align: center;
	padding: 0.5em 0 0.1em;
}

/* 
 * Confirm page    
 */
#confirm {
    background: var(--background-color-obi);
}

#confirm .confirmation {
    justify-content: center;
    align-items: center;
    text-align: center;    
    background: #fff;
    padding: 3em 0;
    border-radius: 10px;
}
#confirm .confirmation h1 {
    margin-bottom: 2em;
}
#confirm td {
    text-align: left;
	padding-bottom: 18px;
}
#confirm table {
    margin-bottom: 2em;
}
#confirm button.btn.back {
    background: #c7e89a;
    padding: 0 4em;
    height: 3.1em;
}
/* 
 *   finish page
 */
#finish {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}
.finish {
	text-align: center;
}
.form .check_wrap label input[type="checkbox"] {
	visibility: hidden;
	position: absolute;
	width:1px;
}

.form .check_wrap label {
	display: block;
	cursor: pointer;
}

.form .check_wrap label + label {
	margin-top: 5px;
}

.form .check_wrap label span {
	display: inline-block;
	padding-left: 30px;
	position: relative;
}

.form .check_wrap label span:before {
	border-radius:3px;
	border: 1px solid #333;
	content: '';
	display: block;
	height: 20px;
	position: absolute;
	left: 0;
	top: calc(50% - 10px);
	width: 20px;
}

.form .check_wrap label input[type="checkbox"]:checked + span:after {
	content: '';
	display: block;
	height: 8px;
	left: 4px;
	position: absolute;
	top: calc(50% - 6px);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	width:12px;
}

.form .form_tbl td .check_wrap label span {

}
.form .form_tbl .zip {
	max-width: 210px;
}
.form .form_tbl .other th {
	vertical-align: top;
}
.form .form_tbl .other textarea {
	height: 120px;
}



/* 
 *  media	
 */
@media screen and (max-width: 1140px) {
	.fourth .client .talk-obi h3 {
    	padding-left: calc(50vw * 0.3);
    }
    .fourth .client .talk-obi,
    .fourth .management .talk-obi {
	    height: 75px;
    }
    .fourth .client .talk-obi:after {
		height: 150px;
		width: 110px;
		top: calc((100vw * 0.1) - 75px);
	}
    .fourth .management .talk-obi:after {
		height: 150px;
		width: 140px;
		top: calc((100vw * 0.1) - 75px);
	}
	.fourth .management .talk-obi p {
		padding-right: 146px;
	}
	.fifth .col-sm-3.photo-txt p {
    	width: 12em;
	}
    .sdgs-theme {
        height: 7em;
    }

}

@media screen and (max-width: 980px) {
	.top p {
	    padding-top: calc(100vw * 0.06);
	    line-height: 2.5em;
	}
}

@media screen and (max-width: 875px) {
	.fourth .client .talk-obi h3,
	.fourth .management .talk-obi h3 {
		padding-top: 1em;
	}
	.talk-obi p {
	    font-size: 10px;
	}
    #second .market-development {
        text-align: left;
    }
	.fifth .col-sm-3.photo-txt p {
    	width: 10em;
	}

}

@media screen and (max-width: 767px) {
    #header {
        height: 50px;
    }
    #header .sp .logo {
        margin-top: 1px;
    }
    .sp button.btn {
        background: var(--msyellow);
        padding: 2em 0.5em;
    }
	#header .top .top-img {
	    margin-top: calc(100vw * 0.03);
	}
	.top p {
	    padding-top: calc(100vw * 0.03);
	}
	#second .merit {
		font-size: 9px;
	}

	.fourth .client .talk-obi h3,
	.fourth .management .talk-obi h3 {
		padding-top: 0.2em;
		font-size: calc(20px + 24 * (100vw - 576px)/280);
	}
	.talk-obi p {
	    font-size: 10px;
	}
	.talk-obi p {
	    font-size: calc(10px + 10 * (100vw - 576px)/300);
	}

    .toggle {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
        padding: 10px;
        z-index: 10;
    }
    .menu {
        background: rgba(255,255,255,0.8);
        display: none;
        padding: 30px 8%;
        position: absolute;
        left: 0;
        height: calc(100vh - 50px);
        overflow-y: auto;
        top: 50px;
        width: 100%;
        z-index: 100;
    }
    .menu .gnav li {
        list-style: none;
    }
    .menu .gnav li a {
        border-bottom: 1px solid #000;
        color: #000;
        display: block;
        font-size: 1.6rem;
        padding: 8px 0;
        position: relative;
    }
    .menu a {
        text-decoration: none;
    }
    .menu .btnlink {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 20px 0;
    }
    .menu .btnlink li {
        width: 48%;
        list-style: none;
    }
    .toggle {
        background: #FFF;
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		padding: 10px;
		z-index: 10;
	}
	.toggle span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 30px;
		height: 2px;
		border-radius: 0;
	}
	.toggle span:nth-of-type(1) {
		top: 13px;
	}
	.toggle span:nth-of-type(2) {
		top: 24px;
	}
	.toggle span:nth-of-type(3) {
		bottom: 13px;
	}

	.toggle.active span:nth-of-type(1) {
		-webkit-transform: translateY(11px) rotate(45deg);
		transform: translateY(11px) rotate(45deg);
	}
	.toggle.active span:nth-of-type(2) {
		opacity: 0;
	}
	.toggle.active span:nth-of-type(3) {
		-webkit-transform: translateY(-11px) rotate(-45deg);
		transform: translateY(-10px) rotate(-45deg);
	}


	.toggle {
		background: #fff;
	}
	.toggle span {
		background: #043c78;
	}
	.menu {
		background: rgba(15,15,15,0.8);
	}
	.menu .gnav li a {
		border-bottom: 1px solid #fff;
		color: #fff;
		font-family: 'Noto Serif JP', serif;
		font-weight: 500;
	}
	.menu .btnlink li a {
		color: #fff;
	}
	.menu .btnlink li:nth-child(1) a {
		background: #B41E1E;
	}
	.menu .btnlink li:nth-child(2) a {
		background: var(--msgreen);
		color: var(--font-color-default);
        padding: 35px 10px;
        border-radius: 5px;
        font-size: 1rem;
	}
    #contact th,
    #contact  td {
        display: block;
    }
    #corporate-info .about_tbl th,
    #corporate-info .about_tbl td {
    	padding: 0;
    }
    #corporate-info .inner th {
        width: 8em;
    }

}
@media screen and (max-width: 700px) {
	#second .merit {
		font-size: 8px;
	}
}
@media screen and (max-width: 576px) {
    .sp-none {
        display: none;
    }
    .sp-view {
        display: block;
    }
	#top {
		padding-top: 0.5em;
	}
	.top .top-img {
	    margin-top: 0;
	}
	.fourth .client .talk-obi h3,
	.fourth .management .talk-obi h3 {
		padding-top: 1em;
		font-size: calc(20px + 24 * (100vw - 576px)/280);
	}
	.fourth .client .talk-obi h3 {
    	padding-left: 110px;
	}
	.fifth .work-photos img {
    	width: 40vw;
    	padding-bottom: 10px;
	}
	.cp_box .cp_container {
        height: 92vw;
    }
	.sdgs-theme {
    	height: auto;
	}
	h3.modal-title {
    	font-size: 1em;
    }
    .sdgs-box img {
	    height: calc(23vw);
	}

}