@charset "UTF-8";
 /*
Theme Name: FiND !T
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:#e83817;
  --color-body: #212529;
  --color-bg: #FFFFFF;
  --color-bg-secondary: #e9ecef;
  --color-bg-remarks: #e9ecef;
  --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.0rem;
  --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:640px;
  --border-height:3px;
}


html {
  font-size: 62.5%;
}

body {
  border: solid 0px var(--color-wh);
  background: var(--color-wh);
  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;
}


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: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--color-body);
}

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

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



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

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

h5,
.h5{
  font-size: var(--font-size-h5);
  font-weight: 600;
}

a h1,
a h2,
a h3,
a h4,
a h5 {
  color: var(--color-theme);
}


.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);
}
.rte p a,
.rte li a,
.rte dl a {
  border-bottom: 1px solid var(--color-body);
}

.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: var(--gap-sm); /* ← 行間 */
}

.rte dt {
  margin: 0;
}

.rte dd {
  margin: 0;
}

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

.rte dl ul {
  margin-block: 0px;
}

/** element **/
.sm-nav{
  display: none;
}
 .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: var(--gap);
}

.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);
}


.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-body1);
  font-weight: 400;
  display: inline-block;
  padding: var(--gap-sm) var(--gap);
  line-height: 1;
  border: 1px solid var(--color-body);
  width: auto;
  min-width: 120px;
  text-align: center;
}

.btn.btn-primary,
.btn.btn-secondary:hover {
  background-color: var(--color-theme);
  color: var(--color-bg);
  border: 1px solid var(--color-theme);
}

.btn.btn-secondary,
.btn.btn-primary:hover{
  background-color: var(--color-bg);
  color: var(--color-theme);
  border: 1px solid var(--color-theme);
}

.arrow-btn {
  --arrow-size: 28px;
  --border-color: #333;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 44px 14px 28px;
  text-decoration: none;
  color: #111;
  background: transparent;
}

.label {
  font-size: var(--font-size-body2);
  font-weight: 400;
  display: inline-block;
  padding: 8px 8px;
  line-height: 1;
  border: 1px solid var(--color-theme);
  color: var(--color-theme);
  letter-spacing: 0.2ex;
}
.label.label-secondary {
  font-size: var(--font-size-body2);
  font-weight: 400;
  display: inline-block;
  padding: 8px 8px;
  line-height: 1;
  border: 1px solid var(--color-theme);
  color: var(--color-theme);
  letter-spacing: 0.2ex;
  border-radius: 16px;
}

.label.label-link {
  border: 1px solid var(--color-theme);
  color: var(--color-wh);
  background-color: var(--color-theme);
}

.label.label-link:hover{
  border: 1px solid var(--color-theme);
  color: var(--color-theme) !important;
  background-color: var(--color-wh);
}

.post-info {
  margin-block-start: var(--gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
}

.point .point__text{
  text-decoration: none !important;
  border-bottom: 0px;
}

.related-item:hover .label {
  border: 1px solid var(--color-body);
  color: var(--color-body);
}

.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: 0;
}

.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);
}

.sec__description {
 padding: var(--gap-md);
 margin-block-start: var(--gap);
 background-color: var(--color-na);
 width: 100%;
}


/* 開いてるグループだけ表示 */
.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 {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.articles__item,
.articles__item .articles__link{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--gap-md);
  flex-direction: row-reverse;
}

.articles__title {
  font-size: var(--font-size-h3);
}
.articles__item .articles__link:hover {
  filter: saturate(0);
}
.articles__item .articles__link:hover .articles__title{
  color: var(--color-body);
}
.articles__item .articles__link:hover .label{
  color: var(--color-body);
  border: 1px solid var(--color-body);
}

.articles__item {
  padding-block: var(--gap-md);
  border-bottom: 1px solid var(--color-body);
}


.articles__image{
  width: 40%;
  max-width: var(--width-content-sm);
}

.articles__image img{
  width: 100%;
  aspect-ratio: 6 / 4;
  object-fit: cover;
  display: block;
}

.articles__body {
  width: calc(60% - var(--gap-md));
  min-width: calc(100% - var(--gap-md) - var(--width-content-sm));
}

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

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

