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


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
@font-face {
  font-family: 'sns_ico';
  src:
    url('../fonts/sns_ico.ttf?z7sza2') format('truetype'),
    url('../fonts/sns_ico.woff?z7sza2') format('woff'),
    url('../fonts/sns_ico.svg?z7sza2#sns_ico') format('svg');
  font-weight: normal;
  font-style: normal;
}

i.snsIcon {
  font-family: 'sns_ico' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
	color: #000;
}

.icon-search:before { content: "\e908";}
.icon-arrow1_left:before { content: "\e90c";}
.icon-arrow1_bottom:before { content: "\e90d";}
.icon-arrow1_right:before { content: "\e90e";}
.icon-arrow1_top:before { content: "\e90f";}
.icon-arrow2_left:before { content: "\e910";}
.icon-arrow2_bottom:before { content: "\e911";}
.icon-arrow2_right:before { content: "\e912";}
.icon-arrow2_top:before { content: "\e913";}
.icon-link:before { content: "\e914";}
.icon-note:before { content: "\e915";}
.icon-ap:before { content: "\e900";}
.icon-blo:before { content: "\e901";}
.icon-fb:before { content: "\e902";}
.icon-hp:before { content: "\e903";}
.icon-in:before { content: "\e904";}
.icon-line:before { content: "\e905";}
.icon-spo:before { content: "\e906";}
.icon-tt:before { content: "\e907";}
.icon-yt:before { content: "\e909";}
.icon-x:before { content: "\e90a";}
.icon-wb:before { content: "\e90b";}
.icon-arrow3_top:before { content: "\ea3a";}
.icon-arrow3_right:before { content: "\ea3c";}
.icon-arrow3_bottom:before { content: "\ea3e";}
.icon-arrow3_left:before { content: "\ea40";}


html {
	scroll-behavior: smooth;
  height: 100%;
}
body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
	font-size: min(3.2vw, 14px);
	line-height: 1.8;
  letter-spacing: 0.06em;
	-webkit-text-size-adjust: 100%;
  color: #fff;
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transition: all .6s ease-out;
}
.anim.on {
	opacity: 1;
}

@media screen and (min-width: 821px) {
	
	.sp { display: none;}
	
	a { transition: all 0.3s ease-out;}
	a:hover { opacity: 0.5;}
	
}
@media screen and (max-width: 820px) {
	
	.pc { display: none;}
	
}


/* ////////////////////////////////////////////////////////////////////////////////

	Opening

//////////////////////////////////////////////////////////////////////////////// */
#op {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #00283d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding-bottom: 12vh;
}
#op .opLogo {
  width: min(60%, 430px);
}
#op > p {
  text-align: center;
  font-size: min(3.4vw, 16px);
  letter-spacing: 0.1em;
}
#op .opAudio {
  width: min(85%, 460px);
}

#op .musicBtn {
  display: flex;
  justify-content: center;
  gap: min(6vw, 30px);
}
#op .musicBtn li a {
  display: flex;
  justify-content: center;
  align-items: center;
  border: #fff solid 1px;
  padding: min(1vw, 5px) min(6vw, 40px) min(1.1vw, 6px);
  color: #fff;
  text-decoration: none;
  gap: min(2vw, 10px);
  font-size: min(3.4vw, 16px);
  letter-spacing: 0.08em;
}
#op .musicBtn li a::before {
  content: "";
  display: block;
  width: 1.1em;
  aspect-ratio: 1/1;
}
#op .musicBtn li a.btnYes::before {
  background: url("../images/ico_sound_on.png") no-repeat center center;
  background-size: contain;
}
#op .musicBtn li a.btnNo::before {
  background: url("../images/ico_sound_off.png") no-repeat center center;
  background-size: contain;
}


