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

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


#yaseruramen{width:95%;
             margin-top: 15px;
             margin-left: auto;
             margin-right: auto;}

#yaseruramen img{width:100%;
                     max-width: 400px;}

#shef{width:85%;
             margin-top: 15px;
             margin-left: auto;
             margin-right: auto;}

#shef img{width:100%;
                 margin-top:20px;
                 margin-bottom:20px;}

#media{width:100%;
       background-color: #b0c4de}
#media h4{text-align: center;}

#full{width:100%;}

#full article{width:80%;
              margin-top: 10px;
              margin-left: auto;
              margin-right: auto;}
#full article #photo {width:100%;}
#full article #photo img{width:100%;}


#apeal{width:100%;}

#colorbox{width:100%;
          margin-top: 14px;
          margin-bottom: 14px;
          margin-left: auto;
          margin-right: auto;}

p#large{font-size: 14px;}

p#small{font-size: 10px;
         color:red;}

#because h5{
    font-size: 17px;
    text-align: center;}

p#soup{width:80%;
       margin-right: auto;
       margin-left: auto;
       padding:13px;}

#ramenphoto{width:80%;
            margin-left: auto;
            margin-right: auto;
            margin-top:15px;}
#ramenphoto img{ width:100%;}

article#detailoil1{width:90%;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 10px;
                   color:green;}

article#detailoil2{width:90%;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 10px;
                   color:green;}
P#decit{width:80%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 25px;
        margin-top: 10px;}
        
p#yakuzen{width:90%;
          margin-left: auto;
          margin-left: auto;}

p#contain{width:100%;
          margin-left: auto;
          margin-right: auto;
          text-align: left;}

#rameninformatmion{width:80%;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 30px;
                   font-size: 10px;}
#originalramen{width:90%;
               margin-left: auto;
               margin-right: auto;
               margin-top: 35px;}

p#fightcolormen{width:88%;
               margin-left: auto;
               margin-right: auto;
               font-size: 18px;}
p#color{font-size: 10px;}

p#effect{font-size: 14px;
         color:red;}

p#script{font-size: 10px;}



div#eatvideo{width:90%;
             margin-left: auto;
             margin-right: auto;}
div#name{width:100%;
         text-align: center; }

div#eatvideo h10{
         width:100%;
         padding-top:10px; }
#youtube{
  position: relative;
  width: 80%;
    margin:5px auto;
  padding-top: 56.25%;
}
#youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;}



#contact{
    width:80%;
    margin:40px auto;
    text-align: center;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}
#contact img{
    width:30%;
    height:40px;
    float:left;
    margin:5px;
}

#explainform{margin-top: 50px;}

 #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:antiquewhite; }

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:70%;
    margin-left: auto;
    margin-right: auto;
}
    
    #condition #title{text-align: center;
                      margin-top: 20px;
                      font-size: 15px;}
    
    

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



#yaseruramen{width:95%;
             max-width: 600px;
             margin-top: 15px;
             margin-left: auto;
             margin-right: auto;}

#yaseruramen img{width:100%;}

#shef{width:85%;
           
             max-width: 400px;
             margin-top: 15px;
             margin-left: auto;
             margin-right: auto;}

#shef img{width:100%;
                 margin-top:20px;
                 margin-bottom:20px;}

#media{width:100%;
       max-width: 500px;
       height:1300px;
       margin-left: auto;
       margin-right: auto;
       background-color: #b0c4de}
#media h4{text-align: center;}

#full{width:100%;}

#full article{width:45%;
              height:400px;
              margin-top: 10px;
              margin-left: 2.5%;
              margin-right: 2.5%;
              float: left;}
#full article #photo {width:100%;}
#full article #photo img{width:100%;}


#apeal{width:100%;}

#colorbox{width:100%;
          margin-top: 14px;
          margin-bottom: 14px;
          margin-left: auto;
          margin-right: auto;
          text-align: center;}
    
    #widthsize{width:70%;
               margin-left: auto;
               margin-right: auto;}
       
    

p#large{font-size: 14px;}

p#small{font-size: 10px;
         color:red;}

#because h5{
    font-size: 17px;
    text-align: center;}

p#soup{width:80%;
       margin-right: auto;
       margin-left: auto;
       padding:13px;}

#ramenphoto{width:80%;
            margin-left: auto;
            margin-right: auto;
            margin-top:15px;}
#ramenphoto img{ width:100%;}

article#detailoil1{width:90%;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 10px;
                   color:green;}

article#detailoil2{width:90%;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 10px;
                   color:green;}
P#decit{width:60%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 25px;
        margin-top: 10px;}
        
p#yakuzen{width:100%;
          text-align: center;
          margin-top: 20px;
          margin-left: auto;
          margin-left: auto;}

p#contain{width:100%;
          margin-left: auto;
          margin-right: auto;
          text-align: center;}

#rameninformatmion{width:100%;
                   text-align: center;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 30px;
                   font-size: 10px;}
#originalramen{width:90%;
               margin-left: auto;
               margin-right: auto;
               margin-top: 35px;}

