main {
  overflow: visible;
}

@media (min-width: 768px) {
  .mv.shop {
    background-image: url(/shop/img/mv_shop_pc.jpg);
  }
}

.shop .contents {
  margin: 70px auto;
  display: flex;
  width: 1000px;
}
.shop .submenu {
  width: 240px;
  margin: 50px 40px 0 0;
}
.shop .submenu ul{
  list-style-type: none;
  font-size: 12px;
  font-family: athelas, serif;
}
.shop .submenu li{
  margin-bottom: 20px;
}
.shop .submenu li a{
  color: #717171;
}
.shop .submenu li a:hover{
  color: #000;
  text-decoration: none;
}
.shop .submenu li:last-child{padding-top:20px;}
.shop .main-contents {
  display: block;
  width: 720px;
}

.shop .texts-area {
  display: flex;
  position: relative;
  justify-content: center;
  margin-bottom: 280px;
}

.shop .shop-texts {
  font-size: 20px;
  letter-spacing: 1.4px;
}

.shop .text-box:not(:last-child) {
  margin-bottom: 80px;
}

.shop h2{
  margin-top: 120px;
  margin-bottom: 30px;
  font-family: athelas, serif;
}

.shop h2:first-child{
  margin-top: 50px;
}

.shop .text-box p {
  line-height: 41px;
}

.shop .texts-area .container {
  position: absolute;
  top: 0;
}

.shop .texts-area .img-area {
  margin-top: 483px;
  padding: 10px;
}

.shop .title-area {
  text-align: center;
  margin-bottom: 200px;
}

.shop .text-padding {
  padding-left: 6%;
  padding-right: 6%;
}

.shop .block-area {
  display: flex;
  position: relative;
  line-height: 36px;
  margin-bottom: 300px;
}

.shop .block-area .text-box p {
  margin-bottom: 30px;
}

.shop .block-area .text-block-1 {
  position: absolute;
  width: 42%;
  top: 6%;
  left: 35px;
  margin-bottom: 0;
  min-width: 330px;
}

.shop .block-area .text-block-2 {
  position: absolute;
  width: 40%;
  right: 8%;
  bottom: 10%;
  margin-bottom: 0;
  min-width: 316px;
}

.shop .h3 {
  font-size: 34px;
  font-weight: bold;
  margin: 70px 0;
  letter-spacing: 2.74px;
}

@media (min-width: 768px) {
  .shop .submenu ul{
    position: sticky;
    top: 220px;
  }
}

@media (max-width: 767px) {
  .mv.shop {
    background-image: url(/shop/img/mv_shop_sp.jpg);
  }
  .shop .contents {
    display: block;
    width: 100%;
    margin: 60px auto;
  }
  .shop .submenu {
    width: 90%;
    margin: 0 40px 0 40px;
    padding: 10px;
  }
  .shop .submenu li{
    line-height: 3em;
    margin-bottom: 10px;
  }
.shop .submenu li:last-child{line-height: 1.5rem;}
  .shop .main-contents {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .shop h2{
    margin: 160px 10px 10px;
  }
  .shop .submenu li:not(:last-child):before{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-color:  transparent transparent #565656 #565656;
    transform: rotate(-45deg);
    margin: 0 5px 4px 0;
  }
}


/*アコーディオン部分*/
.shop .cp_qa .cp_actab .cp_actab-content::before,
.shop .cp_qa .cp_actab .q-text::before {
  content: none;
}

.shop .cp_qa .cp_actab .q-text {padding: 1em 1em 1em 1em;}
.shop .cp_qa .cp_actab .cp_actab-content{padding: 0 0 0 1.5em;}

/* Original PC/Tablet styles for shop-info and shop-name */
.shop .shop-info{display: flex;}
.shop .shop-name{width:200px; min-width: 200px;}

.shop .shop-add{display: flex;}
.shop .shop-add p{padding-right: 0 !important; min-width: 80px;}
.shop .shop-add a{margin-top: 5px; padding-left: 10px}

/*直営店浦*/
.shop .shop-add-tel{display: block;}
.shop .shop-add-tel div{display: flex;}
.shop .shop-add-tel div p{margin-bottom: 0;}
.shop .shop-add-tel div p.shop-tel{margin-top:0;}

/*＋の位置*/
.shop .cp_qa .cp_actab .q-text::after{top:0.5em;}
/*-の位置*/
.shop .cp_actab.js-accordion.open .q-text::after{top:20px;}


@media (max-width: 767px) {
    /* Existing mobile rules for shop-name */
	.shop .shop-name{width:150px; min-width: 150px; margin-right: 20px;}
	.shop .shop-add, .shop .shop-add-tel div{display: block;}
	.shop .shop-add p:first-child{margin-bottom:0;}
	.shop .shop-add a{padding-left: 0}

    /* BEGIN MODIFICATIONS FOR MOBILE LAYOUT */
    /* This section was updated based on the user's request */

    /* Mobile styles for .shop .shop-info: stack name and buttons vertically */
    .shop .shop-info {
        flex-direction: column; /* Stack shop-name and shop-buttons vertically */
        align-items: flex-start; /* Align content to the left */
    }
    /* Adjust shop-name for mobile layout to take full width */
    .shop .shop-name {
        width: auto; /* Allow shop-name to take natural width */
        min-width: unset; /* Remove fixed min-width for mobile */
        margin-right: 0; /* Ensure no right margin */
        margin-bottom: 10px; /* Add space below shop-name */
    }

    /* Mobile specific styles for shop buttons */
    /* These override the conflicting rules added on 20250605 within the mobile media query */
    .shop-buttons {
        flex-direction: row; /* Make buttons horizontal on mobile */
        align-items: flex-start; /* Align buttons to the start (left) */
        margin-top: 0; /* Remove top margin as shop-name now has bottom margin */
        flex-wrap: wrap; /* Allow buttons to wrap if screen is too narrow */
    }

    a.shop-button { /* CHANGED FROM .shop-button */
        width: auto; /* Buttons size based on content */
        margin-bottom: 0; /* Remove bottom margin (was for vertical stacking) */
    }
    /* END MODIFICATIONS FOR MOBILE LAYOUT */
}

/*20250605追加分*/
/* ショップボタンのコンテナ */
.shop-buttons {
    display: flex; /* PC・タブレットでは横並び */
    gap: 10px; /* ボタン間のスペース */
    margin-top: 10px; /* 店舗名の下のスペース */
    margin-bottom: 20px; /* ボタンの下のスペース */
}

/* 個々のショップボタン */
a.shop-button { /* CHANGED FROM .shop-button */
    display: block; /* パディングを適用するためにブロック要素にする */
    padding: 8px 15px;
    border: 1px solid black; /* 1pxの黒い線で囲む */
    color: black; /* 文字色 */
    text-decoration: none; /* 下線を消す */
    text-align: center; /* 文字を中央揃え */
    border-radius: 5px; /* 角を少し丸くしてボタン風にする */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    transition: background-color 0.3s ease, color 0.3s ease; /* ホバー時のアニメーション */
}

a.shop-button:hover { /* CHANGED FROM .shop-button:hover */
    background-color: black; /* ホバー時の背景色 */
    color: white; /* ホバー時の文字色 */
}