@charset "UTF-8";
/* CSS Document */

h2{
font-weight: 400;
line-height: 1;
text-align: center;
}
.prev-btn a {
position: relative;
display: block;
border: 1px solid #232323;
color: #232323;
text-align: center;
line-height: 1;
}
.prev-btn a:hover {
color: #ffffff;
background: #232323;
}
.prev-btn a:after {
position: absolute;
left: 10px;
content: "\f053";
font-family: FontAwesome;
}
/*--------------------
hero
--------------------*/
#image div div {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/*--------------------
concept
--------------------*/
#concept {
background: #f3f3f3;
}
#concept .box > div {
display: flex;
justify-content: space-between;
}
#concept .box > div div:first-of-type {
transition: .3s;
}
#concept .box > div div:last-of-type {
transition: .9s;
}
/*--------------------
online
--------------------*/
#online a{
display: block;
border: 1px solid #232323;
color: #ffffff;
background: #232323;
text-align: center;
line-height: 1;
padding: 10px 0;
}
/*--------------------
news
--------------------*/
#news ul{
display: flex;
flex-wrap: wrap;
}
#news ul li {
background: #fff;
}
#news ul li:hover {
transform: translate(-15px,-15px)
}
#news ul li:nth-child(1){
transition: .3s;
}
#news ul li:nth-child(2){
transition: .6s;
}
#news ul li:nth-child(3){
transition: .9s;
}
#news ul li:nth-child(4){
transition: 1.2s;
}
#news ul li a {
display: block;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
}
#news .btn{
display:inline-block;
text-align:end;
color:#111;
cursor:pointer;
position: relative;
text-decoration: none;
}
#news .btn::after{
content: "";
display: block;
position: absolute;
border: none;
border-bottom: 1px solid #111;
}
/*--------------------
insta
--------------------*/
#insta {
background: #f3f3f3;
}
#insta ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#insta ul li:nth-child(1){
transition: .3s;
}
#insta ul li:nth-child(2){
transition: .6s;
}
#insta ul li:nth-child(3){
transition: .9s;
}
#insta ul li:nth-child(4){
transition: 1.2s;
}
/*--------------------
access
--------------------*/
#access .intro {
text-align: center;
}	

