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



html{
	 scroll-behavior: smooth;
}

/* 要素のフェードイン制御 */	
.fade_in{
	opacity : 0;
	visibility: hidden;
	transition: 1.5s;
	transform: translateY(50px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/*staff トップの調整用*/
.fade_in_02{
	opacity : 0;
	visibility: hidden;
	transition: 1.5s;
	transform: translateY(50px);
}

.active_02{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}




@media screen and (min-width:601px){
	
.wrapper{
	background-image: url("../images/background_paper_pc.png");
	background-repeat: repeat-y;
	background-size: contain;
}
	
.inner{
	max-width: 600px;
	padding: 0 10% ;
	margin: 0 auto;
}

	
	
	
/* HOME ABOUT WORKS STAFF NAV */

/* 中身 */		
.global-nav_main {
	position: fixed;
	right: -100%; /* これで隠れる */
	top: 0;
	width: 20%; /* スマホに収まるくらい */
	height: 100vh;
	padding-top: 0px;
	background-color: #A9A9A9;
	background-image: url("../images/background_nav.png");
	background-repeat: repeat-y;
	background-size: contain;	
	transition: all .6s;
	z-index: 200;
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	text-align: center;
}

.global-nav_main__list {
	width: 100%;	
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.global-nav_main__item a {
  display: block;
  padding: 5% 0;
}	

.global-nav_sub__item a {
  display: block;
}

.global-nav_sub__item img{
	margin: -2% 0 2% 0;	
		
}	
	
#list_main p{
	width: 100%;
}	
	
#list_main p img{
	width: 90%;
}
	
	
#nav_logo{
	margin: 40% 0 15% 0;
	
}
	
#nav_go_works img{
		margin: 0 0 -4px 0;
}	

#nav_go_works_05 img{
	margin: -2% 0 5% 0;
}		
	
	
/* グレーアウトの設定 */	
.black-bg_main {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
	
	
/* 表示された時用のCSS */
.nav-open_main .global-nav_main {
  right: 0;
}
.nav-open_main .black-bg_main {
  opacity: .8;
  visibility: visible;
}

	
/* ハンバーガーの三本線、クリックでバッテンになる部分 */	
/* 三本線 */	
.hamburger_main {
  position: fixed;
  right: 25px;
  top: 0;
  width: 45px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 45px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}	
		
.hamburger_main__line {
  position: absolute;
  left: 6px;
  width: 45px;
  height: 1px;
  background-color: #252525;
  transition: all .6s;
}
	
.hamburger_main__line--1 {
  top: 25px;
}
.hamburger_main__line--2 {
  top: 40px;
}
.hamburger_main__line--3 {
  top: 55px;
}


/* バッテン */		
.nav-open_main .hamburger_main__line--1 {
  transform: rotate(45deg);
  top: 40px;
  background-color: #FFFFFF;
}
.nav-open_main .hamburger_main__line--2 {
  width: 0;
  left: 50%;
}
.nav-open_main .hamburger_main__line--3 {
  transform: rotate(-45deg);
  top: 40px;
  background-color: #FFFFFF;	
}	
	
	
	
/* HOME */
/* top mainvisual */	
	
#top{
	width: 100%;
	
}
	
#top video{
	width: 100%;
	margin: 0 0 15% 0;
}

#mainvisual_pc{
	display: initial;
}	

#mainvisual_sp{
		display: none;
}	
		
/* コンテンツ制御　*/	
/* viewmore */	

.viewmore img{
	width: 25%;
}	


/* box center */	
.viewmore_box_01{
	width: 100%;
	position: relative;
}	
		
.scrolldown1{
/*描画位置*/
	position:absolute;
	left:57.5%;
	top:0;
	margin: 1.6% 0 0 0;
    /*全体の高さ*/
	height:50px;
	z-index: 10;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 7%;
	height: 1px;
	background: #FFFFFF;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.7s ease-in-out infinite;
	opacity:0;
}

	
/* box left */	
.viewmore_box_02{
	width: 100%;
	position: relative;
}	
		
.scrolldown2{
/*描画位置*/
	position:absolute;
	left:20%;
	top:0;
	margin: 1.6% 0 0 0;
    /*全体の高さ*/
	height:50px;
	z-index: 10;
}

/* 線の描写 */
.scrolldown2::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 7%;
	height: 1px;
	background: #FFFFFF;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.7s ease-in-out infinite;
	opacity:0;
}	
	
	

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
 0%{
	width:0;
    top:0;
	left: 0px ;  
    opacity: 0;
 }
 30%{
    width:20px;
    opacity: 1;
 }
 100%{
    width:0;
    top:0;
	left: 25px;  
    opacity: 0;
 }
}
	
	
	
/* contents title */		

.contents_title_box{
	width: 100%;
	margin: 0 0 5% 0;
}

.contents_title img{
	width: 35%;
	margin: 0 0 5% 0;
}


#staff_title img{
	width: 33%;	
}

#insta_title img{
	width: 60%;
	margin: 0 0 5% 0;
}




/* HOME - ABOUT */	
#about{
	width: 100%;
	margin: 5% 0 40% 0;
}	
	
#about p{
	width: 100%;
	text-align: center;
}	
	
.philosophy_title{
	width: 100%;
	margin: 0 0 8% 0;
}	

.philosophy_title img{
	width: 45%;
}		

	
	
/* HOME - WORKS */		
#works{
	width: 100%;		
	}	
	
#works p{
	width: 100%;
}	
	
#works_logo{
	width:100%;
	margin: 0 0 30% 0;
	mix-blend-mode: multiply;
}	

#works_logo img{
	width: 55%;
	margin: 5% 0 0 22.5%;
}


/* HOME - STAFF */		
	
#staff{
	width: 100%;
}	

#staff p{
	width: 100%;
}

#staff_illust{
	width: 100%;
	text-align: center;
	margin: 0 0 40% 0;
}

#staff_illust img{
	width: 80%;
}

.illust{
	mix-blend-mode: multiply;
}


/* HOME - INSTAGRAM */	
#instagram{
	width: 100%;
}	

#instagram p{
	width: 100%;
}		

#slider{
	text-align: center;
}	
	
#slider_land{
		display: none;
}	
	
#slider_pc{
	display: initial;
	width: 10%;
	max-width: 600px;
	overflow: hidden;
}
		
.insta_more{
	text-align: center;
	margin: -15% 0 30% 0;
}


/* CONTACT */			
#contact{
	width: 100%;
}	

#contact p{
	width: 100%;
	text-align: center;
}	

.decoration{
	width: 100%;
	text-align: center;
	margin: 30% 0 0 0;
}

.decoration img{
	width: 100%;
}	
	

.contact_title{
	width: 100%;
	text-align: center;
	margin: 10% 0 0 0;
}

.contact_title img{
	width: 35%;
}

	
#contact_icon{
	text-align: center;
	margin: 5% 0 15% 0;
}

#contact_icon li{
	display: inline;
	margin: 0 3%;
}

#contact_icon li img{
	width: 15%;
}	
	

/* FOOTER */	
footer{
	width: 100%;
	text-align: center;
	background-color: #9EB3BC;
}
	
.footer_logo{
	width: 100%;
}

.footer_logo img{
	width: 12%;
	margin: 2% 0;
}


#footer_icon{
	width: 100%;
	text-align: center;
}

#footer_icon li{
	display: inline;
	margin: 0 1%;
}

#footer_icon li img{
	width: 2.5%;
	margin: 0 0 1.5% 0;
}


.copy{
	width: 100%;
	text-align: center;
	background-color: #000000;
	padding: 0.5% 0;
}

.copy p{
	color:white;
	font-size: 8px;
}




/* contents ABOUT */

#about_top{
	width: 100%;
}

#about_top img{
	width: 35%;
	margin: 40% 0 50% 0;
}


#philosophy{
	width: 100%;
	text-align: center;
	margin: 0 0 50% 0;
}

.philosophy_text{
	width: 100%;
}

.philosophy_text img{
	width: 50%;
	margin: 5% 0 0 0 ;
}


#company{
	width: 100%;
}


.company_title{
	width: 100%;
}

.company_title img{
	width: 22%;
	margin: 0 0 10% 21%;
}
	
.company_info{
	width: 100%;
	text-align: center;
}

.company_info img{
	width: 62%;
}


	
/* contents WORKS */	
#works_top{
	width: 100%;
}


#works_top img{
	width: 37%;
	margin: 40% 0 40% 0;
}


#ourusual{
	width: 100%;
	text-align: center;
	margin: 0 0 40% 0;
}

.ourusual_title{
	width: 100%;
	text-align: center;
}

.ourusual_title img{
	width: 60%;
}

.ourusual_text{
	width: 100%;
}

.ourusual_text img{
	width: 40%;
	margin: 15% 0 0 0 ;
}


#works_list{
	width: 100%;
}
	
.works_contents{
	width: 100%;
}

.works_contents img{
	width: 100%;
	margin: 3% 0 0 0;
}

#works_contents01{
	float: left;
	width:48.5%;
	
}
	
#works_contents02{
	float: right;
	width:48.5%;
}	
	
#works_contents03{
	float: left;
	width:48.5%;
	
}
	
#works_contents04{
	float: right;
	width:48.5%;
}	
	
	
#works_contents05{
	float: left;
	width:48.5%;
}	
		
	
	
	
#flow{
	clear: both;
	width: 100%;
	margin: 0 0 0 0;
}



#flow_title{
	width: 100%;
	text-align: center;
}

#flow_title img{
	width: 18%;
	margin: 30% 0 13% 0;
}


#flow_chart{
	width: 100%;
	text-align: center;
}


.flowchart img{
	width: 60%;
	margin: 0 0 10% 0;
}		
	

	

/* contents STAFF */
#staff_top{
	width: 100%;
}

#staff_top img{
	width: 32%;
	margin: 40% 0 75% 0;
}


.character{
	width: 100%;
	position: relative;
	text-align: center;
}	
	
	
#click_character{
	width: 90%;
	position: absolute;
	z-index: 10;
	top: -130%;
	left: 4%;
}	

