@charset "utf-8";
/* CSS Document */

header{ z-index: 100;}

figure{ margin: 0;}
a{ text-decoration: none;}
img { max-width: 100%; height: auto;}
br.spBr{ display: none;}
br.spBrNo{ display: block;}

main * {letter-spacing: 3px; box-sizing: border-box;}
#menuHeader{ background-color: rgb(255 255 255 / 0.9); margin: 15px 0 0 0; width: 100%;}
#menuHeader div{ max-width: 1200px; margin: 0 auto; padding: 15px 15px;}
#menuHeader div img{ width: 80px; height: 100%;}
#menuHeader div ul{ margin: 0 0 0 0;}
#menuHeader div li{ display:inline-block; margin: 0 0 0 20px;}
#menuHeader div li a{ color:#000;}

#visual{ background: url("../img/visual.jpg") top center / cover; width: 100%; height: 690px; color: #FFF; padding: 15px 0; margin: 50px 0 0 0;}
#visual .inner{ max-width: 1280px; margin: 0 auto; position: relative;}
#visual .inBox{ position: absolute;  right: 0; width: 550px; text-align: left; margin: 40px 0 0;}
#visual .inBox h2{ font-size: 3.8rem; margin: 0 0 20px 40px;}
#visual .inBox p{ display: flex; align-items: center; margin: 0 0 0 40px;}
#visual .inBox p::before{ content: ""; width: 110px; height: 110px; background: url("../img/logo.png") no-repeat center; background-size: contain; margin-right: 15px; flex-shrink: 0; filter: drop-shadow(5px 5px 5px #ffffff80);}
#visual .inBox .band{ top:13px; right: 75px; position: absolute;}
#visual img:last-child{ width: 100%; margin: 20px 0 0 0;}

#concept{ background: #fafafa; padding: 50px 0; font-family: "Noto Serif JP", serif; font-size: 2rem; line-height: 180%; letter-spacing: 2px; font-style: italic;}
#concept p{ width: 90%; margin: 0 auto;}

main#tsukihana section{ text-align: center;}
section h2{font-family: "Noto Serif JP", serif; font-size: 40pt;}

#story{ padding: 80px 0;}
#story div.band{ padding: 0 40px;}
#story h2{ margin: 60px 0 0; }
#story h2::before{ content: ""; content: url(../img/logo.png); display: block; }
#story h2 img{ height: 60px; margin: 30px auto;}
#story div#storyBox{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; max-width: 1200px; width: 90%; margin: 0 auto; text-align: left;}
#story p{ line-height: 180%;}
#story div div{ width: 50%;}
#story figure{ width: 48%; margin: 5px 0 0 0; }
#story figure img{ width: 100%; height: auto;}
#story figcaption{ font-size: 1.5rem; text-align: right;}

#products{ padding: 50px 0 100px 0; background: url("../img/bg_product.jpg") no-repeat center / cover;font-family: "Noto Serif JP", serif;}
#products h2{ margin: 0;}
#products h2 img{ height: 150px;}
#products div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; max-width: 1200px; margin: 0 auto; width: 90%;}
#products div figure{ width: 25%; display: block; margin: 0;}
#products div figure figcaption{ margin: -20px auto 0;}
#products div figure figcaption strong{ font-size: 2.6rem; padding: 0 0 10px 0; display: block;}
#products div figure figcaption p{ margin: 0 auto;}
#products div figure img{ max-width: 100%; height: auto; filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));}
#products div a{ background: #990000; color:#FFF; border-radius: 6px; padding: 10px 15px; text-decoration: none; margin: 30px auto 0; display: inline-block; font-size: 1.5rem; letter-spacing: 0;}

#flow{ margin: 80px auto 80px;}
#flow h2{ max-width: 100%; width: 90%; margin: 30px auto;}
#flow h2 img{ height: 50px;}
#flow div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; gap: 24px; width: 90%; }
#flow div figure{width: calc(24% - 24px); display: block; background: #FFFFFF; text-align: left; letter-spacing: 0;}
#flow div::after{ content:""; display:block; width:22%;}
#flow div::before{ content:""; display:block; width:22%; order: 1;}
#flow h3{ background: url("../img/line.jpg") no-repeat center bottom; background-size: 50%; margin: 80px 0; padding: 0 0 20px; font-size: 2.2rem;}
#flow div figure img{ max-width: 100%; height: auto;}
#flow div figcaption{ font-size: 1.5rem; letter-spacing: 0;}
#flow div figcaption strong{ margin: 5px 0; display: block;}

