@charset "utf-8";
/* CSS Document */

.modals {display: none;}
.modaal-wrapper strong {font-size: 18px; text-align: center; display: block; padding-bottom:0.8em; color: #b6a97e;}
.modaal-wrapper em {display: block; background: #1f1e19; text-align: center; border-radius: 3px; margin-top: 50px; font-size: 18px; padding: 0.4em; clear: both;}
.modaal-wrapper p {padding:0 0.5em 1em 0.5em; color:#bdbbb4;}
.modaal-wrapper .photo {margin-bottom: 30px; width: 40vw; clear: both; margin-left: auto; margin-right: auto; text-align: center;}
.modaal-wrapper hx {font-size: 85%; font-style: initial; font-family: 'Noto Serif JP'; margin-bottom: 30px; display: block; color: #848484; text-align: center;}
.modaal-wrapper dl {font-weight: normal; margin-bottom: 40px; width: 70%; margin-left: auto; margin-right: auto;}
.modaal-wrapper dt {float: left; clear: both; margin-left: 20px; margin-bottom: 20px; width: 90px;}
.modaal-wrapper dd {margin-bottom: 20px;}



#modal-content{
 width: 97%;
 top: 50%;
 left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
 padding: 46px;
 background: #ffffffc2;
 display: none;
 z-index: 2;
 position: fixed;
}

@media screen and (max-width:1580px) {
.art_box{
 clear: both;
 margin-bottom: 30px;
	background-color: #b6a97e;
	display:flex;
}
.art_box img{
	margin-right: auto;
    margin-left: auto;
	width: 70%;
}
.art_box p{
	color: #fff;
	line-height: 150%;
}
.art_box p.department{
	letter-spacing: -1px;
	padding-top: 30px;
}
.art_box strong{
 font-size: 140%;
	color: #fff;
	margin: 20px 0px -10px;
}
.cc_works_center{
    width: 50%;
	margin-left: auto;
    margin-right: auto;
}
.cc_works_center p{
 letter-spacing: -1px;
}
.cc_works_center em.announce{
    background-color: #4a4a4a;
    color: #e8e8e8;
    font-weight: 100;
    font-size: 100%;
    padding-right: 20px;
}
.cc_works_center ul{
margin-bottom: 60px;
}
.cc_works_center li.works_detail{
margin-left: 40px;
margin-bottom: 6%;
margin-top: 8%;
}
.cc_works_center li.works_detail p{
margin-left: 10px;
    margin-bottom: 20px;
    line-height: 120%;
}
}

@media screen and (max-width:767px) {
.modaal-wrapper .photo {width: 100%;}
.modaal-wrapper hx {font-size: 18px;}
.modaal-wrapper dl {font-size: 16px;width: 100%;line-height: 2;}
.modaal-wrapper dt {margin-left: 0px; width: 100%; margin-bottom: 0px; color: #777;}
.modaal-wrapper em {font-size: 16px;letter-spacing: 0;}
.modaal-wrapper p {font-size: 16px;letter-spacing: 0.04em;line-height: 1.9em;}
.art_box img {margin-right: auto;margin-left: auto;width: 100%;}
.cc_works_center {width: 80%;}
.cc_works_center em.announce{font-size: 18px;}
.cc_works_center li.works_detail {margin-left: 0;margin-bottom: 15%;margin-top: 15%;font-size: 16px;}
.cc_works_center p {font-size: 16px;}
}

.profile_box{
 clear: both;
 margin-bottom: 30px;
	padding-right: 20px;
	background-color: #b6a97e;
	display:flex;
}
.profile_box img{
	float: left;
	margin-right: 30px;
}
.profile_box p{
	color: #fff;
	line-height: 150%;
}
.profile_box p.department{
	letter-spacing: -1px;
	padding-top: 30px;
}
.profile_box strong{
 font-size: 140%;
	color: #fff;
	margin: 20px 0px -10px;
}



.cc_staff_left{
 float:left;
     width: 50%;
}
.cc_staff_right{
 float:left;
	margin-left: 50px;
	width: 43%;
}
em.announce{
 display:block;
 background-color: #b6a97e;
 color: #fff;
 padding: 5px 0px 5px 20px;
 margin: 0px 0px 15px 0px;
 width: 100%;
 clear: both;
letter-spacing: -1px;
}
.cc_staff_left p{
 margin: 0px 0px 30px 0px;
letter-spacing: -1px;
}
.cc_staff_right p{
 letter-spacing: -1px;
}
.cc_staff_right em.announce{
    background-color: #c1bba6;
    color: #49463b;
    font-weight: bold;
}
.cc_staff_right ul{
margin-bottom: 30px;
}
.cc_staff_right li.staff_schedule{
margin-left: 40px;
}
.cc_staff_right li.staff_schedule p{
margin-left: 10px;
    margin-bottom: 20px;
    line-height: 120%;
}

#modal-overlay {
    z-index: 1;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba( 0,0,0, 0.75 );
}