@charset "utf-8";

/* 基本設定 ここから*/

/* 基本色 */
:root {
  --smp--color--smp-green: rgb(0, 122, 76);
  --smp--color--black: #000000;
  --smp--color--white: #ffffff;
  --smp--color--site-white: rgb(252, 250, 250);
  --smp--color--site-glay: rgb(223, 223, 223);
  --smp--color--silver: #cbd5dc;
  --smp--color--gold: rgb(212, 181, 113);
  --smp--color--olive-green: hsl(103, 44%, 52%);
  --smp--color--bright-green: hsl(127, 34%, 81%);
  --smp--color--light-blue: hsl(207, 65%, 71%);
  --smp--color--medium-gray: rgb(167, 168, 170);
  --smp--color--purple: rgb(153, 151, 201);
  --smp--color--orange: hsl(27, 87%, 56%);
  --smp--color--pink: hsl(358, 77%, 78%);
  --smp--color--light-yellow: hsl(49, 100%, 74%);
}

/* 基本サイズ */
:root{
  --size1-half: calc(var(--size1) / 2);
  --size1: 5vw;
  --size2: calc(var(--size1) * 2);
  --size3: calc(var(--size1) * 3);
  --size4: calc(var(--size1) * 4);
}
/* 基本サイズ22*/
:root{
  --smp--font-size--h4: 24px;
  --smp--font-size--h3: 32px;
  --smp--font-size--h2: 45px;
  --smp--font-size--h1: 60px;
  --smp--spacing--05: 0.5em;
  --smp--spacing--15: 15px;
  --smp--spacing--24: 24px;
  --smp--spacing--30: 30px;
  --smp--spacing--45: 45px;
  --smp--spacing--60: 60px;
  --smp--spacing--90: 90px;
  --smp--spacing--120: 120px;
  --smp--spacing--150: 150px;
  --smp--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --smp--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --smp--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --smp--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1),
    6px 6px rgba(0, 0, 0, 1);
  --smp--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

/* Clamp */
*,
*::before,
*::after {
  /* 最小サイズ、最大サイズ、最小画面幅、最大画面幅 */
  --min-size: 53;
  --max-size: 146;
  --min-viewport: 375;
  --max-viewport: 1980;

  /* a 傾き */
  --slope: calc(
    (var(--max-size) - var(--min-size)) /
      (var(--max-viewport) - var(--min-viewport))
  );
  /* b 切片 */
  --intercept: calc(var(--min-size) - var(--slope) * var(--min-viewport));
  /* y = ax + b 可変サイズ */
  --fluid-size: calc(var(--slope) * 100vw + var(--intercept) / 16 * 1rem);

  /* clamp(最小サイズ, 可変サイズ, 最大サイズ) */
  --clamp-size: clamp(
    var(--min-size) / 16 * 1rem,
    var(--fluid-size),
    var(--max-size) / 16 * 1rem
  );
}

/* フォントカラー */
.smp-color-smp-green{
  color: var(--smp--color--smp-green);
}
.smp-color-white{
  color: var(--smp--color--white);
}
.smp-color-site-white{
  color: var(--smp--color--site-white);
}
.smp-color-light-yellow{
  color: var(--smp--color--light-yellow);
}
.smp-color-orange{
  color: var(--smp--color--orange);
}

/* 背景色 */
.smp-bg-green{
  background-color: var(--smp--color--smp-green);
  padding-left: var(--smp--spacing--30);
  color: var(--smp--color--white);
}

/* ボーダー */
.smp-border {
  border-bottom: 2px solid #2c3b3a;
}
.smp-border-white {
  border: 1px solid #fff;
}
.smp-border-green {
  border-bottom: 2px solid #007a4c;
}


/* マージン */
.smp-u-mt-15 {
  margin-top: 15px !important;
}
@media screen and (max-width: 768px) {
  .smp-u-mt-15 {
    margin-top: 15 !important;
  }
}

/* 基本設定 ここまで*/

