hightouch@charset "UTF-8";

/* normalize */
html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust:100%;}body {margin:0;}main {display:block;}h1,h2,h3,h4,h5,h6 {font-weight:800;margin:0;padding:0;}hr {box-sizing:content-box;height:0;overflow:visible;}pre {font-family:monospace, monospace;font-size:1em;}a {background-color:transparent;}abbr[title] {border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong {font-weight:800;}code,kbd,samp {font-family:monospace, monospace;font-size:1em;}small {font-size:80%;}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub {bottom:-0.25em;}sup {top:-0.5em;}img {border-style:none;vertical-align: bottom;}button,input,optgroup,select,textarea {font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input {overflow:visible;}button,select {text-transform:none;}button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}fieldset {padding:0.35em 0.75em 0.625em;}legend {box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress {vertical-align:baseline;}textarea {overflow:auto;}[type="checkbox"],[type="radio"] {box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}[type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}details {display:block;}summary {display:list-item;}template {display:none;}[hidden] {display:none;}picture,figure{display:block;}button{background-color: transparent;border: none;cursor: pointer;outline: none;padding: 0;appearance: none;}iframe{vertical-align: bottom;}
* {box-sizing: border-box; outline: none; margin: 0; padding: 0;word-wrap: break-word; overflow-wrap: break-word;}
::selection {background: #BEF;}
body::-webkit-scrollbar,.hamburger-menus::-webkit-scrollbar{display: none;}


/*Initial setting*/
html, body {width:100%; height:100%;}
html { font-size: 62.5%; line-height:1.5;overflow-y: scroll; overflow-x: hidden;}
body , textarea, input {font-family: "Murecho", sans-serif; font-weight:400;}
body {
	position: relative;
	font-size: 1.6rem;
	position:relative;
	z-index:0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
	color:#544;
}
p {margin-bottom:1em;}
p:last-child {margin-bottom:0;}
a { color: #544; cursor:pointer; transition: .2s;}
a:hover { }
a.img{text-decoration:none; text-underline-offset: 0; display:block;}
a.img:hover{transform: scale(1.1);}
ul,ol{list-style: none outside;}
img {max-width: 100%; width:100%; height: auto; vertical-align:top;user-select: none;-webkit-user-select: none;-webkit-user-drag: none;image-rendering: crisp-edges;}
svg {display:block; max-width: 100%; width:100%; height: 100%; fill:#FFF;}
svg.external-link{width:1.4rem; height:1.4rem;fill:#222; display:inline; margin-left: 3px; vertical-align:-2px;}
svg.hidden{height:0;}
h2 {width:clamp(320px,36vw,600px);margin:0 auto;}
h3 {font-size:150%;margin-bottom:.5em;font-feature-settings: "palt";
color:rgba(255,108,168,1);
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;
}
h3:not(:first-child) {margin-top:1.5em;}
.js-glitter {
  position: relative;
  transition: all 0.4s;
  display:inline-block;
}
h4 {font-size:120%;margin-bottom:.5em;font-feature-settings: "palt";color:#5294ff;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;}


.star {
  position: absolute;
  display: block;
  width: 16px; 
  height: 16px;
  background-image: url("../img/star.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  animation: glitter 1.5s;
  pointer-events: none;
}
@keyframes glitter {
  0% { transform: scale(.5); opacity: 0;}
  50% { transform: scale(1.2); opacity: 1;}
  100% { transform: scale(.5); opacity: 0;}
}


/*class setting*/
.flex{display:flex;flex-wrap:wrap;}
a.nolink {background:lightgray !important; color:white !important; border-color:lightgray !important;}
.graybutton{
    display: block;
    background: #BBB;
    border: 2px solid #BBB;
    color: #fff;
    font-size: 125%;
    padding: 0.35em 0.5em;
    border-radius: 5px;
    text-align:center;
}
#body,#footer,#page-top {opacity:0;}


/* ============= 背景アニメ ============= */
.bgcontainer {
position:relative;
position: fixed;
background: rgba(225, 255, 255,.1);
width:100%;
height:100%;
z-index:-2;
inset: 0;
overflow:hidden;
}
.bgcontainer:before {
content:"";
position: absolute;
background-image: url("../img/bg.png");
background-size:100% 100%;
background-position:50% 50%;
background-repeat:no-repeat;
width:100%;
height:100%;
z-index:1;
inset: 0;
overflow:hidden;
animation: blink 5s ease-in-out infinite alternate;
}
@keyframes blink{
    0% {opacity:.5;filter: hue-rotate(45deg);}
    100% {opacity:1;filter: hue-rotate(0);}
}

shader-doodle {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

/*opening*/
#opening{
width: 100%;
height: 100vh;
margin:0 auto;
position: absolute;
inset: 0;
z-index:1;
display:none;
flex-flow: column;
align-items: center;
justify-content: center;
overflow:hidden;
opacity:1;
}
#opening p {
position: absolute;
z-index: 1;
text-align:center;
width:50%;
height:auto;
animation: openinglogo 3.5s ease-out;
animation-delay: 0s;
animation-fill-mode: forwards;
}
#opening p img {
max-width:none;
}
@keyframes openinglogo {
  0% {
  opacity:1;
  }
  80% {
/*  transform: translateX(0%); */
  transform: scale(1);
  opacity:1;
  }
  95% {
/*  transform: translateX(150%); */
  transform: scale(.1);
  opacity:0;
  }
  100% {
  opacity:0;
  display:none;
  }
}
@media only screen and (max-width: 760px) {
#opening{
padding:50vw;
}
}

/* html */
html.scrollmenu-open {
width: 100%;
height: 100%;
overflow: hidden;
}

/*common class*/
.flex {
position: relative;
display: flex;
flex-wrap: wrap;
}
.flex-item {
}
.swiper-wrapper{user-select: none;-webkit-user-select: none;}
.line-through {text-decoration:line-through;}
.nowrap{white-space: nowrap;}
.small {font-size:clamp(1.2rem,85%,1.6rem);}
.center {text-align:center;}
@media (max-width: 760px){
.alignright{ float: none; margin-left: 0; }
.alignleft{ float: none; margin-right: 0;}
.small {font-size:clamp(1rem,85%,1.4rem);}
}
.precautions li { display: flex; align-items: baseline;}
.precautions li:before { content: "\203B"; margin-right: 2px; }
.animate{opacity:0;}
.anchor { padding-top: 70px; margin-top: -70px;}

/*body*/
#body {
position: relative;
z-index: 1;
inset: 0;
width:100%;
margin-left: auto;
margin-right: auto;
}
#body .section {
 position: relative;
 z-index:auto;
 margin-bottom:4vw;
}
@media (min-width: 513px) and (max-width: 960px) {
#body .section {
 width: 92%;
}
}
.section-header {
display: block;
position: relative;
z-index: 1;
text-align: center;
margin-bottom: 2em;
}

h1 {width:50%; margin:3rem auto;}

/* header */
#header {
position:sticky; 
top:0;
z-index:5;
opacity:0; width:100%;overflow: visible;
}
#header-inner {position:relative; z-index:1; margin:0 auto;}


/* mainvisual */
#mainvisual {
position: relative;
margin: 0 auto;
overflow: hidden;
z-index:1;
padding-top:60%;
}
#mainvisual h1{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width:65%;
height:auto;
z-index:1;
margin:0;
}
#mainvisual .mv-img{
background:#FFF;
position: absolute;
width:70%;
height:auto;
top: 50%;
left: 100%;
transform: translate(-100%, -50%);
}
#mainvisual .mv-img img{
width:100%;
object-fit: cover;
object-position:0;
height:auto;
}
#mainvisual .flex{
position: absolute;
top:68%;
left:3%;
width:44%;
height:auto;
z-index:1;
margin:0;
flex-wrap:nowrap !important;
justify-content:space-between;
}
#mainvisual .flex li{
width:48%;
}