/* ////////////////////////////////////////////////////////////////////////////////

	Menu

//////////////////////////////////////////////////////////////////////////////// */
#menuButton {
  display: block;
  width: min(12vw, 60px);
  height: min(12vw, 60px);
  position: fixed;
  top: min(3vw, 25px);
  right: min(5vw, 30px);
  z-index: 9998;
}
#menuButton span {
  display: block;
  background: #fff;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transition: all 0.4s;
}
#profile #menuButton span,
#page #menuButton span {
  background: #0086cc;
}
#profile #menuButton.active span,
#page #menuButton.active span {
  background: #fff;
}
#menuButton span:nth-child(1) { transform: translateY(-350%) rotate(0deg);}
#menuButton span:nth-child(2) { transform: translateY(250%) rotate(0deg); width: 80%;}
#menuButton.active span:nth-child(1) { transform: translateY(-50%) rotate(45deg);}
#menuButton.active span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); width: 100%;}

#globalNavi {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 640px;
  max-width: 100%;
  z-index: 1000;
}
#globalNavi .inrWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#globalNavi .mainMenu li {
  position: relative;
  overflow: hidden;
  background: rgba(0, 134, 204, 1.0);
}
#globalNavi .mainMenu li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/menu_texture.jpg") no-repeat center center;
  background-size: cover;
  mix-blend-mode: multiply;
  z-index: 0;
}
#globalNavi .mainMenu li:nth-child(1)::before { background-position: center top;}
#globalNavi .mainMenu li:nth-child(2)::before { background-position: center 10%;}
#globalNavi .mainMenu li:nth-child(3)::before { background-position: center 40%;}
#globalNavi .mainMenu li:nth-child(4)::before { background-position: center 55%;}
#globalNavi .mainMenu li:nth-child(5)::before { background-position: center 70%;}
#globalNavi .mainMenu li:nth-child(6)::before { background-position: center 85%;}

#globalNavi .mainMenu li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: min(3vw, 15px) min(6vw, 40px) min(2vw, 10px);
  font-size: min(4.6vw, 24px);
  letter-spacing: 0.1em;
  position: relative;
  z-index: 0;
}
#globalNavi .mainMenu li:nth-child(2) a { background: rgba(0,0,0,0.1);}
#globalNavi .mainMenu li:nth-child(3) a { background: rgba(0,0,0,0.3);}
#globalNavi .mainMenu li:nth-child(4) a { background: rgba(0,0,0,0.5);}
#globalNavi .mainMenu li:nth-child(5) a { background: rgba(0,0,0,0.7);}

#globalNavi .subMenu {
  flex: 1;
  padding: min(6vw, 30px) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  background: rgba(0, 134, 204, 1.0);
}
#globalNavi .subMenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/menu_texture.jpg") no-repeat center center;
  background-size: cover;
  mix-blend-mode: multiply;
  z-index: 0;
}
#globalNavi .subMenu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 1;
}
#globalNavi .subMenu > ul {
  position: relative;
  z-index: 2;
}
#globalNavi .subMenu > ul li a {
  display: block;
  padding: min(1vw, 5px) min(6vw, 40px);
  color: #fff;
  text-decoration: none;
  font-size: min(3vw, 12px);
}

#globalNavi .subMenu .menuBtm {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 min(6vw, 40px);
  position: relative;
  z-index: 2;
}
#globalNavi .subMenu .menuBtm .door {
  width: min(8vw, 40px);
  line-height: 0;
}


#globalNavi .mainMenu li,
#globalNavi .subMenu {
  transition: all 0.4s cubic-bezier(0.83, 0, 0.17, 1);
  clip-path: inset(0 0 100% 0);
}
#globalNavi .mainMenu li.on,
#globalNavi .subMenu.on {
  clip-path: inset(-1% 0 -1% 0);
}

.copyright {
  color: #aaa;
  font-size: min(2.8vw, 10px);
}



@media screen and (min-width: 821px) {
	
  #menuButton {
    display: block !important;
  }
  #globalNavi .mainMenu li:nth-child(1) {
    padding-top: min(30vw, 100px);
  }
  
}
@media screen and (max-width: 820px) {
	
  #menuButton {
    display: none !important;
  }
  #profile #menuButton,
  #page #menuButton {
    display: block !important;
  }
  
  #globalNavi {
    position: inherit;
    top: inherit;
    left: inherit;
    height: auto;
  }
  #index #globalNavi {
    display: block!important;
  }
  #profile #globalNavi,
  #page #globalNavi {
    position: fixed;
    height: 100vh;
    height: 100svh;
  }
  
  #globalNavi .mainMenu {
    padding-top: 0;
  }
  #profile #globalNavi .mainMenu li:nth-child(1),
  #page #globalNavi .mainMenu li:nth-child(1) {
    padding-top: min(30vw, 100px);
  }
	
  #globalNavi .subMenu {
    gap: min(16vw, 80px);
  }
  
}

