@charset "utf-8";

@import "style.css";

@import "mobile.css";

@import "fade.css";

@import "font.css";

@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Noto+Serif+JP:wght@400;500&family=Rubik:wght@400;500&display=swap');


/*----------初期化----------*/

body{
width:100%;
font-size:0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#222;
font-family: 'Noto Serif JP', serif;
font-feature-settings: "palt";
}

body {
animation: fadeIn 1.2s ease 0s 1 normal;
-webkit-animation: fadeIn 1.2s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

*{
margin:0px;
padding:0px;
box-sizing:border-box;
}

ul,li{
list-style:none;
background: none;
}

ul{
width: 100%;
display: table;
table-layout: fixed;
}

li{
display: table-cell;
vertical-align: middle;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

a:hover{
cursor:pointer;
}

@media screen and (min-width:641px) { 

body{
background-color: #fff;
background-image: url("https://www.transparenttextures.com/patterns/dark-stripes-light.png");
}

img.mobile,div.mobile{
display: none;
}

div.contener{
width: 100%;
margin: 0px auto;
}

main.main{
background: #fff;
}

div.inner{
width: 1000px;
margin: 0px auto;
}

div.dot{
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-size: 3px 3px;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}

div.screen{
background: rgba(0,0,0,0.7);
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}

}

@media screen and (max-width:640px) { 

body{
background-color: #fff;
font-family: serif;
}

img.pc,div.pc{
display: none;
}

div.contener{
width: 100%;
max-width: 700px;
margin: 0px auto;
background: #fff;
}

}

.center{
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.prts{
width: 100%;
height: 100%;
object-fit: cover;
position:absolute;
object-position: center top;
top:0px;
left:0px;
}

a.more{
width: 80%;
margin: 0px auto;
display: block;
}


.w90{
width:86%;
margin: 0px auto;
}

.w80{
width:80%;
margin: 0px auto;
}

.w70{
width:70%;
margin: 0px auto;
}

.mb5{
margin-bottom: 5px!important;
}

.mb10{
margin-bottom: 10px!important;
}

.mb15{
margin-bottom: 15px!important;
}

.mb20{
margin-bottom: 20px!important;
}

.mb30{
margin-bottom: 30px!important;
}

.mb40{
margin-bottom: 40px!important;
}

.mb50{
margin-bottom: 50px!important;
}

.anim-wrap{
display: block;
position: relative;
overflow: hidden;
}

span.red{
width: 100%;
height: 100%;
display: block;
position: absolute;
background: #bf0000;
top:0px;
left:0px;
}

/*--------------------アニメーション--------------------*/

section.animation{
width: 100%;
height: 100%;
position: fixed;
top:0px;
left:0px;
z-index: 9999;
overflow: hidden;
}

div.top{
width: 100%;
height: 50%;
position: absolute;
top:0%;
left:0px;
background: #000
}

div.top_second{
width: 100%;
height: 50%;
position: absolute;
top:0%;
left:0px;
background: #222
}

div.bottom{
width: 100%;
height: 50%;
position: absolute;
bottom:0px;
left:0px;
background: #000
}

div.bottom_second{
width: 100%;
height: 50%;
position: absolute;
bottom:0px;
left:0px;
background: #222
}

.hr{
width: 100%;
height: 2px;
border:none;
background: #c50000;
position: absolute;
top: 50%;
right: -100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}



/*--------------------ハンバーガー―メニュー--------------------*/

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
position: absolute;
width: 24px;
height: 16px;
top:50%;
left: 50%;
transform: translate(-50%,-50%)
}

a.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 7px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);
}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);
}