/* whatsnew */
#whatsnew.section{margin-bottom:0; width:80%; margin-left:auto; margin-right:auto; overflow: visible;-ms-overflow-style: none;scrollbar-width: none;}
#whatsnew iframe{-ms-overflow-style: none;scrollbar-width: none;border: none;width:100%;height: 400px;}
#whatsnew:-webkit-scrollbar{display: none;}
#whatsnew #news.whatsnew-item > div { margin-left:auto; margin-right:0;-ms-overflow-style: none;scrollbar-width: none;}
#whatsnew .whatsnew-title {display:flex; align-items: center; flex-wrap: wrap; position:relative;font-weight:900; font-size:120%; padding:1vw 0;}
#whatsnew .whatsnew-title:last-child{
 margin-left: auto;
}
#whatsnew .whatsnew-title a {
font-size:1.4rem;
display:inline-block;
color:#ff6ec0;
background:#FFF;
border-radius:1em;
padding:0 .5em;
margin-left: auto;
text-decoration:none;
}
#whatsnew .whatsnew-title a:hover {
background:#ff6ec0;
color:#FFF;
}
#whatsnew .whatsnew-title a:hover svg{
fill:#FFF;
}
#whatsnew .whatsnew-title a svg{
display: inline-block;
position:static;
width:1.4rem;
height:1.4rem;
margin-left:3px;
vertical-align:-2px;
transform: translate(0%, 0%);
fill:#ff6ec0;
}