/* ////////////////////////////////////////////////////////////////////////////////

	Main bg

//////////////////////////////////////////////////////////////////////////////// */
#mainBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #00283d;
  z-index: -1;
}
#mainBg::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg_mask.png") repeat center center;
  background-size: 200px;
  mix-blend-mode: multiply;
}
#mainBg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ////////////////////////////////////////////////////////////////////////////////

	Main top

//////////////////////////////////////////////////////////////////////////////// */
#mainTop {
  position: relative;
  width: 100vw;
  height: 100vh;
}
#mainTop h1 {
  position: absolute;
  top: min(4vw, 25px);
  left: min(4vw, 25px);
  width: min(42vw, 240px);
  line-height: 0;
}
#mainTop .mainLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  width: min(30vw, 200px);
}
#mainTop .copyright {
  position: absolute;
  bottom: min(4vw, 25px);
  right: min(4vw, 25px);
}

@media screen and (max-width: 820px) {
  
  #mainTop {
    height: 100vw;
  }
  
}


/* ////////////////////////////////////////////////////////////////////////////////

	下層共通

//////////////////////////////////////////////////////////////////////////////// */
#profile h1,
#guild h1,
#page h1 {
  position: fixed;
  top: min(4vw, 25px);
  left: min(4vw, 25px);
  width: min(42vw, 240px);
  line-height: 0;
  z-index: 1000;
}

#profile footer,
#page footer {
  background-color: #fff;
  padding: min(8vw, 60px) min(6vw, 60px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
}
#profile footer .guildFtrMenu,
#page footer .guildFtrMenu {
  display: flex;
  justify-content: center;
  margin-bottom: min(6vw, 30px);
}
#profile footer .guildFtrMenu li::before,
#page footer .guildFtrMenu li::before {
  content: "/";
  padding: 0 min(2vw, 15px);
}
#profile footer .guildFtrMenu li:first-child::before,
#page footer .guildFtrMenu li:first-child::before {
  display: none;
}
#profile footer .guildFtrMenu li a,
#page footer .guildFtrMenu li a {
  color: #000;
  text-decoration: none;
}


#page {
  background-color: #eef2f3;
}
#page main {
  color: #000;
}

#pageHead {
  padding: min(22vw, 160px) min(6vw, 60px) min(3vw, 30px);
}
#pageHead h2 {
  text-align: center;
  color: #0086cc;
  font-size: min(6vw, 42px);
  line-height: 1.4;
  letter-spacing: 0.18em;
}
#page .contentWrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: min(12vw, 80px) min(6vw, 60px) min(16vw, 120px);
} 


.articleList {
  display: flex;
  flex-wrap: wrap;
  gap: min(8vw, 60px) calc((100% - 32% * 3) / 2);
}
.articleList li {
  width: 32%;
}
.articleList li .thumb {
  line-height: 0;
  width: 100%;
  aspect-ratio: 800/560;
  margin-bottom: min(3vw, 15px);
}
.articleList li .thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.articleList li .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.articleList li p {
  font-size: min(3.2vw, 14px);
}
.articleList li .date {
  color: #0086cc;
  font-size: min(3vw, 12px);
  font-weight: 500;
  margin-bottom: 0.4em;
}

.artistList {
  display: flex;
  flex-wrap: wrap;
  gap: min(8vw, 60px) calc((100% - 23% * 4) / 3);
}
.artistList li {
  width: 23%;
}
.artistList li .thumb {
  line-height: 0;
  width: 100%;
  aspect-ratio: 1/1;
  margin-bottom: min(2vw, 15px);
}
.artistList li .thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.artistList li .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artistList li p {
  font-size: min(3.4vw, 16px);
  line-height: 1.6;
}

