@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Lilita+One&family=Potta+One&family=Rampart+One&family=RocknRoll+One&family=Sixtyfour+Convergence&family=Zen+Kurenaido&family=Zen+Maru+Gothic&display=swap');

html {
    background-color:#fcf9f2 ;
    width: 100%;
}

body {
    width: 1100px;
    margin: auto;
}

.under {
    position: relative;
    z-index: 1;
}

.under:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 15px;
    background: rgba(255,0,0,70%) ;
    z-index: -1;
    transition: all 0.8s;
}

.under.isActive:after {
    width: 100%;
  }

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

h1 {
    font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 50px;
    text-align: center;
}

h2 {
    font-family: "RocknRoll One", sans-serif;
    font-weight: 400;
    font-style: normal;
      font-size: 40px;
   
}

p{
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    font-size: 30px
}

li {
   font-family:"kousagi Maru" , sans-serif; 
   font-weight: 500;
   font-style: normal;
   line-height: 150%;
   font-size:30px;
}


 

#mainvisual-img {
    position: relative;
    width: 1200px;
    left: 50%;
    margin-left: -600px;
}
#anxiety {
    padding: 80px 80px 0px 80px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background-image: url(img/Vector\ 1.png);
    background-repeat: no-repeat;
    background-position: top center;
}

#anxiety-ul {
    padding-bottom: 30px;
    margin: auto;
    font-size: 30px;
    list-style-position:inside;
    list-style-image: url(img/Vector\ 4.png);
    background-image: url(img/Group\ 22.png);
    background-repeat: no-repeat;
    background-position:center ;
    background-size: 30%;
}

#anxiety-li {
    margin: 50px;
}

#anxiety-ul > span {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}

/*耳痛い*/
#ear-pain{
    background-color:rgba(236, 156, 23, 70%);
    background: linear-gradient(#fcf9f2,rgba(236, 156, 23, 70%));
}

#ear-pain > h1 {
    text-align: left;
    margin-left: 17%;
}

#ear-pain > p {
    width: 80%;
    margin: auto;
    text-align: left;
    font-size: 30px;
}

#ear-pain > div {
    padding: 50px;
    font-size: 30px;
    background-image: url(img/？.png);
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}

/*案件担当なら*/
#recruit {
   margin-top:0;
   font-size: 30px;
   
}


#recruit-title {
    padding: 30px;
    text-align: center;
    background-image: url(img/Group\ 24.png);
    background-repeat: no-repeat;
    background-position:center ;
}

#recruit-title > p {
    width: 80%;
    margin:  auto;
    text-align: left;
}

#recruit-box {
    text-align: center;
    background-color:rgba(236, 156, 23, 70%);

    
}

#recruit-box > p {
    padding-top: 20px;
    text-align: left;
    width: 80%;
    margin: auto;
}

/*共通点*/
#common {
    text-align: left;
    width: 80%;
    margin: auto ;
}

.common-pc {
    font-size: 35px;
    font-weight: bold;
}




/*Webマーケティングとは*/
#what-web {
    padding-top: 50px;
    background-image: url(img/Ellipse\ 7.png);
    background-position: left top;
    background-repeat: no-repeat;
}

#what-web > h2 {
    padding-left:30px;
}
#what-web > p {
    padding: 100px;
    background-image: url(img/22549323.png);
    background-position: right ;
    background-repeat: no-repeat;
    background-size: 50%;
}

/*考えてみる*/
#thinking {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.think {
    font-size: 20px;
    font-weight: bold;
    color:rgba(236, 156, 23);
    margin-left:50px;
    padding: 50px 5px;
    border:solid, 3px, rgba(236, 156, 23, 70%);
    border-radius: 50px;
    text-align: center;
    background-color: #fff;
    box-shadow: 2px 1px 2px gray;
    z-index: 11;

    font-family: "Zen Kurenaido", serif;
    font-weight: 400;
    font-style: normal;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}

.think.ready {
    opacity: 1;
    transform: translateY(0px);
 }


