@charset "UTF-8";

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/**
 * Designed parts
 */

/******************************************************************************/
/**
 * Link button with triangle arrow
 *
 * @example
 * <a href="#" class="part--triangle-arrow-link-button">Link button</a>
 */

.part--triangle-arrow-link-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  padding: .5rem 3rem;
  background: var(--color-dark-primary);
  color: var(--color-dark-primary-text);

  font-family: var(--font-sans);
  font-size: .875rem;
}

.part--triangle-arrow-link-button::before {
  content: url(../img//mark-left-triangle.png);

  margin-inline-end: .5rem;
  padding-top: .25rem;
  display: inline-block;
  vertical-align: bottom;
}

.part--triangle-arrow-link-button:hover {
  color: var(--color-dark-primary-link-hover);
}

/******************************************************************************/
/**
 * Link button with rounded corners
 *
 * @example
 * <a href="#" class="part--rounded-corners-link-button">Link button</a>
 */

.part--rounded-corners-link-button {
  --value-rounded-corners: 2rem;

  border-radius: var(--value-rounded-corners);

  height: calc(var(--value-rounded-corners) * 2);

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  padding: .5rem 3rem;
  background: var(--color-dark-primary);
  color: var(--color-dark-primary-text);

  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
}

@media screen and (max-width: 48rem) {
  .part--rounded-corners-link-button {
    --value-rounded-corners: 1.5rem;

    padding: .25rem 2rem;
    font-size: 1rem;
  }
}

@media screen and (max-width: 30rem) {
  .part--rounded-corners-link-button {
    --value-rounded-corners: 1rem;

    padding: .125rem 1rem;
    font-size: .875rem;
  }
}

.part--rounded-corners-link-button:hover {
  color: var(--color-dark-primary-link-hover);
}

/******************************************************************************/
/**
 * News card layout
 *
 * @example
 * <div class="part--news-card-layout">
 *   <a class="part--news-card">...</a>
 *   <a class="part--news-card">...</a>
 *   <a class="part--news-card">...</a>
 *   ...
 * </div>
 */

:root {
  --value-news-card-layout-gap: 2rem;
}

@media screen and (max-width: 48rem) {
  :root {
    --value-news-card-layout-gap: 1rem;
  }
}

.part--news-card-layout {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--value-news-card-layout-gap);
}

.part--news-card-layout > * {
  box-shadow: .125rem .125rem .5rem rgba(17, 17, 17, .3);

  width: min(
    calc((100% - var(--value-news-card-layout-gap) * 2 ) / 3),
    20rem
  );

  color: var(--color-light-primary-text);
}

@media screen and (max-width: 30rem) {
  .part--news-card-layout > * {
    width: calc((100% - var(--value-news-card-layout-gap)) / 2);
  }
}

/******************************************************************************/
/**
 * News card layout
 *
 * @example
 * <a href="#" class="part--news-card">
 *   <img
 *     src="..."
 *     alt="..."
 *   >
 *   <div class="caption">
 *     <time datetime="...">...</time>
 *     <div class="summary">...</div>
 *   </div>
 * </a>
 */

.part--news-card {
  box-shadow: .125rem .125rem .5rem rgba(17, 17, 17, .3);

  color: var(--color-light-primary-text);
}

.part--news-card:hover {
  color: var(--color-light-primary-link-hover);
  opacity: .75;
}

.part--news-card img {
  width: 100%;
}

.part--news-card .caption {
  padding: 1rem;

  color: var(--color-light-primary-text);
}

@media screen and (max-width: 48rem) {
  .part--news-card .caption {
    padding: .75rem;
  }
}

@media screen and (max-width: 30rem) {
  .part--news-card .caption {
    padding: .5rem;
  }
}

.part--news-card .caption time {
  margin: .5rem 10 1rem;

  color: var(--color-light-primary-text);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
}

.part--news-card .caption .summary {
  margin-top: .5rem;

  font-family: "Noto Sans JP", sans-serif;
}

/******************************************************************************/

/******************************************************************************/
/**
 * Merchandise (goods) card layout
 *
 * @example
 * <div class="part--merchandise-card-layout">
 *   <a class="part--merchandise-card">...</a>
 *   <a class="part--merchandise-card">...</a>
 *   <a class="part--merchandise-card">...</a>
 *   ...
 * </div>
 */

 :root {
  --value-merchandise-card-layout-gap: 2rem;
}

@media screen and (max-width: 48rem) {
  :root {
    --value-merchandise-card-layout-gap: 1rem;
  }
}

.part--merchandise-card-layout {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: var(--value-merchandise-card-layout-gap);
}

