@charset "utf-8";
/* Philosophy */
.title_bg {
background-image: url("../philosophy/img/title_bg.jpg");
}
.wrapper {
max-width: 100%;
}
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: 50px;
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.6rem;
font-weight: 700;
letter-spacing: 0.3em;
line-height: 100%;
margin-bottom: 40px;
margin-left: 15px;
display: block;
}
.main_inner {
background-image: url("../philosophy/img/whoweare.png");
background-repeat: no-repeat;
background-position: 51px top;
padding-bottom: 120px;
}
.message_box {
padding-top: 55px;
margin: 0 0 150px 130px;
}
.concept_txt {
font-size: 1.5rem;
letter-spacing: 0.2em;
line-height: 180%;
display: block;
margin-left: 60px;
padding-right: 30px;
}
.container {
background-color: #F2F2F2;
width: 100%;
padding: 100px 0 90px;
}
.container_inner {
max-width: 1260px;
margin: 0 auto;

}
.philosophy_title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 3.0rem;
font-weight: 600;
letter-spacing: 0.47em;
line-height: 100%;
display: block;
text-align: center;
margin-bottom: 15px;
}
.philosophy_subtitle {
font-size: 1.4rem;
color: #999;
font-weight: 700;
line-height: 100%;
display: block;
text-align: center;
padding-bottom: 70px;
margin-bottom: 80px;
position: relative;
}
.philosophy_subtitle::after {
content: "";
display: block;
width: 20px;
height: 1px;
background-color: #ccc;
position: absolute;
bottom: 30px;
left: 50%;
}

.interview-box .txt .interview-inner {
padding: 60px 160px 75px 60px;
border: solid 1px #ddd;
background-color: #fff;
}
.interview-box.reverse .txt .interview-inner {
padding: 60px 40px 70px 200px;
border: solid 1px #ddd;
background-color: #fff;
}
.interview-box:not(.reverse) .photo {
margin-top: 100px;
margin-left: -100px;
}
.interview-box.reverse .txt {
order: 2;
margin-top: 60px;
}
.interview-box.reverse .photo {
order: 1;
margin-right: -160px;
}
.interview-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto 100px;
}
.interview-box .txt {
z-index: 1;
}
.interview-box .photo {
z-index: 2;
}
.interview-box .txt {
width: calc(47.5% + 160px);
}
.interview-box.reverse .txt {
width: calc(47.5% + 160px);
}
.interview-box .photo {
width: 52.5%;
}
.interview-box.reverse .photo {
width: 52.5%;
}

.sml_title_box {
display: flex;
align-items: flex-start;
margin-bottom: 50px;
}
.sml_num {
font-size: 5.0rem;
margin-right: 2.9vw;
padding-right: 0;
letter-spacing: 0;
line-height: 1.4;
position: relative;
}
.num {
font-family: bebas-neue, sans-serif;
font-weight: 400;
color: #B51319;
}
.sml_num:before {
height: 2.928vw;
bottom: -1.464vw;
}
.sml_num:before {
position: absolute;
content: "";
border-left: 1px solid #000;
right: 0;
transform: rotate(
45deg
);
}
.sml_h2 {
font-size: 2.0rem;
letter-spacing: 0.1em;
line-height: 100%;
margin-top: 25px;
}
.sml_h2 .en {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.3rem;
margin-top: 10px;
margin-left: 3px;
letter-spacing: 0.1em;
display: block;
color: #666;
line-height: 140%;
}
.detail_txt {
font-size: 1.4rem;
padding-top: 10px;
line-height: 220%;
display: block;
}
.brand_txt {
font-size: 1.5rem;
letter-spacing: 0.2em;
line-height: 180%;
display: block;
max-width: 865px;
width: 100%;
margin: -40px auto 60px;
}

.eco_lether_img {
width: 25%;
}
.eco_lether_box img {
width: 100%;
}
.eco_lether_txt {
max-width: 74%;
font-size: 1.3rem;
line-height: 180%;
margin: 15px 0 0 0px;
display: block;
}
.eco_lether_box {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.logo_box_body {
max-width: 500px;
width: 100%;
padding-top: 30%; /* = height ÷ width × 100 */
border: solid 1px #ddd;
position: relative;
background-color: #fff;
}
.rt_logo {
max-width: 240px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.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%);
}
.rt_logo img {
width: 241px;
height: 37px;
}
.janis_logo img {
width: 87px;
height: 129px;
}
.logo_box_body img {
width: 100%;
}
.brand_box {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
max-width: 1050px;
margin: auto;
}
.works_box {
max-width: 980px;
margin: 0 auto;
padding: 90px 0 0;
}
.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;
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;	/* 小さくするほど暗くなります */
}



