/**/

/*COMMON*/
.sunday{
    color: red;
    width: 8vmin;
    margin: 1vmin;
    font-size: 4vmin;
    text-align: center;
}

.saturday{
    color: blue;
    width: 8vmin;
    margin: 1vmin;
    font-size: 4vmin;
    text-align: center;
}

.logincontent{
    background-color: white;
    height: 80vh;
    width: 90vw;
    margin-top: 10vh;
    margin-left: 5vw;
    border-radius: 6vmin;
    overflow: scroll;
}

.inputbar{
    width: 60vw;
    height: 30px;
    margin-left: 5vw;
    font-size: 18px;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    color: #767676;
}

#loginbutton{
    width: 60px;
    height: 60px;
    background-color: #767676;
    border-radius: 30px;
    border: none;
    margin-top: 30px;
    margin-left: calc(45vw - 7.5vmin);
}

#resistorbutton{
    width: 60px;
    height: 60px;
    background-color: #767676;
    border-radius: 30px;
    border: none;
    margin-top: 30px;
    margin-left: calc(45vw - 7.5vmin);
}

.loginicon{
    font-size: 35px;
}

.registor{
    font-size: 35px;
}


.gotobutton{
    height: 35px;
    width: 50vmin;
    font-size: 4vmin;
    background-color: #FED093;
    color: white;
    border: none;
    border-radius: 2vmin;
    margin-top: 300px;
    margin-left: calc(45vw - 25vmin);
}

a{
    display: block;
}

button{
    display: block;
}

.fixedtab {
    background: linear-gradient(to right, #8DECC9, #137193);
    width: 100vw;
    height: 15vh;
    position: fixed;
    border-radius: 6vmin 6vmin 0vw 0vw;
    border: none;
}

.maincontent{
    margin-top: 16vh;
    margin-bottom: 1vh;
    height: 83vh;
    overflow-y: scroll;
}

.leftbutton{
    height:15vmin;
    width: 15vmin;
    background: none;
    border: none;
    position: fixed;
}

.rightbutton{
    height:15vmin;
    width: 15vmin;
    margin-left: calc(100vw - 15vmin);
    background: none;
    border: none;
    position: fixed;
}

.material-icons{
    color: white;
    text-align: center;
}

.chevron{
    font-size: 10vmin;
}

.book{
    font-size: 9vmin;
}

.close{
    font-size: 8vmin;
}

.add{
    font-size: 8vmin;
}

.search{
    font-size: 20px;
}

.title{
    font-size: 7vmin;
    color: white;
    text-align: center;
    margin-top: calc(15vh - 9vmin);
    width: 100vw;
    height: 9vmin;
    position: fixed;
}

.tabbutton{
    text-align: center;
    margin-top: calc(15vh - 14vmin);
    margin-left: calc(100vw - 14vmin);
    width: 12vmin;
    height: 12vmin;
    background: none;
    border-color: white;
    border-radius: 6vmin;
    border-style: solid;
    position: fixed;
}

/*HOME*/
#logoutbutton{
    margin-left: 2vmin;
    margin-top: calc(83vh - 20vmin);
    position: fixed;
    width: 30vmin;
    height: 8vmin;
    background-color: #767676;
    color: #c0c0c0;
    border-radius: 2vmin;
    border: none;
}

#recipebutton{
    margin-left: calc(100vw - 20vmin);
    margin-top: calc(83vh - 25vmin);
    position: fixed;
    width:15vmin;
    height: 15vmin;
    background-color: #FED093;
    border-radius: 7.5vmin;
    border: none;   
}

.datebar{
    min-height: 100px;
    width: 86vw;
    margin-left: 7vw;
    border-width: 0px 0px 1.5px 0px;
    border-color: #767676;
    border-style: solid;
    display: flex;
    align-items: center;
}

.day{
    color: #767676;
    width:8vmin;
    margin: 1vmin;
    font-size: 4vmin;
    text-align: center;    
}

.date{
    background-color: #767676;
    height: 10vmin;
    width: 10vmin;
    border-radius: 5vmin;
    color: white;
    border: none;
    font-size: 4vmin;
    text-align: center;
}
.menucontainer{
    display: frex;
    flex-direction: column;
    margin-left: 2vmin;
    width: calc(86vw - 10vmin - 10vmin - 2vmin);
}