/*latest_news*/
#latest_news {
position:relative;
padding-top:3vw;
}
#latest_news ul {
position:relative;
z-index:1;
overflow-Y:scroll;
padding-bottom:2vw;
}
#latest_news li {
display:flex;
flex-wrap:wrap;
padding: 1rem;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-image-source: url('../img/hand-line.svg');
  border-image-slice: 0 0 100% 0;
  border-image-repeat: stretch; 
}
#latest_news li:first-child {
padding-top: 0;
}
#latest_news ul li > p {
flex-basis:calc(100% - 75px);
}
#latest_news img {
margin: 0 12px 0 0 !important;
width: 75px;
height:100%;
}
#latest_news span {
display: block;
}
#latest_news span.date {
padding:0 5px;
margin-right:10px;
font-weight:600;
}
#latest_news a:hover:after{
width: 100%;
}

.sns-link a {
position:relative;
display:inline-block;
z-index:auto;
text-decoration:none;
font-weight:600;
overflow:visible;
}
.sns-link svg {
position:relative;
top:2px;
display:inline;
width:20px;
height: 16px;
fill: #333;
overflow:visible;
}
.sns-link a:hover svg {
transition: .3s;
}


/*イベント内容detail*/
#location {margin-top:3em;justify-content:space-between;
background-size: auto auto;
background-color: rgba(255, 242, 251, 1);
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 222, 226, 1) 10px, rgba(255, 222, 226, 1) 25px );
}
#location.flex .flex-item {padding:2em; flex-basis: 48%;}
#location.flex .flex-item .name {font-size:200%; font-weight:900; color:#F28;
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;}
#googlemap {flex-basis:52%;position: relative; padding-bottom: 40%;  height: 0;  overflow: hidden;}
#googlemap iframe{position: absolute; top: 0; left: 0;width:100%; height: 100%;}
@media only screen and (max-width: 760px) {
#location.flex .flex-item {flex-basis: 100%;}
#googlemap {flex-basis: 100%;padding-bottom: 70%;}
}

#event-date {position:relative; justify-content:space-between;}
#event-date.flex .flex-item {flex-basis:48%;}


/*イベント内容*/
#event-contents.section{margin-bottom:4em;}
#event-contents ul.grid{
display: grid;
grid-template-columns: 36% 64%;
grid-template-rows: 45% 55%;
column-gap:30px;
}
#event-contents ul.grid li {border:5px #FFF solid; border-radius:1em; padding:1.5em; background-color:rgba(255,255,255,.6);}
#event-contents ul.grid .grid1 { grid-area: 1 / 1 / 3 / 2; border-color:#FFA0DC; font-size:135%; padding:1.5em;}
#event-contents ul.grid .grid2 { grid-area: 1 / 2 / 2 / 3; border-color:#A0DCFF; border-width:5px 5px 0 5px;border-radius:1em 1em 0 0;padding: 1em 1.5em 0;position:relative; margin-top: 2em;}
#event-contents ul.grid .grid2 p.img { position:relative;}
#event-contents ul.grid .grid2 p.img:before { content:url(../img/event-contents-02-num.svg); position:absolute; top: -5em; left:0; width:120%;}
#event-contents ul.grid .grid3 { grid-area: 2 / 2 / 3 / 3; border-color:#A0DCFF; border-width:3px 5px 5px 5px;border-radius: 0 0 1em 1em;padding: 1em 1.5em 1.5em;}
#event-contents ul.grid .grid2,#event-contents ul.grid .grid3 {justify-content:space-between; align-items:center;}
#event-contents ul.grid .grid2 .img,#event-contents ul.grid .grid3 .img {flex-basis:30%;}
#event-contents ul.grid .grid2 .text,#event-contents ul.grid .grid3 .text {flex-basis:66%; border-left:3px #FFF solid; padding-left:1em;}
#event-contents ul.grid .grid2 .text {border-left-color:#A0DCFF;}
#event-contents ul.grid .grid3 .text {border-left-color:#A0DCFF;}


