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

#news,#about,#access{
background-color: #f9f1dc;
}
#order{
background-color: #948251;
}
h2{
font-family: 'Lora', serif;
text-align: center;
color: #948251;
font-weight: 300;
line-height: 1;
letter-spacing: 0.1em;
text-indent: 0.1em;
}
h2 span{
font-family: "Noto Sans JP", "sans-serif";
display: block;
font-weight: 500;
}
h2 span:before{
display: block;
content: "";
background-color: #948251;
}
h2.white{
color: #fff;
}
h2.white span:before{
background-color: #fff;
}
/*---------------
hero
---------------*/
#hero{
position: relative;
width: 100%;
}
#hero img{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#hero p{
text-align: end;
color: #fff;
position: absolute;
bottom: 3%;
right: 3%;
}
/*---------------
#news
---------------*/
#news ul li:last-of-type{
padding-bottom: 0;
}
#news ul li time{
color: #948251;
}
/*---------------
#about
---------------*/
#about .box div div{
background-color: #fff;
}
#about .box div h3{
font-family: 'Noto Serif JP', serif;
font-weight: 500;
text-align: center;
}
/*---------------
#chandelier
---------------*/
#chandelier h2{
width: 100%;
}
#chandelier > div{
background-color: #f9f1dc;
}
#chandelier div p span {
display: block;
font-size: 0.8em;
}
/*---------------
#order
---------------*/
#order div.flex{
display: flex;
align-items: center;
}
#order div.flex div:first-of-type p{
color: #fff;
line-height: 1.5em;
}
#order div.flex div:last-of-type img{
width: 100%;
object-fit: cover;
}
/*---------------
#gallery
---------------*/
#gallery{
position: relative;
width: 100%;
}
#gallery ul li{
position: absolute;
}
#gallery ul li:before{
content: "";
display: block;
padding-top: 100%;
}
#gallery ul img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
}
#gallery a.btn{
position: absolute;
}
/*---------------
#access
---------------*/
#access div.flex{
margin: 0 auto;
}
#access div.flex .text p{
color: #948251;
margin: 0 auto;
}
#access div.flex .g-map iframe{
width: 100%;
height: 100%;
}

@media (max-width: 560px){
#about{
padding: 40px 0 60px;
}
h2{
font-size: 3.2rem;
}
h2 span{
font-size: 1.8rem;
}
h2 span:before{
width: 2px;
height: 15px;
margin: 5px auto;
}
/*---------------
hero
---------------*/
#hero{
height: 100vh;
}
#hero img{
width: 45%;
max-width: 140px;
}
#hero p{
font-size: 1.2rem;
}
/*---------------
#news
---------------*/
#news{
padding-top: 40px;
}
#news ul{
margin: 0 auto 20px;
}
#news ul li{
padding-bottom: 10px;
}
#news ul li time{
display: block;
}
/*---------------
#about
---------------*/
#about img{
width: 95%;
box-shadow: 20px 20px 0px #dcd1b3;
}
#about .box div{
margin-bottom: 60px;
}
#about .box div div{
transform: translateY(40px);
padding: 30px;
}
#about .box div h3{
font-size: 4.6vw;
padding-bottom: 20px;
}
#about .box div p{
line-height: 1.6em;
}
#about img.scroll-up{
opacity: 0;
transform : translate(10px, 10px);
box-shadow: 0px 0px 0px #dcd1b3;
transition: all 1.2s/*処理にかかる時間*/;
}
#about img.scroll-up.done{
opacity : 1;
transform : translate(0, 0);
box-shadow: 20px 20px 0px #dcd1b3;
}
#about .box div div.scroll-up{
opacity: 0;
transform: translateY(60px)/*スクロールアップする距離*/;
transition: all 1.2s/*処理にかかる時間*/;
}
#about .box div div.scroll-up.done{
opacity : 1;
transform: translateY(40px);
}
/*---------------
#chandelier
---------------*/
#chandelier h2{
padding: 40px 0;
}
#chandelier > div{
padding-bottom: 40px;
}
#chandelier div p {
padding: 30px 0;
font-size: 1.6rem;
line-height: 150%;
width: 90%;
margin: 0 auto;
}
/*---------------
#order
---------------*/
#order div.flex{
flex-direction: column-reverse;
}
#order div.flex div:first-of-type{
width: 90%;
padding: 30px 0 40px;
}
#order div.flex div:first-of-type p{
padding-bottom: 30px;
}
/*---------------
#gallery
---------------*/
#gallery{
height: 100vh;
}
#gallery ul li{
width: 45%;
border: solid 10px #fff;
}
#gallery ul li:first-of-type{
top: 10%;
right: 5%;
}
#gallery ul li:last-of-type{
bottom: 20%;
left: 5%;
}
#gallery a.btn{
bottom: 5%;
right: 10%;
}
/*---------------
#access
---------------*/
#access div.flex .text{
padding: 40px 0 30px;
}
#access div.flex .text h2{
padding-bottom: 40px;
}
#access div.flex .text p{
text-align: center;
padding-bottom: 10px;
}
#access div.flex .g-map{
width: 100%;
height: 40vh;
}
}