.artistDetail {
  margin-bottom: min(8vw, 60px);
}
.artistDetail .artistPic {
  width: 560px;
  max-width: 100%;
  margin: 0 auto min(8vw, 60px);
  line-height: 0;
}
.artistDetail h3 {
  font-size: min(6.4vw, 36px);
  color: #0086cc;
  line-height: 1.6;
}
.artistDetail .subTxt {
  font-size: min(3.4vw, 16px);
  font-weight: bold;
}
.artistDetail .profileTxt {
  margin: min(6vw, 30px) 0;
}
.artistDetail .snsList {
  display: flex;
  gap: min(4vw, 18px);
}
.artistDetail .snsList li a {
  text-decoration: none;
  color: #000;
  font-size: min(5.8vw, 24px);
}


.releaseDetail {
  display: flex;
  justify-content: space-between;
  margin-bottom: min(8vw, 60px);
}
.releaseDetail .jacket {
  line-height: 0;
  width: 40%;
}
.releaseDetail .releaseInfo {
  width: 53%;
}
.releaseDetail .releaseInfo .type {
  margin-bottom: min(1vw, 5px);
}
.releaseDetail .releaseInfo h3 {
  font-size: min(5.6vw, 28px);
  color: #0086cc;
  margin-bottom: min(3vw, 15px);
}

.releaseDetail .releaseInfo .trackList {
  padding-left: min(4vw, 20px);
  margin-top: min(6vw, 30px);
}
.releaseDetail .releaseInfo .trackList li + li {
  margin-top: min(2vw, 10px);
}

.releaseMovie {
  padding-top: min(8vw, 60px);
  border-top: #bcc4c6 solid 1px;
  margin-bottom: min(8vw, 60px);
}
.releaseMovie > div {
  aspect-ratio: 100/56.25;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
.releaseMovie > div iframe {
  width: 100%;
  height: 100%;
}


.pager {
  margin-top: min(12vw, 100px);
	text-align: center;
}
.pager span {
	display: inline-block;
	padding: 10px 12px;
	margin: 0 5px;
	background-color: #0086cc;
  color: #fff;
}
.pager a {
	display: inline-block;
	background-color: #fff;
	color: #0086cc;
	text-decoration: none;
	margin: 0 5px;
	padding: 10px 12px;
}


.artivleHead {
  margin-bottom: min(8vw, 60px);
}
.artivleHead .date {
	color: #0086cc;
  font-size: min(3.2vw, 14px);
  font-weight: 500;
  margin-bottom: 0.8em;
}
.artivleHead h3 {
  font-size: min(4vw, 22px);
}

.articleBody {
  margin-bottom: min(8vw, 60px);
}
.articleBody img {
  display: block;
  margin: min(6vw, 30px) auto;
  width: 680px;
  max-width: 100%;
}
.articleBody p {
  margin-bottom: min(6vw, 30px);
}
.articleBody p:last-child {
  margin-bottom: 0;
}
.articleBody a {
  color: #0086cc;
  text-decoration: underline;
  word-break: break-all;
}
.articleBody iframe {
  width: 680px;
  aspect-ratio: 100 / 56.25;
  max-width: 100%;
  margin: min(6vw, 30px) auto;
  display: block;
}

.articleBody .txtBox {
  padding-bottom: min(5vw, 25px);
  margin-bottom: min(5vw, 25px);
  border-bottom: #ccc solid 1px;
}
.articleBody .txtBox h4 {
  font-size: min(3.8vw, 18px);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: min(3vw, 15px);
}
.articleBody .txtBox p {
  margin-bottom: min(4vw, 20px);
}
.articleBody .txtBox p:last-child {
  margin-bottom: 0;
}
.articleBody .txtBox ul {
  list-style: disc;
  padding-left: min(4vw, 18px);
}
.articleBody .txtBox ol {
  list-style: decimal;
  padding-left: min(4vw, 18px);
}

.worksList li {
  padding: min(4vw, 20px) 0;
  border-bottom: #ccc solid 1px;
  line-height: 2;
}
.worksList li.pickup {
  font-size: 1.3em;
}

.enactment {
  text-align: right;
}

.backBtn {
  padding-top: min(8vw, 60px);
  border-top: #bcc4c6 solid 1px;
}
.backBtn a {
  display: block;
  background-color: #fff;
	color: #0086cc;
  text-decoration: none;
  width: fit-content;
  padding: min(2vw, 8px) min(6vw, 40px);
  margin: 0 auto;
  letter-spacing: 0.1em;
  font-size: min(3.4vw, 16px);
}


.companyLead {
  margin-bottom: min(10vw, 80px);
}
.companyLead .catch {
  color: #0086cc;
  width: fit-content;
  margin: 0 auto min(6vw, 30px);
  font-size: min(4.6vw, 26px);
  border-bottom: #0086cc solid 2px;
  letter-spacing: 0.06em;
  line-height: 1.8;
}
.companyLead p {
  text-align: center;
  font-size: min(3.2vw, 16px);
  line-height: 2.4;
}
.companyLead p span {
  color: #0086cc;
  font-weight: 500;
}

.companyList > li {
  display: flex;
  justify-content: space-between;
  padding: min(4vw, 20px) 0;
  border-bottom: #ccc solid 1px;
}
.companyList > li .ttl {
  width: 120px;
  font-size: min(3.2vw, 14px);
  font-weight: bold;
}
.companyList > li .txt {
  width:  calc(100% - 140px);
}
.companyList > li .txt a {
  color: #000;
  text-decoration: underline;
}
.companyList > li .txt ul {
  list-style: disc;
  padding-left: min(4vw, 18px);
  margin-bottom: min(3vw, 15px);
}

#profile .contentWrap.passWord {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#profile .contentWrap.passWord h3 {
  text-align: center;
  font-size: min(4vw, 20px);
}
#profile .contentWrap.passWord form {
  display: flex;
  justify-content: center;
}
#profile .contentWrap.passWord input {
  background-color: #fff;
  padding: min(2vw, 10px) min(4vw, 20px);
  width: min(60vw, 260px);
  font-size: 16px;
}
#profile .contentWrap.passWord button {
  background-color: rgba(0, 134, 204, 1.0);
  color: #fff;
  padding: min(1vw, 5px) min(4vw, 20px);
  letter-spacing: 0.2em;
}


