#header {
	display: none;
}
#main {
}
/* --------------------------------------------------- */
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
	background-color: transparent;
    z-index: 9999999;
    text-align: center;
    color: #111;
    display: block;
}
#splash-logo {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, 0%);
    width: auto;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 1.9em;
    letter-spacing: 9px;
    line-height: 200%;
    color: #111;
}
#splash-logo {
	max-width: 400px;
	width: 60%;
}
#splash-logo span {
	display: block;
	text-align: center;
	font-size: 1.5em;
}

@media screen and (max-width: 480px) {
	#splash-logo {
		width: 100%;
        font-size: 1.2em;
		letter-spacing: 7px;
		top: 40%;
    }
	#splash-logo img {
        display: block;
        max-width: 400px;
        width: 60%;
        margin: 0 auto;
    }
}
/*========= 画面遷移のためのCSS ===============*/
.splashbg{
    display: none;
}
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 50%;
    height: 100vh;
    top: 0;
	right: 0;
    transform: scaleY(0);
    background-color: #242424;
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}
@keyframes PageAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}
#container{
	opacity: 0;
}
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
/* --------------------------------------------------- */
#mainvisual {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	justify-content: space-between;
}

#mainvisual .shiro,
#mainvisual .kuro {
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: relative;
	background-repeat: no-repeat;
}
#mainvisual .shiro {
	background-image: url("../images/top/mv-shiro.jpg");
	background-position: right bottom;
	background-size: auto 100%;
}
#mainvisual .kuro {
	background-image: url("../images/top/mv-kuro.jpg");
	background-position: left bottom;
	background-size: auto 100%;
}
#mainvisual .shiro p,
#mainvisual .kuro p {
	position: absolute;
	width: 200%;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	transform: rotate(0.03deg);
	font-size: 1.9em;
	letter-spacing: 9px;
	line-height: 200%;
	top: 25%;
}
#mainvisual .shiro p img,
#mainvisual .kuro p img {
	display: block;
	max-width: 400px;
	width: 60%;
	margin: 0 auto;
}
#mainvisual .shiro p span,
#mainvisual .kuro p span {
	display: block;
	text-align: center;
	font-size: 1.5em;
}
#mainvisual .shiro p {
	color: #111;
	left: 0;
}
#mainvisual .kuro p {
	color: #fff;
	right: 0;
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 480px) {
	#mainvisual .shiro p,
    #mainvisual .kuro p {
        font-size: 1.2em;
		letter-spacing: 7px;
		top: 40%;
    }
}
/* --------------------------------------------------- */
#sec01 {
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
#sec01 div {
	padding: 8% 5%;
	position: relative;
	z-index: 1;
}
#sec01 div .ttl {
	font-size: 1.4em;
	font-weight: 600;
	margin-bottom: 30px;
	line-height: 180%;
	letter-spacing: 2px;
}
#sec01 div p {
	max-width: 540px;
	width: 100%;
}
#sec01 span.img {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	width: 50%;
	height: 100%;
	background: url("../images/top/img01.jpg") no-repeat left bottom;
	background-size:cover;
}
#sec01 span.img::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,1) 80%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 480px) {
	#sec01 div .ttl {
		font-size: 1.1em;
		line-height: 170%;
		margin-bottom: 20px;
	}
	#sec01 div p {
		line-height: 170%;
	}
}
/* --------------------------------------------------- */
#sec02,
#sec03 {
	width: 100%;
	height: 900px;
	position: relative;
	margin: 7% auto;
}
#sec02 {
}
#sec03 {
	color: #fff;
}
#sec02 .ph,
#sec03 .ph {
	display: block;
	width: 61%;
	height: 100%;
	position: absolute;
	z-index: 0;
	top: 0;
}
#sec02 .ph {
	background: url("../images/top/ph01.jpg") no-repeat center;
	background-size: cover;
	left: 0;
}
#sec03 .ph {
	background: url("../images/top/ph02.jpg") no-repeat center;
	background-size: cover;
	right: 0;
}
#sec02 span.square,
#sec03 span.square {
	display: block;
	position: absolute;
	z-index: 1;
	max-width: 850px;
	width: 60%;
	top: 50%;
}
#sec02 span.square {
	right: 0;
	transform: translate(0%, -50%) rotate(-25deg);
}
#sec03 span.square {
	left: 0;
	transform: translate(0%, -50%) rotate(-25deg);
}
#sec02 span.square > span,
#sec03 span.square > span {
	display: block;
	width: 100%;
	padding-top: 100%;
}
#sec02 span.square > span {
	background-color: #fff;
}
#sec03 span.square > span {
	background-color: #111;
}
#sec02 .block,
#sec03 .block {
	position: relative;
	z-index: 2;
	max-width: 780px;
	width: 70%;
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%);
}
#sec02 .block {
	right: 0;
}
#sec03 .block {
	left: 0;
}
#sec02 .block .ttl,
#sec03 .block .ttl {
	font-weight: 700;
	font-size: 1.6em;
	line-height: 5em;
}
#sec02 .block .ttl {
	text-align: right;
}
#sec03 .block .ttl {
}
#sec02 .block .ttl span,
#sec03 .block .ttl span {
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 300;
	font-size: 7em;
	letter-spacing: .2em;
}
#sec02 .block .ttl span {
	text-align: right;
	margin-right: -.2em;
}
#sec03 .block .ttl span {
}
#sec02 .block .txt,
#sec03 .block .txt {
	max-width: 540px;
	width: 90%;
	margin: 0 auto 30px;
}
#sec02 .block .txt {
}
#sec03 .block .txt {
}
#sec02 .block .txt.bottom,
#sec03 .block .txt.bottom {
	margin: 0 auto 50px;
}
#sec02 .block .btn-style01,
#sec03 .block .btn-style01 {
	margin: 50px auto 0;
}

