@charset "UTF-8";
 /*
Theme Name: Good Stream
Author: Rui Ishiguro
Version: 1.0
*/
/*

Reset
------------------------------

リセットCSSとしてNormalize.cssを採用

normalize - [Normalize.css: Make browsers render all elements more consistently.](http://necolas.github.io/normalize.css/)

*/

*{
  box-sizing:border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block; }

html {
  cursor: default;
  /* 1 */
  font-size: 100%;
  /* 2 */
  overflow-y: scroll;
  /* 3 */
  -webkit-tap-highlight-color: transparent;
  /* 4 */
  -ms-text-size-adjust: 100%;
  /* 5 */
  -webkit-text-size-adjust: 100%;
  /* 5 */ }

body,
form,
input,
button,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */ }

a,
a:active {
  outline: none;
  text-decoration: none;
  border: none;
  color: var(--color-body);
}

a:hover {
  outline: none;
  text-decoration: none;
  border: none;
  color: var(--color-body);
}

.scheme-2 a,
.scheme-2 a:active {
  color: var(--color-body-2);
}
.scheme-2 a:hover {
  color: var(--color-body-2);
}


a:focus {
  outline: thin dotted; }

abbr {
  _border-bottom: expression(this.title ? '1px dotted' : 'none'); }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: #FF0;
  color: #000; }

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before,
q:after {
  content: '';
  content: none; }

small,
sub,
sup {
  font-size: 75%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

nav ul {
  list-style: none; }

audio[controls],
canvas,
video {
  display: inline-block;
  *display: inline; }

audio {
  display: none;
  _display: expression(this.controls ? 'inline' : 'none');
  *zoom: 1; }

audio[controls] {
  display: inline-block; }

img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */ }

svg:not(:root) {
  overflow: hidden; }

legend {
  *margin-left: -7px; }

button,
input[type="text"],
select,
textarea {
  -webkit-appearance: none;
  border-radius: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button,
input {
  line-height: normal;
  /* 1 */
  _overflow: expression(this.type == 'button|reset|submit' ? 'visible' : '');
  /* 2 */ }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  overflow: visible; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; }

input[type="search"] {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

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

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}



:root {
  --color-theme:#271200;
  --color-body: #271200;
  --color-bg: #FDFDFD;
  --color-link: #271200;
  --color-wh: #FFFFFF;
  --color-na:#e9ecef;
  --font-size-h1:3.2rem;
  --font-size-h2:2.8rem;
  --font-size-h3:2.4rem;
  --font-size-h4:2.0rem;
  --font-size-h5:1.6rem;
  --font-size-nav:2.4rem;
  --font-size-body1:1.6rem;
  --font-size-body2:1.1rem;
  --gap-sm:0.8rem;
  --gap:1.6rem;
  --gap-md:3.2rem;
  --gap-lg:6.4rem;
  --gap-exlg:12.8rem;
  --width-content:1200px;
  --width-content-md:980px;
  --width-content-sm:720px;
  --border-height:3px;
}


html {
  font-size: 62.5%;
}

body {
  border: solid 0px var(--color-wh);
  background: var(--color-bg);
  position: relative;
  -webkit-text-size-adjust: 100%;
  word-spacing: normal !important;
  line-height: 1.7;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--color-body);
  font-weight: 400;
}

.wpcf7-form input[type="submit"],
a.link-arrow-right {
  cursor: url("assets/images/arrow-right-32.png") 32 32, pointer !important;
}
a.link-arrow-down {
  cursor: url("assets/images/arrow-down-32.png") 32 32, pointer;
}
a.link-arrow-target {
  cursor: url("assets/images/arrow-target-32.png") 32 32, pointer;
}
a.link-home {
  cursor: url("assets/images/arrow-up-32.png") 32 32, pointer;
}
.item-zoom {
  cursor: url("assets/images/arrow-up-theme-48.png") 32 32, pointer !important;
}

