@charset "utf-8";

.pc {
display: block;
}
.tab {
display: none;
}
.sp {
display: none;
}
h3 {
font-size: 24px;
font-weight: 600;
}
.tbox .yellow {
margin: 1em 0 2em;
background: linear-gradient(transparent 50%, #ffff14 0%);
}
.point {
padding-left: 75px;
font-weight: 600;
position: relative;
}
.point:before {
content: url("../img/line/point.png");
position: absolute;
top: -8px;
left: 0;
}

#flow #step1 {
background: url("../img/line/s1arr.png") 20px bottom no-repeat;
}
#step1 .cbox-inner {
display: flex;
justify-content: center;
align-items: center;
}
#step1 .qbox,
#step1 .tbox,
#step1 .ibox {
margin: 0 auto;
}

#flow #step2 {
background: url("../img/line/s2arr.png") 20px bottom no-repeat;
}
#step2 .cbox-inner {
display: flex;
justify-content: center;
align-items: center;
}
#step2 .lbox{
position: relative;
}
#step2 ul.title {
display: flex;
margin: 0 0 1em;
}
#step2 ul.title li:first-child {
margin-right: 15%;
}
#step2 ul.title li:first-child li {
width: 100%;
list-style: disc;
margin-left: 1.5em;
}
#step2 ul.title li:last-child {
width: 40%;
}
#step2 ul.title li:last-child li {
position: relative;
padding-left: 1.5em;
margin-left: 1em;
}
#step2 ul.title li:last-child li:before {
content: "1";
position: absolute;
top: 0;
left: 0;
font-size: .7em;
}
#step2 ul.title li:last-child li:nth-of-type(2):before {
content: "2";
}
#step2 ul.title li:last-child li:nth-of-type(3):before {
content: "3";
}
#step2 ul.title li:last-child li:nth-of-type(4):before {
content: "4";
}
#step2 ul.title li:last-child li:after {
content: "";
display: block;
width: .9em;
height: .9em;
border:1px solid #000;
border-radius: 50%;
position: absolute;
top: .29em;
left: -.29em;
}
#step2 .lbox img {
position: absolute;
top: 0;
right: -2em;
}
#step2 .tbox,
#step2 .ibox {
margin: 0 auto;
}

#step3 .tbox {
text-align: center;
margin: 1em 0 0;
}
#step3 p {
width: fit-content;
width: -moz-fit-content;
margin: 1em auto 1.5em;
}

#mf2 .mf-frame {
margin: 3vw 0 0;
}
#mf2 .cbox1 {
background:url("../img/line/mf2bg.jpg");
display: flex;
justify-content: center;
align-items: center;
padding: 1em 0;
}
#mf2 .cbox1 p {
padding: 15px 0;
margin: 0 2em 0 auto;
font-size: 18px;
font-weight: 600;
line-height: 2;
border-top: 3px solid #008000;
border-bottom: 3px solid #008000;
position: relative;
}
#mf2 .cbox1 p:after {
content: "";
width: 3em;
height: 2em;
background: url("../img/line/chara.png") center center no-repeat;
background-size: contain;
position: absolute;
bottom: 1em;
right: 3.5em;
}
#mf2 .cbox1 img {
vertical-align: middle;
margin-right: 1em;
}
#mf2 .cbox2 {
display: flex;
align-items: center;
justify-content: center;
background: #008000;
color: #fff;
font-weight: 600;
}
#mf2 .cbox2 p:first-child {
margin: 0 auto 0 10em;
}
#mf2 .cbox2 p:last-child {
margin: 0 8em 0 auto;
}

#mf3 .mf-frame{
margin: 3vw 0 1vw;
}
#mf3 p {
text-align: center;
font-weight: 600;
}

@media screen and (max-width: 980px) {

.tab {
display: block;
}
#contents .mf-frame {
padding: 0 2vw;
}
#flow #step1,
#flow #step2 {
background: none;
}
#step1 .cbox-inner {
flex-direction: column;
position: relative;
}
#step1 h3.pc {
display: none;
}
#step1 .qbox {
margin: 0 auto 2vw 16vw;
}
#step1 .qbox {
display: none;
}
#step1 .tbox {
width: 53vw;
margin: 0 auto 2vw 7vw;
}
#step1 .ibox {
position: absolute;
top: 2vw;
right: 5vw;
}

#step2 .cbox-inner {
position: relative;
}
#step2 .tbox {
margin: 50vw auto 2vw;
}
#step2 .lbox {
width: 28%;
position: absolute;
top: 5vw;
right: 20vw;
}
#step2 ul.title {
display: block;
}
#step2 ul.title li:first-child ul {
margin: 0 0 3vw 0;
}
#step2 ul.title li:last-child {
width: 100%;
}
#step2 .ibox {
position: absolute;
top: 3vw;
left: 15vw;
}
#step2 .lbox img {
top: 18vw;
right: -4em;
}

#mf2 .cbox1 {
flex-direction: column;
}
#mf2 .cbox1 p,
#mf2 .cbox1 .ibox{
margin: 0 auto 3vw;
}
#mf2 .pc {
display: none;
}
#mf2 .tab {
display: block;
}
#mf2 .cbox1 img {
width: 60vw;
}
#mf2 .cbox2 {
flex-direction: column;
padding: .5em 0;
}
#mf2 .cbox2 p {
margin: 0 !important;
}
#mf2 .cbox2 p:nth-child(2) {
display: none;
}
#mf3 .mf-frame{
margin: 5vw 0 2vw;
}

}

@media screen and (max-width: 600px) {

#flow section .cbox-inner {
padding: 5vw 1vw;
}
.pc {
display: none;
}
.sp {
display: block;
}
h3 {
font-size: 5.5vw;
text-align: center;
}
.point {
padding: 16vw 0 0 0;
}
.point:before {
top: 0;
left: 1vw;
}

#step1 .qbox {
margin: 0 0 5vw;
}
#step1 .tbox {
width: 70vw;
margin: 0 auto 5vw;
}
#step1 .tbox p {
margin: 3vw 0;
text-align: center;
font-size: 4vw;
}
#step1 .ibox {
position: static;
text-align: center;
}

#step2 .cbox-inner {
display: block;
}
#step2 .tbox {
margin: 3vw;
text-align: center;
}
h3 {
font-size: 4.8vw;
}
#step2 .lbox {
width: 70vw;
position: relative;
padding: 5vw 0 0 25vw;
margin: 0 0 5vw;
text-align: left;
}
#step2 .lbox img {
top: unset;
bottom: 0;
right: 0;
}
#step2 .ibox {
position: static;
text-align: center;
}

#mf2 .cbox1 {
padding: 1em 0 0;
}
#mf2 .ibox {
text-align: center;
}
#mf2 .cbox1 img {
max-width: 90%;
margin-right: 0;
}

}