@charset "UTF-8";
/*

Cosmos content CSS for LP
create 2025/10/06

*/
/* = LP Only Style
============================================================================== */
/* = Header
-------------------------------------------------------------------------- */
.btn-product:before {
  background-image: url(../images/icon.png);
  background-size: auto 100%;
}

/* = Hero Element
-------------------------------------------------------------------------- */
#hero {
  position: relative;
  margin: 0;
  background: url("../images/main-bk.jpg") no-repeat 50% 50%;
  background-size: cover;
  color: #fff;
  font-weight: bold;
}
#hero img {
  max-width: 100%;
}

#hero-wrap {
  height: 580px;
  padding: 0 2.5vw 0 10vw;
}

#hero-txt {
  min-width: calc(29em/1920 *100vw);
  margin-right: 3rem;
  font-size: 1.25rem;
  max-width: 580px;
  flex-basis: 36%;
}

#hero-img {
  flex-basis: 64%;
}

/* = Navi Element
-------------------------------------------------------------------------- */
#related {
  padding: 1.2rem 5vw;
  background: #222222;
  color: #fff;
  font-size: 0.875rem;
}
#related span {
  display: inline-block;
  white-space: nowrap;
}
#related a {
  display: inline-block;
  margin-left: 1.5rem;
}
#related a img {
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
}
#related a img:hover {
  opacity: 0.8;
}

/* = Image transparency  Element 
-------------------------------------------------------------------------- */
.imgGlad-wrap {
  position: relative;
  min-height: 850px;
  background: #e4f1cc url(../images/about-l.jpg) no-repeat 0 0;
  background-size: auto 100%;
}
.imgGlad-wrap:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 25%, #d6eab3 42%);
  content: "";
}

.imgGlad-txt {
  padding: 5rem 2vw 5rem 38vw;
  position: relative;
  z-index: 2;
}

/* = About  Element
-------------------------------------------------------------------------- */
#about .title {
  border: none;
}
#about ul {
  padding: 0;
}
#about ul li {
  list-style: none;
  margin: 1rem 0;
  padding: 1.5rem;
  background: #fff;
}
#about ul li strong {
  color: #3f8500;
  font-size: 1.25rem;
}

/* = Point  Element
-------------------------------------------------------------------------- */
#point {
  margin-bottom: 3.75rem;
}
#point .card-title {
  font-size: calc(1.35rem + 1.2vw);
  font-weight: bold;
  text-align: center;
}
@media (min-width: 1200px) {
  #point .card-title {
    font-size: 2.25rem;
  }
}

/* = Model  Element
-------------------------------------------------------------------------- */
#model {
  margin-top: 3rem;
}

/* = Example  Element
-------------------------------------------------------------------------- */
.example-3, .example-4 {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 3rem 2.25rem;
}
.example-3 video, .example-4 video {
  padding: 0 !important;
}
.example-3 img, .example-4 img {
  align-self: flex-start;
}

.video-input, .video_model {
  position: relative;
  width: 62%;
  padding-right: calc(85/1920*100vw);
}
.video-input:after, .video_model:after {
  display: block;
  position: absolute;
  top: 40%;
  right: 0;
  width: calc(80/1920*100vw);
  height: calc(80/1920*100vw);
  background: url("../images/arrow-horizontal.svg") no-repeat 50% 50%;
  background-position: center;
  content: '';
}

.video-output {
  width: 38%;
}

.video_model {
  align-content: center;
  width: 20%;
  padding-left: 0;
  color: #fff;
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
}
.video_model span {
  display: block;
  padding: 3rem 2px;
  overflow-x: hidden;
  background: #76b900;
}

.video_name, .video_name_green {
  display: flex;
  color: #000;
  font-weight: bold;
  font-size: calc(1.305rem + 0.66vw);
  line-height: 1;
}
@media (min-width: 1200px) {
  .video_name, .video_name_green {
    font-size: 1.8rem;
  }
}
.video_name span, .video_name_green span {
  display: inline-block;
  margin: 0 0 1.2rem 0.9rem;
  padding: 0.45rem 0.75rem;
  background: #222222;
  color: #fff;
  font-weight: normal;
  font-size: 1rem;
}

.video_name_green {
  color: #1fa506;
}

.example-4 .video-input, .example-4 .video_model {
  width: 50%;
}
.example-4 .video-input:after, .example-4 .video_model:after {
  right: 1%;
}
.example-4 .video_model {
  width: 20%;
}
.example-4 .video_model span {
  padding: 6rem 0;
}
.example-4 .video_model:after {
  right: -1%;
}
.example-4 .video-output {
  width: 30%;
}

