@charset "utf-8";

@font-face {
    font-family: 'M PLUS Rounded 1c';
    src: url('/css/fonts/MPLUSRounded1c-Regular.ttf') format("truetype");
}

html.fixed {
    overflow-y: hidden;
}

body {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

body.fixed::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    z-index: 3;
}

/* 画面外にいる状態 */
.js-fadein {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1s;
}

/* 画面内に入った状態 */
.js-fadein.js-scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

/* main
--------------------------------------------*/
#main {
    min-height: calc(100vh - 104px);
    background-color: #fafafa;
}

.page-content {
    max-width: 650px;
    margin: 0 auto;
    padding: 40px 15px 40px;
}

.page-content-s {
    max-width: 650px;
    margin: 0 auto;
    padding: 40px 4% 40px;
}

/* header
--------------------------------------------*/
#header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color: #c7d9e6;
    z-index: 2;
}

.header-title {
    display: flex;
    align-items: center;
    font-family: 'M PLUS Rounded 1c';
    font-size: 2rem;
    font-weight: 750;
    padding: 0 60px;
}

.header-title-ic {
    width: 35px;
    margin-right: 10px;
}

.header-btn-bm {
    position: absolute;
    right: 20px;
    width: 25px;
    cursor: pointer;
    z-index: 1;
}

/* side-nav */
#side-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    max-width: 400px;
    height: 100dvh;
    padding: 45px 20px 20px;
    background-color: #fff;
    box-shadow: -8px 0px 12px -1px rgba(0, 0, 0, 0.1);
    overflow-y: scroll;
    visibility: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: all .3s;
    z-index: 50;
}

#side-nav.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

#side-nav .side-bm {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 25px;
    cursor: pointer;
}

#side-nav .login-nav {}

#side-nav .logout-nav {
    padding-top: 10px;
}

#side-nav .login-nav a,
#side-nav .logout-nav a {
    display: block;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
    color: #52627d;
    padding: 10px 0;
}

#side-nav .login-nav i,
#side-nav .logout-nav i {
    display: inline-block;
    width: 34px;
    margin-right: 15px;
    vertical-align: middle;
}

#side-nav .login-nav .logout {
    border-top: 1px solid #c7c7c7;
    margin-top: 1em;
    padding-top: 1em;
}

/* footer
--------------------------------------------*/
#footer {
    padding: 25px 10px;
    background: #c7d9e6;
}

.footer-logo {
    width: 80%;
    max-width: 150px;
    margin: 0 auto;
}

.footer-logo img {}

.footer-copy {
    font-size: 1.1rem;
    text-align: center;
    margin-top: 10px;
}

/* テキスト関連
--------------------------------------------*/
.sec-c:not(:last-child) {
    margin-bottom: 25px;
}

.txt-lead {
    font-size: 1.6rem;
    font-weight: bold;
    color: #485770;
    text-align: center;
}

.txt-or {
    position: relative;
    font-size: 1.6rem;
    font-weight: bold;
    color: #485770;
    text-align: center;
}

.txt-or {
    margin: 30px calc(50% - 50vw);
}

.txt-or>span {
    position: relative;
    background-color: #fafafa;
    padding: 0 15px;
    z-index: 1;
}

.txt-or::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    width: 100vw;
    height: 1px;
    background-color: #485770;
}

.txt-or::before {
    left: 0;
}

.txt-or::after {
    right: 0;
}

.txt-indent-1em {
    text-indent: 1em;
}

.txt-comp {
    font-size: 1.6rem;
    font-weight: bold;
    color: #497ca7;
    margin-bottom: 30px;
}

.txt-note {
    text-indent: -1.22em;
    padding-left: 1.22em;
}

.txt-note [class*="ic-note"] {
    padding-right: 3px;
}

.txt-note .ic-note-red {
    color: #f00;
}

.txt-m {}

/* タイトル関連
--------------------------------------------*/
.title-m {
    font-family: 'M PLUS Rounded 1c';
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}

.title-status {
    font-weight: bold;
    text-align: center;
    padding: 8px;
    background-color: #c7d9e6;
    border-radius: 5px;
    margin-bottom: 15px;
}