.item-zoom.item-zoom-full {
  cursor: url("assets/images/arrow-down-theme-48.png") 32 32, pointer !important;
}
.horizontal-scroll {
  cursor: url("assets/images/arrow-lr-48.png") 32 32, pointer;
}

.btn-view {
  cursor: url("assets/images/icon-img-32.png") 32 32, pointer;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
  display: block; }

.fixed {
  position: fixed;
  width: 100%;
  height: 100%; }

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  display: block;
  width: 100%;
  margin: 0;
  font-weight: normal;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

h1,
.h1{
  font-size: var(--font-size-h1);
}

h2,
.h2{
  font-size: var(--font-size-h2);
}



h3,
.h3{
  font-size: var(--font-size-h3);
}

h4,
.h4{
  font-size: var(--font-size-h4);
}


.font-strong {
  font-weight: 600;
}

.font-nav {
  font-size: var(--font-size-nav);
  line-height: 1.0;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.rte p,
.font-body1 {
  font-size: var(--font-size-body1);
}

.font-body2 p,
.font-body2 {
  font-size: var(--font-size-body2);
}

.rte p a:link{
  border-bottom: 1px solid var(--color-body);
}
.rte p a:hover{
  border-bottom: 1px solid transparent;
}

.font-body2 {
  font-size: var(--font-size-body2);
}

.rte dt{
  font-weight: 500;
}

.rte dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--gap);
  row-gap: 0; /* 行間は任意 */
}

.rte dt {
  margin: 0;
}

.rte dd {
  margin: 0;
}

.rte dd p {
  margin-block-end: 0;
}
.rte dd p:first-child {
  margin-block-start: 0;
}

/** element **/
 .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

.grid{
  display: grid;
  gap: var(--gap-md) var(--gap-md);
}

.grid--cols{
  grid-template-columns: repeat(1, 1fr);
}
.grid--2cols{
  grid-template-columns: repeat(2, 1fr);
}
.grid--3cols{
  grid-template-columns: repeat(3, 1fr);
}
.grid--4cols{
  grid-template-columns: repeat(4, 1fr);
}
.grid--5cols{
  grid-template-columns: repeat(5, 1fr);
}
.grid--6cols{
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 768px) {
  .grid{
    display: grid;
    gap: var(--gap-md) var(--gap);
  }

  .grid.grid--cols-sm{
    grid-template-columns: repeat(1, 1fr);
  }
  .grid.grid--2cols-sm{
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.grid--4cols-sm{
    grid-template-columns: repeat(4, 1fr);
  }
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) * 2) var(--gap);
}

.flex--2cols .flex-item{
 width: calc((100% - (var(--gap) * 1)) / 2);
}

.flex--3cols .flex-item{
 width: calc((100% - (var(--gap) * 2)) / 3);
}

.flex--4cols .flex-item{
 width: calc((100% - (var(--gap) * 3)) / 4);
}

.flex--5cols .flex-item{
 width: calc((100% - (var(--gap) * 4)) / 5);
}

@media (max-width: 768px) {
  .flex {
    gap: calc(var(--gap-sm) * 2) var(--gap-sm);
  }
  .flex.flex--2cols-sm .flex-item{
   width: calc((100% - (var(--gap-sm) * 1)) / 2);
  }
  .flex.flex--1cols-sm .flex-item{
   width: 100%;
  }
}

html { scroll-behavior: smooth; }
[id] {
  scroll-margin-top: calc(96px + 0px);
}

.item-zoom { cursor: zoom-in; }
.item-zoom.item-zoom-full { cursor: zoom-out; }


.item-zoom {
  transition:
    width .3s ease,
    transform .3s ease;
}

.item-zoom-full {
  width: 100% !important;
  transform: scale(1.01);
}


