@charset "UTF-8";

/* 米粉ジェラート用CSS */

html {
scroll-behavior: smooth;
}

body {
font-family: "Noto Serif JP", serif;
font-weight: 300;
color: #674E3B;
margin-bottom: 12%;
}

h1,h2,h3,h4,h5,h6 {
font-weight: 300;
}

.inner {
padding-left: 16px;
padding-right: 16px;
}

/* header */
.header {
background-color: #fff;
padding-top: 16px;
position: sticky;
top: 0;
}

.header__inner {
display: flex;
justify-content: space-between;
}

.header__logo a img {
width: 91px;
display: block;
}

.header__nav-sp {
display: flex;
gap: 24px;
}

.header__button-sp {
font-size: 10px;
border: 1px solid #6D8059;
background: #6D8059;
color: #fff; 
width: 131px;
height: 24px;
text-align: center;
display: grid;
place-content: center;
text-decoration: none;
transition: opacity 0.3s;
}

.header__button-sp:hover {
opacity: 0.7;
}

.header__nav {
display: none;
}

/* Menuナビ */
.menu-nav-link {
text-decoration: none;
color: #674E3B;
}

.menu-nav-link:hover {
opacity: 0.7;
}

.menu-nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 16px;
padding-bottom: 32px;
list-style-type: none;
display: flex;
font-size: 13.5px;
margin-top:15px;
}

.menu-nav li {
display: flex;
align-content: center;
}

.one-nav ,.two-nav {
width: 112px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.nav-1 {
padding-bottom: 8px;
}

.nav-1,.nav-2 {
display:flex;
justify-content: center;
align-content: center;
}

.kind-en {
font-size: 10px;
margin-top: 8px;
}

#jp-softcream {
font-size: 13px;
}

#softcream {
margin: 13px;
border-left: 1px solid #674E3B;
}

#donut {
border-left: 1px solid #674E3B;
border-right: 1px solid #674E3B;
}

#icecream {
color: #6D8059;
}

.menu-nav-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#kind-jp-waffle-top {
text-align: center;
}

/* タイトル */
.title {
color: #6D8059;
background-image: url(/img/icecream.webp);
background-size:cover;
height: 140px;
width: 100%;
display: flex;
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein{
from{
opacity: 0;
transform: translatey(15px);
}
to{
opacity: 1;
transform: translatey(0);
}
}

h2 {
margin-top: 72px;
font-size: 20px;
display: flex;
flex-direction: column;
}

#title-sub {
font-size: 10px;
margin-top: 8px;
}

/* footer */
.footer {
background: #6D8059;
box-sizing: border-box;
height: 204px;
padding: 32px;
}

.footer__inner {
text-align: center;
}

.footer__nav {
display: flex;
justify-content: center;
gap: 16px;
}

.footer__link {
color: #fff;
text-decoration: none;
}

.footer__logo img{
width: 108px;
margin-top: 36px;
}

@media(min-width:768px) {
.header {
margin: 0;
width: 100%;
}

.header__logo a img {
width: 144px;
}

.header__button-sp {
display: none;
}

.header__nav {
display: flex;
gap: 16px;
align-items: center;
}

.header__open {
display: none;
}

.header__link {
font-size: 18px;
color: #6D8059;
text-decoration: none;
}

.header__button {
font-size: 13px;
border: 1px solid #6D8059;
background: #6D8059;
color: #fff; 
width: 166px;
height: 38px;
text-align: center;
display: grid;
place-content: center;
text-decoration: none;
transition: opacity 0.3s;
}

.header__button:hover {
opacity: 0.7;
}

.menu-nav {
display: flex;
flex-direction: row;
}

#waffle-soft{
margin-top: 10px;
}

#softcream {
margin-top: 24px;
border-right: 1px solid #674E3B;
width: 130px;
margin-right: 6px;
}

/* MENU　タイトル */
.title {
height: 300px;
margin-top: 32px;
display: flex;
justify-content: center;
align-items: center;
}

h2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

/* footer */
.footer {
height: 204px;
padding: 32px;
}

.footer__inner {
display: flex;
gap: 40px;
flex-direction: row-reverse;
padding-left: 50px;
padding-bottom: 32px;
align-items: baseline;
justify-content: start;
max-width: 1760px;
margin-left: auto;
margin-right: auto;
}

.footer__link {
font-size: 18px;
}

.footer__logo img {
width: 164px;
}
}

@media(min-width:1300px) {
.title {
height: 400px;
margin-top: 32px;
display: flex;
justify-content: center;
align-items: center;
}
}

.titleprice {
text-align: center;
}

.titleprice h2 {
margin-top: 0px;
}

.titleprice p {
margin-top: 10px;
font-size: 14px;
margin-bottom: 80px;
}

.center {
text-align: center;
}

.center h3 {
font-weight: 300;
margin-top: 50px;
font-size: 14px;
}

.areflex {
display: flex;
text-align: center;
margin-top: 15px;
justify-content: center;
padding-bottom: 100px;
}

.areflex img {
width: 50px;
}

.areflex p {
font-size: 11px;
}

.pcbr {
display: none;
}

main {
margin: 0 16px;
overflow: hidden;
}

.donuts {
margin-bottom: 100px;
}

.glaze {
text-align: center;
margin: 140px auto 60px auto;
font-size: 14px;
}

.plane {
text-align: center;
font-size: 16px;
}

.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
margin: 0 auto;
justify-self: start;
}

.donutsbox h3 {
font-size: 14px;
font-weight: 300;
}

.donutsbox {
text-align: left;
}

.donutsimg {
height: 140px;
object-fit: cover;
padding: 8px 0;
}

.are img {
width: 40px;
object-fit: cover;
margin: 0 -6px;
}

.are {
margin: 3px 10px;
}

.en {
font-size: 10px;
padding: 5px 0;
}

.ex {
font-size: 10px;
line-height: 1.7;
padding-top: 8px;
border-top: 0.3px solid #674E3B;
}

@media (min-width: 768px) {
.donutsbox h3 {
font-size: 16px;
}

.ex {
font-size: 12px;
}

main {
margin: 0 10%;
}

.grid {
gap: 3rem 6rem;
}

.donutsimg {
width: 140px;
padding: 16px 0;
}
}

@media (min-width: 1100px) {
.phonebr {
display: none;
}

.pcbr {
display: block;
}

.ex {
text-align-last: left;
padding-left: 13px;
font-size: 12px;
}

main {
margin: 0 20%;
}

.grid {
gap: 3rem 9rem;
}

.bigflex {
display: flex;
margin: 0 13px;
}

.bigflex p {
margin: 0 10px;
}

.are {
text-align-last: right;
}

.donutsimg {
width: 150px;
padding: 8px 0;
}
}

.copylight {
color: #674E3B;
background: #fff;
font-size: 12px;
text-align: center;
}

@media (min-width: 768px) {
.copylight {
font-size: 14px;
}
}

/* line
-------------------------------------*/
p#line a{
width: 100%;
background: #00c300;
color: #fff;
text-align: center;
text-decoration: none;
display: block;
position: fixed;
bottom: -3px;
z-index: 9999;
}