@media screen and (max-width: 1100px) {
	#sec02,
    #sec03 {
		height: auto;
    }
	#sec03 {
		background-color: #111;
	}
	#sec02 .ph,
    #sec03 .ph {
        width: 100%;
        height: 300px;
        position: static;
    }
	#sec02 span.square,
    #sec03 span.square {
		display: none;
    }
	#sec02 .block,
    #sec03 .block {
        max-width: 780px;
        width: 80%;
        position: static;
        transform: translate(0%, 0%);
		margin: 0 auto;
		padding: 0 0 60px;
    }
	#sec02 .block .ttl,
    #sec03 .block .ttl {
        font-size: 1.6em;
        line-height: 3.5em;
		margin-top: -15px;
    }
	#sec02 .block .ttl span,
    #sec03 .block .ttl span {
        font-size: 5em;
    }
	#sec02 .block .txt,
    #sec03 .block .txt {
        max-width: 400px;
		line-height: 190%;
    }
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 480px) {
	#sec02 {
        margin: 7% auto 0;
    }
	#sec03 {
        margin: 0 auto 7%;
    }
	#sec02 .block .ttl,
    #sec03 .block .ttl {
        font-size: 1.4em;
        line-height: 2.8em;
    }
	#sec02 .block .ttl span,
    #sec03 .block .ttl span {
        font-size: 4em;
    }
	#sec02 .block .txt,
    #sec03 .block .txt {
		width: 100%;
		line-height: 180%;
    }
}
/* --------------------------------------------------- */
#sec04 {
	max-width: 1400px;
	width: 100%;
	margin: 0 auto 150px;
}
#sec04 .inner {
	width: 96%;
	display: flex;
	justify-content: center;
	margin: 0 auto 40px;
}
#sec04 .box {
	width: 29.33%;
	margin: 0 2% 30px;
}
#sec04 .box a {
}
#sec04 .box a span {
	display: block;
	line-height: 140%;
	font-weight: 500;
}
#sec04 .box a .img {
	position: relative;
    width: 100%;
    padding-top: 100%;
	margin-bottom: 10px;
}
#sec04 .box a .img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: cover;
	z-index: 0;
}
#sec04 .box a .img::before,
#sec04 .box a .img::after {
	content: "";
	position: absolute;
	z-index: 1;
}
#sec04 .box a .img::before {
	width: auto;
	height: 5px;
	background-color: rgba(228,228,228,.35);
	left: 0;
	right: 0;
	bottom: 0;
}
#sec04 .box a .img::after {
	z-index: 2;
	width: 0;
	height: 5px;
	background-color: rgba(228,228,228,1);
	left: 0;
	bottom: 0;
	transition: .3s;
}
#sec04 .box a:hover .img::after {
	width: 100%;
	right: 8px;
}
#sec04 .box a .ttl1 {
}
#sec04 .box a .ttl2 {
}
#sec04 .box a .time {
	font-size: 11px;
	font-weight: 400;
}
@media screen and (max-width: 1100px) {
	#sec04 {
        margin: 0 auto 100px;
    }
	#sec04 .inner {
        margin: 0 auto 20px;
    }
}
@media screen and (max-width: 680px) {
	#sec04 .inner {
		flex-wrap: wrap;
        margin: 0 auto 20px;
    }
    #sec04 .box {
        width: 46%;
        margin: 0 2% 30px;
    }
}
@media screen and (max-width: 480px) {
	#sec04 {
        margin: 0 auto 50px;
    }
}
/* --------------------------------------------------- */
#sec05 {
	margin-bottom: 150px;
	display: flex;
	justify-content: space-between;
}
#sec05 .white,
#sec05 .black {
	width: 50%;
	/* padding: 50px; */
  padding: 20px;
}
#sec05 .white {
	background-color: #f9f9f9;
}
#sec05 .black {
	background-color: #111;
}
#sec05 .black .ttl-style01 {
	color: #fff;
}
#sec05 .white .calendar,
#sec05 .black .calendar {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
    padding: 30px;
}