@media (max-width: 560px){
/*--------------------
common
--------------------*/	
h2{
margin-bottom: 20px;
font-size: 2.4rem;
}
#image{
padding-top: 70px;
}
/*--------------------
hero
--------------------*/
#image div div {
height: calc(100vh - 70px);
margin: 0;
}
#image div div.img01 {
background-image: url("../images/herox1.jpg");
}
#image div div.img02 {
background-image: url("../images/herox1.jpg");
}
/*--------------------
concept
--------------------*/
#concept .box > div{
flex-direction: column;
}
#concept .box > div div img{
margin-bottom: 20px;
}
#concept .intro {
font-size: 1.4rem;
padding-bottom: 10px;
}	
#concept .btn{
display:inline-block;
width: 100%;
text-align:end;
color:#111;
margin:5px;
cursor:pointer;
position: relative;
text-decoration: none;
}
#concept .btn::after{
content: "";
display: block;
position: absolute;
top: 50%;
right: 90px;
width: 80px;
border: none;
border-bottom: 1px solid #111;
transform: skew(45deg);
transition: .3s;
}
/*--------------------
online
--------------------*/
#online a{
font-size: 2.0rem;
margin: 30px auto 0;
width: 300px;
transition: .3s;
}
/*--------------------
news
--------------------*/
#news ul{
margin-bottom: 20px;
}
#news ul li {
width: 50%;
}
#news ul li a {
height: 240px;
}
#news ul li time {
font-size: 1.2rem;
padding: 0 10px 10px;
}
#news ul li h3 {
font-size: 1.4rem;
padding: 0 10px;
}
#news .btn{
width: 100%;
margin:5px;
}
#news .btn::after{
top: 50%;
right: 120px;
width: 80px;
transition: .3s;
}	
/*--------------------
insta
--------------------*/
#insta ul li{
width: 50%;
}
/*--------------------
access
--------------------*/	
#access .intro {
font-size: 1.4rem;
padding-bottom: 20px;
}	
#access .g-map {
height: 200px;
}
}
@media (min-width: 561px){
/*--------------------
common
--------------------*/	
h2{
margin-bottom: 40px;
font-size: 30px;
font-size: 3.0rem;
}
/*--------------------
hero
--------------------*/
#image div div {
margin: 0;
}
#image div div.img01 {
background-image: url("../images/herox3.jpg");
}
#image div div.img02 {
background-image: url("../images/herox3.jpg");
}
/*--------------------
concept
--------------------*/
#concept .box > div div{
width: 48%;
}
#concept .intro {
padding-bottom: 20px;
}	
#concept .btn{
display:inline-block;
width: 100%;
text-align:end;
color:#111;
margin:5px;
cursor:pointer;
position: relative;
text-decoration: none;
}
#concept .btn::after{
content: "";
display: block;
position: absolute;
top: 50%;
right: 90px;
width: 80px;
border: none;
border-bottom: 1px solid #111;
transform: skew(45deg);
transition: .3s;
}
/*--------------------
online
--------------------*/
#online a{
font-size: 2.4rem;
margin: 50px auto 0;
width: 360px;
transition: .3s;
}
#online a:hover{
color: #232323;
background: #fff;
transition: .3s;
}
/*--------------------
news
--------------------*/
#news ul{
margin-bottom: 30px;
}
#news ul li {
width: 25%;
}
#news ul li a {
height: 270px;
}
#news ul li time {
font-size: 12px;
font-size: 1.2rem;
padding: 0 10px 10px;
}
#news ul li h3 {
font-size: 14px;
font-size: 1.4rem;
padding: 0 10px;
}
#news .btn{
width: 100%;
margin:5px;
}
#news .btn::after{
top: 50%;
width: 80px;
transition: .3s;
}
/*--------------------
insta
--------------------*/
#insta ul li{
width: 25%;
}
/*--------------------
access
--------------------*/	
#access .intro {
padding-bottom: 20px;
}	
#access .g-map {
height: 300px;
}	
}
}
@media (min-width: 561px) and (max-width: 1024px){
/*--------------------
common
--------------------*/	
#image{
padding-top: 70px;
}
/*--------------------
hero
--------------------*/
#image div div {
height: calc(50vh - 70px);
}
/*--------------------
concept
--------------------*/
#concept .intro {
font-size: 1.4rem;
}	
/*--------------------
news
--------------------*/
#news .btn::after{
right: 130px;
}	
/*--------------------
access
--------------------*/	
#access .intro {
font-size: 1.4rem;
padding-bottom: 20px;
}	
}

@media (min-width: 1025px){
/*--------------------
common
--------------------*/	
.prev-btn a {
padding: 10px 0;
font-size: 16px;
font-size: 1.6rem;
}
.prev-btn a:after {
left: 10px;
font-size: 16px;
font-size: 1.6rem;
}
/*--------------------
hero
--------------------*/
#image div div {
height: calc(100vh - 210px);
}
/*--------------------
concept
--------------------*/
#concept .intro {
font-size: 16px;
font-size: 1.6rem;
}	
#concept .btn:hover::after{
right: 90px;
width: 200px;
}
/*--------------------
news
--------------------*/
#news ul{
background: #c9c9c9
}
#news .btn::after{
right: 120px;
}
#news .btn:hover::after{
right: 120px;
width: 200px;
}	
/*--------------------
insta
--------------------*/
#insta ul li:hover{
filter: blur(2px);
}	
/*--------------------
access
--------------------*/	
#access .intro {
font-size: 16px;
font-size: 1.6rem;
}	
}