/*!
	Theme Name: 
	Theme URI: 
	Author: 
	Author URI: 
	Description: 

	Version: 0.0.1
*/
/************************/
html {
   font-size: 62.5%;
}
body {
   color: #333;
   font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.7;
   font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/*
html.fixed {
    height: 100%;
    overflow: hidden;
}
*/
/* font  
-----------------------------------*/
h1 {
   line-height: 1;
}
h2 {
   font-family: ten-mincho-text, serif;
   font-weight: 400;
   font-style: normal;
   font-size: 3rem;
   text-align: center;
   margin: 2rem 0 4rem;
}
h3 {
   font-size: 5rem;
   text-align: center;
   font-family: 'Renner*';
   font-weight: 400;
   /* margin: 5rem auto 6rem; */
}
h3::before {
   content: '';
   background: #000;
   height: 50px;
   text-align: center;
   width: 1px;
   display: block;
   margin: auto;
   position: relative;
   top: -1vw;
}
h3 span {
   font-size: 1.4rem;
   display: block;
}
h4 {
   font-size: 2rem;
   margin: 1rem 0;
}
h4 span {
   font-size: 11px;
   display: block;
   font-weight: normal;
   letter-spacing: 2px;
}
.shinryu {
   font-family: shinryu, sans-serif;
   font-weight: 400;
   font-style: normal;
}
.tenmin {
   font-family: ten-mincho-text, serif;
   font-weight: 400;
   font-style: normal;
}
.text-center {
   text-align: center;
}
.text-right {
   text-align: right;
}
.text-left {
   text-align: left;
}
.text-i {
   font-style: italic;
}
.small {
   font-size: 11px;
}
/* link  
-----------------------------------*/
a, a img, button {
   text-decoration: none;
   -webkit-transition: ease 0.7s;
   -moz-transition: ease 0.7s;
   -o-transition: ease 0.7s;
   -ms-transition: ease 0.7s;
   transition: ease 0.7s;
   color: #303030;
   -webkit-backface-visibility: hidden; /* 追加 */
   backface-visibility: hidden; /* 追加 */
}
.row {
   padding-right: 15px;
   padding-left: 15px;
}
/* container width
-----------------------------------*/
.container {
   margin: auto;
   max-width: 1100px;
   padding: 0px 50px;
   box-sizing: border-box;
}
.container760 {
   max-width: 760px;
   margin: auto;
}
/* w750
-----------------------------------*/
.w750 {
   max-width: 830px;
   margin: auto;
   padding: 0px 40px;
}
.row {
   padding-right: 15px;
   padding-left: 15px;
}
/* flex 
-----------------------------------*/
.d-flex {
   display: flex;
   flex-direction: row;
   width: 100%;
}
.d-content-column {
   flex-direction: column !important;
}
.d-align-items-baseline {
   align-items: baseline;
}
.d-align-items-center {
   align-items: center;
}
.d-justify-space-between {
   justify-content: space-between;
}
.d-justify-space-around {
   justify-content: space-around;
}
.d-align-items-bottom {
   align-items: baseline;
}
.column-reverse {
   flex-direction: column-reverse;
}
.row-reverse {
   flex-direction: row-reverse;
}
.align-items-stretch {
   align-items: stretch;
}
.flex-wrap-wrap {
   flex-wrap: wrap;
}
.ml-auto {
   margin-left: auto;
}
.mr-auto {
   margin-right: auto;
}
/* parts
-----------------------------------*/
/*line*/
.line {
   position: absolute;
   bottom: -38px;
   width: 15px;
   height: 110px;
   right: 0;
   left: 0;
   margin: 0 auto;
   display: inline-block;
   overflow: hidden;
}
.line:before {
   content: "";
   position: absolute;
   width: 1px;
   height: 118px;
   background: #111;
   top: 0;
   right: 0;
   left: 0;
   margin: 0 auto;
}
.line:after {
   content: "";
   position: absolute;
   width: 8px;
   border-radius: 50%;
   height: 8px;
   background: #000000;
   margin: 0 auto;
   top: 0;
   left: 7.5px;
   animation: arrow 2.5s ease 0s infinite normal;
}
@keyframes arrow {
   0% {
      transform: translate(-50%, 0)
   }
   100% {
      transform: translate(-50%, 125px)
   }
}
/* img responsiv 
-----------------------------------*/
main div > img, img.img_responsive {
   max-width: 100%;
   width: 100%;
   display: inherit;
}
img.noresponsive310 {
   width: 100%;
   max-width: 100%;
   display: block;
}
/* btn
-----------------------------------*/
/* content base64 tmp
-----------------------------------
::before {
    content: url("data:image/svg+xml;base64,");
}
*/
/* footer 
-----------------------------------*/
footer {
   background: #db0f28;
   text-align: center;
   color: #fff;
   padding: 2rem;
   font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
   font-weight: normal;
   line-height: 1;
}
.footcopytext {
   text-align: center;
   padding: 50px 0;
   font-size: clamp(11px, 1.3vw, 16px);
}
/* pagetop 
-----------------------------------*/
.pagetop {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1;
}
.pagetop a::before {
   content: '';
   width: 20px;
   height: 20px;
   border: 0px;
   border-top: solid 2px #000;
   border-right: solid 2px #000;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(-45deg);
   position: absolute;
   left: 0;
   right: 0;
   margin: auto;
   top: 10px;
   bottom: 0px;
   opacity: 1;
}
.pagetop a {
   display: block;
   border-radius: 50px;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   zoom: 1;
   width: 60px;
   height: 60px;
   text-align: center;
   /* font-size: 24px; */
   text-decoration: none;
   line-height: 50px;
   /* border: 1px solid #fbfbfb; */
   -webkit-transition: all 0.7s;
   -moz-transition: all 0.7s;
   -ms-transition: all 0.7s;
   -o-transition: all 0.7s;
   transition: all 0.7s;
   opacity: 0.8;
   color: #1d1d1c;
   background: #fff;
}
.pagetop a span {
   top: 22px;
   position: relative;
   font-size: 0.1rem;
}
.pagetop a:hover {
   opacity: 0.6;
}
/* google map responsive
-----------------------------------*/
/*
.googlemaps iframe, .googlemaps object, .googlemaps embed {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.googlemaps iframe:hover, .googlemaps object:hover, .googlemaps embed:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}
*/
.gmapres {
   position: relative;
   padding-bottom: 20.842%;
   padding-top: 30px;
   height: 400px;
   overflow: hidden;
   min-width: 100%;
   margin-right: 0;
   margin-bottom: 2rem;
}
.gmapres iframe, .gmapres object, .gmapres embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
/* wp Alignments
-----------------------------------*/
.alignleft {
   display: inline;
   float: left;
   margin-right: 1.5em;
}
.alignright {
   display: inline;
   float: right;
   margin-left: 1.5em;
}
.aligncenter {
   clear: both;
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.sp_visible {
   display: none;
}
.sp_hidden {
   display: inherit;
}

.emhiden{
	display:inline;
}
/* kv
/* lead text
-----------------------------------*/
.kv {
   background: url("/wp-content/themes/twentytwenty/common/img/1.5x/kv@1.5x.png")no-repeat center center;
   background-size: cover;
   height: 100vh;
   width: 100vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
}
.kvlogo {
   padding: 10px 0px;
   position: relative;
   margin-left: auto;
   width: auto;
}
.kvlogo .chatch {
   font-weight: bold;
   font-size: clamp(16px, 1.7vw, 25px);
   z-index: 1;
   position: relative;
}
.kvlogo img {
   width: clamp(100px, 10vw, 100px);
   transform: rotate(-15deg);
   position: absolute;
   top: -45px;
   left: -20px;
   z-index: 0;
}
.copy {
   position: absolute;
   width: 100%;
   padding: 20px;
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap;
   justify-content: flex-end;
   bottom: 0;
}
.kvinfo {
   padding: 10px;
   margin: 0rem;
   font-size: 1.1rem;
}
.copytext {
   writing-mode: vertical-rl;
   height: 490px;
   font-size: 3rem;
   color: #fff;
   font-family: shinryu, sans-serif;
   font-weight: 400;
   font-style: normal;
   margin: auto;
}
.newblock {
   background: #fff;
   width: 39%;
}
.newblock dl {
   display: flex;
   height: 100%;
}
.newblock dl dt {
   width: 100px;
   background: #e50000;
   padding: 10px;
   color: #fff;
   text-align: center;
   display: flex;
   align-items: stretch;
   height: auto;
}
.newblock dl dd {
   padding: 10px;
   width: 100%;
}
.newblock dl dd li {
   font-size: clamp(1.25rem, 1.3vw, 1.6rem);
}
section {
   padding: 5rem 0;
}
section p {
   text-align: justify;
}
section img {
   width: 100%;
   max-width: 100%;
   height: auto;
}
/* shopaddr
-----------------------------------*/
#shopaddr {
   text-align: center;
   padding: 4rem 0 7rem;
   font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
#shopaddr dt {
   margin-bottom: 2rem;
}
#shopaddr dd {
   line-height: 2;
}
/* adinner
-----------------------------------*/
#adinner {
   background: #f4efea;
   padding: 0;
   display: block;
}
#adinner ul li {
   width: 30%;
   margin: auto auto 50px;
   text-align: center;
   line-height: 1;
}
#adinner ul li img {
   width: 50%;
}
/* chanpon
-----------------------------------*/
#chanpon {
   background: url("/wp-content/themes/twentytwenty/common/img/1.5x/who_bg@1.5x.png")no-repeat center bottom;
   background-size: cover;
   padding-top: 1rem;
}
.chanpon1 {
   display: none;
}
.chanpon1 .d-flex {
   height: 280px;
   flex-direction: row-reverse;
   justify-content: flex-start;
}
.chanpon1 p:first-child {
   text-indent: 0;
   width: 28%;
}
.chanpon1 p {
   writing-mode: vertical-rl;
   line-height: 2.2;
   text-align: justify;
   padding: 0;
   margin: 0;
   text-indent: 1rem;
}
#chanpon h3 {
   line-height: 1.8;
   color: #e50000;
   font-size: 3rem;
   letter-spacing: 2px;
   padding: 0rem 0 1rem;
   position: relative;
}
#chanpon h3 + p {
   text-align: center;
   padding-bottom: 2rem;
}
#chanpon h3 rt {
   font-size: 1rem;
   text-align: center;
}
.chanpon2 {
   padding: 0 0 4rem;
   position: relative;
}
.chanpon2 .skilbox {
   margin: auto;
   justify-content: center;
}
.chanpon2 .skilbox dl {
   position: relative;
   background: #e50000;
   color: #fff;
   border-radius: 100%;
   width: 200px;
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
   margin: 40px 40px 0;
}
.chanpon2 h2 {
   position: relative;
}
.chanpon2 h2::after {
   content: '';
   display: block;
   width: 20px;
   height: 20px;
   border-top: solid 1px #000;
   border-right: solid 1px #000;
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
   margin: auto;
   top: 2vw;
   position: relative;
}
.chanpon2 .skilbox dl::after {
   content: '+';
   display: block;
   color: #000;
   position: absolute;
   right: 120%;
   font-size: 5rem;
   left: 110%;
   margin: auto;
}
.chanpon2 .skilbox dl:last-child:after {
   content: none;
}
#codawari {
   background: url("/wp-content/themes/twentytwenty/common/img/1x/kodawari_bg.png") center center;
}
.skilbox dt {
   color: #000;
   font-size: 4rem;
   position: absolute;
   top: -20px;
}
.skilbox dd {
   font-weight: bold;
}
.skilbox .subtext {
   position: absolute;
   bottom: -80px;
   color: #fff;
   left: calc(100% - 18px);
   /* width: 80px; */
}
.chbox {
   margin: 0;
   padding: 0;
   border-radius: 50px;
}
.chbox img {
   width: 100%;
   display: block;
   margin: auto;
}
.tako {
   position: absolute;
   top: 0;
   left: 0;
   width: clamp(80px, 16vw, 210px);
   height: auto;
}
.balloon-top {
   position: relative;
   display: inline-block;
   margin: 1.5em 0;
   width: 111px;
   height: 90px;
   line-height: 90px;
   text-align: center;
   color: #FFF;
   font-size: 20px;
   font-weight: bold;
   background: #f0c700fa;
   border-radius: 50%;
   box-sizing: border-box;
   font-family: shinryu, sans-serif;
}
.balloon-top:before {
   content: "";
   position: absolute;
   top: -25px;
   left: 50%;
   margin-left: -15px;
   border: 15px solid transparent;
   border-bottom: 15px solid #efc710;
   z-index: 0;
}
/* hanashi
-----------------------------------*/
#hanashi {
   background: #fffef8;
}
#hanashi .d-flex div:first-child {
   width: 420px;
}
#hanashi .d-flex div:last-child {
   width: 50%;
   margin: 0 0 0 20px;
}
#hanashi p {
   margin-bottom: 1em;
   text-align: justify;
}
#hanashi .d-flex {
   justify-content: space-between;
}
#hanashi h2 {
   text-align: left;
   margin-bottom: 3rem;
   font-size: clamp(2rem, 2vw, 3rem);
}
#hanashi h3 {
   font-size: clamp(1.8rem, 2vw, 2rem);
   font-weight: bold;
   line-height: 1.4;
   text-align: left;
   margin-bottom: 20px;
}
#hanashi h3::before {
   content: none;
}
#hanashi ul li p {
   font-weight: bold;
}
/* shop info
-----------------------------------*/
#shopinfo {
   font-family: ten-mincho-text, serif;
   font-weight: 400;
   font-style: normal;
   overflow: hidden;
}
#shopinfo .shopimg {
   width: 7%;
   margin: auto;
}
.shopflex {
   display: flex;
   justify-content: space-between;
   padding: 4vw;
}
.shopflex div {
   position: relative;
}
.shopflex div:first-child, .shopflex div:last-child {
   width: 400px;
}
.shopflex div:last-child {
   margin-top: 4vw;
}
.shopflex div:first-child::after {
   content: '';
   background: #db0f28;
   width: 40vw;
   height: 300px;
   position: absolute;
   left: calc(((100vw - 100%) / 2) * -1);
   bottom: 40%;
   z-index: -1;
}
.shopflex div:last-child::after {
   content: '';
   background: #db0f28;
   width: 40vw;
   height: 300px;
   position: absolute;
   right: calc(((100vw - 100%) / 2) * -1);
   bottom: 10%;
   z-index: -1;
}
.shopflex p {
   writing-mode: vertical-rl;
   padding: 1rem;
}
.shopbg {
   position: relative;
}
.shopbg li {
   position: absolute;
   width: 30%;
   z-index: -1;
}
.shopbg li:first-child {
   left: 0;
}
.shopbg li:last-child {
   right: 0;
}
/* codawari
-----------------------------------*/
#codawari .codawaribox:nth-child(3) {
   padding: 8rem 0;
    margin-bottom: 5rem;
}
.codawaribox {
   padding: 3rem 0;
}
.codawaribox dl {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   width: auto;
   padding: 0;
   z-index: 1;
   grid-area: a;
}
.codawaribox dl + div {
   grid-area: b;
}
.codawaribox dt {
   text-align: center;
   display: block;
}
.codawaribox dt span {
   width: 65px;
   display: block;
   line-height: 1;
   margin: -15px auto 0px;
}
.codawaribox .codawariart1, .codawaribox .codawariart2, .codawaribox .codawariart3, .codawaribox .codawariart4 {
   margin: -20px auto 0;
}
.codawaribox .codawariart1 dt span + span {
   width: 40px;
}
.codawaribox .codawariart2 dt span + span {
   width: 100px;
}
.codawaribox .codawariart3 dt span + span {
   width: 40px;
}
.codawaribox .codawariart4 dt span + span {
   width: 60px;
}
.codawaribox dd h4 {
   font-family: ten-mincho-text, serif;
   font-weight: 400;
   font-style: normal;
   font-size: 3rem;
   background-image: -webkit-linear-gradient(left, #000, #000 2px, transparent 2px, transparent 8px);
   background-image: -o-linear-gradient(left, #000, #000 2px, transparent 2px, transparent 8px);
   background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px); /* 幅2の線を作る */
   background-size: 8px 2px; /* グラデーションの幅・高さを指定 */
   background-position: left bottom; /* 背景の開始位置を指定 */
   background-repeat: repeat-x; /* 横向きにのみ繰り返す */
   text-align: center;
   padding-bottom: 1rem;
   margin-bottom: 2rem;
}
.codawaribox dd h5 {
   font-family: ten-mincho-text, serif;
   font-weight: 400;
   font-style: normal;
   font-size: 2rem;
   margin-bottom: 1rem;
}
.codawaribox dd ruby {}
.codawaribox dd rt {
   text-align: center;
}
.codawaribox dd p {
   color: #333;
   line-height: 1.8;
   text-align: justify;
}
.codawariinner {
   width: auto;
   text-align: center;
}
.codawariinner p {
   text-align: center;
   font-size: clamp(11px, 1.3vw, 13px);
   line-height: 1.5;
}
.codawariinner::after {}
.codawariinner img {
   width: 70%;
   position: relative;
   z-index: 1;
}
.codawariinner .line1 {
   position: absolute;
   bottom: -20vw;
   right: 60%;
   width: 60vw;
   z-index: 0;
   display: none;
}
.codawariinner .line2 {
   position: absolute;
   bottom: -17vw;
   right: 62%;
   width: 40vw;
   z-index: 0;
   display: none;
}
.codawariart1 .codawariinner::before {
   display: none;
   content: '';
   border-radius: 100%;
   width: 370px;
   height: 370px;
   /*    display: block;*/
   border: 3px solid #DDD6C8;
   background: transparent;
   position: absolute;
   top: -32px;
   left: 22%;
   z-index: 0;
}
.codawaribox > .d-flex {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 10px;
   grid-template-areas: "a b"
}
.codawaribox > .d-flex.rev {
   grid-template-areas: "b a";
}
.codawariart1.d-flex dl {
   width: auto;
   padding-right: 0;
}
.codawariart2 .codawariinner::before {
   content: none;
   border-radius: 100%;
   width: 380px;
   height: 380px;
   /*  display: block;*/
   display: none;
   border: 3px solid #DDD6C8;
   background: transparent;
   position: absolute;
   bottom: 0;
   left: 5px;
   z-index: 0;
   top: 14px;
}
.codawariinner2in {
   position: relative;
}
.codawariinner2in img {
   width: 15%;
   position: absolute;
   right: 50%;
   bottom: -110px;
}
.codawariart3 {
   margin-top: 100px;
}
.codawariart3 .codawariinner {
   text-align: center;
}
.codawariart3 .codawariinner p {
   text-align: center;
}
.codawariart4 {
   margin-top: -90px !important;
}
.codawariart4 dl {}
.flev {
   flex-direction: row-reverse;
}
.flev .codawariinner {
   text-align: center;
   margin-top: 50px;
}
.codawarimain {
   border: 12px solid #ddd6ca;
   padding: 40px;
   border-radius: 10px;
   background: #fff;
   text-align: justify;
}
/*menu*/
#menu {}
#menu dl {
   margin-bottom: 1em;
}
#menu dl dd {
   display: flex;
   position: relative;
}
#menu dl dd::before {
   content: '';
   border-bottom: dotted 1px #000;
   position: absolute;
   width: 100%;
   top: 0.78em;
   z-index: -1;
}
#menu dl dd span:first-child {
   margin-right: auto;
   background: #fff;
   display: block;
   padding-right: 10px;
}
#menu dl dd span:last-child {
   padding-left: 10px;
   background: #fff;
   display: block;
   font-weight: bold;
   color: #e50000;
}
#menu .menugrid {
   margin: 0 10%;
}
#menu .menugridinner {
   display: flex;
   flex-wrap: wrap;
}
#menu .menugrid p {
   text-align: right;
   margin-left: auto;
   font-feature-settings: "palt";
   letter-spacing: 0.02em;
}
#menu .menugrid dl {
   width: 48%;
}
#menu .menugrid dl:nth-child(even) {
   margin-left: auto;
}
#menu .menugrid dt {
   border-bottom: 1px solid #333;
}
@media (max-width: 960px) {
   .newblock {
      background: #fff;
      width: 100%;
   }
   .kvlogo {
      width: 100%;
   }
   /* skil 
-----------------------------------*/
   .chanpon2 .skilbox dl {
      position: relative;
      background: #e50000;
      color: #fff;
      border-radius: 100%;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      margin: 40px 10px 0;
   }
   /* lead 
-----------------------------------*/
   .chanpon1 .d-flex {
      height: 330px;
      flex-direction: row-reverse;
      justify-content: flex-start;
   }
   /* kodawari 
-----------------------------------*/
   .codawarimain {
      border: 12px solid #ddd6ca;
      padding: 20px;
      border-radius: 10px;
      background: #fff;
      text-align: justify;
   }
   .codawariart1 .codawariinner::before {
      content: none;
      border-radius: 100%;
      width: 30vw;
      height: 30vw;
      display: block;
      border: 3px solid #DDD6C8;
      background: transparent;
      position: absolute;
      bottom: 4vw;
      left: 15%;
      z-index: 0;
   }
   .codawariinner img {
      width: 90%;
      position: relative;
      z-index: 1;
      margin-top: 20px;
   }
   .codawariinner .line2 {
      position: absolute;
      bottom: -19vw;
      right: 60%;
      width: 40vw;
      z-index: 0;
   }
   .codawariinner2in img {
      width: 20%;
      position: absolute;
      right: 58%;
      bottom: 4vw;
   }
   .codawariart2 .codawariinner::before {
      content: none;
      border-radius: 100%;
      width: 36vw;
      height: 36vw;
      display: block;
      border: 3px solid #DDD6C8;
      background: transparent;
      position: absolute;
      bottom: 0;
      left: 6px;
      z-index: 0;
      top: 12px;
   }
}
/* medhia query 
-----------------------------------*/
@media (max-width: 768px) {
   .kvinfo {
      display: none;
   }
   .newblock dl dt {
      width: 130px;
      background: #e50000;
      padding: 10px;
      color: #fff;
      text-align: center;
   }
   #chanpon {
      padding-top: 3rem;
   }
   /*sp visible hidden*/
   .sp_visible {
      display: inherit;
   }
   .sp_hidden {
      display: none;
   }
   .kv {
      height: 570px;
      width: 100%;
   }
   #bussiness img {
      max-width: 100%;
      height: auto;
      width: 100%;
   }
   .lead {
      font-size: 3rem;
      color: #15499e;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 17px;
      margin-bottom: 20px;
   }
   /* container  
-----------------------------------*/
   .container {
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;
   }
   .row {
      padding-right: 15px;
      padding-left: 15px;
   }
   .w750 {
      max-width: 830px;
      margin: auto;
      padding: 0px 15px;
   }
   /* flex 
-----------------------------------*/
   .d-flex {
      display: flex;
      flex-direction: column;
   }
   /* skil 
-----------------------------------*/
   .chanpon2 .skilbox {
      margin: auto;
      justify-content: center;
      flex-direction: row;
   }
   .chanpon2 .skilbox dl {
      position: relative;
      background: #e50000;
      color: #fff;
      border-radius: 100%;
      width: 30vw;
      height: 30vw;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      margin: 40px 5px 0;
      font-size: 2.4vw;
   }
   .skilbox .subtext {
      position: absolute;
      bottom: -80px;
      color: #fff;
      left: calc(100% - 49px);
      /* width: 80px; */
   }
   /* kodawari 
-----------------------------------*/
    .codawariinner2in img {
      display: none;
   }
   .codawaribox > .d-flex {
      display: grid;
      grid-template-columns: 1fr;
      column-gap: 10px;
      grid-template-areas: "a""b";
   }
   .codawaribox > .d-flex.rev {
      grid-template-areas: "a""b";
   }
    #codawari .codawaribox:nth-child(3),
   .codawaribox {
      padding: 5rem 0;
       margin-bottom: 0;
   }
    .codawariinner img{
        padding: 0 70px;
    }
    
   .codawaribox dl {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      width: auto;
      padding: 0;
      margin: auto;
   }
   .codawariart3.d-flex, .codawariart1.d-flex {
      flex-direction: row;
   }
   .codawariart4.d-flex.flev, .codawariart2.d-flex.flev {
      flex-direction: row-reverse;
   }
   .codawariinner {
      position: relative;
   }
   .codawariart3 .codawariinner {
      display: flex;
      justify-content: space-between;
      width: 100%;
   }
   .codawariart3 .codawariinner > div {
      width: 80%;
      margin: auto;
   }
   .codawariart3.d-flex, .codawariart1.d-flex {
      flex-direction: row;
   }
   .codawariart4.d-flex.flev, .codawariart2.d-flex.flev {
      flex-direction: row-reverse;
   }
   .codawariart1.d-flex dl {
      width: 100%;
      padding: 0 30px;
   }
   /* hanashi 
-----------------------------------*/
   #hanashi .d-flex div:first-child {
      width: 100%;
   }
   #hanashi .d-flex div:last-child {
      width: 100%;
      margin: 0;
   }
   /* footer 
-----------------------------------*/
   #adinner {
      background: #f4efea;
      padding: 2rem 0;
      display: block;
   }
   #adinner ul li {
      width: 30%;
      margin: 1rem auto;
      text-align: center;
      line-height: 1;
   }
   /* hanashi 
-----------------------------------*/
   #hanashi ul {
      display: flex;
   }
   /* menu 
-----------------------------------*/
   #menu .menugrid {
      margin: 0 15px;
   }
   #menu .menugridinner {
      flex-direction: column;
   }
   #menu .menugrid dl {
      width: 100%;
   }
   #menu .menugrid dl:nth-child(even) {
      margin-left: 0;
   }
   .spinfotext {
      font-size: clamp(1rem, 1.2vw, 1.3rem);
      padding-top: 1rem;
      padding-bottom: 0;
      line-height: 1.3;
      color: #fff;
   }
}
@media (max-width: 480px) {
   section {
      padding: 3rem 0;
   }
   /* kv 
-----------------------------------*/
   .kvlogo img {
      width: 64px;
      transform: rotate(-15deg);
      position: absolute;
      top: -15px;
      left: 5px;
   }
   .copytext {
      writing-mode: vertical-rl;
      height: 400px;
      font-size: 2rem;
      color: #fff;
      font-family: shinryu, sans-serif;
      font-weight: 400;
      font-style: normal;
      margin: auto;
   }
   .kvlogo .chatch {
      font-weight: bold;
      /*font-family: 'shinryu';*/
      color: #fff;
   }
   .copy {
      width: 100%;
      margin: auto;
      height: 100%;
      display: flex;
      flex-direction: column;
   }
   .chanpon2 .skilbox dl {
      position: relative;
      background: #e50000;
      color: #fff;
      border-radius: 100%;
      width: 28vw;
      height: 28vw;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      margin: 40px 5px 0;
      font-size: 2.4vw;
   }
   .chanpon1 p {
      writing-mode: lr;
      line-height: 1.7;
      text-align: justify;
      padding: 0;
      margin: 0;
      text-indent: 1rem;
   }
   .chanpon1 p:first-child {
      display: none;
   }
   .chanpon1 .d-flex {
      height: auto;
      flex-direction: column;
      justify-content: flex-start;
   }
   .newblock {
      position: relative;
      bottom: 0;
      left: 0;
      background: #fff;
      width: 100%;
   }
   .newblock dl dt {
      width: 50px;
      background: #e50000;
      padding: 10px;
      color: #fff;
      writing-mode: vertical-lr;
   }
   .newblock dl dd {
      padding: 10px;
      width: 100%;
      background: #fff;
   }
   /* kodawari 
-----------------------------------*/
   .chbox img {
      width: 100%;
   }
   .tako {
      top: -35px;
      left: 10px;
   }
   .codawaribox dl {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 0 30px;
   }
   .codawariinner {
      width: 80%;
      text-align: right;
      margin: auto;
   }
   .codawariart1 .codawariinner::before {
      content: none;
      border-radius: 100%;
      width: 35vw;
      height: 35vw;
      display: block;
      border: 2px solid #DDD6C8;
      background: transparent;
      position: absolute;
      bottom: -10px;
      left: 21%;
      z-index: 0;
   }
    .codawaribox dd h4{
        margin-top: -15px;
    }
   .codawaribox dd p {
      margin-bottom: 10px;
   }
   .codawariart2 .codawariinner {
      margin: auto;
   }
   .codawariinner img {
      width: 100%;
       padding: 0;
   }
   .codawariinner .line2 {
      width: 70vw;
   }
   
   .codawariart2 .codawariinner::before {
      content: none;
      border-radius: 100%;
      width: 35vw;
      height: 35vw;
      display: block;
      border: 1px solid #DDD6C8;
      background: transparent;
      position: absolute;
      bottom: 0;
      left: 2px;
      z-index: 0;
      top: 5px;
   }
   .codawaribox .codawariart4 {
      margin-top: -20px !important;
   }
   .codawariart4 .codawariinner {
      width: 80%;
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
   }
   .codawariart4 .codawariinner img {
      width: 100%;
   }
   .codawariart3.d-flex, .codawariart1.d-flex {
      flex-direction: column;
   }
   .codawariart4.d-flex.flev, .codawariart2.d-flex.flev {
      flex-direction: column;
   }
   .flev .codawariinner {
      top: 0;
   }
   .skilbox .subtext {
      position: absolute;
      bottom: -80px;
      color: #fff;
      left: calc(100% - 46px);
      /* width: 80px; */
   }
   .balloon-top {
      position: relative;
      display: inline-block;
      margin: 1.5em 0;
      width: 100px;
      height: 60px;
      line-height: 59px;
      text-align: center;
      color: #FFF;
      font-size: 20px;
      font-weight: bold;
      background: #f0c700fa;
      border-radius: 50%;
      box-sizing: border-box;
      font-family: shinryu, sans-serif;
   }
   #chanpon h3 + p {
      text-align: center;
      font-size: 1.3rem;
      padding: 0 2rem 1rem;
   }
   #chanpon h3 {
      line-height: 1.4;
      color: #e50000;
      font-size: 2.3rem;
      letter-spacing: 2px;
      padding: 0rem 0 1rem;
      position: relative;
   }
   /* skil 
-----------------------------------*/
   .skilbox dt {
      color: #000;
      font-size: 5vw;
      position: absolute;
      top: -40px;
   }
   /* hanashi 
-----------------------------------*/
   #hanashi .d-flex div:first-child {
      width: 100%;
   }
   #hanashi .d-flex div:last-child {
      width: 100%;
   }
   /* shopinfo 
-----------------------------------*/
   .gmapres {
      position: relative;
      padding-bottom: 50%;
      padding-top: 85px;
      height: auto;
      overflow: hidden;
      min-width: 100%;
      margin-right: 0;
      margin-bottom: 2rem;
   }
   #shopinfo {
      font-size: 1.3rem;
   }
   #shopinfo h2 {
      margin: 30px auto 20px;
      font-size: clamp(2.5rem, 3vw, 3rem);
   }
   .shopflex {
      display: flex;
      justify-content: space-between;
      padding: 10vw 0 9vw;
   }
   .shopflex p {
      padding: 0.7rem;
   }
   .shopflex div:first-child::after {
      content: '';
      background: #db0f28;
      width: 40vw;
      height: 200px;
      position: absolute;
      left: calc(((100vw - 100%) / 2) * -1);
      bottom: 16%;
      z-index: -1;
   }
   .shopflex div:last-child::after {
      content: '';
      background: #db0f28;
      width: 40vw;
      height: 200px;
      position: absolute;
      right: calc(((100vw - 100%) / 2) * -1);
      bottom: 30%;
      z-index: -1;
   }
   /* footer 
-----------------------------------*/
   #adinner ul li img {
      width: 100%;
   }
}