@charset "UTF-8";

/* Common ====================================== */

/* box-sizing を border-box に統一（レイアウト崩れを減らす） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: sans-serif;
  line-height: 1.5;
  tab-size: 4;
}

body {
  margin: 0;
  min-height: 100vh;
}

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

/* フォーカスリングはキーボード操作のときだけ見せる */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

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

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a, a:visited {text-decoration: none;}

a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor: pointer;
  color: inherit;
}
button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  appearance: button;
  -webkit-appearance: button;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

/* disabled はカーソルを戻す（見た目は各プロジェクト側で） */
:disabled {
  cursor: not-allowed;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {cursor: pointer;}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

h1, .h1 {font-size: 2.5rem;}
h2, .h2 {font-size: 2rem;}
h3, .h3 {font-size: 1.75rem;}
h4, .h4 {font-size: 1.5rem;}
h5, .h5 {font-size: 1.25rem;}
h6, .h6 {font-size: 1rem;}

.no-resize {resize: none;}
.font-bold {font-weight: bold;}
.font-italic {font-style: italic;}
.font-underline {text-decoration: underline;}
.font-line-through {text-decoration: line-through;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

/* width utilities（必要最小限） */
.w-100 {width: 100% !important;}
.w-auto {width: auto !important;}

/* height utilities（%指定は誤用されやすいので削除） */
.h-auto {height: auto !important;}

.is-hide {display: none !important;}

.invisible {
  transition: opacity 0.5s ease;
  opacity: 0.0;
}
.visible {
  transition: opacity 0.5s ease;
  opacity: 1.0;
}

.pc {display: block;}
.sp {display: none;}

@media screen and (max-width: 768px){
  .pc {display: none;}
  .sp {display: block;}
}

/***** card *****/

.card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.card2 {
  flex-basis: calc((100% - 10px) / 2);
  max-width: calc((100% - 10px) / 2);
}
.card3 {
  flex-basis: calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
}
.card4 {
  flex-basis: calc((100% - 30px) / 4);
  max-width: calc((100% - 30px) / 4);
}
.card5 {
  flex-basis: calc((100% - 40px) / 5);
  max-width: calc((100% - 40px) / 5);
}

/***** dl table *****/

dl.table {
  border-top: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
  display: flex;
  flex-wrap: wrap;
}
dl.table dt,
dl.table dd {
  border-bottom: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  box-sizing: border-box;
  padding: 15px;
}
dl.table dt {
  width: 200px;
}
dl.table dd {
  width: calc(100% - 200px);
}

/***** flex *****/

.flex {
  display: flex;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}

/***** grid *****/

.grid {
  display: grid;
  gap: 16px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/***** breadcrumb *****/

ol.breadcrumb_lists {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #808080;
  padding: 0 10px;
}
ol.breadcrumb_lists a {
  color: #808080;
}

/***** form *****/

input[type=text], input[type=email], input[type=tel], select {
  min-height: 35px;
  border: 1px solid #A5A5A5;
  border-radius: 3px;
  padding: 5px 5px;
}
textarea {
  min-height: 100px;
  border: 1px solid #A5A5A5;
  border-radius: 3px;
  padding: 5px;
  resize: vertical;
  display: block;
}
input:disabled,
textarea:disabled,
input:read-only,
textarea:read-only {
  background: #DEDEDE;
  color: #A5A5A5;
}
.file-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.upload-label {
  cursor: pointer;
  padding: 5px;
  background: #fff;
  color: #A5A5A5;
  border-radius: 3px;
  border: 1px solid #A5A5A5;
  width: 150px;
  text-align: center;
}
.required {
  background: #e8373d;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
}
.optional {
  background: #17a3a9;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
}

/* Spacing utilities ====================================== */

:root {
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
}

.m-0 { margin: var(--space-0) !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.mt-0 { margin-top: var(--space-0) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mr-0 { margin-right: var(--space-0) !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.ml-0 { margin-left: var(--space-0) !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-8 { margin-left: var(--space-8) !important; }

.p-0 { padding: var(--space-0) !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }
.pt-0 { padding-top: var(--space-0) !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pr-0 { padding-right: var(--space-0) !important; }
.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-6 { padding-right: var(--space-6) !important; }
.pr-8 { padding-right: var(--space-8) !important; }
.pb-0 { padding-bottom: var(--space-0) !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pl-0 { padding-left: var(--space-0) !important; }
.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-6 { padding-left: var(--space-6) !important; }
.pl-8 { padding-left: var(--space-8) !important; }

/* よく使う「片側auto」だけ残す */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }