@charset "utf-8";
  .column-ttl {
text-align:center;
font-family:'M PLUS Rounded 1c', sans-serif; font-weight:700;
}
.column-ttl h3 {
text-align:center;
font-size:1.6rem;
margin:0 auto;
}
.column-ttl a {
display:inline-block;
font-size:1.8rem;
font-weight:700!important;
margin:0 auto;
} .recipe {
margin:0 auto;
padding:1em;
background:#f9f9f9;
text-align:left;
border:#eee;
border-radius:5px;
}
.recipe p {
font-size:.9em;
margin-bottom:.3em;
}
.recipe .dishName {
font-size: 2.4rem;
font-weight: bold;
}
.recipe .dishNameItem {
font-size: 1.8rem;
font-weight: bold;
margin: 2em 0 .5em;
border-bottom:#ccc 1px solid;
}
.recipe .ingredient-name {
display:inline-block;
width:18em;
}
.recipe .amount{
position:relative;
}
.recipe .amount::before  {
content: " ･･･ ";
position:absolute;
top:0;
left:-2em;
}
.recipe .setType {
font-weight:bold;
color:rgba(115, 201, 115, 1);
}
.recipe .set-details > span {
display:inline-block;
width:6em;
}
.ingredient-set {
padding-top:.5em;
margin-top:.8em!important;
}
.recipe .set-details span.amount{
width:8em;		
}
.recipe .cuisine > div > p {
padding-left:35px;
}
.recipe .cuisine > div > span {
display:flex;
width:26px;
height:26px;
align-items: center;
justify-content: center;
background:rgba(115, 201, 115, 1);
color:#fff;
position:absolute;
top:0;
left:0;
border-radius:5px;
}
.recipe .cuisine > div {
margin-bottom:1.2em;
position:relative;
}  .button-wrapper {
margin-top:80px;
display:flex;
flex-wrap:wrap;
margin:0 auto 2em;
max-width:800px;
gap:5px;
}
.switch-button.is-active{
background:rgba(238, 131, 111, .95);
color:#fff;
}	
.switch-button {
box-sizing:border-box!important;
display:inline-block;
width:24.5%;
padding:.5em 0;
margin-bottom:.3em;
text-align:center;
border-radius:8px;
background:#efefef;
font-size:14px;
}
@media screen and (max-width:768px){
.switch-button {
width:48%;
}
}  #guide .article h2  {
text-align:center!important;
padding:.5em 0 .5em 0!important;
border-top:rgba(238, 131, 111, .8) 1px solid;
border-bottom:rgba(238, 131, 111, .8) 1px solid;
color:rgba(238, 131, 111, .8)!important;
font-weight:700;
}
#guide .faq-list .faq-question h3 {
position:relative;
padding:0 3em 0 1.5em;
font-size:1.8rem!important;
line-height:1.6;
}
#guide .faq-list .faq-question h3::before {
position:absolute;
top:-.2em;
left:0;
content:'Q';
font-weight:700;
color:#ccc;
font-size:2.4rem;
}
#guide .faq-list .faq-answer p {
position:relative;
padding:0 0 0 1.5em;
font-size:1.8rem!important;
color:rgba(238, 131, 111, 1)!important;
}
#guide .faq-list .faq-answer p::before {
position:absolute;
top:-.2em;
left:0;
content:'A';
font-weight:700;
color:rgba(238, 131, 111, .8)!important;
font-size:2.4rem;
}
#guide .article h2::before , #guide .article h3::before {
width:0!important;
height:0!important;
background:none!important;
}
.use-ttl {
display:block;
padding:.3em 0;
text-align:center;
color:rgba(0, 104, 183, 1);
border-top:rgba(0, 104, 183, 1) 1px solid;
border-bottom:rgba(0, 104, 183, 1) 1px solid;
}
.useblock {
position:relative;
display:flex;
align-items:center;
flex-wrap:wrap;
padding:1em;
border:rgba(238, 131, 111, .4) 5px solid;
border-radius:5px;
font-size:1.8rem;
}
.useblock strong {
display:block;
font-size:5rem;
font-weight:700;
color:rgba(238, 131, 111, .5);
background:none!important;
}
.useblock p{
text-align:left;
font-size:16px;
}
.useblock figure{
text-align:center;
width:100%;
margin:0!important;
}
.useblock figure img{
margin:0 auto;
max-width:400px;
}
.use-arrow {
margin:10px 0 25px;
display:flex;
justify-content:center;
}
.use-arrow::before {
display:inline-block;
width:30px;
height:30px;
border-bottom:rgba(238, 131, 111, .4) 5px solid;
border-right:rgba(238, 131, 111, .4) 5px solid;
transform:rotate(45deg);
content:"";
}
.use-ttl{
font-size:2.6rem;
}
@media screen and (min-width:769px){
.useblock p{
width:50%;
margin-top:3em;
}		
.useblock figure{
width:50%;
}
.useblock strong {
position:absolute;
top:10px;
left:10px;
}
} .faq-question {
position:relative;
cursor:pointer;
}
.faq-question .faq-toggle-btn {
position:absolute;
top:0;
right:0;
font-size:12px!important;
display:inline-block;
padding:.3em .5em;
background:#a2d7dd;
color:#fff;
letter-spacing:.05em;
border-radius:5px;
}
.faq-question .faq-toggle-btn.answer-active {
background:#ccc;	
} .chat-container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.chat-message {
display: flex;
align-items: flex-start;
}
.chat-icon {
width: 80px;
height: 80px;
flex-shrink: 0;
}
.chat-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-bubble {
padding: 14px 18px;
border-radius: 10px!important;
max-width: 75%;
position: relative;
}
.chat-bubble p {
margin: 0;
padding: 0;
word-wrap: break-word;
font-size:13px!important;
color:#8d6449!important;
}
.chat-message.other .chat-icon {
margin-right: 15px;
}
.chat-message.other .chat-bubble {
background-color: #f8f4e6;
border-top-left-radius: 0; 
}
.chat-message.other .chat-bubble::before {
content: "";
position: absolute;
top: 15px;
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #f8f4e6 transparent transparent;
}
.chat-message.me {
justify-content: flex-end; 
}
.chat-message.me .chat-icon {
margin-left: 15px;
}
.chat-message.me .chat-bubble {
background-color: #f8f4e6;
border-top-right-radius: 0;
}
.chat-message.me .chat-bubble::after {
content: "";
position: absolute;
top: 15px;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #f8f4e6;
} .tabesuke-comments {
max-width:100%;
gap:15px;
}
.tabesuke-comments p{
position:relative;
background-color: #f8f4e6;
border-top-left-radius: 0;
padding:1em;
font-size:1.4rem;
border-radius:10px;
color:#8d6449!important;
}
.tabesuke-comments figure {
min-width:100px;
}
.tabesuke-comments p::before{
content: "";
position: absolute;
top: 15px;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #f8f4e6;
} #breadcrumbs {
font-size:12px;
text-align:left;
max-width:1000px;
margin:0 auto 20px;
}
#breadcrumbs span span {
color:rgba(238, 131, 111, .95);
}
#breadcrumbs span span a {
color:#444;
} .rb-Btn-Wrap {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9990; text-align: center;
display: flex;
flex-direction: column;
align-items: center;
} .float-action-btn {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none !important;
position: relative;
margin: 0 auto; } .float-action-btn .btn-label {
font-size: 10px;
font-weight: 700;
color: #333; margin-bottom: 2px;
display: block;
line-height: 1;
} .float-action-btn .btn-inner {
width: 54px;
height: 54px;
background-color: #fff; border: 1px solid #ddd; border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.float-action-btn:hover .btn-inner {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
} .float-action-btn .icon {
font-size: 26px;
color: #333;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.float-action-btn .sns-icon-img {
width: 22px; height: auto;
} .float-new-badge {
position: absolute;
top: 5px; right: -10px;
background: #e65a3e;
color: #fff;
font-size: 9px;
font-weight: bold;
padding: 1px 6px;
border-radius: 10px;
z-index: 10;
animation: float-pulse 2s infinite;
}
@keyframes float-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
} .margin-bottom-1em {
margin-bottom: 12px !important;
} @media screen and (max-width: 768px) {
.float-action-btn .btn-inner {
width: 48px;
height: 48px;
}
.float-action-btn .icon { font-size: 22px; }
.float-action-btn .sns-icon-img { width: 18px; }
}