@charset "utf-8";

/* スマホ向け：10px～499pxまで */
@media only screen and (min-width: 10px) and (max-width:499px){

body{
    width:100%;
     "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color:#f0fff0; }
    
    

  
body {background-color: whitesmoke;}
   

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


    
    
    
header{
    width:100%;
    text-align: center;
    margin-top:5px;
    margin-bottom:10px;}

header div{width:100%;
　　　　　　　margin-right: auto;
            margin-left: auto;}
    
    header #floatbox{width:100%;
                     height: 50px;}
    
    header #officerogo{width:30%;
                       margin-left: auto;
                       margin-right: auto;}

header h4 img{
    width:120px;
    height:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right:auto;
    text-align: center;}
    
    
    header div#h3{margin-top:20px ;
                  background-color: ;
                  color:gray;} 
    
    #phototop{width:100%;}
    
    #phototop div#size{width:80%;
                       margin-left: auto;
                       margin-right: auto}
    
    
    #h3 h3{font-weight: bold;background-color: gray;color:white;}
    
    header div#h3 h3{font-size: 18px;}


section#banner{width:90%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        height:1443px;
        background-color:white;; 
        text-align: center;}
#banner div{width:100%;;
            height:35px;
            margin-left:auto;
            margin-right: auto;
            padding-top:10px;
            background-color:}

     
    
#banner section{
    background-color:;
    font-size: 14px;
    color :#ff69b4;
    width:100%;
    height:px;
    margin:3px; }
    

#banner section#pinkbox{
    width:80%;
    margin-left: 30px;
    color:white;
    background-color: #ff69b4;
    font-size: 10px;
    }
    
#banner section#colorredbox{
    width:80%;
    margin-left: 30px;
    color:red;
    font-size: 14px;
    }
    
    #banner section#baitai{width:70%;
                  margin-left: auto;
                margin-right: auto;
                text-align: left;}
    
    
     #modellist{width:100%;
                height:1600px;
                margin-left: auto;
                margin-top: auto;}
    
    
    
    #minilist{width:100%;
               max-width: 350px;
               margin-left: auto;
               margin-right: auto;}
    
    
    #minilist div{width:40%;
                  height:150px;
                  float:left;
                  margin-left: 5%;
                  margin-right: 5%;}
    
    #dailist{width:100%;
             margin-left: auto;
             margin-right: auto;}
    
    #dailist div{width:90%;}
    
    
    
    
    
    section#topmessage h1{font-weight:bold;}    
    
section#topmessage{
    width:180px;
    margin-right: auto;
    margin-left:auto;
    margin-top:25px;
    text-align:center;
    color:;
    font-weight: bold;
} 

section#condition{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

#modelapplybutton{
    width:100px;
    height:25px;
    margin-right: auto;
    margin-left:auto;
    margin-top:5px;
    padding-top:7.5px;
    text-align:center;
    font-size:10px;
    color:white;
    background-color: #4169e1;
} 
#modelapplybutton a{
    color:white;
    text-decoration: none;
}  
    
    
#area{margin-top: 20px;background-color: grey;padding:2%;}
    
    #area h2{font-size: 10px;color:white;}

    
    

    
    #explainform{width:90%;margin-left: auto;margin-right: auto;margin-top: 20px;
    color:;
    font-weight: bold;}


#contact{
    width:80%;
    margin:40px auto;
    text-align: center;
    color: ;
    font-weight: bold;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}



 #contactphoto{font-size: 12px;
                  text-align:left;}
    
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  

    section#footernavi a{color:white;text-decoration: none;}
    
    section#footernavi a:hover{color:black;text-decoration: none;}
    
    
    div#footernivigation a{color:white;text-decoration: none;}
    
    div#footernivigation a:hover{color:black;text-decoration: none;}

  
    
div#footeradvertise{width:100%;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}
    
    
section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 250px;}    
    
    #footernivigation{margin-top: 100px;
        margin-bottom: 100px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}
    

}

