@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0; }
body { background: #fff; background-size: cover; font-family: fot-tsukuardgothic-std,sans-serif; font-weight: 400; color: #474747; letter-spacing: .05em; margin: 0 !important; padding: 0 !important; }
hr { display: none; }
ul { list-style: none; }
header, section, nav, article, footer { display: block; }
img { vertical-align: bottom; }

.cen { text-align: center; }
.rig { text-align: right; }
.mini { font-size: smaller; }
.allcen { display: flex; justify-content: center; align-items: center; }
.none { opacity: .3; }

/*リンク設定
----------------------------------------------*/
a { color: #6c3281; }
a:hover { color: #a766be; transition: 0.5s; text-decoration: none; }
a img:hover { opacity: .5; transition: .5s; }

/*おやくだち
----------------------------------------------*/
.coution { background: rgba(204,204,204,.5); padding: 3%; border: 1px solid #CCC; }
.strong { background: linear-gradient(transparent 60%, #ddd1bf 60%); }
.youtube { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 15px; }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

#loading { width: 100vw; height: 100vh; transition: all 1s; background-color: #FFF; position: fixed; top: 0; left: 0; z-index: 99999; }
.spinner { width: 100px; height: 100px; margin: 200px auto; background-color: #FFCCDD; border-radius: 100%; animation: sk-scaleout 1.0s infinite ease-in-out; }
@keyframes sk-scaleout {
  0% { transform: scale(0);}
	100% { transform: scale(1.0); opacity: 0; }
}
.loaded { opacity: 0; visibility: hidden; }

/*共通
----------------------------------------------*/

#myCanvas { width: 100%; max-width: 1024px; position: fixed; bottom: 0; left: 50%; z-index: -999; transform: translateX(-50%); }

.pink { background: linear-gradient(transparent 60%, #ffdff9 60%); padding: 0 .5em; }
.blue { background: linear-gradient(transparent 60%, #dae0ff 60%); padding: 0 .5em; }

@media screen and (max-width: 720px) {
}

/*別個
----------------------------------------------*/
#kv { text-align: center; position: relative; z-index: -9999; }

#menu { width: 95%; max-width: 960px; margin: 0 auto 30px; position: relative; }
#menu > .main { display: flex; }
#menu > .sub { display: flex; gap: 5px; position: absolute; top: 100px; right: 0; width: 100%; max-width: 600px; }
#menu > .sub > li { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; white-space: nowrap;}
#menu > .sub > li > a { display: block; background: #000; width: 100%; color: #fff; text-decoration: none; text-align: center; font-size: 14px; padding: 3px 1.5em; border-radius: 3px; }
#menu > .sub > li > .fanbox { background: #dcaeae;}
#menu > .sub > li > .cien { background: #5EABD6;}
#menu > .sub > li > a:hover { background: #92a4ff; transition: .8s; }
#menu > .news { position: absolute; width: 100%; max-width: 600px; top: 150px; right: 0; border-top: 1px dotted #000; }
#menu > .news > li { border-bottom: 1px dotted #000; padding: 3px 0; text-align: right; font-size: 14px; }
@media screen and (max-width: 720px) {
    #menu > .sub { position: static; margin-bottom: 10px; justify-content: center; }
    #menu > .sub > li:first-child { margin-left: 0; }
    #menu > .news { position: static; }
}

#about { text-align: center; margin-bottom: 80px; }
#about > h1 { margin-bottom: 30px; }
#about > p { margin-bottom: 1.5em; font-weight: 700; }
@media screen and (max-width: 720px) {
  #about { width: 95%; margin: 0 auto 80px; }
  #about > p { font-size: 14px; }
}

#product { text-align: center; margin-bottom: 80px; }
#product > h1 { margin-bottom: 30px; }
#product > dl { width: 100%; max-width: 960px; margin: 0 auto 30px; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; padding: 50px 0; }
#product > dl > dt { width: 400px; }
#product > dl > dd { width: 430px; text-align: left; margin-left: 30px; font-size: 14px; line-height: 1.5; }
#product > dl > dd > h2 { font-size: 16px; border-bottom: 1px solid #fff; padding-bottom: 5px; margin-bottom: 1.5em; }
#product > dl > dd > p { margin-bottom: 1.5em; }
#product > dl > dd > p:last-child { margin-bottom: 0; }
#product > dl > dd > .link { display: flex; }
#product > dl > dd > .link > a { display: block; background: #fff; color: #000; width: 150px; text-decoration: none; text-align: center; font-size: 14px; padding: 3px 0; margin-right: 10px; }
#product > dl > dd > .link > a:hover { background: #92a4ff; transition: .8s; }
@media screen and (max-width: 720px) {
  #product { width: 95%; margin: 0 auto 80px; }
  #product > dl { display: block; padding: 5%; box-sizing: border-box; }
  #product > dl > dt { width: 100%; }
  #product > dl > dd { width: 100%; margin: 15px 0 0; }
}

#schedule { text-align: center; width: 95%; max-width: 960px; margin: 0 auto 80px;}
.google-cal { width: 100%; max-width: 960px; margin: 20px auto 50px; }
.google-cal iframe { width:100%; max-width:960px; }
.height1000 { height: 1000px; }

#sns { text-align: center; width: 95%; max-width: 960px; margin: 0 auto 80px;}

/*フッター
----------------------------------------------*/
footer { background: #000; width: 100%; text-align: center; padding: 25px 0 40px; color: #fff; font-size: 12px; }
footer ul { display: flex; justify-content: center; align-items: center; margin: 15px 0; }
footer ul li { margin: 0 5px; }

/*----- フェードイン -----*/
.inviewfadeIn { opacity: 100; transform: translate(0, 100px); -webkit-transform: translate(0, 100px); transition: 1s; }
.fadeIn { opacity: 1.0; transform: translate(0, 0); -webkit-transform: translate(0, 0); }



/*
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
SP用タグ
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/
img { max-width: 100%; height: auto; }
.sp { display: none; }
@media screen and (max-width: 720px) {
	.sp { display: block; }
	.pc { display: none; }
  #myCanvas { width: 1024px; }
}