@charset "UTF-8";
*{
margin: 0;
padding: 0;
}

.cf:after {
  content: "";
  clear: both;
  display: block;
}

body{
margin: 0 auto;
background:#fdfdfd;
font-family: 'Noto Sans', sans-serif,YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica','Arial';
}

p{
font-size: 13px;
color: #707070;
}

header{
position: relative;
background:url(../material/pagetop/index_top.png)no-repeat;
width: 1280px;
height: 860px;
margin: 0 auto;
}

.top-txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: 'Inconsolata', monospace;
}

.top-txt span{
font-size: 160px;
color: #fdfdfd;
}

nav{
width: 100%;
/*transition: .3s;*/
}

.logo{
position: absolute;
top: 20px;
left: 50px;
width: 64px;
height: 64px;
float: left;
}

nav ul{
position: absolute;
top: 40px;
right: 20px;
}
nav ul li{
list-style: none;
float: left;
}

nav ul li a{
display: block;
text-decoration: none;
margin: 0 20px;
color: #EBEBEB;
}

nav ul li a:hover{
color:#0F0F0F;
}

/*ここからnav固定用（small）*/
nav.small{
position: fixed;
top: 0;
width: 1280px;
height: 56px;
background: rgba(63,68,66,0.6);
z-index: 2;
}
nav.small .logo{
position: absolute;
top: 4px;
width: 48px;
height: 48px;
}
nav.small ul{
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
/*ここまでnav固定用（small）*/

.wrapper{
width: 1000px;
margin: 0 auto;
}

h1{
font-size: 24px;
line-height: 2;
color: #707070;
}

.concept{
border: #707070 1px solid;
width: 328px;
margin: 96px auto;
padding: 20px;
box-sizing: border-box;
}

.concept h1{
font-size: 32px;
text-align: center;
}

.txt-center{
text-align: center;
font-size: 24px !important;
}

.concept p{
margin: 30px auto;
font-size: 14px;
line-height: 2;
}

.container{
width: 100%;
overflow: hidden;
}

.container-box{
width: 1002px;
}

.container-box:after {
display: block;
clear: both;
content: "";
}

.index-box1{
width: 310px;
margin: 0 24px 0 0;
float: left;
}

.index-box1 img{
width: 100%;
object-fit: contain;
}

.index-box2{
position: relative;
border: #707070 1px solid;
width: 100%;
margin: 24px 0;
padding: 16px;
box-sizing: border-box;
}

.index-box1 h1{
text-align: left;
font-size: 20px;
margin-bottom: 8px;
}

.index-txt{
margin-bottom: 32px;
float: left;
}

.index-txt-r{
position: absolute;
right: 20px;
bottom: 18px;
float: right;
}

.index-txt-r p{
font-size: 10px;
}

.index-txt-r a{
color:#707070;
}

.gallery{
margin: 40px auto;
width: 1280px;
}

.gallery h1{
width: 1000px;
margin: 0 auto;
text-align: center;
font-size: 32px;
}

.gallery p{
text-align: right;
font-size: 8px;
}

.gallery p a{
color:#707070;
text-align: right;
}

.gallery-slider{
width: 100%;
}

.gallery-slider li{
list-style: none;
float: left;
}

.gallery-slider li img{
width: 256px;
height: 256px;
object-fit: contain;
}

.info{
margin: 80px auto;
font-size: 13px;
color: #707070;
}

.info dl{
margin: 8px 0 8px 20px;
}

.info dl dt{ /*height:20px*/
width: 200px;
padding: 0 0 0 8px;
}

.info dl dd{ /*height:21px*/
margin-top: -19px;
margin-bottom: 12px;
padding: 0 0 0 200px;
border-bottom: #707070 1px dotted;
}

.access-box{
/*width: 304px;*/
width: 30%;
margin-top: 40px;
margin-left: 20px;
float: left;
}

.access-txt{
line-height: 2;
padding: 0 16px 16px 16px;
}

.access-txt h2{
font-size: 18px;
color: #707070;
}

.access-map{
width: 68%;
text-align: right;
float: left;
}
.access-map img{
width: 90%;
object-fit: contain;
}

.access-map p{
text-align: right;
font-size: 8px;
}
.access-map p a{
color:#707070;
}

footer{
position: relative;
width: 1280px;
height: 400px;
background: #3E3C3A;
margin: 100px auto 0;
}

.page-top-btn{
position: absolute;
top:0;
left: 50%;
transform: translate(-50%,-50%);
}
.page-top-btn a {
display: block;
}

.page-top-btn img{
width: 40px;
height: 40px;
object-fit: contain;
}

.footer-sns{
position: relative;
width: 40%;
height: 100%;
float: left;
}

.footer-sns-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.sns{
width: 60px;
height: 60px;
border-radius: 16px;
margin: 0 8px;
float: left;
}

.footer-logo{
position: relative;
width: 20%;
height: 100%;
text-align: center;
float: left;
}

.footer-logo-box{
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
}

.footer-logo-box img{
width: 56px;
height: 56px;
}

.footer-logo-box p{
width: 216px;
font-size: 6px;
}

.footer-address{
position: relative;
width: 40%;
height: 100%;
font-size: 12px;
float: right;
}

.footer-address-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.name{
font-family: 'Inconsolata', monospace;
font-size: 1.2rem;
margin-bottom: 2rem;
}