@charset "UTF-8";

@import url(base.css);

body.active {
  height: 100%;
  overflow: hidden;
}


img {
	display: inline-block;
	max-width:100%;
	max-height: 100%;
    vertical-align: middle;}

html{ scroll-behavior: smooth;}

.pc {display: none !important;}
p {font-size: 3.5vw;}

img.fit {
    width: 100%;
    height: auto;}

/*-------------------------------------------------
	++ container
-------------------------------------------------*/
#container {
	margin:0 auto;
	position:relative;
	min-width:100%;}
.cInner {
	padding: 5vw 3vw;
    width: 100%;
    position: relative;}

/*-------------------------------------------------
	++ HEADER
-------------------------------------------------*/
#headerBox {
    width: 100%;

    background-image: url(../img/sp/title_bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;} 
.headerInner {
    padding: 5vw 3vw 0 3vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;}
.headerImg {width: 70%;margin: 2vw auto;}
.headerImg img {width: 100%;}
.headerItem {width: 100%;}
.headerItem div {margin-top: 3vw;}

/*-------------------------------------------------
    background
-------------------------------------------------*/
#bg_about {
    width: 100%;
    background: url(../img/bg.jpg) no-repeat center center;
    background-size: cover;}
#bg_map {
    width: 100%;
    background: url(../img/map_bg.jpg) repeat center center;}
#bg_prize {
    width: 100%;
    background:#f4f1df url(../img/prize_bg.png) no-repeat bottom right;
    background-size: contain;}
#bg_30th {
    width: 100%;
    background:#f4f1df url(../img/30th_bg.jpg) repeat center center;
    background-size: 30%;
    border-radius: 20px;
    padding: 5vw 3vw;}

/*-------------------------------------------------
    others
-------------------------------------------------*/
.aboutBox {
    align-items: center;
    background: linear-gradient(45deg, #98def4 0%, #98def4 50%, #b0e9f7 50%, #b0e9f7 100%);
    display: flex;
    width: 100%;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;}
h2.aboutDetail1 {order: 1; width: 120%;margin: 0 calc(0% - 10px);}
p.aboutDetail2 {
    order: 2;
    font-weight: bold;
    text-align: left;
    font-size: 3.8vw;
    margin-top: 10px;
    line-height: 1.3em;
    width: 75%;}
.aboutDetail3 {order: 4;width: 100%;}
.aboutDetail3 p {font-size: 3.5vw;margin-left: 10px;margin-top: 0;font-weight: bold;}
.aboutImg {order: 3;width: 23%;}

.aboutBox2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;}
.aboutMore {order: 1; width: 20%;}
.aboutTxt {
    order: 2;
    width: 77%;
    font-weight: bold;
    text-align: left;
    font-size: 3.8vw;
    line-height: 1.3em;}
.aboutImg2 {
    order: 3;
    width: 100%;
    margin: 10px 0 0 0;}

.mapBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;}
.mapItem {width: 100%;order: 2;}
.mapplace {
    background-color: #fff;
    border-radius: 8px;
    padding: 0;
    height: 50px;
    display: flex;
    margin-bottom: 5px;}
.place {width: 35vw;font-size: 4vw;font-weight: bold;line-height: 50px;padding-left: 15px;}
.day {width: 35vw;font-size: 4vw;font-weight: bold;line-height: 50px;}
.detail {
    width: 23vw;
    background-color: #ff3e63;
    color: #fff;
    font-size: 4.5vw;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: auto;}
.reserve {
    width: 23vw;
    background-color: #878787;
    color: #adadad;
    font-size: 3.5vw;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: auto;}
.mapImg {width: 100%;order: 1;margin-bottom: 10px;}
.map_junkaichu {margin: 10px 0 48vw 0;}
.map_supahosu {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60%;}