/* フォント調整 */
.b-report-detail-01 h2{
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 200%;
  line-height: 1.6;
  letter-spacing: .025em;
  font-weight: 700;
}

@media screen and (max-width: 768px) and (max-width: 768px){
.b-news-detail-01 h2, .b-report-detail-01 h2 {
    font-size: 6.770833333333333vw;
}
}


/* レイアウト*/

.smp-glid-place-items-center{
  display: grid;
  place-items: center;
}


.smp-glid-place-items-end-center{
  display: grid;
  place-items: end center;
}



@media screen and (min-width: 1280px){
  .b-report-detail-01{
    width: 80%;
    margin: 0 auto;
  }
  /* b-report-detail-01 labelのclassになった場合は削除する */
  .smp-container{
    width: 80%;
    margin: 0 auto;
  }
}

.smp-kv-inner{
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px){
  .smp-kv-inner{
    margin: 60px 0px;
  }
}

@media screen and (min-width: 1920px){
  .l-inner-01{
    width: 80%;
  }
}
@media screen and (min-width: 2560px) {
  .l-inner-01 {
    width: 1536px;
  }
}


.b-report-detail-01 p{
  margin-top: 0;
}

.c-hdg-level5-01 {
  margin-bottom: 15px;
}


/* プログラム */

.smp-title {
  font-size: var(--smp--font-size--h3);
  font-weight: bold;
  line-height: 1.1em;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px){
  .smp-title {
    font-size: 7vw;
  }
}

.smp-name span{
  font-size: var(--smp--font-size--h4);
  vertical-align: baseline;
}
.smp-name sub{
  vertical-align: baseline;
}
@media screen and (max-width: 834px){
  .smp-name span{
    font-size:120%;
  }
  .smp-name sub{
    vertical-align: middle;
  }
}

.smp-post-after {
  margin-inline-end: var(--smp--spacing--05);
}
.smp-post-before {
  margin-inline-start: var(--smp--spacing--05);
}


a {
  color: #333;
}

a:hover {
  text-decoration: none;
}


/* 開催日 */
.smp-event-date{
  display: block;
  width: 100%;
  margin: 0 auto;
  font-family: Montserrat, Noto sans JP, sans-serif;
}

.smp-year{
  margin-right: 150px;
  font-size: var(--smp--font-size--h2);
  font-weight: 700;
}
.smp-date{
  display: inline-block;
  padding: 10px 0px 15px 10px;
  font-size: var(--smp--font-size--h1);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.1em;
}
.smp-day-of-week{
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 50%;
  font-size: var(--smp--font-size--h2);
  font-weight: 700;
  line-height: 1.1em;
  margin-inline-start: 10px;
  vertical-align:bottom;
}
.smp-time {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--smp--font-size--h2);
  font-weight: 700;

}

@media screen and (min-width: 769px) and (max-width: 960px){
  .smp-year{
    --min-size: 30;
    --max-size: 80;
    margin-inline-end: 3em;
    font-size: var(--clamp-size);
  }
  .smp-date{
    --min-size: 40;
    --max-size: 100;
    font-size: var(--clamp-size);
    margin-right: 0px;
    padding: 0px;
  }
  .smp-day-of-week{
    font-size: var(--smp--font-size--h3);
  }
  .smp-time {
    --min-size: 25;
    --max-size: 80;
    margin-right: 0px;
    font-size: var(--clamp-size);
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px){
  .smp-year{
    --min-size: 30;
    --max-size: 768;
    margin-inline-end: 4em;
    font-size: var(--clamp-size);
  }
  .smp-date{
    font-size: var(--clamp-size);
    margin-right: 0px;
    padding: 0px;
  }
  .smp-day-of-week{
    --min-size: 30;
    --max-size: 768;
    font-size: var(--clamp-size);
  }
  .smp-time {
    --min-size: 35;
    --max-size: 768;
    margin-right: 0px;
    font-size: var(--clamp-size);
  }
}