@charset "utf-8";

/*　共用　*/

.hiddenSp{
visibility: hidden;
display: none;
width: 0;
height: 0;
}

.br-pc { display:none; }
.br-sp { display:block; }

/*FLEX BOX*/
.container {
display: flex;
justify-content:center;
align-items: flex-start;
align-content: stretch;
flex-wrap: wrap;
}
.item {padding:1% 2%;}

.AllBgWrap{
width: 100%;
background: url(../img/2x/bg_pizza.png);
background-size: 100%;
}

.AllBgGrayWrap{
width: 100%;
background: #333;
}
/*
#PcWrap{
width: 900px;
margin: 0 auto;
}
*/

/*　アコーディオン　*/
.accordion-container {
margin: 3% auto ;
width: 100%;
}

.accordion-title {
cursor: pointer;
font-size:18px;
line-height:32px;
padding: 20px 0px;
position: relative;
border-bottom: dotted 1px #fff;
}

.accordion-title:after {
  position: absolute;
  display: block;
  content: '';
  top: 35%;
  right: 22px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(135deg);
  transition: all .3s ease-in-out;
}

.accordion-title.open:after {
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-text {display: none;padding: 30px 10px;}
.accordion-text p{
font-size: 18px;
line-height: 32px;
}

.accordion-text p.Price{
color: #FFEC89;
text-align: right;
}



/*　ヘッダー　*/
header {
position: fixed;
width: 100%;
margin-inline: auto;
padding: 10px 0px;
font-size:18px;
color: #222;
background-color: rgba(255, 255, 255, 0.75);
z-index: 10000;
}

#HeaderWrap{
width: 100%;
margin-inline: auto;
padding: 0%;
}

#H1Wrap{
float: left;
width: 80%;
margin: 0% 0% 0% 4%;
}

h1a:link , h1a:visited {color: #333;}

header h1 {
display: inline-table;
font-size: 0.75em;/*12px; 3.2vw;*/
transition: .3s;
color: #333;
}

header img {width: 60%;}

#HdCTAWrap{
float: right;
width: 20%;
}

.CTA1 a{
position:fixed;
display: block;
top: 15px;
right: 15%;
width: 160px;
margin: 10px 0px 0px 0px;
padding: 5px;
background: #FD9D00;
border-radius: 5px;
text-align: center;
color: #fff;
font-size: 0.75em;/*12px; 3.2vw;*/
border: solid 3px #fff;
cursor: pointer;
}

.CTA1 a span{
margin: -3px 0px 0px 0px;
vertical-align: middle;
}

.CTA1 a:hover{
background: #FD6B00;
text-decoration: none;
}

.TitleH2{
width: 100%;
margin: 0% auto 3% auto;
text-align: center;
}

.TitleH2 h2{
position: relative;
display: inline-block;
padding:0.25em 1em;
font-size: 1.25em;
color: #FD9D00;
}

.TitleH2 h2:before, .TitleH2 h2:after { 
position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}

.TitleH2 h2:before {
  border-left: solid 1px #FD9D00;
  border-top: solid 1px #FD9D00;
  border-bottom: solid 1px #FD9D00;
  left: 0;
}

.TitleH2 h2:after {
border-top: solid 1px #FD9D00;
  border-right: solid 1px #FD9D00;
  border-bottom: solid 1px #FD9D00;
  right: 0;
}

.TitleH2W{
width: 100%;
margin: 0% auto;
text-align: center;
}

.TitleH2W h2{
position: relative;
display: inline-block;
padding:0.25em 1em;
color: #fff;
font-size: 1.25em;
}

.TitleH2W h2:before, .TitleH2W h2:after { 
position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}

.TitleH2W h2:before {
  border-left: solid 1px #fff;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
  left: 0;
}

.TitleH2W h2:after {
border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  right: 0;
}


/*　ハンバーガーメニュー　*/

#g-nav{
/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
position:fixed;
z-index: -1;
opacity: 0;/*はじめは透過0*/
/*ナビの位置と形状*/
top:0;
width:100%;
height: 100vh;/*ナビの高さ*/
background-color: rgba(34, 34, 34, 0.75);/*背景を少し透過させる*/
/*動き*/
transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
opacity: 1;
z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
display: none;/*はじめは非表示*/
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

#g-nav.panelactive ul {
display: block;
text-align: center; 
}
/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
text-align: center; 
}

