img{
    width: 100%;
}

body{
    font-family: 'Lato', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif ;  
    letter-spacing:1px;
}

a {
    text-decoration: none;
    color:#ffffff;
}

.back{
    width: 100%;
    background: #f4f4f4; 
}

.pink{
    display: flex;
    color: #e9658a;
    font-size: 18px;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 25px; 
}

h1{
    font-size: 26px;
}

.online{
    font-size:15px;
    line-height: 1.7em;

}

.point{
    display: block;
    color: #e9658a;
    margin-top: 18px;
    line-height: 1.2;
    font-size: 11px;
    
}

.point span{
    display: block;
    font-size: 30px;
    text-align: center;
}

h3{
    display: block;
    color: #e9658a;
    margin: 20px 0;
    line-height: 1.5;
}

h2{
    display: block;
    color: #e9658a;
    font-size: 30px;
    margin:70px auto 0;
    text-align: center; 
}

.howto {
    display: block;
    font-size: 12px;
    line-height: 2.5; 
}   

.subtitle{
    margin-bottom:70px ;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}  

.explain{
    display: block;
    margin-bottom: 27px;
    line-height: 1.6;
    font-size: 12px;
    font-weight:bold;
    text-align: center;
}

.img1{
    display: block;
    margin-bottom:30px;
}   

.img5{
    margin-top: 10px;
}

.mov{
    width: 85%;
}

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

.pcNone{
    display: block;
}

.spNone{
    display: none;
}

.all{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}

