@charset "UTF-8";

body{ background: #fff;}
body:before{ display: none;}

.firstWords{ font-family: "FOT-筑紫明朝 Pr6 D";}


#brandTopWrap{ min-height: 100vh; width: 100%; cursor:pointer;} 
#brandTopWrap #brandVisualWrap{ position: absolute; top:0; left:0;right: 0; bottom:0; }
#brandVisualMove{ position: absolute; top:0; left:0; width: 1px; height: 1px; border: solid 1px #c00;}
.loadingFinish #brandVisualMove{ transition: all 2000ms ease-in-out;}

#brandTopWrap .brandLogo{position: fixed;top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all 500ms ease; pointer-events: none;}

.brandLogoOff #brandTopWrap .brandLogo{ opacity: 0;}
#brandTopWrap .brandLogo img{ width: 500px; height: auto;}








#visualButterfly{ position: fixed; top: 100%; left: 100%; width: 450px; height: 450px; transform: translate(0%,0%) rotate(20deg); opacity: 1; border: solid 0px #f30;transition: opacity 300ms ease; display: none;}
#visualButterfly.show{	  opacity: 1;}

#visualButterfly div{position: absolute; top: 0; left: 0; width: 100%; height: 100%;transition: opacity 300ms ease; }
#visualButterfly div:nth-of-type(1) {
	opacity: 1;
		background:url(./img/brandtop/butterfly_fly.gif) 0 0 no-repeat;
	background-size:100% auto ;
}

#visualButterfly div:nth-of-type(2) {
	opacity: 0;
	  background:url(./img/brandtop/butterfly_stop_anime.png) 0 0 no-repeat;
	background-size:100% auto ;
}

#visualButterfly.anime{
	transition: transform 3000ms linear;
	transform: translate(-122%,-122%) rotate(20deg); 
}

#visualButterfly.anime2{
	transition: transform 3000ms linear;
	transform: translate(-120%,-120%) rotate(40deg); 
}


#visualButterfly.anime3 div:nth-of-type(1) { opacity: 0;}
#visualButterfly.anime3 div:nth-of-type(2) { opacity: 1;}
#visualButterfly.anime3 div:nth-of-type(2) {
  animation-name: butterfly_comeing;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: steps(7);
  animation-fill-mode: forwards;
}



#visualButterfly.out{
	transition: all 4000ms linear;
	transform: translate(120%,-420%) rotate(40deg); 
}
#visualButterfly.out div:nth-of-type(1) { opacity: 1;}
#visualButterfly.out div:nth-of-type(2) { opacity: 0;}












#visualButterfly2{ position: fixed; bottom: 0%; right: 0%; width: 450px; height: 450px; transform: translate(100%,100%) ; opacity: 1; border: solid 0px #f30;}

#visualButterfly2.start{
  animation-name: butterfly2_moving;
  animation-duration: 60s;
  animation-iteration-count: 1;
  animation-fill-mode: none;
}

#visualButterfly2.type_b{  bottom: auto; right: auto; top: 0; left: 50%; transform: translate(50%,-150%)  rotate(-180deg) ;  border: 0px solid #04e126;}

#visualButterfly2.type_b.start{
	  animation-name: butterfly2_moving_b;
  animation-duration: 60s;
  animation-iteration-count: 1;
  animation-fill-mode: none;
}


#visualButterfly2.type_c{  bottom: 0; right: auto; top: auto; left: 50%; transform: translate(-200%,100%)  rotate(90deg) ;  border: 0px solid #f00;}

#visualButterfly2.type_c.start{
	  animation-name: butterfly2_moving_c;
  animation-duration: 60s;
  animation-iteration-count: 1;
  animation-fill-mode: none;
}


#visualButterfly2.type_d{  bottom: auto; right: auto; top: 0; left: 50%; transform: translate(-60%,-100%)  rotate(200deg) ;  border: 0px solid #369;}

#visualButterfly2.type_d.start{
	  animation-name: butterfly2_moving_d;
  animation-duration: 60s;
  animation-iteration-count: 1;
  animation-fill-mode: none;
}