/* タブレット向けのレイアウトの指定：500px～960px */
@media only screen and (min-width:500px) and (max-width:960px){ 


body{
    width:100%;
     "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color:whitesmoke; }
    
  
    body {}   

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


    
    
    
header{
    width:100%;
    text-align: center;
    margin-top:5px;
    margin-bottom:10px;}

header div{width:100%;
　　　　　　　margin-right: auto;
            margin-left: auto;}
    
    header #floatbox{width:100%;
                     height: 50px;}
    
    header #officerogo{width:150px;
                       margin-left: auto;
                       margin-right: auto;}

header h4 img{
    width:120px;
    height:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right:auto;
    text-align: center;}
    
    
    header div#h3{margin-top:15px ;
                  background-color:gray ;
                  color:white;} 
    
    #h3 h3{font-weight: bold;}
    
    header div#h3 h3{font-size: 18px;}

    
     #phototop{width:100%;}
    
    #phototop div#size{width:80%;
                       max-width: 500px;
                       margin-left: auto;
                       margin-right: auto}
    
    
    
    

section#banner{width:90%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        height:670px;
        background-color:white;; 
        text-align: center;}
#banner div{width:100%;;
            height:35px;
            margin-left:auto;
            margin-right: auto;
            padding-top:10px;
            background-color:}

     
    
#banner section{
    background-color:;
    font-size: 14px;
    color :#ff69b4;
    width:100%;
    height:px;
    margin:3px; }
    

#banner section#pinkbox{
    width:80%;
    margin-left: 30px;
    color:white;
    background-color: #ff69b4;
    font-size: 10px;
    }
    
#banner section#colorredbox{
    width:80%;
    margin-left: 30px;
    color:red;
    font-size: 14px;
    }
    
    #banner section#baitai{width:70%;
                  margin-left: auto;
                margin-right: auto;
                text-align: left;}
    
    
     #modellist{width: 400px;
                height:750px;
                margin-left: auto;
                margin-right: auto;}
    
    
    
    #minilist{max-width: 400px;
               margin-left: auto;
               margin-right: auto;}
    
    
    #minilist div{width:17%;
                  height:80px;
                  float:left;
                  margin-left: 1%;
                  margin-right: 1%;}
    
    #dailist{width:100%;
             height:150px;
             margin-left: auto;
             margin-right: auto;}
    
    #dailist div{width:35%;}
    
    
    
    
    
    section#topmessage h1{font-weight:bold;}    
    
section#topmessage{
    width:180px;
    margin-right: auto;
    margin-left:auto;
    margin-top:25px;
    text-align:center;
    color:;
    font-weight: bold;
} 

section#condition{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

#modelapplybutton{
    width:100px;
    height:25px;
    margin-right: auto;
    margin-left:auto;
    margin-top:5px;
    padding-top:7.5px;
    text-align:center;
    font-size:10px;
    color:white;
    background-color: #4169e1;
} 
#modelapplybutton a{
    color:white;
    text-decoration: none;
}  
    
    
#area{margin-top: 20px;background-color: grey;padding:2%;}
    
    #area h2{font-size: 10px;color:white;}

    
    

    
    #explainform{width:410px;margin-left: auto;margin-right: auto;margin-top: 20px;
    color:;
    font-weight: bold;}


#contact{
    width:480px;
    margin:40px auto;
    text-align: left;
    color: ;
    font-weight: bold;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}



 #contactphoto{font-size: 12px;
                  text-align:left;}

footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  
    

    section#footernavi a{color:white;text-decoration: none;}
    
    section#footernavi a:hover{color:black;text-decoration: none;}
    
    
    div#footernivigation a{color:white;text-decoration: none;}
    
    div#footernivigation a:hover{color:black;text-decoration: none;}

    
div#footeradvertise{width:100%;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}

section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 250px;}    
    
    #footernivigation{margin-top: 100px;
        margin-bottom: 100px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}
    
    
    
    
}




