@keyframes fade{
    0%{
        opacity:0;
    }

    15%{
        opacity:1;
    }

    30%{
        opacity:1;
    }

    45%{
        opacity:0;
    }

    100%{
        opacity:0;
    }
}

*{
    font-family: kaisei-opti, sans-serif;
    font-weight: 400;
    font-style: normal;
}

body{
    margin: 0;
    background-color:#D1D1D1;
}

header{
    background-color:#771717;
    height:80px;
    position:relative
}

main{
    margin-bottom:300px;
}

footer{
    clear:left;
}

header h2{
    display:block;
    color:#E2E2E2;
    font-size:20pt;
    padding:20px;
}

header h2 br,.link-btn a br{
	display:none;
}

header .link-btn{
    position:absolute;
    width:25%;
    height:64px;
    margin:8px;
    top:0px;
    right:0;
    background-color:#E2E2E2;
    transition:0.8s;
}

header .link-btn a{
    display:block;
    width:100%;
    padding:calc((64px - 20pt)/3) 0;
    margin:0 auto;
    color:#771717;
    font-size:20pt;
    text-align:center;
    transition:0.8s;
}

header .link-btn:hover{
    background-color:#771717;
}

header .link-btn:hover a{
    color:#E2E2E2;
}

.main-image{
    position:relative;
    height:1000px;
}

.main-slide li{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-20%;
    opacity:0;
    animation:fade 15s infinite;
}

.main-slide li:nth-child(1){
    animation-delay:0s;
}

.main-slide li:nth-child(2){
    animation-delay:5s;
}

.main-slide li:nth-child(3){
    animation-delay:10s;
}

.main-slide li img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.main-title{
    height: 1000px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color:#771717;
    width: 25%;
    position: relative;
    right:0;
    left:75%;
}

.main-title::after{
    content: "";
    position: absolute;
    background: linear-gradient(-45deg, #771717 50%, transparent 52%),
        linear-gradient(-135deg, #771717 50%, transparent 52%);
    background-size: 30px 30px;
    width: 14px;
    height: 100%;
    bottom: 0;
    left:-14px;
}

.inner{
    position:absolute;
    right:0;
    max-width: 600px;
    padding:10%;
    margin: 0 auto;
}

.inner h1{
    display:block;
    height:1000px;
    font-size:70pt;
    color:#E2E2E2;
    writing-mode: vertical-rl;
    text-align:center;
}

.main-contents{
    width:100%;
    margin:80px auto;
}

.words-box{
    width:80%;
    margin:0 auto;
    background-color:#771717;
    position:relative;
}

.words-box::after{
    content:"";
    position:absolute;
    background:linear-gradient(-135deg, #771717 50%, transparent 52%);
    background-size: 60px 60px;
    width: 28px;
    height:60px;
    right:0;
    left:0;
    margin:0 auto;
}

.words-box h2{
    display:block;
    color:#E2E2E2;
    font-size:20pt;
    padding:20px;
    text-align:center;
}

.contents{
    clear:left;
    width:80%;
    margin:50px auto;
}

.contents-image{
    width:20vw;
    height:20vw;
    box-shadow:10px 10px #771717;
    float:inline-start;
    margin-right:10%;
    margin-bottom:20px;
}

.contents-image img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.contents-words h2{
    display:block;
    font-size:20pt;
    border-bottom:solid 2px #771717;
    padding-bottom:10px;
    margin-bottom:10px;
}

footer .link-btn{
    width:60%;
    height:80px;
    background-color:#771717;
    margin:100px auto;
    transition:0.8s;
}

footer .link-btn a{
    display:block;
    width:100%;
    color:#E2E2E2;
    font-size:20pt;
    text-align:center;
    padding:calc((80px - 20pt)/3) 0;
    transition:0.8s;
}

footer .link-btn:hover{
    background-color:#E2E2E2;
}

footer .link-btn:hover a{
    color:#771717;
}

.copyright{
    text-align:center;
}

@media(max-width:1080px){
	header .link-btn{
		width:35%;
	}
	
    header .link-btn a{
        font-size:15pt;
        padding:calc((64px - 15pt)/5) 0;
    }
	
	header h2{
		font-size:15pt;
	}
	
	header h2 br,.link-btn a br{
		display:block;
	}
	
	footer .link-btn a{
		font-size:15pt;
		padding:calc((80px - 15pt)/4) 0;
	}

    .main-slide li{
        left:0;
    }

    .main-title{
        background-color:transparent;
    }

    .main-title::after{
        background:transparent;
    }

    .main-title{
        width:100%;
        left:0;
    }

    .inner{
        max-width:100%;
        padding:0;
    }

    .inner h1{
		font-size:35pt;
        text-align:right;
        writing-mode:horizontal-tb;
        color:#771717;
        -webkit-text-fill-color:#771717;
        -webkit-text-stroke:1px #E2E2E2;
    }
}