@charset "UTF-8";

#splash {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:url(../img/bg01.png) repeat;
  text-align:center;
  color:#fff;
}

header {
	background:#e85298;
	text-align:center;
	padding:20px 0;
}
main h1 img {
	width:100%;
}
main h1 + div {
	text-align:center;
	margin:20px 0;
}
main ul.bagBtn {
	display:flex;
	justify-content:center;
	margin:100px 0;
}
main ul.bagBtn li {
	margin:0 20px 0;
}
main p {
	font-size:2.1rem;
	color:#fff;
}
main p.bagCap {
	font-size:2.1rem;
	text-align:center;
}
.wrap {
	padding:0 0 20px;
}
.wrapUnder {
	text-align:center;
	padding:20px 0;
	background:url(../img/bg01.jpg) top center repeat-y;
}
/*.wrapUnder h2 {
	background:#C3461D;
	font-size:2.8rem;
	color:#fff;
	padding:0.5em 6em;
	margin:0 auto 2rem;
	opacity:0.9;
	display:inline-block;
	font-family: serif;
}*/
.wrapUnder ul.gnav {
	width:952px;
	margin:0 auto 2rem;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:10px;
}
#pageTop {
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:9999;
}
#pageTop a {
	color: #999;
	font-size:2.4rem;
	text-decoration:none;
}

@media screen and (max-width: 768px) { 
header img {
	width:80%;
}
main h1 img {
	width:100%;
	height:85vw;
	object-fit:cover;
}
main ul.bagBtn {
	margin:50px 0;
}
.wrap {
	padding:0 15px 15px;
}
.wrapUnder {
	padding:15px 15px;
	background:url(../img/bg01.jpg) top center / 100%;
}
.wrapUnder ul.gnav {
	width:100%;
}
.wrapUnder ul.gnav li {
	width:31%;
}
.wrapUnder ul.gnav img {
	width:100%;
}
main p.bagCap {
	font-size:1.8rem;
}
#pageTop {
	bottom:45px;
	opacity:0.7;
}
}

@media screen and (max-width: 768px) { 
.pcOnly {display:none;}
}
@media screen and (min-width: 769px) { 
.spOnly {display:none;}
}


footer {
	text-align:center;
	padding:30px 0 90px;
	background:#e85298;
}
footer p {
	font-size:1.6rem;
}
footer p.ftrTxt1 {
	font-size:1.6rem;
}
footer p.ftrTxt2 {
	font-size:1.3rem;
	margin:0 0 20px 0;
}
footer p.copyright {
	font-size:1.3rem;
}

ul.layer-btn  {
	display:flex;
	justify-content:center;
	flex-wrap:nowrap;
	text-align:center;
	position:fixed;
	bottom:0;
	background:#333;
	opacity:0.8;
}
ul.layer-btn a {
	display:inline-block;
	width:50vw;
	padding:1em 0;
	font-size:2.8rem;
	text-decoration:none;
	color:#fff;
	font-family: serif;
	cursor:pointer;
}

@media screen and (max-width: 768px) { 
ul.layer-btn a {
	padding:0.5em 0;
	font-size:2.8rem;
}
}

/*.fade{
  opacity : 0;
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
}
 
.fade.view{
  opacity: 1;
  transform: translateY(0);
}*/


/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container01,.modal-container02{
	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;
}
/*モーダル本体の擬似要素の指定*/
.modal-container01:before,.modal-container02:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container01.active,.modal-container02.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body01,.modal-body02{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close01,.modal-close02{
	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-content01,.modal-content02{
	/*background: #fff;*/
	text-align: left;
	padding: 0px;
}
@media screen and (max-width: 768px) { 
.modal-body01,.modal-body02{
	width: 90%;
}
}