.articles__info {
  margin-block-start: var(--gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
}

.articles__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.articles__date {
  font-size: var(--font-size-body2);
  margin-block-start: var(--gap-sm);
  display: block;
  width: 100%;
}

.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{
  padding-block: var(--gap-lg);
}

.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: 60svh;
  max-width: none;
  object-fit: contain;
}

  .horizontal-scroll__item:first-child{
    padding-inline-start: var(--gap-lg);
  }



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

.content__outline {
  margin-block:var(--gap-lg);
}

.content__outline .article-tags {
  margin-block-start: var(--gap);
}

.content__info {
  margin-block-start: var(--gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
}
  .rte .content__info ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }

.content__cat,
.content__tags {
  width: 100%;
}

.content__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}


.articles__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.content__outline .content__inner {
  background-color: var(--color-bg-remarks);
  padding: var(--gap-md);
  max-width: var(--width-content-md);
}


.related-item {

}

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

.related-item:hover{
  filter: saturate(0);
}


.related-item:hover .related-item__title{
  color: var(--color-body);
}


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

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

/** Fields **/
.fields {
  margin-block-start: var(--gap-lg);
}

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

.fields__block .inner {
  max-width: calc(calc(var(--gap-lg) * 2) + calc(var(--width-content-md) * 2));
}

.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-lg);
}

.fields__block.fields__block--title + .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--definition-list .rte{
}

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

.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__block--point .point-list{
  list-style: disc;
  list-style-position: outside;
  padding-left: var(--gap-md);
}
.point-list__item {
}

.fields .fields__block--remarks .text-body{
  padding: var(--gap-md);
  background-color: var( --color-bg-remarks);
  width: 100%;
}

.fields__block--imgslider {
  overflow: hidden;
}

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

.remarks-logo {
  display: block;
  width: 120px;
}

.article-info {
  margin-block-start: var(--gap);
}
  .article-tags{
    margin-block-start: var(--gap-sm);
  }

  .article-info time{
    display: block;
    margin-block-start: var(--gap);
  }

  .article-info h2 {
    display: inline;
    width: auto;
    font-size: var(--font-size-h5);
  }

  .article-info .article-cat,
  .article-info .article-tags {
    display: flex;
    align-items: baseline; /* テキストの高さを揃える */
    gap: 8px; /* "Category:" とリストの間 */
  }
  .article-info .articles__categories,
  .article-info .article-tags__list {
    display: flex;
    flex-wrap: wrap; /* 折り返しOKなら */
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

.article-tags {
}

  .article-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }
    .article-tags__item{
      display: inline-block;
    }
    .article-tags__label,
    .article-tags__link {
      font-size: var(--font-size-body2);
      padding: calc(var(--gap-sm) / 2) 12px;
      border: 1px solid var(--color-theme);
      border-radius: var(--gap-md);
      line-height:1;
      color: var(--color-theme);
    }
    .article-tags__link:hover {
      padding: calc(var(--gap-sm) / 2) 12px;
      border: 1px solid var(--color-theme);
      border-radius: var(--gap-md);
      line-height:1;
      background-color: var(--color-theme);
      color: var(--color-wh);
    }

.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: 1px solid var(--color-theme);
  padding: var(--gap-sm) var(--gap);
  background-color: var(--color-theme);
  color: #FFFFFF;
  min-width: 240px;
  text-align: center;
}
.wpcf7-form input[type="submit"]:hover {
  width: auto;
  cursor: pointer;
  font-size: var(--font-size-h4);
  font-weight: 500;
  border: 1px solid var(--color-theme);
  padding: var(--gap-sm) var(--gap);
  background-color: #FFFFFF;
  color: var(--color-theme);
  min-width: 240px;
  text-align: center;
}

.wpcf7 {
  width: 100%;
}

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

.form__item {
  width: 100%;
}

.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);
}

/** Search **/

.main-search .sec__title-wrap {
  display: flex;
  align-items: baseline; /* 文字の高さ揃える */
  gap: var(--gap-sm);
}
.main-search .sec__title-wrap h1 {
  display: inline;
  width:auto;
}
.search-result-count {
  font-size: var(--font-size-h3);
}

.filter-toggle {
  cursor: pointer;
}

