@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; }

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


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

header div{width:100%;
　　　　　　　margin-right: auto;
            margin-left: auto;}

header h4 img{
    width:120px;
    height:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right:auto;
    text-align: center;}


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

#banner section{
    background-color:black;
    font-size: 8px;
    color :white;
    width:150px;
    height:20px;
    float:left;
    margin:3px; }
    
    
    
    
section#topmessage{
    width:180px;
    margin-right: auto;
    margin-left:auto;
    margin-top:25px;
    text-align:center;
} 

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;}

    
    
#overview{width:90%;margin-left: auto;margin-right: auto;
         margin-top: 35px;}
    
    #overview #title{text-align: center;font-size: 18px; margin-bottom: 20px;}
    
    p#bigfont{color:red;font-size: 16px; margin-top: 20px;}
    
    #overview #title2{text-align: center;font-size: 18px; margin-bottom: 20px;margin-top: 20px;}
    
    
    p#explain{margin-top: 15px;}
    
    p#explain a{color:black;text-decoration: none;}
    
    p#explain a:hover{color:darkgray;text-decoration: none;}
    
    
    #overview section{margin-top: 40px;}
    
    #overview section #title{text-align: left;font-size: 16px;}
    
    
    #realization{width:90%;margin-left: auto;margin-right: auto;
        margin-top: 80px;
        padding:1% 5% 5% 5%;
        background-color: papayawhip;}
    
    #realization #title h7{font-size:15px;color:red;}
    
    #realization p#wecan{font-weight: bold;}
    
    
    #conclusion{width:95%;padding:3%;background-color: beige}
   
    #conclusion p{color:red;font-weight: bold;margin-top: px;}
    
    #explainform{width:90%;margin-left: auto;margin-right: auto;margin-top: 20px;}


#contact{
    width:80%;
    margin:40px auto;
    text-align: center;}
#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;
    }     
#footernavi a{ color:white;
               text-decoration: none;}
    
    #footernavi a:hover{color:gainsboro;
                        text-decoration: underline;}

}

/* タブレット向けのレイアウトの指定：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:#f0fff0; }

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


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

header div{width:100%;
　　　　　　　margin-right: auto;
            margin-left: auto;}

header h4 img{
    width:120px;
    height:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right:auto;
    text-align: center;}


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

#banner section{
    background-color:black;
    font-size: 8px;
    color :white;
    width:150px;
    height:20px;
    float:left;
    margin:3px; }
    
    
    
    
section#topmessage{
    width:180px;
    margin-right: auto;
    margin-left:auto;
    margin-top:25px;
    text-align:center;
} 

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;}

    
    
#overview{width:90%;margin-left: auto;margin-right: auto;
         margin-top: 35px;}
    
    #overview #title{text-align: center;font-size: 18px; margin-bottom: 20px;}
    
    p#bigfont{color:red;font-size: 16px; margin-top: 20px;}
    
    #overview #title2{text-align: center;font-size: 18px; margin-bottom: 20px;margin-top: 20px;}
    
    
    p#explain{margin-top: 15px;}
    
    p#explain a{color:black;text-decoration: none;}
    
    p#explain a:hover{color:darkgray;text-decoration: none;}
    
    
    #overview section{margin-top: 40px;}
    
    #overview section #title{text-align: left;font-size: 16px;}
    
    
    #realization{width:90%;margin-left: auto;margin-right: auto;
        margin-top: 80px;
        padding:1% 5% 5% 5%;
        background-color: papayawhip;}
    
    #realization #title h7{font-size:15px;color:red;}
    
    #realization p#wecan{font-weight: bold;}
    
    
    #conclusion{width:95%;padding:3%;background-color: beige}
   
    #conclusion p{color:red;font-weight: bold;margin-top: px;}
    
    #explainform{width:90%;margin-left: auto;margin-right: auto;margin-top: 20px;}


#contact{
    width:80%;
    margin:1000px auto 0px auto;
    text-align: center;}
#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;
    }     
#footernavi a{ color:white;
               text-decoration: none;}
    
    #footernavi a:hover{color:gainsboro;
                        text-decoration: underline;}
    
    
    
    
}




/* 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:#f0fff0; }

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


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

header div{width:100%;
　　　　　　　margin-right: auto;
            margin-left: auto;}

header h4 img{
    width:120px;
    height:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right:auto;
    text-align: center;}


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

#banner section{
    background-color:black;
    font-size: 8px;
    color :white;
    width:150px;
    height:20px;
    float:left;
    margin:3px; }
    
    
    
    
section#topmessage{
    width:180px;
    margin-right: auto;
    margin-left:auto;
    margin-top:25px;
    text-align:center;
} 

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% 10% 2% 10%;;}
    
    #area h2{font-size: 13px;color:white;}

    
    
#overview{width:90%; margin-left: auto;margin-right: auto;
         margin-top: 35px;}
    
    #overview #title{
        max-width: 700px;
        margin-left: auto;margin-right: auto;
        text-align: center;font-size: 18px; margin-bottom: 20px;}
    
    p#bigfont{
        max-width: 550px;
        margin-left: auto;margin-right: auto;
        color:red;font-size: 16px; margin-top: 20px;}
    
    #overview #title2{text-align: center;font-size: 18px; margin-bottom: 20px;margin-top: 20px;}
    
    
    p#explain{
        max-width: 400px;
        margin-left: auto;margin-right: auto;
        margin-top: 15px;}
    
    p#explain a{color:black;text-decoration: none;}
    
    p#explain a:hover{color:darkgray;text-decoration: none;}
    
    
    #overview section{
        max-width: 700px;
        margin-left: auto;margin-right: auto;
        margin-top: 40px;}
    
    #overview section #title{text-align: left;font-size: 16px;}
    
    
    #realization{width:90%;margin-left: auto;margin-right: auto;
        margin-top: 80px;
        padding:1% 5% 5% 5%;
        background-color: papayawhip;}
    
    #realization #title h7{font-size:15px;color:red;}
    
    #realization p#wecan{font-weight: bold;}
    
    
    #conclusion{width:95%;padding:3%;background-color: beige}
   
    #conclusion p{color:red;font-weight: bold;margin-top: px;}
    
    #explainform{width:90%;max-width: 500px; margin-left: auto;margin-right: auto;margin-top: 20px;}


#contact{
    width:80%;
    max-width:500px; 
    margin:1000px auto 0px auto;
    text-align: center;}
#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;
    }     
#footernavi a{ color:white;
               text-decoration: none;}
    
    #footernavi a:hover{color:gainsboro;
                        text-decoration: underline;}

}