@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=Krub:wght@400;500&family=Zen+Kaku+Gothic+Antique:wght@400;500&display=swap);

.hidden {
  overflow: hidden !important;
  overflow: clip;
   overscroll-behavior-x: contain;
}
p, span{ padding:0; margin:0; }
h1, h2, h3, h4, h5{ font-size:100%; font-weight:normal; margin:0; padding:0; }

body{
margin:0; padding:0; text-align:center;
-webkit-text-size-adjust: 100%; color:#414036; background:#FCFAF4;
}

#base{ width:100%; position: relative; margin:0 auto; padding:0; text-align:left; }

/* ------------ common ------------------------- */

a{ outline: none; color:#414036; }
a:visited{ color:#414036; }

ul{ list-style-type:none; margin:0; padding:0; }
ul li{ margin:0; padding:0; }

a span, button{ cursor:pointer; }


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

.header{
mix-blend-mode:difference;
position: fixed; z-index:9999; width:100%;
}

.headerFixed{
max-width:940px; max-height:110px; width:100%;
display: flex; align-items: center; justify-content: space-between;
margin:8px auto 0; gap:0; padding:0;
}

.headerClose{ mix-blend-mode:normal; }

.h1{ text-align:left; flex-basis: 50%; }
.h1 img{ width:58.67%; height:auto; margin-left:12%; }

#about{ width:100%; margin:0; padding:0; text-align:left; position:fixed; z-index:100; }
#about.zindex{ z-index:300; }
#about #off{ margin:0; padding:0; }

#bg{ width:100%; height:100%; z-index:250; position:fixed; }
    #bg.hide{ visibility:hidden; }

#trigger-overlay{
	overflow: hidden;
	background-color: transparent;
	outline: none;
	z-index: 100;
	border:0;
}

.headerBtn{ margin-left: auto; padding-right:3.6%; }

.Hbtn{ height:60px; width:60px; text-align:center; 	display: flex;
	padding:0;
	flex-direction: column;
	justify-content: center;
	align-items: center;}

.iconInfo{
	/*width:26px; height:24px;*/
	width: 43.34%; height: 40%;
	border: solid 1px;
	border-color:rgb(235 232 223 / 0.8);
	border-width: 0.3px 1.5px;
	border-radius: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.iconInfo img{
	width:16px; height:16px;
	padding:4px 0;
}

.iconClose{
 border-color:#4A5351;
 background-color:#4A5351;
}

.iconClose img{
filter:invert(100%);
}

/* open contents */
.overlay {
    z-index:9999;
	position: fixed;
	width: 100%;
	height: 100%;
background: linear-gradient(to bottom, #CEE2E8 0%, #E2E8EF 44%, #E2E0F0 85% , #E9DBDB 100%); 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.overlay .overlay-close {
	overflow: hidden;
	background-color: transparent;
	outline: none;
	z-index: 100;
	border:0;
}

.overlay .about {
	height: calc(100% + 1px);
}

.overlay .about2 {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	min-height: 100%;
	position: relative;
	width:100%;
	max-width:480px; min-height:100%;
	text-align:left;
	display:flex;
	align-items: center; justify-content: center;
	flex-direction: column;
	
}

.overlay .about3 {
	display: block;
	font-size: 12px; line-height:1.9; letter-spacing: 0.84px;
	width:100%;
}

/* Effects */
.overlay-slidedown {
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
	visibility: visible;
	transform: translateY(0%);
	transition: transform 0.4s ease-in-out;
}

/* ------------ entry ------------------------- */

#contents{ padding-top:100px; display:flex; flex-direction: column; gap:96px; }
.entry{ width:100%; }
.entryImage{ max-width:100%; padding:0; margin:0; display:flex; }
.artImage{ max-width:100%; font-size:100%; width:100%; height:auto; }
.\34\73\65\63{ background:#000; padding:1.6% 0; } /* .4sec */
.entryCat::before{content:'|'; color: #D0CEC0; padding:0 1em; }

.catName::before{ content:'【'; }
.catName::after{ content:'】'; }

/* scroll anime */
.effect{ opacity: 0; transition: all 0.5s ease-in-out; transform: translate(0,16px); }
.view{ opacity: 100; transform: translate(0,0px); animation-delay: 0.3s; }

/* 1st anime */
.effect2{ animation-name: entryAnime; }

@keyframes entryAnime {
  0% { opacity: 0; transform: translate(0,16px); }
  20% { opacity: 0; transform: translate(0,16px); }
  100% { opacity: 1; transform: translate(0,0px); }
}

.entryTitle.effect2{ animation-duration: 0.6s; }
.entryText.effect2{ animation-duration: 0.8s; }
.entryImage.effect2{ animation-duration: 1.0s; }
.entryItem.effect2{ animation-duration: 1.2s; }

.entryText a.blank{
	text-decoration: underline; text-decoration-color:#D0CEC0; text-underline-offset:3px;
	transition:all 0.25s ease-in; display:inline-block; margin:0 2px;
 }


.entryLink{ display:flex; padding-top:1.2em; gap:1em; }

.entryLink a.btn{
	display:inline-block;
	border:solid 1px #A5A28D; border-radius: 4px;
	transition:all 0.25s ease-in;
	padding:10px 32px 13px; margin:0;
	font-weight:500; text-decoration:none; font-size:1.08em;
}

/* ------------ info ------------------------- */

#about{ position: absolute; }
.imgProfile{ width:88px; height:88px; border-radius:100%; }
.infoText{ padding:0 0 32px 25px; }
.profile{ display:flex; align-items: center; gap:14px; padding:0 23px 0; }
.about .sns{ padding-top:48px; }

/* anime */
.open .effectAbout { animation-name: aboutAnime; animation-timing-function: ease-in-out;}
.open .infoText.effectAbout{ animation-duration: 0.8s; }
.open .profile.effectAbout{ animation-duration: 0.9s; }
.open .sns.effectAbout{ animation-duration: 1s; }
.open .copyrightArea.effectAbout{ animation-duration: 1.1s; }

@keyframes aboutAnime {
  0% { opacity: 0; transform: translate(0,32px); }
  40% { opacity: 0; transform: translate(0,32px); }
  100% { opacity: 1; transform: translate(0,0px); }
}


/* ------------ footer ------------------------- */

.sns{ padding:0 0 0 20px; }
.sns ul{ display:flex; gap:24px; }
.snsItem{ width:30px; height:30px; }
.snsItem a{ display:block; opacity:0.65; width:100%; height:100%; transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s; }
.snsItem a img{ width:100%; height:100%; }

.footer{ width:100%; margin:0 auto; }
.copyrightArea{ padding:56px 0 22px 26px; display:flex; flex-direction: column; gap:11px; }

.about .sns{ padding-top:56px; }
.about .copyrightArea{ padding-bottom:0; }

/* ------------ font padding ------------------------- */

body{ font-family: "Zen Kaku Gothic Antique", sans-serif; font-weight: 400; font-style: normal; letter-spacing:0.07em; }
.en{ font-family: "Krub", sans-serif; font-weight: 400; font-style: normal; font-size:110%; display:inline-block; }
.bold { font-weight: 500; }
.en.bold{ font-weight:500; }

/* entry */
.entryTitle, .entryText, .entryItem{ margin-left:4%; }
.entryTitle{ font-size:13px; line-height:1.3; padding:4px 0 4px 3px; }
.entryText{ font-size:11px; line-height:1.8; letter-spacing: 0.07em; padding:8px 0 0 10px; display:flex; flex-direction: column; gap:7px; }
.entryItem{ padding:11px 0 20px 11px; display:flex; }
.entryDate, .entryCat{ color:#A5A28D; line-height:1.5; font-size: 9px; line-height: 1.5; letter-spacing: 0.16em; }

/* info */
.titleSmall{ font-size:9px; line-height:1.5; letter-spacing: 2.25px; padding-bottom:24px; }
.infoText p .en{ letter-spacing: 2.08px; padding-left:0.1em; }
.profileName{ font-size: 15px; line-height: 1.3; padding:0 0 6px; }
.profileName .en{ letter-spacing: 2.72px; padding:0 0.1em 0 0.15em; }

/* footer */
.copyright{ font-size:11px; letter-spacing: 3.3px; width:100%; }
.copyrightText{ font-size:9px; line-height:1.6; letter-spacing: 0.63px; }
.copyrightText .en{ font-size:9px; line-height:1.5; letter-spacing: 1.44px; }


/* ------------ max-width ------------------------- */

@media(min-width:815px){
	.entry{ max-width:498px; margin:0 auto;} 
	.footer{max-width:529px;}
	.about .footer{ max-width:100%; }
}

@media(min-width:640px){
	.entryTitle, .entryText, .entryItem{ margin-left:0; }
}

/* only md */
@media screen and (min-width:640px) and ( max-width:989px) {

	.headerFixed{ margin-top:24px; }
	#contents{ padding-top:120px; }
	.entry{ max-width:415px; margin:0 auto; }
	.footer{max-width:446px;}
	.about .footer{ max-width:100%; }

	.entryTitle{ padding:0; }
	.entryText{ padding:15px 0 0 7px; }
	.entryItem{ padding:15px 0 24px 8px; }
	.entryImage{ width:400px; margin:0 auto; }	
	.h1 img { margin-left:10%; max-width:110px; }
	.headerFixed{ max-width:850px; }
}

/* ------------ lg ------------------------- */

@media screen and (min-width:990px){
.imgProfile{width:96px; height:96px;}
.h1 img{ width:160px; height:auto; margin:0px; max-width:160px; }

.headerFixed{ margin-top:48px; }
.Hbtn{ width:80px; height:80px; }

.iconInfo{
width:35px; height:32px; border-width: 0.4px 1.5px; margin-right:0;
transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s;
}

.iconInfo img{
width:21px; height:21px; padding:5px 0;
transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s;
}

.headerBtn{ margin:0; border-right:solid 80px transparent; padding:0 12px 0 0; }

.overlay .about { height: 100%; }

#contents{ padding-top:78px;}

/* entry */
.entryTitle{ font-size:15px; padding:0; }
.entryText{ font-size:13px; gap:7px; padding:15px 0 0 7px; }
.entryItem{ padding:15px 0 24px 8px; }
.entryDate, .entryCat{ font-size: 11px; }
.entryImage{ width:480px; margin:0 auto; }

/* info */
.titleSmall{ font-size:10px; }
.overlay .about3{ font-size:13px; }
.profileName{ font-size: 16px; }

/* footer */
.copyright{ font-size:13px; }
.copyrightText{ font-size:11px; }
.copyrightText .en{ font-size:11px; }

.header{ z-index:1; }
.entry{ z-index:999; }

}

/* only pc */
@media screen and (min-device-width:1440px) and (min-width:990px) {
	
	.Hbtn:hover .iconInfo{
	width:54px; height:48px;
	transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s;
	}
	.Hbtn:hover .iconClose{
	background-color:#262E2A;
	border-color:#262E2A;
	}

	.Hbtn:hover .iconInfo img{
	width:22px; height:22px; padding:0;
	transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s;
	}
	
	.snsItem a:hover{ opacity:1; transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s; }

	.entryText a:hover.blank{ transition:all 0.25s ease-in; text-decoration-color:#414036; }
	.entryLink a:hover.btn{
	text-decoration:none; transition:all 0.25s ease-in;
	background:#414036; color:#FCFAF4; border-color:#414036;
}

}

/* only sp */
@media screen and (max-width:639px){
	.h1 img{ max-width:100%; }
	.headerBtn{ width:25%; }

.Hbtn{
	aspect-ratio: 1 / 1 !important; width:64% !important; height:auto;
	padding:0;
	margin-left:37%;
}

.iconInfo{
	width: 43.34% !important; height: 40% !important;
	padding:0 !important;
}

.iconInfo img{
	width:61.54% !important; height:auto;
	max-width:100%;
}
}