/* pointlist distance */
.howto .pointlist {
    width: 90%;
    padding: 0 5%;
}
@media only screen and (min-width:1401px){
    .howto .pointlist {
        width: calc(100% - 440px);
        padding: 0 220px;
    }
}
/* graphic-header */
.graphic-header {
    background: url(/assets/img/howto/mainbanner.jpg) center center / cover no-repeat;
}
/* howto_tab */
.howto_tab {
    margin: 80px 0px;
    justify-content: center;
}
.howto_tab .howto_btn {
    width: 270px;
    height: 56px;
    font-size: 16px;
    letter-spacing: 0.05em;
    border-radius: 30px;
    border: #ff4d3d 2px solid;
    background-color: #ff4d3d;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.howto_tab .howto_btn a {
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #ff4d3d;
    justify-content: center;
    transition: 0.3s;
}
.howto_tab .howto_btn.current a{
    background-color: #ff4d3d;
    color: #fff;
    pointer-events: none;
}
.howto_tab .howto_btn a:hover {
    transition: 0.3s;
    background-color: #ff4d3d;
    color: #fff;
}
.howto_tab .howto_btn:nth-child(1) {
    margin-right: 20px;
}
/* pointlist */
.pointlist {
    margin-bottom: 20px;
    justify-content: center;
}
.pointlist_innter {
    justify-content: center;
    flex-direction: column;
    width: 100%;
    flex-wrap: wrap;
}
@media only screen and (min-width:1101px){
    .pointlist_innter {
        width: 960px;
    }
}
.pointlist_innter li {
    width: 100%;
    margin-bottom: 60px;
    justify-content: space-between;
}
.pointlist_innter li.point02,
.write .pointlist_innter li.side {
    flex-direction: row-reverse;
}
.pointlist .point_txt {
    flex-direction: column;
    padding: 0 20px 0 10px;
}
.pointlist .point_txt img {
    width: 70px;
    height: 70px;
    margin-bottom: 24px;
}
.pointlist .point_txt h3 {
    font-size: 20px;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.8;
    color: #233a5f;
}
.pointlist .point_txt h3 span {
    font-size: 24px;
}
@media only screen and (max-width:1100px){
    .pointlist .point_txt h3 {
        font-size: 1.8vw;
    }
    .pointlist .point_txt h3 span {
        font-size: 2.1vw;
    }
}
.pointlist li:nth-child(1) .point_txt h3 span {
    color: #68bef7;
}
.pointlist li:nth-child(2) .point_txt h3 span {
    color: #ff674e;
}
.pointlist li:nth-child(3) .point_txt h3 span {
    color: #ffd54e;
}
.pointlist .point_txt p {
    margin-top: 30px;
    font-size: 14px;
}
@media only screen and (max-width:1100px){
    .pointlist .point_txt p {
        margin-top: 2.7vw;
        font-size: 1.3vw;
    }
}
.pointlist .point_img {
    width: 470px;
    height: 355px;
    border-radius: 24px;
}
.pointlist .point_img img {
    height: auto;
}
/* movie */
.movie {
    width: 100vw;
    padding: 60px 0 100px;
    background-color: #e8f7ff;
    flex-direction: column;
    margin-bottom: 20px;
}
.movie .movie_title {
    width: 300px;
    height: 80px;
    margin-bottom: 60px;
}
.movie .pv_content {
    width: 75vw;
    max-width: 960px;
    height: 42.2vw;
    max-height: 540px;
    position: relative;
    margin-bottom: 30px;
}
.movie .pv_play {
    background: url(/assets/img/howto/pv_bg.png) center center /cover no-repeat;
}
.movie .concept {
    width: calc(75vw - 100px);
    max-width: 860px;
    padding: 40px 50px;
    border-radius: 20px;
    background: #fff;
}
.movie .concept p.title {
    font-size: 18px;
    font-weight: bold;
    color: #ff4d3d;
    margin-bottom: 16px;
}
.movie .concept p {
    font-size: 15px;
    line-height: 1.5;
}
/* write part */
.write .pointlist_innter li {
    align-items: stretch;
}
.write .pointlist .point_txt {
    width: 44%;
    max-width: 420px;
    padding: 10px 0 0 0;
}
.write .pointlist .point_txt img {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
}
@media only screen and (max-width:970px){
    .write .pointlist .point_txt img {
        width: 5.1vw;
        height: 5.1vw;
        margin-bottom: 1.6vw;
    }
}
.write .pointlist .point_txt h3 {
    font-size: 24px;
    line-height: 1;
}
@media only screen and (max-width:970px){
    .write .pointlist .point_txt h3 {
        font-size: 2.5vw;
    }
}
.write .pointlist .point_txt p {
    margin-top: 0px;
    font-size: 20px;
    text-align: center;
    width: 100%;
}
@media only screen and (max-width:970px){
    .write .pointlist .point_txt p {
        font-size: 2.1vw;
    }
}
.write .pointlist .point_txt p span {
    font-size: 23px;
}
@media only screen and (max-width:970px){
    .write .pointlist .point_txt p span {
        font-size: 2.4vw;
    }
}
.write .pointlist .point_detail {
    width: 100%;
}
.write .pointlist .point_detail li {
    padding: 24px 0;
    border-radius: 20px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: 0px;
    width: auto;
    position: relative;
}
@media only screen and (max-width:970px){
    .write .pointlist .point_detail li {
        padding: 2.5vw 0;
        border-radius: 2.1vw;
    }
}
.write .pointlist .point_detail li::after {
    content:"";
    display: block;
    height: 0px;
    position: absolute;
    left: 100%;
}
.write .pointlist .front .point_detail li:nth-child(1) {
    border: #68bef7 2px solid;
    margin-top: 50px;
}
.write .pointlist .front .point_detail li:nth-child(1) span {
    color: #68bef7;
}
.write .pointlist .front .point_detail li:nth-child(1)::after {
    border-top: #68bef7 4px dotted;
    width: 21.8vw;
    max-width: 240px;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width:970px){
    .write .pointlist .front .point_detail li:nth-child(1) {
        margin-top: 4vw;
    }
}
.write .pointlist .front .point_detail li:nth-child(2) {
    border: #ff674e 2px solid;
    margin-top: 50px;
}
@media only screen and (max-width:970px){
    .write .pointlist .front .point_detail li:nth-child(2) {
        margin-top: 4vw;
    }
}
.write .pointlist .front .point_detail li:nth-child(2) span {
    color: #ff674e;
}
.write .pointlist .front .point_detail li:nth-child(2)::after {
    border-top: #ff674e 4px dotted;
    width: 15.9vw;
    max-width: 175px;
    top: 20px;
}
.write .pointlist .front .point_detail li:nth-child(3) {
    border: #ffd54e 2px solid;
    margin-top: 100px;
}
@media only screen and (max-width:970px){
    .write .pointlist .front .point_detail li:nth-child(3) {
        margin-top: 10.3vw;
    }
}
.write .pointlist .front .point_detail li:nth-child(3) span {
    color: #ffd54e;
}
.write .pointlist .front .point_detail li:nth-child(3)::after {
    border-top: #ffd54e 4px dotted;
    width: 21.8vw;
    max-width: 240px;
    top: 50%;
    transform: translateY(-50%);
}
.write .pointlist .point_img {
    width: 49%;
    max-width: 470px;
    height: auto;
}
/* side */
.write .pointlist .side .point_detail li::after {
    content:"";
    display: block;
    height: 0px;
    position: absolute;
    left: 0px;
    right: 100%;
    transform: translateX(-100%);
}
.write .pointlist .side .point_detail li:nth-child(1) {
    border: #78dbba 2px solid;
    margin-top: 50px;
}
@media only screen and (max-width:970px){
    .write .pointlist .side .point_detail li:nth-child(1) {
        margin-top: 4.1vw;
    }
}
.write .pointlist .side .point_detail li:nth-child(1) span {
    color: #78dbba;
}
.write .pointlist .side .point_detail li:nth-child(1)::after {
    border-top: #78dbba 4px dotted;
    width: 12.7vw;
    max-width: 140px;
    top: 50%;
}
.write .pointlist .side .point_detail li:nth-child(2) {
    border: #ffa0ba 2px solid;
    margin-top: 50px;
}
@media only screen and (max-width:970px){
    .write .pointlist .side .point_detail li:nth-child(2) {
        margin-top: 4.1vw;
    }
}
.write .pointlist .side .point_detail li:nth-child(2) span {
    color: #ffa0ba;
}
.write .pointlist .side .point_detail li:nth-child(2)::after {
    border-top: #ffa0ba 4px dotted;
    width: 15.9vw;
    max-width: 175px;
    top: 36px;
}
@media only screen and (max-width:970px){
    .write .pointlist .side .point_detail li:nth-child(2)::after {
        top: 2vw;
    }
}
.write .pointlist .side .point_detail li:nth-child(3) {
    border: #9aa1ff 2px solid;
    margin-top: 100px;
}
@media only screen and (max-width:970px){
    .write .pointlist .side .point_detail li:nth-child(3) {
        margin-top: 10vw;
    }
}
.write .pointlist .side .point_detail li:nth-child(3) span {
    color: #9aa1ff;
}
.write .pointlist .side .point_detail li:nth-child(3)::after {
    width: 25.2vw;
    max-width: 277px;
    height: 22.3vw;
    max-height: 227px;
    bottom: 56px;
    background: url(/assets/img/howto/dotted_special.png) center center / contain no-repeat;
}
@media only screen and (max-width:970px){
    .write .pointlist .side .point_detail li:nth-child(3)::after {
        width: 28.6vw;
        height: 23.4vw;
        bottom: 5.8vw;
    }
}
.write .movie .movie_title {
    width: 420px;
    height: 81px;
}
.movie .steps {
    width: 90%;
    padding: 0 5%;
    justify-content: center;
}
@media only screen and (min-width:1401px){
    .movie .steps {
        width: calc(100% - 440px);
        padding: 0px 220px;
    }
}
.movie .steps li {
    flex-direction: column;
}
.movie .steps li {
    width: calc(22.5vw - 12px);
    height: auto;
    margin-right: 16px;
}
.movie .steps li:nth-last-child(1) {
    margin-right: 0px;
}
@media only screen and (min-width:1101px){
    .movie .steps li {
        width: 225px;
        margin-right: 32px;
    }
}
.movie .steps li img {
    height: auto;
    margin-bottom: 30px;
}
.movie .steps h4 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #ff4d3d;
    margin-bottom: 30px;
}
.movie .steps p {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.6;
    width: 100%;
}
.movie .steps p span {
    font-size: 16px;
    font-weight: bold;
}







/* .. */