#sec05 .black .calendar--black{
  background-color: #fff;
}
@media screen and (max-width: 1100px) {
	#sec05 {
        margin-bottom: 100px;
    }
	#sec05 .white,
    #sec05 .black {
        padding: 30px;
    }
}
/* @media screen and (max-width: 680px) {
	#sec05 {
		display: block;
	}
	#sec05 .white,
    #sec05 .black {
		width: 100%;
    }
} */

@media screen and (max-width: 768px) {
	#sec05 {
		display: block;
	}
	#sec05 .white,
    #sec05 .black {
		width: 100%;
    }
}


@media screen and (max-width: 480px) {
	#sec05 {
        margin-bottom: 50px;
    }
	#sec05 .white,
    #sec05 .black {
        padding: 25px 15px 15px;
    }
}
/* --------------------------------------------------- */
#sec06 {
	max-width: 1700px;
	width: 100%;
	margin: 0 auto;
}
#sec06 .block {
	display: flex;
	justify-content: space-between;
	margin-bottom: 90px;
}
#sec06 .block .ph {
	width: 60%;
	position: relative;
	padding-top: 450px;
}
#sec06 .block .ph img {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: cover;
}
#sec06 .block dl {
	width: 40%;
	padding: 5%;
}
#sec06 .block dt {
	font-size: 1.2em;
	font-weight: 600;
	line-height: 160%;
	margin-bottom: 20px;
}
#sec06 .block dd {
	line-height: 180%;
}
#sec06 .block2 {
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto 60px;
}
#sec06 .block2 .box {
	width: 47.5%;
	margin-bottom: 30px;
}
#sec06 .block2 .box .ph {
	margin-bottom: 15px;
}
#sec06 .block2 .box p {
	line-height: 160%;
}
@media screen and (max-width: 1100px) {
	#sec06 .block {
        margin-bottom: 60px;
    }
	#sec06 .block .ph {
        width: 55%;
        padding-top: 380px;
    }
    #sec06 .block dl {
        width: 45%;
        padding: 4%;
    }
}
@media screen and (max-width: 680px) {
	#sec06 .block {
		width: 95%;
        margin: 0 auto 30px;
		display: block;
		position: relative;
		padding-top: 280px;
		border: #111 2px solid;
    }
	#sec06 .block .ph {
        width: 100%;
        padding-top: 280px;
		position: absolute;
		top: 0;
		left: 0;
    }
    #sec06 .block dl {
        width: 100%;
        padding: 25px;
    }
	#sec06 .block2 {
        display: block;
        margin: 0 auto 20px;
    }
    #sec06 .block2 .box {
        width: 100%;
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 480px) {
	#sec06 .block {
		padding-top: 160px;
    }
	#sec06 .block .ph {
        padding-top: 160px;
    }
	#sec06 .block2 .box {
        margin-bottom: 20px;
    }
	#sec06 .block2 .box .ph {
        margin-bottom: 10px;
    }
}
/* --------------------------------------------------- */
#sec07 {
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 480px) {
}
/* --------------------------------------------------- */