#visualButterfly2 div{position: absolute; top: 0; left: 0; width: 100%; height: 100%;transition: opacity 100ms ease; }
#visualButterfly2 div:nth-of-type(1) {
	opacity: 1;
		background:url(./img/brandtop/butterfly_fly.gif) 0 0 no-repeat;
	background-size:100% auto ;
}

#visualButterfly2 div:nth-of-type(2) {
	opacity: 0;
	  background:url(./img/brandtop/butterfly_stop_anime_full.png?v=3) 0 0 no-repeat;
	background-size:100% auto ;
}


#visualButterfly2.stay div:nth-of-type(1) { opacity: 0;}
#visualButterfly2.stay div:nth-of-type(2) { opacity: 1;}
#visualButterfly2.stay div:nth-of-type(2) {
  animation-name: butterfly_comeing;
  animation-duration: 3.2s;
  animation-iteration-count: 1;
  animation-timing-function: steps(43);
  animation-fill-mode: forwards;
}






body.home.menuCover:after{     background: rgba(0,0,0,0.8);}
body.home.menuCover #globalHeader .menuArea{ width: 100%; height: 100%; overflow: auto; visibility: hidden; pointer-events: none; }
body.home.menuCover.menuOpen #globalHeader .menuArea{  visibility: visible; pointer-events: all; border: solid 0px #c00}



body.home.menuCover #globalHeader .menuArea .inWrap{ width: 460px;pointer-events: all;

	
}

body.home.menuCover #globalHeader  .menuAreaBG{
	 display: block; position: fixed; top: 0px; left: 0; z-index: 1; width: 460px; height: 100vh;

		background:url(./img/common/menu/bg_home_long.svg) 0 0px  no-repeat;
	background-size: 100% auto; 
	
	
}

body.home.menuCover #globalHeader  .menuAreaBG::before{
	content: '';
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 140px;
	background: #fff;
	pointer-events: none;
	visibility: hidden;
}


body.home.menuCover.homeNaviOn #globalHeader  .menuAreaBG::before{visibility: visible;}
body.home.menuCover.homeNaviOn.dragMenuDeactive #globalHeader  .menuAreaBG::before{visibility: hidden;}


body.home.menuCover #globalHeader .menu{    padding: 0 0 0 0px;}



#brandTopWrapFull{ position: fixed; min-height: 100vh; width: 100%; cursor:pointer; overflow: hidden;cursor: default; pointer-events: none;} 
body.homeNaviOn #brandTopWrapFull{ cursor: pointer; pointer-events: all;}
body.menuOpen #brandTopWrapFull{ cursor: default; pointer-events: none;}

#brandTopWrapFull #brandVisualWrap.off{ position: absolute; top:0; left:0;right: 0; bottom:0; background:url(./img/brandtop/sitetop_bg_5000.jpg) 0 0 no-repeat;
	background-size:cover ;
	  transform:translate3d(0,0,0,); }
	  
	  
	  
	  
	  #brandTopWrapFull #brandVisualWrap.on{ position: absolute; top:0; left:0;right: 0; bottom:0; background:url(./img/brandtop/sitetop_bg_5000.jpg) 0 0  repeat;
	background-size:6400px auto ;
	  transform:translate3d(0,0,0) scale(1); }
	  
	  	  .touchDevice #brandTopWrapFull #brandVisualWrap.on{ position: absolute; top:0; left:0;right: 0; bottom:0; 
		  	  background:url(./img/brandtop/sitetop_bg_2500.jpg) 0 0  repeat;
	background-size:640% auto ;
	  transform:translate3d(0,0,0) scale(1); }
	  
#brandTopWrapFull .brandLogo{position: fixed;top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all 500ms ease; pointer-events: none;}

.brandLogoOff #brandTopWrapFull .brandLogo{ opacity: 0;}


#brandTopWrapFull .brandLogo img{ width: 300px; height: auto;}

#brandVisualBtnWrapUnit{ position: absolute; top: 0%; left: 0%; transform: translate(0%,0%); display: none;}
#brandVisualBtnWrap{ font-size: 0; line-height: 0; background: rgba(255,0,0,0.1); text-align: left;}
#brandVisualBtnWrap .btnUnit{ border: solid 1px #f30; display: inline-block;}

#brandVisualBtnWrap .btnUnit .btn{ position: absolute; display: inline-block; background: #333; color: #fff; top: 500px; left: 500px; transform: translate(-50%,-50%);}




