@charset "utf-8";

html { scroll-behavior: smooth; }
#globalMain, #globalContents{ overflow: visible; }
#globalWrapper { box-sizing: border-box; }


/* Variables & Setup -------------------- */
:root {
  scroll-padding: 100px;
}

.osmo-container-wrapper {
  container-type: inline-size;
  container-name: osmo-container-wrapper;
}

.osmo-container * { box-sizing: border-box; }

:root .osmo-container {
  --color-black: #000;
  --color-lightgray: #eee;
  --color-white: #fff;
}


/* common -------------------- */ 
.osmo-container {
  max-width: 1120px;
  margin-inline: auto;
  padding-bottom: 2rem;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.4;
@container osmo-container-wrapper (max-width: 768px) {
  font-size: 14px;
}
@container osmo-container-wrapper (max-width: 350px) {
  font-size: 13px;
}
  & section{
    padding-block: 2rem;
  }

  & .inner{
    padding-inline: 2rem;
  }

  & figure{ 
    text-align: center;
    overflow: hidden;
  }

  & img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  & a{
    color: inherit;
    text-decoration: none;
  }

  & span{
    color: inherit;
    font-weight: inherit;
  }
}


/* PC用
#globalContents  */

/* スマホ用
#wrapper */




/* element -------------------- */
/* 文章 */
.osmo-container .paragraph{
  line-height: 1.7;
  /* text-align: justify; */

  & + .paragraph{
    margin-top: .5rem;
  }
}

/* Section-by-section -------------------- */
/* FV -------------------- */
.sec-fv .heading-g{
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 0.05em;
  & > h2{
    max-width: 300px;
  }
@container osmo-container-wrapper (max-width: 600px) {
  & > h2{
    max-width: 250px;
  }
}
@container osmo-container-wrapper (max-width: 414px) {
  & > h2{
    max-width: 200px;
  }
}
}

/* Product -------------------- */
.osmo-container .sec-product{
  background-color: var(--color-lightgray);
}

.sec-product .product-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  & > li{
    border-radius: 1.5rem;
    background-color: var(--color-white);
    overflow: hidden;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  }
  & > li:last-child{
    grid-column: span 3;
  }
  & > li > a{
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .5rem;
    height: 100%;
    padding-bottom: .75rem;
    &:hover{
      opacity: 0.5;
    }
  }
@container osmo-container-wrapper (max-width: 600px) {
  grid-template-columns: repeat(2, 1fr);
  & > li:last-child{
    grid-column: span 2;
  }
}
@container osmo-container-wrapper (max-width: 600px) {
  grid-template-columns: 100%;
  & > li:last-child{
    grid-column: span 1;
  }
}
}

.sec-product .layout-wrapper{
  display: contents;
@container osmo-container-wrapper (max-width: 600px) {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-inline: .5rem;
}
}

.sec-product .ttl{
  display: grid;
  place-items: center;
  padding: .5rem 1rem;
  background-color: var(--color-black);
  color: var(--color-white);
}

.sec-product .desc {
  flex: 1;
  padding-inline: 1rem;
  font-size: 85%;
}

.sec-product .image-block{
  height: 110px;
  & > img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
&.osmo-action{
  height: 80px;
}
@container osmo-container-wrapper (max-width: 600px) {
  width: 120px;
&.osmo-action{
  height: inherit;
}
}
@container osmo-container-wrapper (max-width: 600px) {
  width: 100px;
}
}