@charset "utf-8";

#top {font-family: 'Noto Serif JP', sans-serif;}
.mv {position: relative;}
.mv img {width: 100%;}

.part01 {background: #231815;}
.part01 ul {display: flex; justify-content: space-between;padding: 15px 0;}
.part01 ul li {width: 100%;border-left: 1px solid #fff;text-align: center;font-size: 2rem; letter-spacing: 0.15em; line-height: 1.25; display: grid; align-items: center;}
.part01 ul li:last-of-type {border-right: 1px solid #fff;}
.part01 ul li a {color: #fff;}
.part01 ul li a:hover {opacity: 0.5;}
@media only screen and (max-width: 1600px) {
	.part01 ul li {font-size: 16px;}
}
@media only screen and (max-width: 768px) {
	.part01 ul {padding: 0; flex-wrap: wrap;}
	.part01 ul li {width: 100%; border: 0; border-bottom: 1px solid #fff;}
	.part01 ul li:last-of-type {border: 0;}
	.part01 ul li a {padding: 4vw 0; display: block;}
}

.part02 {padding: 80px 0 400px;}
.part02 div[class^="row"]:not(:last-of-type) {margin-bottom: 255px;}
.part02 div[class^="row"] .img {position: relative;}
.part02 div[class^="row"] .img figure {position: relative; width: 76.05%;}
.part02 div[class^="row"] .img figure img {width: 100%;}
.part02 div[class^="row"] .img figcaption {position: absolute; bottom: 5px; left: 5px; font-size: 1rem;}
.part02 a {position: relative; width: 860px; height: 400px;font-size: 18px; background: url(../images/top/bg.jpg) no-repeat; background-size: cover; position: absolute; left: 45%; bottom: -150px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around;}
.part02 a .txt-in {padding: 0 40px;}
.part02 a .txt-in h3 {font-size: 3.5rem; margin-bottom: 2rem; line-height: 1.7; font-weight: 600; letter-spacing: 0.1em;}
.part02 a .txt-in h3 span {margin-left: 10px;}
.part02 a .txt-in p {font-size: 1.5rem; line-height: 2.33; letter-spacing: 0.05em;}
.part02 a .more {font-family: "EB Garamond", serif; display: block; line-height: 1; padding: 0 69px 0 40px; height: 40px; text-align: center; background: #231815; color: #fff !important; position: absolute; bottom: 0; right:0; display: flex; align-items: center; justify-content: space-around; letter-spacing: 0.1em; }
.part02 a .more::after {position: absolute; content: ''; top: calc(50% - 4px); right: 40px; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: all 0.5s;}
.part02 a:hover .more::after {right: 20px;}
.part02 a:hover {opacity: 0.8;}
.part02 div[class^="row"]:nth-of-type(2n) figure {margin-left: auto; margin-right: 0;}
.part02 div[class^="row"]:nth-of-type(2n) figure figcaption {left: auto; right: 5px;}
.part02 div[class^="row"]:nth-of-type(2n) a {left: auto; right: 45%;}
.part02 .row03 a .txt-in h3 img {max-width: 339px; width: 100%;}

.part02 a.coming {pointer-events: none;}
.part02 a.coming .more::after {
	display: none !important;
}
.part02 a.coming .more {
	padding: 0 40px;
	opacity: 0.8;
}

.bot-nav .container {max-width: 1460px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.bot-nav .container li {width: 28%; margin-bottom: 10%;}
.bot-nav .container li a {display: block; position: relative; transition: all 0.5s; letter-spacing: 0.1em; color: #000 !important;}
.bot-nav .container li a:hover {opacity: 0.6;}
.bot-nav .container li a figure {position: relative; max-width: 399px; width: 100%;}
.bot-nav .container li a figure img {height: auto;}
.bot-nav .container li a figure figcaption {position: absolute; top: 5px; right: 5px; font-size: 0.9rem;}
.bot-nav .container li a .txt {background: url(../images/top/bnr-bg.jpg) no-repeat center center; background-size: 100% 100%; text-align: center; display: flex; align-items: center; justify-content: space-around; max-width: 320px; width: 100%; height: 125px; position: absolute; left: -50px; bottom: -45px; font-size: 3rem;}
.bot-nav .container li a .txt p span:nth-of-type(2) {max-width:16em; padding: 0 40px; text-align: center; display: block; font-size: 1.8rem; background: #231815; color: #fff; position: absolute; right: 0; bottom: 0;}
.bot-nav .container li.coming {opacity: 0.8;pointer-events: none;}

.main-cap {padding: 0;}



/* MEDIA */
@media only screen and (max-width: 1740px) {	
	.part02 a {left: 48vw; width: 50vw; height: 25vw; background-size: 100% 100%;}
	.part02 div[class^="row"]:nth-of-type(2n) .txt {left: auto; right: 48vw;}
}

@media only screen and (max-width: 1600px) {
	.part02 {padding: 5vw 0 25vw;}
	.part02 div[class^="row"]:not(:last-of-type) {margin-bottom: 20vw;}
	.part02 a {bottom: -15vw;}
	.part02 a .txt-in {padding: 35px;}
	.part02 a .txt-in h3 {font-size: 2vw;}	
	.part02 a .txt-in p {font-size: 1vw;}
	.part02 .row03 a .txt-in h3 img {height: 3vw; width: auto; max-width: unset;}

	.bot-nav .container {max-width: 1000px;}
	.bot-nav .container li {width: 30%;}
	.bot-nav .container li a .txt {font-size: 1.5vw; height: 60px; max-width: 280px; left: -20px;}	
	.bot-nav .container li a .txt p span:nth-of-type(2) {font-size: 0.8vw; padding: 0 30px; background-position: right 10px center;}
}

@media only screen and (max-width: 1080px) {
	.bot-nav .container li a .txt{ font-size: 2vw; position: static;}
	.bot-nav .container li a .txt p span:nth-of-type(2){ left: 0; margin: 0 auto;bottom: -16px;font-size: 1.4rem;}
	.part02 a {font-size: 16px;}
}

@media only screen and (max-width: 768px) {
	.part02 div[class^="row"]:not(:last-of-type) {margin-bottom: 30vw;}
	.part02 div[class^="row"] .img figure {width: 100%;}	
	.part02 .row02 .img figure { width: 100%;}
	.part02 a .txt-in h3 span img {height: 6vw;}
	.part02 a {position: static; width: 100vw; height: auto; min-height: 200px;}
	.part02 a .txt-in h3 {font-size: 4vw; margin-bottom: 1rem;}
	.part02 a .txt-in p {font-size: 3vw;line-height: 2;}
	.part02 a .txt-in p br {display: none;}
	.part02 .more {top: 100%; left: 0; right: 0; margin: 0 auto; height: 34px; padding: 0;}
	.part02 .row03 a .txt-in h3 img {height: 8vw; width: auto; max-width: unset;}
	.bot-nav .container li {width: 49%;}
	.bot-nav .container li a .txt {font-size: 3vw;}
	.bot-nav .container li a .txt p span:nth-of-type(2){bottom: -8px;}
}