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

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
#root,
#__next {
  isolation: isolate;
}

/* base design --------------------------------------------*/

:root {
  --main-font-family:
    "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Arial", "Segoe UI", "Meiryo", sans-serif;

  /* ページ横幅の設定 */
  --content-width: 900px;

  /* SNS Icon 汎用アイコンの色設定 */
  --eic-basic-color: var(--main-text-color);

  /* レイアウト間のスキマ設定 */
  --margin-nallow: 1rem;
  --margin-wide: 3rem;
}

html {
  font-size: 12px;
}
body {
  background: var(--main-bg-design);
  color: var(--main-text-color);
  font-family: var(--main-font-family);
  font-feature-settings: "palt" 1;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.8;
  margin: 0 5vw;
  word-break: break-all;
}

h1 {
  font-size: 1rem;
}
p {
  margin-bottom: 1.5em;
}
ul,
ol {
  margin-bottom: 1.5em;
  padding-left: 1.3rem;
}
p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
details summary {
  font-weight: bold;
  line-height: 1.3;
  cursor: pointer;
}
details[open] summary {
  margin-bottom: 1rem;
}
hr {
  margin: var(--margin-wide) 0;
  border-top: 1px dashed var(--main-text-color);
  border-bottom: none;
  height: 0px;
  clear: both;
}
section hr,
details hr {
  margin: 1.5em 0;
}
a {
  color: var(--main-text-color);
  font-weight: bold;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}
em {
  font-style: normal;
  font-weight: bold;
  margin: 0 0.2em;
  padding: 0 0.2em;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, var(--accent2) 50%);
}

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

header.prof {
  margin: 0 auto 2rem;
  max-width: var(--content-width);
  text-align: center;
}
header.prof img {
  display: block;
  margin: 0 0;
  object-fit: cover;
}
header.prof .vi {
  aspect-ratio: 4 / 1;
  margin-bottom: -60px;
}
header.prof img.vi {
  object-position: top;
  width: 100%;
}
header.prof div.vi {
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--sub-bg-color2) 0,
    var(--sub-bg-color2) 1px,
    #0000 0,
    #0000 50%
  );
}
header.prof img.icon {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 20px auto 1rem;
  width: 80px;
}
header.prof h1 {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0;
}

/* main --------------------------------------------*/

main.prof {
  margin: 0 auto;
  max-width: var(--content-width);
  text-align: left;
}
main.prof .grid section {
  background-color: var(--sub-bg-color2);
  padding: 1em 1.6em 1em;
}
main.prof > section,
main.prof > details {
  background-color: var(--sub-bg-color2);
  margin-bottom: var(--margin-wide);
  padding: 1em 1.6em 1em;
}
main.prof > h1 {
  margin-bottom: 0.5rem;
}
main.prof section h1:first-child {
  margin: -1.9rem 0 0.5rem;
}

main.prof div.linklist a {
  background-color: var(--sub-bg-color2);
  display: block;
  font-size: 0.85rem;
  margin-bottom: 5px;
  padding-left: 0.8rem;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}