#homeContentsModal{ position: fixed; top:0; left:0;right: 0; bottom:0; z-index: 999;overflow: auto; opacity: 0; transition: all 500ms ease-in-out; pointer-events: none;}
body.homeModalActive #homeContentsModal{ pointer-events: all; opacity: 1;}
body.homeModalActive #globalHeader{ display: none;}


#homeContentsModal .inFrame{ width:100%; min-width: 1200px; padding-top: 200px;}
#homeContentsModal .inContents{ width:1200px; margin: auto; }
#homeContentsModal section.modalcontents{ position: relative; background: #fff; width: 100%; height: 1000px; margin-bottom: 300px;}
#homeContentsModal .closeBtn{position: fixed; top:30px; right: 40px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;

	
		background: url(./img/parts/btn_close.svg) center center no-repeat  rgba(255,255,255,0.8);
	background-size: 80%; 
	cursor: pointer;
}
#homeContentsModal .closeBtn span{ display: inline-block; font-size: 5rem; color: #000; line-height: 1;}


#homeContentsModal section img{ max-width: 100%; height: auto; margin-bottom: 2rem;}


#homeContentsModal section .nextBtn{ position: absolute; bottom: 30px; right: 30px; display: flex; width: auto; height: 90px;align-items: center; justify-content: center; cursor: pointer;}
#homeContentsModal section .nextBtn span{ position: relative; display: inline-block; padding-right: 80px;}
#homeContentsModal section .nextBtn span::after{ content: ''; display: inline-block; width: 48px; height: 90px;
		background: url(./img/brandtop/arrow_next_color.svg) center center no-repeat ;
	background-size: contain;
	position: absolute;
	top: 50%; right: 0; transform: translate(0,-50%);
}
#homeContentsModal section .nextBtn img{ width: auto; height: 48px; margin: 0;}



#homeContentsModal section ol.nav{ display: grid;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
		grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-gap: 0px;
	
	position: absolute;
	width: 10px;
	 bottom: 150px; 
	 right: 35px;
	 list-style: none;
	
}
#homeContentsModal section ol.nav li{ position: relative; width: 10px; height: 50px; padding: 0; margin: 0;
	cursor: pointer;
}
#homeContentsModal section ol.nav li::before{	content: '0'; display: inline-block;  line-height: 1;color: #A79500;
		position: absolute;
	top: 50%; 
	left: 50%;
	transform: translate(-50%,-50%);
	font-weight: bold;
}
#homeContentsModal section ol.nav li::after{
	content: ''; display: block; width: 100%; height: 1px;
		background:  #A79500;
	position: absolute;
	bottom: 0; 
	left: 0;
}
#homeContentsModal section ol.nav li:nth-of-type(1)::before{	content: '1'; }
#homeContentsModal section ol.nav li:nth-of-type(2)::before{	content: '2'; }
#homeContentsModal section ol.nav li:nth-of-type(3)::before{	content: '3'; }
#homeContentsModal section ol.nav li:nth-of-type(4)::before{	content: '4'; }
#homeContentsModal section ol.nav li:nth-of-type(5)::before{	content: '5'; }


#homeContentsModal section#home_about{}

#homeContentsModal section#home_about .aboutUnit{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; text-align: left;}

#homeContentsModal section#home_about .aboutUnit .flexWrap{
	display: grid;grid-template-rows: 1fr 1fr; 	grid-template-columns: 1fr; height: 100%;
}
#homeContentsModal section#home_about .aboutUnit .flexWrap .flexItem{}
#homeContentsModal section#home_about .aboutUnit .flexWrap .title{ background: #ccc}
#homeContentsModal section#home_about .aboutUnit .flexWrap .contents{ padding: 45px 65px;}

#homeContentsModal section#home_about .aboutUnit .flexWrap .contents h4{ font-size:2.3rem; color: #A79500; margin-bottom: 70px;font-family: "FOT-筑紫明朝 Pr6 D";
	padding-top: 60px;
}

