@charset "UTF-8";

/*
==================================================

   会社情報

==================================================
*/



/*
==================================================
  ボディヘッダー
==================================================
*/

#bodyheader {
background: var(--accent1-col) url(../../image/header/company.jpg) no-repeat right center / cover;
}

/* 英語表記 */
#bodyheader p.en {
color: rgba(255, 255, 255, 0.5);
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {


}
/* ----- /899 ----- */



/*
==================================================
  コンテンツ
==================================================
*/

#contents section {

}

/* ----- イントロ ----- */
#intro {
padding: 100px 0 80px;
}

#intro div.wrap {
display: flex;
column-gap: 30px;
}
#intro div.text {
width: calc(50% - 25px);
}
#intro div.img {
width: calc(50% - 5px);
min-width: 500px;
}

/* ----- 会社概要 ----- */
#profile {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#profile div.wrap {
display: flex;
column-gap: 20px;
margin: 60px 0 60px;
}

#profile div.table-wrap {
width: calc(50% - 10px);
background: #ffffff;
}

#profile table thead th {
font-size: 1.2rem;
}
#profile table tbody th {
width: 6em;
}

#profile table dl.executive {
display: flex;
flex-wrap: wrap;
}
#profile table dl.executive dt {
width: 6.5em;
line-height: 1.6;
}
#profile table dl.executive dd {
width: calc(100% - 6.5em);
line-height: 1.6;
}
#profile table dl.executive dd:last-child {
margin: 0;
}

#profile table ul.list li {
line-height: 1.6;
}

#profile div.table-wrap p.date {
margin: 10px;
font-size: 0.9rem;
text-align: right;
line-height: 1;
}

/* 各種認証・取り組み */
#profile section {
margin: 0 0 50px;
padding: 40px 30px;
background: #ffffff;
}
#profile section h3 {
margin: 0 0 40px;
font-size: 2rem;
font-weight: 900;
color: var(--accent1-col);
}

#profile section ul.mark {
display: flex;
}
#profile section ul.mark li {
width: 20%;
text-align: center;
}
#profile section ul.mark li div {
height: 120px;
line-height: 120px;
}
#profile section ul.mark li div img {
vertical-align: middle;
}
#profile section ul.mark li b {
display: inline-block;
font-size: 0.9rem;
line-height: 1.4;
}

/* PMVV */
#profile div.pmvv {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
height: 250px;
background: var(--accent1-col) url(../../company/image/pmvv_back.jpg) no-repeat center / cover;
}
#profile div.pmvv::after {
content: '2035';
position: absolute;
bottom: -15px;
left: 20px;
font-family: 'Oswald', sans-serif;
font-size: 160px;
font-weight: bold;
color: rgba(255, 255, 255, 0.5);
}

#profile div.pmvv div.pmvv-wrap {
margin: 0 0 0 auto;
padding: 0 20px 0 0;
}
#profile div.pmvv div.text {
text-align: center;
}
#profile div.pmvv div.text p {
margin: 0;
font-size: 1.5rem;
font-weight: 900;
color: #ffffff;
line-height: 1.8;
-webkit-text-stroke: 2px var(--accent1-col);
text-stroke: 2px var(--accent1-col);
paint-order: stroke;
}

#profile div.pmvv div.btn {
width: 20rem;
margin: 20px auto 0;
background: #ffffff;
}
#profile div.pmvv div.btn::before {
background: var(--accent2-col);
transition-duration: 0.2s;
}
#profile div.pmvv div.btn a {
padding: 20px 10px;
border: 1px var(--accent2-col) solid;
font-size: 1.1rem;
font-weight: bold;
color: var(--accent2-col);
text-align: center;
transition: 0.2s;
}
#profile div.pmvv div.btn a:hover {
color: #ffffff;
}
#profile div.pmvv div.btn a.arrow-ku-s::before {
right: 20px;
}

/* ----- 拠点一覧 ----- */
#location {
padding: 100px 0 80px;
}

