@charset "utf-8";
/* スマホ向け：10px～499pxまで */


@media only screen and (min-width: 10px) and (max-width:499px){

    #songproblem p{width:80%;margin-left:auto;margin-right: auto; text-align:left;padding:10%;}   
    
    #songproblem a{text-align: left;}
    
    
body {
    width:100%;
     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color:; 
    width:100%;
    text-align: center;}
    
    
#wrapper{background-image: url(../../images/recruit/miteyomite/miteyomiteback10001000.png);
    background-size: 120px 120px;}

a:{
    text-decoration: none;
}
a:hover{
    text-decoration:none;} 
    
    img{width:100%;}
    
    
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
    
    
header{
    width:100%;
    text-align: center;}



header h1{margin-top: 0px; font-size: 10px; font-weight: bold;text-align: left;
    background-color: white;}
header h4{margin-top: 0px;margin-bottom: 25px; font-size: 18px; font-weight: ;text-align: center;}

    
    
    #presents{background-color:pink; text-align: center;}
    #presents h6{font-size: 15px; color:red;font-weight: bold;}
    #presents h7{font-size: 18px;color:deeppink;font-weight: bold;}  
    #presents #snsbox{width:370px;margin-top: 15px; margin-left: auto;margin-right: auto;}
    
    
   
    
    
    #totalbox{
        width:94%;
        margin-left: auto;
        margin-right: auto;
        background-color: white;} 
    
    
    #navigation{width:100%;height:166px;}
    
    ul{list-style: none; padding-left: 0;}
    
    #nav a{color:black;text-decoration: none;}
    
    #nav a:hover{color:grey;text-decoration: none;}
    
    #nav li{width:30%;height:40px;font-size: 10px;padding-top: 25px; background-color: hotpink;float:left;margin-left: 2.5%;margin-top:2.5%;}
    
    
    
    p#winpeople{width:100%;
                margin-top: 15px;
                margin-left: auto;
                margin-right: auto;
                background-color: pink;
                padding-top: 10px;
                padding-bottom: 10px;}
    
    #wonprofile{background-color: black;}
    
    article#video{width:97%;margin-left: auto;margin-right: auto;}
    
    
    #youtube{
  position: relative;
  width: 100%;
    margin:5px auto;
  padding-top: 56.25%;
}
#youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;}
    
 #youtubemidashi h2{width:70%;padding:10%;font-size: 16px; margin-left: auto;margin-right: auto; background-color: pink;margin-top: -5px;;margin-bottom: -4px;}        
    
    
    
    
    
    
    article#winpeople{width:96%;max-width: 370px; height:450px;;margin-left: auto;margin-right: auto; background-color: white;margin-top: 15px;padding-top: 15px;}  
    
    article#winpeople h3{font-size: 15px; color:blue;font-weight: bold;}
    
    article#winpeople p{font-size: 10px;text-align: left;width:88%;margin-left: auto;margin-right: auto;}
    
    
    #photobox{width:96%;max-width: 300px;;margin-left: auto;margin-right: auto;}
    
    #photobox a img{width:46%;max-width: 200px; float:left;margin:2px;}
    
    
    article#score{margin-top: 25px;height:270px;}
    
    p#date{color:white;text-align: left;margin-left: 30px;width:60px;font-size: 10px; border: 1px white solid;}
    
    p#winname{color:white;text-align: left;margin-left: 30px;width:px;font-size: 20px; margin-top:5px;}
    
    p#winname small{color: yellow;font-weight: bold;}
    
    
   
    
    p#score{color:yellow;text-align: left;margin-left: 30px;width:px;font-size: 20px; font-weight: bold;}
  
    
    article a div{width:30%;height:50px;padding-top: 30px; background-color: hotpink;float:left;margin-left: 2.5%;}
    
    article a div p{color:black;text-decoration: none;}
    
    
    article a:hover div p{color:black;
                     text-decoration:none ;}
    
    article a:hover div{background-color: yellow;}
    
    
    
    
    section#recruit{width:92%;margin-left: auto;margin-right: auto; margin-top: 20px;padding-top: 20px; border: 5px hotpink solid;}  
     
    
    section#recruit h4{color:hotpink;font-weight: bold;font-size: 20px;}
    
    
    section#recruit h10{font-size: 12px;}
    
    section#recruit a{color:black;text-decoration: none;}
    
     section#recruit a:hover{color:grey;text-decoration: none;}
    
    
    section#recruit a article{width:90%;margin-left: auto;margin-right: auto; margin-top: 23px; text-align: left;}
    
    section#recruit a:hover article{background-color: floralwhite;}
    
    article h15{font-weight: bold;}
    
    article #abox{width:;}
    
    article #bbox{width:;}
    
    