#click_character img{
	width: 15%;	
}		

	
#meerkat{
	width: 50%;
	position: absolute;
	top: -80%;
	left: 14%;
	z-index: 10;
}

#meerkat img{
	width: 21.5%;
}


#fox{
	width: 50%;
	position: absolute;
	top: -120%;
	left: 42%;
	z-index: 10;
}

#fox img{
	width: 35%;
}


#bear{
	display: none;
}
	
#bear_pc{
	display: initial;
	width: 100%;
	margin: 0 auto;	
}	
	

#bear_pc img{
	width: 50%;

}
	
	
	

/* モーダル内容 */
		
#meerkat_contents{
	position: relative;
	width: 60%;
	margin: 0 auto;
}

#meerkat_01{
	width: 100%;
}

#meerkat_01 img{
	width: 100%;
}


#meerkat_02{
	width: 100%;
	position: absolute;
	top: 85%;
	left:-27.5%;
}

#meerkat_02 img{
	width: 25%;
	margin: 0 0 0 0 ;
}




#fox_contents{
	position: relative;
	width: 60%;
	margin: 0 auto;
}

#fox_01{
	width: 100%;
}

#fox_01 img{
	width: 100%;
}

#fox_02{
	width: 100%;
	position: absolute;
	top: 85%;
	left:-30%;	
}

#fox_02 img{
	width: 18.2%;
	margin: -5% 0 0 0 ;
}
	
	
	
#bear_contents{
	position: relative;
	width: 60%;
	margin: 0 auto;
	text-align: center;
}

#bear_01{
	width: 100%;
}

#bear_01 img{
	width: 100%;
}

#bear_02{
	width: 100%;
	position: absolute;
	top: 85%;
	left:0;
}

#bear_02 img{
	width: 32%;
	margin: -5% 0 0 12% ;
}
	


/* Modal Base */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 100;
}
.modal-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 101;
}

/* Modal Content */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;	
  max-width: 600px;
  z-index: 102;
}
	

	
.modal-inner {
  position: relative;
  width: 100%;
  min-height: 100px;
  max-height: 820px;
  overflow-x: hidden;
  overflow-y: auto;
}	
	
@media screen and (max-height: 1000px) {	
.modal-inner {
  position: relative;
  width: 100%;
  min-height: 100px;
  max-height: 580px;
  overflow-x: hidden;
  overflow-y: auto;
}
}

/* Close Button */
.btn_close {
  display: block;
  position: absolute;
  top: -50px;
  right: 0;
  background-color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: black;
  text-align: center;
  font-size: 30px;
  text-decoration: none;
  line-height: 35px;
  z-index: 105;
}


	
#flex_box_pc{
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}	


	
	
@media screen and (max-height: 750px){	
#archive{
	width: 25%;
	max-height:500px;
	overflow: scroll;
	position: sticky;
	top: 0;
	margin: 0 5% 0 0;
	 /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: none;
}		
	
/* Chrome, Safari 対応 */
#archive::-webkit-scrollbar {
 display:none;
}	

}
	
	
@media screen and (min-height: 751px){	
#archive{
	width: 25%;
	overflow: scroll;
	position: sticky;
	top: 0;
	margin: 0 5% 0 0;
	 /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: none;
}		
	
/* Chrome, Safari 対応 */
#archive::-webkit-scrollbar {
 display:none;
}	

}	
	
	
#pc_view_contents{
width: 70%;	
}
	
	
#archive_title{
	width: 100%;
	margin: 20% 0 25% 0;
}
	
#archive_title img{
	width: 100%;
}	
	
#archive_contents01{
	width: 100%;
	margin: 0 0 3% 0;
}
	
#archive_contents01 img{
	width: 100%;
}	

#archive_contents02{
	width: 100%;
		margin: 0 0 3% 0;
}
	
#archive_contents02 img{
	width: 100%;
}	

#archive_contents03{
	width: 100%;
	margin: 0 0 3% 0;
}
	
#archive_contents03 img{
	width: 100%;
}	

#archive_contents04{
	width: 100%;
	margin: 0 0 3% 0;
}
	
#archive_contents04 img{
	width: 100%;
}	
	
#archive_contents05{
	width: 100%;
	margin: 0 0 20% 0;
}
	
#archive_contents05 img{
	width: 100%;
}	
	
	
	

/* ZOTO WORKS NAV */
	
#sp_footer .footer_logo{
	width: 100%;
}	
	
#sp_footer .footer_logo img{
	width: 25%;
	margin: 5% 0;
}	
	





#sp_footer #footer_icon{
	width: 100%;
	text-align: center;
}

#sp_footer #footer_icon li{
	display: inline;
	margin: 0 3%;
}

#sp_footer #footer_icon li img{
	width: 5%;
	margin: 0 0 5% 0;
	}
	
	

#flex_box{
	display: flex;
	align-items: flex-start;
}


.header{
	background: #FFFFFF;
	width: 40px;
	height: 100vh;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

@media screen and (max-width: 850px){
.global-nav {
	position: fixed;
	right: -100%; /* これで隠れる */
	top: 0;
	width: 50%;
	height: 100vh;
	padding-top: 0px;
	background-color: #A9A9A9;
	background-image: url("../images/background_nav.png");
	background-repeat: repeat;
	background-size: contain;	
	transition: all .6s;
	z-index: 200;
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	text-align: center;
}
}

@media screen and (min-width: 851px) {
.global-nav {
	position: fixed;
	right: -100%; /* これで隠れる */
	top: 0;
	width: 32%;
	height: 100vh;
	padding-top: 0px;
	background-color: #A9A9A9;
	background-image: url("../images/background_nav.png");
	background-repeat: repeat;
	background-size: contain;	
	transition: all .6s;
	z-index: 200;
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	text-align: center;
}
}	
	
	
.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}


.global-nav__list {
	width: 90%;	
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}


.global-nav__item {
  text-align: left;
  font-size: 15px;
	line-height: normal;	
}

.global-nav__item a {
  display: block;
}

.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}


.hamburger__line {
  position: absolute;
  left: 6px;
  width: 28px;
  height: 1px;
  background-color: #252525;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 22px;
}
.hamburger__line--3 {
  top: 30px;
}


.nav-open .hamburger {
  position: fixed;
  right: 10px;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}	
	
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top:25px;
  background-color: #FFFFFF;
	
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
  background-color: #FFFFFF;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 25px;
  background-color: #FFFFFF;
}


#sp_sidebar{
	width: 40px;
	height: 100vh;	
}

#sp_sidebar ul{
	width: 100%;
	text-align: center;
	margin: 500% 0 0 0;
}


#sp_sidebar li{
	height: 40px;
	line-height: 40px;
}

#sp_sidebar li img{
	width: 100%;
	margin: auto;
}

	
	
#sp_sidebar_03 ul{
	width: 100%;
	text-align: center;
	margin: 250% 0 0 0;
}	
	
.nav_main{
	height: 40px;
	line-height: 40px;	
	}	

.nav_main img{
	width: 100%;
	margin: auto;
}	
	
.nav_sub{
	width: 40px;
	line-height: 20px;
}

.nav_sub img{
	width: 100%;
	margin: auto;
}			
	
	
	
#works01_nav_logo{
	width: 100%;
	margin: 5% 0 0 0;
}

#works01_nav_logo img{
	width: 80%;
}


#works01_nav_title{
	width: 100%;
	margin: 0 0 10% 0;
}

#works01_nav_title img{
	width: 100%;
}

	
.index{
	width: 100%;
}
	
	
.index img{
	width: 100%;
	margin: 0 0 3% 0;	
}	

.line {
	margin: 8% 0 4% 0 ;	
	}
	
.line img{
	width: 100%;
}	
	


.link img{
	width: 100%;
	margin: 0 0 3% 0;
	}	

.zotoworks{
	margin: -2% 0 0 0;
}	
	
.zotoworks img{
	width: 100%;
	margin: 0 0 2% 0;
}	

#go_staff{
	margin: 3% 0 15% 0;
		
	}	

.nav_top{
  background-color: #FFFFFF;
}



.bg-color-01 .nav_top {
  background-color: #9EB3BC;
}


.nav_01 {
  background-color: #FFFFFF;
}


.bg-color-02 .nav_01 {
  background-color: #9EB3BC;
}


.nav_02 {
  background-color: #FFFFFF;
}


.bg-color-03 .nav_02 {
  background-color: #9EB3BC;
}


.nav_03 {
  background-color: #FFFFFF;
}


.bg-color-04 .nav_03 {
  background-color: #9EB3BC;
}

.nav_04 {
  background-color: #FFFFFF;
}


.bg-color-05 .nav_04 {
  background-color: #9EB3BC;
}

	
	
	
	
/* 柿の葉寿司 年表用 */	

.nav_2015 {
  background-color: #FFFFFF;
}	
	
.bg-color-04 .nav_2015 {
  background-color: #9EB3BC;
}


.nav_2016 {
  background-color: #FFFFFF;
}


.bg-color-05 .nav_2016 {
  background-color: #9EB3BC;
}


.nav_2017 {
  background-color: #FFFFFF;
}


.bg-color-06 .nav_2017 {
  background-color: #9EB3BC;
}


.nav_2019 {
  background-color: #FFFFFF;
}


.bg-color-07 .nav_2019 {
  background-color: #9EB3BC;
}

.nav_2020 {
  background-color: #FFFFFF;
}


.bg-color-08 .nav_2020 {
  background-color: #9EB3BC;
}
	

.nav_2021 {
  background-color: #FFFFFF;
}


.bg-color-09 .nav_2021 {
  background-color: #9EB3BC;
}

.nav_2022 {
  background-color: #FFFFFF;
}


.bg-color-10 .nav_2022 {
  background-color: #9EB3BC;
}	
	
.nav_20XX {
  background-color: #FFFFFF;
}


.bg-color-11 .nav_20XX {
  background-color: #9EB3BC;
}		
	

#sp_inner{
	width: calc(100% - 40px);
}




/* ZOTO WORKS 01 */

