@charset "UTF-8";

:root {

	--color-key: #1abc9c;
	--color-key-light: #ffefef;

	--color-gray-light: #f2f2f2;


	--color-black: #222222;
	--color-dark: #312f2f;

	--color-pink: #ef717a;
	--color-blue: #3498db;
	--color-purple: #745ec5;




	--transition: 1000ms ease-out;

	--line-color:#222222;
	--line-transition: 500ms cubic-bezier(0.215, 0.61, 0.355, 1);


	--font-weight-light: 200;
	--font-weight-normal: normal;
	--font-weight-bold: 600;


}

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

*{ border-color: var(--color-key);}







/*
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;}

*/



/*/////////////////////////
base layout　
//////////////////////////*/
html,body {
	width: 100%;
	font-size: 14px;
	background: #fff;
}
body {
	font-family: YakuHanMP , 'Noto Serif JP', sans-serif;
    font-style: normal;
    font-weight: var(--font-weight-normal);
	line-height: 1.8;
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	width: 100%;
	text-align: left;
    overflow-y: scroll;
    letter-spacing: 0em;
    background:  var(--color-dark);
}



body,a, a:link,a:hover, a:active ,a:visited {
		color: var(--color-black);
}

body.loadingFinish{}

body.fixed{ overflow-x:hidden; overflow-y: scroll;min-width: 100%; min-height: 100vh;max-width: 100%; max-height: 100vh;}
body.fixed #container2{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}

html.touchDevice,
.touchDevice body{ font-size: 16px;}

body:before{ content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;background: #fff;  pointer-events: none;transition: all 500ms ease-in; opacity: 0}
body.pageMove:before{opacity: 1;}


#container{ position:relative; opacity: 0;}


#base{ position:relative;background: url(./img/bg_noize.png) center center ; }


a, a:link, a:visited {
	text-decoration: none;
	outline: 0;

}
a:hover, a:active {
	text-decoration: none;
}
a:not(.btn),
a:not(.btn):link,
a:not(.btn):visited{}

a:not(.btn):hover,
a:not(.btn):active,
#globalMenu a:hover,
#globalFooter section.site ul li a:hover{text-decoration: underline;}

a.noline, a.noline:link {
	text-decoration: none !important;
}




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



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


p {	margin-bottom: 1em;}
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;}


/* transition
----------------------------------------------- */
*:before,
*:after,
.transition{transition: all var(--transition);}


/* #contentWrap
----------------------------------------------- */
#contentWrap{padding-top: 200px; }
body#top.home #contentWrap{ padding-top: 0;}

/* luxy
----------------------------------------------- */
#luxy{z-index: 2;}
#pageScroll{z-index: 2; position: relative; top: 0; left: 0; width: 100%; overflow: hidden;}
#pageScroll.fixed{ position: fixed;}

#debugTools{ position: fixed; bottom: 20px; left: 20px; z-index: 10000; background: #eee; padding: 20px; font-size: 0.8rem;}

/* header
----------------------------------------------- */
#globalHeader{  }


#fixedLogo{ position: fixed;     z-index: 30;top: 60px; left: 60px; width: 240px;}
#fixedLogo:before{ content: ''; display: block; width: 100%; height: 0; padding-top:13.4%; }
body#top.home #fixedLogo{ display: none;}
	#fixedLogo a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0rem;}
	#fixedLogo a .data.logoJP{width: 59%; }
	#fixedLogo a .data.logoEN{position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 36%; line-height: 0;}



#spHeader{ position: fixed; top: 0; left: 0; width: 100%; height: 0;   z-index: 45; display: none}
	#spHeader .logo{ position: fixed; top: 5vw; left: 5vw; width: 50vw; height: 8vw;}

		#spHeader .guide{position: absolute; top: 0%; left: 0; width: 100%; height: auto; }
		#spHeader .data.logoJP{width: 59%; }
		#spHeader .data.logoEN{position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 36%; line-height: 0;}


/* footer
----------------------------------------------- */
section.sns{ height: 360px; padding-top: 120px; text-align: center; overflow: hidden; box-sizing: content-box;}
	body#top.home section.sns{ padding-top: 240px;}

