@charset "utf-8";

/* common */

html {
    margin: 0;
}

body {
    margin: 0;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #555;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4, ul, li, p, figure, table, tr, td {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

p {
    line-height: 180%;
}

figcaption {
    font-size: 0.9em;
    margin: 8px 0 16px;
    text-align: center;
}

img {
    vertical-align: bottom;
}

:root {
    --cc: #E42114;
    --fc: #555;
}

.container {
    margin: 0 32px;

}

.inner-center {
    text-align: center;
}

.inner-center h2 {
    margin: 8px 0 16px;
}

.bakery,
.cafe {
    padding: 80px 0;
}

.line-solid {
    border-top: 1px solid #B1B1B1;
    margin: 80px 0;
}

.flex-box {
    display: flex;
    gap: 32px;
}

.flex-box + .flex-box{
    margin-top: 32px;
}

/* header */

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h1 img {
    width: 120px;
    height: 100px;
}

header nav ul {
    font-size: 0.8em;
    margin-left: -32px;
}

header nav ul li {
    margin-left: 32px;
}

header nav ul li li {
    margin-left: 0;
}

header nav ul.nav-flex {
    display: flex;
}


/* 
header nav li + li {
    margin-left: 32px;
} */

/* header hamburger-menu */
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #fff;
}
span.menu-btn-line,
span.menu-btn-line:before,
span.menu-btn-line:after {
    content: '';
    display: block;
    height: 2px;
    width: 25px;
    border-radius: 3px;
    background-color: var(--fc);
    position: absolute;
}

span.menu-btn-line  {
    top: 22px;
}

span.menu-btn-line:before {
    bottom: 8px;
}
span.menu-btn-line:after {
    top: 8px;
}

span.menu-btn-text {
    color: var(--fc);
    font-size: 8px;
    bottom: 8px;
    position: absolute;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}