.site-filter {
  position: relative;
  width: 100%;
  background-color: var(--color-bg-secondary);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.site-filter.is-open {
  max-height: 1000px;
  opacity: 1;
  margin-block: var(--gap);
}

.site-filter .site-filter__form {
  padding-block: 0;
}

.site-filter.is-open .site-filter__form {
  padding-block: var(--gap-md);
}

/* 開いた状態 */
.site-filter.is-open {
  max-height: 1000px; /* 十分大きい値 */
  opacity: 1;
}

.site-filter {
  transform: translateY(-10px);
}

.site-filter.is-open {
  transform: translateY(0);
}


.site-filter__group + .site-filter__group {
  margin-block-start: var(--gap-md);
}

.site-filter__group .site-filter__title {
  font-size: var(--font-size-h4);
  color: var(--color-body);
}
  .site-filter__checks {
    font-size: var(--font-size-body1);
    color: var(--color-body);
  }
  .site-filter__checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }

  .site-filter__group input[type="search"] {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 100%;
    max-width: 480px;
  }

  .site-filter__check {
    position: relative;
    padding: 5px 16px 4px;
  }

  .site-filter__check input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 1px solid var(--color-body);
    z-index: 1;
  }


  .site-filter__check.site-filter__check--tag input[type="checkbox"] {
    border-radius: 32px;
  }

  .site-filter__check input[type="checkbox"]:checked {
    border: 1px solid var(--color-theme);
  }
  .site-filter__check input[type="checkbox"]:checked + span{
    z-index: 2;
    position: relative;
    color: var(--color-wh);
  }

  .site-filter__check-demo:hover input[type="checkbox"] {
    border: 1px solid var(--color-theme);
    background-color: var(--color-theme);
  }

  .site-filter__check-demo:hover input[type="checkbox"] + span{
    color: var(--color-wh) !important;
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

/* =========================
   checkbox reset
========================= */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  font: inherit;
  color: inherit;
  vertical-align: middle;
  cursor: pointer;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-body);
}
input[type="checkbox"]:checked {
  background-color: var(--color-theme);
}

/* iOS / Safariの癖を減らす */
input[type="checkbox"]::-ms-check {
  display: none;
}

/* =========================
   search reset
========================= */
.site-filter__title {
  margin-block-end: var(--gap-sm);
}
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  font: inherit;
  color: inherit;
  width: 100%;
  border: 1px solid var(--color-body);
  height: 32px;
  padding: 0 8px;
  font-size: var(--font-size-body2);
}

/* Safariの丸みや装飾を外す */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* IE系のクリアボタン対策 */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.site-filter__actions {
  margin-block-start: var(--gap-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.pagination {
  margin-top: 3rem;
}

.pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

/** 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;
}

.nav__list{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) var(--gap-md);
}

.nav__list li{
  display: inline-block;
}

#header button,
.plain {
  color: var(--color-theme);
}

#header button:hover,
.search-results #header button,
.active,
.active:hover,
.plain:hover {
  color: var(--color-body);
}

/** Search **/
.filter-panel[hidden] {
  display: none !important;
}

.filter-panel {
  padding: 1.5rem 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.filter-form {
  display: grid;
  gap: 1.5rem;
}

.filter-form__group {
  display: grid;
  gap: 0.75rem;
}

.filter-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.filter-form__check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.filter-form__input {
  width: 100%;
  max-width: 32rem;
}

.filter-form__actions {
  display: flex;
  gap: 1rem;
}

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

.logo {
  width: 180px;
  fill: var(--color-theme);
}
.logo:hover {
  width: 180px;
  fill: var(--color-body);
}

.logo a svg{
  display: block;
}

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

.main-tag,
.main-category,
.main-search{
  margin-block-start: var(--gap-lg);
}

/* スクロールダウン時 */
#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: var(--gap-md) 0 var(--gap);
    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 {
  }

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

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

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

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


  .nav__list li{
    list-style: none;
  }

  .nav__list a{
    display: inline-block;
    white-space: nowrap;
  }

}



.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;
  will-change: transform;
  transform: translateZ(0);
}

.hero__item {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  transform: translateZ(0);
}

.hero__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

@keyframes heroTicker {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

  .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: 2;
    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);
  }