.passWord .error {
  color: red;
  text-align: center;
  border: red solid 1px;
  padding: min(2vw, 10px) min(6vw, 30px);
  width: 600px;
  max-width: 100%;
  margin: 0 auto min(6vw, 30px);
}

@media screen and (max-width: 820px) {
  
  .articleList {
    gap: min(8vw, 60px) 0;
  }
  .articleList li {
    width: 100%;
  }
  .artistList {
    gap: min(8vw, 60px) calc((100% - 31% * 3) / 2);
  }
  .artistList li {
    width: 31%;
  }
  
  .releaseDetail {
    flex-direction: column;
  }
  .releaseDetail .jacket {
    width: 80%;
    margin: 0 auto min(6vw, 30px);
  }
  .releaseDetail .releaseInfo {
    width: 100%;
  }
  
  .companyLead p {
    letter-spacing: 0;
  }
  .companyList > li .ttl {
    width: 90px;
  }
  .companyList > li .txt {
    width:  calc(100% - 100px);
  }
  
	.pager span {
		padding: 8px 10px;
		margin: 0 2px;
	}
	.pager a {
		padding: 8px 10px;
		margin: 0 2px;
	}
  
  #profile footer,
  #page footer {
    flex-direction: column;
  }
}


/* ////////////////////////////////////////////////////////////////////////////////

	Profile

//////////////////////////////////////////////////////////////////////////////// */
#profile {
  background-color: #eef2f3;
}
#profileHead {
  position: relative;
  background: url("../images/main_bg01.jpg") no-repeat center center;
  background-size: cover;
  padding: min(22vw, 120px) min(6vw, 60px);
}
#profileHead::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg_mask.png") repeat center center;
  background-size: 200px;
  mix-blend-mode: multiply;
  z-index: 0;
}
#profileHead h2 {
  text-align: center;
  font-weight: normal;
  font-size: min(5.8vw, 36px);
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}

