@charset "UTF-8";

:root {

	--color-key: #008bab;
	--color-key-light: #4daec4;
	
	--color-yellow: #ffee11;
	--color-sky: #b2dce6;

	--color-gray: #f0f0eb;
	--color-gray-light: #cccccc;
	
	--color-news: #008bab;
	--color-news-light: #b2dce6;
	
	--color-works: #cc0000;
	--color-works-light: #f0b2b2;
	
	--color-media: #ea8700;
	--color-media-light: #f9dbb2;
	
	--color-talk: #669966;
	--color-talk-light: #d1e0d1;
}

.keyColor{ color: var(--color-key);}
.keyColorBg{ background-color: var(--color-key);}


@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp-noto.min.css);
@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-noto.min.css);


/*
NotoSans
    @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
   .font_noto{ font-family: 'Noto Sans JP';}

Mplus 1p
    @import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
   .font_noto{ font-family: 'Mplus 1p';}

Rounded Mplus 1c
    @import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
   .font_noto{ font-family: 'Rounded Mplus 1c';}

Hannari Min
    @import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
   .font_noto{ font-family: 'Hannari';}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : NotoSans Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-noto.min.css);
    body{  font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

YakuhanJP : YuGothic Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-narrow.min.css);
    body{ font-family: YakuHanJP_Narrow, "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

YakuhanJP : HiraginoGothic Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css);
    body{ font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : NotoSerif Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp-noto.min.css);
    body{  font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;}

YakuhanJP : YuMin Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css);
    body{ font-family: YakuHanMP, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;}

YakuhanJP : HiraginoMin Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css);
    body{ font-family: YakuHanMP, "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", YuMincho, serif;}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

YakuhanJP : M PLUS Rounded 1c Type
    @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanrp.min.css);
    body{  font-family: YakuHanRP, "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

*/

.font_normal{font-family: "TsukuGoPr5-R-AvenirNextLTPro-Regular";}

.font_TsukuGoPr5D{font-family: "FOT-筑紫ゴシック Pr5 D";}
.jpBold{font-family: "FOT-筑紫ゴシック Pro B";}

.font_TsukuMinPr6M{font-family: "FOT-筑紫明朝 Pr6 M";}
.font_TsukuMinPr6R{font-family: "FOT-筑紫明朝 Pr6 R";}
.font_TsukuMinPr6D{font-family: "FOT-筑紫明朝 Pr6 D";}
.font_AvenirNextLTProIt{font-family: "AvenirNextLTPro-It";}
.font_AvenirNextLTProM{font-family: "AvenirNextLTPro-MediumIt";}
.font_AGaramondPro{font-family: "AGaramondPro-Regular";}





/*/////////////////////////
base layout　
//////////////////////////*/
html,body {
	width: 100%;
	font-size: 14px;
background:#fff;
}
body {
	  font-family: "TsukuGoPr5-R-AvenirNextLTPro-Regular";
    font-style: normal;
    font-weight: 400;
	line-height: 1.8;
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;

	width: 100%;
	text-align: center;
    overflow-y: auto;
    letter-spacing: 0.1em;
    
    
    }
   

    
body:before{ content: ''; display: none; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; 
background: rgb(0,210,255);
background: linear-gradient(180deg, rgba(0,210,255,0.49763655462184875) 0%, rgba(0,210,255,0) 26%);
}

body.openContentsFlag{ overflow: hidden;}

#siteBgWrap{display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; opacity:0;}
.bgActive #siteBgWrap{ opacity: 1;}

body.release  #siteBgWrap{ display: none !important;}

#siteBgWrap .item{position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 2500px; 
		opacity: 0;
		background: #fff;
	transform:translate(0,0px);
	transition: 1000ms ease;
}
#siteBgWrap .item::before{ content: ''; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 2500px; opacity: 0.5;

}

#siteBgWrap .item.show{ opacity: 1;}

#siteBgWrap .item.bgShow{
	opacity: 0; transform:translate(0,900px);
	animation-name: bgShow;
	animation-fill-mode:forwards;
	animation-duration:30000ms;
	animation-timing-function:ease;
	animation-direction:normal;
}
#siteBgWrap .item.bgOut{
	opacity: 1; transform:translate(0,0px);
	animation-name: bgOut;
	animation-fill-mode:forwards;
	animation-duration:30000ms;
	animation-timing-function:ease;
	animation-direction:normal;
}

#siteBgWrap .step_1::before{

background: rgb(186,88,199);
background: linear-gradient(180deg, rgba(186,88,199,1) 0%, rgba(250,171,29,1) 15%, rgba(250,237,0,1) 25%, rgba(250,237,0,1) 100%);
}

#siteBgWrap .step_2::before{

background: rgb(250,237,0);
background: linear-gradient(180deg, rgba(250,237,0,1) 0%, rgba(137,255,77,1) 15%, rgba(255,171,29,1) 25%, rgba(255,171,29,1) 100%);

	
}

#siteBgWrap .step_3::before{

background: rgb(255,171,29);
background: linear-gradient(180deg, rgba(255,171,29,1) 0%, rgba(188,124,255,1) 15%, rgba(70,219,226,1) 25%, rgba(70,219,226,1) 100%);
}

#siteBgWrap .step_4::before{

background: rgb(70,219,226);
background: linear-gradient(180deg, rgba(70,219,226,1) 0%, rgba(246,72,138,1) 15%, rgba(186,88,199,1) 25%, rgba(186,88,199,1) 100%);
}


/*
#siteBgWrap .step_1{ width: 75%;}
#siteBgWrap .step_2{ width: 75%; left: 25%;}
#siteBgWrap .step_3{ width: 75%; left: 25%;}
#siteBgWrap .step_4{ width: 75%;}
*/

body,a, a:link,a:hover, a:active ,a:visited {
	color: #262626;
}

body.loadingFinish{}

body.fixed{ overflow-x:hidden; overflow-y: scroll;}

body.fixed.menuOpen{overflow:hidden; }

body.home.fixed{ overflow:hidden; }
body.fixed #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}

body.fixedSimulator{ overflow:hidden;}
body.fixedSimulator #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}



html.touchDevice,
.touchDevice body{ font-size: 3.2vw;}

	html.iPad, .iPad body{ font-size: 2.5vw;}

#container{ position:relative; opacity: 0; transition: opacity 1000ms ease; z-index: 5;}


#container *{}
#container .tCenter{text-align: center;}


.shopifySite #container{  opacity: 1; }
#container.fadeIn{ opacity: 1;}
#container.fadeOut{ opacity: 0 !important;}

#base{ position:relative;}

#base::after{ content: ''; display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,0,0,0.5);
	z-index: 1;
	pointer-events: none;
}


a, a:link, a:visited {
	text-decoration: none;
	outline: 0;
}
a:hover, a:active {
	text-decoration: none;
}
a.noline, a.noline:link {
	text-decoration: none !important;
}


#stgServerInfo{ display: inline-block; padding: 0.5rem 1rem;line-height: 1; background: #c00; position: fixed; bottom: 1rem; left: 1rem; z-index: 99999999999;}
#stgServerInfo::before{ content: 'ステージングサーバで確認中'; color: #fff; font-size: 1rem;}

/* tags
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	padding: 0;
	font-weight: 500;
	margin: 0 auto 20px auto;
	display: block;
	line-height: 1;
}

h1{	font-size: 2.0rem; line-height: 1.3;}
h2{	font-size: 1.6rem;line-height: 1.3;}
h3{	font-size: 1.4rem;line-height: 1.3;}
h4{	font-size: 1.3rem;}
h5{	font-size: 1.2rem;}
h6{	font-size: 1.1rem;}

section{ position: relative;width: 100%; padding:0; margin:0 auto 0px auto;}


p {	margin-bottom: 2em;}
p:last-child{}
p:nth-of-type(1){}

ul{ margin-bottom: 2em;}
ul li{}
li:first-child 		{/* 親の最初にあったら*/}
li:last-child 		{/* 親の最後にあったら*/}
li:nth-of-type(1) 	{/* n番目*/}
li:nth-child(odd) 	{/* 奇数*/}
li:nth-child(even) 	{/* 偶数*/}


button{ border: 0;}



table{}
table tr{}
table th{}
table td{}

/* header
----------------------------------------------- */

#siteHeader{ width: 100%; padding: 45px 0; height: auto; text-align: center;}
.home2 #siteHeader{padding: 70px 0 20px 0;}
		body.modalMode #siteHeader{ display: none !important;}

		
		
		body.compactHead #siteLogo,
		body.single-items #siteLogo{}


		#siteLogo{ margin: auto}
				#siteLogo a{ width: 155px; height: auto;}
		
		
#globalHeader{transition: opacity 500ms cubic-bezier(.50, .0, .50, 1);  opacity: 1; display: block;}



.openContentsFlag #globalHeader{ opacity: 0; pointer-events: none;}

body.dragMenuDeactive:not(.menuOpen) #globalHeader::before{ transform: translate(0,-100%) scale(1) !important; opacity: 1 !important;}
body.dragMenuDeactive:not(.menuOpen)  #globalHeader #menuBtnFixed{ transform: translate(0,-100%) scale(1) !important; opacity: 0 !important;}
body.dragMenuDeactive:not(.menuOpen)  #globalHeader .brandLogo{ transform: translate(-50%,-200%) scale(1) !important; opacity: 0 !important;}
body.dragMenuDeactive:not(.menuOpen)  #globalHeader .storeLogo{ transform: translate(0,-200%) scale(1) !important; opacity: 0 !important;}

#globalHeader .menuBtn{ width: 120px; height: 75px;position: fixed; top: 20px; left: 95px;z-index: 110;cursor: pointer; display: block; mix-blend-mode: multiply;    opacity: .6;}
#top.home #globalHeader .menuBtn{opacity: 0;}
.home2 #globalHeader .menuBtn{ display: none;}

#globalHeader #menuBtnFixed{border: solid 0px #ccc;  transform: scale(1); transition: all 250ms cubic-bezier(.50, .0, .50, 1);}
#globalHeader #menuBtnFixed.active{transform: scale(1);}

body.home #globalHeader #menuBtnFixed{opacity: 0; pointer-events: none;}
body.loadingFinish .homeNaviOn #globalHeader #menuBtnFixed{}

body.home #globalHeader #menuBtnFixed{opacity: 0; pointer-events: none;}
#globalHeader #menuBtnFixed{ }
body.home.homeNaviOn #globalHeader #menuBtnFixed{opacity: 1 ; pointer-events: all;}


.loadingFinish #globalHeader #menuBtnFixed.active{opacity: 1; }

#globalHeader .brandLogo{ position: absolute; top: 45px; left: 50%;z-index: 90; transform: translate(-50%,0);}
#globalHeader .brandLogo img{ width: 180px; height: auto; }
#globalHeader .storeLogo{ position: absolute; top: 38px; right: 30px;z-index: 90; transform: translate(0%,0);}
#globalHeader .storeLogo img{ width: 200px; height: auto; }