.t-1{
    position: relative;
    right: 100px;
}

.t-2 {
    position: relative;
    left: 80px;
    top: -50px;
}

.t-3 {
    position: relative;
    top: -80px;
    right: 30px;
}

#thinking-img {
    position: relative;
    z-index: 10;
    
}

#clear-log {
    padding: 10px 0 30px 0;
    background-image: url(img/30873598_m.jpg);
    background-repeat: no-repeat;
    background-size:cover;

}

#clear-log > h2 {
    padding-top: 80px;
    padding-bottom: 50px;
    padding-left: 30px;
    background-image: url(img/Ellipse\ 7.png);
    background-repeat: no-repeat;
    position: top;
}

#clear-log > p {
    width: 80%;
    margin: auto;
}

#clear-log > ul{
    width: 80%;
    margin: auto;
    background-color: #fff;
    padding: 50px 50px 50px 100px;
}

.clear-log-li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}

.clear-log-li.ready {
    opacity: 1;
    transform: translateY(0px);

}


/*一つだけ提案*/

#suggestion > img {
    width: 30%;
    display: block;
    margin: auto;
}

#suggestion > p {
    text-align: center;
    width: 90%;
    font-size: 30px;
    font-weight: bold;
    margin: auto;
}

#suggestion-all {
    display: flex;
    background-image: url(img/Rectangle\ 32.png);
    background-repeat: no-repeat;
    background-position: bottom left;

}

.sug-co {
    margin:10px ;
}

.sug-1 {
    border: solid 15px rgba(236, 156, 23, 70%);
    height: 100%;
    margin:0 0 0 30px;
}
.sug-1 > img {
    height: 800px;
}

.sug-2 {
    font-size: 30px;
}

.sug-2 > p {
    margin: 10px;
}


/*いざ実践*/
#practice-p {
    background-image: url(img/30814692_m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px;
}

#practice-p > p {
    font-size: 30px;
    font-weight: bold;
    text-align: center;

}

.about-box {
    padding:30px;
    background-color: #003869;
    font-size: 30px;
    color: #fff;
}

/*この講座で学べること*/
#study-1, #study-2{
    display: flex;
}

.study-box {
    flex-wrap: wrap;
    margin: 10px auto;
    width: 200px;
    height: 300px;
    box-shadow: 1px 3px 5px gray;
    border-radius: 40px;
    background-color: #fff;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}

.study-box.ready{
    opacity: 1;
    transform: translateY(0px);
  }

.study-box > h1 {
    position: relative;
    top: -50px;
    right: 60px;
    color: rgba(236, 156, 23, 70%);
    font-size: 50px;
}

.study-box > p {
    font-size: 20px;
    position: relative;
    top: -50px;
    left: 20px;
    font-weight: bold;
}

/*この講座の特徴*/
.point-box {
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}

.point-o {
    width: 50%;
    margin: auto;
    height: auto;
    background-image: url(img/Ellipse\ 9.png);
    background-position: top;
    background-repeat: no-repeat;
    padding: 50px;
    font-weight: bold;
    background-color: #fff;
    border-radius: 50px;
    text-align: center;
}

.point-y {
    width: 50%;
    height: auto;
    background-image: url(img/Ellipse\ 8.png);
    background-position: top;
    background-repeat: no-repeat;
    padding: 50px;
    font-size: 30px;
    font-weight: bold;
    background-color: #fff;
    border-radius: 50px;
    text-align: center;

}

.point-p {
    text-align: left;
    font-size: 25px;
}

/*この講座を学ぶツール*/
.tools {
    background-color: rgba(236, 156, 23, 70%);
    padding: 20px;

}

.tool {
    display: flex;
    margin: 20px;
    background-color: #fff;
    padding: 20px;
    font-size: 30px;

    opacity: 0;
    transform: translateY(20px);
    transition: all 2s cubic-bezier(0,1.2,1.0,1.0);

}

.tool.ready {
    opacity: 1;
    transform: translateY(0px);

}

/*卒業後のアナタ*/
#graduation > h1 {
    padding-top: 120px;
    background-image: url(img/229636801.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto;
}

.graduation-c {
    display: flex;
    justify-content: space-around;

}

.gra-item-y {
    background-image: url(img/Ellipse\ 12.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 30%;
    text-align:center ;
    padding-top: 50px;
}

.gra-item-y > p {
    text-align: left;
    width: 70%;
    margin: auto;
    font-size: 27px;

}

.gra-item-p {
    background-image: url(img/Ellipse\ 13.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 30%;
    text-align: center;
    font-size: 20px;
    padding-top: 50px;
}

.gra-item-p > p {
    text-align: left;
    width: 70%;
    margin: auto;
    font-size: 27px;

}


/*説明会へ*/
#session {
    background-image: url(img/22116436_m.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#session > h1 {
    text-align: left;
}

#session > p {
    width: 70%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 100px;
    font-size: 30px;
}

/*説明会までの流れ*/
#session-flow > div {
    display: flex;
    justify-content: center;
    position: relative;

    
}


.session-step1 {
    position: relative;
}

.session-step1 > span > h1 {
    position: absolute;
    left: 50px;
}

.session-step1 > span > p {
    position: absolute;
    top: 100px;
    left: 50px;
    font-size: 50px;
}

.session-step1 > span > a {
    position: absolute;
    top: 250px;
    left: 130px;
}

.session-step2  > span > h1 {
    position: absolute;
    right: 50%;
}

.session-step2  > span > p {
    position: absolute;
    top: 100px;
    right: 100px;
    font-size: 50px;
}


#line {
    margin: 100px auto;
}