#homeContentsModal section .aboutUnit .flexWrap .contents h4::before{
		content: '0'; display: inline-block;
		color:  #A79500;
	position: absolute;
	font-size: 1rem;
	top: 0; 
	left: 0;
}
	#homeContentsModal #home_about_2 .flexWrap .contents h4::before{content: '2';}
	#homeContentsModal #home_about_3 .flexWrap .contents h4::before{content: '3';}
	#homeContentsModal #home_about_4 .flexWrap .contents h4::before{content: '4';}
	#homeContentsModal #home_about_5 .flexWrap .contents h4::before{content: '5';}
	
#homeContentsModal section#home_about .aboutUnit .flexWrap .contents h4::after{
		content: ''; display: block; width: 10px; height: 1px;
		background: #A79500;
	position: absolute;
	top: 35px; 
	left: 0;
}

#homeContentsModal section#home_about .aboutUnit .flexWrap .contents .text{ width: 670px;font-size:1.3rem; }

#homeContentsModal #home_about_1 ol.nav li:nth-of-type(1)::before{	color: #fff;}
#homeContentsModal #home_about_2 ol.nav li:nth-of-type(2)::before,
#homeContentsModal #home_about_3 ol.nav li:nth-of-type(3)::before,
#homeContentsModal #home_about_4 ol.nav li:nth-of-type(4)::before,
#homeContentsModal #home_about_5 ol.nav li:nth-of-type(5)::before{	color: #000;}

#homeContentsModal #home_about_1 ol.nav li:nth-of-type(1),
#homeContentsModal #home_about_2 ol.nav li:nth-of-type(2),
#homeContentsModal #home_about_3 ol.nav li:nth-of-type(3),
#homeContentsModal #home_about_4 ol.nav li:nth-of-type(4),
#homeContentsModal #home_about_5 ol.nav li:nth-of-type(5){ pointer-events: none; cursor: default;}




#homeContentsModal section#home_about #home_about_1{ 
	display: block;
	background: url(./img/brandtop/about_title_museum.png) center top no-repeat ;
	background-size: cover; 
}
#homeContentsModal section#home_about #home_about_1 ul{ position: absolute; top: 150px; left: 680px; text-align: left;}
#homeContentsModal section#home_about #home_about_1 ul li{line-height: 1; margin-bottom: 55px;}
#homeContentsModal section#home_about #home_about_1 ul li a{}
#homeContentsModal section#home_about #home_about_1 ul li img{ width: auto; height: 60px; margin: 0;}




#homeContentsModal section#home_about #home_about_2 .flexWrap .title{ 
	background: url(./img/brandtop/title_who_we_are.png) center top no-repeat ;
	background-size: cover; 
}




#homeContentsModal section#home_about #home_about_3{ }
#homeContentsModal section#home_about #home_about_3 .flexWrap{grid-template-rows: 1fr 560px; }
#homeContentsModal section#home_about #home_about_3 .flexWrap .title{ 
	background: url(./img/brandtop/title_our_mission.png) center top no-repeat ;
	background-size: cover; 
}



#homeContentsModal section#home_about #home_about_4{ }
#homeContentsModal section#home_about #home_about_4 .flexWrap{grid-template-rows: 1fr;grid-template-columns: 350px 1fr; }
#homeContentsModal section#home_about #home_about_4 .flexWrap .title{ 
	background: url(./img/brandtop/title_our_vision.png) center top no-repeat ;
	background-size: cover; 
}
#homeContentsModal section#home_about #home_about_4 h4{ margin-bottom: 200px;}
#homeContentsModal section#home_about #home_about_4 .flexWrap .text{}
#homeContentsModal section#home_about #home_about_4 .flexWrap .text h5{ font-size: 1.3rem;}
	#homeContentsModal section#home_about #home_about_4 .flexWrap .text p{ font-size: 1rem;line-height: 1.6;}