#select{ background: url("../img/bg_select.jpg") no-repeat; background-position: right 0 top;  background-size: cover; color: #FFFFFF; height: 500px; display: flex; align-items:center;font-family: "Noto Serif JP", serif;}
#select div{ text-align: left; max-width: 1200px; margin: 80px auto; width: 90%;}
#select div h2{ text-shadow: 1px 1px 10px #000000; margin: 0;}
#select div h3{ font-size: 2rem; text-shadow: 1px 1px 10px #000000; margin: 15px 0 30px;}
#select div p{ font-size: 1.7rem; text-shadow: 1px 1px 10px #000000; line-height: 180%;}

#nutrition{ padding: 50px 0; background: url("../img/bg_line.jpg") repeat-x top, linear-gradient(90deg, #0d2f5a, #220f17);}
#nutrition h2{ margin: 30px auto 30px; max-width: 100%; width: 70%;}
#nutrition h2 img{ height: 50px;}
#nutrition h2+P{ color: #FFFFFF; width: 90%; margin: 0 auto; font-size: 1.7rem;}
#nutrition div{ background: #FFFFFF; border-radius: 30px; max-width: 1200px; margin: 30px auto; padding: 40px 30px; width: 90%;}
#nutrition div div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 0!important;}
#nutrition div h3{ color: #990000; font-family: "Noto Serif JP", serif; font-size:2.3rem;}
#nutrition div p{ text-align: left;}
#nutrition div div figure{ width: 48%;}

#recipe{ padding: 80px 0 80px 0; background:url("../img/bg_line.jpg") repeat-x top, url("../img/bg_recipi.jpg") repeat;}
#recipe h2{ max-width: 100%; width: 90%; margin: 30px auto;}
#recipe h2 img{ height: 50px;}
#recipe h3{ max-width: 100%; width: 90%; margin: 0 auto;}
#recipe h3 img{ height: 25px;}
#recipe div p{ position: relative; line-height: 1.4; padding:30px 50px; display: inline-block; margin: 0 auto;}
#recipe div p:before, #recipe div p:after { content:''; width: 20px; height: 30px; position: absolute; display: inline-block;}
#recipe div p:before { border-left: solid 1px #000000; border-top: solid 1px #000000; top:0; left: 0;}
#recipe div p:after { border-right: solid 1px #000000; border-bottom: solid 1px #000000; bottom:0; right: 0;}
#recipe div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 80px auto; gap:30px; width: 90%;}
#recipe div figure{width: calc(25% - 30px); display: block; background: #FFFFFF; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);overflow: hidden;}
#recipe div figure img{ max-width: 100%; width: 100%; height: auto;object-fit: cover; display: block;}
#recipe div figure a{ color: #000;}
#recipe div figcaption{ padding: 5px 10px; letter-spacing: 0;}
#recipe p:last-of-type{ font-size:2rem; line-height: 180%;}
#recipe p+a:last-of-type{ background: #990000; color:#FFF; border-radius: 6px; padding: 15px 20px; text-decoration: none; margin: 50px auto 0; display: inline-block; font-size: 1.5rem;}

#recipe div .btn { display: inline-block; transition: transform 0.3s ease;}
#recipe div .btn:hover { transform: scale(1.05);}