#g-nav li a{
color: #fff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

/*ボタン外側*/
.openbtn2{
position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:10px;
right: 3%;
cursor: pointer;
width: 50px;
height:50px;
}
	
/*ボタン内側*/

.openbtn2 span{
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 0px;
height: 2px;
background-color: #FD9D00;
}


.openbtn2 span:nth-of-type(1) {
top:22px;	
width: 100%;
}

.openbtn2 span:nth-of-type(2) {
top:32px;
width:100%;
}

.openbtn2 span:nth-of-type(3) {
top:42px;
width:100%;
}


/*activeクラスが付与されると線が回転して×に*/

.openbtn2.active span:nth-of-type(1) {
top: 20px;
left: 16px;
transform: translateY(6px) rotate(-45deg);
width: 70%;
}

.openbtn2.active span:nth-of-type(2) {
top: 32px;
left: 16px;
transform: translateY(-6px) rotate(45deg);
width: 70%;
}

.openbtn2.active span:nth-of-type(3) {
display: none;
}



/*FV*/
#FvWrap{
width: 100%;
margin-inline: auto;
padding: 30% 10% 10% 10%;
background: url(../img/2x/bg_fv.jpg) no-repeat center center;
background-size: cover;
text-align: center;
}

.FvImg{
width: 50%;
margin:0% auto 5% auto;
text-align: center;
}

#FvWrap h2{
margin-inline: auto;
padding: 2% 1%;
text-align: center;
background:rgba(253, 157, 0, 0.9);
color: #fff;
text-shadow: 0px 2px 2px #fd9d00;
font-size: 4.8vw;/*18px;*/
font-family: 'Noto Serif JP', serif;
font-weight: 200;
}



/*大切な人に、食べてほしいと思えるピザを。*/
.ThemeWrap{
width: 100%;
margin-inline: auto;
padding: 10% 5%;
background: url(../img/2x/bg_theme.jpg) no-repeat center top;
background-size:cover;
}

.ThemeWrap h2{
width: 100%;
margin-inline: auto;
padding:0% 0% 3% 0%;
font-size: 4.267vw; /*16px;*/
text-align: center;
color: #fff;
font-family: 'Noto Serif JP', serif;
font-weight: 200;
text-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}

#ThemeBox{
width: 100%;
margin-inline: auto;
padding: 7%;
background: rgba(255, 255, 255, 0.75);
border-radius: 5px;
}

#ThemeBox p{
font-size: 0.875em;/*14px; 3.733vw;*/
line-height:1.875em; /*30px; 8vw;*/
color: #222;
}


/*商品ラインナップ*/
#PizzaLineupWrap{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-inline: auto;
padding: 10%;
}

.PizzaLineupLead{
width: 100%;
margin:2% auto 0% auto;
padding: 3%;
background: rgba(254,235,204, 0.75);
}

.PizzaLineupLead p{
width: 100%;
padding: 2% 0%;
font-size: 90%;/*16px; 4vw*/
text-align:center;
}

.Pizzabox{
margin: 2% 0% 4% 0%;
padding: 6%;
background: url(../img/bg_pizzaone.jpg) no-repeat center center;
background-size: cover;
border-radius: 10px;
}

.PizzaName{
margin: 5% auto;
padding: 5%;
background: rgba(255, 255, 255, 0.75);
border-radius: 5px;
}

.PizzaName dl dt{
font-size: 1em;
font-weight: bold;
text-align: center;
}

.PizzaName dl dd{
font-size: 0.9em;
font-weight: bold;
text-align: center;
}

.PizzaName ul{
list-style: none;
margin: 2% auto;
}
.PizzaName ul li{
font-size: 0.8em;
}

.CTA2 a{
display: block;
width: 100%;
padding: 3% 0%;
background: #FD9D00;
border-radius: 5px;
text-align: center;
color: #fff;
border: solid 3px #fff;
}

.CTA2 a span{
margin: -3px 0px 0px 0px;
vertical-align: middle;
}

.CTA2 a:hover{
background: #FD6B00;
text-decoration: none;
}

/*REGARO COL CUORE ７つのこだわり*/
#ObsessionWrap{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-inline: auto;
padding: 10% 7%;
background: url(../img/2x/bg_obsession.jpg) no-repeat center top;
}

#ObsessionBox{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-inline: auto;
padding: 5% 0%;
}