#globalHeader .brandLogo,
#globalHeader .storeLogo{ transition: all 500ms ease; opacity: 0; pointer-events: none;}


body.home #globalHeader .brandLogo{opacity: 0; transform: translate(-50%,-100%);}
body.home #globalHeader .storeLogo{ opacity: 0; transform: translate(0%,-100%); }


body.homeNaviOn #globalHeader .brandLogo{ opacity: 1; pointer-events: all;}
body.homeNaviOn #globalHeader .storeLogo{ opacity: 1; pointer-events: all;}

body.home.homeNaviOn #globalHeader .brandLogo{opacity: 1; transform: translate(-50%,0%);}
body.home.homeNaviOn #globalHeader .storeLogo{ opacity: 1; transform: translate(0%,0%); }

body.homeNaviOn.menuOpen #globalHeader .brandLogo{  pointer-events: none;}
body.homeNaviOn.menuOpen2 #globalHeader .storeLogo{ opacity: 0; pointer-events: none;}
body.homeNaviOn.openContentsFlag #globalHeader .brandLogo{ opacity: 0; pointer-events: none;}
body.homeNaviOn.openContentsFlag #globalHeader .storeLogo{ opacity: 0; pointer-events: none;}

.simulatorActive #globalHeader .menuBtn,
.simulatorActive #globalHeader #menuBtnFixed{ display: none;}


#globalHeader{font-family: "AGaramondPro-Regular";color: #000; }
body.home #globalHeader{color: #a79500; }

#globalHeader .menuBtn:after{ content: 'MENU'; display: block; text-align: center; font-size: 1rem; width: 100%; line-height: 1; position: absolute;bottom: 0; left: 0;}

#globalHeader .menuBtn hr{ transition: all 250ms cubic-bezier(.50, .0, .50, 1);transform: translate(-50%,-50%);  top: 50%; left: 50%;}
#globalHeader .menuBtn hr:nth-of-type(1),
#globalHeader .menuBtn hr:nth-of-type(2),
#globalHeader .menuBtn hr:nth-of-type(3){ width: 100%; height: 1px; background: #000; position: absolute;}


body.home #globalHeader .menuBtn hr:nth-of-type(1),
body.home #globalHeader .menuBtn hr:nth-of-type(2),
body.home #globalHeader .menuBtn hr:nth-of-type(3){ background: #a79500; }


#globalHeader .menuBtn hr:nth-of-type(1){  margin-top: -12px;}
#globalHeader .menuBtn hr:nth-of-type(2){  height: 5px;transform: translate(-50%,-50%);  }
#globalHeader .menuBtn hr:nth-of-type(3){  margin-top: 12px; }

body.menuOpen #globalHeader .menuBtn{ color: #a79500;  }

body.menuOpen #globalHeader .menuBtn hr:nth-of-type(1){background: #a79500;  margin: 0; ;transform: translate(-50%,-50%) rotate(15deg);  }
body.menuOpen #globalHeader .menuBtn hr:nth-of-type(2){background: #a79500; opacity: 0;}
body.menuOpen #globalHeader .menuBtn hr:nth-of-type(3){background: #a79500;  margin: 0; ;transform: translate(-50%,-50%) rotate(-15deg);  }

body #globalHeader .menu{ transition: all 250ms cubic-bezier(.50, .0, .50, 1); margin: 0;}

body.menuPopup #globalHeader .menu{background: #aaa; padding: 40px; width: 400px; position: absolute; top: 60px; right: 0; transform: translate(100%,0); }
body.menuPopup #globalHeader .menu li{ margin-bottom: 20px;}
body.menuPopup #globalHeader .menu li a{ display: block; line-height: 40px; border: solid 1px #fff; text-decoration: none;}
body.menuPopup.menuOpen #globalHeader .menu{ transform: translate(0,0);}





body.menuCover #globalHeader{position:relative; height: 0px; overflow: visible; }

body.home #globalHeader{ position: fixed; top: 0; left: 0; width: 100%; z-index: 90;}

body.home.menuCover #globalHeader::before{ content:''; display: block; width: 100%; height: 140px; background: rgba(255,255,255,1);
	position: absolute; top: 0; left: 0;    z-index: 77;
	transition: transform 250ms ease , opacity 250ms ease ; opacity: 0;
}
body.home.menuCover #globalHeader::before{ opacity: 0; pointer-events: none;transform: translate(0%,-100%); }
body.homeNaviOn.home.menuCover #globalHeader::before{ opacity: 1; pointer-events: none;transform: translate(0%,0%); }

body.openContentsFlag #globalHeader::before{opacity: 0;}


body.menuCover #globalHeader .menuArea{ height: 100vh; width: 100%; position: fixed; top: 0px; left: 0;
	 z-index: 78; transform: translate(0,0); pointer-events: none; text-align: left;
	overflow: hidden;
	

}
body.menuCover #globalHeader .menuArea .inWrap{
	width: 460px;pointer-events: all;
	background:url(./img/common/menu/bg_store.svg) 0 0px  no-repeat;
	background-size: 100% auto; 
	
	color: #fff ;
	 min-height: 100vh;

	 padding:180px 50px 200px 50px;
	transform: translate(-100%,0); 
		transition: transform 500ms ease;
}

body.menuCover.home #globalHeader .menuArea .inWrap{ background: none;}

body.home.menuCover #globalHeader .menuArea .inWrap{
		 padding:180px 50px 200px 50px;
}


.iPad body.home.menuCover #globalHeader .menuArea .inWrap::before{ content: ''; display: none; width: 100vw; height: 140px; background: #fff; position: absolute; top: 0; left: 0;}


body.home.menuCover #globalHeader .menuArea .inWrap{ }


body.menuCover #globalHeader .menuAreaBG{
		transform: translate(-100%,0); 
		transition: transform 500ms ease;
}


body.menuCover #globalHeader .menuArea .inWrap .logo{ width: 220px; margin-bottom: 50px;}
body.home.menuCover #globalHeader .menuArea .inWrap .logo{ display: none;}
body.menuCover #globalHeader .menuArea .inWrap .logo a{ display: block; text-align: center; position: relative; }
body.menuCover #globalHeader .menuArea .inWrap .logo img{ width: 165px; height: auto;}

body.menuCover #globalHeader .menuArea .inWrap .logo a::before{ content: ''; display: inline-block; width: 20px; height: 35px; position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%) scale(-1,1);
	
	background: url(./img/parts/arrow_r_,mark_gold.svg) center center no-repeat;
	background-size: contain; 
	
	
}


#globalHeader .menuArea a, 
#globalHeader .menuArea a:link, 
#globalHeader .menuArea a:hover, 
#globalHeader .menuArea a:active, 
#globalHeader .menuArea a:visited{ color: #a79500;}

body.menuCover:after{ 
		   content: '';
	   display: block;
	   width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,0.8);
    position: fixed;
    top:0;
    left: 0;
    z-index: 89; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}
body.menuCover.menuOpen2:after{ opacity: 1; pointer-events: all;}

body.menuCover #globalHeader .menuArea:after{ 
		   content: '';
	   display: block;
	   width: 100px;
    min-height: 250px;

    background-size: 100% auto;
    position: absolute; top: 160px; right: 90px;
}


/*
body.home.menuCover #globalHeader .menuArea .inWrap::after{ pointer-events: none; content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; 
	background: url(./img/_guide/_guide_top_menu.png) center top no-repeat; background-size: cover; opacity: 0.5;
}
*/




body.menuCover #globalHeader .menu { height: auto;width: 200px; border: solid 0px #369; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem;}
body.menuCover #globalHeader .menu li{ width: auto; height: auto; text-align: center; width: 100%; margin-bottom: 45px;}
body.menuCover #globalHeader .menu li.deactive{ opacity: .2; pointer-events: none;}
body.menuCover #globalHeader .menu li:last-child{ margin-bottom: 0 !important;}

body.menuCover #globalHeader .menu li.contact{margin-bottom: 60px !important;}


body.menuCover #globalHeader .menu li a{ display: flex; width: 100%; height: auto; padding: 0; margin: 0; align-items:center; justify-content: center; text-align: center;  flex-wrap: wrap;border: solid 0px #ccc;}
body.menuCover #globalHeader .menu li a::before{ content: ''; display: block; width: 100%; height: 75px; }

/*
body.home.menuCover #globalHeader .menu li.whoarewe{ position: absolute; top: 0; left: 480px; transform: translate(-50%,0);}
body.home.menuCover #globalHeader .menu li.starting{ position: absolute; top: 190px; left: 665px;transform: translate(-50%,0);}
body.home.menuCover #globalHeader .menu li.store{ position: absolute; top: 310px; left: 320px;transform: translate(-50%,0);}
body.home.menuCover #globalHeader .menu li.movie{ position: absolute; top: 430px; left: 670px;transform: translate(-50%,0);}
body.home.menuCover #globalHeader .menu li.gallery{ position: absolute; top: 520px; left: 330px;transform: translate(-50%,0);}
body.home.menuCover #globalHeader .menu li.contact{ position: absolute; top: 780px; left: 330px;transform: translate(-50%,0);}
*/
body.menuCover #globalHeader .menu li.events span { color: #00BBD5 !important;}
body.menuCover #globalHeader .menu li.news span{ color: #2EABFC !important;}
body.menuCover #globalHeader .menu li.whoarewe span { color: #2843D8 !important;}
body.menuCover #globalHeader .menu li.starting span{ color: #2843d8 !important;}
body.menuCover #globalHeader .menu li.movie span{ color: #6e38ef !important;}
body.menuCover #globalHeader .menu li.store span{ color: #B332DB !important;}

body.menuCover #globalHeader .menu li.gallery span{ color: #F92FA4 !important;}
body.menuCover #globalHeader .menu li.contact span{ color: #FF7A79 !important;}


body.menuCover #globalHeader .menu li.storetop span{ color: #6e38ef !important;}
body.menuCover #globalHeader .menu li.artist span{ color: #6E38EF !important;}
body.menuCover #globalHeader .menu li.guide span{ color: #ff7a79 !important;}
body.menuCover #globalHeader .menu li.faq span{ color: #ff7a79 !important;}
			       
			       


body.menuCover #globalHeader .menu li a span{ display: block; padding-top: 0.5rem; white-space: nowrap;font-size: 1.0rem;}




body.menuCover #globalHeader .menu li.events a:before{ background: url(./img/common/menu/icon_event.svg) center top no-repeat; background-size: contain;height: 76px;}
body.menuCover #globalHeader .menu li.news a:before{ background: url(./img/common/menu/icon_news.svg) center top no-repeat; background-size:contain;height: 76px;}
body.menuCover #globalHeader .menu li.whoarewe a:before{ background: url(./img/common/menu/icon_about.svg) center top no-repeat; background-size: contain;height: 76px;}
body.menuCover #globalHeader .menu li.starting a:before{ background: url(./img/common/menu/start.svg) center top no-repeat; background-size:contain;height: 76px;}
body.menuCover #globalHeader .menu li.store a:before{ background: url(./img/common/menu/icon_store.svg) center top no-repeat; background-size: contain;height: 63px;}
body.menuCover #globalHeader .menu li.movie a:before{ background: url(./img/common/menu/movie.svg) center top no-repeat; background-size: contain; height: 51px;}
body.menuCover #globalHeader .menu li.gallery a:before{ background: url(./img/common/menu/icon_gallery.svg) center top no-repeat; background-size: contain; height: 88px;}
body.menuCover #globalHeader .menu li.contact a:before{ background: url(./img/common/menu/icon_contact.svg) center top no-repeat; background-size: contain; height: 47px;}