.link-view-more {
  font-weight: 500;
  font-size: var(--font-size-h2);
  background: url(assets/images/arrow-right.svg);
  background-size:24px auto;
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.item-zoom.item-zoom-full + .flex-media__body {
  width: 100%;
  transition:
    width .3s ease,
    transform .3s ease;
}

.btn-wrap {
  margin-block-start: var(--gap-md);
}


.btn {
  font-size: var(--font-size-h4);
  font-weight: 500;
  display: inline-block;
  padding: 8px 0px;
  line-height: 1;
  border-bottom: 2px solid var(--color-body);
}
.btn:hover {
  border-bottom: 2px solid transparent;
}


.label-demo {
  font-size: var(--font-size-body2);
  display: inline-block;
  padding: 8px 16px;
  line-height: 1;
  background-color:#D9D9D9;
  border-radius: 32px;
}

.label {
  font-size: var(--font-size-body1);
  font-weight: 500;
  display: inline-block;
  padding: 8px 0px;
  line-height: 1;
}

.link-block {
  display: block;
}

.btn-view {
  font-size: var(--font-size-body1);
  font-weight: 500;
  border-block-end: var(--border-height) solid var(--color-body);
}
.btn-view:hover {
  border-block-end: var(--border-height) solid transparent;
}

.btn-view__text::before{
  content: "+ ";
}
.btn-view__text{
  display: inline-block;
}


.img-thumbnail {
  position: relative;
}

.img-crop {

}
.img-crop img{
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

.img-crop-thumbnail img{
  display: block;
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}

.img-crop-sq img{
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}

.flex-media__img img{
  display: block;
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}


.img-crop--auto .img-block-list__figure img{
  display: block;
  aspect-ratio:auto;
  width: 100%;
  object-fit: cover;
}
.img-crop--sq .img-block-list__figure img{
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}
.img-crop--landscape .img-block-list__figure img{
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}
.img-crop--vertical .img-block-list__figure img{
  display: block;
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
}
.item-zoom-full img{
  aspect-ratio: auto !important;
}




/** block **/

.inner {
  padding-inline: var(--gap-lg);

}

.sec {
  display:flex;
  flex-wrap: wrap;
  gap: var(--gap-md) 0;
  margin-block-start: var(--gap-lg);
}
.sec:first-child {
  margin-block-start: var(--gap-md);
}

.sec__header,
.sec__body{
  width: 100%;
}

.sec__header-title {
}

.filter-group {
  margin-block-start: var(--gap);
  margin-block-start: 0;
}

.filter-toggle {
  font-weight: 500;
  font-size: calc(var(--font-size-nav) * 1);
}

.sec__header-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) var(--gap);
  width: 100%;
}
.sec__header-nav ul li {
  display: inline;
  font-weight: 500;
  font-size: calc(var(--font-size-nav) * 0.8);
  margin-inline-end: var(--gap-md);
}


/* 開いてるグループだけ表示 */
.filter-group.is-open > ul {
  display: block;
  margin:8px 0 16px;
  overflow: visible;
}

/* トグルを押せそうにする（お好み） */
.filter-toggle {
  cursor: pointer;
  user-select: none;
}

.filter-group.is-open .filter-toggle {
}

.filter-group > ul {
  overflow: hidden;
  height: 0;
  margin:0px;
  padding: 0;
  list-style: none;
  transition: height .25s ease;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}




:is(.rte) :is(ul) {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-sm) / 2); 0;
  list-style: disc;
  margin-left: 24px;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte :is(p, ul, dl, h2, h3) {
  margin-block: var(--gap);
  text-align: left;
}

.articles-image-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: space-around;
  align-items: center;
  gap: var(--gap-lg) var(--gap-sm);
}

.articles__item.size-ss,
.articles-image-card.size-ss {
  width: 20%;
}

.articles__item.size-s,
.articles-image-card.size-s {
  width: 25%;
}
.articles__item.size-m,
.articles-image-card.size-m {
  width: 30%;
}
.articles__item.size-l,
.articles-image-card.size-l {
  width: 35%;
}
.articles__item.size-xl,
.articles-image-card.size-xl {
  width: 40%;
}

