@charset "utf-8";

/* case study title&top */

h1 {
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 2.5em;
    text-align: center;
    margin-bottom: 1.7em;
	letter-spacing: 1.2px;
	position: relative;

}
h1:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: -webkit-linear-gradient(20deg, #591116, #ff3333, #ff3333,#ff3333, #591116);
  background-image: linear-gradient(70deg, #591116, #ff3333, #ff3333,#ff3333, #591116);
}
h2 {
	font-size: 26px;
    text-align: center;
    position: relative;
    letter-spacing: 0.15em;
    color: #ff3333;
	margin-bottom: 40px !important;
}
h2 span {
    font-family: Oswald, sans-serif;
    font-size: 0.7rem;
    color: #ff3333;
    display: block;
    margin-bottom: 0.65rem;
    letter-spacing: 0.2rem;
}
section{
	padding: 80px 0px;
}
img {
	max-width: 100%;
	height: auto;
}
.case_ttl{
	display: flex;
	justify-content: space-between;
}
.case_ttl li{
	width: 45%;
}
.case_ttl .tag {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	margin: 0 0 10px 0;
	font-size: 0.9rem;
}
.case_ttl .tag li{
	background-color: #f36847;
	padding: 6px 8px;
	text-align: center;
	margin-right: 12px;
	line-height: 1.3;
}
.case_ttl .tag li:last-child{
	margin-right: 0;
}
.case_ttl .tag_shop li:last-child{
	background-color: #31948E;
}
.case_ttl .tag_studio li:last-child{
	background-color: #006EC7;
}
.case_ttl li p{
	font-size: 1.2rem;
	line-height: 1.7;
    margin-top: 40px;
}
.gray_bg{
	background: #f7f9fb;
}
.color_red{
	color: #ff3333;
}

/* case study 00- */
h3 {
  font-size: 2rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  position: relative;
  border-bottom: 3px solid #ff3333;
  width: 100%;
}
h3 span {
  font-family: Oswald, sans-serif;
  margin-right: 30px;
  font-size: 3rem;
  color:#ff3333; 
}
h3:before {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 7.5%;
  height: 3px;
  content: '';
  background: #BFBFBF;
}
h4{
	font-size:2rem;
	margin: 20px 0 0 76px;
	display: block;
	line-height: 1.2;
}
h4 span{
	font-size:0.8rem;
	color: #BFBFBF;
	letter-spacing: 1px;
}
.txt_area {
    padding: 50px 0 0 76px;	
}
.txt_area01 {
    padding: 30px 0 0 76px;	
}
.txt_area p{
    margin-bottom: 10px;
	letter-spacing: 1px;
}
.txt_area.main_area{
    font-size:1.1rem;
}
.txt_area.sub_area span{
    color: #ff3333;
	font-size:1.1rem;
	display: inline-block;
	margin-bottom: 6px;
}
.txt_area_ceo{
	color: #ff3333;
	background: #f5f5f5;
	padding: 30px;
	font-weight: 500;
	margin: 40px 0 0 76px;
}
.txt_area_ceo.bg_white{
	background: #fff;
}
.txt_area_ceo.ml0{
	margin: 40px 0 0 0;
}
.txt_area_ceo p{
    margin-bottom: 10px;
	letter-spacing: 1px;
}
.img_bottom{
    text-align: center;
	margin-top: 50px;
}
.img_bottom figcaption{
	margin-bottom: 20px;
}
figure{
	text-align: center;
	font-size: 0.75rem;
	color: #8b8b8b;
}
.img_left,.img_right{
	display: flex;
	margin: 50px 0 0 76px;
}
.img_left li,.img_right li{
	width: 50%;	
	line-height: 1.7;
	letter-spacing: 1px;
}
.img_left.left_w70 li:first-child{
	width: 60%;	
}
.img_left.left_w30 li:first-child{
	width: 30%;	
}
.img_left.left_w30 li:last-child{
	width: 70%;	
	margin-left: 40px;
}
.img_right.right_w30 li:first-child{
	width: 70%;	
}
.img_right.right_w30 li:last-child{
	width: 30%;	
	margin-left: 60px;
	text-align: center;
}
.img_right.right_w30 img{
	width: 94px;	
}
.txt_area.left_w70{
	padding: 50px 0 0 30px;
}
.img_left li:last-child{
	margin-left: 30px;
}
.img_left li p{
	margin-bottom: 10px;
}
.img_right li img,.img_left li img{
	width: 100%;
}
.img_left_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 50px;
}
.img_left_box img {
  display: block;
  height: auto;
}
.img_left_box .txt_area {
  width: 70%;
  padding: 0 0 30px 30px;
}
.title_bg {
    padding-bottom: 80px; 
}
.red_line {
	color: #ff3333;
	font-size: 1.2rem;
	border-left: 2px solid #ff3333;
	padding: 0 0 0 1rem;
	margin: 50px 0 0 76px;
}
.no_number {
	margin-left: 50px;
}
.w33{
	display: flex;
	justify-content:space-between;
	margin-top: 80px;	
}
.w33 li{
	width: 32%;
	box-sizing: border-box;
    padding: 30px;
    border: solid 1px #cccccc;
    border-radius: 16px;
    position: relative;
    margin-bottom: 13px;
    text-align: center;
    box-shadow: 0px 2px 6px rgb(0 0 0 / 10%);
}
.w33 dt{
	color: #ff3333;
	display: inline-flex;
	font-size: 1.1rem;
	font-weight: 500;
}
.w33 dt span{
	font-size: 1.1rem;
	font-family: Oswald, sans-serif;
	margin-right: 10px;
}
.w33 dd{
	letter-spacing: 1px;
	margin-top: 20px;
	line-height: 1.5;
	text-align: left;
}
.w50 {
    display: flex;
	justify-content:space-between;
	margin: 50px 0 0 76px;
}
.w50 li {
    width: 48%;
	box-sizing: border-box;
    padding: 30px;
    border: solid 1px #cccccc;
    border-radius: 16px;
    position: relative;
    margin-bottom: 13px;
    box-shadow: 0px 2px 6px rgb(0 0 0 / 10%);
	margin-right: 20px;
	text-align: left;
}
.w50 li:last-child {
	margin-right: 0;
}
.w50_ttl {
    color: #ff3333;
}
.w50_ttl li:before {
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.6em;
    content: "";
    background: #24abaf;
}
.w50 dt {
    color: #ff3333;
	font-size: 1rem;
    margin-bottom: 10px;
}
.w50 dd {
    line-height: 1.5;
	position: relative;
	margin-left: 6px;
    padding-left: 10px;
}
.w50 dd:before {
	border-radius: 50%;
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.6em;
    content: "";
    background: #ff3333;
}
.comment{
	font-size: 0.8rem;
	margin-bottom: 20px;
	text-align: left;
}
.comment dt{
	color: #ff3333;
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.ceo_right{
	display: flex;
	justify-content:space-between;
	line-height: 1.5;
}
.ceo_right li:first-child{
	width: 70%;
}
.ceo_right img{
	width: 183px;
}

/* ボタン */
.btn {
	position: relative;
}
.btn.case_btn {
	margin-bottom: 80px;
}
i.link-icon_arrow-md_wht {
    position: absolute;
    right: 16px;
    top: 52%;
}
i.link-icon_arrow-md_wht::after {
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    right: 0;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.mt80{
	margin-top: 80px;
}
.mt50{
	margin-top: 50px;
}
.mt30{
	margin-top: 30px;
}
.mt0{
	margin-top: 0;
}

/* バナー */
.bnr{
	line-height: 0;
    width: 1000px;
    margin: 0 auto;
	text-align: center;
	background: #000;
}
.bnr img{
	opacity: 1;
	transition: .3s;
}
.bnr img:hover{
	opacity: 0.7;
}
.sp{
    display: none;
    }

/* 多品種の部品製造を短縮化 */
h1.wall{
	line-height: 1.3em;
    padding-bottom: 0.6em;
}
h1.wall span{
	font-size:1.4rem;
	font-weight: normal;
}

/*****************************************************
	タブレット
******************************************************/
@media screen and (max-width: 1024px) {
	.section_inner {
		width: 95%;
	}
	section {
		padding: 60px 0px;
	}
	.case_ttl img{
		width: 380px;
	}
	.case_ttl li p {
		font-size: 1rem;
	}
	.case_ttl .tag {
		font-size: 0.7rem;
	}
	.btn {
		width: 90%;
	}
	.bnr{
		width: 100%;
	}
	.case_ttl li.movie iframe {
        width: 380px!important;
    }
	.img_left_box .txt_area {
		width: 50%;
	}
	.txt_area01 {
		padding: 30px 20px 0;
	}
	h4 {
		margin: 30px 20px 0;
	}
	.title_bg {
		padding-top: 40px;
	}
	.ceo_right li:first-child {
		margin-right: 20px;
	}
}
/*****************************************************
	タブレット／スマホ横
******************************************************/
@media screen and (max-width: 767px){
	.footer_btn .btn a{
		font-size: 1rem;
	}
	.footer_btn .btn{
		width: 100%;
	}
}	
/*****************************************************
	スマホ用
******************************************************/
@media screen and (max-width: 480px) {
	h1{
		width: 100%;
		font-size: 1.6rem;
		line-height:1.4;
		padding-bottom:10px;
	}
	h3 {
        font-size: 1.8rem;
		line-height: 1.2;
		padding-bottom: 10px;
    }
	h3:before {
		width: 20%;
	}
	h3 span {
        font-size: 2.6rem;
    }
	section {
        padding: 50px 0px;
	}
	.section_inner,.case_btn {
		width: 90%;
	}
	.case_ttl{
		flex-direction: column;
	}
	.case_ttl .tag li {
		padding: 5px;
		margin-right: 5px;
		font-size: 0.8rem;
    }
	.case_ttl .tag {
        margin-top: 10px;
    }
	.txt_area {
        padding: 50px 0 0 0;
    }
	
	.txt_area_ceo {
        margin: 40px 0 0 0;
    }
	.img_left,.img_right{
	   flex-direction: column;
	   margin: 50px 0 0 0;
    }
	.img_left li,.img_right li,.case_ttl li{
	   width: 100%;
    }
	figure {
		font-size: 0.7rem;
	}
	.img_left li:last-child {
        margin-left: 0;
		margin-top: 30px;
    }
	.pc{
		display: none;
	}
	.sp{
		display: block;
		width: 100%;
	}	
	.img_right li:first-child{
		margin-bottom: 30px;
	}
	.img_left.left_w70 li:first-child,.img_left.left_w30 li:first-child {
		width: 100%;
	}
	.img_left.left_w30 li:last-child {
		width: 100%;
		margin-left: 0;
	}
	.red_line {
        margin: 50px 0 0 0;
    }
	.case_ttl li.movie iframe {
        width: 340px!important;
		text-align: center;
    }
	.no_number {
        margin-left: 0;
    }
	.w50 {
		flex-direction: column;
		margin: 50px 0 0 0;
	}
	.w50 li,.w33 li,.img_right.right_w30 li:first-child,.ceo_right li:first-child{
		width: 100%;
	}
	.img_right.right_w30 li:last-child {
		width: 100%;
		margin-left: 0;
	}
	.w33,.ceo_right {
		flex-direction: column;
	}
	.img_left_box .txt_area {
		width: 100%;
		padding: 30px 0 0 0;	
	}
	.txt_area01 {
		padding: 30px 0 0;
	}
	h4 {
		margin: 30px 0 0;
	}
}