/** 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;
  align-items: center;
}
.footer__content-block {
  width: 50%;
}
  
  .footer-nav {
    font-size: var(--font-size-nav);
    font-weight: 500;
  }
  .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;
    }

.logo-tokyu{
  display: block;
  width: 96px;
}

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

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

.home .display-announcement .footer-copyright{
  margin-block-start: var(--gap-lg);
}

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

.lang {
  font-size: var(--font-size-nav);
  display: flex;
  flex-wrap: wrap;
}
.lang__label{
  display: inline-block;
  padding-inline-end: var(--gap-sm);
}

.gt_selector{
  display: inline-block;
  font-size: var(--font-size-nav);
  border-top: 0px solid var(--color-bg);
  border-right: 0px solid var(--color-bg);
  border-left: 0px solid var(--color-bg);
  border-bottom: 0px solid var(--color-body);
  padding-block: 4px;
  color: var(--color-body) !important;
  text-align: left;
}
  select:focus {
    outline: none;
    border-top: 0px solid var(--color-body);
    border-right: 0px solid var(--color-bg);
    border-left: 0px solid var(--color-bg);
    border-bottom: 3px solid var(--color-body);
  }
  a:focus {
    outline: none;
  }

@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;
  }

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

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

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

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

  .main-tag,
  .main-category,
  .main-search {
    margin-block-start: var(--gap);
  }

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

  .articles {

  }

  .articles__item {
    padding-block: var(--gap);
  }

  .articles__item, .articles__item .articles__link {
    gap: var(--gap);
  }

  .articles__body .articles__text {
    margin-block-start: var(--gap);
  }

  .related {
    gap: var(--gap);
  }
  .related-item {
    border-bottom:1px solid var(--color-body);
    padding-block-end: var(--gap);
  }

  .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 {
    padding: var(--gap) 0;
    display: flex;
    flex-wrap: wrap;
  }

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

  .header__column--right {
    width: calc(100% - 160px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
  }

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

  .logo {
    width: 160px;
    fill: var(--color-theme);
  }
  .nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
  }
  .nav__list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap) var(--gap);
    flex-direction: row-reverse;
    align-items: center;
  }
  .nav__list li.nav__cat {
    display: none;
  }
    .js-filter-toggle {
      width: 24PX;
      height: 24PX;
      text-indent: -1000px;
      background: url(assets/images/icon-search.svg);
      background-size: contain;
    }


  .articles__image {
    width: 100%;
    max-width: 100%;
  }
  .articles__body {
    width: 100%;
  }

  .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;
  }


  .sm-nav{
    display: block;
    position: sticky;
    width: 100%;
    padding-block: var(--gap);
    top: 0;
    left: 0;
    background-color: #FFFFFF;
  }
  .sm-nav ul{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }

  /* Search */
  .site-filter__group input[type="search"] {
    max-width: calc(100vw - calc(var(--gap) * 2) - 16px);
  }

  /* main */
  .content {
    margin-block: var(--gap);
    padding: 0;
  }
  .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: 30svh;
    max-width: none;
    object-fit: contain;
  }
  .horizontal-scroll__item:first-child{
    padding-inline-start: var(--gap);
  }

  .sec {
    gap: var(--gap) 0;
    margin-block-start: var(--gap-lg);
  }

  .sec__description {
   padding: var(--gap);
  }

  /* Fields */
  .content__outline {
    margin-block: var(--gap);
  }
  .content__outline .content__inner {
    padding: var(--gap);
  }
  .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);
  }

  .fields {
    margin-block-start: var(--gap);
  }
  .fields__block.fields__block--index {
    margin-block-end: var(--gap-md);
  }
  .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);
  }

  .fields .fields__block--remarks .text-body {
    padding: var(--gap);
    width: 100%;
  } 




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

  .plain.link-top {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    background-color: var(--color-wh);
    border: 1px solid var(--color-theme);
    position: relative;
  }
  .link-top__icon {
    width: 32px;
    height: 32px;
    background-color: var(--color-wh);
    background: url(assets/images/icon-arrow-up.svg) center / 12px auto no-repeat;
    position: absolute;
    left: -1px;
    top:0;
  }
  .link-top__label {
    display: none;
  }

}