.menu-content ul {
    padding: 70px 16px 16px;
}
.menu-content ul li + li{
    border-top: solid 1px #B1B1B1;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#B1B1B1;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #B1B1B1;
    border-right: solid 2px #B1B1B1;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}	

.menu-content {
    width: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #F6F4EF;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

.hamburger-menu {
    display: none;
}


/* hero */

.hero-sp {
    display: none;
}

/* hero-sub */

.hero-sub-sp {
    display: none;
}

.hero-sub-sp img{
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
}

.hero-sub-pc {
    display: block;
}

.hero-sub-pc img{
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
}

/* news */

.news {
    padding: 0 0 32px;
}

.news .container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.news h3 {
	font-size: 24px;
	text-align: center;
}

.news ul {
	font-size: 14px;
    color: #A15B1F;
    width: 70%;
}

.news li {
    padding:8px 0;
    display: flex;
    gap: 16px;
}

.news li + li {
	list-style-type : none;
	border-top:1px solid #D6D6D6;
}

.news li a {
    color: var(--fc);
}

/* concept */

.concept {
    background: #F6F4EF;
}

.concept .container {
    padding: 80px 0;
}


.concept p {
    margin: 0 8%;
}


/* contents */

.contents .container {
    padding: 80px 0;
}


.contents section {
    display: flex;
    gap: 32px;
}

.contents section.border-line {
    border: 1px solid var(--cc);
    padding: 32px;
    align-items: center;
}

.contents section:nth-child(even) {
    flex-direction: row-reverse;
}

.contents section + section {
    margin-top: 80px;
}

.contents .text-box {
    width: calc((100% - 32px) / 2);
}

::-webkit-full-page-media, :future, :root 
.contents .text-box {
    margin-left: 32px;
}

.contents .pic {
    width: calc((100% - 32px) / 2);
}

::-webkit-full-page-media, :future, :root 
.contents .pic {
    margin-left: 32px;
}


.pic img {
    width: 100%;
}

::-webkit-full-page-media, :future, :root 
.contents .flex-box + .flex-box .text-box:first-child {
	   margin-left: 0px;
}

/* moreボタンのアニメーション　矢印 */
.button-arrow a {
    position: relative; /* 親要素にrelativeで相対位置 */
    display: flex;
    justify-content: space-around;
    align-items: center; /* flexで上下左右中央揃え */
    padding: 10px 24px;
    color: #313131;
    transition: 0.3s ease-in-out;
}
.button-arrow a:before {
    content: '';
    position: absolute; /* 絶対位置 */
    top: calc(50% - 3px); /* 縦の50%-3pxの位置に */
    right: -2em; /* 右端から-2em */
    transform: rotate(30deg); /* 30度回転 */
    width: 12px;
    height: 1px;
    background-color: #313131;
    transition: 0.3s;
}
.button-arrow a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    width: 40px;
    height: 1px;
    background-color: #313131;
    transition: 0.3s;
}
.button-arrow a:hover:before, .button-arrow a:hover:after {
    right: -2.5em;
}

.button-arrow a:hover {
    
}

/* moreボタンの装飾　アンダーライン */
.button-line {
    position: relative;
    margin-left: auto;
    right: 3em;
    max-width: 100px;
}
/* .button-line:before {
    position: absolute;
    bottom: 0px;
    left: 50%;
    content: '';
    width: 200%;
    height: 1px;
    transform: translateX(-50%);
} */
.button-line:after {
    position: absolute;
    bottom: 0px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #313131;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .3s;
}
.button-line:hover {
    /* opacity: 0.7; */
}
.button-line:hover:after {
    transform: scale(1, 1);
}

/* top-shop */

.top-shop {
    margin-bottom: 80px;
}

.top-shop .container {
    display: flex;
    justify-content: space-between;
}

.top-shop section {
    text-align: center;
    width: calc(100% / 4 - 12px);
}

.top-shop h3 {
    margin: 16px 0 ;
}

.top-shop img {
    border-radius: 50%;
    width: 100%;
}

.top-shop p {
    font-size: 0.9em;
}

/* breadcrumbs-list */

.breadcrumbs-list {
    border-top: 1px solid #B1B1B1;
    padding: 16px 0;
    font-size: 0.8em;
}

.breadcrumbs-list li {
    display: flex;
}

/* bakery */

.bakery .inner-center {
    margin-bottom: 80px;
}

.bakery section {
    display: flex;
    gap: 32px;
}

.bakery section:nth-child(even) {
    flex-direction: row-reverse;
}

/* bread */

.bread {
    background: #F6F4EF;
    padding: 80px 0;
}

.bread section.bread-story {
    display: flex;
    background: #fff;
    padding: 32px;
    gap: 24px;
    align-items: center;
    flex-direction: row-reverse;
}

::-webkit-full-page-media, :future, :root 
.bread-story .text-box,
.deli .text-box {
	   margin-left: 24px;
	}

.bread .text-box {
    flex: 1;
}

.bread-story .pic {
    width: 30%;
}

.bread .bread-story h3 {
    font-size: 1.2em;
    margin: 16px 0;
    text-align: center;
}

/* lineup */

.lineup {
}

.lineup ul {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.lineup ul li {
    width: calc((100% - 120px) / 3 );
    margin-top: 0px;
}

::-webkit-full-page-media, :future, :root 
.lineup ul li {
	   margin-bottom: 32px;
	}

::-webkit-full-page-media, :future, :root 
.lineup ul li:nth-child(2),
.lineup ul li:nth-child(3),
.lineup ul li:nth-child(5),
.lineup ul li:nth-child(6),
.lineup ul li:nth-child(8),
.lineup ul li:nth-child(9) {
	   margin-left: 60px;
	}

.lineup h3 {
    margin: 48px 0;
    text-align: center;
}

.lineup h4 {
    margin: 16px 0;
    text-align: center;
    font-size: 1.1em;
}

.lineup p {
    font-size: 0.8em;
}

.lineup img {
    width: 100%;
}

/* cafe */



.cafe .cafe-info table {
    padding: 16px;
    margin: 80px auto 0;
}

.cafe .cafe-info table tr td{
    padding: 4px;
}

.cafe h3 {
    font-size: 1.3em;
}

.cafe h4 {
    font-size: 1.2em;
}

.cafe .time {
    font-size: 1.1em;
}

.small {
    font-size: 0.7em;
}

.menu {
    display: flex;
    gap: 80px;
    margin-top: 32px;
    flex-wrap: wrap;
}

::-webkit-full-page-media, :future, :root 
.menu section{
    margin-top: 32px;
}


::-webkit-full-page-media, :future, :root 
.menu section:nth-child(even){
    margin-left: 80px;
}

.menu img {
    width: 100%;
    margin-bottom: 16px;
}

.menu section {
    width: calc((100% - 80px) / 2);
}

.cafe .breakfast > .inner-center,
.cafe .lunch > .inner-center,
.cafe .drink > .inner-center {
    margin: 48px 0;
}

.drink-icon {
    padding: 0 4px;
    background: #F39A00;
    display: inline-block;
    color: #fff;
    font-size: 0.8em;
    border-radius: 4px;
    margin: 4px 0;
}

.bread-icon {
    padding: 0 4px;
    background: #EC6D74;
    display: inline-block;
    color: #fff;
    font-size: 0.8em;
    border-radius: 4px;
    margin: 4px 0;
}

.menu-list {
    font-size: 0.8em;
}

.bread-desk > div {
    display: flex;
    gap: 16px;
    margin: 32px 0;
    align-items: center;
}

::-webkit-full-page-media, :future, :root 
.bread-desk > div > div:nth-child(even),
.bread-desk > div > p:nth-child(even) {
    margin-left: 16px;
}

.drink table {
    border-collapse: collapse;
    border-spacing: 0;
    width: calc((100% - 80px) / 2);
}

.drink table tr,
.shop table tr {
    border-top: 1px solid #B1B1B1;
}

.drink table td,
.shop table td {
    padding: 8px 0;
}

.drink table td:nth-child(even) {
    text-align: right;
}

.drink table tr:last-child,
.shop table tr:last-child {
    border-bottom: 1px solid #B1B1B1;
}

::-webkit-full-page-media, :future, :root 
.drink table:nth-child(even) {
    margin-left: 80px;
}



/* party */

.party-lineup {
    background: #F6F4EF;
    padding: 80px 0; 
}

.party .container > .inner-center {
    margin: 80px 0;
}

.sandwich-lunchbox {
    background: #F6F4EF;
    padding: 8px 0 80px; 
}

.party .lineup h4 {
    margin: 16px 0 0;
    text-align: center;
}

.party .lineup .inner-center p + p{
    line-height: 100%;
    margin-bottom: 16px;
}

.party .lineup .inner-center p{
    line-height: 1.5em;
}

.reserve {
    border: 1px solid #B1B1B1;
    padding: 32px 48px;
    background: #fff;
    margin-top: 80px;
}

.reserve .reserve-title {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 16px;
}

.reserve-box {
    display: flex;
    margin-top: 24px;
}

.reserve-button {
    background: #706E60;
    color: #fff;
    font-size: 1.5em;
    width: 200px;
    display: flex;
    align-items: center;     /* 垂直中央 */
    justify-content: center; /* 水平中央 */
    text-align: center;
    margin-right: 16px;
}

.reserve-box p {
    font-size: 1em;
}

.tel {
    font-size: 1.5em;
}

.reserve-button div {
    flex: 1;
}















/* shop */

.shop {
    padding: 80px 0;
}

.shop h3 {
    margin-bottom: 16px;
    font-size: 1.2em;
}

.shop .inner-center {
    margin-bottom: 80px;
}


.shop .text-box {
    width: calc((100% - 32px) / 2);
}

.shop .pic {
    width: calc((100% - 32px) / 2);
}

.shop table {
    font-size: 0.8em;
    line-height: 180%;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.shop table td:nth-child(odd){
    width: 20%;
}

::-webkit-full-page-media, :future, :root 
.shop .text-box {
	   margin-left: 24px;
}

::-webkit-full-page-media, :future, :root 
.shop .flex-box + .flex-box .text-box:first-child {
	   margin-left: 0px;
}

/* deli */

.deli {
    padding: 80px 0;
}

.deli .inner-center {
    margin-bottom: 80px;
}

.deli section {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}


.deli-foods {
    background: #F6F4EF;
    padding: 16px 0 80px;
}

.deli .text-box {
    width: calc((100% - 32px) / 2);
}

.deli .pic {
    width: calc((100% - 32px) / 2);
}

/* footer */

footer {
    font-size: 0.8em;
}

.footer-wrap {
    background: var(--cc);
    color: #fff;
    padding: 32px 0;
}

footer ul {
    display: flex;
    justify-content: space-between;
}

.footer-logo {
    font-size: 1.4em;
}

.copyright {
    text-align: center;
    padding: 16px 0;
}


/* hero */

/* .hero {
    background-image: url(../img/1200x400.png);
    height: 400px;
    background-position: center;
    background-size: cover;
} */


/* スクロールバー非表示 */
.sbnot {
 height: 150px;
 overflow-y: scroll;
 /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.sbnot::-webkit-scrollbar {
 display:none;
}






@media (max-width: 599px) {

    .container {
        margin: 0 16px;
		padding: 0;
    }
	
	.text-box,
    .pic {
        margin-left: 0 !important;
    }
	
	.button-line {
        right: 0;
        margin: 0 auto;
        text-align: center;
    }
	
	body {
    overflow-x: hidden;
}

    .line-solid {
        margin: 40px 0;
    }

    header h1 img {
        width: 100px;
        height: 80px;
    }

    .news .container {
        display: block;
    }

    .news h3 {
        margin-bottom: 16px;
    }

    .news ul {
        width: 100%;
    }

    .contents section {
        display: block;
        margin-left: 0px;
		
    }

    .contents .text-box {
        width: 100%;
        margin-top: 16px;
        margin-left: 0px;
    }

    .contents .pic {
        width: 100%;
        margin-left: 0px;
    }

    .text-box {
        width: 100%;
    }

    .top-shop .container {
        display: block;
    }

    .top-shop section {
        text-align: center;
        
        width: 100%;
        margin-top: 32px;
    }

    .bakery section {
        display: block;
    }

    .bakery .text-box {
        margin-top: 16px;
    }

    .bread section.bread-story {
        display: block;
        background: #fff;
        padding: 32px;
        gap: 24px;
        align-items: center;
    }

    ::-webkit-full-page-media, :future, :root 
    .bread-story .text-box,
    .deli .text-box {
	   margin-left: 0px;
	}

    .bread-story .pic {
        display: flex;
        width: 100%;
        gap: 16px;
        margin-top: 16px;
    }

    .pic figure {
        width: calc(100% - 16px) / 2;
    }

    .cafe .cafe-info table {
        padding: 16px 0;
        margin: 80px auto 0;
    }

    .lineup ul {
        display: block;
        margin-left: 0px;
        margin-top: 0px;
    }

    .lineup ul li {
        width: 100%;
        margin-left: 0px;
        margin-top: 0px;
    }

    .lineup ul li + li {
        margin-top: 32px;
    }

    ::-webkit-full-page-media, :future, :root 
.lineup ul li:nth-child(2),
.lineup ul li:nth-child(3),
.lineup ul li:nth-child(5),
.lineup ul li:nth-child(6),
.lineup ul li:nth-child(8),
.lineup ul li:nth-child(9) {
	   margin-left: 0px;
	}

    .menu {
        display: block;
        margin-top: 0px;
    }

    .menu section {
        width: 100%;
        margin-top: 32px;
    }

    ::-webkit-full-page-media, :future, :root 
    .menu section:nth-child(even){
        margin-left: 0px;
    }
    
    .bread-desk > div {
        display: block;
        gap: 0;
        margin: 0;
        text-align: center;
    }

    ::-webkit-full-page-media, :future, :root 
.bread-desk > div > div:nth-child(even),
.bread-desk > div > p:nth-child(even) {
    margin-left: 0px;
}

    .drink table {
        width: 100%;
    }

    .drink table:nth-child(2) tr:first-child {
        border-top: none;
    }

    ::-webkit-full-page-media, :future, :root 
    .drink table:nth-child(even) {
    margin-left: 0px;
}


    .shop section {
        display: block;
        gap: 0;
        flex-wrap: wrap;
    }

    .shop .text-box,
    .deli .text-box {
        width: 100%;
        margin-top: 16px;
    }

    .shop .pic, 
    .deli .pic {
        width: 100%;
    }

    .shop h3 {
        text-align: center;
    }

    .flex-box {
        display: block;    }
    
    .flex-box + .flex-box{
        margin-top: 32px;
    }

    ::-webkit-full-page-media, :future, :root 
.shop .text-box {
	   margin-left: 0px;
}

    .reserve {
        padding: 32px;
    }

    .reserve-box {
        display: block;
        margin-top: 24px;
        text-align: center;
    }
    
    .reserve-button {
        width: 100%;
        padding: 8px 0;
        margin-bottom: 16px;
    }

    .deli section {
    display: block;
    }

    .footer-wrap {
        display: none;
    }

}

@media (max-width: 900px) {
    .hamburger-menu {
        display: inherit;
    }

    nav {
        display: none;
    }
}

@media (min-width: 800px) {

    .container {
      width: calc(100% - 32px);
      margin: 0 auto;
      max-width: 980px;
    }
  
}


@media (max-width: 400px) {

    .hero-sp {
        display: block;
    }

    .hero-pc {
        display: none;
    }

    .hero-sub-sp {
        display: block;
    }

    .hero-sub-pc {
        display: none;
    }
    
    
}




/* 限定弁当のバナー */
.flex-wrap {
  display: flex;
}
.flex-item {
  width: 500px;
  height: 50px;
  line-height: 100px; 
  text-align: center;
  color: #fff;
  background: #fff;
  margin-right: 40px;
}
.flex-item:last-child {
  margin-right: 0;
}





/* 線 */
.hr {
  height: 1px;
	border-width: 0;
	background-color: #f3ecec;
	background-image: -webkit-linear-gradient(right,
	#ddd6d6 5px,#855454 5px);
	background-image: linear-gradient(-90deg,
	#ddd6d6 5px,#855454 5px);
	background-size: 10px 10px;
}





/* スマホ表示のハンバーガーメニューの子メニュー表示 */

.has-submenu {
    position: relative;
}

.has-submenu > a {
    display: block;
    margin-bottom: 0;
    padding-bottom: 5px; /* 必要に応じて調整 */
    border-bottom: none; /* 区切り線が不要な場合 */
}

/* 子メニューを親の外に浮かせる（親の高さに影響させない） */
.submenu {
	margin-top: -60px;
    display: none;
    position: absolute;
    left: 0;
    top: 70%;
    background-color: #fff;
    padding: 10px 0;
    z-index: 1000;
    min-width: 160px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.submenu li a {
    display: block;
    padding: 5px 15px; /* 適度な上下パディングで親と合わせる */
    line-height: 1.4; /* 行間を整える */
    font-size: 16px; /* 親と同じ文字サイズを想定 */
    white-space: nowrap; /* テキストが折り返されないように */
}


/* スマホ用の縦レイアウトでは absolute でなく block 表示にしたい場合 */
@media screen and (max-width: 768px) {
    .submenu {
        position: static;
        box-shadow: none;
        background: none;
        padding: 0;
        min-width: auto;
    }
}

.submenu li a {
        padding: 5px 10px;
    }