@charset "UTF-8";
/*
統一すること（位置はここに固定）
・文字の大きさの最小値は3.5vw
*/
/*以下に指定を記述する*/
body{
    padding:0;
    margin:0;
    font-family:  kozuka-gothic-pr6n, sans-serif;
}
.sp-dsp{
        display: block;
    }
    .pc-dsp{
        display: none;
    }
.top_img img{
    width:100%;
    margin-top: 70px;
    
}
.phone{
    display: block;
}
.pc{
    display: none;
}
.con{
    position:relative;
    height:88vw;
}
/*右*/
.right_1{
    margin-top: 0;
    position:relative; 
    top:-5vw; 
    right:0px;
    
}
.right_2{
    position:relative; 
    top:22vw; 
    right:0px;
}
.right_3{
    position:relative; 
    top:49vw; 
    right:0px;
}
.husen_1{
    position:absolute;
    right:0;
    top:13vw;
    width:82vw;
    z-index:999;
}
/*右・二段*/
.con_1{
    position:absolute; 
    top:9vw; 
    right:5vw; 
    font-size:5.5vw;
    color:#1b1555;
    z-index:10000;
}
.explain_1{
    position:absolute; 
    top:22vw; 
    right:5vw; 
    font-size:3vw;
    color:#1b1555;
    z-index:10000;
    text-align:right;
    line-height: 4.5vw;
}
/*右・一段*/
.con_2{
    position:absolute; 
    top:11vw; 
    right:5vw; 
    font-size:5.5vw;
    color:#1b1555;
    z-index:10000;
}
.explain_2{
    position:absolute; 
    top:25vw; 
    right:5vw;
    font-size:3vw;
    color:#1b1555;
    z-index:10000;
}
/*左*/
.left_4{
    position:relative; 
    top:-5vw; 
    left:0px;
    
}
.left_5{
    position:relative; 
    top:22vw; 
    left:0px;
}
.left_6{
    position:relative; 
    top:49vw; 
    left:0px;
}
.husen_2{
    position:absolute;
    left:0;
    top:13vw;
    width:82vw;
    z-index:999;
}
/*二段*/
.con_3{
    position:absolute; 
    top:9vw; 
    left:5vw; 
    font-size:5.5vw;
    color:#1b1555;
    z-index:10000;
}
.explain_3{
    position:absolute; 
    top:22vw; 
    left:5vw; 
    font-size:3vw;
    color:#1b1555;
    z-index:10000;
    line-height: 4.5vw;
}
/*一段*/
.con_4{
    position:absolute; 
    top:11vw; 
    left:5vw; 
    font-size:5.5vw;
    color:#1b1555;
    z-index:10000;
}
.explain_4{
    position:absolute; 
    top:25vw; 
    left:5vw; 
    font-size:3vw;
    color:#1b1555;
    z-index:10000; 
}

/*見出し*/
.name{
    height:70vw;
}
.side_1{
    position:absolute;
    top:5.5vw;
    left:3vw;   
   
}
.side_2{
    position:absolute;
    top:5.5vw;
    right:3.5vw;   
   
}
.con-one{
    position:relative;
    height:88vw;
   
}
.con-two{
    position:relative;
    height: 88vw;
    float: right;
}








/*
css概説（復習用　要らなければ消してください）

vol.1 用語の解説

セレクタ…装飾をつけたい対象の要素のこと
属性…セレクタに施したい装飾の種類
値…セレクタに施したい装飾の具体的内容

例：h1{color:red;}
h1がセレクタ　colorが属性　redが値

vol.2 セレクタの指定
①要素名で指定
h1{color:red;}

②class名で指定
.class{color:red;}

③id名で指定
#id{color:red;}

④要素名プラスclass名で指定
div.class{color:red;}

⑤要素名プラスid名で指定
div#id{color:red;}

⑥要素の位置から指定
header div{color:red;}   
↑スペースを入れる（ここではheader内のdiv要素を指定）

vol.3 属性・値の指定

①{属性:値;}の形で記述
{color:red;}

②１つのセレクタに対する指定はまとめて記述できる
h1{
   color:red;
   width:90%;
}

③指定が重複したら後の行にあるものが優先
h1{
   color:red;
   width:90%;
   color:blue;
}
↑ここではh1はblueになる

④指定が重複したらより特定が強いものが優先
h1{
   color:red;
   width:90%;
}
header h1{
   color:blue;
}
↑ここではheader内のh1はcolorがblue、widthが90%になる
*/
@media screen and (min-width:1024px) {
    /*レスポンシブ用*/
    .sp-dsp{
        display: none;
    }
    .pc-dsp{
        display: block;
    }
    .phone{
       display: none;
    } 
    .pc{
        display: block;
        width:100%;
        margin-top: 70px;
    }
    .shiro{
        height: 100px
    }
    .con{
        width: 500px;
    }
    .name{
        height: 400px;
    }
    .pccon1{
        width: 1024px;
        margin-left:auto;
        margin-right: auto;
    }
    .pccon2{
        width: 1024px;
        margin-left: auto;
        margin-right: auto;
    }
    /*体験談・勉強法*/
    .con-one{
        width: 512px;
        float: left;
        height: 500px;
    }
    .side_1{
        writing-mode: vertical-rl;
        font-size: 30px;
         color:#1b1555;
        border-left: solid 2.5px #1b1555;
        height: 280px;
        top: -20px;
        margin-right: 20px;
        padding-left: 0px;
        padding-top: 20px;
    }
    /*関連データ*/
    .con-two{
        width: 512px;
        float: left;
        height:500px ;
    }
    /*ＰＩＣＫ　ＵＰ*/
    .con-three{
        position: relative;
        width: 512px;
        clear: both;
        float: left;
        height: 520px;
    }
    /*その他*/
    .con-four{
        position: relative;
        width: 512px;
        float: left;
        height: 520px;
    }
    .right_1{
    margin-top: 0;
    position:relative; 
    top:0px; 
    right:0px;
    
    }
    .right_2{
        position:relative; 
        top:150px; 
        right:0px;
    }
    .right_3{
        position:relative; 
        top:300px; 
        right:0px;
    }
    .husen_1{
        position:absolute;
        right:0;
        top:0px;
        width:400px;
        z-index:999;
    }
    /*右・二段*/
    .con_1{
        position:absolute; 
        top:-23px; 
        right:20px; 
        font-size:27px;
        color:#1b1555;
        z-index:10000;
    }
    .explain_1{
        position:absolute; 
        top:42px; 
        right:20px; 
        font-size:15px;
        color:#1b1555;
        z-index:10000;
        text-align:right;
        line-height: 20px;
    }
    /*右・一段*/
    .con_2{
        position:absolute; 
        top:-23px; 
        right:20px; 
        font-size:29px;
        color:#1b1555;
        z-index:10000;
    }
    .explain_2{
        position:absolute; 
        top:50px; 
        right:20px;
        font-size:15px;
        color:#1b1555;
        z-index:10000;
    }
    footer{
        clear: both;
    }
}