/* = Video  Element
-------------------------------------------------------------------------- */
.ex-video {
  margin: 1.5rem auto;
}
.ex-video .inner {
  padding-top: 1.5rem;
}
.ex-video video {
  padding: 0.75rem 2.25rem 2.25rem;
}

.video_icon {
  align-content: center;
  width: 100px;
  height: 110px;
  background: #222222;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
}
.video_icon span {
  display: block;
  font-weight: bold;
  font-size: 1.875rem;
  line-height: 1.1;
}

.video_ttl {
  flex: 1;
  padding: 1.8rem;
  font-size: calc(1.3125rem + 0.75vw);
  line-height: 1.1;
}
@media (min-width: 1200px) {
  .video_ttl {
    font-size: 1.875rem;
  }
}
.video_ttl span {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: bold;
  font-size: 1.125rem;
  line-height: 1.5;
}

.video-next, .video-next-narrow, .prompt-next {
  position: relative;
  padding-right: calc(100/1920*100vw);
}
.video-next:after, .video-next-narrow:after, .prompt-next:after {
  display: block;
  position: absolute;
  top: 40%;
  right: 0;
  width: calc(80/1920*100vw);
  height: calc(80/1920*100vw);
  background: url("../images/arrow-horizontal.svg") no-repeat 50% 50%;
  background-position: center;
  content: '';
}

.video-next-narrow {
  padding-right: 90px;
}
.video-next-narrow:after {
  right: 4px;
}

/* = Prompt  Element
-------------------------------------------------------------------------- */
.ex-prompt {
  margin: 1.5rem auto;
}
.ex-prompt .inner-wide {
  margin-top: 1.5rem;
}
.ex-prompt dl {
  margin: 0;
  text-align: left;
}
.ex-prompt dl dt {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0 0.75rem;
  background: #222222;
  color: #fff;
  font-weight: normal;
  font-size: 1.2rem;
}
.ex-prompt dl dd {
  margin-bottom: 1.2rem;
}
.ex-prompt dl .prompt {
  padding: 1.2rem 1.5rem;
  background: #fff;
}
.ex-prompt dl .prompt span {
  display: block;
  margin-bottom: 0.7em;
  font-weight: normal;
  font-size: 1rem;
}
.ex-prompt dl .prompt .en {
  line-height: 1.4;
  font-family: serif;
  word-break: break-all;
  word-wrap: break-word;
}
.ex-prompt dl .prompt .ja {
  color: #3f8500;
}

.prompt-inner {
  padding: 20px;
  background: #fff;
  line-height: 1.2;
  font-family: serif;
  text-align: justify;
  word-break: break-all;
  text-justify: inter-character;
}
.prompt-inner .en {
  font-size: 0.8rem;
}

/* = Original Banner  Element
-------------------------------------------------------------------------- */
.bn-product {
  background-image: url(../images/bn-back.jpg);
  background-position: 80px 50%;
}