.title-hn {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 画像関連
--------------------------------------------*/
.img-c:not(:last-child) {
    margin-bottom: 10px;
}

.img-c-manual {
    text-align: center;
    margin: 10px auto;
    width: 220px;
}

/* テーブル関連
--------------------------------------------*/
.table-basic {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    word-break: break-all;
}

.table-basic.fixed {
    table-layout: fixed;
}

.table-basic th,
.table-basic td {
    font-size: 1.3rem;
    padding: 8px 2px;
    border: 1px solid #bfbfbf;
}

.table-basic th {
    font-weight: normal;
    color: #fff;
    background-color: #497ca7;
}

.table-basic td {
    background-color: #fff;
}

[class*="table-btn"] {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1;
    border-radius: 5px;
    padding: 5px;
    white-space: nowrap;
}

.table-btn-delete {
    background-color: #7c7c7c;
}

.table-btn-edit {
    background-color: #d56868;
}

.table-btn-locking {
    background-color: #497ca7;
    width: 150px;
    height: 50px;
    margin-top: 18px;
    margin-bottom: 5px;
}

.table-btn-reload {
    font-size: 1.2rem;
    background-color: #c5464a;
}

.table-input-text {
    width: 100%;
    table-layout: fixed;
    padding: 5px;
    border: 1px solid #eee;
}

.table-input-checkbox {
    position: relative;
    top: 50%;
    left: calc(50% - 6px);
    border: 1px solid #eee;
    padding: 5px;

}

.table-input-text-auto {
    width: 70px;
    padding: 5px;
    border: 1px solid #eee;
}

.table-select {
    width: 100%;
    padding: 5px;
    border: 1px solid #eee;
    appearance: auto;
}

input[type="month"] {
    line-height: 1;
    padding: 6px;
}

.table-basic.unlock {
    width: 350px;
}

/**
input[type="month"]::-webkit-calendar-picker-indicator {
    display: none;
}
*/

/*サイズ調整
----------------------------------------------*/
.width-75 {
    width: 75%;
}

/* ログイン画面
--------------------------------------------*/
.login-ic {
    width: 50px;
    margin: 0 auto;
    padding: 50px 0 50px;
    text-align: center;
}

.login-txt {
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
}

.login-box {}

.login-id,
.login-pw {
    position: relative;
}

.login-id input,
.login-pw input {
    width: 100%;
    height: 50px;
    font-size: 1.4rem;
    padding: 15px 15px 15px 52px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 30px auto;
}

.login-pw input {
    padding-right: 70px !important;
}

.login-id input::placeholder,
.login-pw input::placeholder {
    color: #ccc;
}

.login-id input {
    background-image: url(/img/ic_login_id.svg);
}

.login-pw input {
    background-image: url(/img/ic_login_pw.svg);
}

.login-pw .btn-change {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-block;
    width: 4em;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding: 5px;
    border-radius: 4px;
    background-color: #808080;
    cursor: pointer;
}

/* メニュー
--------------------------------------------*/
.menu-list {
    display: flex;
    flex-flow: row wrap;
    margin: -1.5%;
}

.menu-item {
    width: 30.3333%;
    margin: 1.5%;
}

.menu-item a {
    display: block;
    height: 100%;
    font-weight: bold;
    color: #52627d;
    text-align: center;
    line-height: 1.4;
    padding: 13px 10px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}

.menu-item i {
    display: block;
    text-align: center;
    margin-bottom: 12px;
}

.menu-item i img {
    height: 32px;
}

.menu-item p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'M PLUS Rounded 1c';
    min-height: 38px;
}

/* おすすめ食材メニュー
--------------------------------------------*/
.food-list {
    display: flex;
    flex-flow: row wrap;
    margin: -1.5%;
}

.food-item {
    width: 30.3333%;
    margin: 1.5%;
}

.food-item a {
    display: block;
    height: 100%;
    font-weight: bold;
    color: #52627d;
    text-align: center;
    line-height: 1.4;
    padding: 13px 10px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}

.food-item i {
    display: block;
    text-align: center;
}

.food-item i img {
    height: 96px;
}

.food-item p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'M PLUS Rounded 1c';
    min-height: 38px;
}

/* 前回ログイン
--------------------------------------------*/
.logininfo {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    margin-top: 30px;
    overflow: hidden;
}

.logininfo-title,
.logininfo-date {
    font-size: 1.3rem;
    padding: 10px;
}

.logininfo-title {
    flex: none;
    color: #fff;
    background-color: #497ca7;
}

.logininfo-date {}

/* タブ切替
--------------------------------------------*/
.tab-list-area {
    position: relative;
    margin: 0 calc(50% - 50vw) 30px;
}

.tab-list-area::after {
    content: '';
    display: block;
    width: 100vw;
    height: 2px;
    background-color: #497ca7;
}

