@charset "utf-8";

/** 定義 **/
:root {
  /** color **/
  --calendar-sat-color: #1a18fb;
  --calendar-sun-color: #ff0b0a;
  --calendar-mark-default-color: #d4b6b3;
  --calendar-mark-off-color: #999;

  /** tab **/
  --tab-border-default: linear-gradient(to right, #000 60%, transparent 100%);
  --tab-border-before: linear-gradient(to top, #000 60%, transparent 100%);
  --tab-border-after: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/** box **/
.layout-box {
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-box.inner {
  padding: 1rem;
}

.layout-box.spacer {
  margin-bottom: 1rem;
}

.layout-box.w80 {
  width: 80%;
  margin: 0 auto 0;
}

.layout-box img {
  display: block;
  width: 100%;
}

.layout-box.float {
  width: 100%;
  max-width: 980px;
  margin-bottom: 1rem;
  background-color: #fff;
}

.layout-box.sticky {
  position: sticky;
  top: 0;
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  z-index: 15;
}


@media screen and (max-width: 678px) {
  .layout-box.float.sticky {
    top: 44px;
  }
}

@media screen and (max-width: 768px) {
  .layout-box.w80 { width: 100%; }
}

/** タブUI **/
.tab {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 1rem 0;
}

.tab img {
  display: block;
  width: 100%;
}

.tab > nav {
  width: 3rem;
  position: relative;
  border: 0;
}

.tab > nav ul {
  display: flex;
  flex-direction: column;
  align-items: unset;
  justify-content: unset;
  width: 100%;
  position: sticky;
  top: var(--header-height);
  z-index: 5;
}

.tab > nav li > label > input { display: none; }

.tab > nav li > label > a {
  display: block;
  width: 100%;
  height: 46px;
  border: var(--border-solid-sizing);
  font-weight: 400;
  text-decoration: none;
}
.tab > nav li:not(:first-child) > label > a {
  border-top: 0;
}

.tab > nav li > label:has(> input:checked) > a,
.tab > nav li > label > a:hover {
  background-color: var(--border-color);
  text-decoration: none;
}

.tab > nav li > label > a.disabled {
  background-color: var(--disabled-color);
  color: var(--disabled-font-color);
  text-decoration: none;
  cursor: context-menu;
}

.tab > nav ul::before,
.tab > nav ul::after {
  content: '';
  width: 2rem;
  height: 1px;
  display: block;
  border-bottom: var(--border-solid-sizing);
  mask-image: var(--tab-border-default);
}

.tab.side-R {
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: stretch;
}

.tab.side-L {
  justify-content: space-between;
  flex-direction: row;
}

.tab.side-R > nav ul::before,
.tab.side-R > nav ul::after {
  width: 1px;
  height: 2rem;
  border-bottom: 0;
  border-left: var(--border-solid-sizing);
}

.tab.side-L > nav ul::before,
.tab.side-L > nav ul::after {
  width: 1px;
  height: 2rem;
  border-bottom: 0;
  border-right: var(--border-solid-sizing);
}

.tab.side-L > nav ul::before,
.tab.side-R > nav ul::before {
  mask-image: var(--tab-border-before);
}

.tab.side-L > nav ul::after,
.tab.side-R > nav ul::after {
  mask-image: var(--tab-border-after);
}

.tab.side-L > nav ul,
.tab.side-R > nav ul {
  display: flex;
  flex-direction: column;
  width: 3rem;
  height: auto;
}

.tab > nav ul.vertical li > label > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  height: auto;
  padding: 0.25rem 0 0.25rem 0;
  text-align: center;
  writing-mode: vertical-rl;
}

/** コンテンツ **/
.tab > .contents {
  width: 100%;
  padding: 1rem;
}

.tab.side-L > .contents,
.tab.side-R > .contents {
  width: calc(100% - 4rem);
}

.tab > .contents section {
  width: 100%;
  margin: 0 0 1rem
}

.tab > .contents section h2 {
  padding: 0.5rem 0 0.5rem 5%;
  margin: 0 0 1rem 0;
  font-size: 2.6rem;
  font-weight: 400;
  text-align: center;
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
}

section.clinic h3 {
  padding: 0.5rem 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/** profile **/
.tab > .contents:has(> .profile) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  border: var(--border-solid-sizing);
}

.tab > .contents > .profile {
  width: 100%;
  max-width: 390px;
}

@media screen and (max-width: 820px) {
  .tab > .contents > .profile {
    width: 100%;
    max-width: 190px;
  }
}

.profile {
  padding: 0.5rem;
  font-size: 1.2rem;
  margin: 0 auto 0;
}

.profile > dt {
  font-weight: 600;
  margin: 0;
  padding: 1rem 0 0.5rem;
  text-align: center;
}

.profile > dd {
  margin: 0;
  font-size: 1.4rem;
}

.profile > dd > img {
  display: block;
  width: 100%;
}

@media screen and (max-width: 820px) {
  div.contents:has(> .profile) {
    grid-template-columns: repeat(auto-fit, minmax(calc(100% - 4rem), 1fr));
  }

  div.contents > .profile {
    width: 100%;
    max-width: calc(100% - 4rem);
  }
}

img.frame { padding: 4px; }

img.frame.gold {
  background-image: url(/img/sample/metal_bg.jpg);
  background-position: center center;
  background-size: cover;
}

.profile.thumbnail > dt {
  padding: 0.5rem 0 0.5rem;
}

@media screen and (max-width: 860px) {
  .tab.side-R,
  .tab.side-L {
    justify-content: space-evenly;
  }

  .profile.thumbnail p { font-size: 1.2rem; }
}

/** calendar **/
.layout-calendar {
  display: grid;
  grid-template-areas:
  "header"
  "weeks"
  "days";
}

.layout-calendar h3 {
  grid-area: header;
}

.layout-calendar .layout-weeks,
.layout-calendar .layout-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.layout-calendar .layout-weeks {
  grid-area: weeks;
  border: var(--border-solid-sizing);
}

.layout-calendar .layout-days  {
  grid-area: days;
  border-right: var(--border-solid-sizing);
  border-left: var(--border-solid-sizing);
}

.layout-calendar .layout-weeks > div,
.layout-calendar .layout-days > div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  padding: 0.25rem;
  text-align: center;
}

.layout-calendar .layout-weeks > div {
  border-right: var(--border-solid-sizing);
  font-size: 1.25rem;
}

.layout-calendar .layout-days > div  {
  height: 60px;
  border-bottom: var(--border-solid-sizing);
  border-right: var(--border-solid-sizing);
  font-size: 1.4rem;
  font-weight: 700;
}

.layout-calendar .layout-weeks > div:last-child,
.layout-calendar .layout-days > div:nth-child(7n) {
  border-right: 0;
}

.layout-calendar .layout-days > div:not(:empty)::after {
  content: "\A●";
  display: block;
  font-size: 2.0rem;
  line-height: 1;
  color: var(--calendar-mark-default-color);
}

.layout-calendar .layout-days > div:not(:empty).state-1::after {
  content: "\A×";
  color: var(--calendar-mark-off-color);
}

.layout-calendar .layout-weeks > div:nth-child(6),
.layout-calendar .layout-days > div:nth-child(6),
.layout-calendar .layout-days > div:nth-child(7n+6) {
  color: var(--calendar-sat-color);
}

.layout-calendar .layout-weeks > div:nth-child(7),
.layout-calendar .layout-days > div:nth-child(7n) {
  color: var(--calendar-sun-color);
}

/** button **/
.button {
  width: 100%;
  padding: 1rem 0.5rem 1rem;
  margin: 0 auto 2rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #000;
  text-align: center;
  color: #fff;
}

.button.w80 { width: 80%; }