@charset "UTF-8";
/*** style ***/
/* ========================================
	導入事例 共有
======================================== */
.l_body_case_pages {
background: url("/case/imgs/bg_body_pc_pages.png") no-repeat center top;
}
.l_body_case_pages .l_header,
.l_body_case_pages .l_main.l_pages {
background: none;
}
.l_body_case_pages .l_header.scroll {
background: #dfeaf5;
}
.l_body_case_pages .m_sec.m_ttl_lv1_pages {
padding-top: 45px;
}
.l_body_case_pages .m_sec.m_ttl_lv1_pages + .m_sec {
padding-top: 90px;
}
@media (max-width: 767px) {
.l_body_case_pages {
background: none;
}
.l_body_case_pages .l_header {
background: #FFF;
}
.l_body_case_pages .l_main.l_pages {
background: url("/case/imgs/bg_body_sp_pages.png") no-repeat center top / 100% auto;
}
.l_body_case_pages .l_header.scroll {
background: #FFF;
}
.l_body_case_pages .m_sec.m_ttl_lv1_pages {
padding-top: 4vw;
}
.l_body_case_pages .m_sec.m_ttl_lv1_pages + .m_sec {
padding-top: 8vw;
}
}
.l_body_case_pages .e_breadcrumb {
margin-top: 220px;
}
.l_body_case_pages_details .e_breadcrumb {
margin-top: 320px;
}
@media (max-width: 767px) {
.l_body_case_pages .e_breadcrumb,
.l_body_case_pages_details .e_breadcrumb {
margin-top: 0;
padding-top: 53.32vw;
}
}


.m_case_clm {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;	
justify-content: center;
flex-wrap: -webkit-wrap;
flex-wrap: wrap;
}
.m_case_clm .m_case_item {
width: -webkit-calc((100% / 2) - (40px / 2));
width: calc((100% / 2) - (40px / 2));
margin-left: 40px;
}
.m_case_clm .m_case_item:nth-child(2n+1) {
margin-left: 0;
}
.m_case_clm .m_case_item:nth-child(n+3) {
margin-top: 72px;
}
.m_case_clm .m_case_item .e_img {
position: relative;
display: block;
width: 100%;
min-height: 420px;
overflow: hidden;
border-radius: 6px;
background: #dddddd;
}
.m_case_clm .m_case_item .e_img .e_link {
display: block;
min-height: 420px;
}
@media (min-width: 1025px) {
.m_case_clm .m_case_item .e_img .e_link {
transition: opacity .3s ease-in-out;
}
.m_case_clm .m_case_item .e_img .e_link:hover {
opacity: .75;
}
}
.m_case_clm .m_case_item .e_img img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
height: 100%;
width: auto;
/*height: auto;
width: 100%;*/
max-width: none;
}
.m_case_clm .m_case_item .e_case_ttl_lv3 {
font-size: 3rem;
margin-top: 22px;
}
.m_case_clm .m_case_item .e_txt {
margin-top: 13px;
height: 6em;
overflow: hidden;
}
@media (max-width: 767px) {
.m_case_clm {
display: block;
}
.m_case_clm .m_case_item {
width: 100%;
margin-left: 0;
}
.m_case_clm .m_case_item:nth-child(n+2) {
margin-top: 19.2vw;
}
.m_case_clm .m_case_item .e_case_ttl_lv3 {
font-size: 5.332vw;
margin-top: 5.8652vw;
}
.m_case_clm .m_case_item .e_img {
min-height: auto;
overflow: hidden;
}
.m_case_clm .m_case_item .e_img .e_link {
min-height: auto;
}
.m_case_clm .m_case_item .e_img img {
position: static;
transform: translate(0, 0);
height: auto;
max-width: 100%;
}
.m_case_clm .m_case_item .e_txt {
margin-top: 3.4658vw;
height: 6.4em;
font-size: 3.7324vw;
}
}

/* 導入事例 */
.m_sec_case {
position: relative;
margin-top: 80px;
}
.m_sec_case .m_cnts {
position: relative;
z-index: 2;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
height: 480px;
}
.m_sec_case > .e_img {
position: absolute;
z-index: 1;
top: 0;
right: 80px;
width: 1840px;
height: 480px;
}
.m_sec_case .m_cnts .e_ttl_lv2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 0;
}
.m_sec_case .m_cnts .e_ttl_lv2 .s_ttl_lv2_en {
display: block;
font-family: europa, sans-serif;
font-size: 4.8rem;
font-weight: 700;
}
.m_sec_case .m_cnts .e_ttl_lv2 .s_ttl_lv2_jp {
display: block;
font-size: 2rem;
margin-left: 24px;
font-weight: normal;
}
.m_sec_case .m_cnts .e_ttl_lv2:before,
.m_sec_case .m_cnts .e_ttl_lv2:after {
content: none;
}
.m_sec_case .m_cnts .e_case_lead {
font-size: 2.4rem;
font-weight: bold;
margin-top: 10px;
}

