@charset "utf-8";
body {background: #fff;}
.casestudy_detail .container{max-width:1080px;padding:0 40px;margin:auto}
.casestudy_detail .sec{padding:60px 0}
.casestudy_detail .common_ttl{font-size:40px;font-weight:700;text-align:center;padding-bottom:20px;position:relative;margin-bottom:40px}
.casestudy_detail .common_ttl:before{content:"";position:absolute;bottom:0;left:50%;width:80px;height:2px;background:#c03;transform:translateX(-50%)}
.casestudy_detail img{width:auto;max-width:100%}
.casestudy_detail .btn{display: flex;justify-content: center;align-items: center;min-height: 60px;max-width:360px;margin:auto;font-size:18px;font-weight:700;text-decoration:none;color:#000;background:#fff;padding:16px 30px;border-radius:6px;border:solid 1px #000;position:relative;line-height: 1.1;transition:.3s}
.casestudy_detail .btn:before{content:'';width:8px;height:8px;border-top:solid 2px #000;border-right:solid 2px #000;position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(45deg);transition:.3s}
.casestudy_detail .btn:hover:before{right:12px}
.casestudy_detail .btn:hover{opacity:.7}
.casestudy_detail .btn.back:before{right:inherit;left:16px;top:50%;transform:translateY(-50%) rotate(225deg)}
.casestudy_detail .btn.back:hover:before{right:inherit;left:12px}
.casestudy_detail .btn.contact{background:#c03;border-color:#c03;color:#fff}
.casestudy_detail .btn.contact:before{content:none}
.casestudy_detail .btn.contact span{display:inline-block;position:relative;padding-left:36px}
.casestudy_detail .btn.contact span:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:23px;height:15px;background:url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/icon_mail.png) center/100% auto no-repeat}
.casestudy_detail .btn.icon_external:before {border: none;width: 1.1em;height: 1.1em;transform: translateY(-50%);background-repeat: no-repeat;right: 10px;
background-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpolyline%20points%3D%2214%201%2023%201%2023%2010%22%20style%3D%22fill%3Anone%3B%20stroke%3A%23000%3B%20stroke-linecap%3Around%3B%20stroke-linejoin%3Around%3B%20stroke-width%3A2px%3B%22%2F%3E%3Cpolyline%20points%3D%2219%2015%2019%2023%201%2023%201%205%209%205%22%20style%3D%22fill%3Anone%3B%20stroke%3A%23000%3B%20stroke-linecap%3Around%3B%20stroke-linejoin%3Around%3B%20stroke-width%3A2px%3B%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%2213%22%20x2%3D%2222%22%20y2%3D%222%22%20style%3D%22fill%3Anone%3B%20stroke%3A%23000%3B%20stroke-linecap%3Around%3B%20stroke-linejoin%3Around%3B%20stroke-width%3A2px%3B%22%2F%3E%3C%2Fsvg%3E);}
.casestudy_detail .no_pc{display: none}
.casestudy_detail .no_sp{display: block}
.casestudy_detail .caption {padding: 40px;text-align: right;}

.casestudy_detail .mv{padding:0;background:url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/mv_bg_l.png) left top no-repeat,url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/mv_bg_r.png) right bottom no-repeat,url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/mv_bg.jpg) #000}
.casestudy_detail .mv .container{max-width:1280px;padding:0 40px}
.casestudy_detail .mv .mv_inner{display:flex;align-items:center;flex-direction:row-reverse}
.casestudy_detail .mv .container .img{width:55%;padding: 10px 0;}
.casestudy_detail .mv .container .img figure{clip-path:polygon(0% 90%,0% 10%,100% 0%,120% 100%)}
.casestudy_detail .mv .container .txt{width:45%;padding-right:40px}
.casestudy_detail .mv .container .txt .main_ttl{font-size:40px;color:#fff;line-height:1.2;font-weight:700}
.casestudy_detail .mv .container .txt .main_ttl span{display:block}
.casestudy_detail .mv .container .txt .main_ttl .icon_collabo{display:inline-block;vertical-align:middle;color:#c03;line-height:1;width:1em;height:.1em;background:currentColor;border-radius:.1em;position:relative;transform:rotate(45deg)}
.casestudy_detail .mv .container .txt .main_ttl .icon_collabo:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;border-radius:inherit;transform:rotate(90deg)}
.casestudy_detail .mv .container .txt .sub_ttl{margin-top:20px;line-height:2}
.casestudy_detail .mv .container .txt .sub_ttl span{font-size:24px;font-weight:700;color:#fff;background:#c03;display:inline-block;padding:.3em .2em .1em;line-height:1}

.casestudy_detail .usage .logo_area{text-align:center;border:solid 10px #f2f2f2;padding:15px}
.casestudy_detail .usage .logo_area img{width:auto}
.casestudy_detail .usage .logo_area .logo span {font-size: 2em;font-weight: 700;}
.casestudy_detail .usage .collabo_area{display:flex;justify-content:center;align-items:center;position:relative;margin:40px auto 20px;}

.casestudy_detail .usage .collabo_area.align-top{align-items: flex-start}


.casestudy_detail .usage .collabo_area .collabo_l {width: 260px;}
.casestudy_detail .usage .collabo_area .collabo_r {padding-left: 140px;/*width: 640px;*/position:relative}
.casestudy_detail .usage .collabo_area .collabo_img{text-align:center}
.casestudy_detail .usage .collabo_area .collabo_img + .collabo_img {margin-top: 15px;}
.casestudy_detail .usage .collabo_area .collabo_img img {max-width: 100%;height: auto;}
.casestudy_detail .usage .collabo_area .collabo_img .img.border {border: solid 1px #bbb;}
.casestudy_detail .usage .collabo_area .icon_collabo{display:inline-block;vertical-align:middle;color:#595959;line-height:1;width:100px;height:3px;background:currentColor;border-radius:.1em;position:absolute;top:50%;left: 20px;transform: translateY(-50%) rotate(45deg);}
.casestudy_detail .usage .collabo_area .icon_collabo:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;border-radius:inherit;transform:rotate(90deg)}
.casestudy_detail .usage .collabo_area .case_cat{text-align: right}
.casestudy_detail .usage .collabo_area .cat_name{text-align:center;display:inline-block;background:#000;border-radius:100px;color:#fff;font-size:24px;font-weight:700;min-width:260px;margin-bottom:10px}
.casestudy_detail .usage .collabo_area .cat_name span{vertical-align: -0.15em;}
.casestudy_detail .usage .collabo_area .cat_name.cat_1{background:#ee8600}
.casestudy_detail .usage .collabo_area .cat_name.cat_2{background:#8f5386}
.casestudy_detail .usage .collabo_area .cat_name.cat_3{background:#108bbf}
.casestudy_detail .usage .collabo_area .cat_name.cat_4{background:#1e5c15}
.casestudy_detail .usage .collabo_area .cat_name.cat_5{background:#8f5200}
.casestudy_detail .usage .collabo_area .cat_name.cat_6{background:#9c100a}
.casestudy_detail .usage .collabo_area .cat_name.cat_7{background:#073786}
.casestudy_detail .usage .collabo_area .cat_name.cat_ex{background:#ffc032;margin-bottom: 10px}
.casestudy_detail .usage .ba_area{display:flex}
.casestudy_detail .usage .ba_area .before{background:#f2f2f2}
.casestudy_detail .usage .ba_area .after{background:#fdf2f4;color:#c03}
.casestudy_detail .usage .ba_area .ttl{font-size:28px;font-weight:700;text-align:center;color:#fff;height:60px;display:flex;justify-content:center;align-items:center}
.casestudy_detail .usage .ba_area>*{flex:1}
.casestudy_detail .usage .ba_area .img {margin-top: 30px;padding: 0 20px;text-align: center}
.casestudy_detail .usage .ba_area .img + .lead {padding-top: 20px;}
.casestudy_detail .usage .ba_area .before .ttl{background:#000;position:relative}
.casestudy_detail .usage .ba_area .after .ttl{background:#c03}
.casestudy_detail .usage .ba_area .before .ttl:after{content:"";position:absolute;top:0;right:-20px;border-style:solid;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:20px solid #000;border-right:0}
.ba_area .lead,.casestudy_detail .usage .ba_area .lead{padding:40px 20px;text-align:center;font-weight:700;font-size:20px;line-height: 1.5; display:flex;align-items:center;justify-content:center}
.casestudy_detail .usage .ba_area .check_list{background:#fff;margin:0 20px 20px;padding:20px;font-size: 16px;line-height: 1.5}
.casestudy_detail .usage .ba_area .check_list ul{padding:0}
.casestudy_detail .usage .ba_area .check_list li{position:relative;padding-left:2em;font-weight:700}
.casestudy_detail .usage .ba_area .check_list li:before{content:"";position:absolute;top:.1em;left:0;width:1.2em;height:1.2em;border-radius:3px;background:#aaa}
.casestudy_detail .usage .ba_area .check_list li:after{content:"";position:absolute;top:.3em;left:.2em;width:.8em;height:.8em;background:url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012.78%209.66%22%3E%3Cpolyline%20points%3D%221%204.83%204.68%208.66%2011.78%201%22%20style%3D%22fill%3Anone%3B%20stroke%3A%23fff%3B%20stroke-linecap%3Around%3B%20stroke-linejoin%3Around%3B%20stroke-width%3A2px%3B%22%2F%3E%3C%2Fsvg%3E) center/100% auto no-repeat}
.casestudy_detail .usage .ba_area .after .check_list li:before{background:#c03}
.casestudy_detail .usage .ba_area .check_list li+li{margin-top:.5em}
.casestudy_detail .usage .container > .img{margin-top:40px;text-align: center}
.casestudy_detail .usage .container > .img figure+figure{margin-top:40px}
.casestudy_detail .usage .container>.img .ttl{font-size:24px;font-weight:700;margin-bottom: 20px; position:relative}
.casestudy_detail .usage .container>.img .ttl:before{content:"";position:absolute;width:100%;height:1px;background:#000;top:45%;left:0;transform:translateY(-50%)}
.casestudy_detail .usage .container>.img .ttl span{background:#fff;display:inline-block;position:relative;padding:0 20px}

.casestudy_detail .solution{background:#fff;position:relative}
.casestudy_detail .solution:before{content:"";position:absolute;top:0;left:0;width:100%;height:300px;background:#f2f2f2}
.casestudy_detail .solution .box{border:solid 1px #dcdcdc;background:#fff;padding:40px;position:relative}
.casestudy_detail .solution .box + .box {margin-top: 40px;}
.casestudy_detail .solution .box .ttl_sec{border-bottom:solid 1px #ccc;padding-bottom:20px;margin-bottom:20px;text-align:center}
.casestudy_detail .solution .box .ttl_sec .logo img{width:auto}
.casestudy_detail .solution .box .ttl_sec .logo span {font-size: 1.8em;font-weight: 700;}
.casestudy_detail .solution .box .ttl_sec .ttl{font-size:24px;font-weight:700;margin-top:20px;color:#c03}
.casestudy_detail .solution .box .detail .list{text-align:left;max-width:740px;margin:20px auto 0;background:#f7f7f7;padding:10px 40px;font-size: 16px;line-height: 1.5}
.casestudy_detail .solution .box .detail .list ul{padding:0}
.casestudy_detail .solution .box .detail .list li{position:relative;padding-left:1.25em}
.casestudy_detail .solution .box .detail .list li:after{content:"";position:absolute;top:.45em;left:0;width:.5em;height:.5em;background:#c03;border-radius:2px}
.casestudy_detail .solution .box .detail .list li+li{margin-top:.75rem}
.casestudy_detail .solution .box .detail{text-align:center}
.casestudy_detail .solution .box .detail .img{margin-top:40px}

.casestudy_detail .cta{background:url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/cta_bg.png) right center/auto 100% no-repeat,url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/mv_bg.jpg) #000}
.casestudy_detail .cta .btn_list{display:flex;justify-content:center;align-items:center}
.casestudy_detail .cta .btn_list + .btn_list {margin-top: 30px;}
.casestudy_detail .cta .btn_list>li{width:100%;max-width:360px}
.casestudy_detail .cta .btn_list>li+li{margin-left:30px}

@media(max-width: 1000px){
	.casestudy_detail .mv .container .txt .main_ttl{font-size:30px}
	.casestudy_detail .mv .container .txt .sub_ttl{margin-top:20px;line-height:2.2}
	.casestudy_detail .common_ttl{font-size:30px;padding-bottom:10px;margin-bottom:30px}
	.casestudy_detail .usage .collabo_area .icon_collabo{width:40px;}
	.casestudy_detail .usage .collabo_area .collabo_l {width: 30%;}
	.casestudy_detail .usage .collabo_area .collabo_r {padding-left: 50px;width: 70%;}
}

@media(min-width: 769px){
	.casestudy_detail .btn.small{font-size: 15px}
}

@media(max-width: 768px){
	footer .langArea .copyright {font-size: 13px;}
	
	.casestudy_detail .container{padding:0 20px}
	.casestudy_detail .common_ttl{font-size:26px}
	.casestudy_detail .no_pc{display:block}
	.casestudy_detail .no_sp{display:none}
	.casestudy_detail .caption {padding: 40px 20px;text-align: left;}
	
	.casestudy_detail .mv{background:url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/mv_bg_l.png) left top/100% auto no-repeat,url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/mv_bg_r.png) right bottom/100% auto no-repeat,url(/content/dam/nttcom/hq/jp/business/lp/iot/case-studies/img/mv_bg.jpg);padding-top:100px;margin:0}
	.casestudy_detail .mv .container{padding:0}
	.casestudy_detail .mv .mv_inner{display:block}
	.casestudy_detail .mv .container .img{width:100%;padding: 0}
	.casestudy_detail .mv .container .img figure{clip-path:initial}
	.casestudy_detail .mv .container .txt{width:100%;padding:30px 20px}
	.casestudy_detail .mv .container .txt .sub_ttl span{font-size:20px}

	.casestudy_detail .usage .collabo_area{margin:20px auto}
	.casestudy_detail .usage .collabo_area .case_cat{padding-right:10px;text-align: center}
	.casestudy_detail .usage .collabo_area .cat_name{font-size:16px;margin:0 auto 5px;min-width: inherit;display: block}
	.casestudy_detail .usage .collabo_area .icon_collabo{left: 2%;}
	.casestudy_detail .usage .container>.img{margin-top:20px}
	.casestudy_detail .usage .container>.img .ttl {font-size: 20px;}
	.casestudy_detail .usage .ba_area{display:block}
	.casestudy_detail .usage .ba_area>div{padding-bottom:10px}
	.casestudy_detail .usage .ba_area .before{margin-bottom:40px;position:relative}
	.casestudy_detail .usage .ba_area .after{padding-bottom:20px}
	.casestudy_detail .usage .ba_area .before:after{content:"";position:absolute;bottom:-34px;left:0;display:block;background:#f2f2f2;height:calc(tan(60deg) * 40px / 2);width:100%;clip-path:polygon(0 0,100% 0,50% 100%)}
	.casestudy_detail .usage .ba_area .ttl{font-size:20px;font-weight:700;text-align:center;height:auto;display:block;padding:10px}
	.casestudy_detail .usage .ba_area .before .ttl:after{content:none}
	.ba_area .lead,.casestudy_detail .usage .ba_area .lead{padding:20px;font-size:16px;display:block}
	.casestudy_detail .usage .ba_area .check_list{margin:0 20px 0}
	.casestudy_detail .usage .ba_area .check_list ul{padding:0;margin:0}
	.casestudy_detail .usage .ba_area .check_list li{font-weight:500;font-size:15px}
	.casestudy_detail .usage .logo_area .logo span {font-size: 1.2em;}
	
	.casestudy_detail .solution .box{padding:20px}
	.casestudy_detail .solution .box .ttl_sec .ttl{font-size:20px}
	.casestudy_detail .solution .box .detail .list{padding:10px 20px}
	.casestudy_detail .solution .box .detail .img{margin-top:20px}
	.casestudy_detail .solution .box .ttl_sec .logo span {font-size: 1.2em;}
	
	.casestudy_detail .cta .btn_list{display:block;padding:0;margin:0}
	.casestudy_detail .cta .btn_list + .btn_list {margin-top: 15px;}
	.casestudy_detail .cta .btn_list>li{margin: auto}
	.casestudy_detail .cta .btn_list>li+li{margin-left:auto;margin-top:15px}
	.casestudy_detail .cta{padding:40px 0}	
}