#line > div {
    width: 100%;
    text-align: center;
}


/*少しだけお見せします*/
#movie > h2{
    padding: 200px 250px;
    background-image: url(img/22899775\ 1.png);
    background-repeat: no-repeat;
    background-position: left;
}

/*Q&A*/
#QandA > div {
    margin: 20px;
    text-align: center;
    border: solid ;
}

.question::before{
    content: "Q.";
    color: #003869;
    font-size: 25px;
}

.question::after {
    content: url(img/Line\ 3.png);
}

.question {
    font-size: 30px;
    color: #003869;

}

.anser::before{
    content: "A.";
    color: black;
    font-size: 30px;
}

.anser {
    font-size: 30px;
    text-align: left;
    width: 90%;
    margin: auto;

}


/*プロフィール*/

#profile-top {
    display: flex;
    justify-content: center;
}

#profile-top > img {
    border: solid #000;
    border-radius: 50%;
    margin-left: 30px ;

}

#profile-top > p {
    padding: 40px 20px;
    background-color: #fff;
    width: 650px;
    height: 250px;
    text-align: left;
    font-size: 30px;
    position: relative;
    top: 12vw;
    right:60px;
    box-shadow: 3px 4px 3px #003869;
    border-radius: 20px;
}

#profile-btm {
    position: relative;
    width: 90%;
    margin: 150px auto;
    padding: 10px 10px;
    text-align: left;
    font-size: 25px;
    font-weight: bold;
    align-content: flex-start;
    background-color:#fff ;
    border:double 20px #deba65;
    border-radius: 20px;
}

#profile-btm > a {
    padding: 20px 0;
    position: absolute;
    right: 255px;
}

/*最後に*/
#final {
    text-align: left;
    width: 80%;
    margin: auto;
    padding: 10px;
    background-image: url(img/489848\ 1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

#final > h2 {
    position: relative;
    color: #000;
    text-shadow: 1px 1px #fff;
    top:100px;
}

#final > p {
    padding-top: 200px;
    padding-bottom: 150px;
}

}

/*js*/

.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.fadeIn {
    opacity: 0;
    transition: all 1s;
}

.fadeInAnime {
    opacity: 1;
    transform: translate(0);
}

