/* 全体 %%%%%%%% */
:root {
	--hsl--white: 0, 0%, 100%;

	--color--text-default: hsla( 0, 0%, 0%, 0.9 );

	--shadow--1:
		0 1px 1.5px 0 hsla( 0, 0%, 0%, 0.12 ),
		0 1px 1px 0 hsla( 0, 0%, 0%, 0.24 );

	--shadow--2:
		0 2px 2px 0 hsla( 0, 0%, 0%, 0.14),
		0 3px 1px -2px hsla( 0, 0%, 0%, 0.2),
		0 1px 5px 0 hsla( 0, 0%, 0%, 0.12);

	--shadow--3:
		0 4px 5px 0 hsla( 0, 0%, 0%, 0.14),
		0 1px 10px 0 hsla( 0, 0%, 0%, 0.12),
		0 2px 4px -1px hsla( 0, 0%, 0%, 0.2);

	--shadow--4:
		0 6px 10px 0 hsla( 0, 0%, 0%, 0.14),
		0 1px 18px 0 hsla( 0, 0%, 0%, 0.12),
		0 3px 5px -1px hsla( 0, 0%, 0%, 0.2);

	--shadow--5:
		0 8px 10px 1px hsla( 0, 0%, 0%, 0.14),
		0 3px 14px 2px hsla( 0, 0%, 0%, 0.12),
		0 5px 5px -3px hsla( 0, 0%, 0%, 0.2);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

body {
	width: 100%;
  min-height: 100dvh;
  padding-block: 16px 24px;
  padding-inline: clamp( 6px, 1.5svw, 12px );
	display: flex;
  flex-flow: column nowrap;
  justify-content: center;
	align-items: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.03em;
	color: var( --color--text-default );
  background: linear-gradient( 0deg, hsl( 220, 15%, 95% ), hsl( 220, 15%, 100% ) );
}

img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: inline-block;
}

a {
	color: var( --color--text-default );
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
}

b, strong,
thead th {
	font-weight: 400;
}

p {
	margin-block-start: 1em;
}

p:first-child {
	margin-block-start: 0;
}


/* アイコン %%%%%%%% */
.WithIcon::before,
.WithIcon::after {
  font-family: "Material Symbols Outlined";
}


/* ボタン %%%%%%%% */
.Btn {
	cursor: pointer;
  user-select: none;

  &.-pointed {
    opacity: 0.75;
  }

  &.-pressed {
    opacity:0.75;
    mix-blend-mode: screen;
  }
}


/* サイト本体 %%%%%%%% */
.SiteBody {
	width: min( 640px, 100% );
  border-radius: 16px;
  overflow: hidden;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
  background: hsl( 220, 15%, 85% );
  box-shadow: var( --shadow--2 );

  header {
    width: 100%;
    height: 10em;
    position: relative;
    font-size: clamp( 12px, 3.75svw, 24px );

    h1 {
      width: 100%;
      padding-block: 0.1em 0.15em;
      padding-inline: 0.2em;
      position: absolute;
      bottom: 0.8em;
      background: hsla( var( --hsl--white ), 0.7 );
      font-size: 0.95em;
      font-weight: 500;
      letter-spacing: 0.25em;
      color: hsla( 220, 15%, 15%, 0.8 );
      text-align: center;
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }
}


/* リンク集 %%%%%%%% */
.ServiceList {
  width: 100%;
  padding-block: 16px 20px;
  padding-inline: clamp( 6px, 1.5svw, 12px );
  display: grid;
  grid-template-columns: repeat( 6, 1fr );
  grid-auto-rows: max-content;
  gap: 14px clamp( 4px, 1.5svw, 8px );
  font-size: clamp( 12px, 3svw, 16px );
  text-align: center;

  > * {
    display: block;
  }

  > h2 {
    padding-block: 0.5em 0.2em;
    font-size: 1em;
    font-weight: 400;
  }

  .Link {
    width: 100%;
    border-radius: 12px;
    border: 1px solid hsl( 220, 15%, 75% );
    overflow: hidden;
    background: hsl( var( --hsl--white ) );
    color: hsl( var( --hsl--white ) );
    text-decoration: none;

    h2 {
      padding: 0.3em;
      background: hsl( 205, 100%, 50% );
      font-size: 1em;
      font-weight: 400;
    }

    img {
      width: calc( 100% - 0.1em );
      max-height: clamp( 80px, 25svw, 140px );
      margin-block: 0.1em;
      display: block;
    }

    &.GridItem_x3,
    &.GridItem_x6 {
      padding-block: 0 1%;
    }
  }

  .GridItem_x1 {
    padding: 1%;
    border-radius: 50%;
    grid-column: span 1;
  }

  .GridItem_x3 {
    grid-column: span 3;
  }

  .GridItem_x6 {
    grid-column: span 6;
  }
}