.articles__item .articles__item-body{
  margin-block-start: var(--gap);
}

.articles__item-title {
  font-size: var(--font-size-body1);
}

.media__item-inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: flex-start;
}

.media__item-img {
  width: 480px;
}

.media__item-body {
  width: calc(100% - 480px);
  padding-inline-end: var(--gap-md);
}

.media__item-body .media__item-text {
  margin-block-start: var(--gap);
}

.media__item-body .media__item-text{

}

.project .media__item {
  padding-block: var(--gap-md);
  border-block-start: var(--border-height) solid var(--color-body);
}

.project .media__item:last-child {
  border-block-end: var(--border-height) solid var(--color-body);
}

.flex-media {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md) var(--gap-md);
}
.flex-media.media--image-right {
  flex-direction: row-reverse;
}

.flex-media .flex-media__img {
  width: 50%;
}
.flex-media .flex-media__body {
  width: calc(50% - var(--gap-md));
}

.movie {
  width: 100%;
}
.embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.text-body {
  width: 100%;
  max-width: var(--width-content-md);
}

/** Article **/
.content__header--hero {
  width: 100%;
}

.horizontal-scroll {
  display: flex;
  gap: var(--border-height);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.horizontal-scroll__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.horizontal-scroll__item img {
  display: block;
  width: auto;
  height: 80svh;
  max-width: none;
  object-fit: contain;
}

.content__header .content__header--hero + .content__header--title h1{
  margin-block-start: var(--gap-lg);
}

.related-item {

}

.related-item__img {
  position: relative;
  overflow: hidden; /* crop / radius 用 */
}

.thumbnail-list__item .thumbnail-list__img::after,
.articles-image-card .articles-image-card__thumb::after,
.media__item .media__item-img::after,
.articles__item .img-thumbnail::after,
.related-item__img::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-height) solid transparent;
  pointer-events: none; /* クリック邪魔しない */
  transition: border-color .2s ease;
  z-index: 2;
}

.thumbnail-list__item:hover .thumbnail-list__img::after,
.articles-image-card:hover .articles-image-card__thumb::after,
.media__item:hover .media__item-img::after,
.articles__item:hover .img-thumbnail::after,
.related-item:hover .related-item__img::after {
  border-color: var(--color-body);
}


.articles-image-card {
  position: relative;
  display: block;
}

.related-item .related-item__body {
  margin-block-start: var(--gap-sm);
}
.related-item .related-item__title {
  font-size: var(--font-size-body1);
}

/** Fields **/

.fields .fields__block {
  margin-block: var(--gap-md);
}

.img-block-list__caption {
  display: block;
  margin-block-start: var(--gap-sm);
}

.fields__block.fields__block--title {
  margin-block-start: var(--gap-lg);
}
.fields__block.fields__block--subtitle {
  margin-block-start: var(--gap-md);
}

.fields__block--text:has(+ .fields__block--btn) {
  margin-block-end: 0;
}

.fields__block--text + .fields__block--btn {
  margin-block-start: var(--gap);
}

.fields__block.fields__block--thumbnail-list {
}

.fields__block.fields__block--btn {
  margin-block-end: var(--gap-lg)
}

.fields__block .sec:first-child{
  margin-block-start: var(--gap-lg);
}

.fields__block.fields__block--map .map{
  width: 100%;
  max-width: var(--width-content-md);
}

.fields__block.fields__block--index {
  margin-block-end: var(--gap-lg);
}
.fields__block.fields__block--index ul {
  border-top: 1px solid var(--color-body);
  display: block;
  width: 100%;
  max-width: var(--width-content-md);
  margin-block-start: var(--gap);
}
.fields__block.fields__block--index ul li {
  display: inline-block;
  width: 100%;
  padding-block: var(--gap-sm);
  border-bottom: 1px solid var(--color-body);
  font-weight: 500;
}
.fields__block.fields__block--index ul li a {
}

.fields .fields__block--remarks {
  margin-block: calc(var(--gap) * -1);
}

.credit-title {
  font-size: var(--font-size-body2);
  font-weight: 500;
  margin-block-end: 2px;
}



.thumbnail-list__img {
  position: relative;
}


.thumbnail-list__title h3 {
  font-size: var(--font-size-body1);
}

/* 初期：画像を閉じる（タイトルは見せたまま） */
.thumbnail-list .thumbnail-list__img{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition:
    max-height .35s ease,
    opacity .25s ease,
    transform .35s ease;
  pointer-events: none;
}

/* 開いた状態：画像を見せる */
.thumbnail-list.is-open .thumbnail-list__img{
  max-height: 999px; /* 画像高さの上限として十分大きい値 */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.thumbnail-list.is-open{
  display: grid;
  gap: var(--gap-md) var(--gap-md);
  grid-template-columns: repeat(6, 1fr);
}

.thumbnail-list .link-block {
  display: inline-block;
  width: auto;
}
.thumbnail-list .thumbnail-list__item {
  display: inline-block;
  width: auto;
  margin-inline-end: var(--gap-sm);
}
.thumbnail-list .thumbnail-list__item::after{
  content: ",";
  font-size: var(--font-size-h3);
}
.thumbnail-list .thumbnail-list__item:last-child::after{
  content: "";
}
.thumbnail-list.is-open .thumbnail-list__item::after{
  content: "";
  font-size: var(--font-size-h3);
}

.thumbnail-list .thumbnail-list__img {
  display: none;
}
.thumbnail-list.is-open .thumbnail-list__item.thumbnail-list__btn {
  display: none;
}


.thumbnail-list.is-open .link-block {
  display: block;
  width: auto;
}
.thumbnail-list.is-open .thumbnail-list__item {
  display: block;
  width: auto;
  margin-inline-end: 0;
}
.thumbnail-list.is-open .thumbnail-list__img {
  display: block;
  margin-block-end: var(--gap-sm);
}


/* form */

/* =========================
   Contact Form 7 reset
========================= */

.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;

  width: 100%;
  font: inherit;
  color: inherit;
  background: transparent;

  padding: var(--gap-sm);
  border: 1px solid var(--color-body);
  transition: border .15s ease;
}

.wpcf7-form input{
  width: 50%;
}

/* focus時 */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border: 1px solid var(--color-body);
}

/* textarea */
.wpcf7-form textarea {
  resize: vertical;
}

/* ボタンは別デザインにする場合 */
.wpcf7-form input[type="submit"] {
  width: auto;
  cursor: pointer;
  font-size: var(--font-size-h4);
  font-weight: 500;
  border-block-end: var(--border-height) solid var(--color-body);
  border-block-start: 0px;
  border-inline: 0px;
  padding: 0 0 0 0;
}

.wpcf7 {
  width: 100%;
}

.form{
  width: 100%;
  max-width: var(--width-content-md);
}

.form__item {
  margin-block-start: var(--gap-md);
}

.form__item .form__item--label{
  font-size: var(--font-size-body1);
  font-weight: 500;
}

.form__item .form__item--input{
  font-size: var(--font-size-body2);
  margin-block-start: var(--gap-sm);
}



/** Nav **/
html.is-menu-open,
body.is-menu-open {
  overflow: hidden;
}

/* ハンバーガーボタン */
.hamburger {
  position: relative;
  width: 32px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* span 3本 */
.hamburger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: #111;
  transform-origin: center;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    top 0.2s ease,
    bottom 0.2s ease;
  background-color: var(--color-body);
}

.is-projects .hamburger span {
  background-color: var(--color-body-2);
}

/* 上・真ん中・下のライン */
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}

/* 開いているとき（✕ に変形） */
.hamburger.is-open span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(40deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-40deg);
}

