@charset "utf-8";
/* distributor */
.title_bg {
background-image: url("../distributor/img/title_bg.jpg");
}
main {
padding-top: 50px;
}
.company_subtitle {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.4rem;
letter-spacing: 0.3em;
line-height: 100%;
margin-bottom: 10px;
position: relative;
display: inline-block;
padding-left: 17px;
}
.company_subtitle::before {
content: "";
position: absolute;
top: 35%;
display: inline-block;
width: 10px;
height:3px; 
background-color: #B51319;
left: 0;
}
.company_title {
font-size: 2.4rem;
letter-spacing: 0.3em;
line-height: 100%;
margin-bottom: 40px;
margin-left: 15px;
}
.trade_txt {
font-size: 1.4rem;
line-height: 200%;
display: block;
margin: 0 0 50px 20px;
}
.width_940 {
max-width: 940px;
margin: auto;
}
.hight_l {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
padding: 50px 0;
font-size: 1.6rem;
}
.hight_l::after{
content: url("../common/img/arrow_icon_l.png");
display: block;
position: absolute;
top: calc(50% - 10px);
right: 15px;
transition: .3s;
}
.telephone_contact_box {
max-width: 940px;
margin: 40px auto 100px;
width: 100%;
padding: 75px 90px;
border: solid 1px #E1E1E1;
background-color: #F3F3F3;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.telephone_txt01 {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-size: 1.6rem;
line-height: 100%;
margin-right: 30px;
}
.telephone_txt02 {
font-family: bebas-neue, sans-serif;
font-weight: 400;
font-size: 3.2rem;
line-height: 100%;
letter-spacing: 0.1em;
position: relative;
padding-left: 45px;
}
.telephone_txt02::before {
content:"";
display:inline-block;
width:1px;
height:23px;
background-color:#666666;
position:absolute;
top:5px;
left:-5px;
}
.telephone_txt03 {
font-weight: 400;
font-size: 1.1rem;
line-height: 100%;
}
.logo_box_body {
max-width: 450px;
width: 100%;
padding-top: 60%; /* = height ÷ width × 100 */
border: solid 1px #ddd;
margin: 0px auto 40px;
position: relative;
}
.rt_logo {
max-width: 241px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.rt_logo img {
width: 241px;
height: 37px;
}
.janis_logo {
max-width: 87px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.janis_logo img {
width: 87px;
height: 129px;
}
.logo_box_body img {
width: 100%;
}
.logo_box {
max-width: 450px;
margin: 0 20px 20px;
}
.brand_title {
font-weight: 700;
font-size: 1.6rem;
display: block;
margin-bottom: 10px;
}
.brand_txt {
line-height: 200%;
display: block;
font-size: 1.4rem;
}
.brand_box {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 80px;
}
.work_title {
font-family: bebas-neue, sans-serif;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.2em;
line-height: 100%;
display: block;
}
.work_subtitle {
font-weight: 500;
color: #999;
font-size: 1.3rem;
display: block;
line-height: 100%;
margin-left: 10px;
}
.work_title_box {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 15px;
}
.casestudy_box {
max-width: 980px;
margin-bottom: 80px;
width: 100%;
overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
background: #000;
}
.casestudy_box img {
width: 100%;
display: block;
transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.casestudy_box img:hover {
transform: scale(1.03);	/*画像の拡大率*/
transition-duration: 0.3s;	/*変化に掛かる時間*/
opacity: 0.7;	/* 小さくするほど暗くなります */
}
.step_box {
max-width: 930px;
width: 100%;
height: 110px;
background-color: #B51319;
display: flex;
align-items: center;
}
.step {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.8rem;
font-weight: 600;
line-height: 100%;
margin-bottom: 5px;
display: block;
color: #fff;
text-align: center;
}
.step_number {
font-family: bebas-neue, sans-serif;
font-size: 5.4rem;
font-weight: 400;
font-style: normal;
color: #fff;
line-height: 100%;
text-align: center;
}
.step_box_left {
max-width:  150px;
width: 15%;

}
.step_title {
font-size: 1.7rem;
font-weight: 700;
line-height: 100%;
margin-bottom: 10px;
display: block;
}
.step_txt {
font-weight: 500;
font-size: 1.4rem;
display: block;
}
.step_box_right {
width: 84.5%;
height: 100px;
background-color: #fff;
padding: 20px 20px 0 20px;
}
.third_box {
padding-top: 15px;
}
.step_arrow {
max-width: 34px;
display: block;
margin: 10px 0 10px 5%;  ;
}


/*スマートフォン*/

@media all and (max-width : 812px ){
.title_bg {
background-image: url("../distributor/img/title_bg_sp.png");
height: 150px;
}
main {
width: 90%;
}
.company_subtitle {
font-size: 1.2rem;
letter-spacing: 0.2em;
margin-bottom: 10px;
padding-left: 13px;
}
.company_subtitle::before {
width: 8px;
}
.company_title {
font-size: 1.6rem;
letter-spacing: 0.2em;
margin-bottom: 30px;
margin-left: 10px;
}
.trade_txt {
font-size: 1.2rem;
line-height: 180%;
margin: 0 0 20px 0px;
}

.hight_l {
padding: 25px 0;
font-size: 1.2rem;
line-height: 145%;
}
.hight_l::after{
content: url("../common/img/arrow_icon.png");
}
.telephone_contact_box {
margin: 20px auto 40px;
padding: 20px 15px;
display: block;
}
.telephone_txt01 {
font-size: 1.4rem;
margin-right: 0px;
margin-bottom: 10px;
text-align: center;
}
.telephone_txt02 {
font-size: 2.6rem;
padding-left: 0px;
text-align: center;
margin-bottom: 10px;
}
.telephone_txt02::before {
content:none;
}
.telephone_txt03 {
font-size: 1.0rem;
text-align: center;
}
.logo_box_body {
max-width: 800px;
width: 100%;
padding-top: 50%; /* = height ÷ width × 100 */
margin: 0px auto 15px;
position: relative;
}
.rt_logo {
max-width: 240px;
}
.janis_logo {
max-width: 60px;
}

.logo_box {
max-width: 800px;
width: 100%;
margin: 0 20px 20px;
}
.brand_title {
font-size: 1.3rem;
margin-bottom: 10px;
}
.brand_txt {
line-height: 180%;
font-size: 1.2rem;
}
.brand_box {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.work_title {
font-size: 1.4rem;
letter-spacing: 0.2em;
}
.work_subtitle {
font-size: 1.2rem;
margin-left: 10px;
}
.work_title_box {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 15px;
}
.casestudy_box {
margin-bottom: 40px;
}
.step_box {
max-width: 930px;
width: 100%;
height: 110px;
background-color: #B51319;
display: flex;
align-items: center;
}
.step {
font-size: 1.4rem;
margin-bottom: 5px;
}
.step_number {
font-size: 3.0rem;
}
.step_box_left {
max-width:  150px;
width: 15%;
}
.step_title {
font-size: 1.3rem;
margin-bottom: 10px;
}
.step_txt {
font-size: 1.1rem;
letter-spacing: 0.1em;
line-height: 145%;
}
.step_box_right {
width: 84.3%;
height: 100px;
background-color: #fff;
padding: 20px 20px 0 20px;
}
.third_box {
padding-top: 10px;
}
.step_arrow {
max-width: 34px;
display: block;
margin: 10px 0 10px 5%;  ;
}
}

@media all and (max-width : 767px ){
.step_box_right {
width: 83.5%;
}
}