/*sp用*/
@media screen and (max-width:767px){
    body {
        width: 767px;
        margin: 0;
    }

    h1 {
        font-family: "RocknRoll One", sans-serif;
      font-weight: 400;
      font-style: normal;
        font-size: 30px;
        text-align: center;
    }
    
    h2 {
        font-family: "RocknRoll One", sans-serif;
        font-weight: 400;
        font-style: normal;
          font-size: 25px;
       
    }
    
    p{
        font-family: "Kosugi Maru", sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 150%;
        font-size: 20px
    }
    
    li {
       font-family:"kousagi Maru" , sans-serif; 
       font-weight: 500;
       font-style: normal;
       line-height: 150%;
       font-size:20px;
    }
    
  
    #mainvisual-img {
        width: 60%;
        position: relative;
        left: 50%;
        margin-left: -50%;
    }
    /*このままだと副業*/
    #anxiety {
        padding: 20px 0 20px 0;
        text-align: center;
        color: #fff;
        background-image: url(img/Vector\ 1.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: top center;
    }

    #anxiety-ul {
        padding-bottom: 30px;
        margin: auto;
        font-size: 30px;
        list-style-position:inside;
        background-image: url(img/Group\ 22.png);
        background-repeat: no-repeat;
        background-position:center ;
        background-size: 30%;
    }

    #anxiety-sp {
        font-size: 20px;
    }
    
    /*耳痛い*/
    #ear-pain{
        background-color:rgba(236, 156, 23, 70%);
        background: linear-gradient(#fcf9f2,rgba(236, 156, 23, 70%));
    }
    
    #ear-pain > h1 {
        text-align: center;
    }
    
    #ear-pain > p {
        width: 80%;
        margin: auto;
        text-align: left;
        font-size: 20px;
    }
    
    #ear-pain > div {
        padding: 50px;
        font-size: 30px;
        background-image: url(img/？.png);
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
    }
    
    #ear-pain-sp {
        font-size: 23px;
    }

    /*案件担当なら*/
    #recruit {
    margin-top:0;
    font-size: 30px;
    
 }
 
 
    #recruit-title {
     padding: 30px;
     text-align: center;
     background-image: url(img/Group\ 24.png);
     background-size: 90%;
     background-repeat: no-repeat;
     background-position:center ;
 }

    #recruit-title > p {
     width: 80%;
     margin:  auto;
     text-align: left;
     font-size: 20px;
 }
 
    #recruit-box {
     text-align: center;
     background-color:rgba(236, 156, 23, 70%);
 
     
 }
 
    #recruit-box > p {
     padding-top: 20px;
     text-align: left;
     width: 80%;
     margin: auto;
 }
 
 /*共通点*/
#common {
    text-align: left;
    width: 80%;
    margin: auto ;
}


.common-sp {
    font-size: 30px;
    font-weight: bold;
}

#common > h3 {
    font-size: 30px;
}


/*Webマーケティングとは*/
#what-web {
    padding-top: 80px;
    background-image: url(img/Ellipse\ 7.png);
    background-position: left top;
    background-repeat: no-repeat;
}

#what-web > h2 {
    padding-left:20px;
}
#what-web > p {
    padding: 50px;
    background-image: url(img/22549323.png);
    background-position: right ;
    background-repeat: no-repeat;
    background-size: 40%;
}

/*考えてみる*/
#thinking {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.think {
    font-size: 20px;
    font-weight: bold;
    color:rgba(236, 156, 23);
    margin-left:50px;
    padding: 30px 30px;
    border:solid, 3px, rgba(236, 156, 23, 70%);
    border-radius: 50px;
    text-align: center;
    background-color: #fff;
    box-shadow: 2px 1px 2px gray;
    z-index: 11;

    font-family: "Zen Kurenaido", serif;
    font-weight: 400;
    font-style: normal;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}

.think.ready {
    opacity: 1;
    transform: translateY(0px);
 }


.t-1{
    position: relative;
    left: 20px;
    width: 200px;

}

.t-2 {
    position: relative;
    left: 80px;
    top: -30px;
}