/* フルスクリーンメニュー */
.global-nav {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(242,237,225,1);
  color: var(--color-body);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
  padding: var(--gap-lg);
  width: 100%;
}

.global-nav-inner {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  width: 100%;
}

.global-nav__content {
  width: calc(33.3333% - calc(var(--gap) * 2 / 3));
  text-align: left;
}

/* フェードイン＆操作可能に */
.global-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.global-nav__list {
  list-style: disc;
  margin-block-start: var(--gap);
  margin-left: 24px;
  padding: 0;
  font-weight: 500;
}

.global-nav__item + .global-nav__item {
  margin-block-start: var(--gap-sm);
}

.global-nav__item a {
  text-decoration: none;
  line-height: 1.5;
}

.is-projects .global-nav,
.is-projects .global-nav__list ,
.is-projects .global-nav__list h2,
.is-projects .global-nav__list a{
  color: var(--color-body-2) !important;
}


.lg-gb-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) var(--gap-md);
}
.lg-gb-nav-list li {
  display: inline-block;
}

.plain {
  border-bottom: var(--border-height) solid transparent;
}
.active,
.active:hover,
.plain:hover {
  border-bottom: var(--border-height) solid var(--color-body);
}

/** Header **/
#header {
  padding:calc(var(--gap-md) - 16px) 0 var(--gap-md);
  max-width: 100%;
  position: fixed;
  width: 100%;
  background-color: var(--color-bg);
  transition: background-color .3s ease;
  left: 0;
  top: 0;
  z-index: 3;
}

.hero,
#main {
  z-index: 1;
}

/* スクロールダウン時 */
#header.is-transparent {
  background-color: transparent;
}

/** Header **/
#header {
  max-width: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 30;
}

/* =========================
   PC
========================= */
@media (min-width: 768px) {
  #header {
    padding: calc(var(--gap-md) - 16px) 0 var(--gap-md);
    position: fixed;
    background-color: var(--color-bg);
    transition: background-color .3s ease;
  }

  #header.is-transparent {
    background-color: transparent;
  }

  .header__column {
    display: flex;
    flex-wrap: wrap;
  }

  .header__column--right,
  .header__column--left {
    min-height: 48px;
  }

  .header__column--left {
    width: 380px;
    position: relative;
  }

  .header__column--right {
    width: calc(100% - 380px);
  }

  .header__column--left .logo {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 8px;
  }

  .header__column--right.header__column--nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .lg-gb-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--gap-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lg-gb-nav-list li {
    list-style: none;
  }

  .lg-gb-nav-list a {
    display: inline-block;
    white-space: nowrap;
  }

  .mobile-sticky-nav {
    display: none;
  }
}



.logo-home img {
  width: 100%; /* 通常サイズ */
  height: auto;
  transition: width 0.5s ease;
  margin: 0 auto;
  display: block;
}
  /** Main-Hero **/
  .hero {
    overflow: hidden;
    width: 100%;
    height: calc(100svh - 0px);
    position: relative;
  }

  /* 横並びトラック */
  .hero__track {
    display: flex;
    position: relative;
    gap: var(--border-height);
    height: 100%;
    width: max-content;
    animation: heroTicker 80s linear infinite;
    z-index: 1;
  }

  /* 6:4 = 3:2 */
  .hero__item {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
  }

  .hero__item .border-horizontal{
    background-image: url(assets/images/border-vertical.svg);
    background-repeat: repeat-y;
    background-size: 3px auto;
    background-position: right top;
    width: 3px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }

  /* 画像フィット */
  .hero__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ティッカーアニメーション */
  @keyframes heroTicker {
    from {
      transform: translateX(0);
    }
    to {
      /* アイテム半分（1セット分）だけ移動 */
      transform: translateX(-50%);
    }
  }

  .announcement {
    position: fixed;
    right: var(--gap-md);
    bottom:var(--gap-md);
    background-color: var(--color-bg);
    background-color: transparent;
    z-index: 3;
    padding: var(--gap);
  }
  .announcement:hover {
  }

  .announcement a {
    display: inline-block;
    background-color: var(--color-bg);
    line-height: 1;
    padding: var(--gap-sm)  var(--gap-sm);
    transition: background-color .3s ease;
  }
  /* スクロール中 */
  .announcement a.is-scrolling {
    background-color: transparent;
  }

  .announcement .rte p{
    font-size: var(--font-size-h5);
    font-weight: 500;
  }

  .announcement a::before{
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 0;
    top: 0;
    content: url(assets/images/quote-start.svg);
  }

  .announcement a::after{
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0;
    bottom: 0;
    content: url(assets/images/quote-end.svg);
  }