.tab-list {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.tab-list-item {
    font-size: 1.3rem;
    color: #497ca7;
    line-height: 1;
    padding: 7px 10px;
    background-color: #fff;
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #497ca7;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
}

.tab-list-item:not(:first-child) {
    margin-left: 5px;
}

.tab-list-item.active {
    color: #fff;
    background-color: #497ca7;
}

.tab-content-area {}

.tab-content:not(.active) {
    display: none;
}

.tab-list-link {
    font-size: 1.3rem;
    line-height: 1;
    background-color: #fff;
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #497ca7;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
}

.tab-list-link:not(:first-child) {
    margin-left: 5px;
}

.tab-list-link a {
    display: block;
    color: #497ca7;
    padding: 7px 10px;
}

.tab-list-link.active {
    background-color: #497ca7;
}

.tab-list-link.active a {
    color: #fff;
}

/* 利用者情報編集
--------------------------------------------*/
.user-edit-menu {}

.user-edit-menu-item:not(:last-child) {
    margin-bottom: 15px;
}

.user-edit-menu-item a {
    display: block;
    width: 100%;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
    color: #52627d;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

/* お知らせ
--------------------------------------------*/
.info-index {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.info-index-title {
    color: #fff;
    text-align: center;
    padding: 10px 10px 8px;
    background-color: #497ca7;
}

.info-list {
    max-height: 150px;
    padding: 15px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    overflow-y: scroll;
}

.info-list-item {}

.info-list-item:not(:last-child) {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.info-list-date {
    margin-bottom: 4px;
}

.info-list-txt {
    font-size: 1.3rem;
}

.info-detail-date {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

.info-detail-txt {}

/* 利用規約
--------------------------------------------*/
.term-list {
    max-height: 70vh;
    padding: 15px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    overflow-y: scroll;
}

.term-list-txt {
    white-space: pre-wrap;
}

#term-confirmed:disabled {
    opacity: .5;
}

#term-submit:disabled {
    background-color: #7c7c7c;
    opacity: .5;
}

/* 前回規約同意日
--------------------------------------------*/
.terminfo {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    margin-top: 30px;
    overflow: hidden;
}

.terminfo-title,
.terminfo-date {
    font-size: 1.3rem;
    padding: 10px;
}

.terminfo-title {
    flex: none;
    color: #fff;
    background-color: #497ca7;
}

/* ページアイコン
--------------------------------------------*/
.page-icon {
    max-width: 100px;
    margin: 0 auto 35px;
    text-align: center;
}

/* マニュアル・FAQ
--------------------------------------------*/
/* マニュアル */
#page-manual {}

/* FAQ */
#page-faq {}

.faq-item:not(:last-child) {
    margin-bottom: 10px;
}

.faq-item-q {
    position: relative;
    display: flex;
    color: #497ca7;
    padding: 10px 25px 10px 10px;
    border-radius: 8px;
    border: 1px solid #497ca7;
    background-color: #fff;
}

.faq-item-q::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #497ca7 transparent transparent transparent;
}

.faq-item-q.open::after {
    border-width: 0 5px 6px 5px;
    border-color: transparent transparent #497ca7 transparent;
}

.faq-item-q .faq-ic {
    display: block;
    padding-right: 8px;
}

.faq-item-a {
    display: none;
    padding: 10px 0 5px;
}

/* 栄養管理
--------------------------------------------*/
#main.food {}

.food-recipe {
    text-align: center;
    margin-top: 30px;
}

.food-recipe .btn {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #fff;
    padding: 5px 35px 5px 15px;
    border-radius: 8px;
    background-color: #ffd280;
}

.food-recipe .btn::after {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #fff;
}

.food-menu-back {
    text-align: center;
    margin-top: 30px;
}

.food-menu-back .btn {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #fff;
    padding: 5px 15px 5px 35px;
    border-radius: 8px;
    background-color: #497ca7;
}

.food-menu-back .btn::before {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 6px 4px 0;
    border-color: transparent #fff transparent transparent;
}

.food-confirm {
    color: #485770;
    text-align: center;
    background-color: #e6f3fc;
    padding: 10px;
    border-radius: 7px;
    margin: 20px 0;
}

.food-confirm * {
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
}

.food-confirm .ic {
    position: relative;
    margin-right: 7px;
}

.food-confirm .ic-01 {
    width: 10px;
    margin-right: 5px;
}

.food-confirm .ic-02 {
    width: 10px;
}

.food-confirm .ic-03 {
    width: 26px;
}

.food-confirm .ic-04 {
    width: 26px;
}

.food-confirm .ic-05 {
    top: -2px;
    width: 12px;
}

.food-confirm .ic-06 {
    top: -2px;
    width: 12px;
}

.food-confirm .ic-07 {
    top: -2px;
    width: 12px;
}

.food-confirm .ic-08 {
    top: -2px;
    width: 15px;
}

.food-confirm .ic-09 {
    top: -2px;
    width: 12px;
}

.food-confirm .item {
    margin: 0 8px;
}

.chart-item {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 30px auto;
    text-align: center;
}

/*
.chart-item canvas {
    max-width: 500px;
}
.chart-item.active {
    display: block;
}
*/
.chart-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 20px -3px;
    z-index: 1;
}

.chart-list-v {
    display: flex;
    flex-direction: column;
}

.chart-list .item,
.chart-list-v .item {
    margin: 3px;
}

.chart-list-btn {
    position: relative;
    display: flex;
    font-size: 1.3rem;
    color: #497ca7;
    line-height: 1.8;
    border: 1px solid #497ca7;
    border-radius: 5px;
    padding: 3px 10px 3px 8px;
}

.chart-list-btn .ic {
    width: 20px;
    margin-right: 5px;
}

.chart-list-btn.btn-arrow {
    padding-right: 22px;
}

.chart-list-btn.btn-arrow::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #497ca7 transparent transparent transparent;
}

.chart-list-btn.active {
    color: #fff;
    background-color: #497ca7;
}

.chart-list-btn.active.btn-arrow::after {
    border-width: 0 5px 6px 5px;
    border-color: transparent transparent #fff transparent;
}

.ac-con {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    display: none;
    min-width: 100%;
    color: #497ca7;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #497ca7;
    padding: 5px;
    z-index: 2;
}

.chart-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 20px -3px;
}

.chart-col-l {
    display: flex;
    flex-direction: column;
}

.chart-col-r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chart-avg {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    background-color: #ededed;
    padding: 4px 10px;
    margin: 3px;
    border-radius: 5px;
}

.chart-avg-txt {}

.avg-ic {
    display: inline-block;
    width: 25px;
    margin: 0 5px 0 10px;
}

.avg-radio {
    flex: none;
    position: relative;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin: 0 3px 0 8px;
}

