@charset "UTF-8";
/*----------------------------------------------

  BLOCK ITEMS

----------------------------------------------*/
/*----------------------------------------------

 レイアウト調整

----------------------------------------------*/
.l-contents:has(.youtubePage-contents) {
  padding-bottom: 0;
}

/*----------------------------------------------

 YOUUBE PAGE CONTENTS

----------------------------------------------*/
.youtubePage-contents {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: min( calc( 30 / var(--screen-width) * 100vw ), 55px );
  height: inherit;
  /*---------------------------------------
   heading
  ---------------------------------------*/
  /*---------------------------------------
   body
  ---------------------------------------*/
}
.youtubePage-contents__heading {
  display: grid;
}
.youtubePage-contents__heading h1 {
  font-size: min( calc( 24 / var(--screen-width) * 100vw ), 35px );
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.1em;
}
.youtubePage-contents__heading small {
  display: block;
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 14px );
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  text-align: center;
  letter-spacing: 0.1em;
}
.youtubePage-contents__body {
  flex: 1;
  display: grid;
  gap: min( calc( 45 / var(--screen-width) * 100vw ), 65px );
  position: relative;
  padding: min( calc( 30 / var(--screen-width) * 100vw ), 50px ) 0 min( calc( 40 / var(--screen-width) * 100vw ), 60px );
  /* section
  ---------------------------------------*/
  /* strength
  ---------------------------------------*/
  /* performance
  ---------------------------------------*/
  /* support
  ---------------------------------------*/
  /* operation-flow 
  ---------------------------------------*/
  /* contents-making
  ---------------------------------------*/
  /* unicorn-tv
  ---------------------------------------*/
}
.youtubePage-contents__body:before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.youtubePage-contents__body > section {
  display: grid;
  gap: min( calc( 25 / var(--screen-width) * 100vw ), 35px );
}
.youtubePage-contents__body > section h2 {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 20px );
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  padding-bottom: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
  border-bottom: 1px solid #B5B5B5;
}
.youtubePage-contents__body > section > p {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .youtubePage-contents__body > section > p {
    text-align: center;
  }
}
.youtubePage-contents__body .strength .list {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 20px );
}
@media (min-width: 768px) {
  .youtubePage-contents__body .strength .list {
    display: flex;
  }
}
.youtubePage-contents__body .strength .list dl {
  --color: rgb( from var(--color__text) r g b / 0.1 );
  box-shadow: 0 0 10px var(--color);
  background-color: #fff;
  padding: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
  position: relative;
  width: 100%;
}
.youtubePage-contents__body .strength .list dl dt {
  font-size: min( calc( 12 / var(--screen-width) * 100vw ), 12px );
  font-weight: bold;
  color: #fff;
  text-align: center;
  width: min( calc( 70 / var(--screen-width) * 100vw ), 70px );
  line-height: 1.2;
  padding: min( calc( 3 / var(--screen-width) * 100vw ), 3px );
  background-color: var(--color__text);
  position: absolute;
  top: 0;
  left: 0;
}
.youtubePage-contents__body .strength .list dl dd {
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
}
.youtubePage-contents__body .strength .list dl dd picture {
  display: block;
  height: min( calc( 80 / var(--screen-width) * 100vw ), 80px );
}
.youtubePage-contents__body .strength .list dl dd picture img {
  display: block;
  width: auto;
  height: 100%;
  margin: auto;
}
.youtubePage-contents__body .strength .list dl dd p {
  font-size: min( calc( 16 / var(--screen-width) * 100vw ), 16px );
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
}
.youtubePage-contents__body .performance .list {
  display: grid;
  gap: min( calc( 20 / var(--screen-width) * 100vw ), 25px );
}
@media (min-width: 768px) {
  .youtubePage-contents__body .performance .list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.youtubePage-contents__body .performance .list figure {
  position: relative;
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
}
.youtubePage-contents__body .performance .list figure a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.youtubePage-contents__body .performance .list figure picture {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.youtubePage-contents__body .performance .list figure picture img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.youtubePage-contents__body .performance .list figure figcaption {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.youtubePage-contents__body .support .flow {
  list-style: none;
  display: grid;
  gap: min( calc( 60 / var(--screen-width) * 100vw ), 60px );
}
@media (min-width: 768px) {
  .youtubePage-contents__body .support .flow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.youtubePage-contents__body .support .flow > li {
  background-color: #EAEDF0;
  position: relative;
  padding: min( calc( 25 / var(--screen-width) * 100vw ), 25px ) min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
  align-content: flex-start;
}
.youtubePage-contents__body .support .flow > li:before {
  content: "";
  display: block;
  --url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 25' width='45' height='25' fill='none' stroke='%23000'><path vector-effect='non-scaling-stroke' d='M2.04,12.17h39.93'/><path vector-effect='non-scaling-stroke' d='M22.79,1.29l19.18,10.96-19.18,11.46'/></svg>");
  mask-image: var(--url);
  -webkit-mask-image: var(--url);
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: var(--color__text);
  width: min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, max( calc( -15 / var(--screen-width) * 100vw ), -15px )) rotate(90deg);
}
.youtubePage-contents__body .support .flow > li:first-child:before {
  content: none;
}
@media (min-width: 768px) {
  .youtubePage-contents__body .support .flow > li:before {
    width: min( calc( 45 / var(--screen-width) * 100vw ), 45px );
    left: auto;
    bottom: auto;
    top: 50%;
    right: 100%;
    transform: translate(max( calc( -7.5 / var(--screen-width) * 100vw ), -7.5px ), -50%);
  }
}
.youtubePage-contents__body .support .flow > li header {
  font-size: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  font-weight: bold;
  line-height: 1.5;
  display: grid;
  gap: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  text-align: center;
}
.youtubePage-contents__body .support .flow > li header small {
  display: block;
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-family: "Roboto", sans-serif;
}
.youtubePage-contents__body .support .flow > li ul {
  list-style: none;
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
}
.youtubePage-contents__body .support .flow > li ul > li {
  background-color: #fff;
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  font-weight: 500;
  line-height: 1.5;
  padding: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  text-align: center;
}
.youtubePage-contents__body .operation-flow .flow {
  display: grid;
  gap: min( calc( 55 / var(--screen-width) * 100vw ), 55px );
  list-style: none;
}
@media (min-width: 768px) {
  .youtubePage-contents__body .operation-flow .flow {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 0 min( calc( 65 / var(--screen-width) * 100vw ), 65px );
  }
  .youtubePage-contents__body .operation-flow .flow:after {
    content: "";
    display: block;
    --url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 855 70' width='855' height='70'><path d='M24.85,49.87l-10.93,19.11L2.5,49.87h22.35Z'/><path vector-effect='non-scaling-stroke' stroke='%23000' fill='none' d='M823.39,1.16v28.03H13.67v22.91'/><path vector-effect='non-scaling-stroke' stroke='%23000' fill='none' d='M793.02,1.01h59.48'/></svg>");
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
    mask-size: contain;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color__text);
    aspect-ratio: 855/70;
    width: 83.5%;
    grid-column: 1/-1;
    grid-row: 2/3;
    margin: min( calc( 15 / var(--screen-width) * 100vw ), 15px ) auto;
  }
}
.youtubePage-contents__body .operation-flow .flow > li {
  position: relative;
}
.youtubePage-contents__body .operation-flow .flow > li:before {
  content: "";
  display: block;
  --url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25' width='20' height='25'><path d='M0,23.71l19.18-11.46L0,1.29v22.43Z'/></svg>");
  mask-image: var(--url);
  -webkit-mask-image: var(--url);
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--color__text);
  width: min( calc( 25 / var(--screen-width) * 100vw ), 25px );
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, max( calc( -15 / var(--screen-width) * 100vw ), -15px )) rotate(90deg);
}
.youtubePage-contents__body .operation-flow .flow > li:first-child:before {
  content: none;
}
@media (min-width: 768px) {
  .youtubePage-contents__body .operation-flow .flow > li:before {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    bottom: auto;
    mask-size: min( calc( 25 / var(--screen-width) * 100vw ), 25px );
    -webkit-mask-size: min( calc( 25 / var(--screen-width) * 100vw ), 25px );
    transform: none;
    transform: translateX(-50%) translateX(max( calc( -30 / var(--screen-width) * 100vw ), -30px ));
    aspect-ratio: 1;
  }
  .youtubePage-contents__body .operation-flow .flow > li:nth-child(5):before {
    content: none;
  }
}
.youtubePage-contents__body .operation-flow .flow figure {
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
}
.youtubePage-contents__body .operation-flow .flow figure picture {
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  background-color: #EAEDF0;
  padding: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  align-content: center;
}
.youtubePage-contents__body .operation-flow .flow figure picture img {
  display: block;
  width: auto;
  height: min( calc( 85 / var(--screen-width) * 100vw ), 85px );
  margin: auto;
}
.youtubePage-contents__body .operation-flow .flow figure picture header {
  font-size: min( calc( 16 / var(--screen-width) * 100vw ), 16px );
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}
.youtubePage-contents__body .operation-flow .flow figure figcaption {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .youtubePage-contents__body .operation-flow .flow figure picture {
    aspect-ratio: 200/180;
  }
}
.youtubePage-contents__body .contents-making > section {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 25px );
}
.youtubePage-contents__body .contents-making > section h3 {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}
.youtubePage-contents__body .contents-making > section ul {
  list-style: none;
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
}
.youtubePage-contents__body .contents-making > section ul > li {
  --color: rgb( from var(--color__text) r g b / 0.1 );
  box-shadow: 0 0 10px var(--color);
  background-color: #fff;
  padding: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
}
@media (min-width: 768px) {
  .youtubePage-contents__body .contents-making > section ul {
    grid-template-columns: repeat(3, 1fr);
    gap: min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  }
}
.youtubePage-contents__body .contents-making > section figure {
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
}
.youtubePage-contents__body .contents-making > section figure picture {
  display: block;
}
.youtubePage-contents__body .contents-making > section figure picture img {
  display: block;
  width: 100%;
  height: auto;
}
.youtubePage-contents__body .contents-making > section figure figcaption {
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-family: "Roboto", sans-serif;
}
.youtubePage-contents__body .contents-making > section figure figcaption header {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  line-height: 1.2;
  padding: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  background-color: var(--color__text);
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.youtubePage-contents__body .contents-making > section figure figcaption p {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.youtubePage-contents__body .unicorn-tv figure {
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.youtubePage-contents__body .unicorn-tv figure picture {
  display: block;
}
.youtubePage-contents__body .unicorn-tv figure picture img {
  display: block;
  width: auto;
  height: 100%;
}
@media (min-width: 768px) {
  .youtubePage-contents__body .unicorn-tv figure {
    height: min( calc( 250 / var(--screen-width) * 100vw ), 250px );
    display: flex;
    justify-content: center;
  }
}
/*# sourceMappingURL=page-youtube.css.map */