@media screen and (min-width: 856px) {

/* ----------
about------------------------------------------ */

.abouStepBox {position: relative;}
.abouStepBox::before {content:""; display: block; width:3px; height:calc(100% - 40px); background-color:#ccc; position: absolute; top:20px; left:236px;}
.abouStepBox dl {background-color:#f5f5f5; padding:30px 40px 50px 30px; margin: 0 auto 50px auto; }
.abouStepBox dt {width:160px; padding-bottom: 30px;}
.abouStepBox dt p {text-align: center;}
.abouStepBox dt p.titleStep {background-color:var(--lightBlue); color:var(--white); margin:5px 0 0 0; padding:5px 0 6px; text-align: center;}
.abouStepBox dt p img {width:80%;}
.abouStepBox dd {width:calc(100% - 200px); padding:0 0 0 50px;}
.abouStepBox dd::before {background-color:transparent;}
	
.abouStepBox dd h4 {color:var(--lightBlue); font-size:160%; position: relative; margin:0; padding-top: 0;}
.abouStepBox dd h4::before , .abouStepBox dd h4::after {content:""; display:block; background-color:var(--lightBlue);}
.abouStepBox dd h4::before {width:15px; height:15px; border-radius: 50%; position: absolute; left:-50px; top:18px;}
.abouStepBox dd h4::after {width:38px; height:4px; position: absolute; left:-48px; top:23px;}
.abouStepBox dd h5 {color:var(--white); font-size:120%; padding:5px 10px; letter-spacing: -1px; font-weight: 500;line-height: normal;}

.abouStepBox {}
.abouStepBox .stepPointBox {border: solid 1px #ccc; padding: 10px 15px; max-width: 500px; font-size: 85%; width: 100%;}

.aboutMeritBox {padding:30px 40px; margin:20px auto; background-color: var(--white);}
.aboutMeritBox .aboutMeritTtl {color:var(--btn-bg-orange); font-size:20px; font-weight: 600;}

.aboutStepTitle {font-size:26px; margin-bottom:20px; position: relative; font-weight: 600; text-indent: -2em; padding-left: 1.8em;}
.aboutStepTitle span {background-color:var(--base-color); padding:0 12px; margin:0 10px 0 0; color:var(--white);}
.aboutStepMargin {margin:0 0 0 45px;}

.aboutSeminarImg {width:50%;}
.aboutSeminarImg img {width:100%; height:auto;}
.aboutSeminarCon {width:47%;}
.aboutSeminarCon dl {margin:10px auto 0 auto; font-size:90%;}
.aboutSeminarCon dl dt {width:140px; color:var(--white); margin:0 10px 0 0; padding:5px 0; display: flex; justify-content: center; align-items: center;}
.aboutSeminarCon dl dd {width:calc(100% - 160px); padding:5px 0;}

.aboutSeminarNote {border:double 3px #ccc; padding:30px;}
.aboutSeminarNote dt {color:var(--base-color); font-weight: 600; font-size:22px;}
.aboutSeminarNote dd {}
	
.aboutlinkBlock {border:double 3px #ccc; margin:0 auto;}
.aboutlinkBlock dt {font-weight: 600; background-color:var(--base-color); color:#fff; padding:10px 20px; }
.aboutlinkBlock dd {padding:20px 20px 20px 30px;}
.aboutlinkBlock li {margin:0 50px 0 0;}
	
.RedTxt{font-weight: 500;}
	
.Grayborder1.widfit{padding: 5px 15px; margin: 15px 0 30px 50px; background-color: #fff;}

.paymentBox p{padding: 2px 0;}
.paymentBox span{white-space: nowrap;}
	
}

@media screen and (min-width: 856px) and (max-width: 1100px) {
	
.aboutFlex{display: block;}
.aboutSeminarImg {width: 600px; margin: 0 auto 20px;}
.aboutSeminarCon {width:600px; margin: 0 auto;}
	
}

@media screen and (max-width: 855px) {
/* ----------
about------------------------------------------ */

.abouStepBox {position: relative; z-index:1;}
.abouStepBox dl {background-color:#f5f5f5; margin: 0 auto 50px auto; margin-bottom: 80px;}
.abouStepBox dl:last-child {margin-bottom: 50px;}
.abouStepBox dl:before {background-color:transparent;}
.abouStepBox dt {}
.abouStepBox dt p {text-align: center;}
.abouStepBox dt p.titleStep {background-color:var(--lightBlue); color:var(--white); margin:0px 0 20px 0; padding:5px 0; text-align: center; position: relative; z-index: 2;}
.abouStepBox dt p img {width:80%;}
.abouStepBox dd {padding:10px 10px 20px;}
.abouStepBox dd div {display: block !important; padding: 0 10px; min-height: 50px;}
.abouStepBox dd div img {float: right; margin: 20px 15px 10px;}
.abouStepBox dd div img {
    width: 85px;
    position: absolute;
    right: 5px;
    z-index: 2;
    top: -88px;
}
.abouStepBox dd div img.step1 {
    width: 80px !important;
    top: -81px;
}
.abouStepBox dd div img.step3 {
    width: 75px !important;
    top: -75px;
}
.abouStepBox dd div::after {content: ""; display: block; clear: both;}
.StepFlex{display: flex !important; padding: 0 !important;}

.abouStepBox dd h5 {color:var(--white); font-size:110%; padding:3px 9px 3px 33px; font-weight:500; position: relative;line-height: normal;}
.abouStepBox dd h5 i{position: absolute; top: 9px; left: 8px; width: 20px; text-align: center;}
	
.abouStepBox dd p {padding: 0 10px;}

.abouStepBox {}
.abouStepBox .stepPointBox {border:solid 1px #ccc; padding:10px 20px;}

.aboutMeritBox {padding:20px !important; margin:20px auto; background-color: var(--white);}
.aboutMeritBox .aboutMeritTtl {color:var(--btn-bg-orange); font-size:110%; font-weight: 600; letter-spacing: -1px;}

.aboutStepTitle {font-size:140%; margin-bottom:20px; border-radius:5px; position: relative; font-weight: 600; text-indent: -2em; padding-left: 2em;}
.aboutStepTitle span {background-color:var(--base-color); padding:3px 10px; margin:0 10px 0 0; color:var(--white);}

.aboutSeminarImg {margin:0 auto 10px auto;}
.aboutSeminarImg img {width:100%; height:auto;}
.aboutSeminarCon {}
.aboutSeminarCon dl {margin:10px auto 0 auto;}
.aboutSeminarCon dl dt {width:180px; color:var(--white); text-align: center; margin:0 0 5px 0;}
.aboutSeminarCon dl dd {}
	
.aboutlinkBlock {border:double 3px #ccc; margin:0 auto;}
.aboutlinkBlock dt {font-weight: 600; background-color:var(--base-color); color:#fff; padding:10px 20px;}
.aboutlinkBlock dd {padding:10px 0;}
.aboutlinkBlock li {margin:10px 20px;}

.RedTxt{font-weight: 500;}
	
.Grayborder1.widfit{padding: 5px 15px; margin: 15px 0 30px; background-color: #fff;}
	
.TitleType06 {font-size: 22px;}

}


@media only screen and (max-width: 480px) {
    .abouStepBox dd div img {
        width: 70px;
        top: -69px;
        right: -5px;
    }
    .abouStepBox dd div img.step1 {
        width: 65px !important;
        top: -62px;
        right: -5px;
    }
    .abouStepBox dd div img.step3 {
        width: 60px !important;
        top: -56px;
        right: -5px;
    }

    .entryBlockWeb h5 , 
    .entryBlockFax h5 {
        font-size: 95%;
        padding-left: 35px;
    }
    .entryBlockWeb h5 i , 
    .entryBlockFax h5 i {
        top: 10px;
    }
}


@media only screen and (max-width: 420px) {
    .abouStepBox dt p.titleStep {
        text-align: left;
        padding-left: 20px;
        font-size: 105%;
    }
}