.avg-radio::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.avg-radio:checked::before {
    background-color: #808080;
}

.ppc-btn {
    position: relative;
    display: flex;
    height: 31px;
    font-size: 1.3rem;
    color: #fff !important;
    background-color: #497ca7;
    border-radius: 5px;
    padding: 4px 22px 4px 10px;
    margin: 3px;
}

.ppc-btn:hover {
    color: #fff !important;
}

.ppc-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #fff;
    ;
}

.ppc-btn .ic {
    width: 17px;
    margin-right: 7px;
}

.chart-select {
    position: relative;
    display: block;
}

.chart-select::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #497ca7 transparent transparent transparent;
}

.chart-select select {
    position: relative;
    display: block;
    font-size: 1.3rem;
    color: #497ca7;
    line-height: 1.8;
    border: 1px solid #497ca7;
    border-radius: 5px;
    padding: 3px 22px 3px 8px;
}

.chart-select.active {
    background-color: #497ca7;
    border-radius: 5px;
}

.chart-select.active select {
    color: #fff;
}

.chart-select option {
    color: #497ca7 !important;
}

.chart-select.active::after {
    border-color: #fff transparent transparent transparent;
}

.chart-btn {
    position: relative;
    font-size: 1.3rem;
    color: #497ca7;
    line-height: 1.8;
    border: 1px solid #497ca7;
    border-radius: 5px;
    padding: 3px 6px 3px 32px;
    background-repeat: no-repeat;
    background-position: left 7px center;
    background-size: 18px auto;
}

.chart-btn.n_a_icon01 {
    background-image: url("/img/food/n_a_icon01.svg");
}

.chart-btn.n_a_icon02 {
    background-image: url("/img/food/n_a_icon02.svg");
}

.chart-btn.n_a_icon03 {
    background-image: url("/img/food/n_a_icon03.svg");
}

.chart-btn.n_a_icon04 {
    background-image: url("/img/food/n_a_icon04.svg");
}

.chart-btn.n_a_icon05 {
    background-image: url("/img/food/n_a_icon05.svg");
}

.chart-btn.n_a_icon06 {
    background-image: url("/img/food/n_a_icon06.svg");
}

.chart-btn.n_a_icon07 {
    background-image: url("/img/food/n_a_icon07.svg");
}

.chart-btn.n_a_icon08 {
    background-image: url("/img/food/n_a_icon08.svg");
}

.chart-btn.n_a_icon09 {
    background-image: url("/img/food/n_a_icon09.svg");
}

.chart-btn.n_b_icon01 {
    background-image: url("/img/food/n_b_icon01.svg");
}

.chart-btn.n_b_icon02 {
    background-image: url("/img/food/n_b_icon02.svg");
}

.chart-btn.n_b_icon03 {
    background-image: url("/img/food/n_b_icon03.svg");
}

.chart-btn.n_b_icon04 {
    background-image: url("/img/food/n_b_icon04.svg");
}

.chart-btn.n_b_icon05 {
    background-image: url("/img/food/n_b_icon05.svg");
}

.chart-btn.n_b_icon06 {
    background-image: url("/img/food/n_b_icon06.svg");
}

.chart-btn.n_b_icon07 {
    background-image: url("/img/food/n_b_icon07.svg");
}

.chart-btn.n_b_icon08 {
    background-image: url("/img/food/n_b_icon08.svg");
}

.chart-btn.n_b_icon09 {
    background-image: url("/img/food/n_b_icon09.svg");
}

.chart-btn.n_b_icon10 {
    background-image: url("/img/food/n_b_icon10.svg");
}

.chart-btn.n_b_icon13 {
    background-image: url("/img/food/dairy_product.svg");
}

.chart-btn.n_b_icon14 {
    background-image: url("/img/food/noodles.svg");
}

.chart-btn.active {
    background-color: #497ca7;
    color: #fff;
}

.chart-btn.active.n_a_icon01 {
    background-image: url("/img/food/n_a_icon01_o.svg");
}

.chart-btn.active.n_a_icon02 {
    background-image: url("/img/food/n_a_icon02_o.svg");
}

.chart-btn.active.n_a_icon03 {
    background-image: url("/img/food/n_a_icon03_o.svg");
}

.chart-btn.active.n_a_icon04 {
    background-image: url("/img/food/n_a_icon04_o.svg");
}

.chart-btn.active.n_a_icon05 {
    background-image: url("/img/food/n_a_icon05_o.svg");
}

.chart-btn.active.n_a_icon06 {
    background-image: url("/img/food/n_a_icon06_o.svg");
}

.chart-btn.active.n_a_icon07 {
    background-image: url("/img/food/n_a_icon07_o.svg");
}

.chart-btn.active.n_a_icon08 {
    background-image: url("/img/food/n_a_icon08_o.svg");
}

.chart-btn.active.n_a_icon09 {
    background-image: url("/img/food/n_a_icon09_o.svg");
}

.chart-btn.active.n_b_icon01 {
    background-image: url("/img/food/n_b_icon01_o.svg");
}

.chart-btn.active.n_b_icon02 {
    background-image: url("/img/food/n_b_icon02_o.svg");
}

.chart-btn.active.n_b_icon03 {
    background-image: url("/img/food/n_b_icon03_o.svg");
}