/* PC向け全画面表示レイアウトの指定：961px以上 */
@media only screen and (min-width: 961px) {
    
body{
    width:100%;
     "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color:whitesmoke; }
    
  /* 背景画像の挿入と画面幅いっぱいに表示の設定スタート*/
    body {}  

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


    
    
header{
    width:100%;
    text-align: center;
    margin-top:5px;
    margin-bottom:10px;}

header div{width:100%;
　　　　　　　margin-right: auto;
            margin-left: auto;}
    
    header #floatbox{width:100%;
                     height: 50px;}
    
    header #officerogo{width:150px;
                       margin-left: auto;
                       margin-right: auto;}

header h4 img{
    width:120px;
    height:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right:auto;
    text-align: center;}
    
    
    header div#h3{margin-top:15px ;
                  background-color: grey;
                  color:white;} 
    
    #h3 h3{font-weight: bold;}
    
    header div#h3 h3{font-size: 18px;}

    
     #phototop{width:100%;}
    
    #phototop div#size{width:80%;
                       max-width: 500px;
                       margin-left: auto;
                       margin-right: auto}
        
    

section#banner{width:90%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        height:670px;
        background-color:white;; 
        text-align: center;}
#banner div{width:100%;;
            height:35px;
            margin-left:auto;
            margin-right: auto;
            padding-top:10px;
            background-color:}

     
    
#banner section{
    background-color:;
    font-size: 14px;
    color :#ff69b4;
    width:100%;
    height:px;
    margin:3px; }
    

#banner section#pinkbox{
    width:80%;
    margin-left: 30px;
    color:white;
    background-color: #ff69b4;
    font-size: 10px;
    }
    
#banner section#colorredbox{
    width:80%;
    margin-left: 30px;
    color:red;
    font-size: 14px;
    }
    
    #banner section#baitai{width:70%;
                  margin-left: auto;
                margin-right: auto;
                text-align: left;}
    
    
     #modellist{width: 400px;
                height:750px;
                margin-left: auto;
                margin-right: auto;}
    
    
    
    #minilist{max-width: 400px;
               margin-left: auto;
               margin-right: auto;}
    
    
    #minilist div{width:17%;
                  height:80px;
                  float:left;
                  margin-left: 1%;
                  margin-right: 1%;}
    
    #dailist{width:100%;
             height:150px;
             margin-left: auto;
             margin-right: auto;}
    
    #dailist div{width:35%;}
    
    
    
    
    
    section#topmessage h1{font-weight:bold;}    
    
section#topmessage{
    width:180px;
    margin-right: auto;
    margin-left:auto;
    margin-top:25px;
    text-align:center;
    color:;
    font-weight: bold;
} 

section#condition{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

#modelapplybutton{
    width:100px;
    height:25px;
    margin-right: auto;
    margin-left:auto;
    margin-top:5px;
    padding-top:7.5px;
    text-align:center;
    font-size:10px;
    color:white;
    background-color: #4169e1;
} 
#modelapplybutton a{
    color:white;
    text-decoration: none;
}  
    
    
#area{margin-top: 20px;background-color: grey;padding:2%;}
    
    #area h2{font-size: 10px;color:white;}

    
    

    
    #explainform{width:40%;margin-left: auto;margin-right: auto;margin-top: 20px;
    color:;
    font-weight: bold;}


#contact{
    width:540px;
    margin:40px auto;
    text-align: left;
    color: ;
    font-weight: bold;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}



 #contactphoto{font-size: 12px;
                  text-align:left;}    

    
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}
    
    
section#footernavi a{color:white;text-decoration: none;}
    
    section#footernavi a:hover{color:black;text-decoration: none;}
    
    
    div#footernivigation a{color:white;text-decoration: none;}
    
    div#footernivigation a:hover{color:black;text-decoration: none;}

div#footeradvertise{width:100%;
                    height:200px;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
    
    div#footeradvertisepadding{width:40%;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}

section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 110px;}    
    
    #footernivigation{margin-top: 60px;
        margin-bottom: 160px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}
    

}