/*
Theme Name: 老舗和菓子店　さむらい堂
Theme URI: https://
Description: 老舗の和菓子のさむらい堂のサイトです
Version: 1.0
*/

/* PC、スマホ共通スタイル */
body {
    font-family: "Noto Sans jp","Kiwi Maru"
    ;
}

.circle-btn-wrapper {
    text-align: right;
}

html {scroll-behavior: smooth;}

/* 商品紹介　ボタン */
.circle-btn {
    display: inline-block;
    border-radius: 50%;
    border: solid 1px #969696;
    width: 44px;
    height: 44px;
    margin: 3px -18px 0 0;
    position: relative;
    
}

.circle-btn::before{
    content: "";
    position: absolute;
    width: 21px;
    height: 6px;
    border-bottom: 1px solid #969696;
    border-right: 1px solid #969696;
    transform: skew(45deg);
    left: -5px;
    right: 0;
    margin: 0 auto;
    top: 17px;
    transition: 0.5s;
}

.circle-btn-wrapper:hover .circle-btn::before{
    left: 5px;
}

.btn {
    display: inline-block;
    background-color: #abb287;
    width: 155px;
    font-size: 15px;
    padding: 16px 0;
    text-align: center;
    color: #faf6e5;
    border-radius: 18px;
    position: relative;
    transition: all 0.5s ease-out;
}

.btn-wrapper {
    text-align: center;
    margin-top: 85px;
}


