@charset "UTF-8";

.btn_assessment {padding: 40px 0 80px;}
#content .o_btn{position:relative;display:inline-block;}
#content .o_btn a{font-size:30px;font-weight: 700; color:#fff;padding:20px 60px;background:#ea7035;border:2px solid #000;box-sizing:border-box;display:inline-block;border-radius:18px;position:relative;width:100%;transition:.3s;}
#content .o_btn a::after{content:"";width:10px;height:10px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg) translateY(-48%);position:absolute;top:48%;right:25px;border-radius:0;transition:0.3s ease-in-out;}
.contact_btn {margin: 0 0 15px;}

@media screen and (min-width: 768px) {
#content .o_btn a:hover{background:#39b54a;}
}
@media screen and (max-width: 767px) {
.btn_assessment {width: 90vw;margin: auto; padding: 5% 0 10%;}
.o_btn{width:100%;}
#content .o_btn a{font-size:4vw; }
#roku .btn_assessment{flex-wrap:wrap;gap:10px;}
#roku .btn_assessment.o_btn{width:calc(50% - 5px);}
.contact_btn {width: 90vw; margin: 0 0 15px;}
}
@media screen and (max-width: 374px) {
#roku .btn_assessment.o_btn{width:100%;}
}

.sub_title {margin: 0 0 40px;}
.sub_title h3 {font-size: 40px;font-weight: 900;margin: 0 0 10px;}
.sub_title h3 span {font-size: 70px;color: #db7841;margin: 0 .1em;}
.sub_title p {font-size: 20px;font-weight: 900;color: #db7841;}

@media screen and (max-width: 767px) {
.sub_title {margin: 0 0 5vw;}
.sub_title h3 {font-size: 4.4vw;font-weight: 900;margin: 0 0 10px;}
.sub_title h3 span {font-size: 8vw;color: #db7841;margin: 0 .1em;}
.sub_title p {font-size: 3.4vw;font-weight: 900;color: #db7841;}
}

.flow {padding: 80px 0 50px;background: #f0e6d2;}
.flow_block {}
.flow ul {width: 960px;margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.flow ul li {width:100%;margin:0 0 60px; position: relative;
background: #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
/*border: 2px solid #000;
box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.15) ;*/
}
.flow ul li:before {
content: '';/*何も入れない*/
display: inline-block;
width: 100px;/*画像の幅*/
height: 100px;/*画像の高さ*/
background-size: contain;
vertical-align: middle;
position: absolute;
top: 50%;
left: -50px;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.flow ul li:nth-child(1):before {
background-image: url("images/step01.png");
background-image: image-set(url("images/step01.png") 1x, url("images/step01@2x.png") 2x);
background-image: -webkit-image-set(url("images/step01.png") 1x, url("images/step01@2x.png") 2x);
}
.flow ul li:nth-child(2):before {
background-image: url("images/step02.png");
background-image: image-set(url("images/step02.png") 1x, url("images/step02@2x.png") 2x);
background-image: -webkit-image-set(url("images/step02.png") 1x, url("images/step02@2x.png") 2x);
}
.flow ul li:nth-child(3):before {
background-image: url("images/step03.png");
background-image: image-set(url("images/step03.png") 1x, url("images/step03@2x.png") 2x);
background-image: -webkit-image-set(url("images/step03.png") 1x, url("images/step03@2x.png") 2x);
}
.flow ul li:nth-child(4):before {
background-image: url("images/step04.png");
background-image: image-set(url("images/step04.png") 1x, url("images/step04@2x.png") 2x);
background-image: -webkit-image-set(url("images/step04.png") 1x, url("images/step04@2x.png") 2x);
}
.flow ul li:nth-child(5):before {
background-image: url("images/step05.png");
background-image: image-set(url("images/step05.png") 1x, url("images/step05@2x.png") 2x);
background-image: -webkit-image-set(url("images/step05.png") 1x, url("images/step05@2x.png") 2x);
}
.flow ul li:nth-child(6):before {
background-image: url("images/step06.png");
background-image: image-set(url("images/step06.png") 1x, url("images/step06@2x.png") 2x);
background-image: -webkit-image-set(url("images/step06.png") 1x, url("images/step06@2x.png") 2x);
}

.flow ul li:after{
content: '';
width: 16px;
height: 16px;
border: 0;
border-top: none;
border-right: none;
border-left: solid 5px #00a73c;
border-bottom: solid 5px #00a73c;
position: absolute;
top:inherit;
right:inherit;
left: 50%;
bottom: -40px;
transform: translateX(-50%)rotate(-45deg);
-webkit- transform: translateX(-50%)rotate(-45deg);

margin: auto;
}
.flow ul li:last-child {margin: 0;}
.flow ul li:last-child:after{
content: inherit;
width: inherit;
height: inherit;
border: inherit;
border-top:inherit;
border-right:inherit;
transform: inherit;
position:inherit;
top: inherit;
right:inherit;
bottom:inherit;
margin: inherit;
}
.flow ul li .flow_block {padding: 60px;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.flow ul li .flow_block .flow_icon {width: 200px; margin: 0 40px 0 0;}
.flow ul li .flow_block .flow_icon img{height: 200px!important;width: auto!important;margin: auto;}
.flow ul li .flow_block dl {width:600px; text-align: left;

position: absolute;
top: 50%;
left: 300px;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.flow ul li .flow_block dl dt {font-size: 30px;line-height: 1.4; color: #db7841;margin: 0 0 20px;font-weight: 900;}
.flow ul li .flow_block dl dd {}
.flow ul li .flow_block dl dd p{font-size: 18px;line-height: 1.8;font-weight: 700;}
@media screen and (max-width: 1060px) {
.flow {padding: 5% 0;background: #f0e6d2;}
.flow_block {}
.flow ul {width: 80%;margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.flow ul li {width:100%;margin:0 0 10%; position: relative;
background: #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
/*border: 2px solid #000;
box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.15) ;*/
}
.flow ul li:before {
content: '';/*何も入れない*/
display: inline-block;
width: 80px;/*画像の幅*/
height: 80px;/*画像の高さ*/
background-size: contain;
vertical-align: middle;
position: absolute;
top: 50%;
left: -40px;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.flow ul li:after{
content: '';
width: 16px;
height: 16px;
border: 0;
border-top: none;
border-right: none;
border-left: solid 5px #00a73c;
border-bottom: solid 5px #00a73c;
position: absolute;
top:inherit;
right:inherit;
left: 50%;
bottom: -4.5vw;
transform: translateX(-50%)rotate(-45deg);
-webkit- transform: translateX(-50%)rotate(-45deg);
margin: auto;
}
.flow ul li:last-child {margin: 0;}
.flow ul li:last-child:after{
content: inherit;
width: inherit;
height: inherit;
border: inherit;
border-top:inherit;
border-right:inherit;
transform: inherit;
position:inherit;
top: inherit;
right:inherit;
bottom:inherit;
margin: inherit;
}
.flow ul li .flow_block {padding: 5%;}
.flow ul li .flow_block .flow_icon {width: 25%; margin: 0;}
.flow ul li .flow_block .flow_icon img{height: auto!important;width: 100%!important;margin: auto;}
.flow ul li .flow_block dl {
width:65%; text-align: left;
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.flow ul li .flow_block dl dt {font-size: 2.4vw;color: #db7841;margin: 0 0 20px;}
.flow ul li .flow_block dl dd {}
.flow ul li .flow_block dl dd p {font-size: 1.6vw;line-height: 1.6;}
}
@media screen and (max-width: 767px) {
.flow {padding: 10% 0 5%;background: #f0e6d2;}
.flow_block {}
.flow ul {width: 80%;margin:0 auto 2.5vw;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.flow ul li {width:100%;margin:0 0 15%; position: relative;
background: #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
/*border: 2px solid #000;
box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.15) ;*/
}
.flow ul li:before {
content: '';/*何も入れない*/
display: inline-block;
width: 16vw;/*画像の幅*/
height: 16vw;/*画像の高さ*/
background-size: contain;
vertical-align: middle;
position: absolute;
top:30%;
left: -8vw;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.flow ul li:after{
content: '';
width: 16px;
height: 16px;
border: 0;
border-top: none;
border-right: none;
border-left: solid 5px #00a73c;
border-bottom: solid 5px #00a73c;
position: absolute;
top:inherit;
right:inherit;
left: 50%;
bottom: -7.5vw;
transform: translateX(-50%)rotate(-45deg);
-webkit- transform: translateX(-50%)rotate(-45deg);
margin: auto;
}
.flow ul li:last-child {margin: 0;}
.flow ul li:last-child:after{
content: inherit;
width: inherit;
height: inherit;
border: inherit;
border-top:inherit;
border-right:inherit;
transform: inherit;
position:inherit;
top: inherit;
right:inherit;
bottom:inherit;
margin: inherit;
}
.flow ul li .flow_block {padding: 20px;}
.flow ul li .flow_block .flow_icon {width: 60%; margin: 0 auto 10px;}
.flow ul li .flow_block .flow_icon img{height: auto!important;width: 100%!important;margin: auto;}
.flow ul li .flow_block dl {
width:100%; text-align: left;
position: inherit;
top: inherit;
left: inherit;
transform: inherit;
-webkit- transform:inherit;
}
.flow ul li .flow_block dl dt {font-size: 4vw;color: #db7841;margin: 0 0 2.5vw;}
.flow ul li .flow_block dl dd {}
.flow ul li .flow_block dl dd p {font-size: 3vw;line-height: 1.6;}
}
.follow_back {
border-radius: 50px 50px 0px 0px;
margin-top: -50px;
padding: 80px 0;
background-color: #f2f2f2;
background-image: linear-gradient(90deg, #e6e6e6 1px, transparent 1px), linear-gradient(#e6e6e6 1px, transparent 1px);
background-position: -1px -1px;
background-size: 15px 15px;
}
.follow {width: 1000px;margin: auto;}
.follow ul {}
.follow ul li {
border-radius: 40px;
width: 100%;
border: 2px solid #000;
box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.15) ;
background: #fff;
margin: 0 0 50px;
}
.follow ul li:last-child {margin: 0;}
.follow ul li .follow_block {padding: 50px;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
vertical-align: middle;
align-items: center;
}
.follow ul li:nth-child(odd) .follow_block{
  flex-direction: row-reverse;
}
.follow ul li .follow_pic{width: 48%;display: inline-block;margin-left: 4%;}
.follow ul li:nth-child(odd) .follow_pic {margin-right: 4%;margin-left: 0;}
.follow ul li .follow_pic img {width: 100%;height: auto;}
.follow ul li .follow_text {width: 48%;display: inline-block;position: relative;}
.follow ul li .follow_text dl {text-align: left;}
.follow ul li .follow_text dl dt {font-size: 32px;line-height: 1.6;font-weight: 900;margin: 0 0 40px;}
.follow ul li .follow_text dl dt span {color: #ea7035;}
.follow ul li .follow_text dl dd {}
.follow ul li .follow_text dl dd p {font-size: 18px;line-height: 1.8;font-weight: 700; font-weight: normal;}

@media screen and (max-width: 767px) {
.follow_back {border-radius:20px 20px 0px 0px;margin-top:-20px;padding:10% 0;background-color:#f2f2f2;background-image:linear-gradient(90deg, #e6e6e6 1px, transparent 1px), linear-gradient(#e6e6e6 1px, transparent 1px);background-position:-1px -1px;background-size:15px 15px;}
.follow {width: 80%;margin: auto;}
.follow ul li {border-radius: 20px;width: 100%;border: 2px solid #000;box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.15) ;background: #fff;margin: 0 0 10%;}
.follow ul li:last-child {margin: 0;}
.follow ul li .follow_block {padding: 10%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;vertical-align: middle;align-items: center;}
.follow ul li:nth-child(odd) .follow_block{flex-direction:inherit;}
.follow ul li .follow_pic{width:100%;display: inline-block;margin-left: 0;margin: auto;}
.follow ul li:nth-child(odd) .follow_pic {margin-right: 0;margin-left: 0;}
.follow ul li .follow_pic img {width: 100%;height: auto;}
.follow ul li .follow_text {width: 100%;display: inline-block;position: relative;margin: 0 auto 5%;}
.follow ul li .follow_text dl {text-align: left;}
.follow ul li .follow_text dl dt {font-size:4vw;line-height: 1.6;font-weight: 900;margin: 0 0 5%;}
.follow ul li .follow_text dl dt span {color: #ea7035;}
.follow ul li .follow_text dl dd {}
.follow ul li .follow_text dl dd p {font-size: 3vw;line-height: 1.8;font-weight: 700; font-weight: normal;}
}