.ObsessionOneBox{
display: flex;
flex-wrap: wrap;
width: 100%;
margin:0% auto 3% auto;
padding: 7% 5%;
background: #fff;
border-radius: 5px;
}

.ObsessionOneBox img{
width: 100%;
border-radius: 100px;
}

.ObsessionOneTextBox{
float: right;
width: 100%;
padding: 0% 3% 0% 0%;
}

.ObsessionOneTextBox h3{
margin: 0% 0% 2% 0%;
padding: 0% 0% 2% 0%;
color: #FD6B00;
font-size:1em;/*16px; 4.267vw;*/
text-align: center;
border-bottom: dotted 1px #FD6B00;
}

.ObsessionOneTextBox p{
margin: 0%;
padding: 0%;
color: #666;
font-size:0.875em;/*14px; 3.733vw;*/
line-height: 1.5em;/*24px; 6.4vw;*/
}

.ObsessionOnePicBox{
float: left;
width: 100%;
text-align: center;
}

.ObsessionOnePicBox img{
width: 50%;
margin:5% auto 0% auto;
text-align: center;
}


/*おいしい焼き方*/
#HowtoWrap{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-inline: auto;
padding: 10%;
}

.Howtobox{
position: relative;
width: 100%;
margin: 5% 0%;
padding: 6%;
background: url(../img/bg_pizzaone.jpg) no-repeat center center;
background-size: cover;
border-radius: 5px;
}

.HowtoWbox{
width: 100%;
margin:4% 0% 0% 0%;
padding: 6%;
background: rgba(255, 255, 255, 0.8);
background-size: cover;
border-radius: 5px;
}

.StepBox{
position: absolute;
top: -14px;
left:30%;
width: 40%;
margin: 0%;
padding: 1%;
color: #fff;
text-align: center;
background: #4E3F3F;
border-radius: 100px;
}

.HowtoIcon{width: 100%;}

.HowtoIcon img{margin: 2% auto 0% auto;}


/*お知らせ*/
#InfomationWrap{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-inline: auto;
padding: 10% 5%;
}

#InfomationWrap ul{
width: 100%;
list-style: none;
}

#InfomationWrap ul li{
width: 100%;
margin: 0% auto 5% auto;
padding: 3%;
border: solid 1px #fff;
color: #fff;
}

#InfomationWrap ul li dl dt{
width: 100%;
margin: 0% auto 2% auto;
padding: 1%;
border-bottom: dotted 1px #fff;
}

#InfomationWrap ul li dl dd a{color: #fff;}
#InfomationWrap ul li dl dd a:hover{color: #FD9D00;}




/*フッター*/
footer{padding: 5% 0% 8% 0%; text-align: center; border-top: solid 1px #fff;}
footer .FooterLogo{margin: 0% auto 2% auto;}
footer .FooterLogo img{width: 15%;margin: 0% auto;}
footer p{font-size: 0.6875em;/*11px*/}
.SnsIcon{width: 100%;margin: 0% auto;text-align: center;}
.SnsIcon img{margin: 1% auto;text-align: center;}


/*
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
*/


/**********************************************************************/

#FvWrapB{
position: relative;
width: 100%;
height: 400px;
margin-inline: auto;
padding: 0%;
background-size: cover;
text-align: center;
}


.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 400px !important;
}

.swiper-slide {
/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
color: #ffffff;
width: 100%;
height: 400px;
text-align: center;
line-height: 300px;
text-align: center;
}

.swiper-wrap {
  margin: 0 calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  overflow: hidden;
}

@keyframes zoom-in {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

/*
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom-in 10s linear 0s 1 normal both;  
}
*/

.slide-text{
position: absolute;
width: 100vw;
top: 55%;
left: 50%;
font-size: 1.75em;
line-height: 2em;
font-family: 'Noto Serif JP', serif;
font-weight: 200;
text-shadow: 2px 2px 8px rgba(255, 255, 255, 1);
color: #333;
transform: translate(-50%,-50%);
}

.slide-text span{
background: rgba(255, 255, 255, 0.7);
padding: 3%;
}

.slide-text img{
object-fit: cover;
height: 180px;
width: 180px;
text-align: center;
margin: 0% auto;
padding: 0%;
}

.slide-img{
width: 100%;
height: 400px;
/*height: 100vw;*/
background: url(../img/2x/bg_fv.jpg) no-repeat center center;
background-size: cover;
}