main {position:relative;}
#shiraga_bokashi {padding:0 0 3em;font-size: 110%;font-feature-settings: "palt";letter-spacing:1px; position:relative; z-index:1;
background:transparent url("../../img/shiraga_bokashi/01.jpg") no-repeat right top;
background-size:50%;
}
#shiraga_bokashi strong,#shiraga_bokashi b {font-weight:bold; background: linear-gradient(transparent 60%, rgba(240, 255, 0, .7) 40%);}
#shiraga_bokashi .flex {display:flex; flex-wrap:wrap; justify-content:space-between;}
#shiraga_bokashi tr:first-child{font-size:clamp(1px,75%,16px);font-weight:bold;text-align:center;}
#shiraga_bokashi th{text-align: left; width:25%;}
#shiraga_bokashi td{text-align: center; width:15%;}
#shiraga_bokashi span.red {color:#C00;}

.table-wrapper {
    overflow-x: scroll;
    margin: 0 auto;
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-right: 10vw;
}
.table-wrapper table {
white-space: nowrap;
width: 100%;
}

.speechBubble {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  padding: 24px 24px;
  border: 2px solid #000000;
  border-radius: 9999px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  margin-bottom:1em;
}

.speechBubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #000000;
  translate: -50% -100%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 7.8px 15.5px 7.8px;
  border-color: transparent transparent #ffffff;
  translate: -50% -100%;
}

main h1#content_h1 {font-size:clamp(2rem,5vw,3rem); font-weight:900; font-family:'Noto Serif JP', serif;
text-shadow: 1px 3px #FFF, 1px -3px #FFF, -1px 3px #FFF, -1px -3px #FFF, 2px 2px #FFF, 2px -2px #FFF, -2px 2px #FFF, -2px -2px #FFF, 3px 1px #FFF, 3px -1px #FFF, -3px 1px #FFF, -3px -1px #FFF;
}
main h2 {font-size:2vw; font-weight:900;}
main h3 {font-weight:900; padding: 0;}
main h3:before,main h3:after {display:none;}
main h4 {
    display: inline-block;
    position: relative;
    padding: 0 0.5em;
    background: #ede7e1;
    margin-top: 2em;
    margin-bottom: .8em;
 }
main h4::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 20px rgb(140, 131, 122);
}
main h4 span{font-size:70%;}
section {padding:6vw 0;}

#introduction p,#introduction ul {font-size: 100%;
    text-shadow: 1px 3px #FFF, 1px -3px #FFF, -1px 3px #FFF, -1px -3px #FFF, 2px 2px #FFF, 2px -2px #FFF, -2px 2px #FFF, -2px -2px #FFF, 3px 1px #FFF, 3px -1px #FFF, -3px 1px #FFF, -3px -1px #FFF;
}
#introduction ul {margin-left:6vw;font-size: 115%; font-weight:bold;}
rt{font-weight:100;margin-top:0;margin-bottom:0;position:static;top:auto;bottom:auto;translate:none;}

#problems {border:5px double #111; padding:0 2em 1.5em;}
#problems h2 {position:relative; top:-.75em; background:#FFF; display:inline-block; padding:0 .25em;}
#problems .flex-item:nth-of-type(1) {flex-basis:50%;}
#problems .flex-item.arrow{position:relative;flex-basis:0%;display:grid;place-content:center;}
#problems .arrow::before,
#problems .arrow::after {content: "";  position: absolute;  top: calc(50% - 5px);  right: 0;  width: 79.6px;  height: 10px;  border-radius: 9999px;  background-color: #eeeeee;  transform-origin: calc(100% - 5px) 50%;}
#problems .arrow::before {transform: rotate(68.95deg);}
#problems .arrow::after {transform: rotate(-68.95deg);}
#problems .flex-item:nth-of-type(3) {flex-basis:45%;display:grid;place-content:center;font-size:120%;}
#problems .flex.images .flex-item {flex-basis:48%;}

