@charset "utf-8";
/* CSS Document */
a {
	text-decoration:none;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.boxtab {	
	justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.boxtab:after {
    content: "";
    display: table;
    clear: both;
}

.boxmain {
	display:flex;
	flex-direction: column;
    width: auto;
    text-align: left;
    margin: 0;
    padding: 0;
	//background-color:#F00;
}
.boxleft{
	//background-color:blue;
}
.boxright{
	//background-color:green;
}
.box1{
	text-align:left;	
}

.box2{
	text-align:left;
}
.box3{
}
.box4{
}
.boxhead{
	width:100%;
	padding:15px 10px 0px 10px;	
	//background-color:red;	
}
.boxheadtext{
	border-bottom:1px solid #176b87;
	color:#176b87;
	font-weight:bold;	
}
.boxcontent{
	width:100%;
	//background-color:red;	
	display:flex;
	padding:10px 5px 0px 5px;
}
.boxdate{
	width:56px;
	height:56px;
	background-color:#176b87;	
	border-radius:28px;
	text-align:center;
}
.boxdatetext{
	margin:8px 0px 0px 0px;
	color:#f9f9f9;
	font-size:12px;
	font-weight:bold;	
}
.boxtext{
	flex: 1; 
	height:56px;
	text-align:left;
	word-wrap:break-word;
	padding:0px 0px 0px 10px;
	font-size:15px;
	overflow:hidden;
	color:#176b87;
	//background-color:red;
}


.boxcontent2{
	width:100%;
	height:auto;
	padding:10px 5px 0px 10px;
	color:#176b87;
	//overflow:hidden;
	margin:0px 0px 0px 0px;
}
.boxcontent2::after{
	content: "";
	display:table;
	clear:both;
}
.boximgs{
	width:160px;
	height: 90px;
	float:left;
	overflow:hidden;
	margin:0px 5px 0px 0px;
}
.boximgs::after{
	content: "";
	display:table;
	clear:both;
}
.boxtext2{
	flex: 1; 
	height:90px;
	text-align:left;
	word-wrap:break-word;
	padding:0px 0px 0px 5px;
	font-size:15px;
	overflow:hidden;
	color:#176b87;
	//background-color:red;
}
/* ===== IPAD MODE ===== */
@media (min-width: 600px) and (max-width: 1079px){
	.boxmain {
		display:flex;
		flex-direction: none;
	}
	.boxleft{
		display:flex;
		flex-direction:row ;
		width:100%;
	}
	.boxright{
		display:flex;
		flex-direction:row ;
		width:100%;
	}
	.box1{
		width:50%;
	}
	.box2{
		width:50%;
	}
	.box3{
		width:50%;
	}
	.box4{
		width:50%;
	}
}
@media (min-width: 1080px) {
	.boxmain {
		display: grid;
   	 	grid-template-columns: 2fr 1fr;  
   		//gap: 10px;
	}
	.boxleft{
		display: grid;
   	 	grid-template-columns: 1fr 1fr;  
		//display:flex;
		//flex-direction:row ;
	}
	.boxright{
		display:flex;
		flex-direction:column ;
		width:100%;

	}
	.box1{

		height:100%
	}
	.box2{

		height:100%
	}
	.box3{
		width:100%;
	}
	.box4{
		width:100%;
	}
}
/* ===== PC MODE ===== */
@media (min-width: 1200px) {
	.boxmain {
		width:1200px;
		margin:auto;
	}
}