@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;
}

#softcream {
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/soft1.webp);
background-size: cover;
height: 140px;
width: 100%;
/* margin-top: 32px; */
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: 23px;
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;
}

.title 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;
}
}

.ws {
padding-top: 50px;
}

.wsbox {
margin: 0 auto;
text-align: center;
}

.imgflex img {
width: 90px;
object-fit: cover;
}

.imgflex {
display: flex;
justify-content: center;
padding: 15px 0;
margin: 15px;
gap: 30px;
}

.half {
height: 100%;
padding-top: 50px;
}

.areflexmobile {
margin-left: 20px;
}

.areflexmobile img {
width: 40px;
}

.medium {
padding-top: 51px;
}

.areflexmobile p {
color: #6D8059;
font-size: 10px;
margin-bottom: 4px;
}

.areflexpc {
display: none;
}

.nameflex {
display: flex;
justify-content: center;
margin-left: 10%;
}

.textflex {
border-top: 1px solid #674E3B;
margin: 0 10% 20px 10%;
padding-top: 10px;
}

.soytx {
font-size: 14px;
line-height: 1.5;
}

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

.money {
text-align: center;
font-size: 13px;
margin: -10px 0 50px 0;
}

.mobile {
display: none;
}

.topping {
display: flex;
text-align: center;
justify-content: center;
}

.powder {
margin-top: 150px;
}

.topping img {
width: 80px;
}

.topptext {
font-size: 10px;
}

.okara {
margin-top: -10px;
}

.toppen {
font-size: 5px;
padding: 6px 0 5px 0;
}

.okara img {
margin-top: 0px;
}

.souce {
margin-top: 30px;
margin-bottom: 15px;
}

.aa {
width: 75%;
margin: 0 auto;
margin-top: -50px;
}

.aah2 {
text-align-last: left;
padding-bottom: 10px;
}

.aa p {
text-align-last: left;
border-top: 1px solid #674E3B;
font-size: 12px;
padding-top: 8px;
line-height: 1.6;
margin-bottom: 100px;
}

@media (min-width: 950px) {
.areflexpc {
display: contents;
}

.areflexpc img {
width: 40px;
margin-top: 5px;
}

.areflexpc p {
color: #6D8059;
font-size: 10px;
}

.areflexmobile {
display: none;
}

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

.areflexpc {
display: flex;
flex-direction: column;
}

.ws {
display: flex;
justify-content: center;
margin: 0;
}

.wsbox {
margin: 0;
width: 100%;
}

.textflex p {
text-align-last: left;
}

.en {
margin-bottom: 8px;
}

.money {
margin-top: 25px;
}

.pc {
display: none;
}

.mobile {
display: block;
}

.okara {
margin-top: 0px;
}

.aa {
width: 50%;
margin: 0 auto;
}

.pcflex {
text-align-last: left;
width: 100%;
}

.imgflex img {
width: 140px;
object-fit: cover;
}

.ws {
padding-top: 90px;
}

.topping img {
width: 140px;
padding-top: 10px;
}
}

.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;
}