@charset 'UTF-8';

/*  product
--------------------------------------- */

.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: 500px;
}

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

.product h2 {
margin: 0 0 56px;
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;
}

.product .tabMenu {
display: flex;
justify-content: space-between;
margin: 0 0 73px;
}

.product .tabMenu li {
position: relative;
width: 31.4%;
padding: 8px 0;
color: #144996;
font-size: 18px;
font-weight: bold;
border: 1px solid #144996;
box-sizing: border-box;
cursor: pointer;
}

.product .tabMenu li.act {
color: #fff;
background: #144996
}

.product .tabMenu li.act:after {
content: "";
position: absolute;
bottom: -13px;
left: 50%;
margin-left: -13px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 13px 13px 0 13px;
border-color: #144996 transparent transparent transparent;
}

.product .tabBlock {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.product .tabBlock .box {
width: 47.68%;
padding: 0 0 45px;
}

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

.product .tabBlock .box h3 img {
position: absolute;
top: 0;
right: 0;
}

.product .tabBlock .box h4 {
margin: 0 0 15px;
font-size: 18px;
font-weight: bold;
text-align: left;
}

.product .tabBlock .box .tableBox {
position: relative;
margin: 0 0 35px;
border-top: 4px solid #ccc;
border-bottom: 4px solid #ccc;
}

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

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

.product .tabBlock .box table th {
width: 110px;
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;
}

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

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

.product .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;
}

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

.product .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;
}
.product .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: 450px;
max-width: inherit;
}

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

.product 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;
}

.product .tabMenu {
margin: 0 -7.69% 15%;
}

.product .tabMenu li {
width: 31.4%;
padding: 13px 0;
font-size: 12px;
}

.product .tabMenu li.act:after {
bottom: -9px;
margin-left: -9px;
border-width: 9px 9px 0 9px;
border-color: #144996 transparent transparent transparent;
}

.product .tabBlock {
display: block;
}

.product .tabBlock .box {
width: 100%;
padding: 0 0 7%;
}

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

.product .tabBlock .box h3 img {
position: absolute;
top: 0;
right: 1%;
width: 24%;
margin: 1% 0 0;
}

.product .tabBlock .box h4 {
margin: 0 0 5%;
font-size: 14px;
font-weight: bold;
text-align: left;
}

.product .tabBlock .box .tableBox {
position: relative;
margin: 0 0 10%;
border-top: none;
border-bottom: 2px solid #ccc;
}

.product .tabBlock .box .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;
}

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

.product .tabBlock .box table th {
width: 100px;
padding: 8px 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;
}

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

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

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

.product .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;
}

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

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




}