#zotoworks01_top{
	width: 100%;
	margin: 5% 0 0 0;

}

#zotoworks01_top img{
	width: 100%;	
}


.works01_contents{
	width: 100%;
}

.works01_contents img{
	width: 100%;
	margin: 10% 0;
}

.works01_decoration{
	text-align: center;
	width: 100%;
}

.works01_decoration img{
	width: 85%;
}


.works01_fase_top{
	margin: 15% 0 5% 0;
	
}


/* intro */
#zotoworks01_intro{
	width: 100%;
	margin: 30% 0 20% 0;
}


.intro{
	width: 100%;
	margin: 0 0 5% 0;	
}


/* fase1 */

#works01_coffeebeans{
	margin: 2% 0 -5% 0;
}


/* fase2 */

#works01_sandwichi{
	margin: -25% 0 -15% 0;
}


#works01_shop{
	background-image: url("../images/background_paper_pc.png");
	background-repeat: repeat;
	background-size: contain;
	}	
	
#works01_shop img{
		mix-blend-mode: multiply;
}	
	
	
/* fase3 */

#zotoworks01_fase3{
	width: 100%;
}

#works01_menubook{
	width: 100%;
	position: relative;
	margin: 0 0 -8% 0;
}


.menusize{
	width: 100%;
}

.menusize{
	width: 25%;
	margin: -12% 0 0 64.5%;
}

#menusize_esca{
	margin: -12% 0 0 59%;
}

.menu_fukidashi01{
	position: absolute;
}

.menu_fukidashi01 img{
	width: 32%;
	margin: -8% 0 0 10%;
}


.menu_fukidashi02{
	position: absolute;
}

.menu_fukidashi02 img{
	width: 32%;
	margin: 2% 0 0 53%;
}


/* fase4 */

#zotoworks01_fase4{
	margin: 0 0 15% 0;
}
	
	
	
/* product */

#works01_product_title{
	width: 100%;
	margin: 0% 0 -10% 0;
}

#works01_product_text{
	width: 100%;
	margin: 0% 0 10% 0;
}

/* menubook */

#works01_product_menubook{
	position: relative;
	width: 100%;
}

#menubook_item{
	width: 90%;
	position: absolute;
	top:2%;
	left: 10%
}

#menubook_item01 img{
	width: 61%;
	position: absolute;
	top:0;
	left: 29%;	
}

#menubook_item02 img{
	width: 23.5%;
	position: absolute;
	margin: 0 2% 0 0;
}

#menubook_item03 img{
	width: 23.5%;
	position: absolute;
	margin: 25.25% 2% 0 0;
}




#modalitem_menu01{
	width: 100%;
	background-color: white;
	text-align: center;
}


#modalitem_menu01_a{
	width: 100%;
}

#modalitem_menu01_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_menu01_b{
	width: 100%;
}

#modalitem_menu01_b img{
	width: 90%;
	margin: 0 0 5% 0;
}



#modalitem_menu02{
	width: 100%;
	background-color: white;
	text-align: center;
}


#modalitem_menu02_a{
	width: 100%;
}

#modalitem_menu02_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_menu02_b{
	width: 100%;
}

#modalitem_menu02_b img{
	width: 90%;
	margin: 0 0 5% 0;
}

#modalitem_menu02_c{
	width: 100%;
}

#modalitem_menu02_c img{
	width: 90%;
	margin: 0 0 5% 0;
}


#modalitem_menu03{
	width: 100%;
	background-color: white;
	text-align: center;
}


#modalitem_menu03_a{
	width: 100%;
}

#modalitem_menu03_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_menu03_b{
	width: 100%;
}

#modalitem_menu03_b img{
	width: 90%;
	margin: 0 0 5% 0;
}

#modalitem_menu03_c{
	width: 100%;
}

#modalitem_menu03_c img{
	width: 90%;
	margin: 0 0 5% 0;
}


/* A2 poster */

#works01_product_a2poster{
	position: relative;
	width: 100%;
}

#a2poster_item{
	width: 90%;
	position: absolute;
	top:2%;
	left: 10%
}

#a2poster_item01 img{
	width: 35%;
	position: absolute;
	top:0;
	left: 55%;	
}

#a2poster_item02 img{
	width: 23.5%;
	position: absolute;
	margin: 0 4% 0 0;
}

#a2poster_item03 img{
	width: 23.5%;
	position: absolute;
	margin: 25.25% 4% 0 0;
}



#a2poster_item04 img{
	width: 23.5%;
	position: absolute;
	margin: 0 4% 0 27%;
}


#modalitem_a2poster01{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster01_a{
	width: 100%;
}

#modalitem_a2poster01_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_a2poster02{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster02_a{
	width: 100%;
}

#modalitem_a2poster02_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_a2poster03{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster03_a{
	width: 100%;
}

#modalitem_a2poster03_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}

#modalitem_a2poster04{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster04_a{
	width: 100%;
}

#modalitem_a2poster04_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}



/* paper */

#works01_product_paper{
	position: relative;
	width: 100%;
}

#paper_item{
	width: 100%;
	position: absolute;
	top:-7%;
}

#paper_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}

	
/* standpouch */

#works01_product_standpouch{
	position: relative;
	width: 100%;
}

#standpouch_item{
	width: 100%;
	position: absolute;
	top:-5%;
}

#standpouch_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}	
	
	
/* dripbag */

#works01_product_dripbag{
	position: relative;
	width: 100%;
}

#dripbag_item{
	width: 100%;
	position: absolute;
	top:0;
}

#dripbag_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}	

	
/* icecoffeeseal */

#works01_product_icecoffeeseal{
	position: relative;
	width: 100%;
	margin: 0 0 -20% 0;
}

#icecoffeeseal_item{
	width: 100%;
	position: absolute;
	top:12%;
}

#icecoffeeseal_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}		

	
	
	
/* ZOTO WORKS 02 */

#zotoworks02_top{
	position: relative;
	width: 100%;
	margin: 5% 0 0 0;
	overflow: hidden;

}

.no img{
	position: absolute;
	width: 100%;
	z-index: 5;
}	

#zotoworks02_top video{
	width: 300%;
	margin: 0 0 0 -100%;
	
}

	
.music{
	width: 100%;
	
	}	

.music img{
	position: absolute;
	z-index: 10;
	width: 10%;
	top: 12%;
	left:4%;
}	
	
	

.works02_contents{
	width: 100%;
}

.works02_contents img{
	width: 100%;
	margin: 0 ;
}
	
	
#works02_product{
	width: 100%;
	margin: 10%  0 -10% 0;
}	
	



/* ZOTO WORKS 03*/
#sp_inner_works03{
	background-image: URL("../works/sp/zotoworks03/03_imges/zotoworks_03_background.png");
	background-repeat: none;
	background-size: cover;
}	
	
#zotoworks03_top{
	width: 100%;
	margin: 5% 0 0 0;

}

#zotoworks03_top img{
	width: 100%;	
}


.works03_contents{
	width: 100%;
}

.works03_contents img{
	width: 100%;
}
	

.works03_fase1_contents{
	margin: 30% 0 0 0;	
	}	
	
.works03_fase1_contents p{
	margin: 10% 0 0 0;	
	}

	
.leaf{
	width: 86%;
	margin: 20% auto;
	text-align: center;
}	
	
.leaf p{
	width: 13%;
	display: inline-block;
	font-size: 0;
	margin: 0 2.5%;
}
	
.leaf img{
	width: 100%;
}

	
	
@keyframes rotate-y{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(360deg);}
}
@-webkit-keyframes rotate-y{
  0%{-webkit-transform:rotateY(0deg);}
  100%{-webkit-transform:rotateY(360deg);}
}
	
	
	
.leaf_01_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0s;
	
}
	
.leaf_02_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0.25s;	
}		
	
.leaf_03_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0.5s;
}		
		
	
.leaf_04_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0.75s;
}		
	
.leaf_05_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 1s;
	
}		
		
			

.prologue_text{
	margin: 0 0 30% 0;
}	
			


	
	
.timeline_start{
	margin: 15% 0;	
}	
	
.timeline{
	margin: 0 0 35% 0;	
	}	
	

.timeline_year{
	margin: 0 0 5% 0;
}	

	
.timeline_pitch{
	margin: 0 0 2% 0;
}	

.timeline_pitch_02{
	margin: -4% 0 1% 0;
}	
	
.timeline_voice{
	margin: 5% 0 0 0;
}	
	
.timeline_item{
	margin: 7% 0;	
}	

.timeline_photo{
	margin: 7% 0 2% 0;	
}		
	
	
	
.voice_2015 {
	margin: 10% 0 0 0;
}		
	
.voice_2015 img{
	margin: 0 0 4% 0;
}	

	
.works03_fase2_contents p{
	margin: 20% 0 20% 0;	
	}	
	
	
	
#content_2016_02{
	position: relative;
}
	
.viewmore_2016_02{
	width: 15%;
	position: absolute;
	top:37.5%;
	left: 77%;
	}	
	
.viewmore_2016_02 img{
	width: 100%;
}	
	
#timeline_item_2016_02 img{
	margin: -7% 0 -3% 0;	
}
	
	
	
	
#content_2017_02{
	position: relative;
}
	
.viewmore_2017_02{
	width: 15%;
	position: absolute;
	top:66%;
	left: 77%;
	}	
	
.viewmore_2017_02 img{
	width: 100%;
}
	

#timeline_item_2017_02 img{
	margin: -5% 0 -1% 0;	
}
	
	
#content_2019{
	position: relative;
}
	
.viewmore_2019{
	width: 15%;
	position: absolute;
	top:63%;
	left: 77%;
	}	
	
.viewmore_2019 img{
	width: 100%;
}

	

#timeline_item_2019 img{
	margin: 0 0 -5% 0;	
}	
	
	
#content_2020_02{
	position: relative;
}
	
.viewmore_2020_02{
	width: 15%;
	position: absolute;
	top:49%;
	left: 77%;
	}	
	
.viewmore_2020_02 img{
	width: 100%;
}
	

#content_2020_03{
	position: relative;
}
	