/*キャスト*/
#cast .cast-section {margin-bottom:2em;}
#cast ul {display:flex; justify-content:start; flex-wrap:wrap; column-gap:2%;}
#cast ul li {flex-basis:calc( 94% / 4 );}
#cast ul li.spacer {background:transparent;}
#cast ul li p {margin-bottom:0;text-align:center;}
#cast ul li p:nth-of-type(2) { font-weight:900; padding:1rem .25rem; color:#FFF;background:#306;}
#cast ul li p span {display:block; font-size:1.1rem;font-weight:700;}
#cast ul li:nth-of-type(1) p:nth-of-type(2){background:#ff3087;}
#cast ul li:nth-of-type(2) p:nth-of-type(2){background:#e53bff;}
#cast ul li:nth-of-type(3) p:nth-of-type(2){background:#2edcff;}
#cast ul li:nth-of-type(4) p:nth-of-type(2){background:#2effe3;}
#cast #singer li p:nth-of-type(2) {background:#fcad03;}

/*チケット*/
#tickets .sub-section {margin-bottom:3em;}
table.price{font-size:clamp(2rem,2.4vw,3rem);border-spacing: 5px; width:100%;}
.price th,.price td{background:rgba(255,255,255,.8);padding:.5em .5em; border-radius:.25em;}
.price td:nth-of-type(3){font-size:clamp(1.6rem,1.8vw,2rem);}
table.price:nth-of-type(odd) th{background:#FF7BAD; color:#FFF; font-weight:900;}
table.price:nth-of-type(even) th{background:#C784D9; color:#FFF; font-weight:900;}
#tickets p.tokuten{margin-left:24.5%;font-size:clamp(1.6rem,1.8vw,2rem);}
#tickets #tokuten-items {margin-bottom:1.5em;}
#tickets #tokuten-items h4 {}
#tickets #tokuten-items ul {display:flex;justify-content:space-between;align-items:stretch;}
#tickets #tokuten-items li {flex-basis:calc(93% / 3);background:#FFF;}
#tickets #tokuten-items li span {display:block;}
#tickets #tokuten-items li span.title {text-align:center;color:#FFF;padding:.2em .5em;background:#C784D9;}
#tickets #tokuten-items li:nth-of-type(1) span.title {background:#FF7BAD;}
#tickets #tokuten-items li span.description {font-size:clamp(1rem,90%,1.6rem);background:#FFF;padding:.2em .5em;}
#hightouch-notice {margin:1.5em 0; font-size:clamp(1.8rem,2vw,2.4rem); border:3px #fbc600 solid; border-radius:.5em;padding:.75em 1em;
background:rgba(255,250,0,.2); position:relative;padding-left:clamp(80px,14%,120px);}
#hightouch-notice:before{
content:"";
position:absolute;
background-image:url(../img/caution.svg); background-position:2% 50%; background-repeat:no-repeat; background-size:clamp(60px,8%,120px);inset:0;z-index:0;
background-repeat:no-repeat;
}
#hightouch-notice a{display:block; text-align:center;position:relative; z-index:1;}
#notice-link {justify-content:space-between;text-align:center;}
#notice-link .flex-item {flex-basis:48.5%;margin:0 0 1em;}
#notice-link .flex-item a{display:block;color:#FFF;background:rgba(112, 219, 255,.8);text-decoration:none;border-radius:.5em;padding:.75em 1em; font-size:clamp(1.8rem,2vw,3rem);font-weight:900;}
.buytickets p {display:block; margin:0 auto; width:60%;}
#tickets #sales-schedule {font-size:100%;}
#tickets #sales-schedule dl {
position:relative;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(1.6rem,1.8vw,2rem);
    width: 100%;
    gap:2px;
    color: #333;
}
#tickets #sales-schedule dt {
border-radius:.2em;
    flex-basis: 35%;
    background: rgba(255, 255, 255, 1);
    padding: 1rem 1.5rem;
  display: grid;
  place-content: center;
}
#tickets #sales-schedule dd {
border-radius:.2em;
    flex-basis: calc(65% - 2px);
    background: rgba(255, 255, 255, 1);
    padding: 1rem 2rem;
}
.soldout {position:relative;}
.soldout:before{
content:"";
position:absolute;
width:100%;
height:100%;
inset:0;
background-color:rgba(255,255,255,.8);
background-image:
radial-gradient(#7bded9 50%, transparent 50%);
background-size: 3px 3px;
}
.soldout:after{
content:"予定枚数終了";
position:absolute;
display: grid;
place-content: center;
inset:0;
width:100%;
height:100%;
font-size:clamp(4rem,5vw,5rem);
color:#7bded9;
font-weight:900;
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;}




#oyakoyusen p {margin-bottom:.25em;}
#tickets .sub-section table {border-collapse: collapse; margin-bottom:.5em; transform:translateX(1.2em);}
#tickets .sub-section table caption{text-align:left; transform:translateX(-1.2em);}
#tickets .sub-section table td {background:rgba(255, 255, 255,.8); padding:.3em .75em; border:.5px #544 solid;}
#hightouch p {margin-bottom:0;}
#hightouch .catchcopy {font-size:200%; font-weight:900; color:#F28; margin-bottom:.25em;
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;}
#hightouch h4 {}
#hightouch #shouhin {margin-top:2em;background:rgba(237, 232, 255,.5); margin-bottom:1.5em; justify-content:space-between;align-items:center;position:relative;}
#hightouch #shouhin h4 {position:absolute; top:-.8em; left:0; flex-basis:100%; margin-bottom:0;}
#hightouch #shouhin .price  {font-size:200%; font-weight:900; color:#8b6bff; margin-bottom:0;flex-basis:49%; text-align:center;
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;}
#hightouch #shouhin .price span {font-size:60%;}
#hightouch #hightouch-character {background:#b5a1ff; padding:1em;text-align:center; color:#fff; font-weight:900;flex-basis:50%;}
#hightouch #shouhin .announce {flex-basis:100%; background:#8b6bff; color:#fff200;font-size:110%; font-weight:900; text-align:center;margin:0 auto; padding:.25em 0;}
#hightouch #shouhin .announce img {display:inline;width:2rem; vertical-align: -3px; margin-right:2px;}
#hightouch-howtoget {margin:1.5em 0;}
#hightouch-oubo {margin:1.5em 0;}
#hightouch-oubo ol {display:flex; flex-wrap:wrap; gap:30px; margin:3em 0 1.5em; justify-content:center;}
#hightouch-oubo li {flex-basis:calc(calc(100% - 60px) / 3); background:#dbf8ff; padding:2em 1.5em 1.5em;position:relative; border-radius:1em;}
#hightouch-oubo li .step{
position:absolute;
text-align:center; font-size:175%; font-weight:900; transform:translate(-50%,-.75em); top:0; left:50%;
color:#2499ff;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;
}
#hightouch-oubo h5 {
text-align:center; font-size:150%; font-weight:900; line-height:1.3; margin-bottom:.5em;
color:#4772ff;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;
}
#hightouch-oubo li.notice{
flex-basis:20%;
position:relative;
transform:translate(-20%,-5%) scale(1.1) rotate(5deg);
}
#hightouch-oubo li:after{
content:"▶︎";
color:#2499ff;
position:absolute;
text-align:center; font-size:175%; font-weight:900; transform:translate(100%,-50%); top:50%; right:0;
}
#hightouch-oubo li:nth-of-type(5):after,#hightouch-oubo li:nth-of-type(6):after{display:none; content:"";}
#hightouch-oubo li:nth-of-type(6){background:transparent;padding:0;}
#hightouch-oubo li span {white-space: nowrap;}
#hightouch-oubo .announce img {display:inline;width:2rem; vertical-align: -3px; margin-right:2px;}
#hightouch-oubo .announce {
    flex-basis: 100%;
    background: #4772ff;
    color: #fff200;
    font-size: 110%;
    font-weight: 900;
    text-align: center;
    margin: 0 auto;
    padding: .25em 0;
}




