@charset "UTF-8";




/*----------------------------------------

common

----------------------------------------*/

.en {
    font-family: "EB Garamond", serif;
	font-weight: 400;

}

.jp {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}

.bg_parallax {
	position: relative;
}

.bg_parallax:before {
    display: block;
	content: '';
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/bg_parallax.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.body_wrap {
	position: relative;
	z-index: 1;
}

main {
	overflow: hidden;
}

#main_content .con {
	padding: 80px 5%;
}


/* .parallax_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  z-index: 0; 
  background-image: url(../img/common/bg_parallax.jpg);
  background-size: cover;
  background-position: center;
  margin-top: calc(env(safe-area-inset-top) * -1);
  pointer-events: none;
} */


/* #parallax {
	position: relative;
	z-index: 1;
    width: 100%;
    height: 100%;
}

#parallax:before {
    display: block;
	content: '';
	position: fixed;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/bg_parallax.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
} */


@media (min-width: 768px) {

	#main_content .con {
		padding: 80px 5% 120px;
	}

}


@media (min-width: 1024px) {

}




/*----------------------------------------

#page_kv

----------------------------------------*/

#page_kv .bg_img {
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#page_kv .filter {
	padding: 20vw 0;
	background: rgba(0,0,0,0.4);
}

#page_kv .h1_ttl span {
	display: block;
	text-align: center;
	font-size: 10vw;
	line-height: 1;
	color: #ffffff;
}

#page_kv .h1_ttl h1 {
	text-align: center;
	font-size: 5vw;
	color: #ffffff;
}


@media (min-width: 768px) {

	#page_kv .filter {
		padding: 10vw 0;
	}

	#page_kv .h1_ttl span {
		font-size: 8vw;
	}
	
	#page_kv .h1_ttl h1 {
		font-size: 4vw;
	}

}


@media (min-width: 1024px) {

}




/*----------------------------------------

.page_common

.sec_ttl

----------------------------------------*/

.page_common section {
	margin: 0 0 80px;
}

.page_common section:last-of-type {
	margin: 0;
}

.page_common .sec_ttl .h2_ttl h2 {
	position: relative;
	border-bottom: 5px solid #ffffff;
	padding: 0 0 20px;
	font-size: 1.5em;
	font-weight: 700;
	color: #ffffff;
}

.page_common .sec_ttl .h2_ttl h2::before {
	display: block;
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 20%;
	height: 5px;
	background: #f9b700;
}


@media (min-width: 768px) {

	.page_common section {
		margin: 0 0 120px;
	}

	.page_common .sec_ttl .h2_ttl h2 {
		font-size: 2em;
	}

}


@media (min-width: 1024px) {

	.page_common .sec_ttl .h2_ttl h2 {
		font-size: 2.5em;
	}

}




/*----------------------------------------

#sns_fixed

----------------------------------------*/

#sns_fixed .con {
    padding: 80px 5%;
    background: #0D0D0D;
}

#sns_fixed .h2_ttl {
    margin: 0 0 80px;
}

#sns_fixed .h2_ttl span {
    display: block;
    text-align: center;
    font-size: 8vw;
    color: #ffffff;
}

#sns_fixed .h2_ttl h2 {
    text-align: center;
    font-size: 4vw;
    color: #ffffff;
}

#sns_fixed .sns_list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}

#sns_fixed .sns_list ul li {
    flex-basis: 47.5%;
    margin: 0 0 80px;
}

#sns_fixed .sns_list ul li:last-of-type {
    margin: 0;
}

#sns_fixed .sns_list ul li .account_name i {
    display: block;
    margin: 0 0 10px;
    text-align: center;
    font-size: 2em;
    color: #ffffff;
}

#sns_fixed .sns_list ul li .account_name h3 {
    text-align: center;
    font-size: 0.9em;
    line-height: 1.6;
    color: #ffffff;
}

#sns_fixed .sns_list ul li .account_name span {
    display: none;
    text-align: center;
    font-size: 1em;
    color: #ffffff;
}

#sns_fixed .sns_list ul li .mockup {
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
}

#sns_fixed .sns_list ul li .mockup img {
    display: block;
    width: 100%;
    height: auto;
}

#sns_fixed .sns_list ul li .follow_link a {
    position: relative;
    display: block;
    border: solid 1px #ffffff;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 0.9em;
    color: #ffffff;
    transition: all 0.3s;
}

#sns_fixed .sns_list ul li .follow_link a:hover {
    color: #0D0D0D;
    background: #ffffff;
}

#sns_fixed .sns_list ul li .follow_link a::after {
    position: absolute;
    display: block;
    font: var(--fa-font-solid);
    content: '\f08e';
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}


@media (min-width: 768px) {

    #sns_fixed .con {
        padding: 120px 5%;
    }

    #sns_fixed .h2_ttl span {
        font-size: 4vw;
    }

    #sns_fixed .h2_ttl h2 {
        font-size: 2vw;
    }

    #sns_fixed .sns_list ul li {
        flex-basis: 21.25%;
        margin: 0;
    }
    
}


@media (min-width: 1024px) {

    #sns_fixed .con {
        padding: 120px 10%;
    }
    
}




/*----------------------------------------

#sponsor_fixed

----------------------------------------*/

#sponsor_fixed .con {
    padding: 80px 5%;
    background: #191919;
}

#sponsor_fixed .h2_ttl {
    margin: 0 0 40px;
}

#sponsor_fixed .h2_ttl span {
    display: block;
    text-align: center;
    font-size: 8vw;
    color: #ffffff;
}

#sponsor_fixed .h2_ttl h2 {
    text-align: center;
    font-size: 4vw;
    color: #ffffff;
}

#sponsor_fixed .sponsor_list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#sponsor_fixed .sponsor_list ul li {
    flex-basis: 47.5%;
    margin: 0 0 5%;
}

#sponsor_fixed .sponsor_list ul li a {
    display: block;
}

#sponsor_fixed .sponsor_list ul li a img {
    display: block;
    width: 100%;
    height: auto;
    transition: all 0.3s;
}

#sponsor_fixed .sponsor_list ul li a:hover img {
    opacity: 0.8;
}


@media (min-width: 768px) {

    #sponsor_fixed .con {
        padding: 120px 5%;
    }

    #sponsor_fixed .h2_ttl span {
        font-size: 4vw;
    }

    #sponsor_fixed .h2_ttl h2 {
        font-size: 2vw;
    }

    #sponsor_fixed .sponsor_list ul::after {
        display: block;
        content: '';
        width: 32%;
    }

    #sponsor_fixed .sponsor_list ul li {
        flex-basis: 32%;
        margin: 0 0 2%;
    }

}


@media (min-width: 1024px) {

    #sponsor_fixed .con {
        padding: 120px 10%;
    }

}