@charset "UTF-8";
/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-size: 100%;
	line-height: 1.6;scroll-behavior: smooth;
	}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
ul{
  margin: 0;
  padding: 0;
}
dl{
  margin: 0;
  padding: 0;
}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}



/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll; width: 100%;scroll-behavior: smooth; }
body { text-align: center;width: 100%;
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* ======================================== */

a:link { color: #019bdb; text-decoration:none; transition: 0.5s;}
a:visited { color: #9999a1; }
a:hover { color: #ea609e; }
a:active { color: #90c31f; }

/* contents
---------------------------------------------------------- */
#contents {	
	margin: 0 auto; position:relative;
	width: 100%;height: auto;
	padding:0;
	text-align:left;
}

#contents:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
.wrap {
overflow: hidden;
}

header.head{ width: 100%; height: auto; position: relative;text-align:center; 
}

div.pc_head{display: block ;width: 100%; height: auto; position: relative;}

.header-box{width: 100%; height: auto; background-image: url(../images/header_bg.jpg); background-size: 100% auto; background-repeat: no-repeat; position: relative; display:flex;align-items:center; flex-direction: column;
}
/* aspect-ratio: 1920 / 1000; */

.header-box::before { 
  content: "";
  display: block;
  padding-top: 40%;
}

dl.top-discrip{ width: 80%; margin: auto; display:flex;flex-direction: row;
padding-bottom: 10px; }
dl.top-discrip dt{width: 80%; display:flex; flex-direction: column;text-align: left;}
dl.top-discrip dt p{ margin-top: 16px;font-size: 16px;}
dl.top-discrip dd{width: 20%; padding: 40px;line-height: 2;}
dl.top-discrip dd img{ width: 100%; height: auto; }

h2.top-heading {
    border: none;
    display: block; color: #f62a67; font-weight: bold; line-height: 1.6;
    font-size: 25px;/*文字サイズ*/
    padding: 0.2rem;/*文字回りの余白（上下左右）*/
    position: relative;
}

h2.top-heading:after {
    bottom: 0;
    background: repeating-linear-gradient(-45deg, transparent 0 2px, #f62a67 2px 4px);/*斜めストライプの傾き・色・太さなど*/
    content: '';
    left: 0;
    height: 7px;/*斜めストライプ部の高さ*/
    position: absolute;
    width: 100%;
}
.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.mob-head{ display: none;}
.mob-head figure{ max-width: 100%;  height: auto;}
.top-mob-head{display: none;}

.music-shop-btn{ width: 17vw; border: none; cursor: pointer; background-color: transparent; position: absolute; top: 33%; left: center; 
}
.music-shop-btn:hover{ border: none; cursor: pointer; opacity: 0.7;}
.music-shop-btn img{ width: 100%; height: auto;}

.orange-pin{ position: absolute; left: 31%; top: 30px; }
.blue-pin{ position: absolute; left: 65%; top: 30px; }
.green-pin{ position: absolute; left: 3%; top: 470px; }
.yellow-pin{ position: absolute; right: 3%; top: 576px; }


.pin-swing01 {
  animation: logo-swinging 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

.pin-swing02 {
  animation: pin-swinging01 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

.pin-swing03 {
  animation: pin-swinging02 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

.pin-swing04 {
  animation: pin-swinging03 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

.btn-swing {
  animation: btn-swinging 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

 
@keyframes logo-swinging {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pin-swinging01 {
  0%, 100% {
     -webkit-transform:translateX( -12px);
  }
  50% {
    -webkit-transform:translateX(  0px);
  }
}

@keyframes pin-swinging02 {
  0%, 100% {
     transform:rotatez(0);
  }
  50% {
    transform:rotatez(60deg);
  }
}

@keyframes pin-swinging03 {
  0%, 100% {
     transform:rotatez(0);
  }
  50% {
    transform:rotatez(-30deg);
  }
}

@keyframes btn-swinging {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}


.title{ position: absolute; top: 0; left: 0; }
.title-box {
  animation: zoomIn 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



@media screen and (max-width: 375px) {
header.head{height: auto;}

.mob-head{display: block;width: 100%; height: auto; background-color: #2e2e3a; text-align: left; }
.mob-head figure{ max-width: 100%;  height: auto; vertical-align: top;}
.top-mob-head{display: block;width: 100%; height: auto;}
.top-mob-head img{ width: 100%; height: auto;}
div.pc_head{ display: none;}

 }


@media screen and (min-width:376px) and (max-width: 390px) {
header.head{ height: auto;}

.mob-head{display: block;width: 100%; height: auto; background-color: #2e2e3a; text-align: left; }
.mob-head figure{ max-width: 100%;  height: auto; vertical-align: top;}
.top-mob-head{display: block;width: 100%; height: auto; }
.top-mob-head img{ width: 100%; height: auto;}
div.pc_head{ display: none;}

}




@media screen and (max-width: 767px) {
header.head{ height: auto;}
.mob-head{display: block;width: 100%; height: auto; background-color: #2e2e3a; text-align: left; }
.mob-head figure{ max-width: 100%; height: auto; vertical-align: top;}
.top-mob-head{display: block;width: 100%; height: auto; }
.top-mob-head img{ width: 100%; height: auto;}
div.pc_head{ display: none;}

.music-shop-btn{ width: 40vw; border: none; cursor: pointer; background-color: transparent; position: absolute; top: 25%; left: 30%; 
}

}


/* For iPad */
@media screen and (min-width:768px) and (max-width:1199px){
.mob-head{display: block;width: 100%; height: auto; background-color: #2e2e3a; text-align: left; }
.mob-head figure{ max-width: 100%; height: auto; vertical-align: top;}
.top-mob-head{display: block;width: 100%; height: auto; margin-bottom: 30px;}
.top-mob-head img{ width: 100%; height: auto;}
div.pc_head{ display: none;}

.music-shop-btn{ width: 40vw; border: none; cursor: pointer; background-color: transparent; position: absolute; top: 45%; left: 30%; 
}


}

/* For Laptop */
@media screen and (min-width:1200px) and (max-width:1720px){
header.head{height: auto;}
.title{ width: 30vw;  height: auto; }
}



/* ======================================== */

.main {
	margin: 0 auto; padding:0 0 20px 0;
	width: 100%; height:100%;
    display:flex;	
    flex-direction:column;
    flex-wrap:wrap;
}



.scene-photo-frame{ width:100%; display: block;border: 10px #fff solid;}
ul.scene-photo li img{ max-width:100% ; height: auto;}

section.about{ width:100%; padding: 30px 0; display:flex;justify-content:space-between;
background-image: url(../images/shuroku_bg.jpg);
}

section.Performer{ width:100%; height: auto; display: flex;justify-content:space-around;}

section.normal{ margin: 60px 0; width:100%; height: auto; display: flex;justify-content:center; flex-direction: column;
}

section.mobile{ display: none; }


.about-frm01{ width: 32%; height: 400px; display:flex;justify-content:center; flex-direction: column;margin-bottom:auto; position: relative; }

.about-frm02{ width: 32%; height: 700px; display:flex;justify-content:center; flex-direction: column;margin-bottom:auto; position: relative; }

.heading-box{ display: block;position: absolute;top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;z-index: 4;
}
main h3.about-heading { width: 70%; margin: auto;
    color: #019bdb;/*文字色*/
    font-size: 20px;/*文字サイズ*/ text-align: center;
    display: block;
    border: 2px dashed #019bdb;/*吹き出し線（太さ 破線 色）*/
    position: relative;
    padding: 1em;/*文字回りの余白（上下左右）*/
    border-radius: 30px;/*吹き出し角丸サイズ（四隅）*/
    display: block; 
}

main h3.about-heading:before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 20%;/*吹き出しの矢印部の左右位置*/
    transform: translateX(-50%) rotate(-45deg);
    width: 10px;
    height: 10px;
    border: 2px dashed #019bdb;/*吹き出しの矢印部の線（太さ 破線 色）*/
    border-top: none;
    border-right: none;
    background-color: #dcf1fc;/*吹き出しの矢印部の内側背景*/
}

main h3.about-heading:after {
    content: '';
    background: #dcf1fc;/*背景色*/
    left: 4px;/*背景左右ずれ*/
    top: 10px;/*背景上下ずれ*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    border-radius: 30px;/*背景角丸サイズ（四隅）*/
}

.about-box{ width: 100%; padding:40px 30px; background-color: #f9d5e4; border-radius: 20px;display:flex;align-items:flex-start; position: absolute; top: 60px; left: 0; font-weight: 400; }


ul.title-list{ display: block;}
ul.title-list li:before{ 
  display:inline-block; 
  vertical-align: middle;
  content:'★';
  color: #fff999;
}
.lineheight2{ line-height: 2; }

.Performer-box{ width: 45%; background-color: #d8f2fc; border-radius: 20px; padding: 40px;}
ul.Performer-list{ display: block;}
ul.Performer-list li:before{ 
  display:inline-block; 
  vertical-align: middle;
  content:'◆';
  color: #7dd1f1;
}


h2.subtitle{ width: 90%; margin: auto; font-size: 20px; text-align: left;     margin-bottom: 10px; transform: rotate(0.05deg);font-family: 'M PLUS 1p', sans-serif; font-weight: 900;
 position: relative;
    background: #fcd0e2;/*背景色*/
    display: block;
    padding: 20px;/*文字回りの余白*/
    background-image: repeating-linear-gradient(-30deg,#fcc9de 0 3px,transparent 5px 10px);/*背景ストライプの角度・色・太さなど*/
}

dl.info{ width: 90%; margin: auto; display:flex; flex-direction: row; margin-bottom: 20px; padding: 14px;}
dl.info dt{width: 70%; font-size: 16px; transform: rotate(0.05deg);}
dl.info dd{width: 30%; padding:4px; font-size: 16px;}
dl.info dd img{width: 100%; height: auto;}


.bn-box06{ width: 100%; margin-top: 200px; display: block; }
ul.banner{ width: 80%; margin: auto;display:flex; justify-content:center;
flex-wrap:wrap;
list-style: none;}
ul.banner li{ margin: 4px;}
ul.banner li img{width: 100%; height: auto; }


.br-sp {display:none ; }
.br-pc {display: block; }




@media screen and (min-width:950px) and (max-width:1199px){
h2.subtitle{ width: 100%;}

.about-frm02{ width: 30%; height: 650px; display:flex;justify-content:center; flex-direction: column;margin-bottom:60px; position: relative;}

.about-box{ width: 100%; padding:30px 20px;}

ul.title-list{ display: block; font-size: 14px;}

dl.info{ width: 100%;}
dl.info dt{ font-size: 16px; transform: rotate(0.05deg);}
dl.info dd{ font-size: 16px;}

.music-shop-btn{ width: 30vw; border: none; cursor: pointer; background-color: transparent; position: absolute; top: 56%; left: 34%; 
}
section.mobile{ display: block; width: 96%; margin: auto; padding-top: 80px; 
}
h2.top-heading { font-size: 20px; text-align: left; }
section.mobile p{ padding: 10px; text-align: left; font-size: 16px;
background-image: url(../images/mob-top-bg.jpg);
 }

.br-sp {display: block; }
.br-pc {display:none ; }
}


@media screen and (max-width: 767px) {
.br-sp {display: block; }.br-pc {display: none; }

h2.subtitle{ width: 100%;}
section.about{ width:100%; height: 1600px; padding: 30px 0; display:flex;justify-content:space-between; flex-direction: column;
}
.about-frm01{ width: 90%; margin: auto; height: 300px;}
.about-frm02{ width: 90%; margin: auto; height: 700px;}

section.Performer{ width:100%; height: auto; display: flex;justify-content:space-around; flex-direction: column;}

.Performer-box{ width: 90%; margin: auto; background-color: #d8f2fc; border-radius: 20px; padding: 40px; margin-top: 60px;}

dl.info{ width: 100%; flex-direction: column;}
dl.info dt{width: 100%; font-size: 16px; transform: rotate(0.05deg);}
dl.info dd{width: 100%; font-size: 16px;}

section.mobile{ display: block; width: 96%; margin: auto; padding-top: 80px; 
}
h2.top-heading { font-size: 20px; text-align: left; }
section.mobile p{ padding: 10px; text-align: left; font-size: 16px;
background-image: url(../images/mob-top-bg.jpg);
 }

.bn-box06{ width: 100%; margin-top: 0px; display: block; }
}



/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
.br-sp {display: block; }.br-pc {display: none; }
h2.subtitle{ width: 100%;}
main h3.about-heading { 
    font-size: 16px;
}
.about-frm02{ width: 32%; height: 600px; display:flex;justify-content:center; flex-direction: column;margin-bottom:auto; position: relative;
 }
ul.title-list{ display: block; font-size: 12px;}
.about-box{ width: 100%; padding:30px 20px;}

dl.info{ width: 100%;}
dl.info dt{ font-size: 16px; transform: rotate(0.05deg);}
dl.info dd{ font-size: 16px;}

section.mobile{ display: block; width: 96%; margin: auto; padding-top: 140px; }
h2.top-heading { font-size: 20px; text-align: left; }
section.mobile p{ padding: 10px; text-align: left; font-size: 16px;
background-image: url(../images/mob-top-bg.jpg);
 }

.bn-box06{ width: 100%; margin-top: 0px; display: block; }
}



/* footer
---------------------------------------------------------- */
#foot{
margin-top: auto; margin: 0; padding:0 3% 10% 3% ;
width:100%; bottom:0;
background-image: url(../images/footer_bg.jpg); background-repeat: repeat-x;
background-position: bottom;background-size: 100% auto;

display:flex;
flex-direction:column;
align-items:center;transform: rotate(0.05deg);font-family: 'M PLUS 1p', sans-serif;
}


/*
=========================================
  Utilities
=========================================
*/

/* txt
---------------------------------*/
.txt-lll{ font-size: 180%;}
.txt-ll{ font-size: 160%;}
.txt-l{ font-size: 140%;}
.txt-m{ font-size: 120%;}
.txt-ms{ font-size: 100%;}
.txt-s{ font-size: 80%;}
.txt-ss{ font-size: 70%;}
.txt-normal{ font-weight: normal;}
.txt-600{ font-weight: 600; }
.txt-700{ font-weight: 700; }
.txt-900{ font-weight: 900; }


.align-right{ float: right;}

.txt-fix{transform: rotate(0.05deg);}
.txt-red{ color: #e60012; }

p { margin: 0.5em 0px;}

/* inview
---------------------------------*/

.fadeIn{
  transition: all .5s ease-out;
  opacity: 0 !important;
}
.fadeIn.appear{
  opacity: 1 !important;
}

.fadeIn02{
  transition: all 1.6s ease-in-out;
  opacity: 0 !important;
}
.fadeIn02.appear{
  opacity: 1 !important;
}