@charset "utf-8";
a, a:hover{ text-decoration: none;}
a{outline: none;}
body *{font-family: 'Noto Serif JP', sans-serif; }

p{ font-size: 18px;}

::selection { background: #000; color: #fff;}
::-moz-selection { background: #000; color: #fff;}
.en, .en *{font-family: 'Syncopate', sans-serif;}
.jp, .jp *{font-family: 'Kosugi', sans-serif;}

.pagetop:a:hover{ background: #fff;}
.pagetop:a span, 
.pagetop:a span::before{ color: #c59984; text-decoration: none !important;}
.pagetop:a{ text-align:none; box-shadow: 0 0 0 1px #c59984 inset;}
.pagetop:a:hover { box-shadow: 0 0 0 6px #c59984 inset;}

.inner{ padding: 0 5%;}

/*-------------------------
 背景
---------------------------*/
#article{ background-position: 100% 100%; box-shadow: 0 4px 15px #aaa;}

#article.main1, 
#article.main2, 
#article.main3, 
#article.main4, 
#article.main5, 
#article.main6,
#article.main7,
#article.main8,
#article.main9{ -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition:0.3s ease-in-out;}

@media screen and (max-width: 800px) {
#article.main1, 
#article.main2, 
#article.main3, 
#article.main4, 
#article.main5, 
#article.main6,
#article.main7,
#article.main8,
#article.main9{ -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;}

#article{ width: 90%; margin-left: 10%;}

#article.main1, 
#article.main2, 
#article.main3, 
#article.main4, 
#article.main5, 
#article.main6 { width: 70%; margin-left:30%;}

#article.main2 #mainArea{ background: rgba(255,255,255,0.8);}
#article.main4 #mainArea,
#article.main5 #mainArea,
#article.main6 #mainArea
#article.main7 #mainArea,
#article.main8 #mainArea,
#article.main9 #mainArea{ background: rgba(255,255,255,0.8);}

}


/*-------------------------
 #fixArea
---------------------------*/
#fixArea { width: 50%; position: fixed; left:3%; top: 20%; margin-top: 0; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;}
@media screen and (max-width: 1500px) { #fixArea{width: 40%; left: 2%;}}

@media screen and (max-width: 800px) {
#fixArea{width: 50%; left: -4%; top: 1%; z-index: 10000;}
.main1 #fixArea{ top: 25%; left: 0%;}

}




/*-------------------------
 #mainArea
---------------------------*/
#mainArea { width: 700px; float: right; margin-right:50px; box-shadow: 0 4px 15px #aaa; background: #fff;}
@media screen and (max-width: 1500px) { #mainArea{width: 700px;}}
@media screen and (max-width: 1300px) { #mainArea{width: 600px;}}
@media screen and (max-width: 1000px) { #mainArea{width: 500px; margin-right: 20px;}}
@media screen and (max-width: 800px) { #mainArea{width: 100%; margin-right: 0; box-shadow: 0 0 0 #aaa;}}

/*-------------------------
 #main1
---------------------------*/
#main1 { position: relative; margin-bottom: 100px;}
#main1 #mv{ width: 100%; float: left; position: relative; overflow: hidden; background: #fff;}

#main1 #mv .image{ width: 100%; float:left; margin: 120px 0 0; z-index: 10; padding: 0 34%; border-bottom: solid 1px #ddd; position: relative; overflow: hidden;}
/**/
#main1 #mv .image img{ width: 100%; height: auto;}
#main1 #mv .image .mvBk { display: block; width: 100%; height: 100%; position: absolute; left:0; top: 100%; background: url(../../img/main1/main1.gif) 50% 100% no-repeat; background-size: auto 100%; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}
#main1 #mv.setView .image .mvBk{ top: 0;}



/**/
#main1 #mv .back{ width: 33.333%; height: 100%; position:absolute; display: block; height: 100%;}
#main1 #mv .bk1{ right: 0; background: url(../../img/main1/1.gif) repeat-y; top: 100%; background-position: 0 0; -webkit-animation: bka 1400s linear infinite; animation: bka 1400s linear infinite; background-size:100% auto; -webkit-transition:0.8s 0.2s ease-in-out; -moz-transition:0.8s 0.2s ease-in-out; -o-transition:0.8s 0.2s ease-in-out; transition:0.8s 0.2s ease-in-out;}

#main1 #mv .bk2{ right:33.333%; background: url(../../img/main1/2.gif) repeat-y; top: 100%; background-position: 0 0; -webkit-animation: bka 1200s linear infinite; animation: bka 1200s linear infinite; background-size:100% auto; -webkit-transition:0.8s 0.6s ease-in-out; -moz-transition:0.8s 0.6s ease-in-out; -o-transition:0.8s 0.6s ease-in-out; transition:0.8s 0.6s ease-in-out;}

#main1 #mv .bk3{ right:66.666%; background: url(../../img/main1/3.gif) repeat-y; top: 100%; background-position: 0 0; -webkit-animation: bka 1000s linear infinite; animation: bka 1000s linear infinite; background-size:100% auto; background-size:100% auto; -webkit-transition:0.8s 1.2s ease-in-out; -moz-transition:0.8s 1.2s ease-in-out; -o-transition:0.8s 1.2s ease-in-out; transition:0.8s 1.2s ease-in-out;}
#main1 #mv.setView .bk1, 
#main1 #mv.setView .bk2, 
#main1 #mv.setView .bk3{ top: 0;}

@-webkit-keyframes bka {
from { background-position: 0  0;}
to {background-position: 0 -100000px;}
}
@keyframes bka {
from { background-position: 0  0;}
to {background-position: 0 -100000px;}
}
/**/
#main1 h1{ font-size: 32px; text-align: center; padding: 30px 0 50px; font-weight: bold;}
#main1 h1 span { display: block; font-size: 16px;}
#main1 h1 img{ width: 70px; height: auto; margin-top: 10px;}


@media screen and (max-width: 800px) {
#main1 #mv{ height: 65vh;}

#main1 #mv .image{height: 45vh; margin: 20vh 0 0; padding: 0 0%;}
#main1 #mv .back{ width: 50%;}
#main1 #mv .bk3{ display: none;}
#main1 #mv .bk2{ right:50%;}
    
#main1 h1{ font-size: 5.0vw; padding: 15px 0 50px;}
#main1 h1 span { font-size: 2.4vw;}
#main1 h1 img{ width: 40px; margin-top: 15px;}

}







/*-------------------------
 #共通
---------------------------*/
.pageh2{ margin-bottom: 50px;}
.pageh2 .jp{ font-size: 20px; font-weight: bold;}
.pageh2 .en{ color: #999; margin-left: 80px; display: inline-block; position: relative;}
.pageh2 .en::before{ position: absolute; left: -55px; top: 50%; content: "";  display: block; width: 50px; height: 1px; background: #aaa;}

@media screen and (max-width: 800px) {
.pageh2 .jp{ font-size: 5.8vw; letter-spacing: 0; display: block;}
.pageh2 .en{ color: #777; margin-left: 30px;}
.pageh2 .en::before{ position: absolute; left: -28px; width: 20px; background: #999;}
}


/**/
.pageh3{
     padding:0 3% 0;
    font-size: 50px; font-weight: bold; line-height: 1.4em; margin: 40px 0;
  background: linear-gradient( to right, rgba(0,0,0,1) 1%, rgba(120,120,120,1) 50% );
  -webkit-background-clip: text;
  color: transparent;
  -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition:0.3s ease-in-out;
}

@media screen and (min-width: 801px) {
.pageh3{padding:50px 3% 0; opacity: 0;}
.pageh3.setView{ padding-top: 0; opacity: 1;}
}

@media screen and (max-width: 800px) {
.pageh2{ margin-bottom: 20px;}
.pageh3{padding:20px 0% 0;font-size: 6.0vw; margin: 0px 0 40px;}
}










/**/
.pageInfo{ position: relative; background: #eee;}

.pageInfo{ width: 90%; float:left; margin: 5%; padding: 3% 5% 140px;}
.pageInfo > b{ display: block; font-size: 20px; line-height: 1.6em; margin-bottom: 5%;}
.pageInfo .accBtn{line-height: 30px; width: 40%; height: 30px; position: absolute; left: 5%; bottom: 20px; cursor: pointer; box-shadow: 0 0 1px #fff; text-align: center; background: rgba(255,255,255,0.3);  -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out; display: block;}

.pageInfo .accBtn.down { background: rgba(0,0,0,0.5); box-shadow: 2px 20px 50px #fff;}
.pageInfo .accBtn:hover { background: rgba(255,255,255,0.8);}

.pageInfo .accBtn:before{ content: "詳しく見る";}
.pageInfo .accBtn.down:before{ content: "とじる"; color: #fff;}
.pageInfo .accBtn.down:hover:before{ color: #000;}

.pageInfo .accBox{ width: 100%; float:left; display:none;}
.pageInfo .accBox b{ font-size: 18px;}
.pageInfo .lT, 
.pageInfo .lB, 
.pageInfo .lL, 
.pageInfo .lR{ position: absolute;  background: #fff; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}

.pageInfo .lT{ width: 0; height: 1px; top: 3%; left: 2%;}
.pageInfo .lB{width: 0; height: 1px; bottom: 3%; right: 2%;}
.pageInfo .lL{width: 1px; height: 0; bottom: 3%; left: 2%;}
.pageInfo .lR{width: 1px; height: 0; top: 3%; right: 2%;}

.pageInfo.setView .lT, 
.pageInfo.setView .lB{ width: 96%;}
.pageInfo.setView .lL, 
.pageInfo.setView .lR{ height:94%;}

.pageInfo:hover .lT{ top: -6%; background: #000;}
.pageInfo:hover .lB{ bottom: -6%; background: #000;}
.pageInfo:hover .lL{ height: 112%; bottom: -6%; background: #000;}
.pageInfo:hover .lR{ height: 112%; top: -6%; background: #000;}

.pageInfo.down2 .lT, 
.pageInfo.down2:hover .lT{ top: 0.5%; left: 1%; width: 98%; background: #fff;}
.pageInfo.down2 .lB, 
.pageInfo.down2:hover .lB{ bottom: 0.5%; right: 1%; width: 98%; background: #fff;}
.pageInfo.down2 .lL, 
.pageInfo.down2:hover .lL{ height: 99%; bottom:0.5%; left: 1%; background: #fff;}
.pageInfo.down2 .lR, 
.pageInfo.down2:hover .lR{ height: 99%; top:0.5%; right: 1%; background: #fff;}

@media screen and (max-width: 800px) {
.pageInfo > b{ font-size: 16px;}

}


/*-------------------------
 #main2
 About
---------------------------*/
#main2 { padding-bottom: 0px;}
#main2 p{ width: 100%; float: left; margin-bottom: 250px; padding: 0 10%;}
#main2 p > *{ display: block; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition:0.3s ease-in-out;}

@media screen and (min-width: 801px) {
#main2 p > *{ opacity: 0; margin-top: 20px;}
#main2 p.setView > *{ opacity: 1; margin-top: 0px;}
}

#main2 p b{ font-size: 20px; margin-bottom: 5px;}
#main2 p span{ font-size: 16px; padding-bottom: 15px; line-height: 2.0em;}
#main2 p a{ display: inline-block; line-height: 1.4em; padding: 10px 20px; background: #000; color: #fff; text-decoration: none; -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; transition:0.1s ease-in-out;}

#main2 p a:hover{ box-shadow: 0 0 0 20000px #000; opacity: 0.9; letter-spacing: 3px;}
#main2 p a span { display: block; color: #fff;}


@media screen and (max-width: 800px) {
#main2 p{ padding: 0 0%;}
}
@media screen and (max-width:600px) {
#main2 p b{ font-size: 15px; letter-spacing: 0;}
#main2 p span{ font-size: 14px; padding-bottom: 5px; line-height: 1.8em;}
#main2 p a{font-size: 14px; display: block; margin-top: 20px !important;}
#main2 p a br{ display: none;}
}




/**/

/**/
#article .main2back{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; display: block; background:url(../../img/main2_a/bk.jpg) 0 50% no-repeat; background-size: cover; opacity: 0; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;}
#article.main2 .main2back{ opacity: 0.7;}


#article .main8back{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; display: block; background:url(../../img/main8/bk.jpg) 80% 60% no-repeat; background-size: cover; opacity: 0; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;}
#article.main8 .main8back{ opacity: 0.7;}

#article .main9back{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; display: block; background:url(../../img/main9/bk.jpg) 100% 100% no-repeat #eddabf; background-size: cover; opacity: 0; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;}
#article.main9 .main9back{ opacity: 0.7;}

#article .main7back{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; display: block; background:url(../../img/main7/bk.jpg) 100% 100% no-repeat; background-size: cover; opacity: 0; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;}
#article.main7 .main7back{ opacity:1;}



#article .main1back{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; display: block; background:url(../../img/main1/back.gif) 0 50% repeat; background-size: 60% auto; opacity: 0;}
#article.main1 .main1back{ opacity: 0.2;}

#article .mainspback{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -2; opacity: 0; display: none; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;}





@media screen and (max-width: 800px) {
#article .main1back{  background-size: 50% auto;}
#article.main1 .main1back{ opacity: 0.6;}


#article .main2back, 
#article .main7back, 
#article .main8back, 
#article .main9back{ position:fixed;}

#article .main2back{ background-size: 180% auto; left: -10%;}

#article .mainspback{  display: block;}
#article.main3 .mainspback{ background: #b1dbc7; opacity: 1;}
#article.main4 .mainspback{ background: url(../../img/sandwich/bk.jpg) 50% 0 no-repeat; background-size: 100% 100%; opacity: 1;}
#article.main5 .mainspback{ background: #efefef; opacity: 1;}
#article.main6 .mainspback{ background: #ffd2d3; opacity: 1;}

}


/*----------------------
 #main7
　スポンサー
----------------------*/
#main7 { margin-top: 200px;}
#main7 .inner{}
#main7 .inner dl{ width: 100%; float: left; padding: 3%;}
#main7 .inner dl > *{ width: 100%; float: left;}
#main7 .inner dl dt{ background: #333; color: #fff; padding: 10px 3%; border-radius: 10px; margin: 30px 0 5px;}

#main7 .inner dl dd{ margin: 10px 0;}
#main7 .inner dl dd a{ margin: 15px 0; display: block; float: left; text-decoration: none; border: solid 1px #eee; box-shadow: 0 3px 6px #ccc; border-radius: 4px; padding: 20px 3%;}
#main7 .inner dl dd a:hover{ box-shadow: 0 0 0 4px #444; border: solid 1px #444;}

#main7 .inner dl a .image{ display: inline-block; width: 18%; float: left; border-radius: 100%; border: solid 1px #bbb; overflow: hidden;}
#main7 .inner dl a .image img{ width: 100%; height: auto;}
#main7 .inner dl a .txt{ display: inline-block; width: 76%; float: right;}
#main7 .inner dl a .txt b{ display: block; font-size: 16px;}
#main7 .inner dl a .txt span{ display: block; margin-bottom: 8px;}
#main7 .inner dl dd a:hover .txt span{ text-decoration: underline;}


@media screen and (max-width: 800px) {
#main7 .inner dl dd a{ padding: 10px 2%;}

#main7 .inner dl a .txt{  font-size: 11px; line-height: 1.4em;}
#main7 .inner dl a .txt b{ font-size: 14px;}
#main7 .inner dl a .txt span{ margin-bottom: 4px;}

}













/*-------------------------
 #main8
　コンセプト
---------------------------*/
#main8 { padding-bottom: 250px; margin-top: 200px;}
#main8 .pageInfo{ background:url(../../img/main8/image2.jpg) 0 100% no-repeat #cee1ed; background-size: 100% auto;}

/*-------------------------
 #main9
　メッセージ
---------------------------*/
#main9 { padding-bottom: 250px;}
#main9 .pageInfo{ background:url(../../img/main9/image.jpg) 0 100% no-repeat #eddabf; background-size: 100% auto;}

/*-------------------------
 #main10
　最後
---------------------------*/
#main10 { padding-bottom: 30px;}
#main10 p{ font-size: 12px;}









/*-------------------------
 #menu
---------------------------*/
.menuInfo{}
.menuInfo a{ display: block;}
.menuInfo .day{ position: absolute; font-size: 3.6vW; left: 0; top: -0.8em; letter-spacing: 0; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}
.menuInfo .category{ position: absolute; color: #fff; font-size: 5.8vw; left: 0.4em; top: 0.6em; font-weight: bold; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}

@media screen and (min-width: 1200px) {
.menuInfo .day{ font-size: 32px; top: -12px;}
.menuInfo .category{ font-size: 60px;}
}
@media screen and (min-width: 701px) and (max-width: 1199px) {
.menuInfo .day{ font-size: 2.8vw;}
}
@media screen and (max-width: 500px) {
.menuInfo .day{ top: -0.8em; left:0.4em;}
}
.menuInfo:hover .day{ color: #fff; top: 4px;}

.menuInfo a:hover .day{ top: 2%;
margin-left: -10%;
color: #fff;
transform: scale(0.7,0.7);
-moz-transform: scale(0.7,0.7);
-webkit-transform: scale(0.7,0.7);
-o-transform: scale(0.7,0.7);
-ms-transform: scale(0.7,0.7);
}
.menuInfo a:hover .category{ top: 5%;}

.menuInfo .image{}
.menuInfo .image img{}
.menuInfo .image .pc{ display: block;}
.menuInfo .image .sp{ display: none;}

.menuInfo .lT, 
.menuInfo .lB, 
.menuInfo .lL, 
.menuInfo .lR{ position: absolute;  background: #fff; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}

.menuInfo .lT{ width: 0; height: 1px; top: 3%; left: 2%;}
.menuInfo .lB{width: 0; height: 1px; bottom: 3%; right: 2%;}
.menuInfo .lL{width: 1px; height: 0; bottom: 3%; left: 2%;}
.menuInfo .lR{width: 1px; height: 0; top: 3%; right: 2%;}

.menuInfo.setView .lT, 
.menuInfo.setView .lB{ width: 96%;}
.menuInfo.setView .lL, 
.menuInfo.setView .lR{ height:94%;}

.menuInfo:hover .lT{ width: 106%; height: 6px; top: -3%; left:-3%; background: #000;}
.menuInfo:hover .lB{ width: 106%; height: 6px; bottom: -3%; right:-3%; background: #000;}
.menuInfo:hover .lL{ height: 106%; width: 6px; bottom: -3%; left:-3%; background: #000;}
.menuInfo:hover .lR{ height: 106%; width: 6px; top: -3%; right:-3%; background: #000;}


@media screen and (max-width: 600px) {
.menuInfo a{ margin:50px auto;}
.menuInfo .day{ font-size: 3.2vW; top: -1.8em; }


.menuInfo .image .pc{ display: none;}
.menuInfo .image .sp{ display: block;}

}

/*---------------------------------------------*/

.menuBnr { padding-bottom: 80px;}


/*background*/
#article.main1 { background: #fff;}
#article.main2 { background: none;}
#article.main3 { background: #b1dbc7;}
#article.main4 { background: url(../../img/sandwich/bk.jpg) 50% 0 no-repeat; background-size:cover;}
#article.main5 { background: #efefef;}
#article.main6 { background: #ffd2d3;}
#article.main7 { background: #fff;}
#article.main8 { background: #fff;}
#article.main9 { background: #fff;}
/**/

#article.main1 .main3back, 
#article.main5 .main3back, 
#article.main6 .main3back, 
#article.main7 .main3back,
#article.main8 .main3back, 
#article.main9 .main3back { display: none;}

#article.main1 .main4back, 
#article.main2 .main4back, 
#article.main6 .main4back, 
#article.main7 .main4back,
#article.main8 .main4back, 
#article.main9 .main4back { display: none;}

#article.main1 .main5back, 
#article.main2 .main5back, 
#article.main3 .main5back, 
#article.main7 .main5back,
#article.main8 .main5back, 
#article.main9 .main5back { display: none;}

#article.main1 .main6back, 
#article.main2 .main6back, 
#article.main3 .main6back, 
#article.main4 .main6back,
#article.main8 .main6back, 
#article.main9 .main6back { display: none;}


/*----------------------
おにぎり
----------------------*/
#article .main3back{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; display: block;}

#article .main3back span { display: block; position: fixed;  -webkit-transition: 1.6s ease-in-out; -moz-transition: 1.6s ease-in-out; -o-transition: 1.6s ease-in-out; transition:1.6s ease-in-out;}
#article .main3back span img{ width: 100%; height: auto;}

#article .main3back .b1{
width: 14%;
max-width: 300px;
left: -40%;
top: 100%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b1{
left: 38%;
top: 1%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b1{
left: -70%;
top: -128%;
transform: rotate(640deg);
}
/**/

#article .main3back .b2{
width: 14%;
max-width: 300px;
left: -10%;
top: 100%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b2{
left: -1%;
top: -2%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b2{
left: -170%;
top: -118%;
transform: rotate(640deg);
}
/**/

#article .main3back .b3{
width: 14%;
max-width: 300px;
left: -20%;
top: 100%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b3{
left: 15%;
top: 20%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b3{
left: -110%;
top: -112%;
transform: rotate(640deg);
}
/**/

#article .main3back .b4{
width: 14%;
max-width: 300px;
left: 20%;
top: 100%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b4{
left: 28%;
top: 38%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b4{
left: -110%;
top: -108%;
transform: rotate(640deg);
}
/**/

#article .main3back .b5{
width: 14%;
max-width: 300px;
left: 20%;
top: 100%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b5{
left: 19%;
top: 62%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b5{
left: -180%;
top: -108%;
transform: rotate(640deg);
}
/**/

#article .main3back .b6{
width: 14%;
max-width: 300px;
left: 20%;
top: 101%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b6{
left: -2%;
top: 48%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b6{
left: -44%;
top: -102%;
transform: rotate(640deg);
}
/**/
/**/

#article .main3back .b7{
width: 14%;
max-width: 300px;
left: 10%;
top: 101%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b7{
left: 2%;
top: 77%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b7{
left: -100%;
top: -102%;
transform: rotate(640deg);
}
/**/

#article .main3back .b8{
width: 14%;
max-width: 300px;
left: 10%;
top: 101%;
transform: rotate(-640deg);
}
#article.main3 .main3back .b8{
left: 36%;
top: 87%;
transform: rotate(-40deg);
}
#article.main4 .main3back .b8{
left: -56%;
top: -102%;
transform: rotate(640deg);
}
/**/








@media screen and (max-width: 800px) {

#article .main3back .b1{width: 26%;}
#article .main3back .b2{width: 26%;}
#article .main3back .b3{width: 26%;}
#article .main3back .b4{width: 26%;}
#article .main3back .b5{width: 26%;}
#article .main3back .b6{width: 26%;}
#article .main3back .b7{width: 26%;}
#article .main3back .b8{width: 26%;}

#article.main3 .main3back .b1{left: 15%; top: 14%;}
#article.main3 .main3back .b3{left: -15%; top: 20%;}
#article.main3 .main3back .b4{left: 22%; top: 36%;}

}



@media screen and (max-width: 800px) {
#article .main5back .b1{width: 58%;}
#article .main5back .b2{width: 60%;}
#article .main5back .b3{width: 55%;}
#article .main5back .b4{width: 55%;}
#article .main5back .b5{width: 48%;}
    
#article.main5 .main5back .b1{left: -10%; top: -10%;}
#article.main5 .main5back .b2{left: 24%; bottom: 6%;}
#article.main5 .main5back .b3{left: -15%; bottom: -18%;}
#article.main5 .main5back .b4{left: 40%; top: 15%;}
#article.main5 .main5back .b5{left:-20%; top:30%;}
    
}





/*----------------------
サンドイッチ
----------------------*/
#article .main4back{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; display: block;}

#article .main4back span { display: block; position: fixed;  -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}
#article .main4back span img{ width: 100%; height: auto;}

#article .main4back .b1{
width: 10%;
max-width: 200px;
left: -40%;
top: 100%;
transform: rotate(40deg);
}
#article.main4 .main4back .b1{
left: 34%;
top: -5%;
transform: rotate(0deg);
}
#article.main5 .main4back .b1{
left: -70%;
top: -108%;
transform: rotate(-40deg);
}
/**/
#article .main4back .b2{
width: 10%;
max-width: 200px;
left: -20%;
top: 100%;
transform: rotate(-40deg);
 -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;
}
#article.main4 .main4back .b2{
left: 14%;
top: 6%;
transform: rotate(0deg);
}
#article.main5 .main4back .b2{
left: -50%;
top: -104%;
transform: rotate(-40deg);
}

/**/
#article .main4back .b3{
width: 10%;
max-width: 200px;
left: -60%;
top: 110%;
transform: rotate(-40deg);
}
#article.main4 .main4back .b3{
left: -2%;
top: -2%;
transform: rotate(0deg);
}
#article.main5 .main4back .b3{
left: 10%;
top: -104%;
transform: rotate(-40deg);
}


/**/
#article .main4back .b4{
width: 18%;
max-width: 400px;
left: -100%;
top: 110%;
transform: rotate(-170deg);
 -webkit-transition: 1.0s ease-in-out; -moz-transition: 1.0s ease-in-out; -o-transition: 1.0s ease-in-out; transition:1.0s ease-in-out;
}
#article.main4 .main4back .b4{
left: -4%;
top: 11%;
transform: rotate(0deg);
}
#article.main5 .main4back .b4{
left: 10%;
top: -102%;
transform: rotate(-140deg);
}

/**/
#article .main4back .b5{
width: 12%;
max-width: 230px;
left: 20%;
top: 110%;
transform: rotate(120deg);
 -webkit-transition: 1.0s ease-in-out; -moz-transition: 1.0s ease-in-out; -o-transition: 1.0s ease-in-out; transition:1.0s ease-in-out;
}
#article.main4 .main4back .b5{
left: 38%;
top: 32%;
transform: rotate(-90deg);
}
#article.main5 .main4back .b5{
left: 90%;
top: -102%;
transform: rotate(-140deg);
}

/**/
#article .main4back .b6{
width: 12%;
max-width: 180px;
left: 10%;
top: 115%;
transform: rotate(60deg);
 -webkit-transition: 1.2s ease-in-out; -moz-transition: 1.2s ease-in-out; -o-transition: 1.2s ease-in-out; transition:1.2s ease-in-out;
}
#article.main4 .main4back .b6{
left: 30%;
top: 60%;
transform: rotate(-10deg);
}
#article.main5 .main4back .b6{
left: 70%;
top: -112%;
transform: rotate(100deg);
}

/**/
#article .main4back .b7{
width: 18%;
max-width: 400px;
left: 30%;
top: 115%;
transform: rotate(60deg);
 -webkit-transition: 1.4s ease-in-out; -moz-transition: 1.4s ease-in-out; -o-transition: 1.4s ease-in-out; transition:1.4s ease-in-out;
}
#article.main4 .main4back .b7{
left: 6%;
top: 54%;
transform: rotate(-20deg);
}
#article.main5 .main4back .b7{
left: 20%;
top: -142%;
transform: rotate(100deg);
}

/**/
#article .main4back .b8{
width: 9%;
max-width: 220px;
left: -50%;
top: 125%;
transform: rotate(160deg);
 -webkit-transition: 1.6s ease-in-out; -moz-transition: 1.6s ease-in-out; -o-transition: 1.6s ease-in-out; transition:1.6s ease-in-out;
}
#article.main4 .main4back .b8{
left: -2%;
top: 78%;
transform: rotate(-20deg);
}
#article.main5 .main4back .b8{
left: 0%;
top: -152%;
transform: rotate(100deg);
}

/**/
#article .main4back .b9{
width: 8%;
max-width: 180px;
left: 30%;
top: 125%;
transform: rotate(10deg);
 -webkit-transition: 1.6s ease-in-out; -moz-transition: 1.6s ease-in-out; -o-transition: 1.6s ease-in-out; transition:1.6s ease-in-out;
}
#article.main4 .main4back .b9{
left: 20%;
top: 86%;
transform: rotate(-20deg);
}
#article.main5 .main4back .b9{
left: 0%;
top: -152%;
transform: rotate(100deg);
}

/**/
#article .main4back .b10{
width: 8%;
max-width: 180px;
left: 30%;
top: 125%;
transform: rotate(10deg);
 -webkit-transition: 1.6s ease-in-out; -moz-transition: 1.6s ease-in-out; -o-transition: 1.6s ease-in-out; transition:1.6s ease-in-out;
}
#article.main4 .main4back .b10{
left: 34%;
top: 92%;
transform: rotate(-20deg);
}
#article.main5 .main4back .b10{
left: 40%;
top: -152%;
transform: rotate(100deg);
}


@media screen and (max-width: 800px) {

#article .main4back .b1{width: 20%;}
#article .main4back .b2{width: 20%;}
#article .main4back .b3{width: 20%;}
#article .main4back .b4{width: 24%;}
#article .main4back .b5{width: 26%;}
#article .main4back .b6{width: 22%;}
#article .main4back .b7{width: 24%;}
#article .main4back .b8{width: 18%;}
#article .main4back .b9{width: 18%;}
#article .main4back .b10{width: 18%;}

#article.main4 .main4back .b1{left: 24%; top: -2%;}
#article.main4 .main4back .b2{left: 12%; top: 12%;}
#article.main4 .main4back .b3{left: -2%; top: -2%;}
#article.main4 .main4back .b4{left: -4%; top: 28%;}
#article.main4 .main4back .b5{left: 24%; top: 36%;}
#article.main4 .main4back .b6{left: 45%; top: 60%;}
#article.main4 .main4back .b7{left: -6%; top: 50%;}
#article.main4 .main4back .b8{left: 24%; top: 70%;}
#article.main4 .main4back .b9{left: -2%; top: 82%;}
#article.main4 .main4back .b10{left: 22%; top: 92%;}

}




/*----------------------
ピザ
----------------------
*/
#article .main5back{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; display: block;}

#article .main5back span { display: block; position: fixed;  -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}
#article .main5back span img{ width: 100%; height: auto;}

#article .main5back .b1{
width: 38%;
max-width: 440px;
left: -30%;
top: 100%;
transform: rotate(130deg);
-moz-transform: rotate(130deg);
-webkit-transform: rotate(130deg);
-o-transform: rotate(130deg);
-ms-transform: rotate(130deg);
}

#article.main5 .main5back .b1{
left: -14%;
top: -20%;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
#article.main6 .main5back .b1{
left: -60%;
top: -108%;
transform: rotate(-130deg);
-moz-transform: rotate(-130deg);
-webkit-transform: rotate(-130deg);
-o-transform: rotate(-130deg);
-ms-transform: rotate(-130deg);
}

/**/
#article .main5back .b2{
width: 28%;
max-width: 360px;
left: 70%;
bottom: -110%;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
 -webkit-transition: 1.4s ease-in-out; -moz-transition: 1.4s ease-in-out; -o-transition: 1.4s ease-in-out; transition:1.4s ease-in-out;
}

#article.main5 .main5back .b2{
left: 30%;
bottom: -25%;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
#article.main6 .main5back .b2{
left: 60%;
bottom: 110%;
transform: rotate(160deg);
-moz-transform: rotate(160deg);
-webkit-transform: rotate(160deg);
-o-transform: rotate(160deg);
-ms-transform: rotate(160deg);
}

/**/
#article .main5back .b3{
width: 25%;
max-width: 340px;
left: -30%;
bottom: -110%;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);

 -webkit-transition: 1.0s ease-in-out; -moz-transition: 1.0s ease-in-out; -o-transition: 1.0s ease-in-out; transition:1.0s ease-in-out;
}

#article.main5 .main5back .b3{
left: -6%;
bottom: -12%;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
#article.main6 .main5back .b3{
left: 10%;
bottom: 110%;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}

/**/
#article .main5back .b4{
width: 22%;
max-width: 300px;
left: 20%;
top: 100%;
transform: rotate(-150deg);
-moz-transform: rotate(-150deg);
-webkit-transform: rotate(-150deg);
-o-transform: rotate(-150deg);
-ms-transform: rotate(-150deg);
}

#article.main5 .main5back .b4{
left: 28%;
top: 25%;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
#article.main6 .main5back .b4{
left: 45%;
top: -101%;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/**/

#article .main5back .b5{
width: 18%;
max-width: 240px;
left: 20%;
top: 100%;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}

#article.main5 .main5back .b5{
left: 26%;
top: -9%;
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}
#article.main6 .main5back .b5{
left: 32%;
top: -140%;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(-20deg);
}