section.sns ul.sns{ position: relative; margin: auto; }
section.sns ul.sns li{ margin: 0 30px;}
section.sns .bgFlower{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 100%; min-width: 1000px; max-width: 1400px; height: auto; }

section.sns .bgFlowerArea{position: absolute; bottom: 0; left: 0%;  width: 100%; height: 300px; background: url(./img/flower_footer.png) center bottom repeat-x; background-size:  auto 100%;}


#globalFooter{ position: fixed; bottom:0; left: 0; width: 100%; z-index: 1}
 #globalFooter section.site {padding: 120px 0; font-size: 0.8em; }
  #globalFooter section.site ul{}
  #globalFooter section.site ul li{ display: inline-block;}
  #globalFooter section.site ul li:not(:last-child):after{ content: ' / '; display: inline-block; margin: 0 1em;}
  #globalFooter section.site ul li a{ text-decoration: none;}

  #globalFooter section.site .copyright{ position: absolute; bottom: 0; right:0; font-size: 0.8em; }


#pageTop{ position: fixed; z-index: 100; bottom:20px; right:20px; width: 50px; height: 50px; border-radius:25px; background:  var(--color-black); color: #fff;  cursor: pointer; transition: all var(--transition);}
#pageTop:hover{ background: #666; }
#pageTop span{ display:  none;}
#pageTop:after{ content: '↑'; display: inline-block; line-height: 1; font-size: 1.6rem; position: absolute; top: 50%; left:50%; transform: translate(-50%,-45%);}

body.menuOpen #pageTop{ pointer-events: none;opacity: 0;}