@media screen and (max-width: 768px) {
br.spBr{ display: block;}
br.spBrNo{ display: none;}

#menuHeader div img{ width: 80px; height: 100%;}
#menuHeader div ul{ margin: 0 0 0 0; text-align: right; padding: 0;}
#menuHeader div li:first-of-type{ display: block; margin: 0 0 5px 0;}
#menuHeader div li{ display:inline-block; margin: 0 0 0 10px;}

#concept{font-size: 1.6rem; line-height: 180%; letter-spacing: 2px; font-style: italic;}

/*#story h2{ display: flex; align-items: center;  flex-direction: column; gap: 30px;  justify-content: center; margin: 50px auto 30px; width: 90%; }
#story h2::before { content: ""; content: url(../img/logo.png);}*/
#story h2 img{ height: 60px;}
#story div#storyBox{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; max-width: 1200px; margin: 0 auto; text-align: left; flex-wrap: wrap; width: 90%;}
#story div div{ width: 100%;}
#story figure{ width: 100%; margin: 50px 0 0 0; }

#products h2 img{ height: 70px; width: auto;}
#products div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; max-width: 1200px; margin: 0 auto; flex-wrap: wrap;}
#products div figure{ width: 50%; display: block; margin: 0;}
#products div figure:nth-of-type(3){ width: 50%; display: block; margin: 50px 0 0;}
#products div figure:nth-of-type(4){ width: 50%; display: block; margin: 50px 0 0;}

#select{ background: url("../img/bg_select.jpg"); background-position: right -500px top; background-size: cover; color: #FFFFFF; height: 500px; display: flex; align-items:center;font-family: "Noto Serif JP", serif;}
#select div{ text-align: left; max-width: 1200px; margin: 80px auto; width: 90%;}
#select div h2{ font-size: 4rem; text-shadow: 1px 1px 10px #000000; margin: 0;}
#select div h3{ font-size: 1.8rem; text-shadow: 1px 1px 10px #000000; margin: 15px 0 30px;}
#select div p{ font-size: 1.4rem; text-shadow: 1px 1px 10px #000000; line-height: 180%;}

#flow{ margin: 50px auto 30px;}
#flow h2 img{ height: 35px;}
#flow div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; gap: 24px; flex-wrap: wrap; width: 90%;}
#flow div figure{width: calc(50% - 12px); display: block; background: #FFFFFF; text-align: left;}
#flow div figcaption{ font-size: 1.3rem;}
#flow h3{ background: url("../img/line.jpg") no-repeat center bottom; background-size: 80%; margin: 30px 0 50px;  padding: 0 0 20px 0; font-size: 1.5rem;}

#nutrition div div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 0!important; flex-wrap: wrap; width: 100%;}
#nutrition div div figure{ width: 100%;}
#nutrition div div figure:nth-of-type(2){ width: 100%; margin: 40px 0 0 0;}
#nutrition h2 img{ height: 35px;}
#nutrition div h3{ color: #990000; font-family: "Noto Serif JP", serif; font-size:2.3rem; margin: 0 auto 20px;}
#nutrition h2+P{ color: #FFFFFF; width: 90%; margin: 0 auto; font-size: 1.5rem;}
#nutrition div p{ text-align: left; font-size: 1.3rem;}

#recipe div{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 50px auto; gap:30px; flex-wrap: wrap; width: 90%;}
#recipe div figure{width: calc(50% - 15px); display: block; background: #FFFFFF; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);}
#recipe h2 img{ height: 35px;}
#recipe h3 img{ height: 17px;}
#recipe p:last-of-type{ font-size:1.5rem; line-height: 180%;}
#recipe div figcaption{ font-size: 1.3rem;}
#recipe div p{ position: relative; line-height: 1.4; padding:15px 20px; display: inline-block; margin: 0 auto;}
}

@media screen and (max-width: 600px) {

#visual{ background: url("../img/visual.jpg") bottom center; width: 100%; height: 630px; color: #FFF; position: relative; padding: 15px 0;}
#visual .inBox h2{ font-size: 2.6rem; text-shadow: 1px 1px 10px #000000; padding: 50px 0 0 0; }
#visual .inBox p{ text-shadow: 1px 1px 10px #000000; }
#visual .inBox .band{ top:55px; left: 270px; right: auto; position: absolute; font-size: 1.3rem;}
#visual .inBox{ position: absolute; left: 0%; width: 90%!important; text-align: left; position: relative; margin: 0 auto 0;}
#visual img:last-child{ width: 100%; margin: 20px 0 0 0;}
}