/* 店舗情報　ボタン */
.access-btn {
    display: inline-block;
    width: 172px;
    padding: 17px 0;
    font-size: 13px;
    text-align: center;
    border-radius: 18px;
    background-color: #abb287;
    color: #faf6e5;
    border-radius: 18px;
    position: relative;
    transition: all 0.5s ease-out;
  }
  
   /* 文字を上に表示するための記述 */
  .access-btn-wrapper span,.access-btn-wrapper--second span,.btn-wrapper span,.news-btn_wrapper span {
    position: relative;
  }
   /* ボタンhover後の背景色 */
  .btn::before,.access-btn::before,.news_btn::before,.submit::before {
    background: linear-gradient(to bottom, #67743c, #828e41);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease-out;
    width: 100%;
    border-radius: 18px;
  }
   /* ボタンhoverで文字色変更 */
  .btn:hover,.access-btn:hover,.news_btn:hover,.submit:hover {
    color: #faf6e5;
  }
   /* ボタンhoverで元の背景色透過 */
  .btn:hover::before,.access-btn:hover::before,.news_btn:hover::before,.submit:hover::before {
    opacity: 0;
  }


/* お問い合わせ　ボタン */
  .phone-btn {
    display: inline-block;
    padding: 54px 0 53px 53px;
    background-color: #faf6e8; /* 背景色 */
    box-shadow: 3px 5px 0 #d7d5ba; /* 影の太さ・色 */
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    border: 1px solid #9a9a98;
    transition: 0.2s;
  }
  
  .phone-btn:hover {
    box-shadow: none;
    transform: translateY(5px);
    background: #eaebd3;
    transition: 0.2s;
  }

  .phone {
    width: 60%;
    margin: 0 auto;
    max-width: 130px;
  }

  .mail-btn {
    display: inline-block;
    padding: 68px 0 68px 54px;
    background-color: #faf6e8; /* 背景色 */
    box-shadow: 3px 5px 0 #d7d5ba; /* 影の太さ・色 */
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    border: 1px solid #9a9a98;
    transition: 0.2s;
  }
  
  .mail-btn:hover {
    box-shadow: none;
    transform: translateY(5px);
    background: #eaebd3;
    transition: 0.2s;
  }

  .mail {
    width: 60%;
    margin: 0 auto;
    max-width: 130px;
  }

/* お知らせ　ボタン */
.news_btn {
    display: inline-block;
    width: 147px;
    padding: 17px 0;
    font-size: 13px;
    text-align: center;
    border-radius: 18px;
    background-color: #abb287;
    color: #faf6e5;
    border-radius: 18px;
    position: relative;
    transition: all 0.5s ease-out;
  }

.news-btn_wrapper {
    text-align: center;
    margin-top: 9%;
}


/*================
PC用のスタイル 
=================*/

article {
    background-image: url(images/backimg.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 11%;
    padding-bottom: 13%;
}

.wrapper {
    background-color: #faf6e8; 
    width: 74%;
    margin: 0 auto;
    border-radius: 30px;
    padding-bottom: 11%;
}

/* ヘッダー */
.nav-wrapper {
    display: flex;
    background-color: #465022;
    height: 80px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.header-logo {
    width: 118px;
    position: absolute;
    top: 0;
    left: 2%;
}

.nav-box {
    display: flex;
    list-style: none;
    font-size: 16px;
    margin-top:27px;
}

.nav-title {
    position: relative;
}

.nav-title::before {
    content: "";
    position: absolute;
    width: 0.3px;
    height: 14px;
    background-color: #ece5ce;
    top: 7px;
    right: -10px;
}

.nav-title:last-child::before {
    content: unset;
}

.nav-title a {
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-weight: lighter;
    text-decoration: none;
    padding-left: 20px;
    color: #ece5ce;
}

.nav-title a:nth-child(6) {
    padding-right: 0;
}

.nav-inner {
    /* max-width: 563px; */
    margin: 0 auto;
}

/* メインビジュアル */
.img {
    max-width: 55px;
    margin: 0 auto;
}

.mainvisual {
    margin-top: 80px;
    width: 100%;
    height: 688px;
    object-fit: cover;
}

.main-title {
    position: absolute;
    width: 7%;
    right: 10%;
    top: 18%;
}

.scrolldown {
    position: absolute;
    left: 8%;
    bottom: 100px;
    width: 50px;
}

/* スクロールのテキスト */
.scrolldown span {
    position: absolute;
    left: 30px;
    top: 20px;
    color: #ffffff;
    font-size: 11px;
}

/* 線の描写 */
.scrolldown::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 10%;
    width: 1px;
    height: 120px;
    background-color: #ffffff;
    animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

@keyframes pathmove{
0%{
	height:0;
	top:0;
	opacity: 0;
    }

30%{
	height:80px;
	opacity: 1;
    }

100%{
	height:0;
	top:120px;
	opacity: 0;
    }
}

.img02 {
    position: relative;
}

.scroll {
    position: absolute;
    width: 2.6%;
    bottom: 20px;
    left: 50%;
}

.decoration01 {
    position: absolute;
    width: 32%;
    top: 38px;
    right: 0;
    /* width: 41%;
    top: 4px;
    right: -137px; */
    animation: fuwafuwa-01 6s ease 0s infinite;
}

@keyframes fuwafuwa-01 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -5%);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* スマホ用メインビジュアル非表示 */
.mainvisual-sp {
    display: none;
}

/* 商品紹介 */

.title-box {
    margin: 0 auto;
}

.title01 {
    font-size: 30px;
    color: #465022;
    font-family: Kiwi Maru;
    font-weight: 500;
    text-align: center;
    margin-top: 30%;
    padding-bottom: 10px;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 1;
}

.subtitle {
    font-size: 16px;
    color: #465022;
    font-family: "Noto Sans jp";
    text-align: center;
    padding-bottom: 10px;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 1;
}

.wavyline {
    display: block;
    max-width: 360px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.title-inner {
    margin: 0 auto;
    max-width: 930px;
    margin-bottom: 25px;
    position: relative;
}

.decoration02 {
    position: absolute;
    width: 40%;
    right: 1%;
    bottom: -32%;
    z-index: 0;
    animation: fuwafuwa-1 5s ease 0s infinite;
}

@keyframes fuwafuwa-1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -15%);
    }
    100% {
        transform: translate(0, 0);
    }
}

.products-wrapper {
    margin-top: 150px;
    display: flex;
}

.daihuku-img {
    /* width: */
    width: 84%;
    padding-left: 8%;
}

.taiyaki-img {
    /* width: 155px; */
    width: 86%;
    padding-left: 3%;
}

.sakuramochi-img {
    width: 86%;
}

.dango-img {
    width: 77%;
}

.itigodaihuku-img {
    width: 84%;
}

.namagasi-img {
    /* width: 135px; */
    width: 75%;
    padding-top: 20px;
    padding-left: 20px;
}

.products-box {
    /* padding: 0 10% 10% 0; */
    width: calc((100% - 128px * 2 )/ 3);
    margin-right: 93px;
    position: relative;
}

.products-box:nth-child(3n){
    margin-right: -20px;
}

.products-box::before {
    content: "豆大福";
    position: absolute;
    writing-mode: vertical-lr;
    font-family: Kiwi Maru;
    font-weight: lighter;
    font-size: 16px;
    color: #465022;
    right: 23px;
    top: -60px;
}

.products-box:nth-child(4),.products-box:nth-child(5),.products-box:nth-child(6){
    margin-top: 145px;
}