#homeContentsModal section#home_about #home_about_5{ }
#homeContentsModal section#home_about #home_about_5 .flexWrap{grid-template-rows: 1fr;grid-template-columns: 220px 1fr; }
#homeContentsModal section#home_about #home_about_5 .flexWrap .title{ 
	background: url(./img/brandtop/title_our_staff_bg.svg) center top no-repeat ;
	background-size: contain; 
}
#homeContentsModal section#home_about #home_about_5 .contents{ padding-left: 0; padding-right: 0;}
#homeContentsModal section#home_about #home_about_5 h4{ margin-bottom: 100px;}
#homeContentsModal section#home_about #home_about_5 .flexWrap .text{ width: 870px;}
#homeContentsModal section#home_about #home_about_5 .flexWrap .text h5{ font-size: 1.6rem;}
#homeContentsModal section#home_about #home_about_5 .flexWrap .text .job{ font-size: 1.1rem; padding-top: 1em;}
#homeContentsModal section#home_about #home_about_5 .flexWrap .text p{ font-size: 1rem;line-height: 1.6;}


#homeContentsModal section#home_about #home_about_5 .flexWrap .text h5:nth-of-type(2) { padding-top: 2rem;}	
	





#homeContentsModal section#home_feature{ }
#homeContentsModal section#home_feature .inWrap{ 
		display: grid;
	grid-template-columns: 340px 1fr;
	grid-auto-rows: auto;
	grid-gap: 50px;
	 height: 100%;}
#homeContentsModal section#home_feature .title{
	
	
		background: url(./img/brandtop/about_title_feature.svg) center top no-repeat ;
	background-size: contain; 
	
}
#homeContentsModal section#home_feature .title h3{ display: none;}
#homeContentsModal section#home_feature .entryWrap{ overflow: hidden; text-align: left; padding-right: 150px;}

#homeContentsModal section#home_feature .entryWrap article{ padding: 85px 0;}
#homeContentsModal section#home_feature .entryWrap article .entryDate{ margin-bottom: 3rem;}
#homeContentsModal section#home_feature .entryWrap article .entryTitle{ font-size:2.3rem; color: #A79500; margin-bottom: 2rem;font-family: "FOT-筑紫明朝 Pr6 D";
	
}
#homeContentsModal section#home_feature .entryWrap article .entryBody{ font-size:1.45rem; line-height: 1.6;}
#homeContentsModal section#home_feature .entryWrap article .entryBody p{ margin-bottom: 2rem;}

#homeContentsModal section#home_collection { padding: 40px; background: #000;}
#homeContentsModal section#home_collection .inWrap{ display: grid;grid-template-rows: auto 1fr; 	grid-template-columns: 1fr; height: 100%;}
#homeContentsModal section#home_collection .movie::before{ content: ''; display: block; width: 100%; height: 0; padding-top: 56.25%;}
#homeContentsModal section#home_collection .movie iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
#homeContentsModal section#home_collection .title{ display: flex; align-items: center; justify-content: center;

		background: url(./img/brandtop/about_title_collection.svg) center center no-repeat #000;
	background-size: cover; 

}
#homeContentsModal section#home_collection .title h3{ display:none;}








.topDesignLayout{ padding-top: 240px; padding-bottom: 240px; }

.topDesignLayout .inFrame{ width: 90%; max-width: 1200px; margin: auto;background: #fff;
	border-radius: 600px 0px 0px 0px;
}



.topDesignLayout .metaData  iframe{ max-width: 100%; height: auto;
	aspect-ratio: 16 / 9;
	
}



body.events.topDesign .topDesignLayout .inFrame{	border-radius: 0px 0px 0px 600px;}

