@charset "UTF-8";

main{
    margin: 0 auto 4%;
}
main .mainWrap{
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 3% 3% 0;
}
main .bread{
    margin: 0;
}
main .mainWrap:after{
    content: "";
    background: url(/images/products/title.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    clip-path: polygon(0 0, 100% 0%, 100% 42%, 0% 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
main .mainWrap h2{
    color: #fff;
    padding: 0 3% 1% 3%;
}
main .mainWrap h2:before,
main .mainWrap h2:after{
    display: none;
}
main .mainWrap h3{
    background: rgba(255,255,255,0.8);
    color: #060672;
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 2% 3%;
    padding: 1% 3% 1% 3%;
    width: fit-content;
}
main .mainWrap p{
    background: rgba(255,255,255,0.8);
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.4em;
    margin: 0 0 3% 3%;
    padding: 3% 2%;
    width: 97%;
}
section.tab_area {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.4em;
    width: 95%;
    max-width: 1300px;
    margin: 0 auto 5%;
    padding: 0;
}
section.tab_area .tab-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0;
}
section.tab_area .tab-list .tab-list-content {
    background: #f8f8f8;
    border: 1px solid #060672;
    color: #060672;
    cursor: pointer;
    font-family: "typos", sans-serif;
    font-weight: 300;
    line-height: 1.2em;
    text-align:center;
    width: calc(98% / 4);
    padding: 10px;
    margin: 0 0.25%;
}
section.tab_area .tab-list .tab-list-content.active {
    background: #060672;
    color: #fff;
}
section.tab_area .tab-inner .tab-inner-content {
    display: none;
}
section.tab_area .tab-inner .tab-inner-content.show {
    display: block;
    background: #f8f8f8;
    border: 1px solid #060672;
    box-sizing: border-box;
    padding: 3%;
    margin: -2px 0 0;
    position: relative;
    z-index: 1;
}
section.flow{
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.4em;
    width: 95%;
    max-width: 1140px;
    margin: 0 auto 5%;
    padding: 0;
}
section.flow .inner{
    width: 100%;
}
section.flow .inner h3{
    border-bottom: 3px solid #060672;
    color: #060672;
    font-size: 20px;
    width: 100%;
    margin: 0 0 5%;
    padding: 0 0 10px;
    position: relative;
}
section.flow .inner h3:after{
    content: "";
    background: #060672;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -9px;
    left: 0;
}
section.flow .inner dl{
    background:  #fff;
    border: 2px solid #060672;
    color: #060672;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    margin: 0 auto 50px;
    padding: 2%;
}
section.flow .inner dl:not(:last-child):after{
    content: "";
    background: url(/images/products/icon_flow_arrow.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width: 26px;
    height: 30px;
    position: absolute;
    bottom: -40px;
    left: 5%;
}
section.flow .inner dl dt{
    padding: 0 20px 0 60px;
    position: relative;
}
section.flow .inner dl dt:before{
    content:"";
    position: absolute;
    top:50%;
    left:0;
    transform: translate(0,-50%);
}
section.flow .inner dl.flow-list01 dt:before{
    background:url(/images/products/icon_flow01.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:100%;
    width:30px;
    height:30px;
}
section.flow .inner dl.flow-list02 dt:before{
    background:url(/images/products/icon_flow02.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:100%;
    width:40px;
    height:50px;
}
section.flow .inner dl.flow-list03 dt:before{
    background:url(/images/products/icon_flow03.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:100%;
    width:40px;
    height:50px;
}
section.flow .inner dl.flow-list04 dt:before{
    background:url(/images/products/icon_flow04.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:100%;
    width:50px;
    height:30px;
}
section.tab_area .tab-inner .anchor{
    background: #e6e6e6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin:  1% auto 2%;
    padding: 2%;
    width: 90%;
}
section.tab_area .tab-inner .anchor dt{
    color: #060672;
    font-family: "typos", sans-serif;
    font-weight: 300;
    line-height: 1.2em;
    padding: 0 2% 0 0;
}
section.tab_area .tab-inner .anchor dd a{
    display: block;
    padding: 0 25px 0 0;
    position: relative;
}
section.tab_area .tab-inner .anchor dd a:after{
    content:"";
    background: url(/images/anchor.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 28%;
    right: 10px;
    transition: all ease 0.5s;
}
section.tab_area .tab-inner .anchor dd a:hover:after{
    top:5px;
}
section.tab_area .tab-inner .tab-inner-content-box{
    display: flex;
    flex-wrap: wrap;
    margin:  1% auto 2%;
    padding: 0;
    width: 90%;
    scroll-margin-top: 100px;
}
section.tab_area .tab-inner .tab-inner-content-box:before{/* 古いブラウザ用 */
    content: "";
    display: block;
    height: 100px;
    margin-top: -100px;
}
section.tab_area .tab-inner .tab-inner-content-box:not(:last-child){
    border-bottom: 1px solid #060672;
    margin:  1% auto 5%;
    padding: 0 0 5%;
}
section.tab_area .tab-inner .tab-inner-content-box .photo{
    width: 40%;
    margin: 0 0 5%;
    padding: 0 5% 0 0;
}
section.tab_area .tab-inner .tab-inner-content-box .title{
    width: 60%;
    margin: 0 0 5%;
    padding: 0 0 0;
}
section.tab_area .tab-inner .tab-inner-content-box .half{
    width: 47%;
    padding: 0 0 0;
}
section.tab_area .tab-inner .tab-inner-content-box .half:nth-child(even){
    margin: 0 0 5% 3%;
}
section.tab_area .tab-inner .tab-inner-content-box .half:nth-child(odd){
    margin: 0 3% 5% 0;
}
section.tab_area .tab-inner .tab-inner-content-box .full{
    width: 100%;
    margin: 0 0 5%;
    padding: 0 0 0;
}

section.tab_area .tab-inner .tab-inner-content-box .title h4{
    color: #060672;
    font-family: "typos", sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2em;
    margin: 0 0 5%;
}
section.tab_area .tab-inner .tab-inner-content-box .title p{
    margin: 0 0 5%;
}
section.tab_area .tab-inner .tab-inner-content-box .title a{
    background: #060672;
    color: #fff;
    display: block;
    margin: 0 0 0 auto;
    padding: 10px 0 10px 30px;
    width: 320px;
    position: relative;
}
section.tab_area .tab-inner .tab-inner-content-box .title a:after{
    content: "";
    background: #fff;
    width: 50%;
    height: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
    transition: all ease 0.5s;
}
section.tab_area .tab-inner .tab-inner-content-box .title a:hover:after{
    width: 0;
}
section.tab_area .tab-inner .tab-inner-content-box .half h5,
section.tab_area .tab-inner .tab-inner-content-box .full h5{
    color: #060672;
    font-family: "typos", sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2em;
    width: 100%;
    margin: 0 0 5%;
    position: relative;
}
section.tab_area .tab-inner .tab-inner-content-box .half h5:before,
section.tab_area .tab-inner .tab-inner-content-box .full h5:before{
    content: "";
    background: #060672;
    width: 70%;
    height: 1px;
    transform: translate(0,-50%);
    position: absolute;
    top: 50%;
    right: 0;
}
/* section.tab_area .tab-inner .tab-inner-content-box .full h5:before{
    width: 90%;
} */
section.tab_area .tab-inner .tab-inner-content-box .half h5:after,
section.tab_area .tab-inner .tab-inner-content-box .full h5:after{
    content: "";
    background: #060672;
    width: 15px;
    height: 15px;
    transform: rotate(45deg) translate(0,-50%);
    position: absolute;
    top: 41%;
    right: 0;
}
section.tab_area .tab-inner .tab-inner-content-box div:not(.summary) ul li{
    margin: 0 0 3%;
}
section.tab_area .tab-inner .tab-inner-content-box div.summary ul li{
    margin: 0 0 1%;
}
section.tab_area .tab-inner .tab-inner-content-box .merit li b{
    display: block;
    width: 100%;
    margin: 0 0 1%;
}
section.tab_area .tab-inner .tab-inner-content-box .merit li i{
    color: rgb(135, 11, 11);
    font-size:18px;
    font-weight: 600;
    position: relative;
    padding: 0 20px 0 0;
}
section.tab_area .tab-inner .tab-inner-content-box .merit li i:after{
    content: "";
    border: 1px solid #333;
    border-radius: 3px;
    width: 12px;
    height: 12px;
    position: absolute;
    bottom:-3px;
    left:0;
    z-index: 0;
}
section.tab_area .tab-inner .tab-inner-content-box .point li b{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 1%;
}
section.tab_area .tab-inner .tab-inner-content-box .point li i{
    border: 1px solid #333;
    font-style:normal;
    font-size: 0.8em;
    display: block;
    padding: 0 15px;
    margin: 0 10px 0 0;
    width: fit-content;
    height: fit-content;
}
@media screen and (max-width:768px) {
main .mainWrap h3{
    font-size:27px;
}
section.tab_area .tab-list .tab-list-content{
    font-size:16px;
}
section.tab_area .tab-inner .anchor{
    margin: 4% auto 5%;
}
section.tab_area .tab-inner .tab-inner-content-box .photo{
    width: 100%;
    margin: 0 0 8%;
    padding: 0 0 0;
}
section.tab_area .tab-inner .tab-inner-content-box .title{
    width: 100%;
    margin: 0 0 10%;
    padding: 0 0 0;
}
section.tab_area .tab-inner .tab-inner-content-box .half{
    width: 100%;
    padding: 0 0 0;
}
section.tab_area .tab-inner .tab-inner-content-box .half:nth-child(even){
    margin: 0 0 8% 0;
}
section.tab_area .tab-inner .tab-inner-content-box .half:nth-child(odd){
    margin: 0 0 8% 0;
}
section.tab_area .tab-inner .tab-inner-content-box .half h5:before,
section.tab_area .tab-inner .tab-inner-content-box .full h5:before{
    width: 50%;
}
section.flow .inner dl{
    padding: 5% 3%;
}
section.flow .inner dl dt{
    margin: 0 0 5%;
}
section.flow .inner dl dd{
    padding: 0 0 0 5%;
}
}