.viewmore_2020_03{
	width: 15%;
	position: absolute;
	top:57%;
	left: 77%;
	}	
	
.viewmore_2020_03 img{
	width: 100%;
}	
	
	
#content_2021{
	position: relative;
}
	
.viewmore_2021{
	width: 15%;
	position: absolute;
	top:62%;
	left: 77%;
	}	
	
.viewmore_2021 img{
	width: 100%;
}	
	

#timeline_item_2021 img{
	margin: 0 0 -5% 0;	
}
	
	

#content_2022{
	position: relative;
}
	
.viewmore_2022{
	width: 15%;
	position: absolute;
	top:67%;
	left: 77%;
	}	
	
.viewmore_2022 img{
	width: 100%;
}	
	

#timeline_item_2022 img{
	margin: 0 0 -5% 0;	
}
	

#content_2022_02{
	position: relative;
}
	
.viewmore_2022_02{
	width: 15%;
	position: absolute;
	top:64%;
	left: 77%;
	}	
	
.viewmore_2022_02 img{
	width: 100%;
}	
	
	
	
.sdgs_icon{
	width: 85%;
	margin: -8% auto 0 auto;
	font-size: 0;
	text-align: center;
	}	
	
.sdgs_icon li{
	width: 25%;
	display: inline-block;
	margin: 0 4.1%;
}
	
	
	
.sdgs_icon img{
	width: 100%;
	}	

	
.timeline_year_20xx img{
	margin: 0 0 -15% 0;
}	
	
.timeline_end{
	margin: 0 0 100% 0;
}	

	
.timeline_year_20xx img{
	margin: 0 0 -15% 0;
}	
	
.timeline_end{
	margin: 0 0 85% 0;
}	
	
	
	

/*zotoworks03 product*/		
#modalitem_2016-1{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2016-1_a{
	width: 100%;
}

#modalitem-2016-1_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:0;
	width: 100%;
	margin: 10% 0 5% 0;
}


#modalitem-2016-1_b{
	width: 90%;
	margin: 0 auto;
}

#modalitem-2016-1_b img{
	width: 100%;
	margin: 50% 0 15% 0;
}


	
#modalitem_2017-2{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2017-2_a{
	width: 100%;
	margin: 0 auto;
}

#modalitem-2017-2_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:2%;
	width: 100%;
	margin: 15% 0 5% 0;
}


#modalitem-2017-2_b{
	width: 90%;
		margin: 0 auto;
}

#modalitem-2017-2_b img{
	width: 100%;
	margin: 108% 0 15% 0;
}	
	
	
	
	
	
#modalitem_2019{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}
	
	
	
	
@media screen and (max-width: 800px) and (max-height: 1000px) {		
#modalitem-2019_a{
	width: 100%;
}

#modalitem-2019_a img{
	position: absolute;
	z-index: 10;
	top: 18vw;
	left:60%;
	width: 30%;
	margin: 10% 0 5% 0;
}	
	
#modalitem-2019_b{
	width: 100%;
}

#modalitem-2019_b img{
	position: absolute;
	z-index: 15;
	top: 31vw;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}		
}
	
	
@media screen and (min-width: 801px) and (max-height: 1000px) {		
#modalitem-2019_a{
	width: 100%;
}

#modalitem-2019_a img{
	position: absolute;
	z-index: 10;
	top: 25%;
	left:60%;
	width: 30%;
	margin: 10% 0 5% 0;
}	
	
#modalitem-2019_b{
	width: 100%;
}

#modalitem-2019_b img{
	position: absolute;
	z-index: 15;
	top: 43%;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}		
}	
		
	
	

@media screen and (max-width: 800px) and (min-height: 1001px) {	
#modalitem-2019_a{
	width: 100%;
}

#modalitem-2019_a img{
	position: absolute;
	z-index: 10;
	top: 18vw;
	left:60%;
	width: 30%;
	margin: 10% 0 5% 0;
}	

	
#modalitem-2019_b{
	width: 100%;
}

#modalitem-2019_b img{
	position: absolute;
	z-index: 15;
	top: 31vw;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}		
}
	
	
@media screen and (min-width: 801px) and (min-height: 1001px) {	
#modalitem-2019_a{
	width: 100%;
}

#modalitem-2019_a img{
	position: absolute;
	z-index: 10;
	top: 17.5%;
	left:60%;
	width: 30%;
	margin: 10% 0 5% 0;
}	

	
#modalitem-2019_b{
	width: 100%;
}

#modalitem-2019_b img{
	position: absolute;
	z-index: 15;
	top: 30.5%;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}		
}
	
	
#modalitem-2019_c{
	width: 100%;
}

#modalitem-2019_c img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:5%;
	width: 90%;
	margin: 15% 0 5% 0;
}


#modalitem-2019_d{
	width: 100%;
}

#modalitem-2019_d img{
	width: 90%;
	margin: 40% 0 15% 0;
}	


	
	
#modalitem_2020-2{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2020-2_a{
	width: 100%;
}

#modalitem-2020-2_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:5%;
	width: 90%;
	margin: 10% 0 5% 0;
}


#modalitem-2020-2_b{
	width: 100%;
}

#modalitem-2020-2_b img{
	width: 90%;
	margin: 15% 0 5% 0;
}	
	

	
@media screen and (max-width: 800px) and (max-height: 1000px) {			
#modalitem-2020-2_c{
	width: 100%;
}

#modalitem-2020-2_c img{
	position: absolute;
	z-index: 15;
	top: 51vw;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}		
}
	
@media screen and (min-width: 801px) and (max-height: 1000px) {			
#modalitem-2020-2_c{
	width: 100%;
}

#modalitem-2020-2_c img{
	position: absolute;
	z-index: 15;
	top: 70%;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}		
}	
	

@media screen and (max-width: 800px) and (min-height: 1001px) {
	#modalitem-2020-2_c{
	width: 100%;
}

#modalitem-2020-2_c img{
	position: absolute;
	z-index: 15;
	top: 51.5vw;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}
}


@media screen and (min-width: 801px) and (min-height: 1001px) {
	#modalitem-2020-2_c{
	width: 100%;
}

#modalitem-2020-2_c img{
	position: absolute;
	z-index: 15;
	top: 50%;
	left:77%;
	width: 13%;
	margin: 10% 0 5% 0;
}
}
	
	
	
#modalitem_2020-3{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2020-3_a{
	width: 100%;
}

#modalitem-2020-3_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:5%;
	width: 90%;
	margin: 15% 0 5% 0;
}


#modalitem-2020-3_b{
	width: 100%;
}

#modalitem-2020-3_b img{
	width: 90%;
	margin: 25% 0 15% 0;
}		

	
	
	
#modalitem_2021{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2021_a{
	width: 100%;
}

#modalitem-2021_a video{
	position: absolute;
	z-index: 5;
	top: 0;
	left:15%;
	width: 70%;
	margin: 15% 0 5% 0;
}


#modalitem-2021_b{
	width: 100%;
}

#modalitem-2021_b img{
	width: 90%;
	margin: 55% 0 15% 0;
}		

	
	
	
#modalitem_2022{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2022_a{
	width: 100%;
}

#modalitem-2022_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:5%;
	width: 90%;
	margin: 15% 0 5% 0;
}


#modalitem-2022_b{
	width: 100%;
}

#modalitem-2022_b img{
	width: 90%;
	margin: 50% 0 15% 0;
}		



	
@media screen and (max-width: 800px) and (max-height: 1000px) {		
#modalitem-2022_c{
	width: 100%;
}

#modalitem-2022_c img{
	position: absolute;
	z-index: 15;
	top: 43.5vw;
	left:70%;
	width: 13%;
	margin: 10% 0 5% 0;
}
}
	
@media screen and (min-width: 801px) and (max-height: 1000px) {		
#modalitem-2022_c{
	width: 100%;
}

#modalitem-2022_c img{
	position: absolute;
	z-index: 15;
	top: 60%;
	left:70%;
	width: 13%;
	margin: 10% 0 5% 0;
}
}	
	
@media screen and (max-width: 800px) and (min-height: 1001px) {		
#modalitem-2022_c{
	width: 100%;
}

#modalitem-2022_c img{
	position: absolute;
	z-index: 15;
	top: 50.5vw;
	left:70%;
	width: 13%;
	margin: 0 0 0 0;
}
}
		
@media screen and (min-width: 801px) and (min-height: 1001px) {		
#modalitem-2022_c{
	width: 100%;
}

#modalitem-2022_c img{
	position: absolute;
	z-index: 15;
	top: 42%;
	left:70%;
	width: 13%;
	margin: 10% 0 5% 0;
}
}	
	
	
#modalitem_2022-2{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2022-2_a{
	width: 100%;
}

#modalitem-2022-2_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:3%;
	width: 100%;
	margin: 15% 0 5% 0;
}


#modalitem-2022-2_b{
	width: 100%;
}

#modalitem-2022-2_b img{
	width: 90%;
	margin: 75% 0 15% 0;
}	


	
@media screen and (max-width: 800px) and (max-height: 1000px) {		
#modalitem-2022-2_c{
	width: 100%;
}

#modalitem-2022-2_c img{
	position: absolute;
	z-index: 5;
	top: 130vw;
	left:5%;
	width: 90%;
	margin: 10% 0 5% 0;
}


#modalitem-2022-2_d{
	width: 100%;
}

#modalitem-2022-2_d img{
	width: 90%;
	margin: 20% 0 5% 0;
}		
		
}
	
@media screen and (min-width: 801px) and (max-height: 1000px) {		
#modalitem-2022-2_c{
	width: 100%;
}

#modalitem-2022-2_c img{
	position: absolute;
	z-index: 5;
	top: 180%;
	left:5%;
	width: 90%;
	margin: 10% 0 5% 0;
}


#modalitem-2022-2_d{
	width: 100%;
}

#modalitem-2022-2_d img{
	width: 90%;
	margin: 20% 0 5% 0;
}		
		
}
	
@media screen and (max-width: 800px) and (min-height: 1001px) {		
#modalitem-2022-2_c{
	width: 100%;
}

