@charset "UTF-8";

.r-border{border:1px solid #626262;}
.r-red{border-color:#ff3333;}
.r-round{border-radius:1em;}
.r-4px{border-width:4px;}
.r-p-4{padding:4em;}

.section-flex{
	display:flex;
	flex-direction:column;
	gap:1.25em;
}

.article-wrap {
    line-height: 1.7;
}

.img-right {
    float: right;
	width:auto !important;
    max-width: 100%;
    margin: 0 0 15px 1.5em;
	transition:all 0.5s;
}

.article-wrap::after {
    content: "";
    display: block;
    clear: both;
}

.flex-2col{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:15px;
}


#comm_wrap .notice_area_comm  .cs_box{display:block;margin-top:0px; width:100%; padding:40px 30px; background:#F7F8FB; border:1px solid #eee; box-sizing:border-box;}
#comm_wrap .notice_area_comm  .cs_box .cs_left{width:60%; display:inline-block; vertical-align:middle; padding-right:10px;}
#comm_wrap .notice_area_comm  .cs_box .cs_left p.cs_t1{font-size:1.25em; color:#000;}
#comm_wrap .notice_area_comm  .cs_box .cs_left p.cs_t2{margin-top:7px; font-size:2em; color:#000; font-weight:700;}
#comm_wrap .notice_area_comm  .cs_box .cs_left p.cs_t3{margin-top:5px; font-size:1em; color:#777; line-height:1.6em;}
#comm_wrap .notice_area_comm  .cs_box .cs_right{width:39%; display:inline-block; vertical-align:middle; padding:0; margin:0;}
#comm_wrap .notice_area_comm  .cs_box .cs_right a{float:left; width:46%; margin-left:4%; padding:15px 10px; text-align:center; color:#fff; font-size:1em; border-radius:5px;}
#comm_wrap .notice_area_comm  .cs_box .cs_right a:first-child{margin-left:0;}
#comm_wrap .notice_area_comm  .cs_box .cs_right a i{transform:rotateY(0deg); display:block; vertical-align:middle; margin-bottom:10px; font-size:2em;}
#comm_wrap .notice_area_comm  .cs_box .cs_right a.btn_call{display:none; background:#536994;}
#comm_wrap .notice_area_comm  .cs_box .cs_right a.btn_location{background:#536994;}
#comm_wrap .notice_area_comm  .cs_box .cs_right a.btn_online{background:#2c64e5;}
#comm_wrap .notice_area_comm  .cs_box .cs_right a:hover{background:#152233;}

@media(max-width:900px){
	.img-right {
		float: right;
		width:auto !important;
		max-width: 300px;
		margin: 0 0 15px 1.5em;
		transition:all 0.5s;
	}


	.flex-2col{
		grid-template-columns:repeat(1,1fr);
	}
}
@media(max-width:600px){
	.img-right {
		float: none;
		width:auto !important;
		max-width: 100%;
		margin: 0;
	}
}