/* ============= グッズ（goods） ============= */
#goods  h5{
    margin-top: 1.5em;
    font-size: clamp(1.4rem,3vw,1.8rem);
}
#goods .swiper{
margin-bottom:3em;
}
#goods .swiper li{
    flex-basis:60%;
    margin:0 auto;
    background:rgba(226, 186, 255,.6);
    font-weight: normal;
    font-size: clamp(1.2rem,2.4vw,1.6rem);
}
#goods p.image {margin-bottom:0;}
#goods div.grid {
display: block;
grid-template-columns: 40% 60%;
grid-template-rows: 40% 60%;
}
#goods .section-body span{display:block;background:#ffbdec;}
#goods span.title { grid-area: 1 / 1 / 3 / 2; display: grid; place-content: center;text-align:center; font-size:clamp(1.4rem,2vw,2.4rem); line-height:1.3; font-weight:900; color:#ff29a2;background:#ff4fb1; padding:.5em 0; 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;}
#goods span.price { grid-area: 1 / 2 / 2 / 3; font-size:150%;padding:5px 15px 0;}
#goods span.description { grid-area: 2 / 2 / 3 / 3; padding:0 15px 15px;}
#goods span.price:after {
position:relative;
content: "円(税込)";
font-size:1.3rem;
white-space: nowrap;
}
#goods .andmore{ font-size:clamp(3vw,400%,6vw); font-weight:900; text-align:center;
color:#b363ff;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;
}
#goods table.sub-section {border-collapse: collapse; margin-bottom:.5em; transform:translateX(0em);}
#goods table.sub-section caption{text-align:left; transform:translateX(-1.2em);}
#goods table.sub-section td {background:rgba(255, 255, 255,.8); padding:.3em .75em; border:.5px #544 solid;}