.menulist{
    background-color: #C4A8FC;
    color: white;
    margin: 5px 0 5px 0;
    width: calc(86vw - 10min - 10vmin - 2vmin); 
    min-height: 26px;
    border-radius: 5px; 
    font-size: 18px;
    text-align: left;
    padding-left:5px;
    line-height: 26px;
}

.gap{
    height: 25vw;
}

/*RECIPE*/
.searchbox{
    display: flex;
    width: 70vw;
    margin-left: 15vw;
    height: 34px;
}

#searchrecipe{
    width: 52vw;
    height: 32px;
    font-size: 22px;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    color: #767676;
}

#searchbutton{
    margin-left: 3vw;
    width: 15vw;
    height: 34px;
    border: none;
    border-radius: 5px;
    background-color: #767676;
}

#recipeblock{
    width: 90vw;
    height: calc(84vh - 24px);
    margin-left: 5vw;
    margin-top: calc(16vh + 12px);
    background-color: #F1EFEA;
    border: none;
    border-radius: 3vw;
    position: relative; 
    overflow: scroll;
}

.recipename{
    width: 90vw;
    min-height: 50px;
    border-radius: 3vw 3vw 0 0;
    border: none;
    background-color: #FED093; 
    text-align: center;
    font-size: 25px;
    line-height: 50px;
    color: white; 
}

.recipenamespan{
    min-height: 50px;
    display: inline-block;
    width: 48vw;
    border: none;
    background: none; 
    text-align: center;
    font-size: 25px;
    line-height: 50px;
    color: white;  
    word-wrap: break-word;
}

.subtitle{
    width: 70vw;
    height: 50px;
    margin-left: 10vw;
    margin-top: 12px;
    display: flex;
    justify-content : space-around;
    border-style: none none dotted none;
    border-color: #767676;    
    border-width: 5px;
    color: #767676;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
}

.recipetext{
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    color: #767676;
}

.recipeline{
    width: 70vw;
    height: 50px;
    margin-left: 10vw;
    display: flex;
    justify-content : space-around;
}

.process{
    width: 70vw;
    height: 50px;
    margin-left: 10vw;
    display: flex;
    justify-content : space-around;
    border-style: none none dotted none;
    border-color: #767676;    
    border-width: 2px 0 5px 0;
    color: #767676;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
}

.processtext{
    width: 70vw;
    min-height: 50px;
    font-size: 18px;
    margin-left: 10vw;
    margin-top: 12px;
    overflow-wrap: break-word;
    color: #767676;
} 

.editbutton{
    position: absolute;
    top: 5px;
    right: 25px;
    width:40px;
    height: 40px;
    background: none;
    border-color: white;
    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
}

.editrecipeclosebutton{
    position: absolute;
    top: 5px;
    left: 5px;
    width:40px;
    height: 40px;
    background: none;
    border-style: none;

}

.bar{
    margin-top: 20px;
    width: 80vw;
    margin-left: 5vw;
    height: 2px;
    background-color: #767676;
}

.recipelist{
    min-height: 40px;
    width: 75vw;
    margin-top: 12px;
    margin-left: 12.5vw;
    background-color: white;
    border-style: solid;
    border-color: #767676;
    border-radius: 20px;
    border-width: 2px;
    display: flex;
}

.recipelisttext{
    line-height: 40px;
    font-size: 20px;
    width: 55vw;
    padding-left: 5vw;
    text-align: left;
    color: #767676;
}

.recipelistbutton{
    height: 9vmin;
    width:  9vmin;
    border-radius: 4.5vmin;
    border-style: none;
    background-color: #FED093;
    margin-top: auto;/*calc(20px - 4.5vmin)*/
    margin-bottom: auto;/*calc(20px - 4.5vmin)*/
}


/*ADDRECIPE*/
#addrecipeblock{
    width: 90vw;
    margin-left: 5vw;
    margin-top: 12px;
    background-color: #F1EFEA;
    border: none;
    border-radius: 3vw;
    position: relative; 
}

