@charset "utf-8";
/* ----------------------------------
              COMMON
---------------------------------- */
body { margin:0px auto 0px auto;
       font-family:'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
       background:#fff;}
header,section,article,aside,footer{ 	display: block;}
img{ margin:0;padding:0;border:none;display:block;}
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}
/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#0000ff;text-decoration:none;}
a:visited{ color:#0000ff;text-decoration:none;}
a:hover{ color:#ff0000;	text-decoration:underline;}
a:active{ color:#298ADC;text-decoration:none;}
/*-------------------------------------
             PC TB SP
-------------------------------------*/
.pc { display:block; }
.tb { display:none; }
.sp { display:none; }
.pctb { display:block; }
.sptb  { display:none; }
  @media screen and (max-width : 769px){
     .pc { display:none; }
     .tb { display:block; }
     .sp { display:none; }
     .pctb { display:block; }
     .sptb  { display:block; }
  }
  @media screen and (max-width : 480px) { 
     .pc { display:none; }
     .tb { display:none; }
     .sp { display:inline-block; }
     .pctb { display:none; }
     .sptb  { display:block; }
  }
/*-------------------------------------
	     Header
-------------------------------------*/
body { width:100%; margin:0px auto;font-size:14px;}
header { width:100%; text-align:center; margin:0px auto; padding:0px; background:#333; }
header ul { width:400px; text-align:center; margin:0px auto;
    display:flex;
    flex-wrap:wrap;
        justify-content:space-evenly;
}
header li { width:25%; padding:25px 0; text-align:center; }
header li a { display:block;text-decoration:none;}
header li a:link { color:#fff; }
header li a:visited { color:#fff; }
header ul li i.fas {
    padding-top:4px;
}
header ul li i.fas span {
    background: #ff0000;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: -6px;
}


header ul.admin { width:700px;  }
header ul.admin li { float:right; width:33%; padding:25px 0; text-align:center; }


  @media screen and (max-width : 768px){ 
  }
  @media screen and (max-width : 480px) { 
       header ul { width:100%; }
  }
/*-------------------------------------
	   Main Contents
-------------------------------------*/
main { 
    width : 100% ;  
    margin:0px auto 0 auto; 
    padding-bottom:10px; 
}
main.system {
    padding-bottom:100px;
}

article { margin:0px auto 0px auto; width:400px; }
article.topPage { max-width:900px; width:100%;
}
article.admin { width:700px; }
article.userList { width:100%; }

h1 { width:100%;  margin:0 auto; padding:30px 0; text-align:center;  }
h1.topImage { 
    max-width:1000px;
    padding:0; }
h1 img { width:100%; }
h2 { text-align:center; font-size:16px;  padding:10px 0;}
h3 { text-align:center; font-size:16px;  padding:10px 0;}
table.formTable { width:100%; }

  @media screen and (max-width : 768px){
  }
  @media screen and (max-width : 480px) {
      article { width:100%; }
  }
/*-------------------------------------
	     Top Page
-------------------------------------*/
#topInstruction  {
    max-width:900px;
    width:98%;
    margin:0 auto;
}
#topInstruction h4 {
    text-align:center;
    font-weight:normal;
    font-size:14px;
}
#topInstruction p span {
    color:#ff0000;
    font-weight:bold;
}
    @media screen and (max-width : 480px) {
        #topInstruction h2.ramenTitle {
            font-size:5.3vmin;
        }
        #topInstruction h3.ramenTitle {
            font-size:3.8vmin;
        }
        #topInstruction h4 {
            font-size:3.8vmin;
        }
}

h2.groupTitle { 
    text-align:center;
    font-size:20px;
    margin:20px auto;
    border-top:#ff0000 1px solid;
    border-bottom:#ff0000 1px solid;
}
.menuBox {
    display:flex;
    flex-wrap:wrap;
}
.topBox { 
    width:98%;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
}
.topBox div.ramenDesc  {
    width:68%;
    margin:20px auto;
}
.topBox div.ramenDesc  h2 {
    text-align:left;
}
div.priceBox {
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-end;
    margin:20px auto ;
}
div.priceBox div {
    width:55px;
    text-align:center;
}
div.priceBox div.price {
    width:100px;
}
div.priceBox div.price h3 {
    padding:5px 0;
}
div.priceBox div  select.count {
    color:#fff;
    font-weight:bold;
    border:1px #d70f64 solid;
    background: #d70f64;
    border-radius: 5px;
    padding: 6px 10px;
}
div.priceBox div  .btn-sm{
    width:50px;
    height:30px;
    padding:6px 14px;
    margin-left:5px;
    border:1px #d70f64 solid;
    background: #d70f64;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
}
.topBox div.ramenDesc p {
    width:80%;
}
.topBox div.ramenImage  {
    width:23%;
    margin:20px auto;
}
.topBox div.ramenImage p img {
    width:100%;
    max-width:200px;
    height:auto;
}
    @media screen and (max-width : 768px) {
        div.priceBox div  select.count {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 6px 11px;
            width:50px;
            height:30px;
        }
    }
    @media screen and (max-width : 480px) {
        h2.groupTitle { 
            margin:10px auto;
        }
        .topBox div.ramenDesc  {
            width:63%;
        }
        .topBox div.ramenDesc  h3 {
            font-size:18px;
        }
        div.priceBox {
            justify-content: flex-start;
        }
        div.priceBox div.price {
            width:100px;
        }
        .topBox div.ramenDesc  p {
            width:100%;
            font-size:11px;
        }
        .topBox div.ramenDesc  h2 {
            padding:0px;
        }
        .topBox div.ramenImage  {
            width:33%;
            margin:20px auto;
        }

}

