@charset "utf-8";
/*------------20190823------------*/
.red{color: #e0000e;}

.blu { background: #e6ebef}

.gray { background: #f3f3f3}


.section_box {
    width: 100%;
    padding: 6vw 0;
}
.section_box.blu{
    background:#e6ebef;
}
.center_img{
    text-align: center;
    display: block;
    margin: 0 auto;
}


.KeyVisual.noimg .KeyVisual__header{
    text-align: center;
    width: 100%;
    margin: 0;
}
.KeyVisual.noimg:before{padding-top: 7%;}

.ttl {
    position: relative;
    width: 100%;
    padding: 0 0 .8em;
    font-size: 2.8rem;
    line-height: 1.4;
    text-align: center;
    letter-spacing: .1em;
}

.ttl:after,.ttl:before {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: .45em;
    height: 2px;
    content: ""
}

.ttl:before {
    background: #e87722;
    transform: translateX(-90%)
}

.ttl:after {
    background: #671e75
}

.txtbox {
    width: 100%;
    padding: 0 4vw;
    color: #000;
    text-align: center;
}
.txtbox.border{
    border: 1px solid #dadada;
    background: #fff;
    margin: 2.5em auto auto;
    padding: 0 2vw 1vw;
    max-width: 1020px
}
.point dl{
    display: -webkit-box;/*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display: flex;
    margin: 22px 15px 0;
}
.point dl img{
    width: 256px;
    margin-left: 50px;
}
.point dl dt{
    text-align: left;
}
.benefit_list{
    margin: 2rem auto 0;
    max-width: 1020px;
}
.benefit_list h4{
    text-align: center;
    font-size: 1.35em;
    border-bottom: 2px solid;
    width: 60%;
    padding-bottom: 5px;
    margin: 2.5em auto 10px;
}
.benefit_list h4:nth-of-type(1){color:#d3c0c9;}
.benefit_list h4:nth-of-type(2){color:#e7b4a5;}
.benefit_list h4:nth-of-type(3){color:#dbc7ac;}

.benefit_list h4 + div p{margin: 0 0 2em;}

.benefit_list .inr{
    display: -webkit-box;/*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display: flex;  
}

.benefit_list dl{
    display: -webkit-box;/*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display: flex;
    margin-bottom: 40px;
    width: 50%;
    align-items: center;
}
.benefit_list dl dt{width: 35%;}
.benefit_list dl dt img{width:100%}

.benefit_list dl dd{
    width: 57%;
    margin: 0 0 0 10px;
    line-height: 1.6;
    text-align: left;
}
.benefit_list dl dd b{
    font-weight:bold;
}
.txtbox__desc {
    width: 100%;
    margin: 1em auto 0;
    line-height: 1.8;
    letter-spacing: .05em;
    font-size: 1.6rem;
    text-align: center;
    max-width: 1020px;
}

.come_list{
    line-height: 1.5;
    text-align: left;
    padding: 10px 5px;
}
.come_list li{
    text-indent: -14px;
    margin: 0 0 5px 14px;
}
.flow {
    background:#fff;
    max-width: 1020px;
    margin: 2em auto 40px;
    text-align: center;
    font-size: 1.6rem;
}
.flow h4{
    background:#535353;
    color:#fff;
    padding: 15px;
    font-size: 2.3rem;
    position: relative;
}
.flow h4:before{
    display:block;
    content:"";
    width:1px;
    height:1px;
    border: 20px solid transparent;
    border-top: 18px solid #535353;
    position: absolute;
    bottom: -38px;
    left: 50%;
    -webkit-translate:(-50%,0);
    transform: translate(-50%,0);
}
.flow ul{
    padding: 20px 20px 1px;
}
.flow ul li{
    border:1px solid #dadada;
    padding: 15px;
    margin: 0 0 20px;
    line-height: 1.6;
    position:relative;
}
.flow ul li:before{
    display:block;
    content:"";
    width:1px;
    height:1px;
    border: 15px solid transparent;
    border-top: 13px solid #d6d6d6;
    position: absolute;
    bottom: -33px;
    left: 50%;
    -webkit-translate(-50%,0);
    transform: translate(-50%,0);
}
.flow ul li:nth-last-of-type(1):before{content:none;}

.flow ul li._img{
    display: -webkit-box;/*--- Android ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari ---*/
    display: flex; 
    align-items: center;
}

.flow ul li._img img{
    max-width: 274px;
    max-height: 180px;
    height: auto;
    margin-bottom: 10px;
}
.flow ul li._img div{
    width: 40%;
    text-align: right;
}
.flow ul li._img p{
    width: 60%;
}

.txt_link{color:#4479c8;}
.txt_link:hover{color:#c26f19;}

a.wide_btn{
    position: relative;
    display: block;
    width: 74vw;
    font-size: 2.5rem;
    padding: 1.5em 1.6em 1.5em 0.8em;
    margin: 0 auto;
    overflow: hidden;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    text-decoration: none;
    letter-spacing: .1em;
    background: #614466;
    transition: all .4s;
    border: 2px solid #614466;
}
.wide_btn:hover {
    color:#614466;
    background: #fff;
}
.wide_btn svg {
    position: absolute;
    top: 50%;
    right: 1em;
    z-index: 1;
    width: .4em;
    transform: translateY(-50%);
    color: #fff;
    fill: currentColor;
}
.wide_btn:hover svg{  fill: #614466;}

.contact{
    border: 2px solid #614466;
    text-align: center;
    margin: 4vw auto 0;
    max-width: 1020px;
}
.contact dt{
    background: #614466;
    color: #fff;
    font-size: 2rem;
    padding: 10px;
}

.contact dd{
    padding: 10px;
    font-size: 2.5rem;
    line-height: 1.7;
}
.contact dd b{font-size: 1.3em;font-weight: bold;}

.ncc_box{
    display: -webkit-box;/*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display: flex;
    max-width: 1020px;
    margin: 2em auto 0;
}
.ncc_box .left{
    width: 44%;
    min-width: 200px;
    background: #e6ebef;
    margin: 0 50px 0 0;
    padding: 15px;
    position:relative;
}
.ncc_box .left:after{
    content:"";
    display:block;
    position:absolute;
    right: -149px;
    bottom: 42%;
    width: 260px;
    height: 40px;
    background: url(../images/ncc_ico2.png) no-repeat 50% 0;
    background-size: contain;
    z-index: -1;
    transform: rotate(270deg);
}

.ncc_box .left dt{
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: bold;
}
.ncc_box .left dd.txt{
    background: #fff;
    width: 70%;
    padding: 8px;
    border-radius: 8px;
    position:relative;
    line-height: 1.8;
}
.ncc_box .left dd.txt:after{
    content:"";
    display:block;
    position:absolute;
    right: -36px;
    bottom: 60%;
    transform: rotate(30deg);
    width:1px;
    height:1px;
    border: 12px solid transparent;
    border-left: 35px solid #fff;
}
.ncc_box .left dd.img{
    position: absolute;
    top: 122px;
    width: 75px;
    right: 1%;
}
.ncc_box .left dd.img img{width:100%;}

.ncc_box .right{
    border:2px solid #c26f19;
}
.ncc_box .right h4{
    background: #c26f19;
    color:#fff;
    text-align: center;
    padding: 10px;
    font-size: 1.2em;
}
.ncc_box .right p{
    text-align: center;
    font-size: 1.2em;
    margin: 15px 0;
}
.ncc_box .right p b{ font-weight:bold;}

.ncc_box .right div{
    display: flex;
    margin: 0 10px;
}
.ncc_box .right div dl{
    border: 1px solid #dadada;
    padding: 14px;
    margin: 0 5px 10px;
    text-align: center;
    width: 33%;
}
.ncc_box .right div dl dt,
.ncc_box .right div dl dd{display: block;font-weight: bold;}

.ncc_box .right div dl dt{
    margin-bottom: 8px;
}

.ncc_box .right div dl dd{
    font-size: 1.2em;
}
.ncc_box .right div dl b{
    font-size: 1.6em;
    margin-left: 8px;
}
.point{
    background: #f4f0e4;
    padding: 30px 130px;
    box-sizing: border-box;
    max-width: 1020px;
    margin: 3em auto 0;
}
.point h4{
    border-bottom: 2px solid #c26f19;
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.point h4 span{
    background: #c26f19;
    color: #fff;
    display: inline;
    margin: 0 15px 0 0;
    padding: 4px 8px;
    font-size: 0.8em;
    font-weight: normal;
}
.grid__inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto;
    -ms-grid-columns: 45% 2% 1fr;
    grid-template:
        "grid__image-parent grid__texts" auto /
        45% 1fr;
    gap: 0 2%;
    margin: 0 auto 0;
}
.grid__go-to-detail {
    display:inline-block;
    width: 250px;
    padding: 1.1em 0;
    margin: 4em 0 0;
    font-size: 1.6rem;
    border: 2px solid #614466;
    text-align: center;
    background: #614466;
    color: #fff !important;
    text-decoration: none;
    position: relative;
}
.grid__go-to-detail:hover {
    color:#614466 !important;
    background: #fff;
    border-color: #614466
}
.grid__go-to-detail svg{
    position: absolute;
    top: 50%;
    right: 1em;
    z-index: 1;
    width: .4em;
    transform: translateY(-50%);
    color: #fff;
    fill: currentColor;
}
.grid__go-to-detail:hover svg{  fill: #614466;}

.grid__text {
    grid-area:grid__text;
    margin-top: 0;
    line-height: 2.2;
    font-size: 1.6rem;
}
.grid__texts {
    display:flex;
    flex-direction: column;
    grid-area: grid__texts;
    justify-content: center;
}
.grid__image-parent {
    -ms-grid-row:1;
    -ms-grid-column: 1
        grid-area:grid__image-parent;
    margin-top: 35px;
}
.grid__image-parent img{ width:100%}

.grid__text,.grid__texts {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}

@media (min-width: 768px) {

   .grid__inner{
        max-width: 1280px;
        max-width: var(--max-width);
        padding: 60px 40px 80px;
   }
}
 
@media only screen and (min-width: 0px) and (max-width: 760px) {
    
.breadcrumb{width:auto;padding-top: 100px;}

.center_img{width: 90%;}

.sp_left{text-align: left !important;}

.section_box {padding: 40px 0 60px;}

.KeyVisual.noimg:before{padding-top: 19%;}

.KeyVisual.noimg .KeyVisual__header{
    margin: 0;
    text-align: center;
    font-size: 2.2rem;
}
.KeyVisual__header{
    font-size: 1.6rem;
}
.KeyVisual__inner{
    padding: 0 10px;
    width: 100%;
}
.KeyVisual__image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
}
.KeyVisual:before{
    padding-top: 53.33333%;
}
.KeyVisual__line.-blue {
    top: 35%;
    height: 65%;
}
.Statement {
    width: 100%;
    line-height: 2.2;
    color: #fff;
    letter-spacing: 0.1em;
    background: #535353;
}
.Statement__inner {
    width: 100%;
    padding: 10vw;
}
.ttl {
    padding: 0 10px .8em;
    font-size: 2.3rem;
}
.ttl:after,.ttl:before {
    width:.35em;
    height: 3px
}

.txtbox__desc {
    margin-top:2em;
    line-height: 1.5;
}
.txtbox__desc span{    line-height: 0;}

.come_list {
    padding: 0;
}
.flow {
    margin: 2em 15px 30px;
    font-size: 0.85rem;
}
.flow h4{
    font-size: 1.7rem;
}
.flow ul li{
    padding: 20px;
    font-size: 1.6em;
}

.flow ul li._img{
    display: block;
}
.flow ul li._img img{
    width: 100%;
    max-height: 176px;
}
.flow ul li._img div{
    width: 80%;
    text-align: center;
    margin: 0 auto;
}
.flow ul li._img p{
    width: 100%;
}
.txtbox.border{
    width: auto;
    margin: 30px 15px 0;
    padding-bottom: 1vw;
}
.txtbox.border .txtbox__desc{
    margin-top: 1em;
}
a.wide_btn{
    font-size: 1.6rem;
    padding: 1.2em 1.6em 1.2em 0.8em;
    width: 90%;
}
a.wide_btn.small{  font-size: 1.5rem;}

.contact{margin: 2em 15px 0;}
.contact dt{font-size: 1.6rem;padding: 15px 0;line-height: 1.3;}
.contact dd{font-size: 2rem;padding: 15px 0;line-height: 1.3;}

.grid__inner{
    display:block;
    margin: 0 4vw 0;
}
.grid__image-parent {
    width: 100%;
    margin: 5.5vw 0;
}
.grid__image-parent img{
    width: 100%;
}
.grid__go-to-detail{
    margin: 20px auto 0;
    width: 100%;
}
.ncc_box{
    display: block;
    margin: 1em 4vw 0;
}
.ncc_box .left{
    width: auto;
    min-width: auto;
    margin: 0 0 60px;
}
.ncc_box .left dt{  text-align: center;}

.ncc_box .left dd.txt{
    width:60%;
    line-height: 1.5;
}
.ncc_box .left dd.txt:after{
    right: -44px;
    bottom: 25px;
    transform: none;
}
.ncc_box .left:after{
    right: 50%;
    bottom: -75px;
    width: 100%;
    height: 76px;
    max-width: 400px;
    transform: translate(50% ,0);
}
.ncc_box .left dd.img{
    width: 70px;
    top: 30%;
    right: 33px;
}

.ncc_box .right div{
    display: block;
}
.ncc_box .right div dl{
    width: 100%;
}
.ncc_box .right div dl dt, .ncc_box .right div dl dd{
    display: inline-block;
}
.come_list li{
    margin: 10px 10px 10px 23px;
}
.point{
    padding: 15px;
    margin: 1em 10px 0;
}
.point h4{
    font-size: 1.1rem;
    line-height: 1.3;
}
.point h4 span{
    display: table;
    padding: 6px;
    margin-bottom: 5px;
}
.point dl{
    display:block;
}
.point dl img{
    margin: 17px auto 0;
    width: 100%;
}

.benefit_list .inr{
    display: block;
    margin: 0 10px;
}
.benefit_list dl{
    width: 100%;
    align-items: flex-start;
}
}