p#fightcolormen{width:100%;
               text-align: center;
               margin-left: auto;
               margin-right: auto;
               font-size: 18px;}
p#color{
    width:100%;
    text-align: center;
    font-size: 10px;}

p#effect{
         width:100%;
         text-align: center;
         font-size: 14px;
         color:red;}

p#script{
    width:100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-size: 10px;}



div#eatvideo{width:90%;
             margin-left: auto;
             margin-right: auto;}
div#name{width:100%;
         text-align: center; }

div#eatvideo h10{
         width:100%;
         padding-top:10px; }
#youtube{
  position: relative;
  width: 80%;
    margin:5px auto;
  padding-top: 56.25%;
}
#youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;}


    

#contact{
    width:80%;
    margin:900px auto 10px auto;;
    text-align: center;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}
#contact img{
    width:30%;
    height:40px;
    float:left;
    margin:5px;
}

#explainform{margin-top: 50px;
             width:80%;
             margin-left:auto;
             margin-right:auto;}

 #contactphoto{font-size: 18px;
                  text-align:left;}
    
    
footer{
    text-align:center;
}

    
}



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

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:50%;
    margin-left: auto;
    margin-right: auto;
}
    
    #condition #title{text-align: center;
                      margin-top: 20px;
                      font-size: 15px;}
    

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

#yaseruramen{width:95%;
             max-width: 600px;
             margin-top: 15px;
             margin-left: auto;
             margin-right: auto;}

#yaseruramen img{width:100%;}

#shef{width:85%;
           
             max-width: 400px;
             margin-top: 15px;
             margin-left: auto;
             margin-right: auto;}

#shef img{width:100%;
                 margin-top:20px;
                 margin-bottom:20px;}

#media{width:100%;
       max-width: 500px;
       height:1300px;
       margin-left: auto;
       margin-right: auto;
       background-color: #b0c4de}
#media h4{text-align: center;}

#full{width:100%;}

#full article{width:45%;
              height:400px;
              margin-top: 10px;
              margin-left: 2.5%;
              margin-right: 2.5%;
              float: left;}
#full article #photo {width:100%;}
#full article #photo img{width:100%;}


#apeal{width:100%;}

#colorbox{width:100%;
          margin-top: 14px;
          margin-bottom: 14px;
          margin-left: auto;
          margin-right: auto;
          text-align: center;}
    
    
    #widthsize{width:70%;
               max-width: 500px;
               margin-left: auto;
               margin-right: auto;}

p#large{font-size: 14px;}

p#small{font-size: 10px;
         color:red;}

#because h5{
    font-size: 17px;
    text-align: center;}

p#soup{width:80%;
       margin-right: auto;
       margin-left: auto;
       padding:13px;}

#ramenphoto{width:80%;
            margin-left: auto;
            margin-right: auto;
            margin-top:15px;}
#ramenphoto img{ width:100%;}

article#detailoil1{width:90%;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 10px;
                   color:green;}

article#detailoil2{width:90%;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 10px;
                   color:green;}
P#decit{width:60%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 25px;
        margin-top: 10px;}
        
p#yakuzen{width:100%;
          text-align: center;
          margin-top: 20px;
          margin-left: auto;
          margin-left: auto;}

p#contain{width:100%;
          margin-left: auto;
          margin-right: auto;
          text-align: center;}

#rameninformatmion{width:100%;
                   text-align: center;
                   margin-left: auto;
                   margin-right: auto;
                   margin-top: 30px;
                   font-size: 10px;}
#originalramen{width:90%;
               margin-left: auto;
               margin-right: auto;
               margin-top: 35px;}

p#fightcolormen{width:100%;
               text-align: center;
               margin-left: auto;
               margin-right: auto;
               font-size: 18px;}
p#color{
    width:100%;
    text-align: center;
    font-size: 10px;}

p#effect{
         width:100%;
         text-align: center;
         font-size: 14px;
         color:red;}

p#script{
    width:100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-size: 10px;}

div#eatvideo{width:90%;
    　　　　  max-width: 500px;
             margin-left: auto;
             margin-right: auto;}
div#name{width:100%;
         text-align: center; }

div#eatvideo h10{
         padding-top:10px; }
#youtube{
  position: relative;
  width: 80%;
    margin:5px auto;
  padding-top: 56.25%;
}
#youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;}


    

#contact{
    width:80%;
    max-width: 500px;
    margin:880px auto 10px auto;
    text-align: center;}
#contact div#contactphoto{
    width:80%;
    margin:0 auto;}
#contact img{
    width:30%;
    height:40px;
    float:left;
    margin:5px;
} 
    
    
          

    
 #contactphoto{font-size: 18px;
                  text-align:left;}
    
    
#explainform{margin-top: 50px;
             width:80%;
             max-width: 500px;
             margin-left:auto;
             margin-right:auto;}

 #contactphoto{font-size: 18px;
                  text-align:left;}    
    
    
footer{
    text-align:center;
}
    
}