.hero,
#main {
  padding-block-start: 96px;
}
.hero + #main {
  padding-block-start: 0px;
}




/** Footer **/
#footer {
  padding: var(--gap-md) 0;
  text-align: left;
  margin-block-start: var(--gap-lg);
}

#footer .footer__content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.footer__content-block {
  width: 50%;
}
  
  .footer-nav {
    font-size: var(--font-size-nav);
  }
  .footer-nav ul{
    display: flex;
    flex-direction: row;
    flex-direction: row-reverse;
    gap:var(--gap-md) var(--gap-md);
  }
    .footer-nav ul li{
      display: inline-block;
      width: auto;
    }

.icon-instagram {
  display: block;
  width: 32px;
}

.footer-copyright {
  margin-block-start: var(--gap-md);
}

#footer small{
  color: var(--color-body);
  font-size: var(--font-size-body2);
  display: block;
  text-align: left;
}




@media (max-width: 768px) {

  :root {
    --font-size-h1:calc(3.2rem * 0.9);
    --font-size-h2:calc(2.8rem * 0.9);
    --font-size-h3:calc(2.4rem * 0.9);
    --font-size-h4:calc(2.0rem * 0.9);
    --font-size-h5:calc(1.6rem * 0.9);
    --font-size-nav:calc(1.8rem * 0.9);
    --font-size-body1:calc(1.6rem * 0.9);
    --font-size-body2:calc(1.3rem * 0.9);
    --gap-exsm:0.4rem;
    --gap-sm:0.8rem;
    --gap:1.6rem;
    --gap-md:3.2rem;
    --gap-lg:6.4rem;
    --gap-exlg:12.8rem;
    --border-height:3px;
  }

  /** block **/
  .hero,
  #main {
    padding-block-start: 0px;
  }

  .inner {
    padding-inline: var(--gap);
  }

  .sec:first-child {
      margin-block-start: var(--gap);
  }

  .articles-image-flex {
    gap: var(--gap-md) var(--gap-exsm);
  }
  .articles__item.size-ss,
  .articles-image-card.size-ss {
    width: 30%;
  }

  .articles__item.size-s,
  .articles-image-card.size-s {
    width: 30%;
  }
  .articles__item.size-m,
  .articles-image-card.size-m {
    width: 40%;
  }
  .articles__item.size-l,
  .articles-image-card.size-l {
    width: 60%;
  }
  .articles__item.size-xl,
  .articles-image-card.size-xl {
    width: 70%;
  }

  .media__item-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: flex-start;
  }
  .media__item-img {
    width: 100%;
  }
  .media__item-body {
    width: calc(100% - 0px);
    padding-inline-end: 0;
    margin-block-start: var(--gap);
  }

  .rte dl {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: var(--gap-sm) var(--gap-sm);
  }
  .rte dt {
    width: 100%;
  }
  .rte dd {
    width: 100%;
    padding-inline-start: var(--gap);
  }

  /** header **/
  #header {
    position: relative;
    padding: 0;
    background: none;
  }

  .header__column {
    display: block;
  }

  .header__column--left,
  .header__column--right {
    width: 100%;
    min-height: auto;
  }

  .header__column--left {
    position: relative;
    padding: calc(var(--gap-md) - 8px) 0 var(--gap-sm);
  }

  .header__column--left .logo {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
  }

  /* mobileではheader内ナビを非表示 */
  .header__column--nav-desktop {
    display: none;
  }

  .mobile-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 25;
    background-color: var(--color-bg);
    transition: background-color .3s ease;
  }

  .mobile-sticky-nav.is-transparent {
    background-color: transparent;
  }

  .mobile-sticky-nav__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 var(--gap);
  }

  .mobile-sticky-nav__scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-sticky-nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: var(--gap) 0;
    list-style: none;
    scroll-snap-type: x proximity;
  }

  .mobile-sticky-nav__list li {
    flex: 0 0 auto;
    list-style: none;
    scroll-snap-align: start;
  }

  .mobile-sticky-nav__list a {
    display: inline-block;
    white-space: nowrap;
    letter-spacing: 0;
  }

  /* announcement */
  .announcement {
    position: fixed;
    right: var(--gap-sm);
    bottom: var(--gap-md);
    background-color: var(--color-bg);
    background-color: transparent;
    z-index: 3;
    padding: var(--gap);
    width: 100%;
    max-width: calc(100vw - var(--gap-sm) - var(--gap-sm));
  }
  .announcement a {
    display: block;
    background-color: var(--color-bg);
    line-height: 1;
    padding: var(--gap-sm) var(--gap-sm);
    transition: background-color .3s ease;
  }
  .announcement .rte p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* hero */
  .hero {
    height: calc(100svh - 129px);
  }

  .hero__track {
    display: flex;
    flex-direction: column;
    gap: var(--border-height);
    width: 100%;
    height: max-content;
    animation: heroTickerVertical 30s linear infinite;
  }

  .hero__track {
    will-change: transform;
  }

  .hero__item {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .hero__item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* 下 → 上に流れる */
  @keyframes heroTickerVertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-50%);
    }
  }

  /* main */
  .content {
    margin-block-start: var(--gap);
  }
  .horizontal-scroll {
    display: flex;
    gap: var(--border-height);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .horizontal-scroll__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .horizontal-scroll__item img {
    display: block;
    width: auto;
    height: 50svh;
    max-width: none;
    object-fit: contain;
  }

  /* Fields */
  .thumbnail-list {
    display: flex;
    gap: var(--gap-sm);
    flex-direction: column;
  }
  .thumbnail-list .thumbnail-list__item {
    width: 100%;
    display: block;
    margin: 0;
  }
  .thumbnail-list .thumbnail-list__item::after {
      content: ",";
      font-size: var(--font-size-h3);
      display: none;
  }
  .thumbnail-list.is-open {
    display: grid;
    gap: var(--gap-md) var(--gap);
    grid-template-columns: repeat(2, 1fr);
  }
  .flex-media {
    gap: var(--gap) var(--gap);
  }
  .flex-media .flex-media__img {
    width: 100%;
  }
  .flex-media .flex-media__body {
    width: 100%;
  }

  .fields__block--img-block .flex.flex--2cols .flex-item{
   width: 100%;
  }

  .fields__block--img-block .flex.flex--3cols .flex-item{
   width: calc((100% - (var(--gap-sm) * 1)) / 2);
  }

  .fields__block--img-block .flex.flex--4cols .flex-item{
   width: calc((100% - (var(--gap-sm) * 1)) / 2);
  }



  /* footer */
  #footer {
    padding: var(--gap-md) 0;
    text-align: left;
    margin-block-start: var(--gap-md);
    margin-block-end: var(--gap-md);
  }
  #footer .footer__content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: var(--gap);
  }
  .footer-nav {
    font-size: var(--font-size-nav);
    font-weight: 500;
  }
  .footer-nav ul {
    flex-direction: row;
    gap: var(--gap) var(--gap);
  }
  .footer__content-block {
    width: 100%;
  }

}