.chart-btn.active.n_b_icon04 {
    background-image: url("/img/food/n_b_icon04_o.svg");
}

.chart-btn.active.n_b_icon05 {
    background-image: url("/img/food/n_b_icon05_o.svg");
}

.chart-btn.active.n_b_icon06 {
    background-image: url("/img/food/n_b_icon06_o.svg");
}

.chart-btn.active.n_b_icon07 {
    background-image: url("/img/food/n_b_icon07_o.svg");
}

.chart-btn.active.n_b_icon08 {
    background-image: url("/img/food/n_b_icon08_o.svg");
}

.chart-btn.active.n_b_icon09 {
    background-image: url("/img/food/n_b_icon09_o.svg");
}

.chart-btn.active.n_b_icon10 {
    background-image: url("/img/food/n_b_icon10_o.svg");
}

.chart-btn.active.n_b_icon13 {
    background-image: url("/img/food/dairy_product_o.svg");
}

.chart-btn.active.n_b_icon14 {
    background-image: url("/img/food/noodles_o.svg");
}

#chart-balance {
    max-width: 400px;
    padding: 25px 0 0;
}

.chart-ic {
    position: absolute;
    width: 25px;
}

#ic-01 {
    top: -1.5%;
    left: 50%;
    transform: translateX(-130%);
}

#ic-02 {
    top: 26%;
    right: 4%;
}

#ic-03 {
    bottom: 20%;
    right: 21%;
}

#ic-04 {
    bottom: 20%;
    left: 10%;
}

#ic-05 {
    top: 26%;
    left: 0;
}

.chart-link {
    margin: 30px 0;
}

.chart-link a {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #497ca7;
    line-height: 1.8;
    border: 1px solid #497ca7;
    border-radius: 5px;
    padding: 3px 22px 3px 8px;
}

.chart-link a::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #497ca7;
}

/* フロー
--------------------------------------------*/
.page-head {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    margin: 0 0 30px;
}

.page-head-ic {
    width: 40px;
}

.page-head-r {
    padding-left: 15px;
}

.page-head-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
}

.page-flow {
    display: flex;
}

.page-flow-item {
    font-size: 1.3rem;
    color: #fff;
    line-height: 1;
    padding: 7px 10px;
    background-color: #788189;
    border-radius: 3px;
    opacity: .8;
}

.page-flow-item:not(:first-child) {
    margin-left: 5px;
}

.page-flow-item.current {
    background-color: #497ca7;
    opacity: 1;
}

/* 配送状況 */
.status-ul {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
}

.status-li {
    font-size: 1.3rem;
    color: #a2cbef;
    line-height: 1;
    padding: 7px 10px;
    border: 1px solid #a2cbef;
    border-radius: 5px;
}

.status-li:not(:first-child) {
    margin-left: 5px;
}

.status-li.active {
    color: #1f72c8;
    background-color: #fff;
    border: 1px solid #fff;
}