select#categories-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    font-size: 4.8vw;
    border: none;
    border-radius: 0;
    background: transparent;
    padding:10vw 4vw;
    position: relative;
	font-family: YakuHanMP , 'Noto Serif JP', sans-serif;
}
.spCategorySelect:after{ content:''; display: block; width: 3vw; height: 3vw; position: absolute; top: 50%; right:4vw; transform: translate(0,-50%) rotate(45deg); border-bottom: solid 2px #222; border-right:solid 2px #222;  }

/* menu
----------------------------------------------- */

#menuBtn{ position: fixed; z-index: 50; top: 40px; right: 20px; width: 60px; height: 60px; cursor: pointer; }
#menuBtn span{ display: none;}
#menuBtn hr{ border: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 2px; background: var(--color-dark); transition: all 100ms  ease-in-out 0ms;}


#menuBtn hr:nth-of-type(1) { margin-top: -10px;}
#menuBtn hr:nth-of-type(2) {}
#menuBtn hr:nth-of-type(3) { margin-top: 10px;}

		body.menuOpen #menuBtn hr{background:#fff; transition: all 300ms ease-in-out 500ms;}
		body.menuOpen #menuBtn hr:nth-of-type(1) { margin-top: 0px;transform: translate(-50%,-50%) rotate(-45deg); }
		body.menuOpen #menuBtn hr:nth-of-type(2) { opacity: 0;}
		body.menuOpen #menuBtn hr:nth-of-type(3) { margin-top: 0px;transform: translate(-50%,-50%) rotate(45deg); }

#globalMenu{ position: fixed; top: 0; right: 0;  z-index: 44;width: 500px; height: 100vh; color: #fff; font-size: 1rem; pointer-events: none;}
#globalMenu a{ color: #fff !important; text-decoration: none;}

#globalMenu:before{ content: ''; display: block; position: absolute; bottom: 0; right: 0;  z-index: 44;width: 100%; height: 150vh; transform-origin: left bottom; transform:matrix(1, 0, -0.25881, 0.96592, 657.094, 0); background: var(--color-black); transition: all 1000ms ease-in-out; pointer-events: none;}
body.menuOpen #globalMenu:before{  pointer-events: all;transform: matrix(1, 0, 0, 1, 0, 0); }

#globalMenu .innerFrame{ padding: 100px 10px 10px 50px; z-index: 46; transition: all 100ms ease-in-out 0ms; opacity: 0; pointer-events: none;}
	body.menuOpen #globalMenu .innerFrame{ opacity: 1; pointer-events: all;transition: all 500ms ease-in-out 1000ms;}

#globalMenu .menu{ margin-bottom: 50px;}

#globalMenu .menu li{ }
#globalMenu .menu li a{ line-height: 2.5; }


#globalMenu .sns { font-size: 0;margin-bottom: 50px;}
#globalMenu .sns li{ margin:0 20px 0 0;    width: 20px;    height: 20px;}
#globalMenu .info{ font-size: 0.86em;}
#globalMenu .info li{line-height: 2.5; }

/* copy
----------------------------------------------- */
#copyright{ position: fixed; top: 50%; right:0.5rem; z-index: 20;   width: 1rem; height: 1rem; font-size: 8px;}
#copyright .inWrap{ position: absolute;top: 50%; left:50%;  transform-origin: center;   transform: translate(-50%,-50%) rotate(90deg); white-space: nowrap;}


/* section
----------------------------------------------- */
section{ width: 100%; }
	section.area{ }
	section .innerFrame{ margin: auto; width: 80%; max-width: 1200px; }
	section.full .innerFrame{ margin: 0; width: 100%; max-width: none;}

	section .sectionTitle{color: var(--color-key);}
		 section h2.sectionTitle{ font-size: 3.4rem; margin-bottom: 120px; line-height: 1; letter-spacing: 0.15em;}
		body.fanclub section .sectionTitle{    color: var(--color-blue);}
		body.discography section .sectionTitle{    color: var(--color-purple);}

		section .subLogo{ width: 100%; max-width: 400px; margin-bottom: 0px;}
		section .subLogo img{ width: 100%; height: auto;}

	.entryHeader{ padding: 60px 30px; margin-bottom: 0px;  border-top: dotted 1px var(--line-color); border-bottom: dotted 1px var(--line-color);}


		.entryHeader .date{font-size: 0.8em; line-height: 1; margin-bottom: 2em;		}

		.entryHeader .entryTitle{ margin: 0; font-size: 1.5em; line-height: 1.5;}


	.entryBody{padding: 60px 30px;line-height: 2;word-break: break-all;}



	body#page .entryBody{border-top: dotted 1px var(--line-color); }
	body.fanclub .entryBody{ border-top: 0 !important;}

.entryBody small{font-size: 0.8em;}
.entryBody strong{font-weight: 700;}

.entryBody h4{ font-weight: 700; font-size: 1.6em;}
.entryBody h5{ font-weight: 700; font-size: 1.4em;}
.entryBody h6{ font-weight: 500; font-size: 1.4em;}
.entryBody big{font-size: 1.4em;}



.entryBody .line{ border-bottom: dotted 1px #222; padding-bottom: 0.75em; }
	.entryBody .line:not(:first-child){margin-top: 3em; }

	.entryBody img{ max-width: 100%; height: auto;}
	.entryBody p:not(:last-of-type){ margin-bottom: 1.5em;}

.entryBody .red{ color: var(--color-pink);}

	.entryBody .thumbnail{ background-color: #eee;margin-bottom: 30px; }
	.entryBody .thumbnail:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 100%;}
	.entryBody .url_link{ display: block; margin-bottom: 30px; background: var(--color-pink); height: 2em; border-radius: 1em; line-height: 2em; text-align: center; font-size: 1.5rem; color: #fff; }
	.entryBody .movieWrapUnit{margin-bottom: 60px; }
	.entryBody .movieWrap{}
	.entryBody .movieWrap:not(:last-of-type){ margin-bottom: 20px;}
	.entryBody .movieWrap .movie{ position: absolute; top: 0; left: 0;width: 100%; height: 100%;}

	.entryBody .movieWrap .movie:before{ content: ''; display: block; width: 100%; height: 0;  padding-top: 56.25%;}
	.entryBody .movieWrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

	.entryBody .textWrap{margin-bottom: 60px; }
	.entryBody .exWrap{ }

	.entryBody .textWrap img.size-full{ }


	.entryBody .exWrap ol{ list-style: decimal-leading-zero; padding-left: 2.5em;}
	.entryBody .exWrap ol li{ line-height: 1.5;margin-bottom: 2em;}


/* top
----------------------------------------------- */
body#top { }

body#top #visual{ height:100.2vh;min-height: 400px; }
body#top #visual .photoFrame{ position: absolute; top: 0; left: 0; width:100%; height:100%; overflow: hidden; z-index: 2;
	transform: translateX(-100%); transition:transform 1.6s cubic-bezier(.67,.01,.23,1.01);
}
body#top.loadingFinish #visual .photoFrame{transform: translateX(0%);  }
body#top #visual .photoFrame:after{ content: ''; display: none; position: absolute; top: -2px; width: 40%; height: 100%;    background: url(./img/bg_noize.png) center center;
transform: translateX(-100%);transition:transform 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s}
	body#top.loadingFinish #visual .photoFrame:after{transform: translateX(0%);}



body#top #visual .photoFrameCover{ content: ''; display: block; position: absolute; top: 0px; z-index: 3;width: 40%; height: 100%;   background: url(./img/bg_noize.png) center center;transform: translateX(-100%);transition:transform 1.1s cubic-bezier(0,.31,.18,.99) 1.1s}
	body#top.loadingFinish #visual .photoFrameCover{transform: translateX(0%);}



body#top #visual .mainPhoto{ position: absolute; top: 0; left: 0; width:100%; height:100%; overflow: hidden; }


body#top #visual .mainPhoto:before{ content: ''; display: block;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 500px; overflow: hidden; background: url(./img/visual_photo.jpg?id=0830) center center no-repeat; background-size: cover;transform: translateX(75%); transition:transform 1.6s cubic-bezier(.67,.01,.23,1.01);}
	body#top.loadingFinish #visual .mainPhoto:before{ transform: translateX(0%);}

body#top #visual .innerFrame{ z-index: 5;}
body#top #visual .logoWrap{ position: absolute; top: 120px; left: 65px;}

body#top #visual .logo{ margin-bottom: 55px; width: 266px; transform: translateY(10%); opacity:0; transition:all 1.1s ease-out 1.6s;}
	body#top.loadingFinish #visual .logo{ transform: translateY(0%); opacity:1; }


body#top #visual .logo .data{}
body#top #visual .logo .data.logoJP{ margin-bottom: 3%;}
body#top #visual .logo .data.logoEN{ width: 62%; margin-left: 2%;}



body#top #visual .sns{ transform: translateY(10%); opacity:0; transition:all 1.1s ease-out 1.8s;}
	body#top.loadingFinish #visual .sns{ transform: translateY(0%); opacity:1; }

body#top #visual .flower{ position: absolute; bottom: 0; right: 0; }
body#top #visual .flower .item{ position: absolute; bottom: 0; right: 0; width:100%; height: 100%; opacity:0;transform-origin: bottom right;transition: all 3500ms  cubic-bezier(.35,0,0,.99)}
body#top #visual .flower img{ width: 100%; height: auto;}
body#top #visual .flower img.layout{ visibility: hidden;}
body#top #visual .flower .item_1{transform: translate3d(20%,0,0) rotate(0deg); transition-delay: 600ms !important;}
body#top #visual .flower .item_2{transform: translate3d(40%,0,0) rotate(0deg); transition-delay: 700ms !important;}
body#top #visual .flower .item_3{transform: translate3d(70%,0,0) rotate(0deg); transition-delay: 800ms !important;}
body#top #visual .flower .item_4{transform: translate3d(100%,0,0) rotate(0deg); transition-delay: 900ms !important;}
body#top #visual .flower.guide{z-index: 4; right:-1%;bottom: -6%;width:90%; max-width: 1239px; min-width:1000px; display: block;}


body.loadingFinish #visual .flower .item_1{ opacity: 1 !important; transform: translate3d(0,0,0) rotate(0deg) !important;}
body.loadingFinish #visual .flower .item_2{ opacity: 1 !important; transform: translate3d(0,0,0) rotate(0deg) !important;}
body.loadingFinish #visual .flower .item_3{ opacity: 1 !important; transform: translate3d(0,0,0) rotate(0deg) !important;}
body.loadingFinish #visual .flower .item_4{ opacity: 1 !important; transform: translate3d(0,0,0) rotate(0deg) !important;}



body#top #topBanner{ padding: 120px 0; }
body#top #topBanner .bannerWrap{ }
body#top #topBanner .bannerWrap li{ margin-bottom: 1rem;}
body#top #topBanner .bannerWrap li.inView{ }

body#top #news{margin-bottom: 120px;}
body#top #schedule{margin-bottom: 120px;}
body#top #media{margin-bottom: 240px;}



body#top #profile{ margin-bottom: 240px; background: #f2f2f2;height: 100vh; max-height:750px; min-height:650px;overflow: hidden;}
	body#top #profile .innerFrame{height: 100vh; min-height: 500px; max-height: 800px; }
	body#top #profile .mainPhotoWrap{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); height:100%; overflow: hidden;}

	body#top #profile .mainPhoto{ position: absolute; top: 0; right: 0%; width:100%; height:100%;  background: url(./img/profile_photo.jpg?id=0905) 0vw center no-repeat; background-size: cover; transform-origin: center center;}
	body#top #profile .contentWrap{ padding: 100px 0 100px 52.5%;}
	body#top #profile .contentWrap .sectionTitle{ line-height: 1; margin-bottom: 50px; color:var(--color-blue);}
	body#top #profile .contentWrap .name{ display: inline-block; font-size: 1.5rem; line-height: 1rem; padding-right: 1em; letter-spacing: 0.3em; margin-bottom:30px; }
	body#top #profile .contentWrap .name small{ position: absolute; top: 50%;  right: 0; transform: translate(100%,-50%); display: inline-block; margin-left: 1em; font-size: 0.5em;line-height: 1.5rem;letter-spacing: 0.15em;}

	body#top #profile .contentWrap .dataWrap{ grid-gap: 5%;grid-template-columns: auto 1fr; margin-bottom: 40px;}
	body#top #profile .contentWrap .dataWrap .data{ margin: 0; padding: 0; font-size: 0.8em;}

body#top #discography{margin-bottom: 120px;}
body#top #discography .sectionTitle{ color:var(--color-purple);}


body#top #video{margin-bottom: 240px; }


body#top #video .entryBoxList{	grid-gap: 0%; justify-content:space-between !important;}
body#top #video .entryBoxList .entry{ width: 46%;}

body#top #fanclub{ background: #f2f2f2; padding: 180px 0 180px 0;}

	body#top #fanclub .contentWrap{ grid-gap: 5%; grid-template-columns: 1fr 1fr;}
	body#top #fanclub .contentWrap .gridItem{ }
	body#top #fanclub .contentWrap .sectionTitle{ line-height: 1; margin-bottom: 50px;color:var(--color-blue);}

	body#top #fanclub .contentWrap h3.sub { width:400px; margin:0 0 50px 0;}
	body#top #fanclub .contentWrap .read{font-size: 1.5rem; margin-bottom: 50px;}
	body#top #fanclub .contentWrap dl.fanclubInfo{ margin-bottom: 50px;}
	body#top #fanclub .contentWrap dl.fanclubInfo dt{font-size: 1.2rem; margin-bottom: 20px; line-height: 1; padding-bottom: 20px; border-bottom: dotted 1px #999;}
	body#top #fanclub .contentWrap dl.fanclubInfo dd{}

	body#top #fanclub .contentWrap dl.fanclubInfo ul{font-size: 0.8em;}
	body#top #fanclub .contentWrap dl.fanclubInfo ul li{}

	body#top #fanclub .contentWrap .app{ text-align: center;}
	body#top #fanclub .contentWrap .app .phone{ width: 80%; max-width: 300px; margin-bottom: 0px;transform: translate3d(0,-10%,0) scale(1.1);  transition: all 1000ms ease-out 300ms; opacity: 0; margin-top: -50px;}

		body#top #fanclub .contentWrap .app.is-show  .phone{ transform: translate3d(0,0,0) scale(1); opacity: 1;}

	body#top #fanclub .contentWrap .appLink{ grid-gap: 8%; grid-template-columns: 1fr 1fr; }
	body#top #fanclub .contentWrap .appLink dl{grid-gap: 0%;grid-template-columns: 70% 30%; }
	body#top #fanclub .contentWrap .appLink dl dt{}
	body#top #fanclub .contentWrap .appLink dl dd{}
	body#top #fanclub .contentWrap .appLink img.qr{ width: auto; height: 100%;}


/* archive
----------------------------------------------- */
body#archive { }


		body#archive .entryHeader{ padding: 50px 20px; margin-bottom: 120px; }
		body#archive .entryHeader ul{ margin: 0;}
		body#archive .entryHeader ul li{ display: inline-block;}
		body#archive .entryHeader ul li:not(:last-of-type):after{ content: ' / '; display: inline-block; margin: 0 1em;}
		body#archive .entryHeader ul li a{ padding: 0.5em 0.5em; line-height: 1;}
		body#archive .entryHeader ul li.active a{ background: #000; color: #fff;}
		body#archive .entryBoxList{ grid-gap:120px 5%;}



/* single
----------------------------------------------- */
body#single{ }
		body#single section h2.sectionTitle{}
		body#single:not(.news) .entryBody{padding: 60px 0px;}
		body#single .entryBody > .grid{ grid-gap: 60px;}

		body#single .movieWrap{ margin: auto;}
		body#single .movieWrap:not(:last-of-type){ margin-bottom: 20px;}
		body#single .movieWrap:before{ content: ''; display: block; width: 100%; height: 0;  padding-top: 56.25%;}

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

}

