@charset "UTF-8";

/* flow
----------------------------------------------------------- */

.intro {
	text-align: center;
	line-height:2em;
	letter-spacing: 0.05em;
	margin-bottom: 80px;
}
.yellow-under {
	display: inline;
	padding:0;
	}
.content-box {
    width: 358px;
    padding: 35px 30px;
    border: solid 3px #80c97b;
    position: relative;
}
.content-box::after {
    content:"";
	display:block;
	background:url("../images_renewal/flow/arrow-flow.png");
	background-size: contain;
	background-repeat: no-repeat;
	width:21px;
	height:35px;
	position: absolute;
   	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	right:-37px;
}
.content-box:nth-child(3)::after,.content-box:nth-child(6)::after {
    display: none;
}
.content-box:first-child,.content-box:nth-child(2),.content-box:nth-child(3) {
    margin-bottom: 40px;
}
.content-box:nth-child(4),.content-box:nth-child(5),.content-box:last-child {
    margin-bottom: 100px;
}
.content-box:first-child,.content-box:nth-child(2),.content-box:nth-child(4),.content-box:nth-child(5) {
    margin-right: 43px;
}
.content-box:first-child img {
    width:70px;
	height:auto;
}
.content-box:nth-child(2) img {
    width: 100px;
    padding-top: 17px;
    height: auto;
}
.content-box:nth-child(3) img {
    width:84px;
	height:auto;
	padding-top: 17px;
}
.content-box:nth-child(4) img {
    width: 120px;
    padding-top: 8px;
    height: auto;
}
.content-box:nth-child(5) img {
    width:70px;
	height:auto;
    padding-top: 7px;
}
.content-box:nth-child(6) img {
    width:120px;
	height:auto;
    padding-top: 17px;
}
.icon-img {
    margin-bottom: 20px;
    height: 114px;
}
.flow-number {
    color: #80c97b;
    text-align: center;
    font-size: 36px;
    margin-bottom: 0.5em;
}
.content-title {
    font-size: 18px;
}

/**************************************************************************

 　　768px以下に適用されるCSS（スマートフォン）

**************************************************************************/

@media screen and (max-width: 768px) {
	
/* メインビジュアル
----------------------------------------------------------- */
.intro {
    text-align: left;
	line-height: 1.8em;
    margin-bottom: 8vw;
}
.content-box {
    width: 80vw;
    padding: 8vw 5vw 5vw 8vw;
    border: solid 1vw #80c97b;
    position: relative;
    border-radius: 6vw;
}
.content-box::after {
    width: 10vw;
    height: 8vw;
    position: absolute;
    top: inherit;
    left: 35vw;
    bottom: -17vw;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    rotate: 90deg;
}
.content-box:nth-child(3)::after {
    display: block;
}
.content-box:first-child,.content-box:nth-child(2),.content-box:nth-child(3),.content-box:nth-child(4),.content-box:nth-child(5),.content-box:last-child {
    margin: 0 auto 10vw auto;
}
.flow-number {
    color: #80c97b;
    text-align: left;
    font-size: 8vw;
    margin-bottom: 0.5em;
}
.content-title {
    text-align: left;
}
.icon-img {
    height: auto;
}
.content-box img {
    position: absolute;
	}
.content-box:first-child img {
    width: auto;
    height: 16vw;
    top: 7vw;
    right: 15vw;
}
.content-box:nth-child(2) img {
    width: auto;
    height: 11vw;
    padding-top: 0;
    top: 20px;
    right: 11vw;
}
.content-box:nth-child(3) img {
    width: 12vw;
    right: 13vw;
    top: 5vw;
    height: auto;
    padding-top: 0;
}
.content-box:nth-child(4) img {
    width: 17vw;
    padding-top: 0;
    height: auto;
    top: 9vw;
    right: 10vw;
}
.content-box:nth-child(5) img {
    width: 11vw;
    height: auto;
    padding-top: 0;
    top: 8vw;
    right: 12vw;
}
.content-box:nth-child(6) img {
    width: 20vw;
    height: auto;
    padding-top: 0;
    top: 9vw;
    right: 7vw;
}
.content-title {
    line-height: 1.5em;
    font-size: 4.4vw;
    margin-bottom: -4vw;
}	
	
	
	
	
}