/* 登録画面
--------------------------------------------*/
.entry-lead {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.entry-lead-txt:not(:last-child) {
    margin-bottom: 10px;
}

.entry-lead-note {
    border-top: 1px solid #a2cbef;
    padding-top: 15px;
    margin-top: 15px;
}

.entry-lead-note .note {
    color: #a2cbef;
}

.entry-box {
    margin: 30px 0 40px;
}

.entry-box:last-child {
    margin-bottom: 0;
}

.entry-in-box {
    position: relative;
    padding: 15px;
    background-color: #94c1e0;
    border-radius: 8px;
    margin: 20px 0 10px;
}
[id^=detail-list] .entry-in-box:last-child{
    margin-bottom: 20px;
}
[id^=regularly-booking-list] .entry-in-box:last-child{
    margin-bottom: 10px;
}
.entry-in-box:last-child {
    margin-bottom: 0;
}

.entry-title {
    margin-bottom: 7px;
}

.entry-title-mail {
    color: #fff;
    text-align: center;
    margin-bottom: 5px;
}

.entry-title-status {
    font-weight: bold;
    color: #1f72c8;
    text-align: center;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
}

.entry-no {
    color: #fff;
    margin-bottom: -5px;
}

.entry-txt {
    width: 100%;
    color: #666;
    min-height: 40px;
    padding: 10px;
    border-radius: 8px;
    background-color: #e5e5e5;
}

.entry-txt.disabled {
    opacity: .5;
}

.entry-txt.gray {
    background-color: #cecece;
}

/* 入力画面 */
.entry-item {
    padding: 10px 0;
}

.entry-item:first-child {
    padding-top: 0;
}

.entry-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.entry-item dd:not(:last-child) {
    margin-bottom: 20px;
}

.entry-in-box .entry-item.border-b,
.entry-in-box .entry-cfm-item.border-b {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin: 0 -15px;
    border-bottom: 1px solid #7faccb;
}

.entry-plus-btn {
    position: relative;
    width: 68px;
    margin: 20px auto 10px;
}
.regularly-booking-list .entry-plus-btn {
	margin: 20px auto 20px;
}
.entry-plus-btn p {
    display: flex;
    flex-flow: column nowrap;
    width: 68px;
    height: 68px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border-radius: 68px;
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.entry-plus-btn i {
    display: block;
    width: 14px;
    margin: 8px auto 4px;
}

.entry-plus-btn span {
    font-size: 1.3rem;
    color: #497ca7;
    letter-spacing: -1px;
    line-height: 1.2;
}

.entry-plus-btn span.line-1 {}

.entry-plus-btn span.line-2 {
    margin-top: -5px;
}

.item-dtls .entry-item {
    padding: 10px 0;
}

/* モーダルウィンドウ */
.compensate-for-scrollbar {
    margin-right: 0 !important;
}

.modal-content {
    display: none;
    width: 90%;
    max-width: 400px;
    padding: 44px 0 0;
    background-color: inherit;
    overflow-x: hidden;
}

.modal-content .fancybox-button svg {
    color: #fff;
}

.modal-content .fancybox-close-small {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    right: -10px !important;
}

.modal-content-inner-1 {
    padding: 20px 15px 20px;
    background-color: #e6f3fc;
}

.modal-content-inner-2 {
    background-color: #cbe3f4;
    padding: 20px 15px;
}

.modal-content-inner-3 {
    background-color: #fff;
    padding: 20px 15px;
}

.modal-content-btn {
    display: flex;
    flex-flow: row nowrap;
}

.modal-content-btn .modal-btn-cansel,
.modal-content-btn .modal-btn-select {
    width: 50%;
}

.modal-content-btn .modal-btn-cansel {
    text-align: center;
    background-color: #bcbcbc;
    padding: 10px;
}

.modal-content-btn .modal-btn-select {
    color: #fff;
    text-align: center;
    background-color: #d56868;
    padding: 10px;
}

.modal-area {
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-area-bg {
    width: 100%;
    height: 120%;
    background-color: rgba(30, 30, 30, 0.9);
}

.modal-wind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    padding: 10px 30px;
    background-color: #fff;
    border-radius: 15px;
}

.modal-button {
    padding: 10px;
    color: #fff;
    background-color: #497ca7;
    border: 1px solid #282828;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    width: 60px;
    margin: 0 auto;
}

/* 美和ロックユーザ用モーダル画面 */
.modal-wind-miwalock-user {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 330px;
    padding: 10px 30px;
    background-color: #fff;
    border-radius: 15px;
}

.modal-button-miwalock-user {
    padding: 10px;
    color: #fff;
    background-color: #497ca7;
    border: 1px solid #282828;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    width: 150px;
    margin: 10px auto 0 auto;
}

.modal-title-miwalock-user {
    text-align: center;
}

.modal-body-miwalock-user {
    margin-top: 15px;
}

.modal-main-text-miwalock-user {
    padding: 0 5px;
    font-size: 13px;
}

/* 確認画面 */
.entry-cfm-item {
    padding: 10px 0;
}

.entry-cfm-item:first-child {
    padding-top: 0;
}

.entry-cfm-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.entry-cfm-item dd:not(:last-child) {
    margin-bottom: 10px;
}

.entry-cfm-item .entry-title {
    margin-bottom: 5px;
}

/* 完了画面 */
.entry-send-ic {
    width: 50px;
    margin: 0 auto;
    padding: 20px 0 25px;
    text-align: center;
}

/* 解錠予約画面 */
.not-applicable {
    margin: 80px 0;
}

.not-applicable p {
    text-align: center;
}

.rsv-plus-btn {
    text-align: center;
}

.rsv-plus-btn-ic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin: 0 auto;
    background: #fff;
    border-radius: 50%;
}

.rsv-plus-btn-ic img {
    display: inline-block;
    width: 40%;
}

.rsv-plus-btn-txt {
    font-size: 1.2rem;
    color: #fff;
    padding-top: 5px;
}

/* 入力横並び-1 */
.entry-item-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 15px 0;
}

.entry-item-row:first-child {
    margin-top: 0;
}

.entry-item-row-title {
    width: 8em;
    line-height: 1.4;
    padding-right: .5em;
}

.entry-item-row-input {
    position: relative;
    width: calc(100% - 8em);
}

.entry-item-row-input .btn-change {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-block;
    width: 4em;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding: 5px;
    border-radius: 4px;
    background-color: #808080;
    cursor: pointer;
}

