@charset "UTF-8";
/* CSS Document */
/*--------------------
#about
--------------------*/
#about{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
#about > img{
position: absolute;
}
#about .box{
display: flex;
align-items: flex-start;
}
#about .box div{
display: flex;
}
#about p{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}
#about a{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
border: solid 1px #fff;
text-align: center;
}
/*--------------------
#product
--------------------*/
#product{
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#product ul{
margin: 0 auto;
}
#product ul li{
position: relative;
z-index: 2;
}
#product ul li:last-of-type{
margin-bottom: 0;
}
#product ul li > div{
display: flex;
align-items: center;
justify-content: space-between;
}
#product ul li > div h3{
font-weight: bold;
}
#product ul li > div a{
position: absolute;
color: #333;
}
#product ul li:after{
display: block;
content: " ";
position: absolute;
top: 50%;
left: 0;
background: #BFB090;
transform: translateY(-50%);
z-index: -10;
}


/*--------------------
#info
--------------------*/
#info{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
#info ul{
display: flex;
}
#info ul li{
position: relative;
}
#info ul li time{
color: #FCE8BE;
font-weight: bold;
display: block;
}
#info ul li h3{
color: #FCE8BE;
font-weight: bold;
}
#info ul li a{
display: flex;
align-items: center; 
justify-content: flex-end; 
line-height: 1em;
}
#info ul li a:before{
display: inline-block;
content: "";
border-top: solid 1px #fff;
margin-right: 1em;
margin-top: 0.5em;
}
#info .box > a{
display: flex;
align-items: center; 
justify-content: flex-end; 
font-weight: bold;
line-height: 1em;
}
/*--------------------
#access
--------------------*/
#access {
position: relative;
background: #304208;
}
#access > div{
display: flex;
}
#access >div div h3{
font-weight: bold;
}
#access >div div a{
display: flex;
align-items: center; 
justify-content: flex-start; 
font-weight: bold;
line-height: 1em;
}
@media (max-width: 560px){
.box {
width: 90%;
margin: 0 auto;
}
#about,#product,#info{
padding: 50px 0;
}
/*--------------------
#about
--------------------*/
#about{
background-image: url("../images/bg01.webp");
}
#about > img{
top: 50px;
left: 5%;
width: 25%;
}
#about .box{
flex-direction: column-reverse;
align-items: flex-end;
}
#about .box div{
align-items: center;
flex-direction: column;
width: 50%;
margin: 0 auto;
}
#about h2{
width: 30%;
padding-bottom: 40px;
}
#about h2 img{
display: block;
}
#about p{
height: 410px;
padding-bottom: 40px;
}
#about a{
padding: 20px 5px;
}
#about .box > img{
width: 67%;
margin-bottom: 50px;
}
/*--------------------
#product
--------------------*/
#product{
background-image: url("../images/bg02.webp");
}
#product h2{
width: 15%;
margin: 0 auto;
padding-bottom: 30px;
}
#product ul{
width: 80%;
}
#product ul li{
margin-bottom: 20px;
}
#product ul li > div{
    background: #BFB090;
}
#product ul li > div img{
width: 30%;
}
#product ul li > div div{
width: 65%;
}
#product ul li > div h3{
font-size: 1.6rem;
}
#product ul li > div a{
bottom: 5px;
right: 10px;
font-size: 1.4rem;
}
#product ul li:after{

}
/*--------------------
#info
--------------------*/
#info{
background-image: url("../images/bg01.webp");
}
#info h2{
width: 15%;
margin: 0 auto;
margin-bottom: 30px;
}
#info ul{
width: 80%;
flex-direction: column;
margin: 0 auto;
margin-bottom: 50px;
}
#info ul li{
padding-bottom: 50px;
}
#info ul li:last-of-type{
padding-bottom: 0;
}
#info ul li time{
font-size: 1.6rem;
padding-bottom: 10px;
}
#info ul li h3{
font-size: 1.8rem;
padding: 10px 0;
}
#info ul li p{
font-size: 1.4rem;
padding-bottom: 10px;
}
#info ul li a{
font-size: 2.0rem;
}
#info ul li a:before{
width: 100px;
}
#info .box > a{
display: block;
text-align: center;
font-size: 2.2rem;
}
/*--------------------
#access
--------------------*/
#access h2{
width: 15%;
margin: 0 auto 30px;
}
#access > div{
align-items: center;
flex-direction: column;
}
#access > div div{
padding: 50px 0;
}
#access >div div h3{
text-align: center;
font-size: 2.5rem;
padding-bottom: 20px;
width: 80%;
margin: 0 auto;
}
#access >div div p{
padding-bottom: 10px;
width: 70%;
margin: 0 auto 20px;
}
#access >div div ul{
width: 80%;
margin: 0 auto 30px;
}
#access >div div a{
display: block;
text-align: center;
font-size: 2.2rem;
}
}
@media (min-width: 561px){
.box {
width: 84%;
margin: 0 5% 0 11%;
}
/*--------------------
#about
--------------------*/
#about{
background-image: url("../images/bg01.webp");
}
#about > img{
top: 80px;
left: 9%;
width: 16%;
}
#about .box{
justify-content: flex-end;
}
#about .box div{
flex-direction: row-reverse;
}
#about h2{
width: 70px;
}
#about a{
padding: 7px;
margin-top: 400px;
height: 100px;
}
#about .box div,
#about .box > img{
width: 50%;
}
/*--------------------
#product
--------------------*/
#product{
background-image: url("../images/bg02.webp");
}
#product h2{
position: absolute;
right: 5%;
width: 70px;
}
#product ul{
width: 90%;
}
#product ul li > div h3{
font-size: 2.6rem;
}
#product ul li > div a{
font-size: 2.0rem;
}
/*--------------------
#info
--------------------*/
#info{
background-image: url("../images/bg01.webp");
}
#info h2{
position: absolute;
top: 150px;
left: 11%;
width: 70px;
}
#info ul{
width: 85%;
margin-bottom: 100px;
margin-left: auto;
}
#info ul li{
width: 30%;
padding-right: 5%;
}
#info ul li:last-of-type{
padding-right: 0;
}
#info ul li time{
font-size: 16px;
font-size: 1.6rem;
padding-bottom: 10px;
}
#info ul li h3{
font-size: 18px;
font-size: 1.8rem;
padding: 10px 0;
}
#info ul li p{
font-size: 16px;
font-size: 1.6rem;
padding-bottom: 20px;
}
#info ul li a{
font-size: 20px;
font-size: 2.0rem;
}
#info ul li a:before{
width: 100px;
}
#info .box > a{
font-size: 18px;
font-size: 1.8rem;
}
#info .box > a:before{
display: inline-block;
content: "";
border-top: solid 1px #fff;
margin-right: 1em;
margin-top: 0.5em;
}
/*--------------------
#access
--------------------*/
#access h2{
position: absolute;
top: 100px;
right: 5%;
width: 70px;
}
#access > div div h3{
font-size: 26px;
font-size: 2.6rem;
padding-bottom: 30px;
}
#access > div div p{
padding-bottom: 10px;
}
#access > div div a{
font-size: 18px;
font-size: 1.8rem;
}
#access > div div a:before{
display: inline-block;
content: "";
border-top: solid 1px #fff;
margin-right: 1em;
margin-top: 0.5em;
}
}
@media (min-width: 561px) and (max-width: 1024px){
#about,#product,#info,#access{
padding: 100px 0;
}
/*--------------------
#about
--------------------*/
#about .box{
align-items: flex-start;
}
#about .box div{
justify-content: flex-end;
}
#about h2{
padding-left: 10px;
}
#about p{
padding: 100px 0 0 20px;
}
/*--------------------
#product
--------------------*/
#product{
padding-bottom: 150px;
}
#product h2{
top: 100px;
}
#product ul li{
margin-left: 2%;
margin-bottom: 40px;
}
#product ul li > div img{
width: 20%;
padding-left: 40px;
}
#product ul li > div div{
margin-right: 20%;
width: 50%;
}
#product ul li > div a{
bottom: calc(10% + 10px);
right: calc(15% + 20px);
}
#product ul li:after{
width: 85%;
height: 100px;
}
/*--------------------
#info
--------------------*/
#info .box > a:before{
width: 80px;
}
/*--------------------
#access
--------------------*/
#access > div{
align-items: flex-start;
}
#access > div > img{
width: 40%;
margin-left: 5%;
}
#access > div div{
width: 35%;
padding-left: 3%;
}
#access > div div a{
display: block;
text-align: end;
}
#access > div div a:before{
width: 80px;
}
}
@media (min-width: 1025px){
#about,#product,#info{
padding: 150px 0;
}
/*--------------------
#about
--------------------*/
#about h2{
padding-left: 40px;
margin-right: 30px;
}
#about p{
padding: 100px 0 0 40px;
}
/*--------------------
#product
--------------------*/
#product{
padding-bottom: 200px;
}
#product h2{
top: 150px;
}
#product ul li{
margin-bottom: 60px;
}
#product ul li > div img{
width: 20%;
padding-left: 60px;
}
#product ul li > div div{
margin-right: 17%;
width: 53%;
}
#product ul li > div a{
bottom: calc(20% + 20px);
right: calc(10% + 30px);
}
#product ul li:after{
width: 90%;
height: 150px;
}
/*--------------------
#info
--------------------*/
#info .box > a:before{
width: 150px;
}
/*--------------------
#access
--------------------*/
#access > div{
align-items: center;
}
#access > div > img{
width: 50%;
}
#access > div div{
width: 45%;
padding-left: 5%;
}
#access > div div p{
width: 90%;
line-height: 1.8em;
padding-bottom: 30px;
}
#access > div div a{
padding-left: 170px;
}
#access > div div a:before{
width: 150px;
}
}