body.menuCover #globalHeader .menu li.storetop a:before{ background: url(./img/common/menu/storetop.svg) center top no-repeat; background-size: contain; height: 55px;}
body.menuCover #globalHeader .menu li.artist a:before{ background: url(./img/common/menu/icon_artists.svg) center top no-repeat; background-size: contain; height: 79px;}
body.menuCover #globalHeader .menu li.guide a:before{ background: url(./img/common/menu/guide.svg) center top no-repeat; background-size: contain; height: 58px;}
body.menuCover #globalHeader .menu li.faq a:before{ background: url(./img/common/menu/faq.svg) center top no-repeat; background-size: contain; height: 72px;}


#globalHeader .menu.share li a::before{ display: none !important;}

#globalHeader .menu.share{ flex-wrap: wrap !important; display: flex; justify-content: center;width: 100px !important; margin: 0 0 0 50px;}
#globalHeader .menu.share li{ width: 30px !important; margin: 0 10px 20px  !important; display: flex; justify-content: center;}
#globalHeader .menu.share li a{ width: 30px !important; height: 30px !important;}
#globalHeader .menu.share li a span{ display: none !important;}

#globalHeader .menu.share li.instagram a{background: url(./img/common/menu/icon_sns_instagram.svg) center center no-repeat; background-size: contain;}
#globalHeader .menu.share li.youtube a{background: url(./img/common/menu/icon_sns_youtube.svg) center center no-repeat; background-size: contain;}
#globalHeader .menu.share li.facebook a{background: url(./img/common/menu/icon_sns_facebook.svg) center center no-repeat; background-size: contain;}
#globalHeader .menu.share li.twitter a{background: url(./img/common/menu/icon_sns_x_twitter.svg) center center no-repeat; background-size: contain;}




body.menuCover.menuOpen #globalHeader .menuArea{ opacity: 1; pointer-events: all; transform: translate(0,0);
		overflow: hidden;
	overflow-y: auto;
}

body.menuCover.menuOpen #globalHeader .menuArea .inWrap,
body.menuCover.menuOpen #globalHeader .menuAreaBG{
	
	transform: translate(0%,0); 



}

body.menuCover #container::after{ content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 250ms ease; pointer-events:none;}
body.menuCover.menuOpen #container::after{ opacity: 1; pointer-events: all;}


#globalHeader .siteLogo,
#globalHeader .menuArea{ pointer-events: none;}


.menuOpen #globalHeader .siteLogo,
.menuOpen #globalHeader .menuArea{ pointer-events: all;}


#globalFooter{ text-align: center; padding: 4rem 0 4rem 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0) 100%); text-align: center;}
#globalFooter * { text-align: inherit;}
body.modalMode #globalFooter{ display: none !important;}

#globalFooter a{ display: inline-block; margin: 0 15px;}
#globalFooter .links{ font-size: 0.8em; margin-bottom: 2rem;}


body.release #globalFooter{ background: none !important;}

/* contents
----------------------------------------------- */



#siteLogo{ display: inline-block;}
#siteLogo a{ display: block;  background-size: contain;}

#siteLogo span{ position: absolute; top: 50%; right:0%; transform: translate(120%, -50%); display: inline-block; font-size: 9px; margin-left: 2em; white-space: nowrap; opacity: 0.5}



#siteHeader .shareLink{ margin: 0; display: flex; position: absolute; top: 20px; right: 20px;}
#siteHeader .shareLink li{ display: inline-block; margin: 0 10px; width: 30px;  height: 30px; }
#siteHeader .shareLink li a{ display: block; background:#eaeaea; display: flex; height: 100%;}
#siteHeader .shareLink li a span{ display: none;}
#siteHeader .shareLink li:nth-of-type(1)  a{background: url(./img/common/icon_instagram.svg) center center no-repeat; background-size: contain;}
#siteHeader .shareLink li:nth-of-type(2)  a{background: url(./img/common/icon_twitter.svg) center center no-repeat; background-size: contain;}


#siteHeader .menuArea{}
#siteHeader .menuArea ul.menu{ margin: 0;}
#siteHeader .menuArea ul.menu li{ display: inline-block; margin: 0 1px 1px 0;}
#siteHeader .menuArea ul.menu li a{ display: block; background:#eaeaea; color: #000; width: 150px; line-height: 50px; text-align: center;}



#siteHeader .storeLink{ position: absolute;top: 30px; right:70px;}
#siteHeader .storeLink ul{ margin: 0;}
#siteHeader .storeLink ul li{ display: inline-block; margin: 0 1em 0 0;}
#siteHeader .storeLink ul li span{ display: inline-block; margin-left: 0.2em;}

	#siteHeader .storeLink ul li.instagram{ margin-right: 4em;}


#siteHeader .onlinestore{ display: none; position: fixed; top: 20px; right:20px; z-index: 10;}
#siteHeader .onlinestore a{ display: inline-block; background: #000; padding: 0px 40px; border-radius: 20px; height: 40px; line-height: 40px;  color: #fff;}
#siteHeader .onlinestore a span {
    display: inline-block;
    padding-left: 2.5em;
    line-height: 44px;  
}
#siteHeader .onlinestore a i{ position: absolute; top: 50%; left: 0; transform: translate(0,-60%) scale(0.8);}

.home2 #siteHeader .onlinestore{ display: inline-block;}


/* contents
----------------------------------------------- */
.contentsWrap{ padding: 0px 0; }
.contentsWrap section:last-child{ padding-bottom: 100px;}
.contentsWrap section:last-child .pageContentsWrap:last-child{ padding-bottom: 0;}

.contentsWrap section:last-child .pageContentsWrap:last-child .itemOrderBtn:last-child{ margin-bottom: 0;padding-bottom: 0;}

/* site top
----------------------------------------------- */
.home #base2{ width: 100vw; min-height: 100vh;}
#brandTopContents{ position: fixed; top:0; left: 0; z-index: 1; width: 100vw; height: 100vh; overflow: scroll;  background: #fff; padding: 0px; margin: 0 0px; min-height: 50vw}
.home .contentsWrap2{  padding: 0px 0;}
.home  #siteHeader2{position: fixed; top:0; left: 0; z-index: 5;}

#brandTopBg { width:5000px; position: fixed; top:0%; left: 0%; transform: translate(0%,0%); z-index: 1;  display: flex; flex-wrap: wrap; 
	transition: all 3000ms cubic-bezier(0.22, 1, 0.36, 1);}
#brandTopBg .block{ width: 1500px;}

#brandTopContents .bg{ width: 1500px; height: 1500px; }
#brandTopContents .message{width: 5000px; height: auto;z-index: 2; }



#siteTopContents{ background: #f2f2f2; padding: 200px; min-height: 100vh;}



.contentsWrap > div{ position: relative; margin-left: auto; margin-right: auto;}

#directory{ display: none; padding: 2em; font-size: 0.6em; text-align: center; margin-bottom: 5em; border-bottom: solid 1px #f2f2f2;border-top: solid 1px #f2f2f2;}

section.area{ padding:50px 0; margin:0 auto 0px auto;z-index: 5; min-height: 300px;}
section.area.bg {background: #f2f2f2; }

section.area .sectionTitle{ display: block; font-size: 2.5rem; line-height: 1; margin-bottom: 45px; text-align: center !important;
	mix-blend-mode: multiply;    opacity: .6 !important;
}
section.area .sectionTitle .sub{ display: block; font-size: 1rem; line-height: 1; padding-top: 1em; opacity: .5; text-align: center !important}


section.area .menuArea { margin: 0px auto 50px auto;  display: table; white-space: nowrap; font-weight: 600 ;}
section.area .menuArea .listStatus{ display: block; margin-bottom: 10px; background: #fefefe; color: #000; border-top: solid 2px #eee; line-height: 1; padding: 20px 0 10px 0;}
section.area .menuArea ul.menu{ margin: 0; }
section.area .menuArea ul.menu li{ display: inline-block; margin: 0 1px 1px 0;}
section.area .menuArea ul.menu li a{ display: block; background:#000; color: #fff; width: 150px; line-height: 30px; text-align: center;}
section.area .menuArea ul.menu li a span{ margin-right: 2em;}



body:not(.home) section.area{  }




.topContents#topics{
	display: none;
	z-index: 99;
}

body#top.home .topContents#topics{display: block;}

.topContents#topics .closeContents{}
.topContents#topics .contentsFrame{
	
	min-height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(700px 80% 1200px);
	height: 100%;
	padding: 0;
	margin: auto;

	position: relative;
	
}
.topContents#topics  .contentsMain{background: rgba(255,255,255,1);
	display: block;
	width: 90%;
	max-width: 700px;
	height: 400px;
	padding: 0px 40px 40px 40px;
	overflow-y:scroll;
}

.topContents#topics  .contentsMain::-webkit-scrollbar{
   width: 5px;
}
.topContents#topics  .contentsMain::-webkit-scrollbar-track{
   background-color: rgba(167,149,0,0.2);
}
.topContents#topics  .contentsMain::-webkit-scrollbar-thumb{
   background-color: rgba(167,149,0,1);
}


.topContents#topics  .contentsMain h2{ text-align: center;	   color: #A79500; font-size: 2.5rem; padding-bottom:0; margin-bottom: 0;	font-family: "TsukuMinPr6-D"; border-bottom: solid 1px #A79500;
 height: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
 line-height: 1;
}
.topContents#topics  .contentsMain h2 span{ display: inline-block;  transform: translate(0,-5%);}

.topContents#topics  .contentsMain .entryBoxList{ padding: 0;}


.topContents#topics  .contentsMain .entryBoxList .entryItem{ padding:4px 0;border-bottom: solid 1px #A79500;
	
	display: grid;
	grid-template-columns: 1fr 85px;
	grid-gap: 1em;
	line-height: 1.6;
}

.topContents#topics  .contentsMain .entryBoxList .entryItem .entryThumb{order:2; display: flex; justify-content: center; align-items: center;}
.topContents#topics  .contentsMain .entryBoxList .entryItem .entryThumb img{ width: 100%; height: auto;}

.topContents#topics  .contentsMain .entryBoxList .entryItem .entryData{ display: flex; align-items: center;}

.topContents#topics  .contentsMain .entryBoxList .entryItem .entryMeta{order:1; padding:0 0;}