/*デカモニター*/
@media screen and (min-width: 1600px) {
#article .main5back .b1{
width: 44%;
max-width: 600px;
}
#article .main5back .b2{
width: 34%;
bottom: -30%;
max-width: 480px;
}
#article.main5 .main5back .b2{
left: 40%;
}
#article .main5back .b3{
width: 36%;
max-width: 500px;
}
#article .main5back .b4{
width: 30%;
max-width: 360px;
}
#article.main5 .main5back .b4{
left: 36%;
top: 25%;
}
#article .main5back .b5{
width: 24%;
max-width: 360px;
}
#article.main5 .main5back .b5{
left: 48%;
top: -18%;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
}


@media screen and (max-width: 800px) {
#article .main5back .b1{width: 58%;}
#article .main5back .b2{width: 60%;}
#article .main5back .b3{width: 55%;}
#article .main5back .b4{width: 55%;}
#article .main5back .b5{width: 48%;}
    
#article.main5 .main5back .b1{left: -10%; top: -10%;}
#article.main5 .main5back .b2{left: 24%; bottom: 6%;}
#article.main5 .main5back .b3{left: -15%; bottom: -18%;}
#article.main5 .main5back .b4{left: 40%; top: 15%;}
#article.main5 .main5back .b5{left:-20%; top:30%;}
    
}




