@charset 'UTF-8';

/*  partner
--------------------------------------- */

.kv {
background: url("/ja/assets/img/partner/bg_kv_01.jpg") no-repeat center;
}

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

.kv h1 {
padding: 30px 0 5px;
color: #333;
font-size: 30px;
font-weight: bold;
}

.kv p {
padding: 0 0 25px;
color: #333;
font-size: 15px;
font-weight: bold;
line-height: 1.5;
}

.lnav ul {
max-width: 700px;
}

.partner {
max-width: 900px;
margin: 0 auto;
padding:  65px 20px 80px;
text-align: center;
box-sizing: border-box;
}

.partner h2 {
margin: 0 0 35px;
padding: 0 0 18px;
color: #333;
font-size: 30px;
font-weight: bold;
background: url("/ja/assets/img/bg_h2_01.png") no-repeat center bottom;
}

.partner h3 {
margin: 0 0 30px;
padding: 8px 20px;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: left;
background: url("/ja/assets/img/bg_h3_01.png") no-repeat center;
}

.partner .txt {
margin: 0 0 22px;
font-size: 14px;
line-height: 1.58;
text-align: left;
}

.partner .ind {
margin: -25px 0 25px;
padding: 0 0 0 1em;
font-size: 14px;
line-height: 1.58;
text-align: left;
text-indent: -1em;
}

.partner .ind a {
color: #144996;
transition: 0.3s all;
}

.partner .ind a:hover {
color: #0022FF;
}

.partner .txtList {
margin: 0 0 50px;
}

.partner .txtList li {
padding: 0 0 0 2em;
font-size: 14px;
line-height: 1.58;
text-align: left;
text-indent: -2em;
}

.partner h4 {
padding: 5px 0 15px;
font-size: 18px;
font-weight: bold;
text-align: center;
}

.partner .productList {
display: flex;
justify-content: space-between;
margin: 0 0 30px;
}

.partner .productList li {
width: 30.233%;
}

.partner .productList li a {
position: relative;
display: block;
overflow: hidden;
}

.partner .productList li .txt {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
margin: 0;
color: #fff;
line-height: 1.47;
text-align: center;
background: rgba(0,0,0,0.5);
box-sizing: border-box;
transition: all 0.5s;
}

.partner .productList li .txt.on {
height: 100%;
padding: 50px 0 0;
transition: all 0.5s;
}

.partner .productList li .txt span {
display: block;
width: 100%;
font-size: 15px;
font-weight: bold;
transition: all 0.5s;
}

.partner .productList li .txt.on span {
margin-top: 60px;
font-size: 18px;
}

.partner .productList li .txt span:before {
content: '';
position: absolute;
bottom: 105px;
left: 0;
right: 0;
width: 1px;
height: 30px;
margin: 0 auto;
background: #fff;
opacity: 0;
transition: all 0.5s;
}
.partner .productList li .txt.on span:before {
opacity: 1;
}
.partner .productList li .txt span:after {
content: 'AT';
position: absolute;
bottom: -55px;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0 auto;
color: #fff;
font-size: 50px;
font-weight: bold;
}
.partner .productList li:nth-child(2) .txt span:after {
content: 'MT';
}
.partner .productList li:nth-child(3) .txt span:after {
content: 'TS';
}

.partner .tableBox {
position: relative;
border-top: 4px solid #ccc;
border-bottom: 4px solid #ccc;
}

.partner .tableBox:after {
content: '';
position: absolute;
top: -4px;
left: 0;
width: 195px;
height: 4px;
background: url("/ja/assets/img/bg_line_01.png") no-repeat center;
}

.partner table {
position: relative;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}

.partner table th {
width: 195px;
padding: 15px 0;
background: #eef2f8;
font-size: 14px;
font-weight: bold;
line-height: 1.58;
text-align: center;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}

.partner table td {
padding: 15px 42px;
font-size: 14px;
line-height: 1.58;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}

.partner .btn {
width: 270px;
margin: 20px auto 0;
text-align: left;
}