.part--merchandise-card-layout > * {
  box-shadow: .125rem .125rem .5rem rgba(17, 17, 17, .3);

  width: min(
    calc((100% - var(--value-merchandise-card-layout-gap) * 2 ) / 3),
    20rem
  );

  color: var(--color-light-primary-text);
}

@media screen and (max-width: 30rem) {
  .part--merchandise-card-layout > * {
    width: calc((100% - var(--value-merchandise-card-layout-gap)) / 2);
  }
}

/******************************************************************************/
/**
 * Merchandise (goods) card layout
 *
 * @example
 * <a href="#" class="part--merchandise-card">
 *   <img
 *     src="..."
 *     alt="..."
 *   >
 *   <div class="caption">
 *     <h3>...<div class="sales-website">...</div></h3>
 *     <div class="summary">...</div>
 *   </div>
 * </a>
 */

.part--merchandise-card {
  box-shadow: .125rem .125rem .5rem rgba(17, 17, 17, .3);

  color: var(--color-light-primary-text);
}

.part--merchandise-card:hover {
  color: var(--color-light-primary-link-hover);
  opacity: .75;
}

.part--merchandise-card img {
  width: 100%;
}

.part--merchandise-card .caption {
  padding: 1rem;

  color: var(--color-light-primary-text);
}

@media screen and (max-width: 48rem) {
  .part--merchandise-card .caption {
    padding: .75rem;
  }
}

@media screen and (max-width: 30rem) {
  .part--merchandise-card .caption {
    padding: .5rem;
  }
}

.part--merchandise-card .caption h3 {
  margin: .5rem 10 1rem;

  color: var(--color-light-primary-text);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
}

.part--merchandise-card .caption .sales-website {
  margin-block-start: .5rem;

  font-size: 1rem;
  font-weight: normal;
}

.part--merchandise-card .caption .summary {
  margin-top: .5rem;

  font-family: "Noto Sans JP", sans-serif;
}

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/*
 * Template Style for a Contents
 */

/******************************************************************************/
/*
 * <article> of News article
 */

.template-frame .section-title {
  padding-block: .5rem;
}

/* article content area below billboard */
.template-frame .content {
  margin-block-start: 4rem;
}

/* article title */
.template-frame article > h1 {
  margin-bottom: 2rem;

  padding: .25rem 1rem;
  background-color: var(--color-dark-primary);
  color: var(--color-dark-primary-text);
  font-size: 1.5rem;
  line-height: var(--value-golden-ratio);
}

/* article date */
.template-frame article > h1 + time {
  margin-inline-start: 1rem;

  color: var(--color-light-primary-text);
  font-size: .875rem;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* article <section> */
.template-frame article > section {
  margin-top: 4rem;
}

.template-frame article > section > h2 {
  margin-inline: .5rem;
  border-bottom: 1px solid #555;

  font-size: 1.5rem;

  padding-bottom: .5rem;
}

.template-frame article > section > p {
  margin-top: 1rem;
  margin-inline: 1rem;

  font-size: 1rem;
  line-height: var(1rem * var(--value-golden-ratio));
  text-align: justify;
}

.template-frame article > section > p::first-letter {
  margin-inline-start: .5rem;
}

/* article wide image <section> */
.template-frame article > section > img {
  margin-top: 1rem;

  max-width: 100%;

  box-shadow: .125rem .125rem .5rem rgba(17, 17, 17, .3);
}

/******************************************************************************/

/* article figure */
.template-frame article > section figure {
  max-width: 100%;

  box-shadow: .125rem .125rem .5rem rgba(17, 17, 17, .3);
}

.template-frame article > section > figure {
  margin-top: 2rem;
}

.template-frame article figure > img {
  width: 100%;
}

.template-frame article figure > figcaption {
  padding: .5rem 1rem;
  font-size: .875rem;
  line-height: var(1rem * var(--value-golden-ratio));
}

/******************************************************************************/
/*
 * article gallery <section>
 */
.template-frame article .layout-gallery {
  margin-top: 2rem;

  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.template-frame article .layout-gallery > * {
  max-width: calc((100% - 3rem) / 2);
}

@media screen and (max-width: 30rem) {
  .template-frame article .layout-gallery > * {
    max-width: 100%;
  }
}

/******************************************************************************/
/*
 * article list <section>
 */
.template-frame article > section > dl {
  margin: 2rem 1rem 0;

  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
}

@media screen and (max-width: 30rem) {
  .template-frame article > section > dl {
    margin: 2rem 0 0;
  }
}

.template-frame article > section > dl > dt {
  font-weight: 600;

  display: inline-flex;
  justify-content: space-between;
}

.template-frame article > section > dl > dt::after {
  content: ':';

  margin-inline: .25rem;
}

/******************************************************************************/

.template-frame article > section > a {
  margin-top: 1.5rem;
}