/* その他の事例 */
.m_case_other_clm .m_case_other_item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.m_case_other_clm .m_case_other_item:nth-child(n+2) {
margin-top: 40px;
}
.m_case_other_clm .m_case_other_item .e_img {
width: 360px;
}
@media (min-width: 1025px) {
.m_case_other_clm .m_case_other_item .e_img .e_link {
transition: opacity .3s ease-in-out;
}
.m_case_other_clm .m_case_other_item .e_img .e_link:hover {
opacity: .75;
}
}
.m_case_other_clm .m_case_other_item .e_img img {
border-radius: 6px;
}
.m_case_other_clm .m_case_other_item .m_case_other_txt {
width: -webkit-calc(100% - 400px);
width: calc(100% - 400px);
margin-left: 40px;
padding: 10px 0 0;
}
.m_case_other_clm .m_case_other_item .m_case_other_txt .e_ttl_lv3 {
font-size: 2.4rem;
font-weight: normal;
}
.m_case_other_clm .m_case_other_item .m_case_other_txt .e_txt {
margin-top: 13px;
}
@media (max-width: 767px) {
.m_case_other_clm .m_case_other_item {
display: block;
}
.m_case_other_clm .m_case_other_item:nth-child(n+2) {
margin-top: 19.2vw;
}
.m_case_other_clm .m_case_other_item .e_img {
width: 100%;
}
.m_case_other_clm .m_case_other_item .m_case_other_txt {
width: 100%;
margin-left: 0;
padding: 5.8652vw 0 0;
}
.m_case_other_clm .m_case_other_item .m_case_other_txt .e_ttl_lv3 {
font-size: 5.332vw;
}
.m_case_other_clm .m_case_other_item .m_case_other_txt .e_txt {
margin-top: 3.4658vw;
}
}

/* 導入事例 詳細 */
.l_body_case_pages .e_details_txt:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.l_body_case_pages .e_details_txt p {
margin-bottom: 40px;
}
.l_body_case_pages .e_details_txt *:last-child {
margin-bottom: 0;
}
.l_body_case_pages .e_details_txt a {
color: #00399d;
text-decoration: underline;
}
.l_body_case_pages .e_details_txt a:hover {
opacity: .8;
text-decoration: none;
}
.l_body_case_pages .m_details_customer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display: flex;
padding: 90px;
border: 17px solid #EEE;
}
.l_body_case_pages .m_details_customer .e_img {
width: 280px;
}
.l_body_case_pages .m_details_customer .m_txt {
width: calc(100% - 370px);
margin-left: 90px;
}
.l_body_case_pages .m_details_customer .m_txt:only-child {
width: 100%;
margin-left: 0;
}
.l_body_case_pages .m_details_customer .m_txt .e_ttl_lv3 {
font-size: 2.4rem;
}
.l_body_case_pages .m_details_customer .m_txt p {
margin-top: 24px;
}
@media (min-width: 1025px) {
.l_body_case_pages .m_details_customer .m_txt .e_txt_link .e_link:hover {
text-decoration: underline;
}
}
@media (max-width: 767px) {
.l_body_case_pages .e_details_txt p {
margin-bottom: 6.4vw;
}
.l_body_case_pages .e_details_txt *:last-child {
margin-bottom: 0;
}
.l_body_case_pages .m_details_customer {
flex-wrap: -webkit-wrap;
flex-wrap: wrap;
padding: 5.332vw;
border: 1.333vw solid #EEE;
}
.l_body_case_pages .m_details_customer .e_img {
width: auto;
}
.l_body_case_pages .m_details_customer .m_txt {
width: 100%;
margin-left: 0;
margin-top: 6.4vw;
}
.l_body_case_pages .m_details_customer .m_txt .e_ttl_lv3 {
font-size: 5.332vw;
}
.l_body_case_pages .m_details_customer .m_txt p {
margin-top: 6.4vw;
}
}

.m_case_keyword .e_list {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display: flex;
flex-wrap: -webkit-wrap;
flex-wrap: wrap;
}
.m_case_keyword .e_list .e_li {
margin-right: 1em;
margin-bottom: 1em;
}
.m_case_keyword .e_list .e_li:not(:first-child) {
margin-top: 0;
}
.m_case_keyword .e_list .e_li:nth-child(n+16) {
display: none;
}
.m_case_keyword .e_list .e_li .e_link {
display: block;
padding: 6px;
color: #00399d;
border: 1px solid #00399d;
border-radius: 19px;
}
@media (max-width: 767px) {
.m_case_keyword .e_list .e_li .e_link {
padding: 1.0664vw;
border-radius: 6px;
}
}

/* CMS用 */
.fleft {
float: left;
margin-right: 40px;
max-width: 360px;
}
.fright {
float: right;
margin-left: 40px;
max-width: 360px;
}
.e_details_voice_txt .fright {
max-width: 250px;
}
.fright:only-child {
float: none;
margin-left: 0;
max-width: none;
}
@media (max-width: 767px) {
.fleft {
float: none;
margin: 0 auto;
text-align: center;
max-width: 100%;
}
.fright {
float: none;
margin: 0 auto;
text-align: center;
max-width: 100%;
}
.e_details_voice_txt .fright {
max-width: 100%;
}
}