.profileWrap {
  display: flex;
  justify-content: space-between;
  max-width: 1140px;
  margin: 0 auto;
  padding: min(18vw, 80px) min(6vw, 60px) min(6vw, 80px);
  position: relative;
  color: #000;
  background-color: #fff;
  margin-top: -30px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

.profileMain {
  width: 50%;
}
.profileMain .thumb {
  line-height: 0;
  width: min(34vw, 160px);
  overflow: hidden;
  border-radius: 50%;
  border: #fff solid 3px;
  position: absolute;
  top: 0;
  left: min(6vw, 60px);
  transform: translateY(-50%);
}
.profileMain h3 {
  color: #d3dbe2;
  font-size: min(5.6vw, 30px);
  font-weight: bold;
  margin-bottom: min(2vw, 10px);
}
.profileMain h3 span {
  color: #0086cc;
}
.profileMain > dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: min(3vw, 15px) 0;
  margin-top: min(6vw, 30px);
}
.profileMain > dl dt {
  width: 100px;
  font-weight: bold;
}
.profileMain > dl dd {
  width: calc(100% - 120px);
}

.profileHistory {
  width: 46%;
  background-color: #eef2f3;
  padding: min(5vw, 30px);
}
.profileHistory h4 {
  font-size: min(3.2vw, 14px);
  font-weight: bold;
  margin-bottom: min(3vw, 15px);
}
.profileHistory > ul {
  list-style: disc;
  padding-left: min(4vw, 18px);
}



#profile main {
  color: #000;
}
#profile .contentWrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: min(14vw, 100px) min(6vw, 60px);
} 

#profile main h3 {
  font-size: min(4.2vw, 24px);
  font-weight: 500;
  margin-bottom: min(6vw, 30px);
  letter-spacing: 0.1em;
}


.bnrGuild {
/*  margin: min(12vw, 100px) auto 0;*/
  width: 320px;
  max-width: 60%;
  line-height: 0;
  position: fixed;
  bottom: min(4vw, 30px);
  left: min(4vw, 30px);
  border-radius: min(2vw, 8px);
  overflow: hidden;
  display: none;
}



@media screen and (max-width: 820px) {
  
  .profileWrap {
    width: 90vw;
    margin: max(-30px, -4vw) auto 0;
    flex-direction: column;
    gap: min(6vw, 30px);
  }
  .profileMain {
    width: 100%;
  }
  .profileMain .thumb {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .profileMain h3 {
    text-align: center;
    margin-bottom: min(6vw, 30px);
  }
  .profileMain > dl {
    gap: min(1vw, 5px) 0;
  }
  .profileMain > dl dt {
    width: 100%;
  }
  .profileMain > dl dd {
    width: 100%;
  }
  .profileMain > dl dd + dt {
    margin-top: min(4vw, 20px);
  }
  
  .profileHistory {
    width: 100%;
  }
  
}


/* ////////////////////////////////////////////////////////////////////////////////

	Guild

//////////////////////////////////////////////////////////////////////////////// */

#guild {
  overflow: hidden;
  height: 100%;
}
#guild.show {
  overflow: auto;
  height: auto;
}

#door {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  overflow: hidden;
}
#door .door {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  background: url("../images/guild_door_frame.jpg") no-repeat center center;
  background-size: cover;
  aspect-ratio: 2880 / 1920;
}
#door .door::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/guild_door_frame_open.jpg") no-repeat center center;
  background-size: cover;
  opacity: 0;
  animation: doorOpen 1s ease-out 2s forwards;
  z-index: 1;
}
#door .door::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 4;
  opacity: 0;
  animation: doorOpen 1s cubic-bezier(0.11, 0, 0.5, 0) 4s forwards;
}
@keyframes doorOpen {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

#door .door .doorInr {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 76%;
  background: url("../images/guild_door.jpg") no-repeat center center;
  background-size: cover;
  transform: translateX(-50%);
  transform-origin: right center;
  
  animation: door 3s cubic-bezier(0.11, 0, 0.5, 0) 2s forwards;
  z-index: 2;
}
@keyframes door {
  0% { transform: translateX(-50%) rotateY(0deg);}
  100% { transform: translateX(-50%) rotateY(40deg);}
}
#door .door .doorInr::before {
  content: "";
  background-color: #120806;
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  right: 100%;
  top: 0;
  animation: doorSide 3s cubic-bezier(0.11, 0, 0.5, 0) 2s forwards;
}
@keyframes doorSide {
  0% { width: 0%;}
  100% { width: 8%;}
}