#modalitem-2022-2_c img{
	position: absolute;
	z-index: 5;
	top: 130vw;
	left:5%;
	width: 90%;
	margin: 10% 0 5% 0;
}


#modalitem-2022-2_d{
	width: 100%;
}

#modalitem-2022-2_d img{
	width: 90%;
	margin: 20% 0 5% 0;
}		
		
}
	
@media screen and (min-width: 801px) and (min-height: 1001px) {		
#modalitem-2022-2_c{
	width: 100%;
}

#modalitem-2022-2_c img{
	position: absolute;
	z-index: 5;
	top: 127%;
	left:5%;
	width: 90%;
	margin: 10% 0 5% 0;
}


#modalitem-2022-2_d{
	width: 100%;
}

#modalitem-2022-2_d img{
	width: 90%;
	margin: 20% 0 5% 0;
}		
		
}	
	
	
	
/*product list*/
/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 10;
	top: 0;
	width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #005C1B;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	left:1%;
    bottom:1%;
    transition: all 1s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
  transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/	
@media screen and (min-width: 601px) and (max-width: 850px){
	#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
   	width:80%;
    height: 100vh;
	margin: 0 10%;
	
    -webkit-overflow-scrolling: touch;
}
}	

	
@media screen and (min-width: 851px){
	#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
   	width:50%;
    height: 100vh;
	margin: 0 25%;
	
    -webkit-overflow-scrolling: touch;
}
}		
	
	
	
	
#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
  opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
		
	

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
  text-align: center; 
  list-style: none;
}

#g-nav li img{
  display: block;	

}

		
.index_item{
	width: 90%;
	padding: 30% 5% 25% 5%;
	text-align: center;
}
	
	
.index_item li{
	display: inline-block;
	vertical-align:top;
	width: 15%;
	margin: 0 1%;
}		

.index_item li img{
	width: 100%;
}		
		
.product_index_title{
	width: 100%;
	margin: -30% 0 0 0 ;
}
	
.product_index_title img{
	width: 90%;
	padding: 0 5%
}	
	



/*.product_index_title img{
	width: 85%;
	padding: 0 7.5%;

	}	
	
*/	
	
/*========= ボタンのためのCSS ===============*/
.openbtn1{	
  z-index: 15;/*ボタンを最前面に*/

}
	
	
.product_index_icon{
	z-index: 15;
	position: fixed;
	width: 20%;
	bottom:1%;
	left: -200px;
}		
		
.product_index_icon img{
	width: 120px;
}
	
	
	
/* ZOTO WORKS 04 */
	
/* dialog */	
body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-40%);
    width: 80%;
    max-width: 500px;

}



.onetime_popup_close {
    position: absolute;
    top: 7%;
    right: 30px;
    width: 30px;
    height: 30px;
    transform: translateY(-7%);
    cursor: pointer;
}
.onetime_popup_close::before,
.onetime_popup_close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: #fff;
    content: "";
}
.onetime_popup_close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.onetime_popup_close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.onetime_popup_content {
    padding: 60px 30px;
    text-align: center;
}
	
	
#works04_dialog_pc{
	display: initial;
	width: 100%;
}
	
#works04_dialog_pc img{
	width: 100%;	
}	
	

#works04_dialog_sp{
	display: none;
}	

	
/* contents */	

#works04_nav_logo{
	width: 100%;
	margin: 5% 0 0 0;
}

#works04_nav_logo img{
	width: 80%;
}


#works04_nav_title{
	width: 100%;
	margin: 0 0 10% 0;
}

#works04_nav_title img{
	width: 100%;
}	
	
	
#zotoworks04_top{
	position: relative;
	width: 100%;
	margin: 5% 0 -2.5% 0;
	overflow: hidden;

}

.no img{
	position: absolute;
	width: 100%;
	z-index: 5;
}	

#works04_mainvisual{
	width: 100%;
	overflow: scroll;
	
	
}
	
#works04_mainvisual img{
	width: 215%;
	margin: 0 0 0 0%;
	overflow: scroll;
}	
	

.works04_contents{
	width: 100%;
}

.works04_contents img{
	width: 100%;
	margin: 0 ;
}
	
	
#works04_product{
	width: 100%;
	margin: 10%  0 -10% 0;
}	
		
	
	
	
	
	
}





@media screen and (max-width: 600px) {
  .vpc {
    display: none !important;
  }
	.vsp {
    display: block !important;
  }
	
.wrapper{
	background-image: url("../images/background_paper.png");
	background-repeat: repeat-y;
	background-size: contain;
}	
	
.inner{
	padding: 0 35px 0 35px;
}



/* HOME ABOUT WORKS STAFF NAV */
/* 中身 */	
.global-nav_main {
	position: fixed;
	right: -100%; /* これで隠れる */
	top: 0;
	width: 65%; /* スマホに収まるくらい */
	height: 100vh;
	padding-top: 0px;
	background-color: #A9A9A9;
	background-image: url("../images/background_nav.png");
	background-repeat: repeat-y;
	background-size: contain;	
	transition: all .6s;
	z-index: 200;
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	text-align: center;
}

.global-nav_main__list {
	width: 100%;	
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}


.global-nav_main__item a {
  display: block;
  padding: 8px 0;
}	

.global-nav_sub__item a {
  display: block;
}

.global-nav_sub__item img{
	margin: -2% 0 2% 0;	
		
}	
		
	
#list_main p{
	width: 100%;
}	
	
#list_main p img{
	width: 100%;
}
	
	
#nav_logo{
	margin: 30% 0 15% 0;
}
	
#nav_go_works img{
	margin: 0 0 0 0;
}	

	
#nav_go_works_05 img{
	margin: -2% 0 5% 0;
}		
		
	
	
	
	

	
/* グレーアウトの設定 */	
.black-bg_main {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
	
/* 表示された時用のCSS */
.nav-open_main .global-nav_main {
  right: 0;
}
.nav-open_main .black-bg_main {
  opacity: .8;
  visibility: visible;
}


	
/* ハンバーガーの三本線、クリックでバッテンになる部分 */	
/* 三本線 */	
.hamburger_main {
  position: fixed;
  right: 10px;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}
	
.hamburger_main__line {
  position: absolute;
  left: 6px;
  width: 33px;
  height: 1px;
  background-color: #252525;
  transition: all .6s;
}
.hamburger_main__line--1 {
  top: 14px;
}
.hamburger_main__line--2 {
  top: 24px;
}
.hamburger_main__line--3 {
  top: 34px;
}


/* バッテン */	
.nav-open_main .hamburger_main__line--1 {
  transform: rotate(45deg);
  top: 20px;
  background-color: #FFFFFF;
	
}
.nav-open_main .hamburger_main__line--2 {
  width: 0;
  left: 50%;
}
.nav-open_main .hamburger_main__line--3 {
  transform: rotate(-45deg);
  top: 20px;
  background-color: #FFFFFF;	
}	
	
	
/* HOME */	
/* TOP mainvisual */		
#top{
	width: 100%;
	
}
	
#top video{
	width: 100%;
	margin: 0 0 15% 0;
}	

#mainvisual_sp{
		display: initial;
}

#mainvisual_pc{
	display: none;	
}	
	
	
/* viewmore */	
.viewmore img{
	width: 50%;
}
	
/* box center */		
.viewmore_box_01{
	width: 100%;
	position: relative;
}	
		
.scrolldown1{
    /*描画位置*/
	position:absolute;
	left:64%;
	top:0%;
	margin: 3.3% 0 0 0;
    /*全体の高さ*/
	height:50px;
	z-index: 10;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 7%;
  height: 1px;
  background: #FFFFFF;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.7s ease-in-out infinite;
  opacity:0;
}
	

/* box left */		
	
.viewmore_box_02{
	width: 100%;
	position: relative;
}	
			
	
.scrolldown2{
    /*描画位置*/
	position:absolute;
	left:38.5%;
	top:0%;
	margin: 3.3% 0 0 0;
    /*全体の高さ*/
	height:50px;
	z-index: 10;
}


/* 線の描写 */
.scrolldown2::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 7%;
  height: 1px;
  background: #FFFFFF;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.7s ease-in-out infinite;
  opacity:0;
}	

	
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    width:0;
    top:0;
	left: 0px ;  
    opacity: 0;
  }
  30%{
    width:20px;
    opacity: 1;
  }
  100%{
    width:0;
    top:0;
	left: 25px;  
    opacity: 0;
  }
}	
	
	
	
/* contents title */
.contents_title_box{
	width: 100%;
	margin: 0 0 15% 0;
}

.contents_title img{
	width: 45%;
	margin: 0 0 5% 0;
}


#staff_title img{
	width: 37.5%;	
}

#insta_title img{
	width: 70.3%;
	margin: 0 0 5% 0;
}


	
/* HOME - ABOUT */			
#about{
	width: 100%;
	margin: 30% 0 50% 0;
}	
	
#about p{
	width: 100%;
	text-align: center;
}	
	
.philosophy_title{
	width: 100%;
	margin: 0 0 15% 0;
}	

.philosophy_title img{
	width: 85%;
}		
	

/* HOME - WORKS */	
#works{
	width: 100%;		
	}	
	
#works p{
	width: 100%;
}	
	
#works_logo{
	width:100%;
	margin: 0 0 40% 0;
	mix-blend-mode: multiply;
}	

#works_logo img{
	width: 70%;
	margin: 3% 0 0 15%;
}


/* HOME - STAFF */	
#staff{
	width: 100%;
}	

#staff p{
	width: 100%;
}


#staff_illust{
	width: 100%;
	text-align: center;
	margin: 0 0 40% 0;
}

#staff_illust img{
	width: 90%;
}

.illust{
	mix-blend-mode: multiply;
}



/* HOME - INSTAGRAM */	
#instagram{
	width: 100%;
}	

#instagram p{
	width: 100%;
}		
	
#slider_land{
	display: initial;
	width: 100%;
	overflow: hidden;
	margin: 0 0
}
	
#slider_pc{
		display: none;
}	

