/* PC SP 共通 */
body.about #title{
    background-image: url(../images/about/title-bg.jpg?ver=250225);
}

body.about .greeting-wrapper,
body.about .greeting-box,
body.about .greeting-subbox{
    position: relative;
}
body.about .greeting-box:not(:last-child){
	margin-bottom: 20px;
}
body.about .greeting-box .titles{
    margin-bottom: 25px;
    font-size: 162.5%; /* 26px */
    line-height: 2.0;
}
body.about .greeting-box .text-box{
    position: relative;
    z-index: 2;
}
body.about .greeting-box .image-box{
    text-align: right;
}
body.about .greeting-box .image{
    display: inline-block;
    margin-bottom: 0;
    line-height: 0;
    position: relative;
}
body.about .greeting-box .image:after{
    content: "";
    display: block;
    width: calc( 402 / 402 * 100% );
    padding-top: calc( 231 / 402 * ( 402 / 402 ) * 100% );
    background-color: #ffffff;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
}
body.about .greeting-box .nametext{
    margin-top: -70px;
    position: relative;
    z-index: 2;
}
body.about .greeting-box .line{
    display: block;
    min-width: 100%;
    height: 200px;
    background-color: #F2F2F2;
    position: absolute;
    top: 790px;
    left: 0;
    margin: 0 -500% 0 -160px;
    padding-right: 500%;
    z-index: 0;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    transform: skewY(-30deg);
    overflow: hidden;
    z-index: -1;
}
body.about .greeting-box .line:before,
body.about .greeting-box .line:after{
    content: "";
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    margin-bottom: -50%;
    transform: skewY(30deg) translateY(-50%);
}
body.about .greeting-box .line:before{
    width: 884px;
    height: 732px;
    background-image: url("../images/about/greeting-line01.png");
    left: 564px;
}
body.about .greeting-box .line:after{
    width: 785px;
    height: 580px;
    background-image: url("../images/about/greeting-line02.png");
    left: -332px;
}
body.about .greeting-subbox .paper_g-list > li{
	line-height: 1.5;
}
body.about .greeting-subbox .paper_g-list > li:not(:last-child){
	margin-bottom: 10px;
}
body.about .greeting-subbox .paper_g-list > li:before{
	top: 9px;
}
body.about .greeting-subbox .paper_g-list > li a[href*='.pdf']:after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 20px;
    height: 26px;
	background-image: url(../images/common/anchor-pdf.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px auto;
}

body.about #about-ordermade .text-box > p:not(:last-child){
    margin-bottom: 1.7em;
}

body.about .flowchart-list > li{
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
body.about .flowchart-list > li .titles,
body.about .flowchart-list > li .text-box:not(.type_col),
body.about .flowchart-list > li .text-box.type_col > .itembox,
body.about .flowchart-list > li .text-box .innerbox{
	padding: 10px;
}
body.about .flowchart-list > li .text-box{
	font-size: 87.5%;
	background-color: #a9d4d2;
}
body.about .flowchart-list > li .text-box.arrowbox:not(.type_col),
body.about .flowchart-list > li .text-box.type_col.arrowbox > .itembox,
body.about .flowchart-list > li .text-box .innerbox{
	background-color: #ffffff;
}
body.about .flowchart-list > li .text-box.arrowbox .innerbox{
	border: 1px solid #e6e6e6;
}
body.about .flowchart-list > li .text-box:not(.type_col),
body.about .flowchart-list > li .text-box.type_col > .itembox,
body.about .flowchart-list > li .text-box .innerbox{
	display: flex;
	flex-direction: column;
}
body.about .flowchart-list > li .text-box .innerbox{
	justify-content: center;
}
body.about .flowchart-list > li .text-box.type_col{
	display: flex;
}
body.about .flowchart-list > li .text-box.type_col > .itembox,
body.about .flowchart-list > li .text-box .innerbox{
	flex: 1;
}
body.about .flowchart-list > li .text-box.type_col:not(.arrowbox) > .itembox:nth-child(even){
	background-color: #a9bad4;
}
body.about .flowchart-list > li .titles{
	margin-bottom: 0;
	color: #ffffff;
	font-size: 93.75%;
	text-align: center;
	background-color: #619ca7;
}
body.about .flowchart-list > li:nth-child(4n+2) .titles{
	background-color: #5ea89d;
}
body.about .flowchart-list > li:nth-child(4n+3) .titles{
	background-color: #61a883;
}
body.about .flowchart-list > li:nth-child(4n) .titles{
	background-color: #48c05b;
}
body.about .flowchart-list > li .arrow{
	margin-bottom: 10px;
	line-height: 0;
	text-align: center;
}
body.about .flowchart-list > li .text-box.type_col.arrowbox > .arrow{
	margin-bottom: 20px;
}
body.about .flowchart-list > li .arrow:not(:first-child){
	margin-top: 10px;
}
body.about .flowchart-list > li .text-box .innerbox > p:last-child{
	margin-bottom: 0;
}


@media print, all and (min-width: 751px) {
	
	/* PC */
    body.about #title:before{
        height: 230px;
    }
    body.about .greeting-wrapper{
        margin-bottom: 160px;
    }
    body.about .greeting-box:after{
        content: "";
        display: block;
        height: 0;
        font-size: 0;
        clear: both;
    }
    body.about .greeting-box{
        margin-top: -50px;
    }
    body.about .greeting-box .titles,
    body.about .greeting-box .text-box{
        float: left;
        width: 530px;
    }
    body.about .greeting-box .titles{
        padding-top: 25px;
    }
    body.about .greeting-box .image-box{
        float: right;
		margin-top: -25px;
        margin-right: -40px;
    }
    body.about #about-ordermade{
        position: relative;
        z-index: 1;
    }
	
    body.about .flowchart-list{
		width: 880px;
		margin-right: auto;
		margin-left: auto;
    }
                       
}

@media only screen and (max-width: 750px) {
    
	/* SP */
    body.about .greeting-box .titles{
        font-size: 4.933333vw; /* 18.5px */
        line-height: 1.6;
        position: absolute;
        top: 0;
		right: calc( 190 / 375 * 100% );
        left: 0;
    }
    body.about .greeting-box{
        margin: 0 -20px;
    }
    body.about .greeting-box .titles{
        padding: 0 15px 0 20px;
    }
    body.about .greeting-box .text-box{
        padding: 0 20px;
    }
    body.about .greeting-box .image-box{
        margin: 0 0 40px;
    }
    body.about .greeting-box .image-box .image{
        width: calc( 180 / 375 * 100% );
        margin-right: calc( 10 / 375 * 100% );
    }
    body.about .greeting-box .image-box .nametext{
        margin: calc( -20 / 375 * 100% ) calc( 20 / 375 * 100% ) 0 0;
    }
    body.about .greeting-box .line{
        display: block;
        min-width: 100%;
        margin: calc( 49 / 375 * 100% ) 0 0;
        height: 0;
        padding-top: calc( 100 / 375 * 100% );
        padding-right: 0;
        position: absolute;
        top: 0;
        bottom: auto;
        -webkit-transform-origin: right top;
        transform-origin: right top;
    }
    body.about .greeting-box .line:before,
    body.about .greeting-box .line:after{
        height: 0;
    }
    body.about .greeting-box .line:before{
        width: calc( 340 / 375 * 100% );
        padding-top: calc( 282 / 375 * 100% );
        right: calc( -45 / 375 * 100% );
        left: auto;
    }
    body.about .greeting-box .line:after{
        width: calc( 302 / 375 * 100% );
        padding-top: calc( 224 / 375 * 100% );
        left: calc( -195 / 375 * 100% );
    }
    
}