main.prof div.linklist a:last-child {
  margin-bottom: 0px;
}
main.prof div.linklist span {
  vertical-align: middle;
}
main.prof div.linklist img {
  vertical-align: middle;
  margin: 12px;
  width: 26px;
  height: 26px;
}
main.prof div.linklist i {
  display: inline-block;
  font-size: 26px;
  font-style: normal;
  height: 26px;
  line-height: 23px;
  margin: 12px;
  vertical-align: middle;
  text-align: center;
  width: 26px;
}
main.prof div.linklist.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 5px;
  margin-bottom: var(--margin-wide);
}
main.prof .grid div.linklist.row {
  margin-bottom: 0;
}
main.prof div.linklist.row a {
  margin-bottom: 0;
  padding: 5px;
  flex-grow: 1;
  text-align: center;
}
main.prof div.linklist.row small {
  display: block;
  padding-bottom: 1em;
}
main.prof div.linklist.row.large {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
main.prof div.linklist.row.large i {
  font-size: 40px;
  height: 46px;
  line-height: 40px;
  margin: 12px;
  width: 46px;
}
main.prof div.linklist.row.large img {
  margin: 16px;
  width: 38px;
  height: 38px;
}
main.prof div.linklist.row.panel {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
main.prof div.linklist.panel a {
  padding: 0.5em 1.5em;
}
main.prof .linkcards a {
  background-color: var(--sub-bg-color2);
  display: block;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}
main.prof .linkcards.nogrid a {
  margin-bottom: var(--margin-nallow);
}
main.prof .linkcards.nogrid a:last-child {
  margin-bottom: 0;
}
main.prof .linkcards h1 {
  padding: 1rem 1.6rem 0;
}
main.prof .linkcards p {
  font-size: 0.85rem;
  font-weight: normal;
  line-height: 1.4;
  padding: 0.8em 1.2em;
}

main.prof .linklist a:hover,
main.prof .linkcards a:hover {
  background-color: var(--sub-bg-color);
}
main.prof dl.gridlist {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 2rem;
  margin-bottom: 1.5em;
}
main.prof dl.gridlist:last-child {
  margin-bottom: 0;
}
main.prof dl.gridlist img {
  margin-top: 5px;
}
main.prof dl.gridlist.dtb dt {
  font-weight: bold;
}
main.prof > *:last-child {
  margin-bottom: 0;
}

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

footer {
  margin: 0 auto;
  max-width: 900px;
  padding: 100px 0;
  text-align: center;
}

/* named parts --------------------------------------------*/

.accent {
  color: var(--accent);
}
.notice {
  color: #c00;
}
a.btn {
  background-color: var(--accent);
  color: var(--sub-bg-color);
  display: inline-block;
  font-weight: bold;
  font-size: 0.9rem;
  margin: 0 0 5px 0;
  padding: 0.1em 0.6em 0.2em;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out;
}
a.btn:hover {
  opacity: 0.5;
}
.mt0 {
  margin-top: 0 !important;
}
.mt05 {
  margin-top: 0.5rem !important;
}
.mt1 {
  margin-top: 1rem !important;
}
.mt2 {
  margin-top: 2rem !important;
}

.mb0 {
  margin-bottom: 0 !important;
}
.mb05 {
  margin-bottom: 0.5rem !important;
}
.mb1 {
  margin-bottom: 1rem !important;
}
.mb2 {
  margin-bottom: 2rem !important;
}
.mb3 {
  margin-bottom: 3rem !important;
}
.mb4 {
  margin-bottom: 4rem !important;
}

.mbnallow {
  margin-bottom: var(--margin-nallow) !important;
}
.mbwide {
  margin-bottom: var(--margin-wide) !important;
}

.small {
  font-size: 0.85rem;
}
.normal {
  font-size: 1rem;
}
.center {
  text-align: center;
}
.square img {
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  object-position: top;
  width: 100%;
}
.ogp img {
  aspect-ratio: 1.91 / 1;
  display: block;
  object-fit: cover;
  object-position: top;
  width: 100%;
}
img.emoji {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin: 0 3px 3px;
}
.accentbg,
main.prof div.linklist a.accentbg,
main.prof .grid section.accentbg,
main.prof > *.accentbg {
  background-color: var(--accent2);
}
.grid {
  display: grid;
  gap: var(--margin-nallow);
  margin-bottom: var(--margin-wide);
}
.grid2 {
  grid-template-columns: 1fr 1fr;
}
.grid2-1,
.grid1-2,
.grid3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid1-2 > *:first-child {
  grid-area: 1 / 1 / 2 / 2;
}
.grid1-2 > *:last-child {
  grid-area: 1 / 2 / 2 / 4;
}
.grid2-1 > *:first-child {
  grid-area: 1 / 1 / 2 / 3;
}
.grid2-1 > *:last-child {
  grid-area: 1 / 3 / 2 / 4;
}

/* responsive --------------------------------------------*/

@media (max-width: 900px) {
  .grid3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  .grid4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  body {
    font-size: 0.95rem;
    margin: 0 0;
  }
  header.prof .vi {
    aspect-ratio: 3 / 1;
  }
  main.prof {
    margin: 0 5vw;
  }
  br.mini {
    display: inline;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: var(--margin-wide);
  }
  .grid > *:first-child,
  .grid > *:last-child {
    grid-area: unset;
  }
  .grid4 {
    grid-template-columns: 1fr 1fr;
  }
  .linkcards {
    gap: var(--margin-nallow);
  }
  main.prof div.linklist.panel a {
    text-align: left;
  }
  main.prof div.linklist.panel small {
    display: inline-block;
    font-size: 0.85rem;
    vertical-align: middle;
    padding-bottom: 0;
    text-align: left;
  }
}