@charset "UTF-8";
.pc{display: inline;}
.sp{display: none;}
#spContent{
	display: none;
}
.wave{
    height: 200px;
}
#headerContent header {
    margin: 0 auto;
    /* overflow: hidden; */
    width: 1100px;
    zoom: 1;
}
#headerContent ul {
    position: relative;
    width: 788px;
}
#btnLow div {
    overflow: hidden;
    margin: 0 auto;
    width: 1050px;
}
#btnLow ul {
    margin: 39px 0 0;
    width: 1050px;
}

#mainArea {
	left: 0;
	top: 0;
	/* position: fixed; */
	min-width: 960px;
	width: 100%;
	object-fit: cover;
    position: relative;
}

#mainPhoto {
	position: relative;
	min-width: 960px;
	width: 100%;
	object-fit: cover;
	max-height: 920px;
}
#mainTtl {
	margin-top: 0;
	/* opacity: 0; */
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	/* height: fit-content; */
	align-content: center;
    padding-top: 70px;
}

#mainTtl div {
	margin: 0 auto;
	position: relative;
	/* height: 585px; */
	/* width: 626px; */
}

#mainTtl div img {
	position: absolute;
}

#mainSun {
	left: 0;
	top: 0;
	z-index: 1;
}

#mainPop {
	left: 392px;
	top: 256px;
	z-index: 3;
}

#mainLogo {
	left: 140px;
	top: 135px;
	z-index: 2;
}
#stage2 {
	background: #fff;
	/* margin-top: 685px; */
	overflow: hidden;
	position: relative;
	min-width: 960px;
	width: 100%;
	z-index: 100;
}
.bodyContent {
	position: relative;
	margin: 0 auto;
	width: 960px;
	zoom: 1;
	z-index: 40;
}
#topContent {
	height: 1056px;
}

.intro{
    margin: 50px auto;
}
h2{
    font-size: 1.8rem;
    letter-spacing: 1px;
    text-align: center;
    display: block;
    margin-bottom: 30px;
    line-height: 65px;
}
p{
    font-size: 108%;
    letter-spacing: 0.15em;
    line-height: 2.2;
    padding: 10px;
    text-align: center;
}
.contact{
    padding: 30px 80px;
    border: solid 1px #FFF98D;
    text-align: center;
    font-size: 1.3rem;
}
.contact a{
    background-color: #FCB11F;
    color: #fff;
    padding: 20px;
    margin-top: 20px;
    display: block;
    text-decoration: unset;
    font-family: sans-serif;
}
.illust{
    margin: 50px calc(50% - 50vw) 100px;
    width: 100vw;
    text-align: center;
}
.illust img{
    width: 100%;
    max-width: 1303px;
    max-height: 533px;
    height: auto;
}
.maincontents h2{
    background: url(../img/events/bg_ttl.png) repeat-x left bottom;
    width: fit-content;
    padding: 0 30px;
    margin: 0px auto 50px;
}
.flex-wrap{
    display: flex;
    margin: 10px auto;
}
.title01,.title02,.title03,
.title04,.title05,.title06{
    position: relative;
    padding-left: 100px;
    height: 80px;
    display: block;
    align-content: center;
    font-size: 1.3rem;
}
.title01:before,.title02:before,.title03:before,
.title04:before,.title05:before,.title06:before{
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 80px;
    height: 80px;
    left: 0;
    top: 0;
}
.title01:before{
    background-image: url(../img/joinus/title01.png);
}
.title02:before{
    background-image: url(../img/joinus/title02.png);
}
.title03:before{
    background-image: url(../img/joinus/title03.png);
}
.title04:before{
    background-image: url(../img/joinus/title04.png);
}
.title05:before{
    background-image: url(../img/joinus/title05.png);
}
.title06:before{
    background-image: url(../img/joinus/title06.png);
}
.right-wrap,
.left-wrap{
    width: 50%;
    margin: auto;
}
.right-wrap p,
.left-wrap p{
    text-align: left;
    font-size: 0.8rem;
    position: relative;
    letter-spacing: 0.1em;
}
.right-wrap img,
.left-wrap img{
    width: 100%;
    height: auto;
}
.text-wrap{
    padding: 30px;
    box-sizing: border-box;
}
.icon01:before{
    position: absolute;
    content: "";
    background-image: url(../img/joinus/icon01.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 160px;
    height: 130px;
    right: 0;
    bottom: -35px;
}
.icon02:before{
    position: absolute;
    content: "";
    background-image: url(../img/joinus/icon02.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 250px;
    height: 100px;
    bottom: -45px;
    right: 0;
    left: 0;
    margin: auto;
}
.sns-wrap{
    border: solid 1px #707070;
    text-align: center;
}
.sns-wrap>img{
    max-width: 250px;
    padding-bottom: 10px;
    padding-top: 30px;
}
.sns-wrap .flex-wrap{
    gap: 15px;
    padding: 30px;
}
.sns-wrap .flex-wrap img{
    width: 100%;
}
.usage{
    max-width: 1100px;
    width: 100%;
    background-color: #F7F8F8;
    margin: 50px auto;
}
.usage .bodyContent{
    padding: 100px 0 1px;
    box-sizing: border-box;
}
.usage .contact{
    background-color: #fff;
}
.usage ul {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
    background-color: #fff;
    margin-bottom: 50px;
    padding: 30px 80px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 6px;
}
.usage ul li {
    position: relative;
    padding-left: 35px; /* アイコンの分だけ左に余白を作る */
    line-height: 1.8;
    line-height: 50px;
}
.usage ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: #FFF98D; /* 黄色の背景 */
    border-radius: 50%; /* 丸くする */
    display: flex;
    align-items: center;
    justify-content: center;
}
.usage ul li::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0; /* 直線的なチェックマーク */
}
.usage .contact a{
    align-items: center;
    display: flex;
    justify-content: center;
}
.usage .contact img{
    filter: brightness(0) invert(1);
}
.note{
    font-size: 0.6rem;
    padding-left: 15px;
    position: relative;
    line-height: 25px;
    display: inline-block;
    position: relative;
    bottom: -35px;
}
.note:before {
    content: "※";
    position: absolute;
    left: 0px;
    top: 1px;
}
#footline{
    width: 100%;
    height: 5px;
    background-color: #FFF993;
}