/*----------------------
パフェ
----------------------*/
#article .main6back{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; display: block;}

#article .main6back span { display: block; position: fixed;  -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition:0.6s ease-in-out;}
#article .main6back span img{ width: 100%; height: auto;}

#article .main6back .b1{
width: 18%;
max-width: 300px;
left: -40%;
top: 100%;
transform: rotate(40deg);
}
#article.main6 .main6back .b1{
left: 34%;
top: -5%;
transform: rotate(0deg);
}
#article.main7 .main6back .b1{
left: -70%;
top: -108%;
transform: rotate(-40deg);
}
/**/
#article .main6back .b2{
width: 18%;
max-width: 300px;
left: -20%;
top: 100%;
transform: rotate(-40deg);
 -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition:0.8s ease-in-out;
}
#article.main6 .main6back .b2{
left: 14%;
top: 1%;
transform: rotate(0deg);
}
#article.main7 .main6back .b2{
left: -50%;
top: -104%;
transform: rotate(-40deg);
}
/**/
#article .main6back .b3{
width: 18%;
max-width: 300px;
left: -60%;
top: 110%;
transform: rotate(-40deg);
}
#article.main6 .main6back .b3{
left: -4%;
top: -8%;
transform: rotate(0deg);
}
#article.main7 .main6back .b3{
left: 10%;
top: -104%;
transform: rotate(-40deg);
}