.topContents#topics  .contentsMain .entryBoxList .entryItem .entryMeta dt{  color: #A79500; font-size: 1.7rem; margin-bottom: 0.35rem;font-family: "TsukuMinPr6-D";  line-height: 1.4;}
.topContents#topics  .contentsMain .entryBoxList .entryItem .entryMeta dd{ font-size: 1rem; }

/* single
----------------------------------------------- */


body.compactHead #siteHeader + .contentsWrap,
body.single-items #siteHeader + .contentsWrap{ padding-top: 0px;}


.itemHead{ border-bottom: dashed 1px #ccc; margin-bottom: 4em; padding-bottom: 10em;
	    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-gap: 2em 1em;
    text-align: center;
}
	.itemHead .price{font-size: 1.8em; font-weight: 400; white-space: nowrap;}
	.itemHead .price span{ display: inline-block; padding-top: 0px;}
.itemHead .price span small{ font-size: 0.8rem;}


.itemHead .creator{ display: grid; }
	.itemHead .styling{ display: grid; }

.shopify-buy-frame{ display: inline-block !important; width: auto; }
.shopify-buy__layout-vertical{display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important;     max-width:none !important;}
.shopify-buy__btn-wrapper{ margin: 0 !important}

.shopify-buy__btn-wrapper{ margin: 0 !important; padding: 0 !important;}
.shopify-buy__btn {}


.itemDetail{}


.itemDetail .pageBack{
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 1.5rem 0;
    text-align: left;
}

.itemDetail .pageBack a{}
.itemDetail .pageBack a span{ display: inline-block;}
.itemDetail .pageBack a span::before{ content: ''; display: block; width: 90px; height: 27px; margin-right: 0.5rem; background: url(./img/common/btn_back.svg) left center no-repeat;}

.itemDetail .entry-title{font-size: 2rem; margin-bottom: 0em; padding-top: 0em;}
.itemDetail .entry-title span{ display: block; padding-top: 1em; font-size: 0.8rem; opacity: .5;}

.itemContents{width: 80%; max-width: 1000px; margin:0 auto; padding:0 0 100px 0; text-align: left;}




.itemContents .thumnailMore{ grid-gap: 5px; padding-top: 5px;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}


.itemContents{}
.itemContents .slider{}
.itemContents .slider .slick-slide{ overflow: hidden; display: block !important;}
.itemContents .slider .slick-slide:before{  content: ''; display: block; width: 100%; height: 0; padding-top: 100%;}
.itemContents .slider .thumbnail{ position: absolute; top: 0%; left: 0%;width: 100%;  }
.itemContents .slider .thumbnail img.boxImg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