.products-box:nth-child(2)::before {
    content: "たい焼き";
    margin-top: -18px;
}

.products-box:nth-child(3)::before {
    content: "桜もち";
    margin-top: -9px;
}

.products-box:nth-child(4)::before {
    content: "三色団子";
}

.products-box:nth-child(5)::before {
    content: "いちご大福";
    margin-top: -25px;
}

.products-box:nth-child(6)::before {
    content: "上生菓子";
    margin-top: -5px;
}

.products-title-box {
    display: flex;
    position: relative;
}

.products-inner {
    display: flex;
    margin: 0 auto;
    max-width: 800px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
}

.products-title {
    writing-mode: vertical-lr;
    font-family: Kiwi Maru;
    font-weight: lighter;
    font-size: 16px;
    color: #465022;
    padding: 0 8px 0 130px;
}

.price-box {
    font-family: "Noto Sans jp";
    color: #393939;
    display: flex;
    align-items: flex-end;
    padding: 30px 0 30px 0;
    justify-content: center;
}

.price {
    font-size: 20px;
    font-weight: 400;
    padding-right: 7px;
    letter-spacing: 0.05em;
}

.price-h4 {
    font-size: 12px;
}

.products-p {
    font-family: "Noto Sans jp";
    color: #393939;
    font-size: 12px;

}

.products-button {
    padding: 0 0 0 165px;
}

.button01 {
    width: 155px;
    display: block;
    max-width: 160px;
    margin: 0 auto;
    margin-top: 130px;
}

.line01 {
    display: block;
    max-width: 10px;
    margin: 0 auto;
    margin-top: 50px;
}

/* 背景装飾を非表示 */
.back-decoration01 {
    display: none;
}

.back-decoration02 {
    display: none;
}

.back-decoration03 {
    display: none;
}


/* さむらい堂のこだわり */

.favorite-title-box {
    position: relative;
    margin-top: -130px;
    padding-top: 1px;
}

.title02 {
    font-size: 30px;
    color: #465022;
    font-family: Kiwi Maru;
    font-weight: 500;
    text-align: center;
    margin-top: 18%;
    padding-bottom: 10px;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 1;
}

.decoration03 {
    width: 44%;
    position: absolute;
    bottom: -100px;
    left: 20px;
    animation: fuwafuwa-1 5s ease 0s infinite;
}

.wavyline {
    display: block;
    max-width: 360px;
    margin: 0 auto;
    position: relative;
}

.favorite-inner {
    display: flex;
    /* margin-top: 150px; */
    margin: 0 auto;
    max-width: 800px;
    padding-top: 120px;
}

.favorite-img {
    width: 57%;
    height: 50%;
}

.text-box {
    display: flex;
    padding-left: 80px;
    flex-direction: row-reverse;
}

.p1 {
    writing-mode: vertical-rl;
    font-family: "Noto Sans jp";
    font-weight: normal;
    color: #353535;
    font-size: 14px;
    padding-left: 30px;
}

.p2 {
    writing-mode: vertical-rl;
    font-family: "Noto Sans jp";
    font-weight: normal;
    color: #353535;
    font-size: 14px;
    padding-top: 50px;
}

.img-box {
    position: relative;
}

.wavyline03 {
    width: 44%;
    margin-top: 7%;
}

.favorite-scroll {
    position: absolute;
    right: 50%;
    top: -26px;
}

/* 背景装飾を非表示 */
.back-decoration04 {
    display: none;
}

/* 店舗情報 */
.access-wrapper {
    padding-top: 30px;
}

.access-title-box {
    position: relative;
}

.title {
    font-size: 30px;
    color: #465022;
    font-family: Kiwi Maru;
    font-weight: 500;
    text-align: center;
    margin-top: 6%;
    padding-bottom: 10px;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 1;
}

.decoration04 {
    width: 40%;
    position: absolute;
    bottom: -46px;
    right: 67px;
    animation: fuwafuwa-1 5s ease 0s infinite;
}

.access-img-sp {
    display: none;
} 

.access-img {
    position: absolute;
    left: 0;
    margin-top: 5%;
}

.access-box {
    display: flex;
    padding-top: 45%;
    align-items: center;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    flex-direction: row-reverse;
}

.decoration05 {
    position: absolute;
    z-index: 0;
    width: 30%;
    top: 51%;
    left: 4%;
}

.access-text {
    position: relative;
    z-index: 1;
    color: #393939;
    font-size: 14px;
    margin: -40px 72px 0 60px;
}

.access-p1 {
    padding-bottom: 20px;
}

