img{ border:none; vertical-align:bottom; image-rendering: -webkit-optimize-contrast;}
.clear{ clear:both; height:0;}
.center{ text-align:center;}
ul{ list-style:none; margin:0; padding:0;}
p{ margin:0;}
html{ overflow: auto;}
body{ min-width: 1200px; overflow: hidden; margin:0 auto; padding:0; font-family: "Noto Serif JP", serif; font-weight: 400; font-style: normal; text-transform: none !important; font-display: swap;}
a img:hover{ opacity:0.7; filter:alpha(opacity=70); transition: all .5s; outline: none;}

/* IE8+, Chrome */
a{ outline: 0;}

/* Firefox */
a::-moz-focus-inner,
a::-moz-focus-inner { border: 0;}

#container{ width: 100%; min-width: 1200px; margin: 0 auto; color: #1a1a1a; font-size: 16px;}

/* kv */
.kv{ height: 100vh; display: flex; justify-content: center; align-items: center; margin-top: -120px;}
.kv .main-copy{ color: #fff; font-size: 30px; font-weight: bold; text-align: center; line-height: 1;}

/* video */
.video{
  width: 100%;
  height: 100%;
  /*background: url(../img/kv-alternative.jpg) no-repeat center/cover;*/
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(16, 57, 75, .5);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 0;
}

.video video{
  /*min-width: 100%;
  min-height: 100%;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* オーバーレイを通して動画操作を可能にする */
  /* ドットのパターン */
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.8) 1px, transparent 1px);
  background-size: 3px 3px; /* ドットの間隔 */
  /* 必要に応じてブレンドモードを調整 */
  /* mix-blend-mode: multiply; */
  filter: contrast(25);
}

#calender{ width: 100%; padding: 80px 0 120px; background: #FAF4E6;}
#calender .calWrap{ width: 1200px; margin: 0 auto 80px;}
#calender .calWrap h2{ padding-left: 0; color: #7A2B31; margin: 0 auto 40px; font-size: 24px; text-align: center; position: relative; font-weight: 700;}
#calender .calWrap h2::before {
  content: ""; 
  display: inline-block; 
  width: 40px; 
  height: 40px; 
  background: url("../img/common/icon-calendar.svg") no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 37%;
  transform: translateY(-50%);
}
#calender .calInner{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: top;}
#calender .calInner .lCal{ width: 560px;}
#calender .calInner .rCal{ width: 560px;}
#calender .calInner .yymmTtl{ font-size: 32px; text-align: center; margin: 0 0 30px;}
#calender .calInner table{ width: 100%; border-collapse: collapse; border: #808080 solid 1px; box-sizing: border-box; background: #FFF;}
#calender .calInner table th{ font-weight: normal; width: 80px; border: #808080 solid 1px; font-size: 14px; padding: 5px 0;}
#calender .calInner table th.sat{ color: #1a60bd;}
#calender .calInner table th.sun{ color: #FF1A1B;}
#calender .calInner table td{ vertical-align: top; text-align: left; border: #808080 solid 1px; padding: 3px 5px 10px;}
#calender .calInner table td span{ display: block; text-align: center; color: #1a1a1a;}
#calender .calInner table td.lred{ color: #FE898F;}
#calender .calInner table td.lblue{ color: #8DB0DE;}
#calender .calInner table td.lgray{ color: #B3B3B3;}
#calender .calInner table td.gray{ background: #E5E5E5;}
#calender .calInner table td.blue{ color: #1a60bd;}
#calender .calInner table td.red{ color: #FF1A1B;}

#calender .bHours{ width: 1000px; margin: 0 auto; background: #FFF; padding: 30px 60px; box-sizing: border-box;}
#calender .hourWrap{ display: flex; justify-content: space-between; align-items: top;}
#calender .hourWrap .lHours{ width: 430px;}
#calender .hourWrap .rHours{ width: 430px;}
#calender .hourWrap span{ width: 132px; line-height: 36px; padding-bottom: 3px; background: #7A2B31; color: #FFF; font-size: 20px; text-align: center; display: inline-block; margin-right: 10px;}
#calender .hourWrap p{ font-weight: bold; color: #3b060b; font-size: 20px; display: inline-block; margin: -3px 0 0 10px; vertical-align: text-top;}
#calender .bHours p.ex{ font-weight: bold; color: #3b060b; font-size: 20px; margin-top: 40px; text-align: center;}

