@charset "utf-8";
/*======================
会社概要
======================*/

/**/
#profile-page{ padding: 60px 0 80px;}
#profile-page h2{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px;}
#profile-page h2 .en{ display: block; margin-bottom: 10px; }
#profile-page h2 .jpn{ display: inline-block; border-top: solid 4px #000; padding-top: 10px;}

#profile-page .list{ position: relative;}
#profile-page .list tr{ width: 100%; position: relative; padding: 10px 0;}
#profile-page .list::before, 
#profile-page .list::after, 
#profile-page .list tr::before, 
#profile-page .list tr::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 1px; display: block;}
#profile-page .list::before, 
#profile-page .list tr::before{ width: 150px; background: var(--color1); z-index: 4;}
#profile-page .list::after, 
#profile-page .list tr::after{ width: 100%; background: #ddd; z-index: 2;}
#profile-page .list::before, 
#profile-page .list::after{ bottom: auto; top: 0;}
#profile-page .list tr > *{ text-align: left; padding: 30px 10px;}
#profile-page .list tr th{ width: 160px;}
#profile-page .list tr td a{ color: var(--color1); text-decoration: underline;}
#profile-page .list tr td a:hover{ text-decoration: none;}
/**/
.camp #about .logobox{ text-align: center; padding: 120px 0 200px;}
.camp #about .logobox img {width: 300px; height: auto;}

@media screen and (max-width: 700px) {
#profile-page{ padding: 40px 0 80px;}
#profile-page .list tr > *{ font-size: 14px; padding: 20px 10px;}
#profile-page .list::before, 
#profile-page .list tr::before{ width: 130px;}
#profile-page .list tr th{ width: 140px;}
}
@media screen and (max-width: 500px) {
#profile-page .list tr > *{ font-size: 13px; padding: 15px 10px;}
#profile-page .list::before, 
#profile-page .list tr::before{ width: 120px;}
#profile-page .list tr th{ width: 130px;}
.camp #about .logobox{ text-align: center; padding: 80px 0 150px;}
.camp #about .logobox img {width: 240px; height: auto;}
}