@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

/* Var */

:root {
	--bg: #f6f6f6;
	--text: #333;
	--link: #51B9B9;
	--hover: #999;
	--em: #f9f9a4;
	--alert: #c92c2c;
	--muted: #999;
	--tooltip: #ff8a9d;
	--selectbg: #333;
	--selecttext: #fff;
	--mainbg: #fff;
	--btn: #fff;
	--btnbg: #79dcdc;
	--fontsize: 16px;
    --lineheight: 2;
	--fontfamily: YuGothic, "Yu Gothic", "ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;
	--fontweight: 400;
    --webfont: "Josefin Sans";
    --webfontweight: 400;
    --webfontweight2: 700;
	--fs-xxl: 2rem;
	--fs-xl: 1.5rem;
	--fs-l: 1.2rem;
	--fs-s: .8rem;
}
:root[data-theme="dark"] {
	--bg: #222;
	--text: #fff;
	--link: #79dcdc;
	--hover: #666;
	--em: #e5d67a;
	--alert: #c92c2c;
	--muted: #999;
	--tooltip: #ff8a9d;
	--selectbg: #eee;
	--selecttext: #333;
}

/* Reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, li, dl, dd {
    margin: 0;
	padding: 0;
}

ul, ol {
    list-style: none;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
}

header, footer, nav, main, article, aside, section {
	display: block;
}

img, picture {
    max-width: 100%;
	height: auto;
    display: block;
}

input, button, textarea, select {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Setting */

html,
body {
	color: var(--text);
	font-size: var(--fontsize);
	line-height: var(--lineheight);
	font-family: var(--webfont) ,var(--fontfamily);
	font-optical-sizing: auto;
	font-weight: var(--fontweight);
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    background: var(--bg);
}

::selection {
	color: var(--selecttext);
	background-color: var(--selectbg);
}

a {
	color: var(--link);
	text-decoration: none;
}

a[target="_blank"] {
	&::after {
		margin-left: 4px;
		content: '';
		display: inline-block;
		width: 16px;
		height: 16px;
		mask-image: url('./../img/newtab.svg');
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		background-color: var(--link);
	}
	&.c-btn::after {
		background-color: var(--btn);
	}
}

@media (any-hover: hover) {
	a,
	a::before,
	a::after {
        transition: all 0.2s;
	}
    a:hover {
        color: var(--hover);
        transition-duration: 0.2s;
    }
	a[target="_blank"]:hover::after {
		background-color: var(--hover);
	}
	a[target="_blank"].c-btn:hover::after {
		background-color: var(--btn);
	}
}

/* Layout */

.l-wrap {
	margin: 48px auto;
	width: calc(100% - 48px);
	max-width: 720px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
	background: var(--mainbg);
}

.l-header {
	margin-bottom: 30px;
	.mv {
		img {
			width: 100%;
			height: 128px;
			object-fit: cover;
		}
	}
	.icon {
		margin: -48px 0 0 24px;
		width: 96px;
		height: 96px;
		img {
			width: 100%;
			height: 100%;
			border-radius: 48px;
			border: solid 1px #eee;
		}
	}
	.name {
		margin: -48px 0 0 144px;
		font-size: 1.5rem;
		font-family: var(--webfont);
		font-weight: var(--webfontweight2);
		letter-spacing: 2px;
	}
}

.l-main {
	padding: 24px;
}

/* Components */

.c-ttl {
	font-size: 1.2rem;
	font-family: var(--webfont);
	font-weight: var(--webfontweight2);
	letter-spacing: 2px;
}

.c-linklist {
	li {
		margin: 0 2px;
		font-size: 1.2rem;
		a {
			padding: 6px 8px 4px;
			color: var(--btn);
			background-color: var(--btnbg);
			border-radius: 8px;
		}
		span {
			font-size: .8rem;
		}
	}
}

@media (any-hover: hover) {
	.c-linklist {
		li {
			a {
				&:hover {
					background-color: var(--hover);
				}
			}
		}
	}
}

/* Utilities */

.u-mt-8 {
	margin-top: 8px;
}

.u-mt-12 {
	margin-top: 12px;
}

.u-mt-16 {
	margin-top: 16px;
}

.u-mt-20 {
	margin-top: 20px;
}

.u-mt-24 {
	margin-top: 24px;
}

.u-mr-8 {
	margin-right: 8px;
}

.u-mr-12 {
	margin-right: 12px;
}

.u-mr-16 {
	margin-right: 16px;
}

.u-mr-20 {
	margin-right: 20px;
}

.u-mr-24 {
	margin-right: 24px;
}

.u-mb-8 {
	margin-bottom: 8px;
}

.u-mb-12 {
	margin-bottom: 12px;
}

.u-mb-16 {
	margin-bottom: 16px;
}

.u-mb-20 {
	margin-bottom: 20px;
}

.u-mb-24 {
	margin-bottom: 24px;
}

.u-ml-8 {
	margin-left: 8px;
}

.u-ml-12 {
	margin-left: 12px;
}

.u-ml-16 {
	margin-left: 16px;
}

.u-ml-20 {
	margin-left: 20px;
}

.u-ml-24 {
	margin-left: 24px;
}

.u-fc-muted {
	color: var(--muted);
}

.u-fc-alert {
	color: var(--alert);
}

.u-fs-xxl {
	font-size: var(--fs-xxl);
}

.u-fs-xl {
	font-size: var(--fs-xl);
}

.u-fs-l {
	font-size: var(--fs-l);
}

.u-fs-s {
	font-size: var(--fs-s);
}

/* Keyframes */



/* Media */

@media (768px <= width <= 960px) {
}

@media (960px < width) {
	.l-header {
		.icon {
			margin: -64px 0 0 32px;
			width: 128px;
			height: 128px;
			img {
				border-radius: 64px;
			}
		}
		.name {
			margin: -64px 0 0 192px;
		}
	}
}