.guildLogo {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(64vw, 480px);
  line-height: 0;
  z-index: 5;
}

#guildTitle {
  position: relative;
  width: 100vw;
  height: 100vh;
}
#guildTitle::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/guild_bg.jpg") no-repeat center center;
  background-size: cover;
  animation: guildTtl 2s cubic-bezier(0, 0.55, 0.45, 1) 5s forwards;
  z-index: 1;
}
@keyframes guildTtl {
  0% { transform: scale(1.2);}
  100% { transform: scale(1);}
}
#guildTitle .guildLogo {
  animation: guildLogo 1.4s cubic-bezier(0, 0.55, 0.45, 1) 6.5s forwards;
}
@keyframes guildLogo {
  0% { top: 45%;}
  100% { top: 38%;}
}

#guildTitle .btnQuest {
  position: absolute;
  bottom: min(4vw, 30px);
  right: min(4vw, 30px);
  z-index: 2;
  width: min(24vw, 120px);
}

#guild main {
  display: none;
  background: url("../images/guild_main_bg.jpg") repeat center center;
  background-size: 1440px;
}

#guild .contentWrap {
  max-width: 880px;
  margin: 0 auto;
  padding: min(10vw, 80px) min(5vw, 60px);
}

.questWrap {
  background: url("../images/article_bg.jpg") no-repeat center center;
  background-size: cover;
  padding: min(6vw, 30px) min(3vw, 30px);
  border-radius: 8px;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.4);
  border: #674432 solid 1px;
  margin-bottom: min(8vw, 60px);
}
.questWrap h3 {
  text-align: center;
  color: #fff;
  font-family: "austin-pen", sans-serif;
  font-size: min(5.6vw, 32px);
  margin-bottom: min(4vw, 20px);
  font-weight: 400;
  line-height: 1.4;
}
.questWrap .slick-track {
/*  width: 100% !important;*/
}
.questWrap .questPaper {
  clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 30px);
  color: #000;
}
.questWrap .questPaper .questList .slick-slide {
  animation: slideOut 1s ease-out 0s forwards;
}
@keyframes slideOut {
  0% { transform: translateY(0%) rotate(0);}
  100% { transform: translateY(30%) rotate(45deg);}
}
.questWrap .questPaper .questList .slick-slide.slick-current {
  animation: slideIn 1s ease-out 0s forwards;
}
@keyframes slideIn {
  0% { transform: translateY(30%) rotate(0);}
  100% { transform: translateY(0%) rotate(0);}
}

.questWrap .questPaper .questList li {
  background: url("../images/paper_bg.jpg") repeat center top;
  background-size: 800px;
  padding: min(8vw, 60px) min(5vw, 80px);
  position: relative;
}
.questWrap .questPaper .questList li::before {
  content: "";
  display: block;
  border: #ccc8ca solid 1px;
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  pointer-events: none;
}
.questWrap .questPaper h4 {
  text-align: center;
  border-bottom: #000 solid 1px;
  padding: 0 0 min(3vw, 15px);
  font-size: min(4vw, 20px);
  margin-bottom: min(6vw, 30px);
}
.questWrap .questPaper h5 {
  text-align: center;
  font-size: min(3.4vw, 16px);
  margin-bottom: min(5vw, 25px);
}

.questWrap .questPaper .txtArea {
  margin-bottom: min(7vw, 40px);
}
.questWrap .questPaper .txtArea p {
  margin-bottom: min(4vw, 20px);
}

.questWrap .questPaper .entryBtn {
  margin-bottom: min(7vw, 45px);
}
.questWrap .questPaper .entryBtn a {
  display: block;
  color: #fff;
  text-decoration: none;
  background-color: #863a0f;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: min(3.6vw, 16px);
  padding: min(3vw, 10px) min(10vw, 80px);
  width: fit-content;
  margin: 0 auto;
}
.questWrap .questPaper .paperLogo {
  width: min(30vw, 200px);
  margin: 0 auto;
  line-height: 0;
}

