body{
	font-family:"MS Pゴシック",sans-serif;
}

.line {
    margin: 20px auto;
    border: 1px solid #888888;
    width: 90%;
}

.pr-group{
    display: flex;
    justify-content: center;
    align-items: center;
}

.pr-point{
    position: relative;
    min-width: 240px;
    width: 240px;
    height: 253px;
    margin-right: 50px;
    border-left: 2px solid #cccccc;
    border-right: 2px solid #cccccc;
}

.circle{
    position: absolute;
    font-size: 20px;
    color: #ffffff;
    background-color: #99ccff;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    line-height: 90px;
    box-sizing: border-box;
}

.c1 {
    top: 100px;
    left: 10px;
}

.c2 {
    top: 100px;
    left: 140px;
}

.rect{
    position: absolute;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    left: 70px;
    top: 100px;
    border-radius: 10px;
    background-color: #3399ff;
    border-right: 3px solid #cccccc;
    border-bottom: 3px solid #cccccc;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #ffffff;
    font-weight: bold;
}

.pr-title-content{
    width: 425px;
}

.pr-title {
    width: 400px;
    padding: 5px 10px;
    color: #494949;
    background: #f4f4f4;
    border-left: solid 5px #7db4e6;
    border-bottom: solid 3px #d7d7d7;
    margin: 0 0 5px 0;
}

.pr-content {
    width: 425px;
    height: auto;
    padding: 10px 20px 10px 20px;
    margin: 0;
    background-color: #dfefff;
    border: dotted 3px #96c2fe;
    border-radius: 10px;
    box-sizing: border-box;
}

.process-rect__title {
    text-align: center;
    line-height: 40px;
    width: 200px;
    height: 40px;
    margin: 10px;
    font-size: 20px;
    color: #ffffff;
    background-color: #3399ff;
    border-radius: 20px;
}

.process-rect__title--free{
    position: absolute;
    left: 10px;
    top: 0;
    text-align: center;
    line-height: 40px;
    width: 200px;
    height: 40px;
    margin: 10px;
    font-size: 20px;
    color: #ffffff;
    background-color: #3399ff;
    border-radius: 20px;
}

.process-rect__content{
    text-align: center;
    line-height: 40px;
    width: 160px;
    background-color: #99ccff;
    height: 40px;
    margin: 10px;
    font-size: 20px;
    color: #ffffff;
    border-radius: 20px;
}

.individual-group{
    display: flex;
    justify-content: center;
    align-items: center;
}

.individual-group img{
    margin-top: 8px;
    width: 21px;
    height: 21px;
}

.process-title-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 245px;
    margin-right: 50px;
    border-left: 2px solid #cccccc;
    border-right: 2px solid #cccccc;
}

.one-stop-group{
    width: 160px;
    margin-top: 10px;
    background-color: #99ccff;
    border: 2px solid #000000;
    border-radius: 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.one-stop-section{
    font-size: 20px;
    line-height: 45px;
}

.process-all{
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-rect{
    text-align: center;
    line-height: 40px;
    width: 130px;
    height: 40px;
    margin: 10px;
    color: #ffffff;
    background-color: #3399ff;
    border-radius: 20px;
}

.process-arrow .change-odm{
    width: 120px;
    margin: 0 10px;
    text-align: center;
}

.change-odm{
    position: absolute;
    top: 135px;
    left: 110px;
}

.odm-oem__group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: relative;
}

.odm-oem__group::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 47%;
    transform: translate(-47%, -50%);
    background-image: url('../img/consultation/change-arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 167px;
    height: 60px;
}

.odm__group,
.oem__group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.odm__group {
    margin: 0 3% 15px 0;
}

.oem__group {
    margin: 0 0 15px 3%;
}

.odm-oem__title {
    display: inline-block;
    background-color: #3399ff;
    color: #ffffff;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 20px;
    margin: 0;
}

.odm-oem__explanation {
    display: flex;
    background-color: #dfefff;
    width: 90%;
    justify-content: center;
    border-top: dotted 3px #96c2fe;
    border-left: dotted 3px #96c2fe;
    border-right: dotted 3px #96c2fe;
    box-sizing: border-box;
    padding: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 0;
}

.contract-image__group {
    display: flex;
    background-color: #dfefff;
    width: 90%;
    justify-content: center;
    border-bottom: dotted 3px #96c2fe;
    border-left: dotted 3px #96c2fe;
    border-right: dotted 3px #96c2fe;
    box-sizing: border-box;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.odm-flow,
.oem-flow {
    color: #ffffff;
    writing-mode: vertical-rl;
    text-align: center;
    margin: 10px;
    padding: 10px;
}

.odm-flow:nth-child(1) {
    background-color: green;
    height: 60px;
}

.oem-flow:nth-child(1) {
    background-color: green;
    height: 260px;
}

.odm-flow:nth-child(2) {
    background-color: blue;
    height: 280px;
}

.oem-flow:nth-child(2) {
    background-color: blue;
    height: 80px;
}

.odm-flow:nth-child(3),
.oem-flow:nth-child(3) {
    background-color: green;
    height: 60px;
    margin-bottom: 20px;
}

.odm-part,
.oem-part {
    position: relative;
    margin: 5px 20px 5px 5px;
    margin-left: 5px;
    padding-left: 10px;
    padding-top: 5px;
    border-left: 5px solid #000000;
    box-sizing: border-box;
    width: 120px;
    height: 60px;
}

.odm-part:nth-child(1),
.oem-part:nth-child(1) {
    margin-top: 20px;
}

.odm-part:nth-child(1),
.odm-part:nth-child(9),
.oem-part:nth-child(1),
.oem-part:nth-child(3),
.oem-part:nth-child(5),
.oem-part:nth-child(9) {
    background-color: #00ff00;
}

.odm-part:nth-child(3),
.odm-part:nth-child(5),
.odm-part:nth-child(7),
.oem-part:nth-child(7) {
    font-weight: bold;
    background-color: #0099ff;
}

.arrow-message {
    position: relative;
    color: #000000;
    font-weight: bold;
    height: 350px;
    background-color: #0099ff;
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 40px;
    margin-left: 20px;
}

.arrow-message::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 80px solid #0099ff;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.pr-title__short{
    width: 250px;
    padding: 5px 10px;
    color: #494949;
    background: #f4f4f4;
    border-left: solid 5px #0099cc;
    border-bottom: solid 3px #d7d7d7;
    margin: 0 0 5px 0;
}

.trouble-set{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.trouble-single{
    padding: 5px;
    margin: 10px 10px 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px dashed #cccccc;
}

.client-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    margin-top: 10px;
}

.ans-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    margin-top: 20px;
}