.t-3 {
    position: relative;
    top: -50px;
    left: 20px;
    width: 250px;
}

#thinking-img {
    position: relative;
    right: 100px;
    z-index: 10;
    
}

/*明確な実績とは*/
#clear-log {
    padding: 10px 0 30px 0;
    background-image: url(img/30873598_m.jpg);
    background-repeat: no-repeat;
    background-size:cover;

}

#clear-log > h2 {
    padding-top: 80px;
    padding-bottom: 60px;
    padding-left: 30px;
    background-image: url(img/Ellipse\ 7.png);
    background-repeat: no-repeat;
    position: top;
}

#clear-log > p {
    width: 80%;
    margin: auto;
}

#clear-log > ul{
    width: 80%;
    margin: auto;
    background-color: #fff;
    padding: 50px 50px 50px 100px;
}

.clear-log-li {
    font-weight: bold;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}

.clear-log-li.ready {
    opacity: 1;
    transform: translateY(0px);

}

/*一つだけ提案*/

#suggestion > img {
    width: 30%;
    display: block;
    margin: auto;
}

#suggestion > p {
    text-align: center;
    width: 80%;
    font-size: 25px;
    font-weight: bold;
    margin: auto;
}

#suggestion-all {
    display: flex;
    background-image: url(img/Rectangle\ 32.png);
    background-repeat: no-repeat;
    background-position: bottom left;

}

.sug-co {
    margin:10px ;
}

.sug-1 {
    border: solid 15px rgba(236, 156, 23, 70%);
    height: 100%;
    margin:0 0 0 30px;
}
.sug-1 > img {
    height: 800px;
}

.sug-2 {
    font-size: 30px;
}

.sug-2 > p {
    margin: 10px;
}

/*いざ実践*/
#practice-p {
    background-image: url(img/30814692_m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px;
}

#practice-p > p {
    font-size: 30px;
    font-weight: bold;
    text-align: center;

}

.about-box {
    padding:30px;
    background-color: #003869;
    font-size: 30px;
    color: #fff;
}

/*この講座で学べること*/
#study-1, #study-2{
    display: flex;
}

.study-box {
    flex-wrap: wrap;
    margin: 10px auto;
    width: 200px;
    height: 200px;
    box-shadow: 1px 3px 5px gray;
    border-radius: 40px;
    background-color: #fff;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}

.study-box.ready{
    opacity: 1;
    transform: translateY(0px);
  }

.study-box > h1 {
    position: relative;
    top: -50px;
    right: 60px;
    color: rgba(236, 156, 23, 70%);
    font-size: 50px;
}

.study-box > p {
    font-size: 15px;
    position: relative;
    top: -70px;
    left: 10px;
    font-weight: bold;
}

/*この講座の特徴*/
.point-box {
    display: block;
    justify-content: space-around;
    margin-top: 100px;
}

.point-o {
    width: 50%;
    margin:50px auto;
    height: auto;
    background-image: url(img/Ellipse\ 9.png);
    background-position: top;
    background-repeat: no-repeat;
    padding: 100px;
    font-weight: bold;
    background-color: #fff;
    border-radius: 50px;
    text-align: center;
}

.point-y {
    width: 50%;
    margin: 50px auto;
    height: auto;
    background-image: url(img/Ellipse\ 8.png);
    background-position: top;
    background-repeat: no-repeat;
    padding: 100px;
    font-weight: bold;
    background-color: #fff;
    border-radius: 50px;
    text-align: center;

}

.point-p {
    text-align: left;
    font-size: 21px;
}

/*この講座を学ぶツール*/
.tools {
    background-color: rgba(236, 156, 23, 70%);
    padding: 20px 0px;

}

.tool {
    display: flex;
    margin: 20px 20px;
    background-color: #fff;
    padding: 40px;
    font-size: 40px;

    opacity: 0;
    transform: translateY(20px);
    transition: all 2s cubic-bezier(0,1.2,1.0,1.0);

}

.tool.ready {
    opacity: 1;
    transform: translateY(0px);

}

    
}