.drinkImage { 
    width:100%;
    margin:10px 0;
}
.drinkImage img {
    width:100%;
}

.drinkBox { 
    width:48%;
    margin:5px auto;
    display:flex;
    flex-wrap:wrap;
    border:1px #ccc solid;
}
.drinkBox div.drinkLeft  {
    width:38%;
    margin:20px auto;
}
.drinkBox div.drinkRight  {
    width:58%;
    margin:20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.drinkBox div  div{
    width:100%;
    margin:0px;
}
.drinkBox div  div div {
    width:25%;
    margin:0px;
}
.drinkBox div.priceBox div.price {
    width: 45%;
}
.drinkBox h3 span{
    padding:0 10px;
    margin-left:20px;
    text-align:center;
    border:1px #d70f64 solid;
    background: #d70f64;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
}



    @media screen and (max-width : 768px) {
        .drinkBox div div { 
            justify-content: flex-start;
        }
    }
    @media screen and (max-width : 630px) {
        .drinkBox { 
            width:98%;
        }
    }
/*-------------------------------------
	        ASIDE
-------------------------------------*/
aside.topPage { 
    max-width:800px; 
    width:100%;
    margin:0 auto;
    padding-bottom:100px;
}
aside h2.ramenTitle {
    text-align:center;
    font-size:20px;
    margin:30px auto 10px;
    border-top:#ff0000 1px solid;
    border-bottom:#ff0000 1px solid;
}
aside h4 {
    text-align:center;
    font-weight:normal;
    font-size:14px;
}
aside p span {
    color:#ff0000;
    font-weight:bold;
}

aside div.termsCon {
    height:300px;
    overflow-y:scroll;
    max-width: 600px;
    margin:0 auto;
    padding:10px;
}
aside div.termsCon ul {

}
aside div.termsCon ul li {
    position:relative;
	padding-left:20px;
    margin: 5px 0px;
}
aside div.termsCon ul.teramsPar li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#aaa;
	width:9px;
	height:9px; 
	top:5px; 
	left:5px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
aside div.termsCon ul.termsChild li {
    margin-left:0px;
}

aside div.termsCon ul.termsChild li:before
 {
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:3px; 
	left:2px; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #aaa;
}

aside div.termsCon ul.teramsPar li span {
    margin-left:20px;
}
aside div.termsCon ul.teramsPar li span:after
 {
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	bottom:4px; 
	left:22px; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #aaa;
}
aside div.termsCon ul.termsChild li:after {
    display:none;
}
aside div.termsCon::-webkit-scrollbar {
  width: 8px;
}
aside div.termsCon::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}
aside div.termsCon::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

    @media screen and (max-width : 600px) {
        aside div.termsCon {
            width:94%;
        }
    }
    @media screen and (max-width : 480px) {
        aside div.termsCon {
            height:200px;
            margin:0 auto;
        }
    }
/*-------------------------------------
	        ASIDE SNS
-------------------------------------*/
aside #bottomSns  {
    padding-bottom:20px;
}
aside #bottomSns h2 {
    background:#999;
    color:#fff;
    margin-top:30px;
    padding:20px 0;
    font-size:24px;
}
aside #bottomSns div.snsBox {
    background:#f8f8f8;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    width:100%;
    margin:0;
}
aside #bottomSns div.snsBox p {
    width:25%;
}
aside #bottomSns div.snsBox p img {
    width:100%;
}

    @media screen and (max-width : 480px) {
        aside #bottomSns  {
            padding-bottom:0px;
            width:100%;
            margin:0;
        }
        aside div {
            width:98%;
            margin:0 1%;
        }
        aside h2.ramenTitle {
            font-size:5.3vmin;
        }
        aside h3.ramenTitle {
            font-size:3.8vmin;
        }
        aside h4 {
            font-size:3.8vmin;
        }
}
    /*-------------------------------------
                Google Map
    -------------------------------------*/
.gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}
.gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
/*-------------------------------------
                    CART
-------------------------------------*/
.cartlist {
    max-width:700px;
    margin:10px auto;
    width:98%
}
table.cart-table {
    width:100%;
    border-color:#eee;
}
table.cart-table thead {
    color:#fff;
    background:#555;
}
table.cart-table th, table.cart-table td {
    padding:5px 10px;
    border:1px #fff solid;
}
table.cart-table td, table.cart-table tbody th {
    background:#fafbc5;
}
table.cart-table button {
    border:none;
    background:#dcdffb;
    border-radius:5px;
}
.cart-btn {
    width: 90%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}
.cart-btn-center {
    width: 90%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}
.cart-btn button, .cart-btn-center button {
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px #ccc solid;
    color:#fff;
    font-weight:bold;
    background:#005FFF;
}

#topInstruction .freeDeli {
    text-align:right;
    font-weight:bold;
}

    @media screen and (max-width : 480px) {
        table.cart-table {
            font-size:12px;
        }
        table.cart-table button {
            font-size:12px;
        }
        table.cart-table th, table.cart-table td {
            padding:5px;
        }
        #topInstruction .freeDeli {
            text-align:left;
        }
}
/*-------------------------------------
            Purchaser information
-------------------------------------*/
div.cartlist form.pay-form {
    width:100%;
    max-width:500px;
    margin:10px auto;
}
div.cartlist form.pay-form-conf {
    max-width:400px;
}
div.cartlist form.pay-form-radio {
    max-width:300px;
}
div.cartlist form.pay-form input,
div.cartlist form.pay-form select {
    width:95%;
    margin:5px auto 10px;
    height:40px;
    border-radius:10px;
    border: 1px #ccc solid;
}
div.cartlist form.pay-form button {
    color: #fff;
    font-weight: bold;
    width: 40%;
    margin: 25px auto 10px;
    height: 40px;
    border-radius: 10px;
    border: 1px #ccc solid;
    background: #005FFF;
}
div.submit-group {
    width:100%;
    text-align:center;
}
div.cartlist div.submit-group-info button {
    color: #fff;
    font-weight: bold;
    width: 40%;
    margin: 25px auto 10px;
    height: 40px;
    border-radius: 10px;
    border: 1px #ccc solid;
    background: #005FFF;
}

div.cartlist form.pay-form div.form-group .form-title,
div.cartlist form.pay-form div.form-group-radio .form-title
 {
    font-weight:bold;
}
div.cartlist form.pay-form div.form-group p.formContents
 {
    margin:5px 0 15px 20px; 
}
.wrapper-body {
    text-align:center;
}
div.thanks {
    margin-bottom: 40px;
}
div.thanks_info {
    max-width:480px;
    margin:20px auto;
}
div.gcash {
    text-align:left;
}
div.thanks h4 {
    margin-top: 20px;
}
div.thanks img {
    max-width:400px;
    width:80%;
    margin:0px auto;
}
/*-------------------------------------
            Peyment Method
-------------------------------------*/
.form-group-radio {
    display:flex;
    flex-wrap:wrap;
    margin:5px 0;
}
div.cartlist form.pay-form .form-group-radio input {
    width: 50px;
    margin: 0px auto 10px;
    height: 20px;
    border-radius: 10px;
    border: 1px #ccc solid;
}
.bank_info {
    max-width: 400px;
    text-align: left;
    width: 100%;
    border: 1px #ccc solid;
    padding: 20px;
    margin: 20px auto;
    font-weight: bold;
}
.bank_info p.bankAccount {
    margin: 5px 0 10px 15px;
}

/*-------------------------------------
                    LOGIN
-------------------------------------*/
.loginBox {
    max-width:500px;
    width:98%;
    margin: 20px auto;
    text-align:center;
}
.loginBox input { 
    width:96%; 
    padding:14px 1%; 
    border-radius:8px;
    border:none; 
    background:#eee; 
    font-family:Arial; 
    font-size:16px; 
}

.loginBox .fbLogIn {
    margin:20px auto;
    text-align:center;
}
.loginBox .fbLogIn img {
    margin:0px auto;
}

.loginBox input.submit, .loginBox button.submit { 
    color:#fff;
    font-weight:bold;
    width:50%; 
    margin:20px auto 10px;
    padding:20px 1%; 
    border-radius:8px; 
    border:none; 
    cursor:pointer; 
    background-color:rgba(255, 102, 0, 0.8);  
}
.loginBox input.submit:hover { 
    background-color:rgba(255, 102, 0, 1.0);  
}

    @media screen and (max-width : 480px) {
        .loginBox {
            margin: 10px auto;
        }
        .loginBox .form-group h3 {
            padding: 3px 0;
        }
        .loginBox input.submit, .loginBox button.submit { 
            margin:15px auto 10px;
            padding:15px 1%; 
        }
}
/*-------------------------------------
	   ADMIN
-------------------------------------*/
#adminBox { width:calc(100% - 4% - 40px); margin:10px 2%; padding:10px 20px 20px; 
            border:3px #ccc solid; border-radius:20px; }
