/*====================================================
------------------------------------------------------
    aboutus.css
------------------------------------------------------
====================================================*/


/* --------------------------------------------------
    titleAre
-------------------------------------------------- */
.aboutus .titleArea > .inner { display: flex; align-items: center; padding: 80px 0 0; margin: 0 auto;}
.aboutus .titleArea h1 { font-size: 8rem; font-weight: 600; margin-right: 45px; line-height: 1em;}
.aboutus .titleArea span { font-size: 4rem;}

@media screen and (max-width: 767px){
.aboutus .titleArea > .inner { padding: 50px 15px 0;}
.aboutus .titleArea h1 { font-size: 4rem;}
.aboutus .titleArea span { font-size: 2rem;}
}

.aboutus_h2_line { font-size: 2.8rem; font-weight: 700; line-height: 1.6em; border-bottom: 3px solid var(--color_sub_red10); padding: .7em 0; margin-bottom: 1em; position: relative;}
.aboutus_h2_line:after { content: ""; width: 100px; height: 3px; background: var(--color_main_red); position: absolute; bottom: -3px; left: 0; z-index: 1;}
.aboutus_h2 { font-size: 2.8rem; font-weight: 700; line-height: 1.6em; padding: .7em 0; margin-bottom: .5em;}


@media screen and (max-width: 840px){
.aboutus_h2_line,.aboutus_h2 { font-size: 2rem;}
}



/* --------------------------------------------------
   greething 
-------------------------------------------------- */
.greeting { display: flex; justify-content: space-between;}
.greeting p { width: calc(100% - 400px); font-size: 1.8rem; line-height: 2em; padding-bottom: 2.4em;}
.greeting figure {  width: 376px;}
.greeting figure img { width: 100%;}
.greeting figcaption { font-size: 2.6rem;}
.greeting figcaption span { display: block; font-size: 1.8rem; margin: 10px 0;}

@media screen and (max-width: 767px){
.greeting { flex-direction: column;}
.greeting figure { max-width: 376px; margin: 30px auto;}
.greeting p { width: 100%; };
}

@media screen and (max-width: 420px){
.greeting figure { max-width: 100%; margin: 30px auto;}
}

/* --------------------------------------------------
   philosophy
-------------------------------------------------- */
.philosophy { background: var(--color_whitegray);}
.hilosophyCont { display: flex; justify-content: space-between;}
.hilosophyCont h3 { color: var(--color_main_red); margin-bottom: 20px;}
.hilosophyCont p { margin-bottom: 30px;}

@media screen and (max-width: 767px){
.hilosophyCont { flex-direction: column;}
.hilosophyCont figure { margin: 30px auto;}

}

/* --------------------------------------------------
   outline
-------------------------------------------------- */
.outline table { width: 100%; border-top: 1px solid var(--color_bluegray); border-left: 1px solid var(--color_bluegray);}
.outline th,
.outline td { padding: 20px; border-bottom: 1px solid var(--color_bluegray); border-right: 1px solid var(--color_bluegray);}
.outline th { font-weight: 400; width: 30%; background: var(--color_whitegray); vertical-align: middle;}

@media screen and (max-width: 620px){
.outline th,
.outline td {display: block; width: 100%;}
.outline th { padding: 10px 20px; text-align: left;}
}

/* --------------------------------------------------
   office
-------------------------------------------------- */
.office { background: var(--color_whitegray);}

.office .officeInfoArea { margin: 30px 0;}
.office .officeInfoArea .photo_map { display: flex; justify-content: space-between; margin-bottom: 10px;}
.office .officeInfoArea .photo_map figure { display: block; width: 32%;}
.office .officeInfoArea .photo_map figure img { width: 100%;}
.office .officeInfoArea .photo_map .googlemap { display: block; width: 65%;}
.office .officeInfoArea .photo_map .googlemap iframe { width: 100%; height: 100%;}
.office .officeInfoArea address { font-size: 1.8rem; line-height: 1.8em; margin-bottom: 30px;}
.office .officeInfoArea h3 { font-size: 2.5rem; font-weight: 400; margin-bottom: 20px;}
.office .officeInfoArea h3:before { content: ""; display: inline-block; width: 20px; height: 20px; background: var(--color_main_red); margin-right: 10px;}

@media screen and (max-width: 767px){
.office .officeInfoArea::before { content: ""; display: block; padding-top: 50px; margin-top: -50px;}
.office .officeInfoArea .photo_map { flex-direction: column;}
.office .officeInfoArea .photo_map figure { width: 100%; margin-bottom: 30px;} 
.office .officeInfoArea .photo_map .googlemap { width: 100%;}
.office .officeInfoArea .photo_map .googlemap iframe { width: 100%; height: 100%; aspect-ratio: 4 / 3;} 
.office .officeInfoArea address { font-size: 1.6rem;}
}

/* --------------------------------------------------
   history
-------------------------------------------------- */
.history table { width: 100%; border-top: 1px solid var(--color_bluegray); border-left: 1px solid var(--color_bluegray); margin-bottom: 50px;}
.history th,
.history td { padding: 20px; border-bottom: 1px solid var(--color_bluegray); border-right: 1px solid var(--color_bluegray);}
.history th { font-weight: 400; width: 30%; background: var(--color_whitegray); vertical-align: middle;}
.history .photoArea { display: flex; justify-content: center}
/*.company.detail.history .photoArea div:first-of-type { width: 27%;}
.company.detail.history .photoArea div:first-of-type figure:first-of-type { margin-bottom: 20px;}
.company.detail.history .photoArea div:last-of-type { width: 70%;}*/
.history .photoArea div  { width: 23%; margin: 0 2%;}
.history .photoArea figure img { width: 100%;}
.history .photoArea figcaption { font-size: 1.4rem;}
.history .photoArea figure img { width: 100%;}

@media screen and (max-width: 620px){
.history th,
.history td {display: block; width: 100%;}
.history th { padding: 10px 20px; text-align: left;}
}


/* --------------------------------------------------
   quality
-------------------------------------------------- */
.quality { background: var(--color_whitegray);}
.quality h3 { font-weight: 400; font-size: 1.8rem; margin-bottom: .5em; font-weight: bold;}
.quality ol { padding-left: 30px; margin: 40px 0;}
.quality li { margin-bottom: .8em;}
.quality .sign { margin-bottom: 50px;}


/* --------------------------------------------------
   Company Profile
-------------------------------------------------- */
.linkText a { text-decoration: underline;}
.linkText a:hover { color: var(--color_main_red);}


/* --------------------------------------------------
   bt
-------------------------------------------------- */

.linkBt a { color: var(--color_main_red); font-size: 3.4rem; height: 120px; display: flex; align-items: center; width: 100%; background: var(--color_lghtbluegray); border-radius: 20px; text-decoration: none; padding-left: 30px; margin-bottom: 50px; position: relative;}
.linkBt a:after { content: ""; width: 36px; height: 36px; background: url(/english/common/images/share/icon_blank_bgW_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 20px; margin: auto;}


@media screen and (max-width: 620px){
.linkBt a {font-size: 2.8rem; height: 90px;}
}

@media screen and (max-width: 440px){
.linkBt a {font-size: 2.2rem; height: 90px; padding-left: 15px;}
}