@charset 'UTF-8';

/*  japan
--------------------------------------- */

.spShow {
display: none;
}

.kv {
background: url("../jpg/bg_kv_01-3.jpg") no-repeat center;
}

.kv .inner {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}

.kv h1 {
padding: 50px 0 10px;
color: #000033;
font-size: 30px;
font-weight: bold;
}

.kv p {
padding: 0 0 30px;
color: #000033;
font-size: 15px;
font-weight: bold;
line-height: 1.47;
}

.history {
padding: 65px 20px 0;
background: url("../png/bg_history_01.png") no-repeat center 103px;
box-sizing: border-box;
}

.history  h2 {
margin: 0 0 108px;
padding: 0 0 18px;
color: #333;
font-size: 30px;
font-weight: bold;
text-align: center;
background: url("../png/bg_h2_01.png") no-repeat center bottom;
}

.history .inner {
width: 1000px;
margin: 0 auto;
}

.history .inner .box {
position: relative;
padding: 0 0 130px 570px;
}

.history .inner .box01 {
padding: 0 0 176px 570px;
}
.history .inner .box02 {
padding: 0 0 58px 570px;
}
.history .inner .box03 {
padding: 0 0 302px 570px;
}
.history .inner .box04 {
padding: 0 0 328px 570px;
}
.history .inner .box05 {
padding: 0 0 58px 570px;
}
.history .inner .box06 {
padding: 0 0 150px 570px;
}

.history .inner .box h3 {
position: absolute;
top: 0;
left: 0;
width: 201px;
}

.history .inner .box h4 {
width: 57px;
padding: 5px 0;
}

.history .inner .box h4.long {
width: 132px;
padding: 5px 0;
}

.history .inner .box .txt {
margin: 0 0 5px;
color: #231815;
font-size: 16px;
font-weight: bold;
line-height: 1.375;
}

.history .inner .box .txt span {
font-size: 13px;
font-weight: normal;
vertical-align: baseline;
}

.history .inner .box .img01 {
width: 260px;
margin: 0 0 32px;
}

.history .inner .box .img02 {
position: absolute;
top: 74px;
left: 37px;
}

.history .inner .box01 .img02 {
top: 71px;
}
.history .inner .box02 .img02 {
top: 148px;
}
.history .inner .box03 .img02 {
top: 52px;
}
.history .inner .box04 .img02 {
top: 70px;
}
.history .inner .box05 .img02 {
top: 62px;
}
.history .inner .box06 .img02 {
top: 135px;
}

.history .inner .box .img03 {
width: 320px;
padding: 5px 0 90px;
}





@media screen and (max-width: 1000px) {

.pcShow {
display: none;
}

.spShow {
display: inline;
}

.kv {
background: url("../jpg/bg_kv_01_sp-3.jpg") no-repeat center;
background-size: cover;
}

.kv .inner {
width: 88%;
margin: 0 auto;
padding: 0;
}

.kv h1 {
padding: 5% 0 0;
color: #000033;
font-size: 20px;
font-weight: bold;
line-height: 2;
}

.kv p {
padding: 0 0 5.6%;
color: #000033;
font-size: 10px;
font-weight: bold;
line-height: 1.5;
}

.history {
width: auto;
margin: 0;
padding: 8.5% 0 21%;
background: none;
box-sizing: border-box;
}

.history h2 {
margin: 0 6.66% 2.5%;
padding: 0 0 2%;
color: #333;
font-size: 20px;
font-weight: bold;
background: url("../png/bg_h2_01.png") no-repeat center bottom;
background-size: 100px auto;
}

.history .inner {
width: auto;
}

.history .inner .box {
position: relative;
padding: 6.5% 0 1%;
background: url("../png/bg_history_01_sp.png") no-repeat center top;
background-size: 100% auto;
z-index: 7;
}

.history .inner .box:before {
content: '';
position: absolute;
top: 17vw;
left: 4.53vw;
width: 6.133vw;
height: 99.5%;
background: url("../png/ico_arw_01_sp.png") no-repeat center bottom;
background-size: 100% auto;
z-index: 1;
}

.history .inner .box:first-child:before {
top: 12.5vw;
height: calc(100% + 3.5vw);
}
.history .inner .box:last-child:before {
height: calc(100% - 10vw);
}

.history .inner .box:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 26.667%;
background: url("../png/bg_history_02.png") no-repeat center top;
background-size: 100% auto;
z-index: 2;
}

.history .inner .box01 {
padding: 6.5% 0 0;
z-index: 6;
}
.history .inner .box02 {
padding: 6.5% 0 1%;
z-index: 5;
}
.history .inner .box03 {
padding: 6.5% 0 2%;
z-index: 4;
}
.history .inner .box04 {
padding: 6.5% 0 3%;
z-index: 3;
}
.history .inner .box05 {
padding: 6.5% 0 4%;
z-index: 2;
}
.history .inner .box06 {
padding: 6.5% 0 0;
z-index: 1;
}

.history .inner .box h3 {
position: relative;
top: auto;
left: auto;
width: 30.8%;
margin: 0 0 5.5% 13.46%;
z-index: 3;
}

.history .inner .box h4 {
width: 9.733%;
margin: 0 0 0 20%;
padding: 0;
}

.history .inner .box h4.long {
width: 22.133%;
padding: 0;
}

.history .inner .box .txt {
margin: 0 0 1.5% 20%;
color: #231815;
font-size: 3.33vw;
font-weight: bold;
line-height: 1.42;
}

.history .inner .box .txt span {
font-size: 2.13vw;
font-weight: normal;
vertical-align: baseline;
}

.history .inner .box .img01 {
width: 60.8%;
margin: 0 0 4.5% 20%;
}

.history .inner .box .img02 {
position: static;
width: 85.6%;
margin: 0 0 0 9.466%;
}

.history .inner .box01 .img02 {
padding: 2% 0 0;
}
.history .inner .box03 .img02 {
padding: 1% 0 0;
}
.history .inner .box04 .img02 {
padding: 3% 0 0;
}
.history .inner .box06 .img02 {
width: 47.33%;
margin: 0 0 0 26.5%;
padding: 3% 0 0;
}

.history .inner .box .img03 {
width: 63.2%;
padding: 1% 0 4.5% 20%;
}


}