.prizeBox {
    align-items: center;
    background: linear-gradient(45deg, #98def4CC 0%, #98def4CC 50%, #b0e9f7CC 50%, #b0e9f7CC 100%);
    display: flex;
    width: 100%;
    border-radius: 20px;
    justify-content: space-between;
    align-items: flex-end; 
    flex-wrap: wrap;
    padding: 0px;
    position: relative;}
.prizeTtlBox {
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px;
    margin: 25px 0 15px 0;}
.prizeTtl {
    width: 80%;
    margin: 0px auto;}
.prizeTtl img {width: 100%;}
.prizeTtl p {
    font-size: 3.5vw;
    font-weight: bold;
    padding-top: 15px;}
.prizeImg {
    width: 70%;
    margin: 0px auto;}

.prizeBox2 {
    width: 100%;
    padding: 0 3vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}
.prizeItem {width: 48%;}
.prizeItemImg {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 5px;}
.prizeItem p {
    font-size: 3.2vw;
    line-height: 1.3em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;}
.prizemore {
    width: 100%;
    font-size: 8vw;
    line-height: 1em;
    padding: 0 5vw 2vw 0;
    margin-top: -3vw;
    font-weight: bold;
    color: #fff;
    text-align: right;
    font-family: 'メイリオ', 'Meiryo', sans-serif;}

.bg_30thBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;}
.bg_30thTtl {width: 100%;}
.bg_30thTtl img {width: 100%;}
.bg_30thDetail {
    width: 100%;
    font-size: 4.3vw;
    color: #231815;
    font-weight: bold;
    line-height: 1.5em;
    -webkit-text-stroke: 4px #fff;
    text-stroke: 4px #fff;
    paint-order: stroke;
    padding-top: 15px;}
.bg_30thImg {width: 100%;margin: 3vw auto 0 auto;text-align: center;}
.bg_30thImg img {width: 60%;}

.profileBox {
    background-color: #b0e9f7;
    border-radius: 20px;
    padding: 5vw 3vw;
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;}
.profileDetail {width: 100%;}
.profileDetail .ttl {width: 100%;margin-bottom: 10px;}

.profileDetailBox {
    width: 100%;
    background: url(../img/sp/profile_bg.png) no-repeat center center;
    background-size: 100%;
    padding: 10vw 2vw 6vw 3vw;
    display: flex;}

.profilelist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;}
.profilelist dt,
.profilelist dd {
    box-sizing: border-box;
    margin-bottom: 10px;}
.profilelist dt {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 38%;
    height: 2em;
    line-height: 2em;
    padding: 0px;
    background-color: #0068b6;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 3.5vw;}
.profilelist dd {
    display: flex;
    align-items: center;
    width: 60%;
    line-height: 1.2em;
    margin-left: 0;
    padding: 0px;
    color: #231815;
    font-weight: bold;
    font-size: 3.8vw;}
.profileImg {
    width: 100%;
    display: flex;
    justify-content: center;}
.profileImg img {width: 40%;}

.whatsBox {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    margin-bottom: 50px;}
.whatsBoxImg {
    width: 35%;
    position: absolute;
    right: 1vw;
    bottom: 5vw;}
.whatsBoxTtl {
    width: 100%;
    background-color: #0068b6;
    padding: 3vw 0;
    display: flex;
    align-items: center;
    justify-content: center;}
.whatsBoxTtl img {width: 60%;}
.whatsBoxDetail {
    width: 100%;
    background-color: #ffe860;
    padding: 3vw 0 3vw 3vw;
    color: #0068b6;
    font-weight: bold;
    line-height: 1.3em;
    font-size: 3.3vw;
    display: flex;
    align-items: center;}

.linkTtl {
    width: 100%;
	color: #231815;
	font-size: 4.8vw;
    line-height: 1.4em;
    font-weight: bold;
    text-align: center;
	display: flex;
	align-items: center;}
.linkTtl:before, .linkTtl:after {
	content: "";
	flex-grow: 1;
	border-top: 4px dotted #88d1ff;
	display: block;}
.linkTtl:before {margin-right: .8em;}
.linkTtl:after {margin-left: .8em;}

.linkBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2rem;}
.linkBox li {
    margin: 0 auto;
    text-align: center;}
.logoMG49 {margin: 10vw 0 20vw 0;}
.logoMG40 {margin: 8vw 0;}
.logoMG50 {margin: 10vw 0;}
.logoMG10 {margin: 10px 0;}
.logoMGb10 {margin-bottom: 10vw;}
.logoW45 {width: 10vw;}
.logoW300 {width: 40vw;}
.logoW240 {width: 40vw;}
.logoW200 {width: 40vw;}
.logoW170 {width: 30vw;}
.logoW140 {width: 25vw;}
.logoW110 {width: 20vw;}

/*-------------------------------------------------
    FOOTER
-------------------------------------------------*/
footer {
    position: relative;
    padding: 20px 0;
    background-color: #0068b6;
    color: #fff;
    text-align: center;}
footer .logo {
    width: 230px;
    text-align: center;
    margin: 10px auto 20px auto;}
footer .logo img {width: 100%;}
footer .copyright {
    font-size: 3.8vw;
    text-align: center;
    line-height: 1.3em;}
.page-top {
    position: fixed;
    bottom: 0;
    right: 5px;
    width: 130px;}
.page-top img {width: 100%;}




}