.insta_more{
	text-align: center;
	margin: 0 0 35% 0;
}



/* CONTACT */	
#contact{
	width: 100%;
}	

#contact p{
	width: 100%;
	text-align: center;
}	
	
.decoration{
	width: 100%;
	text-align: center;
	margin: 30% 0 0 0;
}

.decoration img{
	width: 100%;
}

.contact_title{
	width: 100%;
	text-align: center;
	margin: 10% 0 0 0;
}

.contact_title img{
	width: 50%;
}

#contact_icon{
	text-align: center;
	margin: 10% 0;
}

#contact_icon li{
	display: inline;
	margin: 0 5%;
}

#contact_icon li img{
	width: 30%;
}	
	


/* FOOTER */		
	
footer{
	width: 100%;
	text-align: center;
	background-color: #9EB3BC;
}
	
.footer_logo{
	width: 100%;
}

.footer_logo img{
	width: 40%;
	margin: 10% 0 8% 0;
}


#footer_icon{
	width: 100%;
	text-align: center;
}

#footer_icon li{
	display: inline;
	margin: 0 5%;
}

#footer_icon li img{
	width: 12%;
	margin: 0 0 10% 0;
}


.copy{
	width: 100%;
	text-align: center;
	background-color: #000000;
	padding: 2% 0;
}

.copy p{
	color:white;
	font-size: 8px;
}




/* contents ABOUT */

#about_top{
	width: 100%;
}

#about_top img{
	width: 40%;
	margin: 45% 0 60% 0;
}


#philosophy{
	width: 100%;
	text-align: center;
	margin: 0 0 50% 0;
}

.philosophy_text{
	width: 100%;
}

.philosophy_text img{
	width: 90%;
	margin: 5% 0 0 0 ;
}


#company{
	width: 100%;
}


.company_title{
	width: 100%;
}

.company_title img{
	width: 30%;
	margin: 0 0 10% 3%;
}
	
.company_info{
	width: 100%;
	text-align: center;
}

.company_info img{
	width: 100%;
}




/* contents WORKS */

#works_top{
	width: 100%;
}

#works_top img{
	width: 43%;
	margin: 45% 0 50% 0;
}


#ourusual{
	width: 100%;
	text-align: center;
	margin: 0 0 50% 0;
}

.ourusual_title{
	width: 100%;
	text-align: center;
}

.ourusual_title img{
	width: 75%;
}

.ourusual_text{
	width: 100%;
}

.ourusual_text img{
	width: 65%;
	margin: 15% 0 0 0 ;
}


#works_list{
	width: 100%;
}

.works_contents{
	width: 100%;
}

.works_contents img{
	width: 100%;
	margin: 3% 0 0 0;
}

	
#works_contents01{
	float: none;
	width:100%;
}
	
#works_contents02{
	float: none;
	width:100%;
}		
	

#flow{
	width: 100%;
	margin: 40% 0 0 0;
}

#flow_title{
	width: 100%;
	text-align: center;
}

#flow_title img{
	width: 25%;
	margin: 0 0 20% 0;
}

#flow_chart{
	width: 100%;
	text-align: center;
}

.flowchart img{
	width: 100%;
	margin: 0 0 10% 0;
}

	
	

/* contents STAFF */

#staff_top{
	width: 100%;
}

#staff_top img{
	width: 36%;
	margin: 45% 0 90% 0;
}


.character{
	width: 100%;
	position: relative;
}

	
#click_character{
	width: 50%;
	position: absolute;
	z-index: 10;
	top: -100%;
	left: 32%;
}	

#click_character img{
	width: 60%;	
}	
	


#meerkat{
	width: 50%;
	position: absolute;
	top: -57%;
	left: 15%;
	z-index: 10;
}

#meerkat img{
	width: 43%;
}


#fox{
	position: absolute;
	top: -90%;
	left: 60%;
}

#fox img{
	width: 80%;
}

	
	
#bear_pc{
	display: none;
}	
	
#bear{
	display: initial;
	width: 100%;
	text-align: center;
}				

#bear img{
	width: 100%;
}

	
	

#meerkat_contents{
	position: relative;
	width: 100%;
}

#meerkat_01{
	width: 100%;
}

#meerkat_01 img{
	width: 100%;
}


#meerkat_02{
	width: 100%;
	position: absolute;
	top: 85%;
	left:10%;
	
}

#meerkat_02 img{
	width: 25%;
	margin: 0 0 0 0% ;
}




#fox_contents{
	position: relative;
	width: 100%;
	;
}

#fox_01{
	width: 100%;
}

#fox_01 img{
	width: 100%;
}


#fox_02{
	width: 100%;
	position: absolute;
	top: 85%;
	left:10%;
	
}

#fox_02 img{
	width: 18.2%;
	margin: -5% 0 0 0% ;
}





#bear_contents{
	position: relative;
	width: 100%;
	text-align: center;
}

#bear_01{
	width: 100%;
}

#bear_01 img{
	width: 100%;
}


#bear_02{
	width: 100%;
	position: absolute;
	top: 85%;
	left:0;
	
}

#bear_02 img{
	width: 32%;
	margin: -5% 0 0 12% ;
}



/* Modal Base */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 100;
}
.modal-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 101;
}

/* Modal Content */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  z-index: 102;
}
@media screen and (max-width: 640px) {
  .modal-content {
    width: 75vw;
  }
}
.modal-inner {
  position: relative;
  width: 100%;
  min-height: 100px;
  max-height: 480px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Close Button */
.btn_close {
  display: block;
  position: absolute;
  top: -50px;
  right: 0;
  background-color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: black;
  text-align: center;
  font-size: 30px;
  text-decoration: none;
  line-height: 35px;
  z-index: 105;
}
	
	
	
	
	
#flex_box_pc{
	align-items:none;	
}		
	
#archive{
	display: none;
}	
	

/* ZOTO WORKS NAV */
	
#sp_footer .footer_logo{
	width: 100%;
}	
	
#sp_footer .footer_logo img{
	width: none;
	margin: none;
	}
	





#sp_footer #footer_icon{
	width: 100%;
	text-align: center;
}

#sp_footer #footer_icon li{
	display: inline;
	margin: none;
}

#sp_footer #footer_icon li img{
	width: none;
	margin: none;;
	}
		
	
	
	
#flex_box{
	display: flex;
	align-items: flex-start;
}


.header{
	background: #FFFFFF;
	width: 40px;
	height: 100vh;
	position: sticky;
	position: -webkit-sticky;
	z-index: 20;
	top: 0;
}


.global-nav {
	position: fixed;
	right: -100%; /* これで隠れる */
	top: 0;
	width: 90%; /* スマホに収まるくらい */
	height: 100vh;
	padding-top: 0px;
	background-color: #A9A9A9;
	background-image: url("../images/background_nav.png");
	background-repeat: repeat-y;
	background-size: contain;	
	transition: all .6s;
	z-index: 200;
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	text-align: center;
}


.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}


.global-nav__list {
	width: 100%;	
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}


.global-nav__item  {
  display: block;
}	
	
	
	
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}


.hamburger__line {
  position: absolute;
  left: 6px;
  width: 28px;
  height: 1px;
  background-color: #252525;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 22px;
}
.hamburger__line--3 {
  top: 30px;
}


.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
  background-color: #FFFFFF;
	
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
  background-color: #FFFFFF;	
}


#sp_sidebar{
	width: 40px;
	height: 100vh;	
}

#sp_sidebar ul{
	width: 100%;
	text-align: center;
	margin: 500% 0 0 0;
}


#sp_sidebar li{
	height: 40px;
	line-height: 40px;
}

#sp_sidebar li img{
	width: 100%;
	margin: auto;
}

	

#sp_sidebar_03 ul{
	width: 100%;
	text-align: center;
	margin: 250% 0 0 0;
}	
	
.nav_main{
	height: 40px;
	line-height: 40px;	
	}	

.nav_main img{
	width: 100%;
	margin: auto;
}	
	
.nav_sub{
	width: 40px;
	line-height: 20px;
}

.nav_sub img{
	width: 100%;
	margin: auto;
}		
	
#works01_nav_logo{
	width: 100%;
}

#works01_nav_logo img{
	width: 100%;
}


#works01_nav_title{
	width: 100%;
	margin: 0 0 10% 0;
}

#works01_nav_title img{
	width: 100%;
}

	
.index{
	width: 100%;
}
	
	
.index img{
	width: 100%;
	margin: 0 0 3% 0;	
}	

.line {
	margin: 8% 0 4% 0 ;	
	}
	
.line img{
	width: 100%;
}	
	


.link img{
	width: 100%;
	margin: 0 0 3% 0;
	}	

.zotoworks{
	margin: -2% 0 0 0;
}	
	
.zotoworks img{
	width: 100%;
	margin: 0 0 2% 0;
}	

#go_staff{
	margin: 3% 0 15% 0;
		
	}	
	
	
	

	

.nav_top{
  background-color: #FFFFFF;
}



.bg-color-01 .nav_top {
  background-color: #9EB3BC;
}


.nav_01 {
  background-color: #FFFFFF;
}


.bg-color-02 .nav_01 {
  background-color: #9EB3BC;
}


.nav_02 {
  background-color: #FFFFFF;
}


.bg-color-03 .nav_02 {
  background-color: #9EB3BC;
}


.nav_03 {
  background-color: #FFFFFF;
}


.bg-color-04 .nav_03 {
  background-color: #9EB3BC;
}

.nav_04 {
  background-color: #FFFFFF;
}


.bg-color-05 .nav_04 {
  background-color: #9EB3BC;
}

	
	
	
	
/* 柿の葉寿司 年表用 */	

.nav_2015 {
  background-color: #FFFFFF;
}	
	
.bg-color-04 .nav_2015 {
  background-color: #9EB3BC;
}


.nav_2016 {
  background-color: #FFFFFF;
}


.bg-color-05 .nav_2016 {
  background-color: #9EB3BC;
}


.nav_2017 {
  background-color: #FFFFFF;
}


.bg-color-06 .nav_2017 {
  background-color: #9EB3BC;
}