/* footer */
#footer {
position:relative;
overflow:visible;
z-index: 1;
}
#footer-menu-wrapper{
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 80%;
padding:30px 0 50px;
max-width: 1280px;
margin: 0 auto;
}


/* footer-sns */
ul#footer-sns{
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
padding: 10px 0;
}
#footer-sns li {
flex-basis:30px;
margin:0 2%;
}
#footer-sns li a {
display:block
}
#footer-sns svg {
width: 100%;
height: 30px;
fill: #000;
}
#footer-sns a:hover svg {
fill: #F47;
filter: drop-shadow( 0px 0px 1px #FFF ) drop-shadow( 0px 0px 2px #FFF ) drop-shadow( 0px 0px 3px #FFF ) drop-shadow( 0px 0px 5px rgba(255,255,255,.5) ) drop-shadow( 0px 0px 8px rgba(255,255,255,.5) );
transition: .3s;
}


/* copyright */
#copyright {
font-weight:normal;
text-align: center;
font-size: clamp(1rem,2.1vw,1.3rem);
}

/*scroll-indicatior*/
.scroll-indicator {
  display: block;
  width: 21px;
  height:60px;
  position: absolute;
  top:3em;
  left:95%;
  z-index: 1;
}
.scroll-indicator:after {
content:"SCROLL";
font-family:"Arial", sans-serif;
position: absolute;
color: rgba(100, 100, 100, 1);
z-index:0;
transform: translate(-34%,-60%) scale(.6);
}
.indicator {
  position: absolute;
  width: 21px;
  height: 1px;
  opacity: 0;
  transform: scale(0.3);
  -webkit-animation: move-indicator 3s ease-out infinite;
  animation: move-indicator 3s ease-out infinite;
}
.indicator:first-child {
  -webkit-animation: move-indicator 3s ease-out 1s infinite;
  animation: move-indicator 3s ease-out 1s infinite;
}
.indicator:nth-child(2) {
  -webkit-animation: move-indicator 3s ease-out 2s infinite;
  animation: move-indicator 3s ease-out 2s infinite;
}
.indicator:before,
.indicator:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: rgba(100, 100, 100,.9);
}
.indicator:before {
  left: 0;
  transform: skewY(30deg);
}
.indicator:after {
  right: 0;
  width: 50%;
  transform: skewY(-30deg);
}
@-webkit-keyframes move-indicator {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    transform: translateY(4.8rem);
  }
}

@keyframes move-indicator {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    transform: translateY(4.8rem);
  }
}



/*page-top*/
#page-top {
display:none;
position: fixed;
z-index:1;
right: 15px;
bottom: 15px;
background: #deb2c5;
padding: 10px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(100,50,75,.5);
width:50px;
height:50px;
}
#page-top:hover {
background: rgba( 255, 200, 240,.9);
}
#page-top span {
position: relative;
display:block;
opacity: 0;
animation-iteration-count: infinite;
animation-duration: 2.0s;
animation-name: scroll;
}
#page-top span::before,#page-top span::after{
position: absolute;
display:block;
content: "";
border-bottom:3px solid #FFF;
left:0;
top:50%;
width:50%;
transform: rotate(-45deg) translateX(25%);
}
#page-top:hover span::before,#page-top:hover span::after {
border-color: #F39;
}
#page-top span::after {
left:auto;
right:0;
transform: rotate(45deg) translateX(-25%);
}
#page-top span:nth-of-type(1) { animation-delay:.5s; top: 10px; }
#page-top span:nth-of-type(2) { animation-delay: .2s; top: 20px; }
@keyframes scroll { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} }

/*modal-window*/
.modal-open{ cursor: pointer; text-decoration:underline;}
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
    z-index:101;
}
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
	height: 525px;
}
.modal-content iframe{ width: 100%; border: none; height: 100%;}