.joinus-btn{
    background-color: #FFF993;
    text-align: center;
    padding: 30px;
    max-width: 820px;
    margin: 50px auto 100px;
}
.joinus-btn img{
    width: 100%;
    max-width: 650px;
    height: auto;
}
.joinus-btn span{
    font-size: 2rem;
    display: block;
    padding: 20px 0;
}
.joinus-btn .flex-wrap{
    gap: 20px;
}
.joinus-btn .flex-wrap a{
    background-color: #fff;
    border-radius: 15px;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: 800;
    padding: 15px 30px;
    width: 100%;
    font-size: 1.2rem;
    color: #151414;
    position: relative;
}
.joinus-btn .flex-wrap a:before{
    content: "▶";
    color: #FCB11F;
    position: absolute;
    right: 15px;
    font-size: 1.2rem;
}
@media screen and (max-width:767px) {
    .joinus-btn span{
        font-size: 1.6rem;
    }
    .joinus-btn .flex-wrap a{
        font-size: 1rem;
    }
    .joinus-btn .flex-wrap{
        margin-top: 20px;
    }
}

@media screen and (max-width:767px) {
	.pc{display: none;}
	.sp{display: inline;}
	#spContent{
		display: block;
	}
	#logoMarche,#lavaNav{
		display: none;
	}
	#spContent {
		background: url(../../../../marche/sp/common/img/shared/bg_header_750.png) no-repeat;
		background-size: cover;
		height: 71px;
		position: fixed;
		width: 100%;
		z-index: 9999;
		top: 0;
	  }
	/* Nav items */
	:root {
		--background-navbar: #fcf99f;
	  }
	#headerContent{
		height: 71px;
		z-index: 27;
	}
	#home{
		display: block;
		width: 250px;
		height: 60px;
	}
	.menu {
		list-style: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		margin-top: 60px;
		padding: 0 0 10px 0;
		clear: both;
		background: var(--background-navbar);
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
		transform: scale(1, 0);
		transform-origin: top;
	}
	
	/* Hamburger menu button */
	.menu-btn:checked ~ .menu {
		transform: scale(1, 1);
		transform-origin: top;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	/* Hamburger menbu text */
	.menu a {
		text-decoration: none;
		font-weight: 500;
		letter-spacing: 2px;
		font-size: 16px;
		text-transform: capitalize;
		color: #313131;
		opacity: 0;
		transition: 0.5s;
	}
	
	.menu li {
		border-top: 1px solid rgb(75, 75, 75);
		padding: 15px 0;
		margin: 0 54px;
		opacity: 0;
		transition: 0.5s;
	}
	
	.menu-btn:checked ~ .menu a,
	.menu-btn:checked ~ .menu li {
		opacity: 1;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
		display: block;
	}
	
	.menu-btn {
		display: none;
	}
	
	.menu-icon {
		display: inline-block;
		position: absolute;
		cursor: pointer;
		padding: 18px 6px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		top: 13px;
		right: 10px;
		background: #fff;
		}
	
	.navicon {
		background: #ddd;
		display: block;
		height: 2px;
		width: 35px;
		position: relative;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
		}
	
	.navicon:before,
	.navicon:after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		background: #ddd;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	.navicon:before {
		top: 8px;
		}
	
	.navicon:after {
		bottom: 8px;
		}
	
	/* Hamburger Menu Animation Start */
	.menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	}
	
	.menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	}
	
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
		top: 0;
	}
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		bottom: 0;
	}
	
	.menu-btn:checked ~ .menu-icon .navicon {
		background: rgba(0, 0, 0, 0);
		transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	/* Hamburger Menu Animation End */
	#headerContent,#headerBlue,.wave{
		min-width: unset;
	}
	#headerContent header{
		width: 100%;
	}
	#btnLow{
		display: none;
	}
	#gnavi{
		display: block;
		margin-bottom: 20px;
	}
	/* gnavi */
	#gnavi {
		margin-bottom: 20px;
	}

	#gnavi .boxBtns {
		margin: 0 auto;
		overflow: hidden;
		/*width: 291px;*/
		width: 90.625%;
		zoom: 1;
	}

	#gnavi .boxBtns:after {
		content: ".";
		display: block;
		clear: both;
		height: 0px;
		visibility: hidden;
	}

	#gnavi .boxBtns div {
		width: 100%;
	}

	#gnavi .boxBtns li {
		float: left;
		/*margin: 0 3px 3px 0;*/
		margin-bottom: 1.2%;
		margin-right: 1.2%;
		width: 49.4%;
	}

	#gnavi .boxBtns li a img {
		display: block;
		height: auto;
		width: 100%;
	}

	#gnavi .boxBtns li:nth-child(2) {
		margin-right: 0;
	}

	#gnavi .boxBtns li:nth-child(3) {
		margin-bottom: 0;
	}

	#gnavi .boxBtns li:nth-child(4) {
		margin-right: 0;
		margin-bottom: 0;
	}
	#bodyContent{
		width: 100%;
		min-width: unset;
		padding-top: 90px;
	}
	#headerContent ul {
		width: auto;
	}
	#btnLow div{
		width: 100%;
	}
    #mainArea,#stage2,#mainPhoto{
        min-width: unset;
    }
    #mainPhoto {
        z-index: 27;
    }
    #mainLogo {
        max-width: 150px;
        height: auto;
    }
    .bodyContent{
        width: 100%;
    }
    #mainTtl{
        z-index: 30;
    }
    h2{
        font-size: 1rem;
        font-weight: 800;
        line-height: 45px;
    }
    p{
        font-size: 90%;
    }
    .contact{
        padding: 20px;
        font-size: 1rem;
    }
    .contact a{
        padding: 10px;
    }
    .maincontents h2{
        font-size: 1.3rem;
        margin: 0 auto 30px;
    }
    .text-wrap{
        padding: 20px;
    }
    .illust{
        width: 100%;
        margin: 50px auto 100px;
    }
    .flex-wrap{
        flex-wrap: wrap;
        margin-top: 50px;
    }
    .right-wrap, .left-wrap {
        width: 100%;
    }
    .icon01:before {
        width: 140px;
        height: 110px;
    }
    .reverse{
        flex-wrap: wrap-reverse;
    }
    .sns-wrap .flex-wrap{
        flex-wrap: nowrap;
        margin-top: 10px;
    }
    .usage ul{
        padding: 20px;
        font-size: 0.8rem;
        letter-spacing: 0px;
    }
    .usage ul li:nth-child(4n){
        line-height: 30px;
    }
    .usage .bodyContent{
        padding: 50px 0;
    }
}