#kodawari{ width: 100%; background: url("../img/top/bg-01.webp") no-repeat center top, #F2F1EC; background-size: contain; padding: 120px 0;}
#kodawari .kodawariWrap{ width: 1200px; margin: 0 auto;}
#kodawari .leadWrap{ width: 700px; margin: 0 auto 130px; display: flex; justify-content: space-between; align-items: center; color: #FFF;}
#kodawari .leadWrap .llWrap{}
#kodawari .leadWrap .llWrap h2{ font-size: 44px; writing-mode: vertical-rl; margin: 0; font-weight: 500;}
#kodawari .leadWrap .rlWrap{ position: relative; padding-left: 100px;}
#kodawari .leadWrap .rlWrap::before{ content: ""; position: absolute; top: 50px; bottom: 0; left: 0; width: 2px; height: 120px; background: #C1BBBB;}
#kodawari .leadWrap .rlWrap h3{ font-size: 32px; margin: 0 0 40px; font-weight: 500;}
#kodawari .leadWrap .rlWrap p{ font-size: 18px; line-height: 2.2em;}

#kodawari .threeColumns{ display: flex; justify-content: space-between; align-items: stretch; color: #FFF;}
#kodawari .threeColumns .kImg{ width: 400px;}
#kodawari .threeColumns .kImg img{}
#kodawari .threeColumns h4{ font-size: 24px; writing-mode: vertical-rl; text-orientation: upright; margin: 0 auto; font-weight: 500; line-height: 1.8em; border-left: 1px solid #BEA4A7; border-right: 1px solid #BEA4A7; padding: 0 30px; width: 200px; height: 240px; box-sizing: border-box;}
#kodawari .threeColumns p{ line-height: 2.2em; margin-top: 50px} 
#kodawari .lTc{ width: 400px;}
#kodawari .cTc{ width: 400px;}
#kodawari .rTc{ width: 400px;}
#kodawari .lTcWrap{ padding: 70px 65px; background: url("../img/top/bg-kodawari01.webp") no-repeat left top, #893D49; background-size: contain; height: 700px; box-sizing: border-box;}
#kodawari .cTcWrap{ padding: 70px 65px; background: url("../img/top/bg-kodawari02.webp") no-repeat left top, #7A2B31; background-size: contain; height: 700px; box-sizing: border-box;}
#kodawari .rTcWrap{ padding: 70px 65px; background: url("../img/top/bg-kodawari03.webp") no-repeat left top, #893D49; background-size: contain; height: 700px; box-sizing: border-box;}

#container .topBtn{ margin-top: 60px;}
#container .topBtn a{ width: 320px; height: 60px; display: block; color: #3b060b; text-decoration: none; background: url("../img/common/btn-arrow.svg") no-repeat 92% center; background-size: 20px; transition: all .3s; padding: 16px 0 0 40px; box-sizing: border-box; margin: 0 auto; border: #3b060b solid 1px;}
#container .topBtn a:hover{ text-decoration: none; background: url("../img/common/btn-arrow.svg") no-repeat 92% center; background-size: 20px; transition: all .3s;  color: #3b060b;}

#menu{ width: 100%; background: #F2F1EC;}
#menu .menuHead{ background: url("../img/top/bg-02.webp") no-repeat center top; background-size: cover; height: 560px; box-sizing: border-box; padding-top: 170px;}
#menu .menuHead h2{ width: 200px; font-size: 40px; line-height: 2em; writing-mode: vertical-rl; margin: 0 auto; font-weight: 500; color: #FFF;}
#menu .menuWrap{ width: 100%; background-image: url("../img/common/bg-pattern1-l.webp"),url("../img/common/bg-pattern1-r.webp"); background-position: top left, bottom right; background-repeat: no-repeat, no-repeat; padding: 80px 0 120px;}
#menu .menuWrap .menuInner{ width: 1200px; margin: 0 auto;}
#menu .menuWrap .menuInner h3{ font-size: 32px; margin: 0 auto 50px; font-weight: 500; text-align: center;}
#menu .menuWrap .menuInner .menuImg{}

#lead{ width: 100%; background: #F2F1EC;}
#lead .leadHead{ background: url("../img/top/bg-03.webp") no-repeat center top; background-size: cover; height: 560px; box-sizing: border-box; padding-top: 170px;}
#lead .leadHead h2{ width: 200px; font-size: 40px; line-height: 2em; writing-mode: vertical-rl; margin: 0 auto; font-weight: 500; color: #FFF;}
#lead .leadWrap{ width: 100%; background: #F2F1EC; padding: 80px 0 120px;}
#lead .leadWrap .leadInner{ width: 1200px; margin: 0 auto;}
#lead .leadWrap .leadInner h3{ font-size: 32px; margin: 0 auto 50px; font-weight: 500; text-align: center;}
#lead .leadWrap .leadInner p{ text-align: center; line-height: 2.2em;}