.topDesignLayout .contentsArea{ border: solid 0px #c00; padding: 150px 150px 150px 350px;}

body.events2 .topDesignLayout .contentsArea{ padding-bottom:0;}


.topDesignLayout .contentsArea h2{ position: absolute; top: 730px; left: 75px; transform: rotate(90deg);
	
	color: #A79500;
	font-size: 70px;
	margin: 0;
	padding: 0;
	line-height: 1;
	display: inline-block;
	
	
}

body.events.topDesign .topDesignLayout .contentsArea { padding-top: 0;}
body.events.topDesign .topDesignLayout .contentsArea h2{ display: none;}

.topDesignLayout .entryItem{ text-align: left; padding-top: 150px;font-size: 1.3rem;margin-bottom: 150px; }

.topDesignLayout .entryItem:first-of-type{ padding-top: 0px;}

.topDesignLayout .entryVisual{ margin-bottom: 60px;}
.topDesignLayout  img{ width: 100%; max-width: 100%; height: auto;}

.topDesignLayout .entryMeta{}
.topDesignLayout .entryTitle{}
.topDesignLayout .entryTitle h3{	font-family: "TsukuMinPr6-D";color: #A79500; border-bottom: solid 2px #A79500; padding-bottom: 60px;padding-top: 0px; margin: 0; font-size: 1.85rem; line-height: 1.4;}


.topDesignLayout .entryTitle .shareBox{font-size: 0.8rem; line-height: 1.4; position: absolute;
	top: 0px;
	right: 0;
	padding-right: 40px;

	height: 36px;
	padding-top: 10px;
	cursor: pointer;
}
.topDesignLayout .entryTitle .shareBox .actionArea{
	position: absolute;
	top: 0px;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 36px;

}


.topDesignLayout .entryTitle .shareBox:before{ content: '共有'; display: inline-block;	font-family: "TsukuMinPr6-D";color: #A79500;}
.topDesignLayout .entryTitle .shareBox:after{content: ''; display: inline-block;position: absolute;
top: 50%;
right: 0;
transform: translate(0,-65%);
	width: 25px;
height: 36px;
background: url(./img/parts/share/share.png) center center no-repeat;background-size: contain; 

}

.topDesignLayout .entryTitle .shareBox ul{position: absolute;
	top: 40px;
	right: 0;
	border: solid 2px #A79500;
	background: #fff;
	padding: 25px;
	border-radius: 10px;
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	transition: all 300ms ease;
	}
	
.topDesignLayout .entryTitle .shareBox.open ul{
	pointer-events: all;
	opacity: 1;
}
	
.topDesignLayout .entryTitle .shareBox ul li{}

.topDesignLayout .entryTitle .shareBox ul li .copyed{ opacity: .2;}
.topDesignLayout .entryTitle .shareBox ul li:not(:last-child){margin-bottom: 10px;}
.topDesignLayout .entryTitle .shareBox ul li .btnArea{ padding: 12px 0 12px 40px; display: block;}
.topDesignLayout .entryTitle .shareBox ul li .btnArea::before{
	content: ''; display: inline-block;position: absolute;
	top: 50%;
	left: 0;
	width: 30px;
	height: 30px;
	background: #eee;
	
	transform: translate(0,-50%);
}

.topDesignLayout .entryTitle .shareBox ul li:nth-of-type(1) .btnArea::before{		background: url(./img/parts/share/icon_copy.png) center center no-repeat;background-size: contain; }

.topDesignLayout .entryTitle .shareBox ul li:nth-of-type(2) .btnArea::before{		background: url(./img/parts/share/icon_facebook.png) center center no-repeat;background-size: contain; }

.topDesignLayout .entryTitle .shareBox ul li:nth-of-type(3) .btnArea::before{		background: url(./img/parts/share/icon_twitter.png) center center no-repeat;background-size: contain; }


.topDesignLayout .metaData{border-bottom: solid 2px #A79500;padding-bottom: 25px;padding-top: 25px;word-break: break-all; font-size: 0.8em;}

body.events.topDesign .topDesignLayout .metaData:last-child{ border-bottom: 0; padding-bottom: 0;}

.topDesignLayout .entryBody,
.topDesignLayout .entryLinkUrl{ position: relative;}
	
.topDesignLayout .metaLabel{

	display: inline-block;
	position: absolute;
	top:25px;
	left: -190px;
	color: #A79500;
	font-family: "TsukuMinPr6-D";

}

.topDesignLayout .metaData .grid{
	grid-gap:1px;
	background: #A79500;
	border: solid 1px #A79500;
}

.topDesignLayout .metaData .grid .gridItem{ padding-top: 100%;}

@media screen and (max-width:1000px) {
	
.topDesignLayout .metaData .grid{ grid-template-columns: 1fr;}


.topDesignLayout .metaData  iframe{ max-width: 100%; height: auto;
	aspect-ratio: 16 / 9;
	
}

}


body#top.home .topContents#topics .contentsFrame{width:90%;}
body#top.home .topContents#topics .contentsMain{width:clamp(500px 80% 900px); height: 480px;	max-width: 900px;}




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

}



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




		body.home.menuCover #globalHeader .menu{ width: 30vw; padding-left: 0vw; margin-bottom: 3vw;}
		.iPad body.home.menuCover #globalHeader .menu{ width: 26vw; }
		
		body.home.menuCover #globalHeader .menu.share{ margin: 0 0 0 1vw;}
		
		#brandTopWrapFull .brandLogo img{ width: 50vw; height: auto;}
		


#visualButterfly2{  width: 60vw; height: 60vw; }


   body.home.menuCover #globalHeader  .menuAreaBG::before{ visibility: hidden !important; display: none !important;}
   
   
   
   
   
   
   
   
   .topDesignLayout{ padding-top: 30vw; padding-bottom: 50vw;}
   
   .topDesignLayout .inFrame{ width: 90%; max-width: 1200px; margin: auto;background: #fff;
	   border-radius: 50vw 0px 0px 0px;
   }
   
   body.events.topDesign .topDesignLayout .inFrame{	border-radius: 0px 0px 0px 50vw;}
   
   .topDesignLayout .contentsArea{ padding: 34vw 7vw 15vw 7vw;}
   body.events.topDesign .topDesignLayout .contentsArea{ padding-bottom: 7vw;}
   
   .topDesignLayout .contentsArea h2{ position: absolute; top: 13vw; left: auto; right: 10vw; transform: rotate(0deg);
	   

	   font-size: 10vw;
	   
	   
   }
   
   body.events.topDesign .topDesignLayout .contentsArea { }
   body.events.topDesign .topDesignLayout .contentsArea h2{ }
   
   .topDesignLayout .entryItem{padding-top: 30vw;font-size: 1.3rem; margin-bottom: 30vw; }
   

   
   .topDesignLayout .entryItem:first-of-type{ }
   
   .topDesignLayout .entryVisual{ margin-bottom: 6vw;}
   .topDesignLayout  img{ }
   
   .topDesignLayout .entryMeta{}
   .topDesignLayout .entryTitle{}
   .topDesignLayout .entryTitle h3{	padding-bottom: 6vw; padding-right: 18vw; font-size: 1.85rem;}
   
   
   .topDesignLayout .entryTitle .shareBox{font-size: 0.8rem; line-height: 1.4; position: absolute;
	   top: 0px;
	   right: 0;
	   padding-right: 6vw;
   
	   height: 10vw;
	   padding-top: 3vw;
   }
   .topDesignLayout .entryTitle .shareBox .actionArea{
	   position: absolute;
	   top: 0px;
	   left: 0;
	   z-index: 10;
	   width: 100%;
	   height: 10vw;
   
   }
   
   
   .topDesignLayout .entryTitle .shareBox:before{ content: '共有'; white-space: nowrap; display: inline-block;	font-family: "TsukuMinPr6-D";color: #A79500;}
   .topDesignLayout .entryTitle .shareBox:after{content: ''; display: inline-block;position: absolute;
   top: 50%;
   right: 0;
   transform: translate(0,-65%);
	   width: 5vw;
   height: 7vw;
   background: url(./img/parts/share/share.png) center center no-repeat;background-size: contain; 
   
   }
   
   .topDesignLayout .entryTitle .shareBox ul{position: absolute;
	   top: 40px;
	   right: 0;
	   border: solid 2px #A79500;
	   background: #fff;
	   padding: 25px;
	   border-radius: 10px;
	   z-index: 100;
	   pointer-events: none;
	   opacity: 0;
	   transition: all 300ms ease;
	   }
	   
   .topDesignLayout .entryTitle .shareBox.open ul{
	   pointer-events: all;
	   opacity: 1;
   }
	   
   .topDesignLayout .entryTitle .shareBox ul li{}
   
   .topDesignLayout .entryTitle .shareBox ul li .copyed{ opacity: .2;}
   .topDesignLayout .entryTitle .shareBox ul li:not(:last-child){margin-bottom: 10px;}
   .topDesignLayout .entryTitle .shareBox ul li .btnArea{ padding: 12px 0 12px 40px; display: block;}
   .topDesignLayout .entryTitle .shareBox ul li .btnArea::before{
	   content: ''; display: inline-block;position: absolute;
	   top: 50%;
	   left: 0;
	   width: 30px;
	   height: 30px;
	   background: #eee;
	   
	   transform: translate(0,-50%);
   }
   
   .topDesignLayout .entryTitle .shareBox ul li:nth-of-type(1) .btnArea::before{		background: url(./img/parts/share/icon_copy.png) center center no-repeat;background-size: contain; }
   
   .topDesignLayout .entryTitle .shareBox ul li:nth-of-type(2) .btnArea::before{		background: url(./img/parts/share/icon_facebook.png) center center no-repeat;background-size: contain; }
   
   .topDesignLayout .entryTitle .shareBox ul li:nth-of-type(3) .btnArea::before{		background: url(./img/parts/share/icon_twitter.png) center center no-repeat;background-size: contain; }
   
   
   .topDesignLayout .metaData{border-bottom: solid 2px #A79500;padding-bottom: 6vw;padding-top: 6vw;
	   
	   
	   font-size: 0.9em;
   }
   
   body.events.topDesign .topDesignLayout .metaData:last-child{ border-bottom: 0;}
   
   .topDesignLayout .entryBody,
   .topDesignLayout .entryLinkUrl{ position: relative;}
	   
   .topDesignLayout .metaLabel{
   
	   display: block;
	   position: relative;
	   top:0vw;
	   left: 0vw;
	   margin-bottom: 4vw;
	   line-height: 1;

   
   }









   
}
/* ▲ max-width:850px  */


@keyframes butterfly_comeing {
  0% {
    background-position: 0 0; 
  }
  100% {
    background-position: 0 bottom; 
  }
}



@keyframes butterfly2_moving {
  0% {transform: translate(0%,200%) ; }
  5% { transform: translate(-75%,5%) rotate(15deg) ;}
  
  7.5% { transform: translate(-80%,0%) rotate(20deg) ; }
  15% {  transform: translate(-80%,0%) rotate(20deg) ; }
  

  25% {  transform: translate(-30%,-50%) rotate(-30deg) ; }
  30% {  transform: translate(-30%,-50%) rotate(-30deg) ; }

  65% {transform: translate(-500%,-500%) rotate(-60deg) ; opacity: 1; }
  68% {transform: translate(-500%,-500%) rotate(-60deg) ; opacity: 0; }
  100% { opacity: 0; }
}




@keyframes butterfly2_moving_b {
  0% {transform: translate(50%,-150%)  rotate(-120deg) }
  5% {transform: translate(-80%,0%)  rotate(-120deg);}
  
  7.5% {transform: translate(-85%,5%)  rotate(-130deg); }
  15% { transform: translate(-85%,5%)  rotate(-130deg);}
  

  25% { transform: translate(-95%,105%)  rotate(-110deg);}
  30% {transform: translate(-95%,105%)  rotate(-110deg);}

  65% {transform: translate(-350%,500%)  rotate(-110deg); opacity: 1; }
  68% {transform: translate(-350%,500%)  rotate(-110deg); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes butterfly2_moving_c {
  0% {transform: translate(-200%,100%)  rotate(60deg) ; }
  5% {transform: translate(-120%,10%)  rotate(55deg) ;}
  
  7.5% {transform: translate(-115%,0%)  rotate(60deg) ;}
  15% { transform: translate(-115%,0%)  rotate(60deg) ;}
  

  25% {  transform: translate(-10%,-55%) rotate(100deg) ; }
  30% {  transform: translate(-10%,-55%) rotate(100deg) ; }

  65% {transform: translate(500%,50%) rotate(160deg) ; opacity: 1; }
  68% {transform: translate(500%,50%) rotate(160deg) ; opacity: 0; }
  100% { opacity: 0; }
}



@keyframes butterfly2_moving_d {
  0% {transform: translate(-60%,-100%)  rotate(220deg) ;}
  5% {transform: translate(-50%,-5%)  rotate(220deg) ;}
  
  7.5% {transform: translate(-45%,0%)  rotate(230deg) ; }
  15% {transform: translate(-45%,0%)  rotate(230deg) ; }
  

  25% {transform: translate(-90%,40%)  rotate(260deg) ; }
  30% {transform: translate(-90%,40%)  rotate(260deg) ; }

  65% {transform: translate(-500%,90%)  rotate(300deg) ; opacity: 1; }
  68% {transform: translate(-500%,90%)  rotate(300deg); opacity: 0; }
  100% {  opacity: 0;}
}