.nav_2019 {
  background-color: #FFFFFF;
}


.bg-color-07 .nav_2019 {
  background-color: #9EB3BC;
}

.nav_2020 {
  background-color: #FFFFFF;
}


.bg-color-08 .nav_2020 {
  background-color: #9EB3BC;
}
	

.nav_2021 {
  background-color: #FFFFFF;
}


.bg-color-09 .nav_2021 {
  background-color: #9EB3BC;
}

.nav_2022 {
  background-color: #FFFFFF;
}


.bg-color-10 .nav_2022 {
  background-color: #9EB3BC;
}	
	
.nav_20XX {
  background-color: #FFFFFF;
}


.bg-color-11 .nav_20XX {
  background-color: #9EB3BC;
}		
		
	
	

#sp_inner{
	width: calc(100% - 40px);
}




/* ZOTO WORKS 01 */

#zotoworks01_top{
	width: 100%;
	margin: -5% 0 0 0;

}

#zotoworks01_top img{
	width: 100%;	
}


.works01_contents{
	width: 100%;
}

.works01_contents img{
	width: 100%;
	margin: 10% 0;
}

.works01_decoration{
	text-align: center;
	width: 100%;
}

.works01_decoration img{
	width: 85%;
}


.works01_fase_top{
	margin: 15% 0 5% 0;
	
}


/* intro */
#zotoworks01_intro{
	width: 100%;
	margin: 30% 0 20% 0;
}


.intro{
	width: 100%;
	margin: 0 0 5% 0;	
}


/* fase1 */

#works01_coffeebeans{
	margin: 0 0 -5% 0;
}


/* fase2 */

#works01_sandwichi{
	margin: -25% 0 -15% 0;
}

#works01_shop{
	background-image: url("../images/background_paper.png");
	background-repeat: repeat;
	background-size: contain;
	}	
	
#works01_shop img{
		mix-blend-mode: multiply;
}



/* fase3 */

#zotoworks01_fase3{
	width: 100%;
}

#works01_menubook{
	width: 100%;
	position: relative;
	margin: 0 0 -8% 0;
}

		

.menusize{
	width: 100%;
}

.menusize{
	width: 25%;
	margin: -12% 0 0 64.5%;
}

#menusize_esca{
	margin: -12% 0 0 59%;
}

.menu_fukidashi01{
	position: absolute;
}

.menu_fukidashi01 img{
	width: 32%;
	margin: -8% 0 0 10%;
}


.menu_fukidashi02{
	position: absolute;
}

.menu_fukidashi02 img{
	width: 32%;
	margin: 2% 0 0 53%;
}


	
/* fase4 */

#zotoworks01_fase4{
	margin: 0 0 15% 0;
}	
	
	

/* product */

#works01_product_title{
	width: 100%;
	margin: 0% 0 -10% 0;
}

#works01_product_text{
	width: 100%;
	margin: 0% 0 10% 0;
}

/* menubook */

#works01_product_menubook{
	position: relative;
	width: 100%;
}

#menubook_item{
	width: 90%;
	position: absolute;
	top:2%;
	left: 10%
}

#menubook_item01 img{
	width: 61%;
	position: absolute;
	top:0;
	left: 29%;	
}

#menubook_item02 img{
	width: 23.5%;
	position: absolute;
	margin: 0 2% 0 0;
}

#menubook_item03 img{
	width: 23.5%;
	position: absolute;
	margin: 25.25% 2% 0 0;
}




#modalitem_menu01{
	width: 100%;
	background-color: white;
	text-align: center;
}


#modalitem_menu01_a{
	width: 100%;
}

#modalitem_menu01_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_menu01_b{
	width: 100%;
}

#modalitem_menu01_b img{
	width: 90%;
	margin: 0 0 5% 0;
}



#modalitem_menu02{
	width: 100%;
	background-color: white;
	text-align: center;
}


#modalitem_menu02_a{
	width: 100%;
}

#modalitem_menu02_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_menu02_b{
	width: 100%;
}

#modalitem_menu02_b img{
	width: 90%;
	margin: 0 0 5% 0;
}

#modalitem_menu02_c{
	width: 100%;
}

#modalitem_menu02_c img{
	width: 90%;
	margin: 0 0 5% 0;
}


#modalitem_menu03{
	width: 100%;
	background-color: white;
	text-align: center;
}


#modalitem_menu03_a{
	width: 100%;
}

#modalitem_menu03_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_menu03_b{
	width: 100%;
}

#modalitem_menu03_b img{
	width: 90%;
	margin: 0 0 5% 0;
}

#modalitem_menu03_c{
	width: 100%;
}

#modalitem_menu03_c img{
	width: 90%;
	margin: 0 0 5% 0;
}


/* A2 poster */

#works01_product_a2poster{
	position: relative;
	width: 100%;
}

#a2poster_item{
	width: 90%;
	position: absolute;
	top:2%;
	left: 10%
}

#a2poster_item01 img{
	width: 35%;
	position: absolute;
	top:0;
	left: 55%;	
}

#a2poster_item02 img{
	width: 23.5%;
	position: absolute;
	margin: 0 4% 0 0;
}

#a2poster_item03 img{
	width: 23.5%;
	position: absolute;
	margin: 25.25% 4% 0 0;
}



#a2poster_item04 img{
	width: 23.5%;
	position: absolute;
	margin: 0 4% 0 27%;
}


#modalitem_a2poster01{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster01_a{
	width: 100%;
}

#modalitem_a2poster01_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_a2poster02{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster02_a{
	width: 100%;
}

#modalitem_a2poster02_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}


#modalitem_a2poster03{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster03_a{
	width: 100%;
}

#modalitem_a2poster03_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}

#modalitem_a2poster04{
	width: 100%;
	background-color: white;
	text-align: center;
}

#modalitem_a2poster04_a{
	width: 100%;
}

#modalitem_a2poster04_a img{
	width: 90%;
	margin: 5% 0 5% 0;
}



/* paper */

#works01_product_paper{
	position: relative;
	width: 100%;
}

#paper_item{
	width: 100%;
	position: absolute;
	top:-7%;
}

#paper_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}

	
/* standpouch */

#works01_product_standpouch{
	position: relative;
	width: 100%;
}

#standpouch_item{
	width: 100%;
	position: absolute;
	top:-5%;
}

#standpouch_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}	
	
	
/* dripbag */

#works01_product_dripbag{
	position: relative;
	width: 100%;
}

#dripbag_item{
	width: 100%;
	position: absolute;
	top:0;
}

#dripbag_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}	

	
/* icecoffeeseal */

#works01_product_icecoffeeseal{
	position: relative;
	width: 100%;
	margin: 0 0 -20% 0;
}

#icecoffeeseal_item{
	width: 100%;
	position: absolute;
	top:12%;
}

#icecoffeeseal_item01 img{
	width: 100%;
	position: absolute;
	top:0;
}		
	
	
	
	
/* ZOTO WORKS 02 */
	
	
#zotoworks02_top{
	position: relative;
	width: 100%;
	margin: -5% 0 0 0;
	overflow: hidden;

}
	
.no img{
	position: absolute;
	width: 100%;
	z-index: 5;
}
	

#zotoworks02_top video{
	width: 300%;
	margin: 0 0 0 -100%;	
}
	
.music{
	width: 100%;
	
	}	

.music img{
	position: absolute;
	z-index: 10;
	width: 10%;
	top: 13%;
	left:4%;
}	
	

.works02_contents{
	width: 100%;
}

.works02_contents img{
	width: 100%;
	margin: 0;
}
	
	
#works02_product{
	width: 100%;
	margin: 10%  0 -10% 0;
}
	
	

	
/* ZOTO WORKS 03*/

#sp_inner_works03{
	background-image: URL("../works/sp/zotoworks03/03_imges/zotoworks_03_background.png");
	background-repeat: none;
	background-size: cover;	
}
	
	
	
	
#zotoworks03_top{
	width: 100%;
	margin: -5% 0 0 0;

}

#zotoworks03_top img{
	width: 100%;	
}


.works03_contents{
	width: 100%;
}

.works03_contents img{
	width: 100%;
}
	

.works03_fase1_contents{
	margin: 30% 0 0 0;	
	}	
	
.works03_fase1_contents p{
	margin: 10% 0 0 0;	
	}
	
	
	
.leaf{
	width: 86%;
	margin: 20% auto;
	text-align: center;
}	
	
.leaf p{
	width: 13%;
	display: inline-block;
	font-size: 0;
	margin: 0 2.5%;
}
	
.leaf img{
	width: 100%;
}

	
	
@keyframes rotate-y{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(360deg);}
}
@-webkit-keyframes rotate-y{
  0%{-webkit-transform:rotateY(0deg);}
  100%{-webkit-transform:rotateY(360deg);}
}
	
	
	
.leaf_01_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0s;
	
}
	
.leaf_02_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0.25s;	
}		
	
.leaf_03_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0.5s;
}		
		
	
.leaf_04_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 0.75s;
}		
	
.leaf_05_animation{
  animation:rotate-y 3s;
  -webkit-animation:rotate-y 3s;
  animation-delay: 1s;
	
}		
	
	

	
	

.prologue_text{
	margin: 0 0 30% 0;
}	

	
	
.timeline_start{
	margin: 15% 0;	
}	
	
.timeline{
	margin: 0 0 35% 0;	
	}	
	

.timeline_year{
	margin: 0 0 5% 0;
}	

	
.timeline_pitch{
	margin: 0 0 2% 0;
}	

.timeline_pitch_02{
	margin: -4% 0 1% 0;
}	
	
.timeline_voice{
	margin: 5% 0 0 0;
}	
	
.timeline_item{
	margin: 7% 0;	
}	

.timeline_photo{
	margin: 7% 0 2% 0;	
}		
	
	
	
.voice_2015 {
	margin: 10% 0 0 0;
}		
	
.voice_2015 img{
	margin: 0 0 4% 0;
}	

	
.works03_fase2_contents p{
	margin: 20% 0 20% 0;	
	}	


	
	
	