.itemContents .slider video{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100% !important; height: 100% !important;}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next{ left: -80px; color: #eee;}
.swiper-button-next, .swiper-container-rtl .swiper-button-next{ right: -80px; color: #eee;}

.swiper-button-prev, 
.swiper-button-next{ width: 80px; height: 160px; background: #369; margin-top: 0 !important; }

.swiper-button-prev{ background: url(./img/parts/arrow_r_,mark.svg) center center no-repeat; background-size: 40%; transform: translate(0,-50%) rotate(180deg); }
.swiper-button-next {background: url(./img/parts/arrow_r_,mark.svg) center center no-repeat; background-size: 40%;  transform: translate(0,-50%) rotate(0deg);}
.swiper-pagination{ visibility: hidden;}

.swiper-button-prev::after, 
.swiper-button-next::after{ display: none !important;}

.swiper-pagination-bullet{ background: #ccc;}
.swiper-pagination-bullet-active{ background: #eee;}

.swiper-scrollbar{ display: none !important;}

.simulatorBtn{  margin: auto; display: inline-block;}
.simulatorBtn.deactive{ display: none;}
.simulatorBtn .simulatorBtnAction{  width: 100px; height: 100px; border-radius: 50px; background: #fff000; color: #333; display: grid; align-items: center; text-align: center; font-size: 0.8rem; cursor: pointer;}
.simulatorBtn .simulatorBtnAction:hover{ background: #fff54d;}

#modalDetail .simulatorBtn{margin: 100px auto; text-align: center;}
#modalDetail .simulatorBtn a{  width: 200px; height: 200px; border-radius: 100px; font-size: 1.3rem; }

.itemContents > dt{ margin-bottom: 50px;  z-index: 3;}
.itemContents > dd{ margin-bottom: 50px;}

.itemContents dd.profile{ text-align: left;}


.itemContentsSub{width: 100%; grid-gap: 100px; margin:0 auto; padding-bottom: 50px; text-align: left;	}
.itemContentsSub .by_artis{ font-size: 1.1rem;line-height: 2.2; margin-bottom: 0;  padding: 0rem 0rem;}
.itemContentsSub .by_artis h4{display: none;}
.itemContentsSub .by_artist{ padding: 4rem 5rem; margin: 0 5rem; background: #fafafa;font-size: 0.9rem;}
.itemContentsSub .by_artist h4{text-align: center;font-size: 0.9rem;}
.itemContentsSub div > p:last-child{ margin-bottom: 0rem; }





.itemDetailData{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}




.itemDetailData > .data{ border-bottom: solid 1px #000; display: flex; align-items: center; min-height: 70px; line-height: 1.5}
.itemDetailData dl.inData{ padding: 1rem 0;}
.itemDetailData .artist dl.inData{ padding:0;}



.itemDetailData dl.inData dt{}
.itemDetailData dl.inData dd{}

.itemDetailData .artist{ width: 100%; height: auto; min-height: inherit; flex-wrap: wrap;}
.itemDetailData .artistHeader{ width: 100%; justify-content:space-between;align-items:stretch;}
.itemDetailData .artistHeader .inData { width: 100% !important; margin: 0; text-align: left;align-items: center;border: solid 0px #ccc; display: flex;}

.itemDetailData .artistHeader .inData dd:nth-of-type(2){ width: 48% !important;} 


.itemDetailData .artistHeaderName{ width: 100%; justify-content:space-between;align-items:stretch;}
.itemDetailData .artistHeaderName .flexItem {margin: 0; text-align: left;align-items: center;border: solid 0px #ccc; display: flex;}
.itemDetailData .artistHeaderName .flexItem:nth-of-type(1) { width: auto; flex: 1;}
.itemDetailData .artistHeaderName .flexItem:nth-of-type(2) { width: calc(46% + 60px) !important; padding-left: 15px; line-height: 1.2; font-size: 0.8em;}
.itemDetailData .artistHeaderName .flexItem:nth-of-type(2) span{transform: translate(0,-0.1em);}




.itemDetailData .title{ width: 100%;}
.itemDetailData .price,
.itemDetailData .size,
.itemDetailData .material,
.itemDetailData .edition,
.itemDetailData .delivery{width: 48%;}

.itemDetailData .title,
.itemDetailData .price,
.itemDetailData .material,
.itemDetailData .delivery{ padding-left: 85px;}

.itemDetailData .size,
.itemDetailData .edition{ padding-left: 15px;}

.itemDetailData .artist,
.itemDetailData .title,
.itemDetailData .price{ font-size: 1.8rem;}

.itemDetailData .title{ padding-top: 0.5em; padding-bottom: 0.5em;border-bottom:0;min-height: inherit;}
.itemDetailData .title .jp{ font-size: 0.5em; padding-top: 0.3em; }

.itemDetailData .titleSub { min-height: inherit; padding-bottom: 0.75em; width: 100%;}
.itemDetailData .titleSub .titleGrid{
	    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
        grid-gap: 0px;
        margin: 0;
        width: 100%;
}
.itemDetailData .titleSub .titleGrid .jp{ box-sizing: border-box;}
.itemDetailData .titleSub .titleGrid .item_title{ padding-left: 85px; width: 48%;}
.itemDetailData .titleSub .titleGrid .original_title{ padding-left: 15px;width: 48%;}


.itemDetailData .price{ display: flex; justify-content: flex-start; align-items: center;}
.itemDetailData .price .pricedataWrap{ margin: 0; width: 100%;    grid-template-columns: 1fr auto; grid-gap: 1rem;}

.itemDetailData .price .pricedataWrap .pricedata{ display: flex; align-items: center; line-height: 1;}
.itemDetailData .price .pricedataWrap .pricedata small{ display: inline-block; font-size: 1.1rem; margin-left: 0.3rem; transform: translate(0,-0.15em);}
.itemDetailData .price .pricedataWrap .deliverySize{ line-height: 1;}
.itemDetailData .price .pricedataWrap .deliverySize .label{ letter-spacing: 0; white-space: nowrap; margin-bottom: 0.2em;font-size:1rem;}
.itemDetailData .price .pricedataWrap .deliverySize .p{ letter-spacing: 0; font-size: 1rem;}


.itemDetailData .artist .inData{ display: flex; margin-bottom: 0px; }
.itemDetailData .artist .inData dt{ width: 60px; background: #ccc; margin-right: 25px;}
.itemDetailData .artist .inData dt:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 100%; }
.itemDetailData .artist .inData dd{ flex: 1; display: flex; align-items: center; }

.itemDetailData .artist .inData dd span{}

.itemDetailData .title .inData { line-height: 1;}

.itemDetailData .price .pricedata{display: block; width: 100%; line-height: 1;}
.itemDetailData .price .price_2{ font-size: 0.8rem; display: block; padding-bottom: 0.5em;}

.itemDetailData .artist .inData dd span,
.itemDetailData .title .inData,
.itemDetailData .price .pricedata span{transform: translate(0,0.1em);}

.itemDetailData .size .inData .font_AGaramondPro,
.itemDetailData .material .inData .font_AGaramondPro,
.itemDetailData .edition .inData .font_AGaramondPro,
.itemDetailData .delivery .inData .font_AGaramondPro{  line-height: 1.2; transform: translate(0,0.1em);}

.itemAgreement{ margin-top: 3rem; padding: 3rem; background: rgba(0,0,0,0.2);
	margin-bottom: 0.5rem;

    mix-blend-mode: multiply;
    text-align: justify;
}

body.itemStock_0 .itemAgreement{ display: none;}

.itemAgreement .inFrame{}
.itemAgreement h4{ text-align: center; font-size: 1.3rem; margin-bottom: 1.2rem; padding-bottom: 1.5rem;}
.itemAgreement h4::after{ content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 6rem; border-bottom: solid 1px #000;}
.itemAgreement p{ font-size: 0.9rem;margin-bottom: 0rem; }

.itemAgreement p.read{text-align: center;  font-size: 1.0rem; margin-bottom: 2rem;}


.itemAgreementAction{ margin-bottom: 3rem; display: flex; justify-content: flex-end;}

.itemAddCartBtn{ margin-bottom: 50px; display: flex; justify-content: center; pointer-events: none; opacity: .2;    mix-blend-mode: multiply;}
#itemAddCartAction.active{pointer-events: all; opacity: 1;
		    opacity: .6 !important;

	
}

.itemAddCartBtn .inWrap{ width: 300px; margin: 0; min-width: 300px;max-width: 800px; padding: 30px;
	display: grid;
	 grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-gap: 50px;
    text-align: center !important;
}

.itemAddCartBtn .inWrap .soldoutBtn{ display: none; width: 100%; height: 100%; align-items: center; justify-content: center; background: #999; color: #000;
	position: absolute; top: 0; left: 0;
	font-weight: bold;
}
.on_sale .itemAddCartBtn .inWrap .soldoutBtn{ display: flex;}
.onQuantity .itemAddCartBtn .inWrap .soldoutBtn{  display: none;}

.itemAddCartBtn .inWrap .soldoutBtn::after{ content: 'Out of Stock'; display: inline-block; }

.itemDetail .shopify-buy-frame iframe{ position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important;}


.itemOrderBtn{ margin-bottom: 50px; display: flex; justify-content: center;}
.this_page_contact .formUnit .itemOrderBtn{ justify-content: flex-end; max-width: 800px; width: 100%; margin: auto;}


#single .itemOrderBtn{ justify-content: flex-end;}

.itemOrderBtn .inWrap{ width: 300px; margin: 0; min-width: 300px;max-width: 800px; padding: 30px;
	display: grid;
	 grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-gap: 50px;
    text-align: center !important;
    background: #000;
    color: #fff;
    font-size: 16px;
    	opacity: .6;
    mix-blend-mode: multiply;
}

.itemOrderBtn.preparation .inWrap{
	    background: #000;
}

.itemOrderBtn .inWrap span{ display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.itemOrderBtn .inWrap input{ font-family: "AGaramondPro-Regular" !important; font-size: 16px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;

	
	
}

.itemTags{margin-bottom: 50px; display: none;}
.itemTags ul{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap:5px;}
.itemTags ul li{ display: inline-block;}
.itemTags ul li a{ display: block; background: rgba(0,0,0,0.3); color: #000; text-align: center; padding: 0.5em; white-space: nowrap;}



.itemContact{ text-align: center !important; margin-bottom: 100px;}
.itemContact *{text-align: center !important; }


.itemContents .productData{ display: block; text-align: center;}

.itemContactBtn{ text-align: center;}
.itemContactBtn .far{ margin-right: 0.5em;}

.itemContactBtn a{
	display: inline-block;
	width: 14rem;
	background: url(./img/common/btn_contact_form.svg) center center no-repeat;
	background-size: contain; 
	
}
.itemContactBtn a:hover{
		background: url(./img/common/btn_contact_form_on.svg) center center no-repeat;
	background-size: contain; 
	
}
.itemContactBtn a span{ visibility: hidden;}


.actionNavi{ background: #666; position: fixed; left: 0; bottom: 0; z-index: 1; width: 100%; pointer-events: none;  transform: translate(0,100%); transition: transform 250ms ease-out; display: }
.actionNavi.active{ transform: translate(0,0); pointer-events: all;}

.actionNavi .inWrap{ width: 300px; margin: auto; min-width: 300px;max-width: 800px; padding: 30px;
	display: grid;
		    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-gap: 50px;
    text-align: center;


}

.actionNavi .gridItem{ padding: 1rem; min-height: 50px}

.actionNavi .gridItem.simulator{ background: #ffee11; cursor: pointer; display: none;}
.actionNavi .gridItem.addcart{background: #369; padding: 0;}




section.release{}

section.release .textBody{ text-align: left;}

section.release .textBody .sectionTitle{ text-align: left !important; opacity: 1 !important;}
section.release .textBody iframe{ max-width: 100%;}
section.release .textBody img{ max-width: 100%; height: auto;}

section.release .textBody img.aligncenter{ margin: auto;	display: flex;}


section.release .textBody  h3{ font-size: 2rem;}
section.release .textBody  h4{ font-size: 1.5rem;}


section.release .textBody table th,
section.release .textBody table td {
	border: solid 1px;
	padding: 0.5em;
}
 
section.release .textBody table {
	border-collapse:  collapse;     /* セルの線を重ねる */
}


body.release #simulatorHowtoBtn{ display: none;}
body.release #simulatorActiveBtn{ display: none;}


/* top
----------------------------------------------- */

#topItems .sectionHeader{ display: none;}


#topItems .entryBoxList .entry dl dd,
.entryBoxList.hiddenData .entry dl dd{ font-size: 0.85rem;  letter-spacing: 0.07em;}



#searchArea{}

#searchArea .boxLink{ width: 80%; max-width: 800px; text-align: center;}

#searchArea .boxLink .thumbnail{ margin-bottom: 1rem;}
#searchArea .boxLink .thumbnail:before{ padding-top: 64%;}
#searchArea .boxLink h3{ display: inline-block; font-size: 1.5rem; line-height: 1; margin-bottom: 0rem;}
#searchArea .boxLink h3 .sub{ display: block; font-size: 0.5rem; line-height: 1; padding-top: 1em; opacity: .5;}

#topContents{}
#topContents .mainVisual{width: 80%; max-width: 1200px; height: 1000px; margin:0 auto 50px;}
#topContents .movieArea{}
#topContents .movieThumbnail{width: 60%; max-width: 600px; margin:0 auto 50px;}

#topContents .intro-video,
#topContents .intro-video-wrap,
#topContents .intro-video-container{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

            
            
#topContents .intro-video iframe{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}



/* artist  （taxonomy-artist.php）
----------------------------------------------- */
body#archive{}

body#archive.tax-artist{}
body#archive.artist{}

body#archive.artist section.area {}

body#archive.artist section.area .contentsFrame{
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    }


body#archive.artist section.area .iconImage{ margin-bottom: 3em;}
body#archive.artist section.area .iconImage .image{ width: 100px; margin:auto; border-radius: 50px; overflow: hidden; }
body#archive.artist section.area .iconImage .image:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 100%;}
body#archive.artist section.area .iconImage .image .fullImage{position: absolute; top: 0; left: 0; width: 100%; height:100%; }

body#archive.artist section.area .profilePhoto{ margin-bottom: 4rem;}
body#archive.artist section.area .profilePhoto .image{ width: 200px; margin:auto; overflow: hidden; }
body#archive.artist section.area .profilePhoto .image:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 100%;}


body#archive.artist section.area .sectionTitle{ margin-bottom: 100px}

body#archive.artist section.area .sectionTitle .taxonomy-description{}
body#archive.artist section.area .sectionTitle .taxonomy-description p{ font-size: 0.8em; padding-top: 1em;}

body#archive.artist .movieArea{ text-align: left; margin-bottom: 85px;}

body#archive.artist .movieArea .movie{ width: 100%; max-width: 1000px; margin: auto; position: relative;}
body#archive.artist .movieArea .movie::before{ content: ''; display: block; width: 100%; height: 0; padding-top: 60%;}
body#archive.artist .movieArea .movie iframe{ position: absolute; top: 0; left: 0; width: 100%; height:100%;}


body#archive.artist .profileText{ text-align: left; margin:0 auto 4rem; font-size: 1.1em; width: 50%;}
body#archive.artist .profileText p:not(:last-child){ margin-bottom: 2rem;}
body#archive.artist .profileText p:last-child{ margin-bottom: 0;}

body#archive.artist .entryBoxList.grid{ width: 100%; margin-bottom: 0px;}


.touchDevice .post-type-archive-faq #archiveArea .grid{grid-template-columns: 1fr;}
.touchDevice .tax-faq_category .faqList{ width: 80% !important;}

/* page
----------------------------------------------- */
.pageContentsWrap{}

#page .pageContentsWrap a:not(.noDeco),
body:not(.tax-artist) #archiveArea a:not(.noDeco){ display: inline-block; text-decoration: none !important;}
#page .pageContentsWrap a:not(.noDeco)::after,
body:not(.tax-artist) #archiveArea a:not(.noDeco)::after{ content: ''; display: block; width: 100%; height: 1px; position: absolute;bottom: 0; left: 0; background: #000;}
#page .pageContentsWrap a:not(.noDeco):hover::after,
body:not(.tax-artist) #archiveArea a:not(.noDeco):hover::after{ display: none;}


.pageContentsWrap h3{ margin-bottom: 1em; line-height: 1.5; margin-top: 6rem;}
.pageContentsWrap h4{ margin-bottom: 1em; line-height: 1.5;padding-top: 4rem; padding-bottom: 1em; font-weight: bold; border-bottom: solid 1px #000;}
.pageContentsWrap h5{ margin-bottom: 1em; line-height: 1.5;padding-top: 2.5rem; padding-bottom: 0.5em; }

.pageContentsWrap h4:not(:first-of-type) { }
.pageContentsWrap h4:not( :first-child ) {}


.pageContentsWrap .bottomSpecerA + .unit h4:first-child{ padding-top: 0;}

.contents_postage .pageContentsWrap .unit:first-child h4:first-child,
.contents_delivery .pageContentsWrap .unit:first-child h4:first-child{ padding-top: 0;}

.pageContentsWrap .unit p:last-child{ margin-bottom: 0;}

.contents_terms_of_use .pageContentsWrap p + h4{ padding-top: 0em;}

.pageContentsWrap p.bottomSpecerA{ margin-bottom: 90px;}

.this_page_contact .pageContentsWrap.textBody,
.this_page_contact .pageContentsWrap.textBody *{ text-align: center !important;} 


/* artist
----------------------------------------------- */

.page-template-page-artist .pageContentsWrap{ padding-top: 0;}
.artistList{}
.artistList .flexItem{ margin-bottom: 80px; padding-top: 0;}
.artistList .thumbnail{ width: 100px; height: 100px; border-radius: 50px; overflow: hidden; margin: auto; }
.artistList .name{line-height: 1.6; padding-top: 0.5em;}




#simulator .contents{ max-width: 800px; width: 80% !important; margin-left: auto !important; margin-right: auto !important}
#simulator .reference-line-editor,
#simulator .simulator__image{}
#simulator .simulator__image{ margin: auto;}


#simulator .addselector{z-index: 1000}

#simulator .addselector__list{ max-width: 1000px;
	display: grid;
	    grid-template-columns: 1fr 1fr 1fr;

    grid-gap: 20px;
    display: grid;
}
#simulator .addselector__list  li{ text-align: center; background: rgba(0,0,0,1); padding: 1rem;}
#simulator .addselector-item__name{ margin-bottom: 0.5em;}

#simulator .addselector-item__thumbs{ justify-content: center;}
#simulator .addselector-item__thumbs li{}




#simulatorCover{ position: fixed; top: 0; left: 0; transform: translate(0,0); transition: all 500ms ease; z-index: 3000000000; width: 100%; height: 100%; background: rgba(255,255,255,0.8); overflow: hidden; opacity: 0; transition: all 500ms ease; pointer-events: none;}
	.simulatorActive #simulatorCover{transform: translate(0%,0);opacity: 1;pointer-events: all;}
#simulatorCover > .close {position: absolute; top: 50%;  right: 70%; width: 120px; height: 120px; border-radius: 60px; line-height: 1.6;  padding: 0; z-index: 20; 
	text-align: center;

	background: url(./img/parts/btn_simulator_close.svg) center center no-repeat;
	background-size: contain; 


 text-align: center; font-size: 1rem; font-weight: bold;
	opacity: 0;
		transform: translate(-200%,-50%); transition: all 500ms ease-in-out; 
		display: grid;
		align-content: center;
		cursor: pointer;

}

#simulatorCover > .close:hover{ transition: all 200ms ease-in-out;  transform: translate(50%,-50%) scale(1.1) !important;  }

#simulatorCover > .close .inWrap{ display: none;}
#simulatorCover > .close .inWrap:before{ content: ''; display: block; width: 100%; height: 20px; margin-bottom: 1rem; font-weight: bold;  transform: translate(0%,0%); line-height: 1;
	
	background: url(./img/parts/btn_close.svg) center center no-repeat;
	background-size: contain; 
}

	.simulatorActive #simulatorCover > .close{transform: translate(50%,-50%); opacity: 1;	font-family: "AvenirNextLTPro-It";}

#simulatorArea{position: absolute; top: 0;  right: 0; z-index: 1; width: 70%; height: 100%;background: #f1f1f1;opacity: 0;
		transform: translate(100%,0); transition: all 500ms ease; 

}

	.simulatorActive #simulatorArea{transform: translate(0%,0); opacity: 1;}

#simulatorArea iframe{position: absolute; top: 0;  right: 0; width: 100%; height: 100%;}








#simulatorActiveBtn{position: fixed; top:160px; right: 0; width:121px; height:249px;  z-index: 2000000010; cursor: default; overflow: hidden; transition: all 250ms ease-in-out;}
#simulatorActiveBtn.deactive{ display: none !important;}

#simulatorHowtoBtn{position: fixed; top:30px; right: 20px; width:85px; height:102px;  z-index: 2000000010; cursor: pointer; overflow: hidden; transition: all 250ms ease-in-out; }



#siteHeader #siteLogo, 
#globalHeader .siteLogo,
#simulatorHowtoBtn,
.shopify-buy__btn-wrapper,
.itemTags{opacity: .6 !important; mix-blend-mode: multiply;}

/*
#simulatorActiveBtn{opacity: .2 !important; mix-blend-mode: multiply; pointer-events: none;}
body#single #simulatorActiveBtn{opacity: .6 !important; mix-blend-mode: multiply; cursor: pointer;pointer-events: all;}
*/

#simulatorActiveBtn{opacity: .6 !important; mix-blend-mode: multiply; cursor: pointer;pointer-events: all;}

.menuOpen #menuBtnFixed{opacity: 1 !important; mix-blend-mode:normal;}

body.modalMode #simulatorActiveBtn,
body.modalMode #simulatorHowtoBtn,
body.modalOpen #simulatorHowtoBtn{ display: none !important;}


#simulatorActiveBtn::before{ content:''; display: block; position: absolute; top:0px; right: 0px;  width: 100%; height: 100%;background:url(./img/common/btn_simulator.png) right center no-repeat; background-size:contain; transition: all 250ms ease-in-out;}

#simulatorHowtoBtn::before{ content:''; display: block; position: absolute; top:0px; right: 0px;  width: 100%; height: 100%;background:url(./img/common/btn_howto.png) right center no-repeat; background-size:contain; transition: all 250ms ease-in-out;}

#simulatorHowtoBtn .inWrap{ display: inline-block; border: solid 0px #c00; text-align: center; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-40%,-50%) rotate(90deg);
}
#simulatorActiveBtn span,
#simulatorHowtoBtn span{ display: none;}
#simulatorHowtoBtn span2:nth-of-type(1) { content:'SIMULATOR'; display: inline-block;font-family: "AvenirNextLTPro-It";border: solid 0px #c00; font-size: 1.85rem; line-height: 1; margin-bottom: 0.4rem;}
#simulatorHowtoBtn span2:nth-of-type(2) { content:'HOW TO USE'; display: inline-block;  border: solid 0px #c00;font-size: 0.85rem;line-height: 1;}

#simulatorHowtoBtn .a{font-family: "AvenirNextLTPro-It";}

.simulatorHowtoOpen #simulatorActiveBtn,
.simulatorHowtoOpen #simulatorHowtoBtn{ transform: translate(100%,0); }


#simulatorHowto{ pointer-events: none; opacity: 0; position: fixed; top:0; left: 0; right: 0; bottom:0; background: rgba(0,0,0,0.8); z-index: 30000000120; transition: opacity 500ms ease-in-out;}
.simulatorHowtoOpen #simulatorHowto{ pointer-events: all; opacity: 1; }

#simulatorHowto .inFrame{position: absolute; top:0; left: 0; right: 0; bottom:0; width:100%; display: flex; justify-content: center; align-items: center; }
#simulatorHowto .contents{ }
#simulatorHowto .closeBtn{position: absolute; top:20px; right: 20px;  width: 40px; height: 40px; background:url(./img/parts/btn_close.svg) center center no-repeat; background-size:contain; cursor: pointer; z-index:100;}
#simulatorHowto #howtoSteps{ width: 650px; height:650px; overflow: hidden;}
#simulatorHowto #howtoSteps .step{background: #ffff6e; position: absolute; top:0; left: 0; width:100%; height: 100%;transform: translate(110%,0%); padding: 50px; box-sizing: border-box; display: grid; transition: all 500ms ease-in-out;}
#simulatorHowto #howtoSteps .step .bg{position: absolute; top:0; left: 0; right: 0; bottom:0;}
#simulatorHowto #howtoSteps .step .inWrap{ text-align: left;}
#simulatorHowto #howtoSteps .step h4{ font-size: 2.3rem;margin-bottom: 1em;font-family: "FOT-筑紫明朝 Pr6 D";}

#simulatorHowto #howtoSteps .step h4 .stepTitle{ width: 30vw; height: auto; max-width: 150px;}

#simulatorHowto #howtoSteps .step p{font-size: 1.7rem;}
#simulatorHowto #howtoSteps .step .nextBtn{ display: flex; align-items: center; height: 66px;min-width: 200px; border: solid 0px #f30; position: absolute; right:-15px; bottom:-10px; cursor: pointer;}
#simulatorHowto #howtoSteps .step .nextBtn span{ display: inline-block; padding-left: 25px; font-size: 2.45rem;font-family: "AvenirNextLTPro-MediumIt";}

#simulatorHowto #howtoSteps .step .nextBtn:after{ content:''; display: block; width: 40px; height: 100%; position: absolute; top:0; right: 0;background:url(./img/parts/arrow_r_,mark.svg) center center no-repeat; background-size:contain;}
#simulatorHowto #howtoSteps .step .nextBtn.close:after{ content:''; display: block; width: 40px; height: 100%;  position: absolute; top:0; right: 0;background:url(./img/parts/btn_close.svg) center center no-repeat; background-size:contain;}


#simulatorHowto #howtoSteps .goSimulator{ width: 30vw; height: auto; max-width: 150px; }
#simulatorHowto #howtoSteps #howtoSimulator{ min-width: 220px; }


#simulatorHowto #howtoSteps .step.active{ transform: translate(0%,0%);}
#simulatorHowto #howtoSteps .step.leftPos{ transform: translate(-100%,0%);}


#simulatorHowto #howtoSteps .step:nth-of-type(1) .bg{}
#simulatorHowto #howtoSteps .step:nth-of-type(2) .bg{background:url(./img/howto/howto_step_1.png) center center no-repeat; background-size:contain; }
#simulatorHowto #howtoSteps .step:nth-of-type(3) .bg{background:url(./img/howto/howto_step_2.png) center center no-repeat; background-size:contain; }
#simulatorHowto #howtoSteps .step:nth-of-type(4) .bg{background:url(./img/howto/howto_step_3.png) center center no-repeat; background-size:contain; }


#simulatorHowto #howtoSteps .step:nth-of-type(3) p:nth-of-type(2){ position: absolute; top:320px; right: 0; text-align: right;} 



#simulatorHowto #howtoSteps .step .bg{}

#simulatorHowto #howtoSteps .step .bg .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
 
#simulatorHowto #howtoSteps .step .bg .slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  animation :slideshow 15s linear infinite;
}

#simulatorHowto #howtoSteps .step .bg .slide img:nth-child(2){  animation-delay: 3s;}
#simulatorHowto #howtoSteps .step .bg .slide img:nth-child(3){  animation-delay: 6s;}
#simulatorHowto #howtoSteps .step .bg .slide img:nth-child(4){  animation-delay: 9s;}
#simulatorHowto #howtoSteps .step .bg .slide img:nth-child(5){  animation-delay: 12s;}

body:not(.loadingFinish) .shopify-buy-frame{ opacity: 0 !important; }
body.loadingFinish .shopify-buy-frame{transition: opacity 500ms ease;opacity: 0;}


body.loadingFinish_2nd .shopify-buy-frame{ opacity: 1;}

 .shopify-buy-frame{ }

.shopify-buy-frame--toggle.is-sticky{ top:auto !important; bottom: 50px !important;  
	
	width: 80px !important; 
	height: 80px !important;
	transform: translate(25%,0) !important;
}
.shopify-buy-frame--toggle iframe{ 
		width: 80px !important; 
	height: 80px !important;
}

.shopify-buy-frame2{  z-index: 3000000050 !important;}


.simulatorActive .shopify-buy-frame--toggle.is-sticky{ display: none !important;}



.coverContentsWrap{}
body.form .coverContentsWrap{ padding: 6rem 3rem 6rem 3rem; text-align: center !important;}
	body.form .coverContentsWrap *{text-align: center !important;}
	body.form.page.contact_contact .pageContentsWrap .coverContentsWrap{ padding: 0rem;}

body.form.page.contact_contact .pageContentsWrap .coverContentsWrap h2{ display: none;}

body.form  .formUnit > .grid{grid-template-columns: 200px 1fr; grid-gap: 0 39px;}
body.form  .formUnit > .grid .gridItem{border: solid 0px #ccc;}

body.form  .formUnit > .grid .gridItem:nth-of-type(1) { grid-column: 1 / 2;grid-row: 1 / 2;}
body.form  .formUnit > .grid .gridItem:nth-of-type(2) { grid-column: 1 / 2;grid-row: 2 / 3;}
body.form  .formUnit > .grid .gridItem:nth-of-type(3) { grid-column: 2 / 3;grid-row: 1 / 2;}
body.form  .formUnit > .grid .gridItem:nth-of-type(4) { grid-column: 2 / 3;grid-row: 2 / 3;}

body.form  .formUnit > .grid .gridItem:nth-of-type(4) .formData,
body.form  .formUnit > .grid .gridItem:nth-of-type(4) .formData dd,
body.form  .formUnit > .grid .gridItem:nth-of-type(4) .formData span.wpcf7-form-control-wrap,
body.form  .formUnit > .grid .gridItem:nth-of-type(4) .formData textarea{ position: absolute;top: 0; left: 0; width: 100%; height: 100%;}


body.form  .formUnit > .grid .gridItem:nth-of-type(4) .wpcf7-not-valid-tip{ position: absolute; top: auto; bottom: 1em; left: auto; right: 1em; }

body.form.page .formData .title,
body.form.page .formData .code{ display: none;}

body.form  .formUnit .formData{}
body.form  .formUnit .formData dt{}
body.form  .formUnit .formData dd{}

body.form  .formUnit .formData .inputText,
body.form  .formUnit .formData .inputTextarea{ width: 100%; padding: 0.5em; border: solid 0px #ccc; background: rgba(0,0,0,0.04)}

body.form  .formUnit .inputHidden{ display: none;}

body.form  .formUnit .formData .inputText,
body.form  .formUnit .formData .inputTextarea{ text-align: left !important;    color: #262626;}

body.form  .formUnit .formAction{ padding: 39px 0rem 2rem 0rem; max-width: 800px; margin: auto;}
body.form  .formUnit .formAction .inWrap{}
body.form  .formUnit .formAction .wpcf7-submit{ background: #000; color: #fff; padding: 1em 3em; font-size: 1.2em; border: 0; cursor: pointer;}
body.form  .formUnit .formAction .wpcf7-submit:hover{ background: #333;}
body.form  .formUnit .wpcf7-form-control-wrap{ display: block;}
body.form  .formUnit .wpcf7-not-valid-tip{ font-size: 0.6rem; letter-spacing: 0; display: block; background: #262626; color: #fff; padding: 0.2em 1em 0.3em 1em; line-height: 1.6; border-radius: 0; margin: 0; 

}

body.form  .formUnit .itemOrderBtn{ justify-content: flex-end; margin-bottom: 0 !important;}
body.this_page_contact  .formUnit .itemOrderBtn{ display: flex; justify-content:center; margin-bottom: 0 !important;}

body.form .ajax-loader{ display: none;}



body.form  .wpcf7 form .wpcf7-response-output, 
body.form  .wpcf7 form.unaccepted .wpcf7-response-output {
    border:0;
    width: 80%;
    max-width: 700px;
    margin: 1em auto;
}

body.form  .wpcf7 form .wpcf7-response-output ,
body.form .wpcf7-response-output {
    margin: 2rem auto !important;
        width: 100% !important;
    max-width: 800px !important;
    padding: 0.6em 1em 0.7em 1em !important;
    border:0 !important;
    color: #fff !important;
    font-size: 0.8em !important;
    background: #262626 !important;
    line-height: 1 !important;
        font-family: "TsukuGoPr5-R-AvenirNextLTPro-Regular";

    
        }








.topContents{ display: none;}
.coverContents{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto;}

.coverContents .closeContents{ position: fixed; width: 100px; height: 100px; top: 50px; right: 50px; display: inline-block; 
	
			background: url(./img/common/btn_close.svg) center center no-repeat;
	background-size: contain; 
	cursor: pointer;
	
z-index: 10;}


.coverContents .contentsFrame{ min-height: 500px; width: 1200px; padding: 100px 0 100px 0; margin: auto; border: solid 0px #f30; position: relative;} 

.iPad .coverContents .contentsFrame{ width: 90vw;}

.coverContents .contentsFrame img.guide{ position: absolute; top: 100px; left: 50%; transform: translate(-50%,0); width: 100%; z-index: 1;}
.coverContents .contentsMain{ position: relative; z-index: 2; text-align: left; font-size: 1.28rem; line-height: 2;}

.fontOperetta{
	font-family: operetta-52, serif;
font-weight: 300;
font-style: normal;
}


#whoarewe .contentsMain{ padding: 350px 115px 0 190px;  color: #fff;}
#whoarewe .contentsFrame{ margin-bottom: 300px;}

#whoarewe .contentsFrame .contentsBG{ position: absolute; top: 150px; left: 0; width: 100%; height: 100%; border-radius: 600px 600px 600px 600px; overflow: hidden; }

#whoarewe .contentsFrame .contentsBG::before{ content: ''; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
	background: url(./img/brandtop/bg_topcntents.jpg) -100px 0 repeat-y; background-size: 1750px auto;
	}
#whoarewe .contentsFrame .contentsBG .image{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
	background: url(./img/brandtop/bg_topcntents.jpg) -100px 0 repeat-y; background-size: 1750px auto;
	}
#whoarewe .contentsMain h2{ color: #A79500; font-size: 4rem; line-height: 1.2; margin-bottom: 0rem; margin-left: 60px; display: inline-block;}
#whoarewe .contentsMain .inContents{ padding-left: 190px; text-align: justify;}

#whoarewe .contentsMain .inContents .weLogo{ position: relative;}
#whoarewe .contentsMain .inContents .weLogo::before{ content: ''; display: block; position: absolute; right: 0; bottom: 0; transform: translate(0,120%); width: 150px; height: 150px; 
	
		background: url(./img/common/logo_we.svg) center center no-repeat; background-size: contain;
		
}

#whoarewe .contentsMain h3{font-size: 1.6rem; line-height: 1.8;}
#whoarewe .contentsMain h3:nth-of-type(1) { margin: 200px 0 60px;}
#whoarewe .contentsMain h3:nth-of-type(2) { margin: 0px 0 130px 130px; display:flex; justify-content: flex-end;}
#whoarewe .contentsMain h3:nth-of-type(2) span{ display: inline-block;}

#whoarewe .firstWords{ font-size: 2rem; line-height: 1.6;position: absolute;     top: 125px;    left: 190px;  color: #A79500;font-family: "FOT-筑紫明朝 Pr6 D"; padding: 50px 0 0 50px;}
#whoarewe .firstWords::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 300px; height: 300px;  border-radius: 0 0 300px 0;
	background: #fff;
	} 


#whoarewe .pointWords{font-size: 1.6rem; line-height: 2.5; position: absolute;     top: 730px;    left: 210px;
		-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	
	 }

#whoarewe .pointWords span{ text-indent: 14rem; display: inline-block;}


#whoarewe .nextPageNavi{ padding-top: 100px; display: inline-block; position: relative; cursor: pointer;}
#whoarewe .nextPageNavi .starting{
	    color: #A79500;
    font-size: 2rem;
    padding:0 65px 0 65px;
    
}
#whoarewe .nextPageNavi .starting::before{
	content: '';
	display: block;
	 position: absolute;
	 top: 50%;
	 left: 0;
	 width: 40px;
	 height: 60px;
	 transform: translate(0,-50%);
	 background: url(./img/common/menu/icon_starting_gold.svg) center top no-repeat; 
	 background-size: contain;
	
}
#whoarewe .nextPageNavi .starting::after{
	content: '';
	display: block;
	 position: absolute;
	 top: 50%;
	 right: 0;
	 width: 40px;
	 height: 70px;
	 transform: translate(0,-50%);
		 background: url(./img/parts/arrow_r_,mark_gold.svg) right center no-repeat; 
	 background-size: contain;
	
}





#starting .contentsMain{ padding: 290px 110px 0 190px;  color: #fff;}
#starting .contentsFrame{}

#starting .contentsFrame .contentsBG{ position: absolute; top: 150px; left: 0; width: 100%; height: 100%; border-radius: 0px 600px 0px 0px; overflow: hidden; }

#starting .contentsFrame .contentsBG::before{ content: ''; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(-1,1);
	background: url(./img/brandtop/bg_topcntents.jpg) -410px -2700px repeat-y; background-size: 1750px auto;
	}
#starting .contentsFrame .contentsBG .image{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(-1,1);
	background: url(./img/brandtop/bg_topcntents.jpg) -410px -2700px repeat-y; background-size: 1750px auto;
	}	
	
#starting .contentsMain h2{ color: #A79500; font-size: 5rem; line-height: 1.2; margin-bottom: 0rem; position: absolute;     top: 520px;    left: -250px; transform: rotate(90deg);}
#starting .contentsMain .inContents{ padding-left: 50px; padding-top: 80px;text-align: justify;}

#starting .firstWords{ font-size: 2rem; line-height: 1.6;position: absolute;     top: 0px;    left: -10px;  color: #A79500;font-family: "FOT-筑紫明朝 Pr6 D"; padding: 50px 0 0 50px;}
#starting .firstWords::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 300px; height: 300px;  border-radius: 300px 0 0px 0;
	background: #fff;
	transform: rotate(-45deg);
	} 
#starting .firstWords span{ display: inline-block; padding: 0; position: absolute; top: 125px; left: 150px; transform: translate(0,0%); white-space: nowrap;}


#starting .contentsMain h3{font-size: 1.8rem;}
#starting .contentsMain h3:nth-of-type(1) { margin: 220px 0 80px;}
#starting .contentsMain h3:nth-of-type(2) { margin: 0px 0 130px 130px;}

				


#movie{ padding-top: 100px;}
#movie .contentsMain{ padding: 0px 0px 0px 0px;  color: #000; }
#movie .contentsFrame{  padding: 50px 50px 1px; min-height: 600px; margin-bottom: 100px; position: relative; width: 1000px; }

#movie .contentsFrame::before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff;
	border-radius: 0 0 300px 300px; 
	
}
#movie .contentsFrame .photo{ position: absolute; bottom: 0; left: 0;  width: 600px; height: auto; }

#movie .contentsMain h2{ color: #A79500; font-size: 5rem; line-height: 1.2; margin-bottom: 0rem; text-align: center; margin: 100px auto;	}

#movie .contentsMain  .movieArea{ width: 100%; height: 0; padding-top: 60%;}
#movie .contentsMain  iframe{  position: absolute;     top: 0;    left: 0;width: 100%; height: 100%;}





#gallery{ padding-top: 100px;}
#gallery .contentsMain{ padding: 120px 0px 150px 0px;  color: #000; }
#gallery .contentsFrame{  padding: 0px 100px 700px 0; min-height: 500px; margin-bottom: 100px; position: relative; border-radius: 500px 0 500px 0; overflow: hidden;}

#gallery .contentsFrame::before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff;
	border-radius: 500px 0 500px 0; 
	
}
#gallery .contentsFrame img{ width: 100%; height: auto; }
#gallery .contentsFrame picture{ display: block; position: absolute; bottom: 0; left: 0;  width: 100%; height: auto; }

#gallery .contentsMain h2{ color: #A79500; font-size: 5rem; line-height: 1.0; margin-bottom: 0rem; text-align: right; position: absolute;     top: auto; bottom: 270px;    left: -50px; transform: rotate(90deg);}
#gallery .contentsMain .inContents{padding-left: 340px; padding-top: 0px; }



#gallery .contentsMain .inContents .mapArea{ width: 100%; height: 0; padding-top: 60%; margin-bottom: 2rem;}
#gallery .contentsMain .inContents iframe{  position: absolute;     top: 0;    left: 0;width: 100%; height: 100%;}

#gallery .contentsMain h3{ color: #A79500;font-size: 2.5rem;}
#gallery .contentsMain p{font-size: 1.0rem;}

#gallery .infoWrap{ position: relative;}
#gallery .instaBanner{
	 position: absolute;
	 bottom: 0;
	 right: 0;


}
#gallery .instaBanner a{
	position: relative;
	display: block;
	width: 30vw;
	max-width: 200px;
			 background: url(./img/common/banner_instagram.svg) center center no-repeat; 
	 background-size: contain;
}

#gallery .instaBanner a:before{
		content: '';
	display: block;
	width: 100%;
	height: 0;
	padding: 9%;

}