@media screen and (max-width:1000px) {
		body#top #profile .contentWrap .dataWrap{ grid-gap: 5%;grid-template-columns: 1fr; margin-bottom: 60px;}
		body#top #profile .contentWrap .dataWrap dl.data dt{ width: 80px;}


		body#top #profile .contentWrap p br{ display: none }
}

@media screen and (min-width:751px) {
	.spCategorySelect{ display: none;}
	select#categories-select  {
    width: 100%;
    font-size: 14px;
    padding: 30px 15px;
    pointer-events: none;
}

	   .type-selector > ul {
        z-index: 1;
        position: absolute;
        width: calc(100% - 40px);
        background: rgba(0, 0, 0, 0.75);
        left: 20px;
        top: 20px;
        height: 0;
        overflow: hidden; }
        .type-selector > ul > li {
          position: relative;
          padding-left: 20px;
          cursor: pointer; }
          .type-selector > ul > li:hover span {
            text-decoration: underline; }
          .type-selector > ul > li.cur:before {
            position: absolute;
            display: block;
            content: " ";
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 16px;
            height: 100%;
            top: 0;
            left: 0;
            background: url("../img/common/icon-check.svg") 50% 50% no-repeat;
            background-size: contain; }
      .type-selector.open > ul {
        padding: 30px 20px;
        height: auto; }



}

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


																	#globalMenu{ width: 50vw;}
																	#fixedLogo{ display: none;}
																	#spHeader{  display: block;}
																	#contentWrap{    padding-top: 23vw;}





																	section h2.sectionTitle{
																	    font-size: 2.0rem;
																	    margin-bottom: 14vw;
																	}
																	body#single section h2.sectionTitle,
																	body#archive section h2.sectionTitle{ }

																	body.fanclub section h2.sectionTitle{margin-bottom: 8vw !important;}

																	section .subLogo{ width: 70%; margin-bottom: 14vw;}

																	.btnDesign.sizeWide{ width: 100%;}

																.entryList{ margin-bottom: 15vw;}
																.entryList dl{    grid-template-columns: 1fr;}
																.entryList dl dt{   font-size: 0.7rem; margin-bottom: 2vw;}
																.entryList dl dd{   font-size: 0.8rem; padding-right: 8vw;}
																.entryList a{ padding:8vw 4vw 8vw 4vw;}
																.entryList a dd:after{ content: ''; display: block; width: 4vw; height: 4vw; border-bottom: solid 1px; border-right: solid 1px; position: absolute; top: calc(50% - 1rem); right: 0vw; transform: translate(0,-50%) rotate(-45deg);}

																.entryMore {   justify-content: center; display: flex;}
																	.entryMore.spRight{ justify-content: flex-end;}

																	.entryHeader{padding: 10vw 0;}
																	.entryHeader .entryTitle{font-size: 1.1rem;}
																	.entryHeader .date{ margin-bottom: 3vw;}

																	 .entryBody{font-size: 0.7rem;    padding: 10vw 0;}
																	 .entryBody .thumbnail{margin-bottom: 5vw;}
																	 .entryBody .url_link{margin-bottom: 2.5vw;    font-size: 1.1rem;height: 13.6vw; border-radius: 6.8vw; line-height: 13.6vw; }
																	 .entryBody .movieWrapUnit{margin-bottom: 10vw;}
																	 .entryBody .textWrap{margin-bottom: 10vw;}



																		 body#single .entryBody{ }
																		 body#single .entryBody > .grid{grid-gap:5vw;}
																		 body#single .movieWrap:not(:last-of-type){margin-bottom: 2.5vw;}
																		 body#single .pagenationUnit .pageUnit{ display: block;}

																	 .pagenationUnit{ position: relative; padding: 0;  min-height: 15vw;}
																	 .pagenationUnit .pageUnit{ display: block; display: none;}
																	 	.pagenationUnit .pageUnit,
																	 	.pagenationUnit .arrowWrap{  font-size: 1.2rem;}
																	 	.pagenationUnit .arrowWrap{ padding: 0;}
																	 	.pagenationUnit .prevWrap{ position: absolute; top: 0; left: 0;}
																	 	.pagenationUnit .nextWrap{position: absolute; top: 0; right: 0;}


																	body#top.home #contentWrap{    padding-top: 18vw;}
																	body#top #visual{ height: calc((var(--vh) * 101) - 18vw ); max-height: 1400px; min-height: inherit;}

																	.ua_Instagram body#top #visual{ height: 80vh;}
																	body#top #visual .photoFrame{height: calc((var(--vh) * 101) - 18vw ); max-height: 1400px; }

																	body#top #visual .photoFrame,
																	body#top #visual .mainPhoto:before{transform:translateX(0%) !important}

																	body#top #profile .mainPhotoWrap{ position: absolute; top: 0; left: 0%; transform: translate(0%,0); width:100% !important; height:100%; }
																	body#top #visual .mainPhoto{ top:10vw; left: -30vw; width: 130vw;height: calc((var(--vh) * 101) - 18vw ); max-height: 1400px; background: none;}
																	body#top #visual .mainPhoto:before{ content: ''; display: block;  position: absolute; top: 0; left: 0; width: 100%;height: calc((var(--vh) * 101) - 18vw ); max-height: 1400px; overflow: hidden; background: url(./img/visual_photo.jpg?id=0830) 55% center no-repeat; background-size: auto 100%;  }

																	body#top #visual .photoFrame:after{ width: 20vw;}

																	body#top #visual .photoFrameCover{ width: 20vw;}



																	body#top #visual .logoWrap{ top: 10vw; left: 5vw;}
																	body#top #visual .logoWrap .logo{ display: none;}

																	body#top #visual .logoWrap ul.sns li{ display: block; margin: 0 0 10vw 0;width: 10vw;   height: 10vw;}


																	body#top #visual .flower.guide{right:-7vw;bottom: -4vw;width:141vw; max-width: auto; min-width:auto; display: block;}

																	#menuBtn {
																    position: fixed;
																    z-index: 50;
																    top: 0px;
																    right: 0px;
																    width: 18vw;
																    height: 18vw;
																    }



																body#top #topBanner{    padding: 15vw 0;}
																body#top #topBanner .bannerWrap{grid-template-columns: 1fr ;}

																body#top #topBanner .bannerWrap li{ margin-bottom: 4vw;}

																body#top #news{ margin-bottom: 15vw;}
																body#top #schedule{ margin-bottom: 15vw;}
																body#top #media{ margin-bottom: 30vw;}

																body#top #profile{ background: none; height: auto; margin-bottom: 30vw; max-height: none; }
																body#top #profile .mainPhotoWrap{ position: relative; width: 100vw; height: 100vw; margin-bottom: 15vw;}
																body#top #profile .mainPhoto{ position: absolute; width: 100vw; height: 100vw;right: -10%;}
																body#top #profile .mainPhoto{ background: url(./img/profile_photo.jpg?id=0905) 44% center no-repeat; background-size: cover; transform-origin: center center;}

																body#top #profile .innerFrame {
																    height: auto;
																    min-height: inherit;
																    max-height: none;
																}
																body#top #profile .contentWrap{ padding: 0;}

																body#top #profile .contentWrap .dataWrap dl.data dt{ width: 7em}

																body#top #profile .entryMore{ margin-top: 10vw;}

																body#top #discography .entryBoxList{grid-template-columns: 1fr;}
																body#top #discography .entryBoxList a:not(:first-child){ display: none;}

																body#top #video .entryBoxList{grid-template-columns: 1fr;}
																body#top #video .entryBoxList .entry{ width: 100%;}
																body#top #video .entryBoxList a:not(:first-child){ display: none;}


																body#top #fanclub .contentWrap{grid-template-columns: 1fr; display: block; text-align: center;}
																body#top #fanclub .contentWrap .sectionTitle{margin-bottom: 14vw; text-align: left;}
																body#top #fanclub .contentWrap h3.sub{
																	width: 100%;
																	    font-size: 2.4rem;
																    margin-bottom: 0vw;
																}

																body#top #fanclub .contentWrap .read{ font-size: 1rem;}


																body#top #fanclub .contentWrap .phone{ width: 70%; height: auto; margin: auto;}

																body#top #fanclub .contentWrap p{ text-align: left;}


																body#top #fanclub .contentWrap dl.fanclubInfo{ margin-bottom: 10vw;}

																body#top #fanclub .contentWrap .appLink{ margin-bottom: 10vw}
																body#top #fanclub .contentWrap .appLink dl { display: block;}
																body#top #fanclub .contentWrap .appLink dl dd{ display: none;}
																body#top #fanclub .entryMore.onlySP{ display: flex !important; justify-content: center;}


																body#top.home section.sns{  height: auto; min-height: 60vw;   padding-top: 30vw;}

																section.sns .bgFlowerArea{position: absolute; bottom: -2vw; left: 0%;  width: 100%; height: 35vw; background: url(./img/flower_footer.png) center bottom repeat-x; background-size:  auto 100%;}

																ul.sns li {
																    display: inline-block;
																    width: 7vw;
																    height: 7vw;
																  }
																  section.sns ul.sns li {
																    margin: 0 2vw;
																}


																#globalFooter section.site{ padding: 15vw 0 30vw 0;}
																#globalFooter section.site .innerFrame{ padding-bottom: 10vw;}
																#globalFooter section.site ul{ overflow: hidden;margin-bottom: 5vw;}
																#globalFooter section.site ul li{float: left; margin-bottom: 3vw;}
																#globalFooter section.site ul li a{ }
																#globalFooter section.site ul li:not(:last-child):after{    margin: 0 2vw;}

																#globalFooter section.site .info{ position: absolute; bottom: 0; left: 0;  font-size: 0.9em; margin: 0;}
																#globalFooter section.site .info li{ margin-bottom: 0;}
																#globalFooter section.site .copyright{ position: absolute; bottom: 0; right: 0; text-align: left;}


																body#archive .entryHeader{ margin-bottom: 15vw;}
																body#archive .entryBoxList{grid-template-columns: 1fr !important;grid-gap:15vw }
																	body#archive.post-type-archive-video .entryBoxList{border-top: dotted 1px var(--line-color); padding-top: 15vw;}

																.single-discography .entryHeader {
																	    padding: 10vw 0 15vw 0;
																	}

																body#archive.discography .entryHeader { padding: 0;}
																.entryHeader.tabSelectWrap{ padding: 0;}
																body#archive.discography .entryHeader ul{ display: none;}
																 .type-selector{ display: none;}


																 	section.sns {
																		    height: 50vw;
																		    padding-top: 20vw;
																		}


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