#location section {
margin: 50px 0 80px;
}
#location section:last-child {
margin: 0;
}
#location section h3 {
margin: 0 0 30px;
font-size: 2rem;
font-weight: 900;
color: var(--accent1-col);
line-height: 1.4;
}

#location ul {

}
#location ul li {
display: flex;
column-gap: 50px;
margin: 0 0 50px;
padding: 30px;
border: 8px var(--box-border) solid;
}
#location ul li:last-child {
margin: 0;
}
#location ul li div.wrap {
width: calc(45% - 60px);
min-width: 320px;
}

#location ul li dl {
margin: 0 0 20px;
}
#location ul li dl dt {
margin: 0 0 20px;
font-size: 1.8rem;
font-weight: bold;
}
#location ul li dl dd {
font-size: 1.1rem;
line-height: 1.6;
}
#location ul li div.img {

}

#location ul li div.map {
width: 55%;
}
#location ul li div.map iframe {
width: 100%;
height: 100%;
}

/* ----- 沿革 ----- */
#history {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#history div.table-wrap {
margin: 60px 0 0;
}

#history table tbody th {
width: 10em;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- イントロ ----- */
#intro {
padding: 50px 0;
}

#intro div.wrap {
display: block;
}
#intro div.text {
width: auto;
margin: 0 0 40px;
}
#intro div.img {
width: auto;
max-width: 500px;
min-width: 0;
margin: 0 auto;
}

/* ----- 会社概要 ----- */
#profile {
padding: 50px 0;
}

#profile div.wrap {
display: block;
margin: 40px 0;
}

#profile div.table-wrap {
width: auto;
margin: 0 0 40px;
}
#profile div.table-wrap:last-child {
margin: 0;
}

#profile table thead th {
font-size: 1.1rem;
}
#profile table tbody th {
width: 6em;
}

#profile table dl.executive dt {
width: 6em;
}
#profile table dl.executive dd {
width: calc(100% - 6em);
}

/* 各種認証・取り組み */
#profile section {
margin: 0 0 40px;
padding: 25px 10px;
}
#profile section h3 {
margin: 0 0 20px;
font-size: 1.1rem;
}

#profile section ul.mark {
flex-wrap: wrap;
gap: 10px 0;
}
#profile section ul.mark li {
width: 50%;
}

/* PMVV */
#profile div.pmvv {
display: block;
height: 250px;
}
#profile div.pmvv::after {
bottom: -10px;
font-size: 90px;
}

#profile div.pmvv div.pmvv-wrap {
margin: 0;
padding: 30px 10px 0;;
}
#profile div.pmvv div.text {
text-align: center;
}
#profile div.pmvv div.text p {
font-size: 1rem;
}

#profile div.pmvv div.btn {
width: 18rem;
}
#profile div.pmvv div.btn a {
padding: 13px 5px;
font-size: 1rem;
}
#profile div.pmvv div.btn a:hover {
color: var(--accent2-col);
}
#profile div.pmvv div.btn a.arrow-ku-s::before {
right: 15px;
}

/* ----- 拠点一覧 ----- */
#location {
padding: 50px 0;
}

#location section {
margin: 40px 0 50px;
}
#location section h3 {
margin: 0 0 20px;
font-size: 1.1rem;
line-height: 1.8;
}

#location ul li {
display: block;
margin: 0 0 30px;
padding: 20px 10px;
border: 4px var(--box-border) solid;
}
#location ul li div.wrap {
width: auto;
min-width: 0;
margin: 0 0 30px;
}

#location ul li dl {
margin: 0 0 30px;
}
#location ul li dl dt {
font-size: 1.1rem;
}
#location ul li dl dd {
font-size: 1rem;
}
#location ul li div.img {
max-width: 500px;
margin: 0 auto;
}

#location ul li div.map {
width: auto;
max-width: 500px;
height: 280px;
margin: 0 auto;
}

/* ----- 沿革 ----- */
#history {
padding: 50px 0;
}

#history div.table-wrap {
margin: 40px 0 0;
}

#history table tbody th {
width: 8em;
}

}
/* ----- /899 ----- */