#shop{ width: 100%;}
#shop .shopHead{ background: url("../img/top/bg-04.webp") no-repeat center top; background-size: cover; height: 560px; box-sizing: border-box; padding-top: 170px;}
#shop .shopHead h2{ width: 200px; font-size: 40px; line-height: 2em; writing-mode: vertical-rl; margin: 0 auto; font-weight: 500; color: #FFF;}
#shop .shopWrap{ width: 100%; background: url("../img/common/bg-beige.webp") repeat; padding: 80px 0 0;}
#shop .shopWrap .shopInner{ width: 1200px; margin: 0 auto;}
#shop .shopWrap .shopInner h3{ font-size: 32px; margin: 0 auto 50px; font-weight: 500; text-align: center;}
#shop .shopWrap .shopInner p{ text-align: center; line-height: 2.2em; padding-bottom: 230px;}

#shop .shopInfo{ background: url("../img/common/bg-d-red.webp") repeat;}
#shop .infoInner{ width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: top; color: #FFF;}
#shop .infoInner .main{ width: 440px;}
#shop .infoInner .bypass{ width: 440px;}
#shop .infoInner .shopImg{ margin: -160px 0 30px;}
#shop .infoInner h4{ font-size: 32px; margin: 0 auto 30px; font-weight: 500;}
#shop .infoInner .add{ line-height: 1.8em; margin-bottom: 10px;}
#shop .infoInner .tel{ font-size: 20px; margin-bottom: 10px;}
#shop .infoInner .tel span{ font-size: 32px;}
#shop .infoInner .hours{ line-height: 2.2em; margin-bottom: 20px;}
#shop .infoInner .btnShop{ padding-bottom: 105px;}
#shop .infoInner .btnShop a{ display: inline-block; margin-right: 5px;}
#shop .infoInner .btnShop a img{ width: 144px;}