section #modelapplybutton{
    width:100px;
    height:25px;
    margin-right: auto;
    margin-left:auto;
    margin-top:35px;
    padding-top:7.5px;
    text-align:center;
    font-size:10px;
    font-weight: bold;
    color:white;
    background-color: #ffa500;
} 
    
section #modelapplybutton a{
    color:white;
    text-decoration: none;}    
    
    
    
    
    
    
    
    
section#banner{
        margin-top: 25px;
        width:100%;
        height:100px;
        background-color:#ffd700; 
        text-align: center;}
#banner div{width:170px;
            height:55px;
            margin-left:auto;
            margin-right: auto;
            padding-top:20px;
            background-color:}

#banner section{
    background-color:#ffa500;
    font-size: 8px;
    color :white;
    width:50px;
    height:20px;
    float:left;
    margin:3px; }


   
    
    

#contact{
    width:80%;
    font-size: 12px;
    margin:100px auto  40px  auto;
    text-align: left;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}
#contact img{
    width:30%;
    height:40px;
    float:left;
    margin:5px;
}
    
    
/* SNSボタンを囲むBoxで配置スタイル設定*/
    #snsbox{width:100%;height:100px;}    
#SNSbuttonstylebox {
    width:90px;
    margin-top: 40px;
    padding-top: px;
    float:left;
    height:;
    margin-left:15px;
}    
    
     



div#footer{
    padding-top: 100px;
    text-align:center;
    padding-top:40px;
    background-color: black;
    color:white;
}
    
div#footer a{color:white;text-decoration: none;}
    
div#footer a:hover{color:grey;text-decoration: none;}

    
}
    



/* タブレットとPC向け全画面表示レイアウトの指定：500px以上 */
@media only screen and (min-width: 500px) {
    
    
 #songproblem p{width:80%;margin-left:auto;margin-right: auto; text-align:left;padding:4%;}     
    
    
  
body {
    width:100%;
     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color:; }
    
    
#wrapper{background-image: url(../../images/recruit/miteyomite/miteyomiteback10001000.png);
    background-size: 120px 120px;}    
    

a:{
    text-decoration: none;
}
a:hover{
    text-decoration:none;} 
    
    img{width:100%;}

    
    
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}    
    

header{
    width:100%;
    text-align: center;
}



header h1{width:100%;max-width: 100%;margin-left: auto;margin-right: auto;margin-top: 0px; font-size: 15px; font-weight: bold;text-align: left;background-color: white;}
header h4{max-width: 400px;margin-left: auto;margin-right: auto; margin-top: 0px;margin-bottom: 25px; font-size: 18px; font-weight: ;text-align: center;}
    
    
  
    
    