.partner .btn a {
position: relative;
display: block;
padding: 9px 20px;
color: #144996;
font-size: 14px;
background: url("/ja/assets/img/ico_arw_06.png") no-repeat right 17px center;
border: 1px solid #144996;
box-sizing: border-box;
overflow: hidden;
}

.partner .btn a:hover {
color: #fff;
background: url("/ja/assets/img/ico_arw_05.png") no-repeat right 17px center;
}

.partner .btn a::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: '';
background: #034a96;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .3s;
}
.partner .btn a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}


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

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

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

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

.kv p {
padding: 0 0 3.5%;
color: #333;
font-size: 12px;
font-weight: normal;
line-height: 1.25;
}

.lnav ul {
width: 650px;
max-width: inherit;
}

.partner {
width: 86.666%;
margin: 0 auto;
padding: 10.5% 0;
text-align: center;
box-sizing: border-box;
}

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

.partner h3 {
margin: 0 0 7%;
padding: 7px 8px;
color: #fff;
font-size: 15px;
font-weight: bold;
text-align: left;
letter-spacing: -0.5px;
background: url("/ja/assets/img/bg_h3_01_sp.png") no-repeat center;
background-size: cover;
}

.partner .txt {
margin: 0 0 5.5%;
font-size: 12px;
line-height: 1.59;
text-align: left;
}

.partner .ind {
margin: -4.5% 0 5.5%;
padding: 0 0 0 1em;
font-size: 12px;
line-height: 1.59;
text-align: left;
text-indent: -1em;
}

.partner .ind a {
color: #144996;
}
.partner .ind a:hover {
color: #144996;
}

.partner .txtList {
margin: 0 0 10%;
}

.partner .txtList li {
padding: 0 0 0 2em;
font-size: 12px;
line-height: 1.59;
text-align: left;
text-indent: -2em;
}

.partner h4 {
padding: 1% 0 4%;
font-size: 14px;
font-weight: bold;
text-align: center;
}

.partner .productList {
margin: 0 auto 4%;
padding: 0;
box-sizing: border-box;
}

.partner .productList {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.partner .productList li {
width: 41.333vw;
margin: 0 0 4vw;
}

.partner .productList li a {
position: relative;
display: block;
}

.partner .productList li .txt {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25px;
padding: 3px 0 2px;
color: #fff;
font-size: 10px;
font-weight: bold;
line-height: 2;
text-align: center;
background: rgba(0,0,0,0.5);
}

.partner .productList li .txt.on {
height: auto;
padding: 3px 0 2px;
}

.partner .productList li .txt span {
display: block;
width: 100%;
font-size: 10px;
font-weight: bold;
}

.partner .productList li .txt.on span {
margin-top: 0;
font-size: 10px;
}

.partner .productList li .txt span:before ,
.partner .productList li .txt span:after {
display: none !important;
}

.partner .tableBox {
position: relative;
border-top: none;
border-bottom: 2px solid #ccc;
}

.partner .tableBox:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 2px;
background: url("/ja/assets/img/bg_line_01.png") no-repeat center;
background-size: 170px auto;
}

.partner table {
position: relative;
width: 100%;
table-layout: fixed;
border-top: 2px solid #ccc;
border-collapse: collapse;
}

.partner table th {
width: 100px;
padding: 7px 16px;
background: #eef2f8;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
text-align: left;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}

.partner table td {
padding: 7px 15px;
font-size: 12px;
line-height: 1.5;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}

.partner table tr:last-child th ,
.partner table tr:last-child td {
border-bottom: none;
}

.partner .btn {
width: 230px;
margin: 6% auto 0;
text-align: left;
}

.partner .btn a {
position: relative;
display: block;
padding: 7px 13px;
color: #144996;
font-size: 12px;
background: url("/ja/assets/img/ico_arw_06.png") no-repeat right 19px center;
background-size: 20px auto;
border: 1px solid #144996;
box-sizing: border-box;
overflow: hidden;
}

.partner .btn a:hover {
color: #144996;
background: url("/ja/assets/img/ico_arw_06.png") no-repeat right 19px center;
background-size: 20px auto;
}

.partner .btn a::before {
display: none;
}


}