@charset "utf-8";

.slider{
margin: 100px auto;
width: 80%;
}
.slider img{
height: auto;
width: 100%;
}

.slider2{
margin: 100px auto;
width: 80%;
}
.slider2 img{
height: auto;
width: 100%;
}

/*slick setting*/
.slick-prev:before,
.slick-next:before {
color: #000;
}

.top01{
margin: 10rem 0;
}
.top01 dl{
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 5rem;
}
.top01 dt {
width: 20%;
border-bottom: 1px solid #ad0718;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
.top01 .huse_cate{
background-color: #AFBEA0;
padding: 1rem;
margin: 0 1rem;
color: #fff;
font-size: 1.2rem;
}
.top01 .minamihorie_cate{
background-color: #fccf2c;
padding: 1rem;
margin: 0 1rem;
color: #fff;
font-size: 1.2rem;
}
.top01 dd{
width: 80%;
border-bottom: 1px solid #fccf2c;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
.top02{
margin: 10rem 0;
position: relative;
}
img.pizza_img{
width:100%;
}

/* モーダルウィンドウのスタイル */
.modal {
position:absolute;
width:100%;
height:100vh;
top:0;
left:0;
display:none;
}
/* オーバーレイのスタイル */
.overLay {
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100vh;
z-index: 10;
}
/* モーダルウィンドウの中身のスタイル */
.modal .modal_contents {
position: absolute;
z-index: 20;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: 3rem;
text-align: center;
width: 70%;
}
.modal_contents h3{
color:#897052;
padding-bottom:2rem;
font-size: 3rem;
}
.modal_contents p{
margin-bottom:3rem;
}
.modalClose {
border: solid 1px #ccc;
padding: 1rem 2rem;
}
.pizza01 {
position: absolute;
top: 850px;
right: 70%;
width: 233px;
}
.pizza02 {
position: absolute;
top: 210px;
right: 220px;
width: 330px;
}
.top03{
margin: 10rem auto;
}
.top03 ul {
width: 100%;
display: flex;
justify-content: space-between;
}
.top03 li {
width: 14%;
margin: 0 1%;
}
.top03 p{
text-align: center;
line-height: 2.5rem;
margin-top:1rem;
}
.img img{
width: 100%;
}
.top04{
margin: 10rem auto;
text-align: center;
}
.top04 ul {
width: 100%;
display: flex;
justify-content: center;
}
.top04 li {
width: 30%;
margin: 0 1%;
text-align: center;
}
.top04 p {
text-align: center;
margin: 1rem auto;
}
.shoplink {
    margin-top: 5rem;
    display: flex;
    justify-content: center;
}
.shoplink li{
margin:3rem;
}
.top05{
margin: 10rem auto;
text-align: center;
}
.top05 ul {
width: 100%;
display: flex;
justify-content: center;
}
.top05 li {
width: 48%;
margin: 1%;
}
.top05 p{
margin-bottom: 3rem;
}
.parallax {
min-height: 72vh;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover; 
position: relative;
}
.content_wrapper {
padding: 60px;
background-color: #fff;
}
div.parallax .top_box h2 {
font-size: 6rem;
line-height: 8rem;
color: #fff;
text-align: left;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.top_box{
max-width: 1200px;
margin: 0 auto;
position: absolute;
top:50%;
left: 30%;
transform: translate(-50%,-50%);
}
.top_box p {
color: #fff;
font-size: 3rem;
line-height: 3.5rem;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.content_wrapper h2{
line-height: 600px;
font-size: 60px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.parallax_img01 img {
position: absolute;
z-index: 10;
width: 300px;
top:50%;
left: 80%;
transform: translate(-50%,-50%);
}
.parallax_img01{
background-image:url("../images/top/img_top_01.png");
}
.parallax_img02{
background-image:url("../images/top/img_top_10.png");	}
.parallax_img03{
background-image:url("../images/main_img03.jpg");	
}
.parallax_img04{
background-image:url("../images/main_img04.jpg");	
}
.parallax_img05{
background:url("../images/main_img05.jpg");	
}
.parallax_img06{
background:url("../images/main_img06.jpg");	
}
.parallax_img02 .inner{
position: relative;
height: 30vh;
}
.parallax_img02 .inner{
width:100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
margin: auto;
display: block;
}
.parallax_img02 .inner h2{
font-size: 6rem;
line-height: 8rem;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.parallax_img02 .inner p{
    margin: 2rem auto;
    text-align: center;
    color: #fff;
    line-height: 2.5rem;
}
/*MOBILE*/
@media only screen and ( max-width : 768px ) {
.top01{
margin: 10rem auto;
width: 98%;
}
.top01 dl {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
}
.top01 dt {
width: 100%;
border-bottom: 1px solid #ad0718;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
.top01 dd {
width: 100%;
border-bottom: 1px solid #fccf2c;
margin-bottom: 3.5rem;
padding-bottom: 1rem;
font-size: 1.8rem;
}
.shoplink {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.banner_area{
	margin-top:5rem;
}
.slider {
margin: 10px auto;
width: 100%;
}
.top02{
margin: 10rem auto;
width: 98%;
display: none;
}
.top03{
margin: 10rem auto;
width: 98%;
}
.top03 ul {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.top03 li {
width: 48%;
margin:1%;
}
.parallax_img01 img {
width: 115px;
top: 73%;
left: 50%;
}
.parallax_img01 .top_box{
width: 100%;
margin: 0 auto;
position: absolute;
top: 39%;
left: 50%;
text-align: center;
}
div.parallax .top_box h2 {
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
}
.top_box p {
color: #fff;
font-size: 1.8rem;
line-height: 2.5rem;
font-weight: normal;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
text-align: center;
}
.parallax_img02 .inner {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
margin: auto;
display: block;
height: 40vh;
}
.parallax_img02 .inner h2{
font-size: 2.2rem;
line-height: 4rem;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.top04{
margin: 10rem auto;
width: 98%;
}
.top04 ul {
width: 100%;
display: flex;
flex-direction: column;
}
.top04 li {
width: 100%;
margin: 5% 0;
text-align: center;
}
.top05 ul {
width: 100%;
display: flex;
flex-direction: column;
}
.top05{
margin: 10rem auto;
width: 98%;
}
.top05 li {
width: 98%;
margin: 0% 0 10%;
}
}