#presents{background-color:pink; text-align: center;}
    #presents h6{font-size: 15px; color:red;font-weight: bold;}
    #presents h7{font-size: 18px;color:deeppink;font-weight: bold;}  
    #presents #snsbox{width:370px;margin-top: 15px;;margin-left: auto;margin-right: auto;}
    
    #totalbox{
        width:94%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;} 
    
    
    #navigation{width:100%;height:176px;}
    
    ul{list-style: none; padding-left: 0;}
    
    #nav a{color:black;text-decoration: none;}
    
    #nav a:hover{color:grey;text-decoration: none;}
    
    #nav li{width:30%;height:40px;text-align: center; font-size: 10px;padding-top: 25px; background-color: hotpink;float:left;margin-left: 2.5%;margin-top:2.5%;}
        
    
    
    
    
 
    
    p#winpeople{width:100%;
                margin-top: 15px;
                margin-left: auto;
                margin-right: auto;
                background-color: pink;
                padding-top: 10px;
                padding-bottom: 10px;
                text-align: center;
                font-weight: bold;}
    
    #wonprofile{background-color: black;}
    
    article#video{width:97%;margin-left: auto;margin-right: auto;}
    
    
    #youtube{
  position: relative;
  width: 100%;
    margin:5px auto;
  padding-top: 56.25%;
}
#youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;}
    
 #youtubemidashi h2{width:70%;padding:10%;font-size: 16px; margin-left: auto;margin-right: auto; background-color: pink;margin-top: -5px;;margin-bottom: -4px;}        
    
    
    
    
    
    
    
    article#winpeople{width:96%;max-width: 480px; height:480px;;margin-left: auto;margin-right: auto; background-color: white;margin-top: 15px;padding-top: 15px;}  
    
    article#winpeople h3{font-size: 15px; color:blue;font-weight: bold;text-align: center;}
    
    article#winpeople p{font-size: 10px;text-align: left;width:88%;margin-left: auto;margin-right: auto;}
    
    
    #photobox{width:96%;max-width: 400px; margin-left: auto;margin-right: auto;}
    
    #photobox a img{width:46%;float:left;margin:2px;}
    
    
    article#score{margin-top: 25px;padding-top: 15px;;height:270px;width:80%;max-width: 500px; margin-left: auto;margin-right: auto;}
    
    p#date{color:white;text-align: left;margin-left: 30px;width:60px;font-size: 10px; border: 1px white solid;}
    
    p#winname{color:white;text-align: left;margin-left: 30px;width:px;font-size: 20px; margin-top:5px;}
    
    p#winname small{color: yellow;font-weight: bold;}
    
    
  
    
    p#score{color:yellow;text-align: left;margin-left: 30px;width:px;font-size: 20px; font-weight: bold;}
  
    
    article a div{width:30%;height:50px;padding-top: 30px; background-color: lightpink;float:left;margin-left: 2.5%;}
    
    article a div p{color:black;text-decoration: none;text-align: center;}
    
    
    article a:hover div p{color:black;
                     text-decoration:none ;}
    
    article a:hover div{background-color: yellow;}
    
    
    
    
    section#recruit{width:92%;max-width: 500px; margin-left: auto;margin-right: auto; margin-top: 20px;padding-top: 20px; border: 5px hotpink solid;text-align: center;}  
     
    
    section#recruit h4{color:hotpink;font-weight: bold;font-size: 20px;text-align: center;}
    
    
    section#recruit h10{font-size: 12px;}
    
    section#recruit a{color:black;text-decoration: none;}
    
     section#recruit a:hover{color:grey;text-decoration: none;}
    
    
    section#recruit a article{width:90%;margin-left: auto;margin-right: auto; margin-top: 23px; text-align: left;}
    
    section#recruit a:hover article{background-color: floralwhite;}
    
    article h15{font-weight: bold;}
    
    article #abox{width:;}
    
    article #bbox{width:;}
    
    
section #modelapplybutton{
    width:100px;
    height:25px;
    margin-right: auto;
    margin-left:auto;
    margin-top:35px;
    padding-top:7.5px;
    text-align:center;
    font-size:10px;
    font-weight: bold;
    color:white;
    background-color: deeppink;
} 
    
section #modelapplybutton a{
    color:white;
    text-decoration: none;}    
    
   
    
section#banner{
        margin-top: 25px;
        width:100%;
        height:100px;
        background-color:pink; 
        text-align: center;}
#banner div{width:170px;
            height:55px;
            margin-left:auto;
            margin-right: auto;
            padding-top:20px;
            background-color:}

#banner section{
    background-color:hotpink;
    font-size: 8px;
    color :white;
    width:50px;
    height:20px;
    float:left;
    margin:3px; }


   
        
    
    
    
   
    

    #explainform{max-width:410px;margin-left: auto;margin-right: auto;}   
    
#contact{
    width:80%;
    max-width: 400px;
    font-size: 12px;
    margin:40px auto;
    text-align: left;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}
#contact img{
    width:30%;
    height:40px;
    float:left;
    margin:5px;
}


div#footer{
    text-align:center;
    padding-top:40px;
    background-color: black;
    color:white;
}
    
div#footer a{color:white;text-decoration: none;}
    
div#footer a:hover{color:grey;text-decoration: none;}  
    
    
    
   
/* SNSボタンのスタイル */  
/* SNSボタンを囲むBoxで配置スタイル設定*/
    #snsbox{width:100%;height:100px;}    
#SNSbuttonstylebox {
    width:100px;
    margin-top: 40px;
    padding-top: 10px;
    float:left;
    height:;
    margin-left:15px;
}    
    
    
   
    
    
    

}