#case .TAB{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 32px;} #case .TAB .tabLabel { color: #000; font-weight: 700; background: #FFF; padding: 1em 0; text-align: center; border-right: 1px solid #D0D0D0; border-top: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0; flex: 1; order: -1; transition: .5s ; cursor: pointer;} #case .TAB .tabLabel:first-of-type { border-left: 1px solid #D0D0D0;} #case .TAB .tabLabel:nth-last-of-type(1){ margin-right: 0;} #case .TAB input { display: none;} #case .TAB input:checked + .tabLabel { color: #000; background: #F2F2F2;} #case .TAB input:checked + .tabLabel + .case_list { padding: 1em 0 0 0; height: auto; overflow: auto; transition: .5s opacity; opacity: 1;} #case .TAB .case_list { width: 100%;} #case ul.case{ margin-top: 30px;} #case_detail .case_date{ display: flex; justify-content: space-between; margin: 30px 0;} #case_detail .case_logo{ width:200px; height: 200px; border: 1px solid #D0D0D0; display: flex; justify-content: center; align-items: center;} #case_detail .case_logo img{ max-width: 150px; max-width: 150px;} #case_detail table{ width:700px; margin-bottom: 30px;} #case_detail table th{ width: 200px;} #case_detail table tr:first-child{ border-top :1px solid #D0D0D0; padding: 1em 0;} #case_detail table th, #case_detail table td{ border-bottom :1px solid #D0D0D0; padding: 1em 0;} #case_detail .case_date td p{ display: block;} #case_detail .case_date a, #case_detail .case_content a{ color: #538EB4; padding-bottom: 0px; background: linear-gradient(#538EB4, #538EB4) 0 100%/0 1px no-repeat; transition: background .4s; text-decoration: none;} #case_detail a.reverse { background-position: 100% 100%;} #case_detail a:hover { background-size: 100% 1px;} #case_detail .case_content h2{ font-size: 24px; font-weight: 700; line-height: 32px; margin-bottom: 1em;} #case_detail .case_content h4{ font-size: 20px; line-height: 28px; color: #538EB4; font-weight: 700;} #case_detail .case_content p{ clear: both; margin: 1em 0; display: flex; justify-content: space-between;} #case_detail .case_content img{ width: 49%; height:auto;} #case_detail ul.service_list{ margin: 60px 0 100px 0;} #case_detail ul.service_list li{ width:100%; margin-bottom: 30px; display: block; height: 200px;} #case_detail ul.service_list li .thumbnail{ border: 1px solid #D0D0D0; background: #fff; width: 380px; height: 200px; margin: 0 20px 1em auto; overflow: hidden; display: flex; justify-content: center; align-items: center; float: left;} #case_detail ul.service_list li .thumbnail img{ } #case_detail ul.service_list li .thumbnail a{ background: none;} #case_detail ul.service_list li p.service_title{ font-size: 20px; font-weight: 700; line-height: 28px;} #case_detail ul.service_list li a.btn_blue_center{ width: 380px; height: 60px; line-height: 60px; text-align: center; background: #4983AB; color: #FFF; font-size: 20px; font-weight: 700; margin-top: 0.5em; margin-left: 400px; display: block; position: relative; transition: .3s; z-index: 2;} @media screen and (max-width: 768px) { #case .TAB{ margin-top: 1em;} #case .TAB .tabLabel { flex-basis: 46%; margin-right: 2%; margin-bottom: 2%; padding: 0.75em 0; border: 1px solid #D0D0D0; font-size: 14px;} #case .TAB .tabLabel:nth-last-of-type(3) { margin-right: 0;} #case ul.case{ margin-top: 0;} #case_detail .case_date{ width: 100%; display: block; margin: 30px auto;} #case_detail .case_logo{ margin: 0 auto;} #case_detail table{ width:100%; margin: 15px 0; font-size: 14px;} #case_detail table th{ width: 8em;} #case_detail .case_content p{ display: block;} #case_detail .case_content img{ width: 100%; margin: 0.5em 0;} #case_detail ul.service_list{ margin: 30px 0 50px 0;} #case_detail ul.service_list li{ width:100%; margin-bottom: 30px; display: block; height: auto;} #case_detail ul.service_list li .thumbnail{ width: 100%; height: auto;} #case_detail ul.service_list li a.btn_blue_center{ width: 100%; margin-left: 0;}}