/**/
#article .main6back .b4{
width: 18%;
max-width: 300px;
left: -100%;
top: 110%;
transform: rotate(-170deg);
 -webkit-transition: 1.0s ease-in-out; -moz-transition: 1.0s ease-in-out; -o-transition: 1.0s ease-in-out; transition:1.0s ease-in-out;
}
#article.main6 .main6back .b4{
left: -4%;
top: 11%;
transform: rotate(0deg);
}
#article.main7 .main6back .b4{
left: 10%;
top: -102%;
transform: rotate(-140deg);
}

/**/
#article .main6back .b5{
width: 18%;
max-width: 300px;
left: 20%;
top: 110%;
transform: rotate(120deg);
 -webkit-transition: 1.0s ease-in-out; -moz-transition: 1.0s ease-in-out; -o-transition: 1.0s ease-in-out; transition:1.0s ease-in-out;
}
#article.main6 .main6back .b5{
left: 32%;
top: 32%;
transform: rotate(-90deg);
}
#article.main7 .main6back .b5{
left: 90%;
top: -102%;
transform: rotate(-140deg);
}

/**/
#article .main6back .b6{
width: 16%;
max-width: 300px;
left: 10%;
top: 115%;
transform: rotate(60deg);
 -webkit-transition: 1.2s ease-in-out; -moz-transition: 1.2s ease-in-out; -o-transition: 1.2s ease-in-out; transition:1.2s ease-in-out;
}
#article.main6 .main6back .b6{
left: 30%;
top: 66%;
transform: rotate(-10deg);
}
#article.main7 .main6back .b6{
left: 70%;
top: -112%;
transform: rotate(100deg);
}
/**/
#article .main6back .b7{
width: 16%;
max-width: 300px;
left: 30%;
top: 115%;
transform: rotate(60deg);
 -webkit-transition: 1.4s ease-in-out; -moz-transition: 1.4s ease-in-out; -o-transition: 1.4s ease-in-out; transition:1.4s ease-in-out;
}
#article.main6 .main6back .b7{
left: 6%;
top: 62%;
transform: rotate(-20deg);
}
#article.main7 .main6back .b7{
left: 20%;
top: -142%;
transform: rotate(100deg);
}
/**/
#article .main6back .b8{
width: 16%;
max-width: 300px;
left: -50%;
top: 125%;
transform: rotate(160deg);
 -webkit-transition: 1.6s ease-in-out; -moz-transition: 1.6s ease-in-out; -o-transition: 1.6s ease-in-out; transition:1.6s ease-in-out;
}
#article.main6 .main6back .b8{
left: -2%;
top: 78%;
transform: rotate(-20deg);
}
#article.main7 .main6back .b8{
left: 0%;
top: -152%;
transform: rotate(100deg);
}
/**/
#article .main6back .b9{
width: 16%;
max-width: 300px;
left: 30%;
top: 125%;
transform: rotate(10deg);
 -webkit-transition: 1.6s ease-in-out; -moz-transition: 1.6s ease-in-out; -o-transition: 1.6s ease-in-out; transition:1.6s ease-in-out;
}
#article.main6 .main6back .b9{
left: 20%;
top: 86%;
transform: rotate(-20deg);
}
#article.main7 .main6back .b9{
left: 0%;
top: -152%;
transform: rotate(100deg);
}
/**/
#article .main6back .b10{
width: 18%;
max-width: 300px;
left: 30%;
top: 125%;
transform: rotate(10deg);
 -webkit-transition: 1.6s ease-in-out; -moz-transition: 1.6s ease-in-out; -o-transition: 1.6s ease-in-out; transition:1.6s ease-in-out;
}
#article.main6 .main6back .b10{
left: 34%;
top: 92%;
transform: rotate(-20deg);
}
#article.main7 .main6back .b10{
left: 40%;
top: -152%;
transform: rotate(100deg);
}





@media screen and (max-width: 800px) {

#article .main6back .b1{width: 28%;}
#article .main6back .b2{width: 28%;}
#article .main6back .b3{width: 28%;}
#article .main6back .b4{width: 28%;}
#article .main6back .b5{width: 28%;}
#article .main6back .b6{width: 26%;}
#article .main6back .b7{width: 26%;}
#article .main6back .b8{width: 26%;}
#article .main6back .b9{width: 26%;}
#article .main6back .b10{width: 28%;}

#article.main6 .main6back .b1{left: 4%; top: 35%;}
#article.main6 .main6back .b2{left: 14%; top: 1%;}
#article.main6 .main6back .b3{left: -4%; top: -8%;}
#article.main6 .main6back .b4{left: -8%; top: 11%;}
#article.main6 .main6back .b5{left: 26%; top: 32%;}
#article.main6 .main6back .b6{left: 24%; top: 56%;}
#article.main6 .main6back .b7{left: 2%; top: 52%;}
#article.main6 .main6back .b8{left: -4%; top: 78%;}
#article.main6 .main6back .b9{left: 20%; top: 86%;}
#article.main6 .main6back .b10{left: 30%; top: 92%;}

}