.client-icon__group{
    position: relative;
    display: flex;
    margin-bottom: 10px;
    margin-right: 100px;
}

.ans-icon__group{
    position: relative;
    display: flex;
    margin-bottom: 10px;
    margin-right: 100px;
}

.trouble-img{
    width: 57px;
    height: 57px;
    margin-right: 15px;
    z-index: 1;
}

.ans-img {
    width: 57px;
    height: 57px;
    margin-right: 15px;
    z-index: 1;
}

.trouble-client{
    color: #000000;
    font-weight: bold;
    position: absolute;
    left: 25px;
    width: 85px;
    padding-left: 50px;
    line-height: 50px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 2px solid #0099cc;
    z-index: 0;
}

.trouble-answer{
    color: #000000;
    font-weight: bold;
    position: absolute;
    left: 25px;
    width: 85px;
    padding-left: 50px;
    line-height: 50px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 0;
    border: 2px solid #0099cc;
}

.trouble-msg{
    background-color: #ffff99;
    padding: 20px;
    margin: 0;
    border-radius: 20px;
}

.trouble-msg2{
    background-color: #ffff99;
    padding: 20px;
    margin: 0 0 20px 0;
    border-radius: 20px;
    height: 265px;
}

.v-line{
    margin: 70px 5px 20px 5px;
    border-right: 2px solid #cccccc;
}

.little-section__non-title {
    width: 90%;
    padding: 10px;
    margin: 10px 5%;
    background-color: #dfefff;
    border: dotted 3px #96c2fe;
    border-radius: 10px;
    box-sizing: border-box;
}

.little-section__non-title p {
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.content-link {
    text-decoration: underline;
    color: #0000ff;
}

.contact-induction {
    font-weight: bold;
    position: relative;
    background-color: #ffff99;
    border-bottom: 5px solid #cccccc;
    margin-top: 15px;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    z-index: 1;
    width: 80%;
    height: 45px;
}

.contact-induction:hover {
    background-color: #ffff00;
    height: 45px;
    border-top: 5px solid #ffffff;
    border-bottom: none;
}

.contact-induction a {
    text-decoration: none;
    color: #000000;
    z-index: 1;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
}

.contact-induction__img {
    width: 800px;
    height: 240px;
}

@media(max-width: 960px){
    .odm-oem__group{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .oem__group{
        margin-left: 0;
        width: 60%;
    }
    .odm__group{
		margin-top: 30px;
        margin-right: 0;
        width: 60%;
    }
}

@media(max-width:840px){
    .pr-group{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .pr-point{
        margin-right: 0;
        border: none;
        margin-bottom: 20px;
    }
    .process-title-content{
        margin-right: 0;
        border: none;
        margin-bottom: 20px;
    }
    .pr-title-content{
        width: 600px;
    }
    .pr-title{
        width: 95%;
    }
    .pr-content {
        width: 100%;
    }
}

@media(max-width:800px) {
    .contact-induction__img {
        width: 600px;
        height: 180px;
    }
    .oem__group{
        margin-left: 0;
        width: 80%;
    }
    .odm__group{
        margin-right: 0;
        width: 80%;
    }
}

@media(max-width:680px){
    .pr-title-content{
        width: 480px;
    }
}

@media(max-width:600px){
	.contact-induction__img {
		width: 400px;
		height: 120px;
	}
}

@media(max-width:530px){
    .pr-title-content{
        width: 400px;
    }
}

@media(max-width:500px){
    .little-section__non-title p,
    .trouble-msg,
    .trouble-msg2,
    .odm-oem__explanation,
    .pr-title,
    .pr-content,
	.little-section P{
		font-size: 14px;
	}
    .trouble-msg2{
        height: 175px;
    }
}

@media(max-width:450px) {
    .contact-induction__img {
        width: 300px;
        height: 90px;
    }
    .pr-title-content{
        width: 290px;
    }
    .pr-title{
        width: 270px;
    }
    .oem__group{
        margin-left: 0;
        width: 90%;
    }
    .odm__group{
        margin-right: 0;
        width: 90%;
    }
}