#menu h2 {margin-bottom:3vw;}
#menu ul {display:flex; justify-content:space-between; gap:2vw 2%;align-items: stretch; flex-wrap:wrap;}
#menu li {flex-basis:calc(88% / 6);}
#menu li a {  position:relative; text-decoration:none; color:#321; border:1px #888 solid; padding:1em;transition: all .5s ease-out;  padding:0; height:100%; display: flex; flex-direction: column;}
#menu li a:hover {background:#e8e4e3; border-color:#e8e4e3;}
#menu li span {display:block;}
#menu li span:nth-of-type(2) {font-size:clamp(13px,.9vw,1.6rem); font-weight:bold;}
#menu li a img {height:auto;}
#menu li a span.type {position:absolute; width:30%; top:-.75vw; left:-.75vw; display: block; z-index:1;}
#menu li a span.course { line-height: 1.4; padding: .3vw; display: flex; align-items: center; justify-content: center; flex-grow: 1;}
#menu .instagram-feed-container {position:relative; aspect-ratio: 4 / 5;}
#menu .ig-feed {display:block;padding: 0;position: static;}
.ig-feed > div img { width: 100%; height: auto; vertical-align: bottom;}

h3.type {display: flex; gap:0 2vw; }
h3.type span.type {}
h3.type span.course {align-content:center; font-size:125%;}
h3.type img {height:6vw;}

.flex.images{gap:15px 2%;}
.flex.images .flex-item{flex-basis:48%; text-align:center; font-size:75%; font-weight:bold;}

.sp-banner {width:65%; margin:2em auto 0;}
#shiraga_bokashi > .sp-banner {margin: 0em auto 3em;}

section.type {border-top:1px solid #ddd; padding:4vw 0;}
section.type .flex {}
section.type .flex  div { flex-basis:48%;}
section.type .price {display:grid; place-content:center;background:rgba(89, 31, 0, .2); padding:2vw;font-size:110%; font-family:"Roboto Condensed", sans-serif; position:relative; line-height:1.3;}
section.type .price p {position:relative; z-index:1; margin-bottom:1.5vw;}
section.type .price p:last-child {margin-bottom:0;}
section.type .price:after {content:"PRICE"; position:absolute; top:0; right:0; color:#FFF; font-size:300%; font-family:"Roboto Condensed", sans-serif; line-height:.85; color:rgba(255,255,255,.3);z-index:0;}
section.type span.precautions {display:block;}
section.type .precautions {font-size:clamp(13px,1.2vw,1.8rem);}
section.type .hairstyles{margin-top:3vw;}
section.type .ig-feed { padding: 0; gap: 2vw;}
section.type .ig-more-item {
    display: grid;
    place-content: center;
    background: #eee;
    aspect-ratio: 4 / 5;
}
section.type .ig-more-item a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #321;
}
section.type .ig-more-item a:hover {
    color: #FFF;
}

section#type3 .flex > div {flex-basis:100%;} 
section#type3 .flex > div.price {margin-top:2vw; display:block;}
section#type3 .flex > div.price .flex-item {flex-basis:48% !important;} 



@media only screen and (max-width: 766px) {
#shiraga_bokashi {background-size:100%;}
#introduction {padding-top: 110%;}
main h1#content_h1 { font-size: 2.4rem; text-align:center;}
main h2 {font-size: 3.6vw;}
#menu li {flex-basis: calc(90% / 3);}
#menu li a span.type {top:-1vw; left:-1vw;}
#menu li span:nth-of-type(2) {font-size: .75rem;}

#shiraga_bokashi .flex { display: block;}
#problems .flex-item { padding:0 !important; }
#problems .flex-item.arrow { transform: rotate(90deg); height:40px; width:40px; margin:0 auto;}
.flex.solution .flex-item.arrow { transform: rotate(90deg); height:40px; width:40px; margin:0 auto;}
.flex.images {display:flex !important;}
#salon-image {margin-top:1em;}
section.type .flex div { flex-basis:100%; margin-bottom:3vw;}
section.type .price {padding:6vw 2vw;}
h3.type img {height: 10vw;}
}