@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; }
    
    
    #troble{width:85%;
             margin-left: auto;
             margin-right: auto;
            margin-top: 20px;
            margin-bottom: 20px;
            padding:8px;
            font-size: 13px;
            background-color: whitesmoke;} 
    
    #troble section{width:100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 5px;}
    
    #topimage{width:100%;
              height: 200px;
              margin-left: auto;
              margin-right: auto;}
    
    #topimage div{width:50%;
                  float: left}
    
    #matching{width:100%;
              height:200px;
              padding:2%;}
    
    #matching h6{text-align: center}
    
    
    
    #win{width:80%;
            height:70px;
            margin-left: auto;
            margin-right: auto;}
    #winwin h5{font-size: 14px;
               text-align: center;}
    
    #winwin p{font-size: 12px;}
    
    
    #winwin #lend{width:40%;
          float:left;
          padding:8px;
          background-color: whitesmoke;}
    
    #winwin #borrow{width:40%;
          float: right;
          padding:8px;
          background-color: whitesmoke;}
    
    
    #kind{width:95%;max-width: 500px; height:700px;margin-left: auto;margin-right: auto;}
    
    #kind section#h8{text-align: center;}
    
    #kind #sanmple1{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
   #kind #sanmple2{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple3{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple4{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple5{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple6{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #explain{width:100%;text-align: center;}
   
    #kind #explain p{text-align:left;font-size: 11px;}
    
    
    
    
    #wecan{
        width:100%;
        margin-top: 10px;
        margin-bottom: 50px;}
    
    #wecan section{
        width:80%;
        margin-left: auto;margin-right: auto;
        color:red;}
    
    
    
   #purpose{width:95%;max-width: 500px; height:700px;margin-left: auto;margin-right: auto;}
    
    #purpose section#h8{text-align: center;}
    
    #purpose #sanmple1{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
   #purpose #sanmple2{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple3{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple4{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple5{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple6{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #explain{width:100%;text-align: center;}
   
    #purpose #explain p{text-align:left;font-size: 11px;}
   
   
    
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;
}

    
    #consult{width:100%;margin-left: auto;margin-right: auto;}
    
    #consult #currentstatus{width:80%;margin-left: auto;margin-right: auto;
    margin-top: 30px;
    padding:5%;
    background-color: lightgray;
    }
    
    
      #consult #solution{width:80%;margin-left: auto;margin-right: auto;
    margin-top: 30px;
    padding:5%;}
    
    #consult #solution #title{width:100%;}
    
    #consult #solution #title h2{text-align: center;}
    
    
    
    
 


#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{
    text-align:center;
    margin-top:100px;
}

}

