@charset "utf-8";

#top { max-width: 1920px; width: 100%; margin-left: auto; margin-right: auto; overflow: hidden;}
.shadow{ text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;}
.mv {position: relative;}
.mv .mv-txt {position: absolute; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 5%; width: 41%; max-width: 566px; z-index: 1;}
.mv img {width: 100%; height: auto;}

.part01 {background: #000; color: #fff;}
.part01 ul{ display: flex;flex-wrap: wrap;justify-content: space-between;padding: 15px 0;align-items: center;}
.part01 ul li{ width: 36%;border-left: 1px solid #fff;text-align: center;font-size: 2rem; letter-spacing: 0.1em;}
.part01 ul li:last-child{width: 27.5%;}
.part01 ul li span{ font-size: 3rem;}
.part01 ul li:last-of-type{ border-right: 1px solid #fff;}
.part01 ul li a {color: #fff !important;}
.part01 ul li a:hover{ opacity: 0.5;}

.part02 {padding: 100px 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%; max-width: 1460px; height: auto;}
.part02 div[class^="row"] .img figcaption {position: absolute; bottom: 5px; left: 5px; font-size: 1rem;}
.part02 .txt {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: -180px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around;}
.part02 .txt .txt-in {padding: 0 40px;}
.part02 .txt .txt-in h3 {font-size: 3.5rem; margin-bottom: 2rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em;}
.part02 .txt .txt-in h3 span {margin-left: 10px;}
.part02 .txt .txt-in p {font-size: 1.5rem; line-height: 2; letter-spacing: 0.05em;}
.part02 .txt a {display: block; padding: 0 69px 0 40px; height: 40px; text-align: center; background: #000 url(../images/common/arr_r.png) no-repeat center right 40px; color: #fff !important; position: absolute; bottom: 0; right:0; display: flex; align-items: center; justify-content: space-around; transition: all 0.5s; letter-spacing: 0.1em;}
.part02 .txt a:hover {background-position: center right 20px;}
.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) .txt {left: auto; right: 45%;}


.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: #000; color: #fff; position: absolute; right: 0; bottom: 0;}

.footer-main .container {display: block; text-align: center; max-width: unset;}
.footer-main .container a {display: inline-block; vertical-align: middle; width: auto;}
.footer-main .container a:hover {opacity: 0.8;}
.footer-main .container .header-btn {padding: 5px 24px; margin-left: 20px;}
.footer-main .container a:nth-of-type(3) {margin-left: 20px;}
.footer-main-tel {margin-top: 0;}

.main-cap {padding: 0;}



/* MEDIA */
@media only screen and (max-width: 1740px) {	
	.part02 .txt {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) {
	.part01 ul li {font-size: 16px;}
	
	.part02 {padding: 5vw 0 25vw;}
	.part02 div[class^="row"]:not(:last-of-type) {margin-bottom: 20vw;}
	.part02 .txt {bottom: -15vw;}
	.part02 .txt .txt-in {padding: 35px;}
	.part02 .txt .txt-in h3 {font-size: 2vw;}
	.part02 .txt .txt-in h3 img {height: 3vw;}
	.part02 .txt .txt-in p {font-size: 1vw;}

	.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;height: 60px;position: static;}
	.bot-nav .container li a .txt p span:nth-of-type(2){ left: 0;right: 0;margin: 0 auto;bottom: -16px;font-size: 1.4rem;}
	.part02 .txt a{ height: 30px;font-size: 16px;}
}

@media only screen and (max-width: 768px) {
	.mv {background: none;}
	.mv .mv-txt {width: 100%; max-width: 100%; text-align: center; position: static; transform: translateY(0); -webkit-transform: translateY(0); background: url(../images/top/mv_txt_bg.jpg) no-repeat center center / cover; padding: 5% 0;}
	.mv .mv-txt img {width: 70%;}

	
	.part01 {margin-top: 0;}
	.part01 ul {padding: 0;}
	.part01 ul li {width: 100%; font-size: 16px; border: 0; border-bottom: 1px solid #fff; padding: 4vw 0;}
	.part01 ul li:last-of-type {border: 0;}
	.part01 ul li a:hover::after{display: none;}
	.part02 div[class^="row"]:not(:last-of-type) {margin-bottom: 30vw;}
	.part02 div[class^="row"] .img figure {width: 100%;}	
	#top .part02 .row02 .img figure { width: 100%;}
	.part02 .txt .txt-in h3 span img {height: 6vw;}
	.part02 .txt {position: static; width: 100vw; height: auto;}
	.part02 .txt .txt-in h3 {font-size: 4vw; margin-bottom: 1rem;}
	.part02 .txt .txt-in p {font-size: 3vw;}
	.part02 .txt .txt-in p br {display: none;}
	.part02 .txt a {top: calc(100% - 3px); left: 0; right: 0; margin: 0 auto;}
	.bot-nav .container li {width: 49%;}
	.bot-nav .container li a .txt {font-size: 3vw; height: 60px; position: static;}
	.bot-nav .container li a .txt p span:nth-of-type(2) {left: 0; right: 0; margin: 0 auto;font-size: 1.2rem;bottom: -8px;padding: 0;}
	.footer-main .container a:nth-of-type(1) {margin-bottom: 0;}
	.footer-main .container a {margin-bottom: 20px; margin-left: 0;}
	.part01 ul li:last-child{width: 100%;}
}