/*.recipename{
    width: 90vw;
    height: 50px;
    border-radius: 3vw 3vw 0 0;
    border: none;
    background-color: #FED093;
    color: white;
    font-size: 25px; 
    text-align: center;
}*/

.recipenameinput{
    width: 52vw;
    height: 30px;
    font-size: 25px;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    color: #767676;
}

.addrecipeinput{
    width: 25vw;
    height: 25px;
    font-size: 18px;
    margin-top: 12.5px;
    margin-bottom: 12.5px;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    color: #767676;
}

.processline{
    width: 70vw;
    margin-left: 10vw;
    margin-top: 12px;
    min-height: 50px;
    display: flex;
    justify-content : space-around;

}

.processnum{
    font-size: 18px;
    color: #767676;
    width: 8vw;
}


.addprocessinput{
    min-height: 50px;
    overflow-wrap: break-word;
    width: 62vw;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    color: #767676;
    font-size: 18px;
}

.memoinput{
    margin-top: 12px;
    margin-bottom: 12px;
    min-height: 50px;
    overflow-wrap: break-word;
    width: 65vw;
    margin-left: 11vw;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    color: #767676;
    font-size: 18px;
}

/*MENU*/

.menuContent{
    width: 90vw;
    margin-left: 5vw;
    margin-top: 12px;
    min-height: 100px;
    background-color: #F1EFEA;
    border: none;
    border-radius: 3vw;
    position: relative; 
}

.menuname{
    width: 90vw;
    height: 50px;
    border-radius: 3vw 3vw 0 0;
    border: none;
    background-color: #C4A8FC; 
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    color: white;  
}

.matchrecipename{
    width: 90vw;
    height: 40px;
    border: none;
    background-color: #FED093; 
    text-align: center;
    line-height: 40px;
    font-size: 23px;
    color: white;  
}

.menuMemoText{
    width: calc(84vw - 8px);
    min-height: 100px;
    background-color: #F1EFEA;    
    border: solid;
    border-color: #C4A8FC;
    border-width: 4px; 
    border-radius: 3vw;
    margin-left: 5vw;
    margin-top: 12px;
    font-size: 18px;
    padding: 8px 3vw;
    overflow-wrap: break-word;
    color: #767676;
}

/*MENUEDIIT*/
.menuedittitle{
    width: 90vw;
    margin-top: 12px;
    margin-left: 7vw;
    font-size: 20px;   
    color: #767676;
}

.eachmenuinput{
    width: 90vw;
    margin-left: 5vw;
    margin-top: 12px;
    background-color: #F1EFEA;
    border: none;
    border-radius: 3vw;
    position: relative; 
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 50px;
}

.menueditanno{
    line-height: 50px;
    font-size: 18px;
    color: #767676;
    width: 31vw;
    margin-left: 2.5vw;

}
.menueditinput{
    height: 25px;
    width: 49vw;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    font-size: 18px;
    color: #767676;
    margin-top:11px;
    margin-right: 2.5vw;
}

.menuMemoback{
    width: 88vw;
    min-height: 120px;
    background-color: #F1EFEA;    
    border: solid;
    border-color: #C4A8FC;
    border-width: 4px; 
    border-radius: 3vw;
    margin-left: 5vw;
    margin-top: 12px;
    font-size: 18px;
    color: #767676;
}

.menuMemoTitle{
    height: 30px;
    line-height: 30px;
    margin-left: 2vw;
    font-size: 18px;
    color: #767676;  
}

.menumemoinput{
    margin-top: 5px;
    margin-bottom: 5px;
    min-height: 70px;
    overflow-wrap: break-word;
    width: 70vw;
    margin-left: 8.5vw;
    border-style: solid;
    border-color: #767676;
    border-width: 2px;
    border-radius: 5px;
    padding: 0px 4px 0px 4px;
    color: #767676;
    font-size: 18px;
}

/*ローディング表示*/
.spinner {
  width: 80px;
  height: 80px;
  margin-top: calc(50vh - 40px);
  margin-left: calc(50vw - 40px);
  position: relative;
  background-color: white;
  border: none;
  border-radius: 10px;
}

.cube1, .cube2 {
  background-color: #137193; /* ベースの色 - 可変 */
  width: 15px;
  height: 15px;
  position: absolute;
  top: 10px;
  left: 10px;
  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}