.header{
    width: 87%;
    margin: 70px auto 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.pink{
    margin-bottom: 10px;
    font-size: 15px;
}

.online{
    font-size:12px;  
    line-height: 1.7em;
}

h1{
    color: #e9658a;
    font-size: 18px;
    line-height: 1.7;
    text-align: center;  
}

h1 span{
    display: inline-block;
    background: linear-gradient(transparent 70%, #f4f4f4 0%);
}

.favorite{
    width: 25%;
    margin-top: 30px ;
    margin-bottom: 25px ;
    margin-left: auto;
    margin-right: auto;
}

.caption{
    margin-top: 36px;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    font-size: 12px;
}

span.line1,span.line2{
    display: block;
    width: 100%;

}

span.line1{
    margin-bottom:25px ;
}
span.line2{
    margin-top: 25px;
}

span.pc-line1,span.pc-line2{
    display: none;
}

.icon{
    margin: 0 auto;
}

.gray{
    width: 100%;
    background: #f4f4f4;  
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.border{
    font-weight: bold;
}

.white{
    width: 90%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 70px;
}

.img1{
    display: block;
    margin-bottom:30px;
    width: 75%;
}  

h2.line1{
    font-size: 24px;
    margin-top:0 ;
    line-height: 1.4em;
}

h3{
    display: block;
    color: #e9658a;
    margin-bottom:20px;
    line-height: 1.5;
    font-size: 15px;
}

.explain{
    margin-bottom: 25px;
}
.point span::after{
    content: '';
    display: block;
    background: #e9658a;
    height: 4px;
    width: 35px;
    margin:0 auto 0;
}
.howto_gif{
    margin: 0 auto 70px;
    width: 65%;
}

.howto_gif2{
    margin: 0 auto 70px;
    width: 100%;
}

.howto_gif2 p{
    text-align: center;
    font-size: 10px;

}

h4{
    font-size: 15px;
    
}

p.pointapp{
    font-size:12px ;
}

.whiteline{
    width: 82.5%;
    height: 3px;
    background: white;
    margin: 10px;
}

.fotter{
    width: 100%;
    background: #c6c6c6;
    color: #ffffff;
}

.app{
    border: solid 3px #ffffff;
    width: 82.4%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 22px;
    box-sizing: border-box;
    margin: 70px auto 30px ;
    line-height: 1.5;
    font-size: 12px;
    text-align: center;
}

.appbtn{
    width: 80%;
    display: flex;
    align-items: center; 
    padding-top: 22px;
    box-sizing: content-box;
    justify-content: space-between;   
}

.app1{
    width: 44%;
}

.linemail{
    width: 82.4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin:0 auto 30px;
    font-size: 12px;
    line-height: 1.3;
}

.line{
    border: solid 3px #ffffff;
    width: 45%;
    height: 95px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mail{
    border: solid 3px #ffffff;
    width: 45%;
    height: 95px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
}

.icon1{
    display: block;
    width:23%;
    margin: 0 auto 5px;
    line-height: 1.4;
}

    
.icon2 {
    display: block;
    width: 18%;
    margin: 0 auto 5px;
    line-height: 1.4;
}

.member{
    border: solid 3px #ffffff;
    width: 82.4%;
    margin: 0 auto;
    padding: 22px;
    box-sizing: border-box;
}

.subtitle{
    margin-top: 20px; 
    font-size: 14px;
}

.subtitle2{
    margin-top: 20px; 
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.howto2{
    margin: 0px auto 30px;
}

dl{
    display: flex;
    width: 100%;
    font-size: 12px;
    line-height: 1.5; 
    font-weight: bold;
    /* justify-content: center; */
    text-align: left;
    padding-left: 65px;
    box-sizing: border-box;
}

.dl{
    margin-bottom:70px;
}

dt{
    color:#e9658a ;
    justify-content: center; 
}

dd{
    margin-left: 11px;
}

.back2{
    background:#c6c6c6 ;
    width: 100%;
    padding:0px 0 40px;
}

.entry{
    font-size: 15px;
    text-align: center;
}

.copy{
    color: #ffffff;
    text-align: center;
    margin-top: 51px;
    margin-bottom: 45px;
    font-size: 10px;
}
}

@media screen and (min-width: 768px) {

.pcNone{
    display: none;
}

.spNone{
    display: block;
}
    .header {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin: 100px auto;
        width: 1000px;
    } 

    .header2    {
        width: 950px;
        display: flex;
        justify-content: space-around;
        padding: 70px 0;
    }

    .header3    {
        width: 50%;
        margin:0 auto;
    }

    h1  {
        color: #e9658a;
        font-size: 26px;
        line-height: 1.5;
        text-align: center;  
}

    h1 span{
        display: inline-block;
        background: linear-gradient(transparent 70%, #f4f4f4 0%);}

    .favorite   {
        width: 130px;
        margin: 42px auto 0;
    }
    .img1{
    width: 75%;    
    }

    .caption    {
        width: 50%;
        line-height: 1.5;
        font-weight: bold;
        text-align: center;
        font-size: 18px;
        margin: auto;
    }

    h2        {
        margin-top: 100px auto 0;
        font-size: 26px;
    }

    h2 .howto {
        display: block;
        font-size: 11px;
        line-height: 2.5; 
    }  

    h2{
        margin-top: 100px auto 0;
        font-size: 28px;

    }


    
    p .subtitle{
        font-size: 14px;
        
    }
    span.pc-line1,span.pc-line2{
        display: block;
        width: 100%;

    }
    span.pc-line1{
        /* margin: 100px 0 70px;  */
    }
    span.pc-line2{
        position: relative;      
    }

    span.line1,span.line2{
        display: none;
    }

    .gray   {
        width: 100%;
        background: #f4f4f4;  
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .pcwhite   {
        width: 1280px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 1000px;
        margin-bottom: 90px;
    }

    .point span::after{
        content: '';
        display: block;
        background: #e9658a;
        height: 4px;
        width: 26px;
        margin:0 auto 0px;
    }

    .pcwhite div.white{
        width: 310px;
        background: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 38px;
    }
    .pcwhite div.white:nth-child(1){
        margin-right: 35px;
    }
    .pcwhite div.white:nth-child(2){
        margin-right: 35px;
    }
    .pcwhite div.white:nth-child(4){
        margin-right: 35px;
    }

    .subtitle2{
        margin:20px auto 70px ;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }

    h2{
        display: block;
        color: #e9658a;
        font-size: 30px;
        margin:100px auto 0;
        text-align: center; 
        line-height: 1.3em;
    }

    .howto_gif{
        margin: 0 auto 100px;
        width: 20%;
    }


    .howto_gif2{
        margin: 0 auto 100px;
        width: 18%;
    }

    .howto_gif2 p{
        text-align: center;
        font-size: 12px;

    }

    .back2{
        background:#c6c6c6 ;
        width: 100%;
        padding:100px 0 40px;
    }

    .fotter {
        width: 1280px;
        background: #c6c6c6;
        color: #ffffff;
        font-size: 16px;
        margin: 0 auto;
        }

    .pcfotter   {
        width: 1000px;
        display: flex;
        justify-content: space-between;
        margin: 0 auto 40px;
        }

    .app1   {
        width: 130px;
    }
    .icon1   {
        width: 60px;
    }

    .app   {
    display: flex;
    flex-direction: column;
    border: solid 3px #ffffff;
    width:  400px;
    height: 250px;
    box-sizing: border-box;
    line-height: 1.5;
    font-size: 12px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size:16px;
}

    h4{
        font-size: 20px;
        margin-top: 10px;
    }

    .whiteline{
        width: 82.5%;
        height: 3px;
        background: white;
        margin: 10px 10px 10px 10px;
        }
    
    .appbtn {
        width: 320px;
        display: flex;
        align-items: center; 
        box-sizing: content-box;
        justify-content: space-between;
        margin-top: 30px;
    }
    
    .app1   {
        width: 44%;
    }
    
    .linemail {
        width: 550px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        font-size: 16px;
        line-height: 1.3;  
    }
    
    .line{
        border: solid 3px #ffffff;
        width: 250px;
        height:250px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .mail   {
        border: solid 3px #ffffff;
        width: 250px;
        height:250px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
    }
    
    .icon1 {
        display: block;
        width: 25%;
        margin: 7px auto;
        line-height: 1.4;
    }
    
    .icon2 {
        display: block;
        width: 18%;
        margin: 7px auto;
        line-height: 1.4;
    }

    .member {
        border: solid 3px #ffffff;
        width: 500px;
        height: 100px;
        margin: 0 auto;
        padding: 40px;
        box-sizing: border-box;
    }
    
    .subtitle{
        margin-top: 20px;        
    }

    .dl2{
        margin-bottom:100px ;
        font-size: 12px;
        justify-content: center;
        text-align: center;
        font-weight: bold;
        line-height: 1.5;     
    }

    .pc_gif{
        width: 40%;
        margin: 0 auto 20px;
    }
    
    dt {
        color:#e9658a ;
        justify-content: center;        
    }
    
    dd{
        margin-left: 11px;
    }
    
    .entry {  
        font-size: 16px;
        text-align: center;
    }
    
    .copy{       
        color: #ffffff;
        text-align: center;
        margin-top: 51px;
        margin-bottom: 45px;
        font-size: 10px;
    }
}