/* =Break Point
============================================================================== */
/* =XL
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  /* =  Image transparency  Element */
  .imgGlad-wrap {
    background-position: 50% 0;
  }

  /* = Example  Element */
  .example-4 .video-input, .example-4 .video_model {
    width: 40%;
  }
  .example-4 .video-input .col:nth-of-type(1), .example-4 .video_model .col:nth-of-type(1) {
    margin-bottom: 1.5rem;
  }
  .example-4 .video-input:after, .example-4 .video_model:after {
    top: 20%;
  }
  .example-4 .video_model {
    align-self: flex-start;
    width: 24%;
  }
  .example-4 .video_model span {
    padding: 65% 0;
  }
  .example-4 .video_model:after {
    top: 28%;
  }
  .example-4 .video-output {
    width: 36%;
  }
}
/* =LG
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* =  Hero Element */
  #hero-wrap {
    flex-direction: column;
    height: auto;
    padding: 0;
  }

  #hero-txt {
    order: 2;
    width: auto;
    margin: 4vw 6vw;
    font-size: 1rem;
  }

  #hero-img {
    order: 1;
    margin-top: 4vw;
  }

  /* =  Image transparency  Element */
  .imgGlad-wrap {
    min-height: auto;
    padding-top: calc(750/1200*100vw);
    background: #d6eab3 url(../images/about-s.jpg) no-repeat 0 0;
    background-size: contain;
  }
  .imgGlad-wrap:before {
    content: none;
  }

  .imgGlad-txt {
    padding: 2rem 0;
  }

  /* = Video  Element */
  .video-next, .video-next-narrow, .prompt-next {
    padding: 0 0 80px;
  }
  .video-next:after, .video-next-narrow:after, .prompt-next:after {
    top: inherit;
    right: calc(50% - 40px);
    bottom: 0;
    width: 80px;
    height: 80px;
    background-image: url("../images/arrow-vertical.svg");
  }

  /* = Example  Element */
  .example-3, .example-4 {
    flex-direction: column;
    align-items: center;
  }

  .video-input, .video_model {
    width: 100%;
    padding-right: 0;
    padding-bottom: 100px;
  }
  .video-input:after, .video_model:after {
    top: inherit;
    right: calc(50% - 40px);
    bottom: 1.5%;
    width: 80px;
    height: 80px;
    background: url("../images/arrow-vertical.svg") no-repeat 50% 50%;
  }

  .video-output {
    width: 100%;
  }

  .video_model {
    width: 100%;
  }

  .example-4 .col:nth-of-type(1) {
    margin-bottom: 0.375rem !important;
  }
  .example-4 .video-input, .example-4 .video_model {
    width: 100%;
  }
  .example-4 .video-input:after, .example-4 .video_model:after {
    top: inherit;
    right: calc(50% - 40px);
    bottom: 1.5%;
  }
  .example-4 .video_model {
    width: 100%;
  }
  .example-4 .video_model span {
    padding: 3rem 0;
  }
  .example-4 .video_model:after {
    top: inherit;
    right: calc(50% - 40px);
    bottom: 1.5%;
  }
  .example-4 .video-output {
    width: 100%;
  }

  /* =Original Banner  Element*/
  .bn-product {
    background-position: 150px 50%;
    text-align: center;
  }
  .bn-product .btn-custum-mini {
    width: 70%;
  }
}
/* =MD
-------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* =Video  Element*/
  .ex-video .d-flex, .ex-prompt .d-flex {
    flex-direction: column;
  }
  .ex-video video, .ex-prompt video {
    padding: 0.15rem 1.2rem 1.5rem;
  }

  .ex-video .inner {
    padding: 1.5rem;
  }

  .video_icon {
    width: 100%;
    height: auto;
    padding: 0.9rem;
    font-size: 1.25rem;
    text-align: left;
  }
  .video_icon span {
    display: inline;
    margin-left: 0.375rem;
    font-size: 1.5rem;
  }

  .video_ttl {
    padding: 1.2rem;
    font-size: calc(1.275rem + 0.3vw);
  }
}
@media (max-width: 767.98px) and (min-width: 1200px) {
  .video_ttl {
    font-size: 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .video_ttl span {
    margin-bottom: 0.75rem;
    font-size: 1rem;
  }

  .video-next, .video-next-narrow, .prompt-next {
    padding: 0 0 60px;
  }
  .video-next:after, .video-next-narrow:after, .prompt-next:after {
    right: calc(50% - 30px);
    width: 60px;
    height: 60px;
  }

  .prompt-next:after {
    bottom: 0;
  }

  .ex-prompt {
    padding: 0;
  }
  .ex-prompt dl .prompt {
    margin-right: 0;
    margin-left: 0;
    padding: 0.9rem;
  }
  .ex-prompt dl .prompt .en {
    font-size: 0.9rem;
  }
  .ex-prompt dl .prompt .ja {
    font-size: 0.85rem;
  }

  /* = Example  Element */
  .example-3, .example-4 {
    padding: 0.5rem;
  }

  .video-input, .video_model {
    margin-bottom: 0.3rem;
    padding-bottom: 50px;
  }
  .video-input:after, .video_model:after {
    right: calc(50% - 25px);
    bottom: -10px;
    width: 50px;
    height: 50px;
  }

  .prompt-next:after {
    right: calc(50% - 25px);
    bottom: 12px;
    width: 50px;
    height: 50px;
  }

  .video_model span {
    padding: 1.5rem 0;
  }

  .example-4 {
    align-items: center;
  }
  .example-4 .video-input:after, .example-4 .video_model:after {
    right: calc(50% - 30px);
    bottom: 0;
  }
  .example-4 .video_model span {
    padding: 1.5rem 0;
  }
  .example-4 .video_model:after {
    bottom: -0.3rem;
  }

  .modal-dialog {
    /* 必要であれば最大幅を設定 */
    /* max-width: 90vw; */
    overflow-x: auto;
    /* 横スクロールバーを有効にする */
  }
}
/* =SM
-------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* = About  Element */
  #about ul li {
    margin: 1rem 0;
    padding: 1.05rem;
  }

  /* = Example  Element */
  .video-output .video_name, .video-output .video_name_green {
    margin-top: 0.75rem;
  }

  .video_name, .video_name_green {
    margin-top: 1.5rem;
  }

  .col:nth-of-type(1) .video_name, .col:nth-of-type(1) .video_name_green {
    margin-top: 0;
  }

  /* =Original Banner  Element*/
  .bn-product .btn-custum-mini {
    width: 100%;
  }
}