@media (min-width: 561px){
#about{
padding: 60px 0;
}
h2{
font-size: 4.2rem;
}
h2 span{
font-size: 2.0rem;
}
h2 span:before{
width: 3px;
height: 20px;
margin: 10px auto;
}
/*---------------
hero
---------------*/
#hero img{
width: 40%;
max-width: 600px;
}
/*---------------
#news
---------------*/
#news{
padding-top: 60px;
}
#news ul{
display: table;
margin: 0 auto 30px;
}
#news ul li{
padding-bottom: 10px;
}
#news ul li time{
padding-right: 10px;
}
/*---------------
#about
---------------*/
#about .box div{
position: relative;
}
#about .box div div{
position: absolute;
top: 55%;
right: 0;
transform: translateY(-50%);
padding: 30px;
}
#about .box div h3{
padding-bottom: 20px;
}
#about .box div p{
line-height: 1.6em;
}
#about img.scroll-up{
opacity: 0;
transform : translate(15px, 15px);
box-shadow: 0px 0px 0px #dcd1b3;
transition: all 1.2s/*処理にかかる時間*/;
}
#about img.scroll-up.done{
opacity : 1;
transform : translate(0, 0);
box-shadow: 30px 30px 0px #dcd1b3;
}
#about .box div div.scroll-up{
opacity: 0;
transform: translateY(20px)/*スクロールアップする距離*/;
transition: all 1.2s/*処理にかかる時間*/;
}
#about .box div div.scroll-up.done{
opacity : 1;
transform: translateY(-50%);
}
/*---------------
#chandelier
---------------*/
#chandelier h2{
padding: 100px 0;
}
#chandelier > div{
padding-bottom: 100px;
}
#chandelier div p {
padding: 40px 0;
text-align: center;
line-height: 200%;
}
/*---------------
#order
---------------*/
#order div.flex div:first-of-type{
width: 70%;
padding: 20px 40px 20px 5%;
}
#order div.flex div:first-of-type p{
text-align: center;
padding-bottom: 30px;
}
#order div.flex div:last-of-type{
width: 30%;
}
#order div.flex div:last-of-type img{
height: 30vh;
}
/*---------------
#gallery
---------------*/
#gallery ul li{
width: 22%;
border: solid 20px #fff;
}
#gallery ul li:first-of-type{
top: 5%;
right: 5%;
}
#gallery ul li:last-of-type{
bottom: 5%;
left: 5%;
}
#gallery a.btn{
bottom: 10%;
right: 10%;
}
/*---------------
#access
---------------*/
#access div.flex{
display: flex;
align-items: center;
width: 100%;
max-width: 1280px;
}
#access div.flex .text{
width: 50%;
}
#access div.flex .text h2{
padding-bottom: 60px;
}
#access div.flex .text p{
padding-bottom: 15px;
width: 250px;
}
#access div.flex .g-map{
width: 50%;
height: 50vh;
}
}

@media (min-width: 561px) and (max-width: 1024px){
/*---------------
hero
---------------*/
#hero{
height: 100vh;
}
/*---------------
#about
---------------*/
#about .box div{
margin-bottom: 100px;
}
#about img{
width: 40%;
box-shadow: 20px 20px 0px #dcd1b3;
}
#about .box div div{
width: 45%;
}
#about .box div h3{
font-size: 2.5vw;
}
/*---------------
#gallery
---------------*/
#gallery{
height: 50vh;
}

#chandelier div p {
font-size: 2rem;
}
}

@media screen and (min-width: 1025px){
/*---------------
hero
---------------*/
#hero{
height: 90vh;
}
/*---------------
#about
---------------*/
#about .box div{
margin-bottom: 60px;
}
#about img{
width: 45%;
box-shadow: 30px 30px 0px #dcd1b3;
}
#about .box div div{
width: 55%;
}
#about .box div h3{
font-size: 2.0rem;
}
/*---------------
#gallery
---------------*/
#gallery{
height: 100vh;
}

#chandelier div p {
font-size: 2.4rem;
}
}