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

* { margin: 0; padding: 0; }
html { font-size: 62.5%; }
body { background: #e0e4e8; font-family: "fot-matisse-pron", sans-serif; font-weight: 500; font-style: normal; line-height: 1.8; font-feature-settings: "palt"; color: #000; 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; }
audio { width: 100%;}

.cen { text-align: center; }
.rig { text-align: right; }
.mini { font-size: smaller; }
.allcen { display: flex; justify-content: center; align-items: center; }
.none { opacity: .3; }
.m50 { margin-bottom: 50px !important;}
.cs { display: inline-block; color: #c0c0c0; padding: 0 0 1.5em 30px; background: url(../img/deco_time.png) no-repeat; }
.end { margin-bottom: 0 !important;}

/*リンク設定
----------------------------------------------*/
a { color: #d4c700; }
a:hover { color: #ffee01; transition: 0.5s; text-decoration: none; }
a img:hover { opacity: .5; transition: .5s; }
.wop { background: url(../img/op.svg) no-repeat 100% 50%; background-size: .5em; padding-right: 1em; }

.btn { font-size: 2rem; text-align: center; display: block; width: 300px; margin: 0 auto .5em; border-radius: 6px; padding: 15px 0; color: #fff; text-decoration: none; background: #000 url(../img/op.svg) 90% 50% no-repeat; background-size: 18px; border: 1px solid #98001f; box-shadow: 0 5px 0 #98001f;}
.btn:hover { background: #303030 url(../img/op.svg) 90% 50% no-repeat; background-size: 18px; opacity: .5s; color: #fff; box-shadow: 0 3px 0 #98001f; transform: translateY(2px); }

/*おやくだち
----------------------------------------------*/
.coution { background: rgba(204,204,204,.5); padding: 3%; border: 1px solid #CCC; }
.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: #000; position: fixed; top: 0; left: 0; z-index: 99999; }
.spinner { width: 100px; height: 100px; margin: 200px auto; background-color: #98001f; 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; }

/*別個
----------------------------------------------*/

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

/*----- フェードイン -----*/
.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; }
	
	html { font-size: 50%;}
}