banner_instagram.svg

#gallery .contentsMain h4{    font-size: 1.0rem;}

#gallery .contentsMain .route{margin-bottom: 2rem;}
#gallery .contentsMain h5{    font-size: 1.0rem; margin-bottom: 1.0em;}
#gallery .contentsMain .route h5{ margin-bottom: 0.5em;}
#gallery .contentsMain .route p{ letter-spacing: 0.05em;}

#gallery .contentsMain a{ text-decoration: underline;}








body.orderform .pageContentsWrap{ padding-top: 0;}


.documentFormat{ text-align: center;}



.documentFormat .tRight{ display: block; text-align: right; padding-top: 1rem;}

.documentFormat .read{ margin-bottom: 10mm; line-height: 1.8;}

.documentFormat .privateStatus{ display: none;}






.documentFormat h2{font-size: 1.3rem; text-align: left;text-indent: 1em;margin-bottom: 1rem;font-weight: bold;}
.documentFormat h2:not(:first-child){ padding-top: 5mm;}
.documentFormat .panelBoxPage{ padding: 1rem;  font-size: 0.75rem; display: flex;}
.documentFormat .panelBoxPage .inWrap{  border: solid 0px #ccc;}


.documentFormat .statement{ margin-bottom: 1rem; text-align: left;}
.documentFormat .statement ul{ list-style: disc; padding-left: 1.5em;margin-bottom: 1rem;}
.documentFormat.statement ul li{ margin-bottom: 1rem;}
.documentFormat .statement ol{ list-style: decimal; padding-left: 0em;  padding-top: 1rem; margin-bottom: 1rem;}
.documentFormat .statement ol li{  margin-bottom: 1rem; margin-left: 1.5rem;}
.documentFormat .agree{ margin-bottom: 1rem; padding-top: 1rem;}
.documentFormat .company{ text-align: center; font-size: 0.7rem; position: absolute; bottom: -0.7em; width: 100%;  line-height: 1.8;}


.orderRead{}
.orderRead .orderItemTitle{ font-size: 2rem;}


.documentFormat .itemData{
	text-transform: capitalize;
	position: relative;
	
		display: grid;
	grid-template-columns: 5rem 1fr 5rem 1fr;
	grid-auto-rows: auto;
	grid-gap: 1rem 0;
	padding: 0 0 0 0;
	margin: auto;
	 box-sizing: initial;
	 width: auto;
	 margin-bottom: 7mm;
	 text-align: left;
}

.documentFormat .itemData.col_1{grid-template-columns: 1fr;}
.documentFormat .itemData.col_2{grid-template-columns: 1fr 1fr;}
.documentFormat .itemInData.col_2{grid-template-columns: 8rem 1fr;	grid-gap: 0.5em 0;}

.documentFormat .itemMeta{ margin-bottom: 4rem;}
.documentFormat .itemMeta dd{ font-family: "FOT-筑紫明朝 Pr6 D";}

.documentFormat .itemData .gridItem.hide{ visibility: hidden;}

.documentFormat .itemData .gridItem.day{ justify-content: flex-end !important; margin-left: 3rem;}

.documentFormat .itemData dt{  display: flex; align-items: flex-end; font-size: 0.7rem; letter-spacing: 0.2rem; text-align: left;}
.documentFormat .itemData dd{ display: flex; align-items: flex-end;  text-align: left;    flex-wrap: wrap;}
.documentFormat .itemData dd span{ display: block; width: 100%;}
.documentFormat .itemData li{border-bottom: solid 1px #000;padding-bottom: 1rem;}


.documentFormat .itemData.customerInput{grid-template-columns: 5rem 1fr;width: 50%;margin: auto;}

.documentFormat .formUnit.orderForm{ padding: 0; }
.documentFormat .formUnit.orderForm .orderFormWrap{ padding: 0;  display: flex; justify-content: space-between;margin-bottom: 2rem; }
.documentFormat .formUnit.orderForm .orderFormItem{ width: 48% !important;}
.documentFormat .formUnit.orderForm .orderFormItem .itemInData dt{ line-height: 1.3;}


.documentFormat .formUnit.orderForm .orderFormItem .wpcf7-text{ max-width: 100%;}

.documentFormat .formUnit.orderForm .orderFormWrap h5{ text-align: left; padding:0 0 1rem 0;}
.documentFormat .formUnit.orderForm .orderFormWrap h5 .sub{ display: inline-block; font-size: 0.7rem; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); line-height: 1;}

.documentFormat .formUnit.orderForm .formActionWrap{ width: 100%; max-width: none; display: flex;}

.documentFormat .formUnit.orderForm .copyData{ padding-top: 0 !important; width: 50%; display: flex !important;height: fit-content; text-align: left;}
.documentFormat .formUnit.orderForm .copyData.onlyPC{ }

.documentFormat .formUnit.orderForm .copyData .btn{ margin: 0;}

.documentFormat .formUnit.orderForm .formAction{width: 50%;}

.documentFormat .formUnit.orderForm .formAction .itemOrderBtn{ justify-content: flex-end;}


::placeholder {
  color: #ccc;
}
/* 旧Edge対応 */
::-ms-input-placeholder {
  color: #ccc;
}
/* IE対応 */
:-ms-input-placeholder {
  color: #ccc;
}



.documentFormat .formUnit.orderForm .copyData{ display: flex; justify-content: flex-start; padding-top: 2em;}
.documentFormat .formUnit.orderForm .copyData .btn{ display: inline-block; color: #fff; background: #000; padding: 0.3em 1rem 0.5em 1rem; cursor: pointer;
	    	opacity: .6;
    mix-blend-mode: multiply;
}

.documentFormat .itemData.orderDetail{ display: flex; flex-wrap: wrap; margin: auto !important; width: min-content !important;   padding: 0 !important; min-width: 100%;}
.documentFormat .itemData.orderDetail li{ width: 100%;}
.documentFormat .itemData.orderDetail li.full{ width: 100%;}

.documentFormat .itemData.orderDetail li.full span{ display: block;width: 100%;}
.documentFormat .itemData.orderDetail textarea{ width: 100%; height: 10rem;}

.documentFormat .itemData.orderDetail .hissu{ color: #c00;}

.documentFormat .itemData .inputTextMin{ width: 5rem;}

.documentFormat .inputHidden{ visibility: hidden;}

.documentFormat .formUnit.orderForm { }
.documentFormat .formUnit.orderForm .orderFormWrap .wpcf7-text{ padding: 0.5em; width: 100%;}
.wpcf7-select{padding: 0.5em;}



.documentFormat .formInputArea .itemData li{height: 100%;} 
.documentFormat .formInputArea .itemData dl{height: 100%;} 
.documentFormat .formInputArea .itemData dt{ display: flex; align-items: flex-end;}
.documentFormat .formInputArea .itemData dt span{}
.documentFormat .formInputArea .itemData dd span{ transform: translate(0,0.1em);}


.formUnit .wpcf7 .ajax-loader{ display: none;}
.formUnit .wpcf7-submit{ background: #000; color: #fff; padding: 1rem 2rem; border: 0;}

.agreeConfirm{ display: flex; justify-content: center; padding: 2rem 0;}
.agreeCheck{ display: inline-block; background: #000; color: #fff; padding: 0.4rem 1rem 0.4rem 0.6rem; cursor: pointer; line-height: 1.2; font-size: 0.9rem;
	    opacity: .6 !important;
    mix-blend-mode: multiply;
}
.agreeCheck input{ margin: 0; padding: 0; position: absolute; left: 1rem; top: 50%; transform: translate(0,-50%);
	border: 0;
}

.agreeCheck input,
.agreeCheck label{ pointer-events: none;}

.agreeCheck input[type=checkbox] {
    display: none;
}
.checkbox01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 0px 5px 30px;
    position: relative;
    width: auto;
}
.checkbox01::before {
    background: #fff;
    border: 1px solid #231815;
    content: '';
    display: block;
    height: 16px;
    left: 5px;

    position: absolute;
    top: 50%;
    width: 16px;
    transform: translate(0,-50%);
}
.checkbox01::after {
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    content: '';
    display: block;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 5px;
}
input[type=checkbox]:checked + .checkbox01::after {
    opacity: 1;
}



.agreeCheck.checked{ background: #733939;}





.formInputArea{ display: none;}
.formInputArea.active{ display: block;}


.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  display: none;
}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output{ border: 0; background: #666; color: #fff; margin: 1rem 0 2em; }

.wpcf7 form.sent .wpcf7-response-output{ background: #000; color: #fff; border: 0; margin: 2rem 0 !important;}

.wpcf7 form.sent .formActionWrap{ display: none;}

.contents_orderform #simulatorActiveBtn,
.contents_orderform #simulatorHowtoBtn{ display: none;}






body#document.form{}
body#document.form{ background: #333; color: #fff}
body#document.form #siteBgWrap{ display: none;}


body#document.form .formUnit.orderForm{ padding: 10vw;}
body#document.form .itemData.orderDetail{
	    grid-template-columns: 1fr !important;
}

body#document.form .col_2.itemInData{
	grid-template-columns: 10vw 1fr !important;
}

body#document.form .inputText{ font-size: 3vw; padding: 2vw; width: 100%;}

documentFormWrap{}
#documentFormWrap.confirm{}


@keyframes arrowdown {
    0% {  bottom: 10px;}
	10% { bottom: 0px;}
	30% {  bottom: 10px;}
	40% {  bottom: 0px;}
	50% {  bottom: 10px;}
	90% {  bottom: 10px;}
	100% {  bottom: 10px;}
}



@keyframes bgChange {
    0% {  }
	83.33% {}
	91.6% {}
	100% {}
}

@keyframes bgShow {
    0% {  opacity: 0; transform:translate(0,700px);}
	50% { opacity: 1; transform:translate(0,700px);}
	100% { opacity: 1; transform:translate(0,0px);}
}

@keyframes bgOut {
    0% {  opacity: 1; transform:translate(0,0px);}
    50% {  opacity: 1; transform:translate(0,0px);}
	100% { opacity: 1; transform:translate(0,-700px);}
}


.shopifySite .main-content{ opacity: 1 !important; text-align: center;}
.shopifySite .grid__item{ margin: auto !important;}
.shopifySite .contentsWrap .grid{ grid-template-columns:none;}




.shareLink{ display: none !important; visibility: hidden;}



@keyframes slideshow {
  0%{
    opacity: 0;
  }
   5%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  26%{
    opacity: 1
  }
  30%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}