.questList .comingsoon {
  text-align: center;
  padding: min(16vw, 140px) 0;
}
.questList .comingsoon p {
  font-size: min(3.8vw, 20px);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.questPager {
  display: flex;
  justify-content: center;
  gap: min(6vw, 40px);
}
.questPager li {
  width: min(30vw, 180px);
}
.questPager a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: min(3.4vw, 16px);
  font-weight: 600;
  border: #475d7c solid 1px;
  padding: min(2vw, 8px);
  text-align: center;
}
.questPager .off {
  opacity: 0.3;
  pointer-events: none;
}

.guildFtr {
  padding: min(6vw, 30px) min(6vw, 60px) min(12vw, 100px);
  text-align: center;
}
.guildFtr .guildFtrMenu {
  display: flex;
  justify-content: center;
  margin-bottom: min(6vw, 30px);
}
.guildFtr .guildFtrMenu li::before {
  content: "/";
  padding: 0 min(3vw, 15px);
}
.guildFtr .guildFtrMenu li:first-child::before {
  display: none;
}
.guildFtr .guildFtrMenu li a {
  color: #fff;
  text-decoration: none;
}

@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

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

  #door .door {
    background: #fff;
    aspect-ratio: 1640 / 3149;
  }
  #door .door::before {
    display: none;
  }
  #door .door .doorInr {
    width: 100%;
    background: url("../images/guild_door_sp.jpg") no-repeat center center;
    background-size: cover;
  }
  
  
  #guild {
    background-color: #000;
  }
  #guildTitle {
    opacity: 0;
    animation: fadeIn 2s linear 5s forwards;
  }
  #guildTitle .btnQuest {
    bottom: min(22vw, 100px);
  }
  
  .questWrap .questPaper::before {
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
  
}


.contact .lead {
  text-align: center;
  margin-bottom: min(8vw, 60px);
}
.contact .form {
  margin-bottom: min(7vw, 50px);
}
.contact .form li {
  display: flex;
  justify-content: space-between;
  padding-bottom: min(4vw, 20px);
  margin-bottom: min(4vw, 20px);
  border-bottom: #ccc solid 1px;
}
 
.contact .form li label,
.contact .form li .label {
  width: 200px;
}
.contact .form li label span {
  color: red;
  vertical-align: text-top;
  font-size: 0.7em;
  margin-left: 0.8em;
}
.contact .form li input,
.contact .form li textarea {
  width: calc(100% - 240px);
  background-color: #fff;
  font-size: 16px;
  padding: min(2vw, 10px) min(3vw, 15px);
}
.contact .form li textarea {
  height: 180px;
}

.contact .form li .input {
  width: calc(100% - 240px);
  font-size: 16px;
}
.contact button,
.contact input[type="button"],
.contact input[type="submit"] {
  background-color: rgba(0, 134, 204, 1.0);
  color: #fff;
  padding: min(2vw, 10px) min(7vw, 40px);
  letter-spacing: 0.1em;
  margin: 0 auto;
  display: block;
  font-size: 16px;
}
.contact .sendBtn,
.thanks .sendBtn {
  display: flex;
  justify-content: center;
  gap: min(6vw, 30px);
}
.contact .sendBtn button,
.contact .sendBtn input[type="button"],
.contact .sendBtn input[type="submit"] {
  margin: 0;
}
.contact .sendBtn input[type="button"] {
  background-color: #333;
}

.thanks {
  text-align: center;
}
.thanks p {
  font-size: min(3.8vw, 20px);
  margin-bottom: min(7vw, 40px);
}
.thanks .sendBtn .squareBtnBlue {
  background-color: rgba(0, 134, 204, 1.0);
  color: #fff;
  padding: min(2vw, 10px) min(7vw, 40px);
  letter-spacing: 0.1em;
  margin: 0 auto;
  display: block;
  font-size: 16px;
}


@media screen and (max-width: 820px) {
  
  .contact .form li {
    flex-direction: column;
    gap: min(2vw, 10px);
  }
  .contact .form li label,
  .contact .form li .label {
    width: 100%;
  }
  .contact .form li input,
  .contact .form li textarea {
    width: 100%;
  }
  
  
}


.notFound {
  text-align: center;
  font-size: min(3.8vw, 18px);
  margin-bottom: min(8vw, 60px);
}