/* 入力横並び-2 */
[class*="entry-input-row"] {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

[class*="entry-input-row"][class*="2"] .col {
    width: 48.5% !important;
}

[class*="entry-input-row"][class*="3"] .col {
    width: 45% !important;
}

[class*="entry-input-row"][class*="21"] .col:nth-of-type(1) {
    width: 60% !important;
}

[class*="entry-input-row"][class*="21"] .col:nth-of-type(2) {
    width: 37% !important;
}

/* フォーム関連
--------------------------------------------*/
/* 必須マーク */
.ic-required {
    position: relative;
    top: -5px;
    display: inline-block;
    font-size: 1.2rem;
    color: #f00;
    line-height: 1;
    padding-left: 3px;
}

/* フォーム */
.f-input-text,
.f-input-pw,
.f-textarea,
.f-select {
    font-size: 1.4rem;
}

input[type="date"] {
    font-family: Arial;
}

/*
::-webkit-calendar-picker-indicator {
    color: transparent;
    background: url(/img/ic_calendar.svg) no-repeat right center;
    background-size: 15px auto;
    padding: 2px 2px 4px 1px;
}
*/
/**
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    input[type="date"] {
        background-image: url(/img/ic_calendar.svg);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 18px auto;
    }
}
**/
.f-input-text,
.f-input-pw {
    width: 100%;
    height: 40px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.f-input-text:disabled,
.f-input-pw:disabled {
    opacity: .5;
}

.f-input-text::placeholder,
.f-input-pw::placeholder {
    color: #ccc;
}

.f-textarea {
    resize: none;
    width: 100%;
    line-height: 1.6;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    vertical-align: middle;
}

.f-radio,
.f-checkbox {
    position: relative;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 3px;
}

.f-radio::before,
.table-input-checkbox::before,
.f-checkbox::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
}

.f-radio:checked::before,
.table-input-checkbox:checked::before,
.f-checkbox:checked::before {
    background-color: #497ca7;
}

.f-select {
    width: 100%;
    height: 40px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.f-label-select {
    position: relative;
    display: block;
}

.f-label-select::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 23px;
    width: 0;
    height: 100%;
    border-right: 1px solid #ddd;
    transform: translateY(-50%);
}

.f-label-select::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 7px;
    width: 0;
    height: 0;
    border-top: 6px solid #497ca7;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}

.radio-grid {
    display: flex;
    align-items: center;
}

.radio-grid-i {
    padding-right: 15px;
}

.radio-grid-t {
    width: 100%;
}

/* ボタン */
.btn-grid {
    margin: 30px auto 0;
}

.btn-grid .btn-item:not(:last-child) {
    margin-bottom: 15px;
}

.btn-grid-s {
    width: 90%;
    max-width: 200px;
    margin: 30px auto 0;
}

.btn-grid-s .btn-item {
    margin-bottom: 12px;
}

.f-btn,
.f-btn-s {
    position: relative;
    font-family: Arial;
    display: block;
    width: 100%;
    font-size: 1.4rem;
    text-align: center;
    line-height: 1.6;
    border-radius: 7px;
    cursor: pointer;
}

.f-btn {
    padding: 9px 10px;
}

.f-btn-s {
    padding: 5px;
}

.f-btn.arrow-r {
    position: relative;
}

.f-btn.arrow-r::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 10px;
    width: 0;
    height: 0;
    border-style: solid;
}

.btn-type-1 .f-btn,
.btn-type-1 .f-btn-s {
    color: #fff;
    background-color: #d56868;
}

.btn-type-2 .f-btn,
.btn-type-2 .f-btn-s {
    color: #fff;
    background-color: #497ca7;
}

.btn-type-2 .f-btn.arrow-r::after {
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #fff;
}

.btn-type-3 .f-btn,
.btn-type-3 .f-btn-s {
    color: #497ca7;
    background-color: #fff;
    border: 1px solid #497ca7;
}

/* 遠隔操作メニュー */
.key-size {
    margin-top: 30px;
    width: 100px;
    height: 100px;
}

.lock-btn {
    width: 155px;
    height: 55px;
    margin: 5px;
    border: 2px solid #497ca7;
    border-radius: 10px;
    background-color: #fff;
}

.lock-btn-icon {
    width: 27px;
    height: 27px;
}

.lock-btn-div {
    display: flex;
    justify-content: center;
    padding-top: 10%;
    padding-bottom: 5%;
}

/* 固定ナビ */
#fixed-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
    padding: 15px 10px;
    background-color: rgba(255, 255, 255, 0.9);
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 50px);
    transition: all .5s;
}

#fixed-nav.is-active {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
}

#fixed-nav.is-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 50px);
}

#fixed-nav .btn-item {
    width: 46%;
    margin: 0 2%;
}

/* cookie */
#cookie {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #49484d;
    padding: 20px 15px;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: all .5s;
}

#cookie.is-show {
    visibility: visible;
    opacity: 1;
}

.cookie-txt {
    color: #fff;
}

.cookie-txt a {
    color: #fff;
    text-decoration: underline;
}

.cookie-btn-wrap {
    margin-top: 15px;
}

.cookie-btn {
    position: relative;
    display: block;
    width: 150px;
    font-family: Arial;
    font-size: 1.4rem;
    font-weight: bold;
    color: #003b90;
    text-align: center;
    line-height: 1.6;
    background-color: #bfbfbf;
    margin: 0 auto;
    padding: 9px 10px;
    border: 2px solid #fff;
    cursor: pointer;
}

/* ==============================
2022.07. Add
============================== */
/* 栄養管理メニュー */
.menu-back {
    /*margin: 1.5%;*/
}

.menu-back a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-weight: bold;
    color: #52627d;
    text-align: center;
    line-height: 1.4;
    padding: 13px 10px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}

.menu-back i {
    margin-right: 12px;
}

.menu-back i img {
    height: 32px;
}

.menu-back p {
    font-family: 'M PLUS Rounded 1c';
}