#content_2016_02{
	position: relative;
}
	
.viewmore_2016_02{
	width: 15%;
	position: absolute;
	top:37.5%;
	left: 77%;
	}	
	
.viewmore_2016_02 img{
	width: 100%;
}	
	
#timeline_item_2016_02 img{
	margin: -7% 0 -3% 0;	
}
	
#content_2017_02{
	position: relative;
}
	
.viewmore_2017_02{
	width: 15%;
	position: absolute;
	top:65%;
	left: 77%;
	}	
	
.viewmore_2017_02 img{
	width: 100%;
}
	
#timeline_item_2017_02 img{
	margin: -5% 0 -1% 0;	
}		
	
	
#content_2019{
	position: relative;
}
	
.viewmore_2019{
	width: 15%;
	position: absolute;
	top:63%;
	left: 77%;
	}	
	
.viewmore_2019 img{
	width: 100%;
}

	

#timeline_item_2019 img{
	margin: 0 0 -5% 0;	
}	
	
	
#content_2020_02{
	position: relative;
}
	
.viewmore_2020_02{
	width: 15%;
	position: absolute;
	top:49%;
	left: 77%;
	}	
	
.viewmore_2020_02 img{
	width: 100%;
}
	

#content_2020_03{
	position: relative;
}
	
.viewmore_2020_03{
	width: 15%;
	position: absolute;
	top:57%;
	left: 77%;
	}	
	
.viewmore_2020_03 img{
	width: 100%;
}	
	
	
#content_2021{
	position: relative;
}
	
.viewmore_2021{
	width: 15%;
	position: absolute;
	top:62%;
	left: 77%;
	}	
	
.viewmore_2021 img{
	width: 100%;
}	
	

#timeline_item_2021 img{
	margin: 0 0 -5% 0;	
}
	
	

#content_2022{
	position: relative;
}
	
.viewmore_2022{
	width: 15%;
	position: absolute;
	top:67%;
	left: 77%;
	}	
	
.viewmore_2022 img{
	width: 100%;
}	
	

#timeline_item_2022 img{
	margin: 0 0 -5% 0;	
}
	

#content_2022_02{
	position: relative;
}
	
.viewmore_2022_02{
	width: 15%;
	position: absolute;
	top:64%;
	left: 77%;
	}	
	
.viewmore_2022_02 img{
	width: 100%;
}	
	

.sdgs_icon{
	width: 85%;
	margin: -8% auto 0 auto;
	font-size: 0;
	text-align: center;
	}	
	
.sdgs_icon li{
	width: 25%;
	display: inline-block;
	margin: 0 4.1%;
}
	
	
	
.sdgs_icon img{
	width: 100%;
	}	

	
.timeline_year_20xx img{
	margin: 0 0 -15% 0;
}	
	
.timeline_end{
	margin: 0 0 80% 0;
}	
	
	


/*zotoworks03 product*/	
.product_index_icon{
	z-index: 15;
	position: fixed;
	width: 100%;
	bottom:1%;
	left: -200px;
}		
	
.product_index_icon img{
	width: 25%;
}


	
	
#modalitem_2016-1{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2016-1_a{
	width: 100%;
}

#modalitem-2016-1_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:-5%;
	width: 110%;
	margin: 10% 0 5% 0;
}


#modalitem-2016-1_b{
	width: 100%;
}

#modalitem-2016-1_b img{
	width: 100%;
	margin: 45% 0 5% 0;
}


	
#modalitem_2017-2{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2017-2_a{
	width: 100%;
}

#modalitem-2017-2_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:-5%;
	width: 110%;
	margin: 10% 0 5% 0;
}


#modalitem-2017-2_b{
	width: 100%;
}

#modalitem-2017-2_b img{
	width: 100%;
	margin: 100% 0 5% 0;
}	
	
	
	
	
#modalitem_2019{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

	
#modalitem-2019_a{
	width: 100%;
}

#modalitem-2019_a img{
	position: absolute;
	z-index: 10;
	top: 15%;
	left:55%;
	width: 35%;
	margin: 10% 0 5% 0;
}	

	
#modalitem-2019_b{
	width: 100%;
}

#modalitem-2019_b img{
	position: absolute;
	z-index: 15;
	top: 27%;
	left:77%;
	width: 17%;
	margin: 10% 0 5% 0;
}	
	
#modalitem-2019_c{
	width: 100%;
}

#modalitem-2019_c img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:0;
	width: 100%;
	margin: 10% 0 5% 0;
}


#modalitem-2019_d{
	width: 100%;
}

#modalitem-2019_d img{
	width: 100%;
	margin: 40% 0 5% 0;
}	

	
	
	
#modalitem_2020-2{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2020-2_a{
	width: 100%;
}

#modalitem-2020-2_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:0;
	width: 100%;
	margin: 10% 0 5% 0;
}


#modalitem-2020-2_b{
	width: 100%;
}

#modalitem-2020-2_b img{
	width: 100%;
	margin: 15% 0 5% 0;
}	
	

#modalitem-2020-2_c{
	width: 100%;
}

#modalitem-2020-2_c img{
	position: absolute;
	z-index: 15;
	top: 43%;
	left:76%;
	width: 17%;
	margin: 10% 0 5% 0;
}		
	
	
	
#modalitem_2020-3{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2020-3_a{
	width: 100%;
}

#modalitem-2020-3_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:0;
	width: 100%;
	margin: 10% 0 5% 0;
}


#modalitem-2020-3_b{
	width: 100%;
}

#modalitem-2020-3_b img{
	width: 100%;
	margin: 20% 0 5% 0;
}		

	
	
	
#modalitem_2021{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2021_a{
	width: 100%;
}

#modalitem-2021_a video{
	position: absolute;
	z-index: 5;
	top: 0;
	left:15%;
	width: 70%;
	margin: 10% 0 5% 0;
}


#modalitem-2021_b{
	width: 100%;
}

#modalitem-2021_b img{
	width: 100%;
	margin: 50% 0 5% 0;
}		

	
	
	
#modalitem_2022{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2022_a{
	width: 100%;
}

#modalitem-2022_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:0;
	width: 100%;
	margin: 10% 0 5% 0;
}


#modalitem-2022_b{
	width: 100%;
}

#modalitem-2022_b img{
	width: 100%;
	margin: 50% 0 5% 0;
}		

	
#modalitem-2022_c{
	width: 100%;
}

#modalitem-2022_c img{
	position: absolute;
	z-index: 15;
	top: 33%;
	left:73%;
	width: 17%;
	margin: 10% 0 5% 0;
}	
	
	
	
	
	
#modalitem_2022-2{
	width: 100%;
	background-image: url("../images/background_paper.png");
	background-size: contain;
	background-repeat: repeat-y;
	text-align: center;
}

#modalitem-2022-2_a{
	width: 100%;
}

#modalitem-2022-2_a img{
	position: absolute;
	z-index: 5;
	top: 0;
	left:-2%;
	width: 110%;
	margin: 10% 0 5% 0;
}


#modalitem-2022-2_b{
	width: 100%;
}

#modalitem-2022-2_b img{
	width: 100%;
	margin: 75% 0 5% 0;
}	

	
#modalitem-2022-2_c{
	width: 100%;
}

#modalitem-2022-2_c img{
	position: absolute;
	z-index: 5;
	top: 112%;
	left:5%;
	width: 90%;
	margin: 10% 0 5% 0;
}


#modalitem-2022-2_d{
	width: 100%;
}

#modalitem-2022-2_d img{
	width: 100%;
	margin: 30% 0 5% 0;
}		

	
	
/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 10;
	top: 0;
	width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #005C1B;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	left:1%;
    bottom:1%;
    transition: all 1s;/*1秒かけてアニメーション*/
}

.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
	padding: 0 40px 0 0;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
  opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:calc(50% - 40px);
    transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
	animation-name:gnaviAnime;
	animation-duration:1s;
	animation-delay:.2s;/*0.2 秒遅らせて出現*/
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes gnaviAnime{
0% {
	opacity: 0;
}
100% {
	opacity: 1;
}
}


/*リストのレイアウト設定*/

.index_item{
	width: 65%;
	padding: 60% 17.5% 38% 17.5%;
}
	
	
.index_item li{
	display: inline-block;
	vertical-align:top;
	width: 30.025%;
	margin: 0 1%;
}	

	
.index_item li img{
	width: 100%;
}	
	
.product_index_title{
	width: 100%;
	margin: -60% 0 0 0 ;
}
	
.product_index_title img{
	width: 85%;
	padding: 0 7.5%;

	}
	
	
/*========= ボタンのためのCSS ===============*/
.openbtn1{
	z-index: 15;/*ボタンを最前面に*/

}	

	
/* ZOTO WORKS 04 */
	
/* dialog */	
body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-40%);
    width: 50%;
    max-width: 500px;

}



.onetime_popup_content {
    text-align: center;
}
	
	
#works04_dialog_pc{
	display: none;
}	
	

#works04_dialog_sp{
	display: initial;
	width: 100%;
}	
	
#works04_dialog_sp img{
	width: 100%;
}	
	
	
/* contents */	
	
#works04_nav_logo{
	width: 100%;
}

#works04_nav_logo img{
	width: 100%;
}


#works04_nav_title{
	width: 100%;
	margin: 0 0 10% 0;
}

#works04_nav_title img{
	width: 100%;
}	
	
	
	

#zotoworks04_top{
	position: relative;
	width: 100%;
	margin: -5% 0 -2.5% 0;
	overflow: hidden;
	

}

.no img{
	position: absolute;
	width: 100%;
	z-index: 5;
}	

#works04_mainvisual{
	width: 100%;
	overflow: scroll;
	
	
}
	
#works04_mainvisual img{
	width: 180%;
	margin: 0 0 0 0%;
	overflow: scroll;
}	
	

.works04_contents{
	width: 100%;
}

.works04_contents img{
	width: 100%;
	margin: 0 ;
}
	
	
#works04_product{
	width: 100%;
	margin: 10%  0 -10% 0;
}	
	

	
	
	
	
}