footer{ width: 100%; padding-top: 80px; text-align: center;}
footer .footLogo{ margin-bottom: 50px;}
footer .footLink{ margin-bottom: 70px;}
footer .footLink ul{ display: flex;justify-content: center; align-items: center;}
footer .footLink li{ padding: 0 0 0 25px;}
footer .footLink li:not(:first-child)::before{ content: ""; border-left: 1px solid #D6D6D6; margin-right: 25px;}
footer .footLink li a{ color: #1A1A1A; text-decoration: none; font-size: 14px;}
footer .footLink li a:hover{ text-decoration: underline;}
footer .copyRight{ background: #893D49; color: #FFF; padding: 15px 0; font-size: 12px;}


@media screen and (min-width: 768px) {
  /* kv */
  .kv{
    min-width: 1200px;
  }
  .kv .main-copy{
    font-size: 60px;
  }
  /* video */
  .video{
    min-width: 1200px;
	height: 100vh; 
  }
}

/*--- top pages ---*/



/* seccond contents */
#secContents{ width: 100%;}
#secImage{ width: 100%; height: 540px; background-size: cover; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: -120px;}
#secImage.dango{ background: url("../img/dango/bg-main.webp") no-repeat; background-position: center bottom;}
#secImage.products{ background: url("../img/menu/bg-main.webp") no-repeat; background-position: center bottom;}
#secImage.shop{ background: url("../img/shop/bg-main.webp") no-repeat; background-position: center bottom;}
#secImage.contact{ background: url("../img/contact/bg-main.webp") no-repeat; background-position: center bottom;}
#secImage h2{ text-align: center; font-size: 40px; font-weight: normal; color: #FFF; margin: 0;}
#secContents h3{ font-size: 30px; text-align: center; font-weight: 500; position: relative;}
#secContents h3::after{ content: ""; display: block; width: 200px; height: 1px; background: #7a2b32; margin: 40px auto 60px;}
#secContents .pankuzu{ width: 1200px; margin: 0 auto 90px; padding: 15px 0;}
#secContents .pankuzu a{ color: #1A1A1A; text-decoration: none; position: relative; padding-right: 40px; margin-right: 15px;}
#secContents .pankuzu a:hover{ text-decoration: underline;}
#secContents .pankuzu a::after{ content: ""; display: block; height: 1px; background-color: #1A1A1A; width: 25px; position: absolute; right: 0; top: 50%;}
#secContents .secInner{ width: 1200px; margin: 0 auto; font-size: 16px;}
#secContents .secInner p{ line-height: 2em;}
#secContents .secInner p.mb20{ margin-bottom: 20px;}
#secContents .secInner p.mb30{ margin-bottom: 30px;}
#secContents .secInner p.mb60{ margin-bottom: 60px;}

/*--- dango ---*/
#secContents .dangoWrap{ width: 100%; background: url("../img/dango/bg-r.webp") no-repeat right 24px; background-size: contain;}
#secContents .dangoWrap.bgL{ background: url("../img/dango/bg-l.webp") no-repeat left 24px; background-size: contain;}
#secContents .dangoInner{ width: 1200px; display: flex; justify-content: space-between; align-items: top; margin: 0 auto 110px;}
#secContents .dangoInner_rev{ flex-direction: row-reverse; margin-bottom: 110px;}
#secContents .dangoInner .dangoImg{ width: 600px;}
#secContents .dangoInner .dangoTxt{ width: 540px; line-height: 2em;}

/*--- menu ---*/
#secContents .menuWrap{ width: 100%;}
#secContents .menuWrap .lead{ text-align: center; margin-bottom: 100px;}
#secContents .menuWrap .iceLead{ text-align: center; margin-bottom: 50px;}
#secContents .menuWrap h4{ font-size: 30px; border-bottom: #7a2b32 solid 1px; margin: 0 0 40px; padding-bottom: 30px; text-align: center; font-weight: 500;}
#secContents .menuWrap h4 span{ color: #7a2b32;}
#secContents .menuInner{ width: 1200px; display: flex; justify-content: space-between; align-items: top; margin: 0 auto 110px;}
#secContents .menuInner_rev{ flex-direction: row-reverse; margin-bottom: 110px;}
#secContents .menuInner:last-child{ margin: 0 auto 120px;}
#secContents .menuInner .menuImg{ width: 600px;}
#secContents .menuInner .menuTxt{ width: 540px; line-height: 2em;}
#secContents .menuInner .menuTxt h5{ color: #7a2b32; font-size: 24px; font-weight: normal; margin: 0 0 30px; position: relative; display: inline-block; padding: 0 34px;}
#secContents .menuInner .menuTxt h5:before,
#secContents .menuInner .menuTxt h5:after{ content: ''; position: absolute; top: 50%; display: inline-block; width: 20px; height: 1px; background: #7a2b32;}
#secContents .menuInner .menuTxt h5:before{ left: 0;}
#secContents .menuInner .menuTxt h5:after{ right: 0;}
#secContents .menuInner .menuTxt h5.dorayaki{ color: #1A1A1A; padding: 0;}
#secContents .menuInner .menuTxt h5.dorayaki:before,
#secContents .menuInner .menuTxt h5.dorayaki:after{ content: none;}
#secContents .menuInner .menuTxt p{}
#secContents .menuInner .ice{ margin-top: 40px;}
#secContents .menuInner .ice ul{ border-top: #666666 solid 1px;}
#secContents .menuInner .ice li{ border-bottom: #666666 solid 1px; padding: 26px 0;}
#secContents .menuInner .ice li h6{ font-size: 24px; margin: 0 0 15px; font-weight: normal;}
#secContents .menuInner .ice li p{ padding-left: 120px;}

/*--- shop ---*/
#secContents .menuWrap .shopLead{ text-align: center; margin-bottom: 65px;}
#secContents .menuWrap .close{ width: 1000px; margin: 0 auto 150px; text-align: center; border: #cba1a1 solid 8px; padding: 20px 0 40px;}
#secContents .menuWrap .close .cloTtl{ font-size: 24px; color: #7a2b32; margin: 0 0 20px; font-weight: 600;}
#secContents .menuWrap .close .cloTxt{ font-weight: 600;}
#secContents .menuInner .menuTxt .shopTxt{ line-height: 2.4em; margin-top: 50px;}
#secContents .menuInner.mb80{ margin: 0 auto 80px;}
#secContents .olArea{ margin-bottom: 160px;}
#secContents .olArea table{ width: 100%; border-collapse: collapse; text-align: left;}
#secContents .olArea th{ border-bottom: #CFCFCF solid 1px; padding: 20px 10px; width: 15%; font-weight: 600;}
#secContents .olArea td{ border-bottom: #CFCFCF solid 1px; padding: 20px 10px;}
#secContents .gmap{ margin: 0 auto 150px;}
#secContents .gmap iframe{ width: 1200px; height: 480px;}

/*--- contact ---*/
#secContents .contactWrap{ text-align: center; padding-bottom: 110px;}
#secContents .contactWrap .conTel{ font-size: 26px; margin-bottom: 30px; color: #3A050B;}
#secContents .contactWrap .conTel span{ font-size: 45px;}

#page-top{ margin: 0; padding: 0; display: none; position: fixed; right: 2%; bottom: 10px; z-index: 100;}
#page-top #move-page-top{ width: 50px; display: block; cursor: pointer;}
#page-top #move-page-top img{ width: 50px;}

.ml16{ margin-left: 16px;}
.mb25{ margin-bottom: 25px;}
.mb35{ margin-bottom: 35px;}
.fs12{ font-size: 12px;}
.fs14{ font-size: 14px;}

.pc{ display:inline !important;}
.sp{ display:none !important;}


@media screen and (max-width: 767px){
html {-webkit-text-size-adjust:none; margin:0 auto; padding:0;}
body{ min-width: 100%; margin:0 auto; font-family: "Noto Serif JP", serif; font-weight: 400; font-style: normal; font-display: swap;}
img{ width:100%; height:auto; vertical-align:bottom; -webkit-backface-visibility: hidden;}
a img:hover{ opacity:1; filter:alpha(opacity=100); transition: all 0;}
.clear{ clear:both; height:0;}
.center{ text-align:center;}
ul{ list-style:none; margin:0; padding:0;}
p{ margin:0;}
	
#container{ width: 100%; min-width: 100%; margin: 0 auto; color: #333; font-size: 14px;}

/*--- top pages ---*/
	/* kv */
.kv{ height: 100vh; display: flex; justify-content: center; align-items: center; margin-top: 0;}
.kv .main-copy{ color: #fff; font-size: 30px; font-weight: bold; text-align: center; line-height: 1;}

/* video */
.video{
  width: 100%;
  height: 100vh;
  /*background: url(../img/top/bg-main-sp.webp) no-repeat center/cover;*/
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(16, 57, 75, .8);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.video video{
  /*min-width: 100%;
  min-height: 100%;*/
  object-fit: cover;
  object-position: center bottom;
  min-width: auto;
  min-height: auto;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

#calender{ width: 100%; padding: 10% 5% 15%; background: #FAF4E6; box-sizing: border-box;}
#calender .calWrap{ width: auto; margin: 0 auto 15%;}
#calender .calWrap h2{ padding-left: 20px; color: #7A2B31; margin: 0 auto 40px; font-size: 22px; text-align: center; position: relative; font-weight: 700; background: url("../img/common/icon-calendar.svg") no-repeat; background-size: contain; line-height: 34px; width: 250px; box-sizing: border-box;}
#calender .calWrap h2::before{ background: none;}
/*#calender .calWrap h2::before {
  content: ""; 
  display: inline-block; 
  width: 36px; 
  height: 34px; 
  background: url("../img/common/icon-calendar.svg") no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 26%;
  transform: translateY(-50%);
}*/
#calender .calInner{ display: block; flex-wrap: wrap; justify-content: space-between; align-items: top;}
#calender .calInner .lCal{ width: auto; margin-bottom: 10%;}
#calender .calInner .rCal{ width: auto;}
#calender .calInner .yymmTtl{ font-size: 26px; text-align: center; margin: 0 0 15px;}
#calender .calInner table{ width: 100%; border-collapse: collapse; border: #808080 solid 1px; box-sizing: border-box; background: #FFF;}
#calender .calInner table th{ font-weight: normal; width: 80px; border: #808080 solid 1px; font-size: 14px; padding: 5px 0;}
#calender .calInner table th.sat{ color: #1a60bd;}
#calender .calInner table th.sun{ color: #FF1A1B;}
#calender .calInner table td{ vertical-align: top; text-align: left; border: #808080 solid 1px; padding: 3px 5px 10px; font-size: 15px;}
#calender .calInner table td span{ display: block; text-align: center; color: #1a1a1a;}
#calender .calInner table td.lred{ color: #FE898F;}
#calender .calInner table td.lblue{ color: #8DB0DE;}
#calender .calInner table td.lgray{ color: #B3B3B3;}
#calender .calInner table td.gray{ background: #E5E5E5;}
#calender .calInner table td.blue{ color: #1a60bd;}
#calender .calInner table td.red{ color: #FF1A1B;}

#calender .bHours{ width: auto; margin: 0 auto; background: #FFF; padding: 4%; box-sizing: border-box;}
#calender .hourWrap{ display: block; justify-content: space-between; align-items: top;}
#calender .hourWrap .lHours{ width: auto; border-bottom: #D8C3C2 dashed 1px; padding-bottom: 3%; margin-bottom: 3%; font-size: 14px;}
#calender .hourWrap .rHours{ width: auto; border-bottom: #D8C3C2 solid 1px; padding-bottom: 3%; font-size: 14px;}
#calender .hourWrap span{ width: 100px; line-height: 26px; padding-bottom: 1px; background: #7A2B31; color: #FFF; font-size: 14px; text-align: center; display: inline-block; margin-right: 5px;}
#calender .hourWrap p{ font-weight: bold; color: #3b060b; font-size: 14px; display: inline-block; margin: -1px 0 0 5px; vertical-align: text-top;}
#calender .bHours p.ex{ font-weight: bold; color: #3b060b; font-size: 14px; margin-top: 4%; text-align: center;}

#kodawari{ width: auto; background: url("../img/top/bg-01-sp.webp") no-repeat center top, #F2F1EC; background-size: contain; padding: 20% 0 15%;}
#kodawari .kodawariWrap{ width: auto; margin: 0 auto;}
#kodawari .leadWrap{ width: auto; margin: 0 auto 15%; display: block; justify-content: space-between; align-items: center; color: #FFF;}
#kodawari .leadWrap .llWrap{}
#kodawari .leadWrap .llWrap h2{ font-size: 30px; writing-mode: vertical-rl; margin: 0 auto 15%; font-weight: 500; width: 100px; line-height: 1.6em;}
#kodawari .leadWrap .rlWrap{ position: static; padding: 0 8%;}
#kodawari .leadWrap .rlWrap::before{ content: none; position: static;}
#kodawari .leadWrap .rlWrap h3{ font-size: 22px; margin: 0 0 5%; font-weight: 500;}
#kodawari .leadWrap .rlWrap p{ font-size: 15px; line-height: 1.9em;}

#kodawari .threeColumns{ display: block; justify-content: space-between; align-items: stretch; color: #FFF; padding: 0 5%;}
#kodawari .threeColumns .kImg{ width: auto;}
#kodawari .threeColumns .kImg img{}
#kodawari .threeColumns h4{ font-size: 24px; writing-mode: vertical-rl; text-orientation: upright; margin: 0 auto; font-weight: 500; line-height: 1.8em; border-left: 1px solid #BEA4A7; border-right: 1px solid #BEA4A7; padding: 0 30px; width: 200px; height: 240px; box-sizing: border-box;}
#kodawari .threeColumns p{ line-height: 2.2em; margin-top: 50px} 
#kodawari .lTc{ width: auto;}
#kodawari .cTc{ width: auto;}
#kodawari .rTc{ width: auto;}
#kodawari .lTcWrap{ padding: 20% 7%; background: url("../img/top/bg-kodawari01.webp") no-repeat left top, #893D49; background-size: contain; height: auto; box-sizing: border-box;}
#kodawari .cTcWrap{ padding: 20% 7%; background: url("../img/top/bg-kodawari02.webp") no-repeat left top, #7A2B31; background-size: contain; height: auto; box-sizing: border-box;}
#kodawari .rTcWrap{ padding: 20% 7%; background: url("../img/top/bg-kodawari03.webp") no-repeat left top, #893D49; background-size: contain; height: auto; box-sizing: border-box;}

#container .topBtn{ margin-top: 10%; text-align: center;}
#container .topBtn a{ width: 280px; height: 60px; display: block; color: #3b060b; text-decoration: none; background: url("../img/common/btn-arrow.svg") no-repeat 95% center; background-size: 20px; transition: none; padding: 17px 0 0 0; box-sizing: border-box; margin: 0 auto; border: #3b060b solid 1px;}
#container .topBtn a:hover{ text-decoration: none; background: url("../img/common/btn-arrow.svg") no-repeat 95% center; background-size: 20px; transition: none;  color: #3b060b;}

#menu{ width: auto; background: #F2F1EC;}
#menu .menuHead{ background: url("../img/top/bg-02-sp.webp") no-repeat center top; background-size: cover; height: auto; box-sizing: border-box; padding: 20% 0;}
#menu .menuHead h2{ width: 200px; font-size: 30px; line-height: 2em; writing-mode: vertical-rl; margin: 0 auto; font-weight: 500; color: #FFF;}
#menu .menuWrap{ width: auto; background-image: url("../img/common/bg-pattern1-l.webp"),url("../img/common/bg-pattern1-r.webp"); background-position: top left, bottom right; background-repeat: no-repeat, no-repeat; background-size: contain; padding: 10% 5% 15%;}
#menu .menuWrap .menuInner{ width: auto; margin: 0 auto;}
#menu .menuWrap .menuInner h3{ font-size: 24px; margin: 0 auto 5%; font-weight: 500; text-align: center; line-height: 1.8em;}
#menu .menuWrap .menuInner .menuImg{}

#lead{ width: auto; background: #F2F1EC;}
#lead .leadHead{ background: url("../img/top/bg-03-sp.webp") no-repeat center top; background-size: cover; height: auto; box-sizing: border-box; padding: 15% 0;}
#lead .leadHead h2{ width: 200px; font-size: 30px; line-height: 2em; writing-mode: vertical-rl; margin: 0 auto; font-weight: 500; color: #FFF;}
#lead .leadWrap{ width: auto; background: #F2F1EC; padding: 10% 5% 15%;}
#lead .leadWrap .leadInner{ width: auto; margin: 0 auto;}
#lead .leadWrap .leadInner h3{ font-size: 24px; margin: 0 auto 5%; font-weight: 500; text-align: center; line-height: 1.8em;}
#lead .leadWrap .leadInner p{ text-align: left; line-height: 2em;}

#shop{ width: auto;}
#shop .shopHead{ background: url("../img/top/bg-04-sp.webp") no-repeat center top; background-size: cover; height: auto; box-sizing: border-box; padding: 20% 0;}
#shop .shopHead h2{ width: 200px; font-size: 30px; line-height: 2em; writing-mode: vertical-rl; margin: 0 auto; font-weight: 500; color: #FFF;}
#shop .shopWrap{ width: auto; background: url("../img/common/bg-beige.webp") repeat; padding: 10% 0 0; position: relative;}
#shop .shopWrap .shopInner{ width: auto; margin: 0 auto; padding: 0 5%;}
#shop .shopWrap .shopInner h3{ font-size: 22px; margin: 0 auto 5%; font-weight: 500; text-align: center; line-height: 1.8em;}
#shop .shopWrap .shopInner p{ text-align: left; line-height: 2em; padding-bottom: 45%;}

#shop .shopInfo{ background: url("../img/common/bg-d-red.webp") repeat;}
#shop .infoInner{ width: auto; margin: 0 auto; display: block; justify-content: space-between; align-items: top; color: #FFF; padding: 0 5% 15%;}
#shop .infoInner .main{ width: auto; margin-bottom: 15%;}
#shop .infoInner .bypass{ width: auto;}
#shop .infoInner .shopImg{ width: 80%; margin: 0 auto 7%;}
#shop .infoInner .main .shopImg img{ width: 100%; margin-top: -35%;}
#shop .infoInner h4{ font-size: 22px; margin: 0 auto 5%; font-weight: 500;}
#shop .infoInner .add{ line-height: 1.8em; margin-bottom: 10px;}
#shop .infoInner .tel{ font-size: 20px; margin-bottom: 10px;}
#shop .infoInner .tel span{ font-size: 24px;}
#shop .infoInner .hours{ line-height: 2.2em; margin-bottom: 20px;}
#shop .infoInner .btnShop{ padding-bottom: 0;}
#shop .infoInner .btnShop a{ display: inline-block; margin-right: 10px;}
#shop .infoInner .btnShop a img{ width: 144px;}

footer{ width: 100%; padding-top: 0; text-align: center;}
footer .footLogo{ display: none;}
footer .footLink{ display: none;}
footer .copyRight{ background: #893D49; color: #FFF; padding: 15px 0; font-size: 12px;}

	
/* seccond contents */
#secContents{ width: 100%;}
#secImage{ width: 100%; height: 0; padding: 18% 0 30%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 0;}
#secImage.dango{ background: url("../img/dango/bg-main-sp.webp") no-repeat; background-size: cover;}
#secImage.products{ background: url("../img/menu/bg-main-sp.webp") no-repeat; background-size: cover;}
#secImage.shop{ background: url("../img/shop/bg-main-sp.webp") no-repeat; background-size: cover;}
#secImage.contact{ background: url("../img/contact/bg-main-sp.webp") no-repeat; background-size: cover;}
#secImage h2{ text-align: center; font-size: 22px; font-weight: normal; color: #FFF; margin: 0;}
#secContents h3{ font-size: 20px; text-align: center; font-weight: 500; position: relative;}
#secContents h3::after{ content: ""; display: block; width: 200px; height: 1px; background: #7a2b32; margin: 5% auto;}
#secContents .pankuzu{ width: 100%; padding: 2% 3%; margin-bottom: 10%; font-size: 12px;}
#secContents .pankuzu a{ color: #1A1A1A; text-decoration: none; position: relative; padding-right: 40px; margin-right: 15px;}
#secContents .pankuzu a:hover{ text-decoration: underline;}
#secContents .pankuzu a::after{ content: ""; display: block; height: 1px; background-color: #1A1A1A; width: 25px; position: absolute; right: 0; top: 50%;}
#secContents .secInner{ width: auto; margin: 0 5%; font-size: 14px;}
#secContents .secInner p{ line-height: 1.7em;}
#secContents .secInner p.mb20{ margin-top: 4%;}
#secContents .secInner p.mb30{ margin-bottom: 5%;}
#secContents .secInner p.mb60{ margin-bottom: 7%;}
	
/*--- dango ---*/
#secContents .dangoWrap{ width: 100%; background: url("../img/dango/bg-r.webp") no-repeat right 15px; background-size: 90%;}
#secContents .dangoWrap.bgL{ background: url("../img/dango/bg-l.webp") no-repeat left 18px; background-size: 90%;}
#secContents .dangoInner{ width: auto; display: block; justify-content: space-between; align-items: top; margin: 0 5% 15%;}
#secContents .dangoInner_rev{ flex-direction: row-reverse; margin-bottom: 15%;}
#secContents .dangoInner .dangoImg{ width: auto; margin-bottom: 5%;}
#secContents .dangoInner .dangoTxt{ width: auto; line-height: 2em;}
	
/*--- menu ---*/
#secContents .menuWrap{ width: 100%;}
#secContents .menuWrap .lead{ text-align: left; margin-bottom: 10%;}
#secContents .menuWrap .iceLead{ text-align: left; margin-bottom: 50px;}
#secContents .menuWrap h4{ font-size: 18px; border-bottom: #7a2b32 solid 1px; margin: 0 0 5%; padding-bottom: 5%; text-align: center; font-weight: 500;}
#secContents .menuWrap h4 span{ color: #7a2b32;}
#secContents .menuInner{ width: auto; display: block; justify-content: space-between; align-items: top; margin: 0 0 15%;}
#secContents .menuInner_rev{ flex-direction: row-reverse; margin-bottom: 15%;}
#secContents .menuInner:last-child{ margin: 0 auto 15%;}
#secContents .menuInner .menuImg{ width: auto; margin-bottom: 5%;}
#secContents .menuInner .menuTxt{ width: auto; line-height: 2em; text-align: center;}
#secContents .menuInner .menuTxt h5{ width: auto; color: #7a2b32; font-size: 17px; font-weight: normal; margin: 0 auto 5%; position: relative; display: inline-block; padding: 0 34px;}
#secContents .menuInner .menuTxt h5:before,
#secContents .menuInner .menuTxt h5:after{ content: ''; position: absolute; top: 50%; display: inline-block; width: 20px; height: 1px; background: #7a2b32;}
#secContents .menuInner .menuTxt h5:before{ left: 0;}
#secContents .menuInner .menuTxt h5:after{ right: 0;}
#secContents .menuInner .menuTxt h5.dorayaki{ color: #1A1A1A; padding: 0;}
#secContents .menuInner .menuTxt h5.dorayaki:before,
#secContents .menuInner .menuTxt h5.dorayaki:after{ content: none;}
#secContents .menuInner .menuTxt p{ text-align: left;}
#secContents .menuInner .ice{ margin-top: 8%;}
#secContents .menuInner .ice ul{ border-top: #666666 solid 1px;}
#secContents .menuInner .ice li{ border-bottom: #666666 solid 1px; padding: 5% 0;}
#secContents .menuInner .ice li h6{ font-size: 16px; margin: 0 0 2%; font-weight: normal; text-align: left;}
#secContents .menuInner .ice li p{ padding-left: 0;}

/*--- shop ---*/
#secContents .menuWrap .shopLead{ text-align: left; margin-bottom: 10%;}
#secContents .menuWrap .close{ width: auto; margin: 0 auto 15%; text-align: center; border: #cba1a1 solid 5px; padding: 5%;}
#secContents .menuWrap .close .cloTtl{ font-size: 17px; color: #7a2b32; margin: 0 0 5%; font-weight: 600;}
#secContents .menuWrap .close .cloTxt{ font-weight: 600; text-align: left;}
#secContents .menuInner .menuTxt .shopTxt{ line-height: 1.8em; margin-top: 8%;}
#secContents .menuInner.mb80{ margin: 0 auto 10%;}
#secContents .olArea{ margin-bottom: 15%;}
#secContents .olArea table{ width: 100%; border-collapse: collapse; text-align: left;}
#secContents .olArea th{ border-bottom: #CFCFCF solid 1px; padding: 15px 10px; width: 25%; vertical-align: top; font-weight: 600;}
#secContents .olArea td{ border-bottom: #CFCFCF solid 1px; padding: 15px 10px;}
#secContents .gmap{ margin: 0 auto 15%;}
#secContents .gmap iframe{ width: 100%; height: 100%; margin: 0 auto;}

/*--- contact ---*/
#secContents .contactWrap{ text-align: center; padding-bottom: 15%;}
#secContents .contactWrap .conTel{ font-size: 20px; margin-bottom: 5%; color: #3A050B;}
#secContents .contactWrap .conTel span{ font-size: 24px;}
	
#page-top { margin: 0; padding: 0; display: none; position: fixed; right: 10px; bottom: 10px; z-index: 50;}
#page-top #move-page-top{ width: 40px; display: block; cursor: pointer;}
#page-top #move-page-top img{ width: 40px;}

.ml16{ margin-left: 14px;}
.mb25{ margin-bottom: 5%;}
.mb35{ margin-bottom: 7%;}
.fs12{ font-size: 12px;}
.fs14{ font-size: 14px;}

.pc{ display:none !important;}
.sp{ display:inherit !important;}

}