/* タブレット向けのレイアウトの指定：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; }
    
    
    #troble{width:85%;
             max-width: 500px;
             margin-left: auto;
             margin-right: auto;
            margin-top: 20px;
            margin-bottom: 20px;
            padding:8px;
            font-size: 13px;
            background-color: whitesmoke;} 
    
    #troble section{width:100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 5px;}
    
    #topimage{width:100%;
              height: 200px;
              margin-left: auto;
              margin-right: auto;}
    
    #topimage div{width:50%;
                  float: left}
    
    #matching{width:100%;
              max-width: 700px;
            margin-left: auto;
            margin-right: auto;
              height:200px;
              margin-top: 130px;
              padding:2%;}
    
    #matching h6{text-align: center}
    
    
    
    #win{width:80%;
            height:70px;
            margin-left: auto;
            margin-right: auto;}
    #winwin h5{font-size: 14px;
               text-align: center;}
    
    #winwin p{font-size: 12px;}
    
    
    #winwin #lend{width:40%;
          float:left;
          padding:8px;
          background-color: whitesmoke;}
    
    #winwin #borrow{width:40%;
          float: right;
          padding:8px;
          background-color: whitesmoke;}
    
    
    #kind{width:95%;max-width: 500px; height:700px;margin-left: auto;margin-right: auto;}
    
    #kind section#h8{text-align: center;}
    
    #kind #sanmple1{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
   #kind #sanmple2{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple3{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple4{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple5{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple6{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #explain{width:100%;text-align: center;}
   
    #kind #explain p{text-align:left;font-size: 11px;}
    
    
    
    
    #wecan{
        width:100%;
        margin-top: 10px;
        margin-bottom: 50px;}
    
    #wecan section{
        width:80%;
        max-width: 440px;
        margin-left: auto;margin-right: auto;
        color:red;}
    
    
    
   #purpose{width:95%;max-width: 500px; height:700px;margin-left: auto;margin-right: auto;}
    
    #purpose section#h8{text-align: center;}
    
    #purpose #sanmple1{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
   #purpose #sanmple2{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple3{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple4{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple5{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple6{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #explain{width:100%;text-align: center;}
   
    #purpose #explain p{text-align:left;font-size: 11px;}
   
   
    
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;
}

    
    #consult{width:100%;
        max-width: 700px;
        margin-left: auto;margin-right: auto;}
    
    #consult #currentstatus{width:80%;margin-left: auto;margin-right: auto;
    margin-top: 30px;
    padding:5%;
    background-color: lightgray;
    }
    
    
      #consult #solution{width:80%;margin-left: auto;margin-right: auto;
    margin-top: 30px;
    padding:5%;}
    
    #consult #solution #title{width:100%;}
    
    #consult #solution #title h2{text-align: center;}
    
    
    
    #explainform{width:80%;
                 max-width: 400px;
                 margin-left: auto;margin-right: auto;}


#contact{
    width:80%;
    margin:1000px auto 100px auto;;
    text-align: center;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}



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


footer{
    text-align:center;
    margin-top:100px;}
    
}


/* 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; }
    
    
    #troble{width:85%;
             max-width: 500px;
             margin-left: auto;
             margin-right: auto;
            margin-top: 20px;
            margin-bottom: 20px;
            padding:8px;
            font-size: 13px;
            background-color: whitesmoke;} 
    
    #troble section{width:100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 5px;}
    
    #topimage{width:100%;
              max-width: 1500px;
              height: 200px;
              margin-left: auto;
              margin-right: auto;}
    
    #topimage div{width:50%;
                  float: left}
    
    #matching{width:100%;
              max-width: 700px;
            margin-left: auto;
            margin-right: auto;
              height:200px;
              margin-top: 340px;
              padding:2%;}
    
    #matching h6{text-align: center}
    
    
    
    #win{width:80%;
            height:70px;
            margin-left: auto;
            margin-right: auto;}
    #winwin h5{font-size: 14px;
               text-align: center;}
    
    #winwin p{font-size: 12px;}
    
    
    #winwin #lend{width:40%;
          float:left;
          padding:8px;
          background-color: whitesmoke;}
    
    #winwin #borrow{width:40%;
          float: right;
          padding:8px;
          background-color: whitesmoke;}
    
    
    #kind{width:95%;max-width: 500px; height:700px;margin-left: auto;margin-right: auto;}
    
    #kind section#h8{text-align: center;}
    
    #kind #sanmple1{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
   #kind #sanmple2{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple3{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple4{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple5{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #sanmple6{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #kind #explain{width:100%;text-align: center;}
   
    #kind #explain p{text-align:left;font-size: 11px;}
    
    
    
    
    #wecan{
        width:100%;
        margin-top: 10px;
        margin-bottom: 50px;}
    
    #wecan section{
        width:80%;
        max-width: 440px;
        margin-left: auto;margin-right: auto;
        color:red;}
    
    
    
   #purpose{width:95%;max-width: 500px; height:700px;margin-left: auto;margin-right: auto;}
    
    #purpose section#h8{text-align: center;}
    
    #purpose #sanmple1{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
   #purpose #sanmple2{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple3{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple4{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple5{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #sanmple6{width:45%;
              height:180px;
                  margin:1.5%;
                  padding:1%;
                  float:left;}
    
    #purpose #explain{width:100%;text-align: center;}
   
    #purpose #explain p{text-align:left;font-size: 11px;}
   
   
    
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;
}

    
    #consult{width:100%;
        max-width: 700px;
        margin-left: auto;margin-right: auto;}
    
    #consult #currentstatus{width:80%;margin-left: auto;margin-right: auto;
    margin-top: 30px;
    padding:5%;
    background-color: lightgray;
    }
    
    
      #consult #solution{width:80%;margin-left: auto;margin-right: auto;
    margin-top: 30px;
    padding:5%;}
    
    #consult #solution #title{width:100%;}
    
    #consult #solution #title h2{text-align: center;}
    
    
    
    #explainform{width:80%;
                 max-width: 400px;
                 margin-left: auto;margin-right: auto;}


#contact{
    width:80%;
    margin:1000px auto 100px auto;;
    text-align: center;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}



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


footer{
    text-align:center;
    margin-top:100px;}


}