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

/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; font-weight: 400; font-size: 62.5%; color: #000;}
body{ height: 100%; margin: 0; padding: 0; font-family: 'Zen Maru Gothic', sans-serif; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%;  -webkit-font-feature-settings: "palt"; font-feature-settings: "palt";}
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
a{ color: inherit; outline: none; text-decoration: none; }
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: inherit; }
p{ margin: 0; padding: 0;}
ul, ol, dl, dt, dd{ margin: 0; padding: 0;}
li{ margin: 0; padding: 0; list-style: none;}
form{ margin: 0; padding: 0;}
input, textarea, select, button{ font-family: inherit; appearance: none; outline: none; box-sizing: border-box; border: none; }
/*input, textarea, select { font-size:inherit; font-weight:inherit; display: inline-block !important; }*/
button{ font-size: inherit; cursor: pointer;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
figure{ margin: 0; padding: 0;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}



/*************************************************************************************************************************
* common
*************************************************************************************************************************/
body{ background: #F4F4EE;}
body#portfolio{ background: #D9E021!important;}
body#about{ background: #F38796!important;}
.next-page__works{ width: 100vw; height: 100svh; border: none; position: fixed; left: 100vw; top: 0; z-index: 999; animation: slidePortfolio .6s linear .2s forwards;}
.next-page-illust__works{ width: calc(100svh*1.021); height: 100svh; background: url("../img/page_portfolio.svg") no-repeat; position: fixed; left: 100vw; top: 0; z-index: 1000; animation: slidePortfolioIllust 1s linear forwards;}
@keyframes slidePortfolio{
	0% {
		left: 100vw;
	}
	100% {
		left: 0px;
	}
}
@keyframes slidePortfolioIllust{
	0% {
		left: 100vw;
	}
	100% {
		left: calc(100svh*-1.021);
	}
}
.next-page__about{ width: 100vw; height: 100svh; border: none; position: fixed; left: 0; top: 100svh; z-index: 999; animation: slideAbout .5s linear .5s forwards;}
.next-page-illust__about{ width: calc((100svh + 50px)*0.4); height: calc(100svh + 50px); background: url("../img/page_about.svg") no-repeat; position: fixed; left: 50%; top: -100svh; z-index: 1000; transform: translateX(-50%); animation: slideAboutIllust 1s linear forwards;}
@keyframes slideAbout{
	0% {
		top: 100svh;
	}
	100% {
		top: 0px;
	}
}
@keyframes slideAboutIllust{
	0% {
		top: -100svh;
	}
	50% {
		top: 0;
	}
	100% {
		top: -100svh;
	}
}


/*************************************************************************************************************************
* header
*************************************************************************************************************************/
header{ width: 100%; height: 65px; position: fixed; top: 0; left: 0; z-index: 100;}
.header__logo{ width: 64px; height: 22px; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10;}
.header__logo img{ filter: invert(18%) sepia(9%) saturate(10%) hue-rotate(337deg) brightness(100%) contrast(93%); transition: all .3s ease-out;}
.menu-open .header__logo img{ filter: invert(88%) sepia(100%) saturate(0%) hue-rotate(290deg) brightness(107%) contrast(105%);}
.header__menubtn{ width: 65px; height: 65px; position: absolute; top: 0px; right: 0px; z-index: 11;}
.header__menubtn span,
.header__menubtn span::before,
.header__menubtn span::after{ width: 20px; height: 2px; border-radius: 1px; background: #333333; position: absolute; left: 50%; transform: translateX(-50%); transition: all .3s ease-out;}
.header__menubtn span{ top: 31px;}
.header__menubtn span::before{ content: ""; top: -7px;}
.header__menubtn span::after{ content: ""; top: 7px;}
.menu-open .header__menubtn span{ background: #004E96;}
.menu-open .header__menubtn span::before{ width: 22px; background: #FFFFFF; left: calc(50% - 11px); top: 0px; transform: rotate(315deg);}
.menu-open .header__menubtn span::after{ width: 22px; background: #FFFFFF; left: calc(50% - 11px); top: 0px; transform: rotate(45deg);}
.header-nav{ width: 100%; background: #004E96; position: absolute; left: 0; top :-450px; z-index: 1; transition: all 1s cubic-bezier(0.23,1,0.32,1);}
.menu-open .header-nav{ top :0px;}
.header-nav__menu{ padding: 90px 24px 0 24px;}
.header-nav__menu__item{ display: flex; margin: 0 0 22px 0; align-items: center; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 3.0rem; line-height: 1; letter-spacing: 1px;}
.header-nav__menu__item a{ color: #FFFFFF;}
.header-nav__menu__item::before{ content: ""; display: inline-block; width: 20px; height: 20px; margin: 0 5px 0 0; background: url("../img/list_mark.svg") no-repeat;}
.header-nav__sns{ display: flex; justify-content: space-between; width: 160px; margin: 30px auto 0 auto; padding: 0 0 60px 0;}
.header-nav__sns__item{ width: 36px; height: 36px;}
.header-nav__sns__item a img{ filter: invert(88%) sepia(100%) saturate(0%) hue-rotate(290deg) brightness(107%) contrast(105%);}
.header-illust{ width: 60px; height: 70px; position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%);}
.footer-nav{ width: 100%; height: 55px; position: fixed; bottom: 0; left: 0;}
.footer-nav__menu{ display: flex; border-top: 1px solid #FFFFFF;}
.footer-nav__menu__item{ width: 100%; height: 55px; border-right: 1px solid #FFFFFF;}
.footer-nav__menu__item:last-child{ border: none;}
.footer-nav__menu__item a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: 1px; text-align: center; color: #FFFFFF;}
.footer-nav__menu__item .works{ background: #D9E021;}
.footer-nav__menu__item .about{ background: #F38796;}
.footer-nav__menu__item .contact{ background: #40BCB8;}
@media print, screen and (min-width: 681px){
	header{ height: 100px;}
	.header__logo{ width: 79px; height: 27px; top: 50%; left: 45px; transform: translate(0,-50%);}
	.header__menubtn{ display: none;}
	.header-nav{ display: flex; align-items: center; width: auto; height: 100px; background: none; left: auto; right: 45px; top: 0;}
	.header-nav__menu{ display: flex; padding: 0;}
	.header-nav__menu__item{ margin: 0 50px 0 0; font-size: 1.5rem;}
	.header-nav__menu__item a{ color: #333333;}
	.header-nav__menu__item::before{ display: none;}
	.header-nav__sns{ width: 160px; margin: 0; padding: 0;}
	.header-nav__sns__item{ width: 25px; height: 25px;}
	.header-nav__sns__item a img{ filter: invert(13%) sepia(68%) saturate(0%) hue-rotate(219deg) brightness(104%) contrast(87%);}
	.header-illust{ display: none;}
	.footer-nav{ display: none;}
}


/*************************************************************************************************************************
* Contact Button
*************************************************************************************************************************/
.contact-btn{ display: none;}
@media print, screen and (min-width: 681px){
	.contact-btn{ display: block; width: 130px; height: 130px; position: fixed; right: 30px; bottom: 30px; z-index: 99;}
	.contact-btn__link{ display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; border-radius: 65px; background: #A8D8DB; position: relative; z-index: 10;}
	.contact-btn__link img{ width: 39px; height: 27px; pointer-events: none;}
	.contact-btn__chara{ width: 130px; height: 130px; position: absolute; left: 0px; top: 0px; z-index: 11; transform: rotate(0deg); animation: contactBtnMessage 20s linear infinite; pointer-events: none;}
	.contact-btn::before{ display: block; content: ""; width: 130px; height: 130px; border-radius: 65px; background: #333333; position: absolute; left: 0px; top: 0px; z-index: 8; transition: all .5s cubic-bezier(0.23,1,0.32,1);}
	.hover.contact-btn::before{ left: -30px;}
	.contact-btn::after{ display: block; content: ""; width: 135px; height: 180px; position: absolute; left: 0px; bottom: 0px; z-index: 9; transform: rotate(0deg); opacity: 0; transition: all .5s cubic-bezier(0.23,1,0.32,1);}
	.contact-btn.illust1::after{ background: url("../img/contact_illust1.svg") no-repeat;}
	.contact-btn.illust2::after{ background: url("../img/contact_illust2.svg") no-repeat;}
	.contact-btn.illust3::after{ background: url("../img/contact_illust3.svg") no-repeat;}
	.hover.contact-btn.illust1::after{ left: -100px; bottom: -10px; transform: rotate(-15deg); opacity: 1;}
	.hover.contact-btn.illust2::after{ left: -90px; bottom: -5px; transform: rotate(0deg); opacity: 1;}
	.hover.contact-btn.illust3::after{ left: -100px; bottom: -5px; transform: rotate(-15deg); opacity: 1;}
}
@keyframes contactBtnMessage{
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


/*************************************************************************************************************************
* contact
*************************************************************************************************************************/
.contact__wrap{ display: none; width: 100vw; height: 100svh; background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; opacity: 0; z-index: 1000000; opacity: 0;}
.contact__wrap.open{ display: block; animation: contactOpen .5s linear forwards;}
.contact__contents{ width: calc(100% - 40px); height: 470px; padding: 30px 0; background: #40BCB8 url("../img/chara_contact.svg") no-repeat right bottom; border-radius: 10px; position: absolute; top: -50%; left: 50%; transform: translate(-50%,-50%);}
.contact__contents.open{ animation: contactSlide .7s cubic-bezier(0.68,-0.55,0.27,1.55) forwards;}
.contact__contents-title{ padding: 0px 0px 15px 0; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: 1px; text-align: center; color: #FFFFFF;}
.contact__contents__box{ display: flex; flex-wrap: wrap; width: calc(100% - 80px); margin: 0 auto;}
.contact__contents__box-title{ width: 100%; margin: 0 0 7px 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 500; font-size: 1.3rem; line-height: 1; color: #FFFFFF;}
.contact__contents__box-text{ width: 100%; margin: 0 0 13px 0;}
.contact__contents__box-text p{ padding: 11px 0 12px 6px; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 1.4;}
.contact__contents__box-text.contents-preview p{ height: 150px; overflow-y: scroll;}
.contact__contents__box-text.hidden{ display: none;}
.contact-txtbox{ width: 100%; height: 40px; padding: 0 5px; border-radius: 3px;}
.contact-txtarea{ width: 100%; height: 150px; padding: 5px; border-radius: 3px;}
.contact__contents__btn{ display: flex; justify-content: center; align-items: center;}
.contact__contents__btn-item:nth-child(2){ margin: 0 15px 0 0;}
.contact__contents__btn-link{ display: flex; justify-content: center; align-items: center; width: 120px; height: 43px; background: #FDF857; border-radius: 2px; border-bottom: 4px solid rgba(0,0,0,.5); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 500; font-size: 1.3rem; line-height: 1; color: #28938E; position: relative; z-index: 2;}
.contact__contents__btn-link.disable{ background: #CCCCCC; border-bottom: 4px solid rgba(0,0,0,.2); color: #999999; pointer-events: none;}
.back .contact__contents__btn-link{ background: #CCCCCC; border-bottom: 4px solid rgba(0,0,0,.2); color: #666666;}
.hidden .contact__contents__btn-link{ display: none;}
.contact__contents__thanks{ width: 100%; height: 100%; position: relative; overflow: hidden; display: none;}
.contact__contents__thanks-neko{ width: 180px; height: 180px; position: absolute; left: calc(100vw + 180px); top: calc(50% - 30px); transform: translateY(-50%);}
.contact__contents__thanks-text{ width: 110px; height: 30px; position: absolute; left: 50%; top: calc(50% - 30px); transform: translate(-50%,-50%);}
.contact__contents__thanks.open{ display: block;}
.contact__contents__thanks.open .contact__contents__thanks-neko{ animation: contactThanksNekoSP 2s linear forwards;}
.contact__contents__thanks.open .contact__contents__thanks-text{ animation: contactThanksText .5s linear 1.6s forwards; opacity: 0;}
.contact__contents-close{ display: block;  width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.contact__contents-close::before,
.contact__contents-close::after { content: ""; width: 3px; width: 3px; height: 20px; background: #FFFFFF; position: absolute; top: 50%; left: 50%;}
.contact__contents-close::before { transform: translate(-50%,-50%) rotate(45deg);}
.contact__contents-close::after { transform: translate(-50%,-50%) rotate(-45deg);}
@media print, screen and (min-width: 681px){
	.contact__contents{ width: 900px; height: 640px; padding: 40px 0;}
	.contact__contents-title{ padding: 0px 0px 30px 0; font-size: 2.0rem;}
	.contact__contents__box{ width: 600px;}
	.contact__contents__box-title{ display: flex; justify-content: flex-end; align-items: center; width: 120px; margin: 0 20px 27px 0; font-size: 1.4rem;}
	.contact__contents__box-text{ width: 460px; margin: 0 0 27px 0; font-size: 1.4rem;}
	.contact__contents__box-text p{ padding: 15px 0 16px 20px; font-size: 1.4rem;}
	.contact__contents__box-text.contents-preview p{ height: 250px;}
	.contact-txtbox{ height: 55px; padding: 0 10px;}
	.contact-txtarea{ height: 250px; padding: 10px;}
	.contact__contents__btn-link{ width: 170px; height: 55px; font-size: 1.4rem;}
	.contact__contents__box-text.name-preview{ border-left: 1px solid #FFFFFF;}
	.contact__contents__box-text.mail-preview{ border-left: 1px solid #FFFFFF;}
	.contact__contents__box-text.contents-preview{ border-left: 1px solid #FFFFFF;}
	.contact__contents__thanks-neko{ width: 220px; height: 220px; left: calc(100vw + 220px); top: calc(50% - 50px);}
	.contact__contents__thanks-text{ width: 253px; height: 65px; top: calc(50% - 50px);}
	.contact__contents__thanks.open .contact__contents__thanks-neko{ animation: contactThanksNekoPC 2s linear forwards;}
	.contact__contents-close{ top: 20px; right: 20px;}
}
@keyframes contactOpen{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes contactSlide{
	0% {
		top: -50%;
	}
	100% {
		top: 50%;
	}
}
@keyframes contactThanksNekoSP{
	0% {
		left: calc(100vw + 120px);
	}
	100% {
		left: -190px;
	}
}
@keyframes contactThanksNekoPC{
	0% {
		left: calc(100vw + 160px);
	}
	100% {
		left: -230px;
	}
}
@keyframes contactThanksText{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*************************************************************************************************************************
* Objective Fit Image
*************************************************************************************************************************/
.ofi-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover';
}

.ofi-contain {
	width: 100%;
	height: 100%;
	object-fit: contain;
	font-family: 'object-fit: contain';
}