@charset "utf-8";

/* 
#メインヴィジュアル
#メッセージ
#セクション共通
#skills
#works
#profile
#ブログ
*/


/* #メインヴィジュアル */
.mv__wrapper {
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: clamp(530px, 70vh, 950px);
}

.mv__content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: clamp(300px, 86.111111111vw, 600px);
	margin: 0 auto;
	padding: clamp(70px, .2vw, 94px) 0 65px;
}

.mv__bg {
	background-image: url(../img/mv-background-min.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.mv__img--text {
	width: 240px;
}

.mv__img--anime {
	width: 200px;
}

.scroll-wrapper {
	position: absolute;
	bottom: 0;
	left: 50%;
	background-color: rgba(255,255,255,0);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	transform: translate(-50%, 50%);
}

.scroll-wrapper img {
	position: relative;
	width: 68px;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
}

@media screen and (min-width:600px) {
	.scroll-wrapper {background-color: #fff;}
}

@media screen and (min-width:800px) {

	/*ver.2.0*/
	/*.mv__wrapper{padding: clamp(42px,.5vw,158px) 0 clamp(41px,9.3vw,150px);}*/
	.mv {
		margin-bottom: clamp(70px, 8.75vw, 140px);
	}

	.mv__content-wrapper {
		width: clamp(743px, 75vw, 1200px);
	}

	.mv__img--text {
		width: 358px;
	}

	.mv__img--anime {
		width: 300px;
	}
}


/* #メッセージ */
.message {
	margin-bottom: 100px;
}

.message__wrapper {
	margin: 0 auto;
	max-width: 800px;
	background-color: #F3EEDA;
	padding-top: clamp(30px, 6vw, 40px);
	padding-bottom: clamp(30px, 6vw, 65px);
	box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.1);
}
.message__inner.container--main {
  width: clamp(300px, 86.111111111vw, 700px);
}
.message__inner {
	position: relative;
	background-color: #F9F9F9;
	padding: clamp(35px, 6vw, 50px) clamp(20px, 6vw, 45px) clamp(30px, 6vw, 40px);
}

/*width: clamp(312px,83vw,600px);*/
.background-image--balloon {
	background-image: url(../img/balloon@2x_min.png);
	background-size: 67px 95.5px;
	width: 67px;
	height: 95.5px;
	top: -44px;
	left: -14px;
}

.background-image--moco {
	background-image: url(../img/moco@2x_min.png);
	background-size: 123.5px 87px;
	width: 123.5px;
	height: 87px;
	bottom: -38px;
	right: clamp(0px, -2vw, -20px);
}

.background-image--balloon,
.background-image--moco {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
}

.message__title {
	text-align: center;
	border-bottom: 1px solid #B39371;
	padding-bottom: clamp(16.7px, 3.4vw, 32.7px);
	margin-bottom: clamp(22px, 6vw, 26px);
}

.message__title--inner {
	position: relative;
	width: clamp(244.988px, 52vw, 400px);
	height: clamp(18px, 4vw, 28.8px);
	margin: 0 auto;
}

.message__title--svg {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1;
}

.message__text {
	position: relative;
	z-index: 1;
	font-weight: 400;
	color: #656565;
}

@media screen and (min-width:800px) {
	.message {
		margin-bottom: 200px;
	}

	.message__inner {
		padding: clamp(35px, 6vw, 50px) clamp(20px, 6vw, 45px) clamp(30px, 8vw, 80px);
	}

	.background-image--balloon {
		background-size: 134px 191px;
		width: 137px;
		height: 191px;
		top: -68px;
		left: -26px;
	}

	.background-image--moco {
		background-size: 247px 174px;
		width: 247px;
		height: 174px;
		bottom: -16px;
	}

	.message__title--inner {
		width: 100%;
		max-width: 400px;
	}
}

@media screen and (min-width:1600px) {
	.message {
		margin-top: 100px;
	}
}


/* #セクション共通 */
.sec+.sec {
	margin-top: 150px;
}

.sec__head {
	text-align: center;
	margin-bottom: 24px;
	opacity: 0;
	transform: translateY(24px);
	transition: 1.2s ease;
}

.sec__head.is-show {
	opacity: .9;
	transform: none;
}

/* 下からふわっと */
.animo-card,
.works__work {
	width: 100%;
}

@media screen and (min-width: 800px) {
	.sec+.sec {
		margin-top: 200px;
	}

	.sec-inner--home {
		max-width: 1316px;
	}

	.sec__head {
		overflow: hidden;
		margin-bottom: 60px;
		transform: translateY(80px);
	}

	.title__deco-line-dotted {
		position: relative;
		padding-left: 1.25em;
		padding-right: .75em;
		background-color: #F2F0E8;
	}

	.blogs .title__deco-line-dotted {
		padding-left: .75em;
	}

	.sec .title {
		position: relative;
	}

	.sec .title::before {
		position: absolute;
		bottom: -0.5em;
		left: 0;
		background: radial-gradient(circle farthest-side, #b7b7b6, #b7b7b6 30%, transparent 30%, transparent);
		background-size: 15px 15px;
		background-repeat: repeat-x;
		content: '';
		height: 1em;
		width: 100%;
	}
}


/* #skills */
.animo-cards {
	display: grid;
	gap: 2rem;
}

.skills__animo-card {
	background-color: #F9F9F9;
	border-radius: 10px;
	padding: 20px 10%;
}

.skills__animo-card-head {
	padding-bottom: 20px;
}

.skills__img-wrapper {
	width: 180px;
	height: 180px;
	margin: 0 auto;
}

.skills__animo-card-title {
	font-size: 1.6rem;
	letter-spacing: .1em;
	font-weight: 500;
	padding-top: 1.66666666667em;
	padding-bottom: 1.11111111111em;
}

.animo-card__title {
	text-align: center;
}

@media screen and (min-width: 800px) {
	.animo-cards {
		grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
	}

	.skills__animo-card {
		padding: 30px;
	}

	.skills__img-wrapper {
		width: 200px;
		height: 200px;
	}

	.skills__animo-card-title {
		font-size: 1.8rem;
		letter-spacing: .1em;
		padding-top: 1.11111111111em;
	}
}

@media screen and (min-width: 1200px) {

	/*min-width: 1025pxから変更中*/
	.animo-cards {
		grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
	}
}


/* #works */
.works__works {
	display: grid;
	gap: 2rem;
}
.works .animo-card__body {
	margin-top:10px;
}
.works .animo-card__title {
	font-size:12px;
	color: #515151;
	margin-top: 1px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.animo-btn--more {
	background-color: #E4CCB0;
}

@media screen and (min-width: 800px) {
	.works__works {
		grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
		gap: 1.6rem;
	}
	.works .animo-card__title {
		text-align:left;
	}
}

@media screen and (min-width: 1025px) {
	.works__works {
		grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
	}
	.works .animo-card__title {
		text-align:left;
	}
}


/* #profile */
.profiles__body {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.profiles__profile {
	border-radius: 10px;
	overflow: hidden;
	max-width: 650px;
	margin: 0 auto;
	width:100%;
}

.profile__title {
	text-align: center;
	background-color: #a69b85;
	padding: 1.42857142857em 10%;
	color: #fff;
	letter-spacing: .05em;
}

.profile__body {
	background-color: #F9F9F9;
	padding: 20px 10% 40px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.profile__img-wrapper {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 1px solid #707070;
	margin: 0 auto 20px;
}

.profile__name {
	margin-bottom: 40px;
	;
	text-align: center;
}

.profile__tool-list {
	list-style-type: disc;
	margin-left: 1.5em;
}

.profile__tool-item {
	margin-top: 10px;
}

.profile__details dd {
	padding-left: 0.5em;
}

.profile__details dd+dt {
	margin-top: 1em;
}

@media screen and (min-width: 800px) {
	.profiles__body {
		gap: 4%;
	}

	.profiles__profile {
		flex: 1;
	}

	.profile__body {
		padding: 60px 10% 86px;
	}

	.profile__title {
		letter-spacing: .2em;
	}
}


/* #ブログ */
.blogs__blogs {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.blogs .animo-card__img-wrapper {
	width: 100%;
}

.blogs .animo-card__body {
	margin-top: 10px;
}

.blogs .animo-card__body a {
	text-decoration: underline;
}

.blogs .animo-card__title {
	color: #656565;
	text-align: left;
	margin-top: 1px;
	/* 2行を超える場合は抜粋（4文で1セット） */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	/* 〆 */
}

.link-more-box {
	padding-top: 40px;
}

.link-more-box {
	text-align: right;
}

.link-more-box .link-more {
	display: inline-block;
	line-height: 1;
	transition: .3s ease-in;
	color: #656565;
}

.link-more-box .link-more span {
	text-decoration: underline;
	margin-left: -.4em;
}

.link-more:active,
.link-more:hover {
	color: #b7b7b6;
}

.link-more:active .link-more--chev-right,
.link-more:hover .link-more--chev-right {
	fill: #b7b7b6;
}

@media screen and (min-width:600px) {
	.blogs__blogs {
		gap: 50px;
	}

	.link-more-box {
		padding-top: 60px;
	}
}

@media screen and (min-width:800px) {
	.blogs__blogs {
		flex-direction: row;
		gap: 26px;
	}
}