/*スマートフォン*/

@media all and (max-width : 812px ){
.title_bg {
background-image: url("../philosophy/img/title_bg_sp.png");
height: 150px;
}
main {
width: 90%;
padding-top: 20px;
}
.company_subtitle {
font-size: 1.2rem;
letter-spacing: 0.2em;
margin-bottom: 15px;
padding-left: 17px;
}

.company_title {
font-size: 1.6rem;
letter-spacing: 0.2em;
line-height: 145%;
margin-bottom: 0px;
margin-left: 15px;
}
.main_inner {
background-image: url("../philosophy/img/whoweare_sp.png");
background-repeat: no-repeat;
background-position: left top;
padding-bottom: 50px;
}
.message_box {
padding-top: 15px;
margin: 0 0 60px 0px;
}
.concept_txt {
font-size: 1.2rem;
letter-spacing: 0.1em;
line-height: 180%;
display: block;
margin-left: 0px;
padding-right: 0px;
}
.container {
padding: 40px 0 10px;
}
.container_inner {
width: 90%;
}
.philosophy_title {
font-size: 2.0rem;
letter-spacing: 0.3em;
margin-bottom: 10px;
}
.philosophy_subtitle {
font-size: 1.1rem;
padding-bottom: 60px;
margin-bottom: 20px;
}
.philosophy_subtitle::after {
width: 10px;
bottom: 30px;
}



.interview-box .txt .interview-inner {
padding: 25px;
}
.interview-box.reverse .txt .interview-inner {
padding: 25px;
}
.interview-box:not(.reverse) .photo {
margin-top: 0px;
margin-left: 0px;
}
.interview-box.reverse .txt {
order: 2;
margin-top: -30px;
}
.interview-box .reverse .photo {
order: 1;
margin-right: 0px;
margin-bottom: 0px;
}
.interview-box .txt {
order: 2;
margin-top: -31px;
}
.interview-box .photo {
order: 1;
margin-right: 0px;
}
.interview-box .txt .interview-inner {
background-color: #fff;
}
.interview-box .txt .interview-inner {
border: 1px solid #eee;
}
.interview-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto 40px;
flex-wrap: wrap;
}
.interview-box .reverse {
position: relative;
}
.interview-box .txt {
z-index: 1;
}
.interview-box .photo {
z-index: 2;
}
.interview-box .txt {
width: calc(100% + 0px);
}
.interview-box.reverse .txt {
width: calc(100% + 0px);
}
.interview-box .photo {
width: 100%;
}
.interview-box.reverse .photo {
width: 100%;
}
	
	
 .sml_title_box {
padding-top: 15px;
margin-bottom: 0px;
}
.sml_num {
font-size: 4.0rem;
margin-right: 2.9vw;
padding-right: 0;
letter-spacing: 0;
line-height: 1.4;
position: relative;
}

.sml_num:before {
height: 2.928vw;
bottom: -1.464vw;
}

.sml_h2 {
font-size: 1.3rem;
letter-spacing: 0.1em;
line-height: 100%;
margin-top: 20px;
}
.sml_h2 .en {
font-size: 1.1rem;
margin-top: 10px;
margin-left: 3px;
letter-spacing: 0.1em;
display: block;
color: #666;
line-height: 140%;
}
.detail_txt {
font-size: 1.2rem;
padding-top: 30px;
line-height: 180%;
}
.pt-50 {
padding-top: 30px;
}
.brand_txt {
font-size: 1.2rem;
letter-spacing: 0.1em;
margin: -20px auto 30px;
}

.eco_lether_img {
width: 15%;
}
.eco_lether_box img {
width: 100%;
}
.eco_lether_txt {
max-width: 82%;
font-size: 1.1rem;
line-height: 180%;
margin: 15px 0 0 0px;
}
.eco_lether_box {
display: flex;
justify-content: space-between;
/*align-items: center;*/
margin-top: 25px;
}

.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;
}
.works_box {
width: 90%;
padding: 30px 0 0;
}
.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: 10px;
}






}