.access-p2 {
    padding-bottom: 20px;
}

.map-wrapper {
    width: 120%;
}

.map-box {
    border: 1px solid #7b7b7b;
    border-radius: 7%;
}

.map {
    height: 0;
    overflow: hidden;
    padding-bottom: 75%;
    position: relative;
    border-radius: 7%;
    filter:grayscale(30%);-webkit-filter:grayscale(40%)
}

.map ifame {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.access-btn-wrapper--second {
    display: none;
}

.access-btn-wrapper {
    margin-top: 13px;
    text-align: right;
}

.access-scroll {
    display: block;
    max-width: 10px;
    margin: 0 auto;
    margin-top: -70px;
    height: 260px;
}

/* お問い合わせ */
.contact-wrapper {
    padding-top: 30px;
}

.contact-title-box {
    position: relative;
}

.title-box {
    position: relative;
    z-index: 1;
}

.decoration06-sp {
    display: none;
}

.decoration06 {
    position: absolute;
    top: -71px;
    right: 79px;
    width: 35%;
    z-index: 0;
    animation: fuwafuwa-1 5s ease 0s infinite;
}

.contact-text {
    text-align: center;
    color: #393939;
    font-size: 12px;
    padding-top: 60px;
}

.contact-button {
    width: 60%;
    margin: 0 auto;
    max-width: 800px;
}

.contact-inner {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 9%;
}

.contact-box {
    text-align: center;
    margin: 0 30px;
}

.button-p {
    text-align: center;
    color: #393939;
    font-size: 15px;
    padding-top: 10%;
}

.contact-scroll {
    display: block;
    max-width: 10px;
    margin: 0 auto;
    margin-top: 6%;
    height: 200px;
}

/* お知らせ */

.news-title-box {
    position: relative;
}

.decoration07 {
    position: absolute;
    width: 34%;
    bottom: -59%;
    left: 7%;
    animation: fuwafuwa-1 5s ease 0s infinite;
}

.decoration07-sp {
    display: none;
}

.news-inner {
    display: flex;
    justify-content: center;
    padding: 0 16%;
}

.news-box {
    margin-top: 10%;
    text-align: center;
    padding: 0 3%;
}

.news-img {
    width: 100%;
    position: relative;
}

.news-p {
    font-family: "Noto Sans jp";
    font-size: 11px;
    color: #393939;
    text-align: center;
}

.news-wrapper {
    position: relative;
    padding-top: 30px;
}

.back-decoration05 {
    display: none;
}

/* フッター */

.footer-wrapper {
    background-color: #465022;
    height: 300px;
    text-align: right;
    position: relative;
}

.pagetop {
    position: absolute;
    top: -117px;
    left: 9%;
}

.sns-icon {
    display: block;
    text-align: center;
}

.twitter {
    width: 35px;
}

.instagram {
    width: 35px;
    padding: 0 32px;
}

.facebook {
    width: 35px;
}

.fotter-wrapper {
    position: relative;
}

.sns-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.footer-logo {
    position: absolute;
    width: 118px;
    top: 0;
    right: 2%;
}


/* ====================
コンタクトページ
=======================*/
.contact-wrapper {
    padding: 30px 40px 0 40px;
    font-family: "Noto Sans jp";
}

.cotactform-wrapper {
    margin: 0 auto;
    max-width: 700px;
    position: relative;
}

.cotactform-box {
    margin-top: 15%
}

.area {
    width: 99%;
    padding: 12px 5px;
    border: 0.5px solid;
    border-radius: 4px;
}

textarea {
    border: 0.5px solid;
    border-radius: 4px;
    width: 99%;
    padding: 12px 5px;
}

.cotactform {
    margin-bottom: 20px;
}

.privacypolicy-wrapper {
    display: flex;
}

.privacypolicy {
    text-decoration: underline;
}

.submit-wrapper {
    text-align: center;
}

.submit {
    display: inline-block;
    background: linear-gradient(to bottom, #67743c, #828e41);
    border-radius: 17px;
    color: #ece5ce;
    border: none;
    padding: 13px 57px;
    position: relative;
    transition: all 0.5s ease-out;
}



/* ====================
スマートフォン用のスタイル 
======================*/
@media screen and (max-width: 767px) {

body {
    min-width: 375px;
}

article {
    padding-top: 0;
    padding-bottom: 0;
}

.wrapper {
    background-color: #faf6e8;
    width: 100%;
    border-radius: 0;
    padding-bottom: 160px;
}


/* スマホ用ナビゲーション */
/* ハンバーガーメニュー */
.hamburger {
    width: 50px;
    height: 50px;
    position: relative;
    display: block;
    padding-right: 8px;
    z-index: 10000;
}

.nav-title::before {
    display: none;
}

/* ハンバーガーメニューの線 */
.hamburger span {
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    background-color: #f3e8dc;
    width: 26px;
    height: 1.5px;
    position: absolute;
    top: 17px;
    right: 19px;
}

.hamburger span:nth-child(2){
    top: 24px;  
}

.hamburger span:nth-child(3){
    top: 31px;
}





.hamburger.open span:nth-child(1){
top: 24px;
transform: rotate(33deg);
}

.hamburger.open span:nth-child(2){
opacity: 0;
}

.hamburger.open span:nth-child(3){
top: 24px;
transform: rotate(-33deg);
}


.nav-inner{
background-color: #465022;
opacity: 0.95;
width: 75%;
position: absolute;
z-index: 9999;
top: 0;
right: -100%;
/* right: 0; */
height: 100vh;
transition: 0.6s;
}

.nav-box{
display: block;
margin-top: 60px;
}

.nav-title {
    text-align: left;
    margin-left: 40px;
    padding-bottom: 50px;
}

.nav-inner.menu{
right: 0;
}
.nav-inner.menu li:nth-child(2){
color: #ebe5ce;
}
.nav-inner a{
color: #ebe5ce;
font-size: 20px;
font-family: Kiwi Maru;
}

/* スマホ用メニューのサブタイトル */
.HOME::before {
    content:"HOME";
    position: absolute;
    font-family: "Noto Sans jp";
    color: #ebe5ce;
    font-size: 13px;
    bottom: 26px;
}

.PRODUCTS::before {
    content: "PRODUCTS";
    position: absolute;
    font-family: "Noto Sans jp";
    color: #ebe5ce;
    font-size: 13px;
    bottom: 26px;
}

.FAVORITE::before {
    content: "FAVORITE";
    position: absolute;
    font-family: "Noto Sans jp";
    color: #ebe5ce;
    font-size: 13px;
    bottom: 26px;
}

.ACCESS::before {
    content: "ACCESS";
    position: absolute;
    font-family: "Noto Sans jp";
    color: #ebe5ce;
    font-size: 13px;
    bottom: 26px;
}

.CONTACT::before {
    content: "CONTACT";
    position: absolute;
    font-family: "Noto Sans jp";
    color: #ebe5ce;
    font-size: 13px;
    bottom: 26px;
}

.NEWS::before {
    content: "NEWS";
    position: absolute;
    font-family: "Noto Sans jp";
    color: #ebe5ce;
    font-size: 13px;
    bottom: 26px;
}



/* ヘッダー */
.nav-wrapper {
    display: flex;
    background-color: #465022;
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    justify-content: end;
}

.header-logo {
    width: 19%;
}

/* メインビジュアル */

.mainvisual {
    display: none;
} 

.mainvisual-sp {
    display: block;
    width: 100%;
    margin-top: 50px;
    height: 600px;
    object-fit: cover;
}

.main-title {
    width: 62px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.decoration01 {
    display: none;
}

.scrolldown {
    bottom: 100px;
}

.scrolldown span {
    top: 44px;
}

.scroll {
    width: 6%;
}

/* 商品紹介 */
.wavyline {
    width: 60%;
}

.title01 {
    font-size: 20px;
    margin-top: 30%;
}

.subtitle {
    font-size: 11px;
}

.decoration02 {
    right: 11%;
    top: 16%;
}

.products-wrapper {
    margin-top: 0;
}

.products-inner {
    padding: 0 10%;
    max-width: 700px;
    margin: 0 auto;
}

.products-box {
    display: flex;
    width: 100%;
    margin-right: 0;
    margin-top: 100px;
    position: relative;
    z-index: 1;
}

.products-box--second {
    flex-direction: row-reverse;
}

.products-text {
    padding-left: 20px;
    position: relative;
}

.products-text--second {
    padding-left: 0;
    padding-right: 20px;
}

.products-box:nth-child(4), .products-box:nth-child(5), .products-box:nth-child(6){
    margin-top: 100px;
}

.products-box:nth-child(3n){
    margin-right: 0;
}

.back-decoration01 {
    display: block;
    position: absolute;
    z-index: 0;
    top: -77px;
    left: -23px;
}

.back-decoration02 {
    display: block;
    position: absolute;
    z-index: 0;
    top: -140px;
    right: -8px;
}

.back-decoration03 {
    display: block;
    position: absolute;
    z-index: 0;
    left: -13px;
    top: -64px;
}

.daihuku-img {
    width: 50%;
    height: 50%;
    padding-left: 0;
}

.taiyaki-img {
    width: 54%;
    height: 50%;
    padding-left: 0;
    position: relative;
}

.sakuramochi-img {
    width: 53%;
    height: 50%;
}

.dango-img {
    width: 46%;
    height: 50%;
    position: relative;
}

.itigodaihuku-img {
    width: 50%;
    height: 50%;
}

.namagasi-img {
    width: 45%;
    height: 50%;
    padding: 0;
    position: relative;
}

.products-box::before {
    right: auto;
    z-index: 1;
}

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

.price-box {
    justify-content: unset;
}

.circle-btn {
    margin: 3px 0 0 0;
}


/* さむらい堂のこだわり */
.title02 {
    font-size: 20px;
    margin-top: 30%;
}

.decoration03 {
    top: 16%;
    width: 50%;
}

.favorite-inner {
    display: block;
    max-width: 450px;
    margin: 0 auto;
    padding: 30px 40px 0 40px;
    position: relative;
}

.favorite-img {
    width: 100%;
}

.back-decoration04 {
    display: block;
    position: absolute;
    left: 22px;
    bottom: 35px;
    z-index: 0;
    width: 44%;
}

.text-box {
    display: block;
    padding-left: 0;
    margin-top: 80px;
    margin-bottom: 80px;
    position: relative;
}

.p1,.p2 {
    writing-mode: unset;
    text-align: center;
}

.p1 {
    padding-left: 0;
}

.p2 {
    padding-left: 0;
    margin-top: 0;
}

.wavyline03 {
    display: none;
}

.favorite-scroll {
    height: 145px;
}

/* 店舗情報 */
.access-wrapper {
    margin-top: 140px;
}

.title {
    font-size: 20px;
}

.access-img {
    display: none;
}

.access-img-sp {
    display: block;
    width: 100%;
    margin-top: 50px;
}

.decoration04 {
    top: -101px;
    right: 43px;
    width: 45%;
}

.access-inner {
    position: relative;
}

.access-box {
    display: block;
    max-width: 75%;
    /* margin: 0 auto;
    padding: 60px; */
    padding-top: 0;
    margin-top: 30px;
}

.map-sp {
    display: block;
    width: 100%;
}

.map-wrapper {
    width: 100%;
}

.decoration05 {
    display: none;
}

.access-btn-wrapper--second {
    display: block;
    text-align: right;
    margin-top: 10px;
}

.access-text {
    margin: 40px 0 0 0;
}

.access-p1 {
    text-align: center;
}

.access-p2 {
    text-align: center;
}

.access-p3 {
    text-align: center;
}

.access-scroll {
    height: 145px;
    margin-top: 60px;
}

/*　お問い合わせ */
.contact-text {
    margin-top: 40px;
    padding: 0 40px;
}

.contact-inner {
    width: 308px;
    justify-content: space-between;
}



.decoration06 {
    display: none;
}

.decoration06-sp {
    display: block;
    position: absolute;
    left: 41px;
    top: -75px;
    width: 40%;
    animation: fuwafuwa-1 5s ease 0s infinite;
}

.phone-btn {
    width: 95px;
    padding: 42px 2px 42px 45px;
}

.mail-btn {
    width: 94px;
    padding: 51px 3px 51px 45px;
}

.contact-box {
    margin: 0;
}

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

.contact-scroll {
    height: 145px;
    margin-top: 60px;
}

/* お知らせ */
.decoration07 {
    display: none;
}

.decoration07-sp {
    display: block;
    position: absolute;
    width: 40%;
    left: unset;
    right: 30px;
    bottom: 0;
    animation: fuwafuwa-1 5s ease 0s infinite;
}

.news-inner {
    display: block;
    margin-top: 80px;
    padding: 0 40px;
}

.news-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-img {
    width: 35%;
}

.news-p {
    padding-left: 17px;
    text-align: left;
}

.news-btn-wrapper:hover .news-btn::before{
    left: 5px;
}

.news-btn_wrapper {
    text-align: right;
    margin-right: 7%;
}

.back-decoration05 {
    display: block;
    position: absolute;
}

/* フッター */
.footer-wrapper {
    height: 215px;
}

.footer-logo {
    width: 19%;
}

.sns-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.pagetop {
    width: 30px;
    top: -94px;
}
}