section { width: 100%; } .container_footer { max-width: 900px; } .container_footer h6 { font-family: var(--bs-font-sans-serif); } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .inner { overflow: hidden; } .inner_right p { font-size: 14px; line-height: 28px; } .inner_right .coloricon_navy, .inner_right .coloricon_pink, .inner_right .coloricon_yellow, .inner_right .coloricon_blue, .inner_right .coloricon_green { width: 64px; height: 22px; color: #fff; font-size: 12px; line-height: 22px; border-radius: 2px; text-align: center; vertical-align: top; display: inline-block; margin-right: 10px; float: left; } .inner_right .coloricon_navy { background-color: #00416E; } .inner_right .coloricon_pink { background-color: #FC5071; } .inner_right .coloricon_yellow { background-color: #FFBE27; } .inner_right .coloricon_blue { background-color: #7ACBF4; } .inner_right .coloricon_green { background-color: #9BC940; } .inner_right .date { float: left; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .pc { display: block; } .mobile { display: none; } .img_one img { width: 100%; } .img_right { float: right; padding: 10px 35px 0px 35px; text-align: right; } .img_fr ul li { float: left; padding: 0px 35px 0px 40px; text-align: center; } .img_box { width: 100%; box-sizing: border-box; } .img_box ul { width: 100%; overflow: hidden; } .img_box ul li { width: 30%; float: left; text-align: left; margin: 2% 1% 2% 1%; } .img_box ul li:last-child { width: 32%; margin-right: 0; } .img_box ul li img { width: 100%; } .img_box ul li img:first-child { height: 120% } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*@media (max-width: 640px)*/ @media (max-width: 640px) { .img_right img { width: 100% } .img_left img { width: 100% } .img_right, .img_left { clear: both; float: none; padding: 10px 10px 0px 10px; } .pc { display: none; } .mobile { display: block; } .img_box ul li img { width: 100%; } .img_box ul li { width: 100%; clear: both; margin-bottom: 15px; } .img_box ul li:last-child { width: 100%; } .img_thr ul li { width: 100% } .img_fr ul li { width: 100% } .inner_right p { font-size: 12px; line-height: 24px; } .inner_right h3 { color: #00416e; font-size: 13px; text-align: left; padding: 15px 0 15px 0; clear: both; } .img_box_01 { text-align: center; display: block; width: 100%; padding: 0 50px; box-sizing: border-box; } .img_box_01 img { width: 100%; } } @media(max-width:500px) { .img_fr ul li { width: 100%; padding: 20px 0 0; } .img_fr ul li img { width: 100%; } .img_right ul li { text-align: center; } .comment .left { clear: both; float: none; } .comment .right { padding-left: 20px; } }