/* 栄養管理バランス */
.food-menu-recommend {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: 0;
    margin-top: -80px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

.food-menu-recommend::after {
    content: '';
    display: block;
    width: 86px;
    height: 86px;
    border: #d2d2d2 2px dashed;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    animation: rotate-anime 7s linear infinite;
    z-index: 1;
}

.food-menu-recommend .recommend-btn {
    width: 94px;
    height: 94px;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
    color: #52627d;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.recommend-btn i {
    display: block;
    margin-bottom: 2px;
}

.recommend-btn i img {
    width: 32px;
    height: 32px;
}

@keyframes rotate-anime {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* あなたにおすすめのレシピ */
.food-lead-wrap {
    margin-bottom: 1em;
    margin-top: -30px;
    text-align: center;
}

.title-m .nutrients {
    color: #af4f4f;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
}

.food-note-ballon {
    width: 90%;
    margin: 1em auto;
    position: relative;
    background: #d58989;
    color: #fff;
    padding: 1em 1em 1em 55px;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
    background-image: url("/img/food/excl_ic.svg");
    background-repeat: no-repeat;
    background-position: 1em center;
    background-size: 30px auto;
}

.food-note-ballon:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(213, 137, 137, 0);
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    border-top-color: #d58989;
    top: 100%;
    left: 50%;
}

.food-note-ballon p {
    text-align: left;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
    line-height: 1.6;
}

.food-recipe-sttl {
    text-align: center;
    font-size: 1.6rem;
}

.food-recipe-sttl p {
    display: inline-block;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
}

.food-recipe-sttl p::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #ea8730;
    border-radius: 2px;
}

.food-recipe-sttl .nutrients {
    color: #af4f4f;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
}

.food-recipe-list {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.food-recipe-list>li {
    width: 31.3%;
    margin-right: 3.05%;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.food-recipe-list>li:nth-child(3n) {
    margin-right: 0;
}

.food-recipe-list>li a {
    display: block;
}

.food-recipe-list .refine_recipe__img {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.food-recipe-list .refine_recipe__img img {
    width: 100%;
    height: auto;
}

.food-recipe-list .refine_recipe__text {
    display: block;
    text-align: center;
    margin-top: 0.25em;
}

.food-menu-back-wrap {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.food-menu-back-wrap .food-menu-back {
    margin-top: 0;
    margin-left: 5px;
    width: 47%;
}

.food-menu-back-wrap .food-menu-back:first-child {
    margin-left: 0;
}

.food-menu-back-wrap .food-menu-back a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    line-height: 1.4;
}

/* おすすめTOP4 */
.food-ranking-sttl {
    text-align: center;
}

.title-m .ingredients {
    color: #ea8730;
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
}

.food-ranking-sttl p {
    display: inline-block;
}

.food-ranking-sttl p::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #ea8730;
    border-radius: 2px;
}

.food-ranking-notes {
    width: 90%;
    margin: 1em auto;
}

#wrap-recipe_ranking__list .recipe_ranking__list>li {
    margin-bottom: 1em;
}

#wrap-recipe_ranking__list .recipe_ranking__list>li>a {
    display: flex;
    align-items: center;
}

#wrap-recipe_ranking__list .recipe_ranking__list .recipe_ranking__img {
    width: 27.8%;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 2em;
}

#wrap-recipe_ranking__list .recipe_ranking__list .recipe_ranking__detail {
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
    font-size: 1.6rem;
    width: calc(72.2% - 2em);
}

#wrap-recipe_ranking__list .recipe_ranking__list .recipe_ranking__detail span {
    font-family: 'M PLUS Rounded 1c';
    font-weight: bold;
    font-size: 1.6rem;
}

#wrap-recipe_ranking__list .recipe_ranking__list .recipe_ranking__detail::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
}

#wrap-recipe_ranking__list .recipe_ranking__list>li:nth-child(1) .recipe_ranking__detail::before {
    background-image: url("/img/food/ranking_ic_01.svg");
}

#wrap-recipe_ranking__list .recipe_ranking__list>li:nth-child(2) .recipe_ranking__detail::before {
    background-image: url("/img/food/ranking_ic_02.svg");
}

#wrap-recipe_ranking__list .recipe_ranking__list>li:nth-child(3) .recipe_ranking__detail::before {
    background-image: url("/img/food/ranking_ic_03.svg");
}

#wrap-recipe_ranking__list .recipe_ranking__list>li:nth-child(4) .recipe_ranking__detail::before {
    background-image: url("/img/food/ranking_ic_04.svg");
}

.regularly-booking-list .entry-in-box{
    margin-top:0px;
}
.regularly-booking-col {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    overflow: hidden;
}
.regularly-booking-checkbox {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    overflow: hidden;
}
.regularly-booking-date,
.regularly-booking-dayofweek {
    font-size: 1.3rem;
    height: 40px;
}
.regularly-booking-date {
    padding:10px 0 10px 10px;
}
.regularly-booking-dayofweek {
    padding: 10px 10px 10px 0;
    flex:none;
    text-align: left;
}
.regularly-booking-dayofweek.sunday{
    color: #f00;
}
.f-btn.arrow-d {
    position: relative;
}
.f-btn.arrow-d::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 10px;
    width: 0;
    height: 0;
    border-style: solid;
}
.btn-type-2 .f-btn.arrow-d::after {
    border-width: 6.9px 4px 0 4px;
    border-color: #fff transparent transparent transparent;
}
.regularly-booking-item{
    padding:0;
}
.regularly-booking-txt{
    background-color: #e5e5e5;
    color: #666;
    opacity: .5;
    box-shadow: none;
}
.f-input-text.unseparated-order{
    height: auto;
}