#adminBox .mainBox p { margin-left:40px; }
#adminBox h3 { width:100%; border-bottom:1px #ccc solid; margin:15px 0; }
/*-------------------------------------
	   CONTACT
-------------------------------------*/
#contactBox { 
    max-width:500px; 
    margin:10px auto; 
    padding:10px; 
}
#contactBox h3 { 
    text-align:left;
}

#contactBox .contactTex { width: 100%; margin:10px 0; }

#contactBox .contactTex input { width:96%; padding:14px 1%; border-radius:8px;
                   border:none; background:#eee; font-family:Arial; font-size:16px; }

#contactBox .contactCheckBox { clear:both; float:left; font-size:16px; color:#555; width:53%; padding:14px 1%; 
              margin:10px 0 0 0; border-radius:8px; border:none; background:#eee; }
#contactBox .contactSelect { float:left;  width:40%; padding:0; 
              margin:10px 0 0 3%; border:none; background:none; }

#contactBox .selectBox { width:90%; color:#555; font-size:16px; padding:15px;
              border:1px #aaa solid; border-radius:8px; background:#f5feff; }

#contactBox .contactArea { clear:left; width:100%; padding:10px 0;  }
#contactBox .contactArea textarea.message { width:96%; height:70px; color:#555; padding:14px 1%; 
          border-radius:8px; border:none; background:#eee; font-family:Arial; font-size:16px;}

#contactBox .contactTex input.submit { clear:left; width:50%; padding:20px 1%; border-radius:8px; margin:10px 0 0 10px;
          border:none; cursor:pointer; background-color:rgba(255, 102, 0, 0.8);  }
#contactBox .contactTex input.submit:hover { background-color:rgba(255, 102, 0, 1.0);  }

  @media screen and (max-width : 480px) {
        #contactBox { width:90%; }
        .contactBox { width:90%; margin:0px auto 10px; padding:10px;
                border:3px #fff solid; border-radius:20px; }
  }

#contactForm { margin:10px; }
#contactForm .goBack { width:100%; text-align:center; margin-top:50px; font-size:16px; font-weight:bold; }
#contactForm table { table-layout:fixed; width:100%; }
#contactForm .formTable { width:96%;margin:10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:69%;padding:5px;word-wrap:break-word; }
#contactForm .formTable th { width:29%;padding:5px; }
#contactForm .contactTex input.submit { clear:left; width:50%; padding:20px 1%; border-radius:8px; margin:10px 0 0 10px;
          border:none; cursor:pointer; background-color:rgba(255, 102, 0, 0.8);  }
#contactForm .contactTex input.submit:hover { background-color:rgba(255, 102, 0, 1.0);  }

  @media screen and (max-width : 480px) {
    #contactForm { margin:30px 5px 20px 3px; }
  }

#orderForm { margin:0; }
#orderForm .goBack { width:100%; text-align:center; margin-top:50px; font-size:16px; font-weight:bold; }
#orderForm table { table-layout:fixed; width:100%; }
#orderForm .formTable { margin:0; border-spacing:0;border-collapse:collapse; }
#orderForm .formTable td { width:100%; word-wrap:break-word; }
#orderForm .formTable th { width:100%;  }
#orderForm .contactTex input.submit { clear:left; width:50%; padding:20px 1%; border-radius:8px; margin:10px 0 0 10px;
          border:none; cursor:pointer; background-color:rgba(255, 102, 0, 0.8);  }
#orderForm .contactTex input.submit:hover { background-color:rgba(255, 102, 0, 1.0);  }

  @media screen and (max-width : 480px) {
    #orderForm { margin:30px 5px 20px 3px; }
  }
/*-------------------------------------
	     Footer
-------------------------------------*/
footer { width:100%;text-align:center;margin:0px auto; padding:0px auto 20px;
          position:fixed; bottom:0; background:#333; }
footer ul { width:400px; text-align:center; margin:0px auto; 
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
}
footer li { width:25%; padding:25px 0; text-align:center; }
footer li a { color:#fff; display:block;text-decoration:none;}
footer li a:link { color:#fff; }
footer li a:visited { color:#fff; }

address { color:#fff; clear:both; font-weight:bold; font-size: 12px; text-align:center;
          padding-bottom: 10px; margin:0px auto; }

  @media screen and (max-width : 480px) {
       footer ul { width:100%; }
  }