html {
 scroll-behavior: smooth;
}
#header img {
 object-fit: cover;
 max-height: 506px;
 aspect-ratio: 2/1;
}
.mfp-iframe-scaler {
 padding-top: 56.25% !important;
}
.video_box {
 width: 100%;
 max-width: 500px;
 margin: 0 auto;
 border: 1px solid #7ec6ef;
 position: relative;
}
.video_box:has(.scrollVideo.is-playing) .btn-play2 {
 display: grid !important;
}
video {
 width: 100%;
 aspect-ratio: 16/9;
 vertical-align: bottom;
}
.fallbackImage {
 position: relative;
}
h2 {
 font-size: clamp(1.5em, 3.0vw, 2.5em) !important;
}
.btn-play, .btn-play2 {
 position: absolute;
 top: .5em;
 right: .5em;
 /* translate: -50% -50%; */
 background: #004cff;
 color: #fff;
 line-height: 1;
 padding: 5px 14px 8px 1.7em;
 border-radius: 50px;
 font-size: .9em;
 font-weight: bold;
 &::before, &::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
 }
 &::before {
  background: #fff;
  width: 1em;
  aspect-ratio: 1;
  border-radius: 50px;
  left: 8px;
 }
 &::after {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 6px;
  background: #004cff;
  aspect-ratio: .7;
  left: 13px;
 }
}
.btn-play {
 animation: kakudai 1s 1;
}
@keyframes kakudai {
 0%, 100% {
  transform: scale(1.0);
 }
 50% {
  transform: scale(1.1);
 }
}
h4 {
 position: relative;
}
.mark-sub {
 color: #ffffff;
 padding: 1px 30px 2px;
 border-radius: 40px;
 font-size: 1.5em;
 width: fit-content;
 background-color: #72C6EF;
}
.grid-box {
 display: grid;
 grid-template-columns: 1fr minmax(auto, 50%);
 gap: 1em;
}
.grid-box h4 {
 border: none;
 margin: 0;
 padding: 0;
 font-size: clamp(1.2em, 3.0vw, 2.0em);
 word-break: keep-all;
 overflow-wrap: anywhere;
}
.grid-box > div:first-child {
 display: grid;
 gap: 1em;
 grid-template-rows: max-content max-content;
}

.yurayura.anime-div.move :is(.bata, .doki) {
 animation: yurayura 1s 7;
 transition: cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes yurayura {
 0%, 100% {
  transform: scale(1.0)rotate(-6deg);
 }
 50% {
  transform: scale(1.1);
 }
}
.fade-section{
  transform: translateY(10%);
  opacity: 0;
}
.fade-section.move{
  animation: slide-up .5s ease-out forwards;
}
@keyframes slide-up {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.ag-pc {
 display: block !important;
}
.ag-sp {
 display: none !important;
}
.box-child {
 display: grid;
 grid-template-columns: clamp(60px, 11.0vw, 80px) 1fr;
 /* align-items: center; */
 gap: 1em;
}
.support-box {
 display: grid;
 gap: 1em;
 margin-bottom: 3em;
}
.heading01 {
 display: inline;
 background-image: linear-gradient(rgba(0, 0, 0, 0) 75%, #FEA204 75%);
}
.heading02 {
 display: inline;
 background-image: linear-gradient(rgba(0, 0, 0, 0) 75%, #FFF 75%);
}
.heading {
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}
.heading::before, .heading::after {
 content: '';
 width: 3px;
 height: 40px;
 background-color: #81C5B9;
}
.heading::before {
 margin-right: 30px;
 transform: rotate(-35deg)
}
.heading::after {
 margin-left: 30px;
 transform: rotate(35deg)
}
.sankaku {
 width: 0;
 height: 0;
 border: 100px solid transparent;
 border-top: 50px solid #F7FAFC;
 text-align: center;
 margin: 0 auto;
 margin-bottom: -50px !important;
 overflow: hidden;
}
.sankaku3 {
 position: absolute;
 bottom: -49px;
 left: 50%;
 translate: -50% 0;
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 width: auto;
 height: 60px;
 background: #ace3e9;
 aspect-ratio: 10/3;
}
.inner:has(.howto-n) {
 padding-top: 90px;
}
/*トップイメージ*/
.top-img {
 width: 100%;
}
.top-img img {
 width: inherit;
 height: auto;
}
.top-img-s {
 display: none;
}
/*すぐできる*/
.howto-n {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
 margin: 2em 0;
}
.howto-n .howto-box {
 background: #ffffff;
 position: relative;
 border-radius: 7px;
 border: 1px solid #72C6EF;
}
.howto-n .howto-box:not(:last-child)::after {
 content: "";
 position: absolute;
 translate: 0 -50%;
 left: 100%;
 top: 50%;
 clip-path: polygon(0 0, 100% 50%, 0 100%);
 background: #72C6EF;
 width: 14px;
 aspect-ratio: .3;
}
.howto-n .howto-box .sub-title {
 background: #72C6EF;
 padding: 8px 8px 8px 8px;
 text-align: center;
 color: #FFF;
 font-weight: bold;
 letter-spacing: 0.05em;
 border-radius: 7px 7px 0px 0px;
 font-size: clamp(1.0em, 2.0vw, 1.3em);
}
.howto-n .howto-box .howto-box2 {
 padding: 30px 20px
}
.howto-n .howto-box .howto-box2 .howto-img {
 width: 100%;
 margin-right: 40px;
 padding-bottom: 10px;
}
.howto-n .howto-box .howto-box2 .howto-img img {
 width: 100%;
 height: auto;
}
.howto-n .howto-box .howto-txt {
 /* margin: 10px 0 0; */
 /* letter-spacing: 0.05rem; */
 width: 100%;
 text-align: center;
}
.btn-primary2 a {
 /*	position: absolute;
	bottom: 0;
	left: 30px;*/
 width: 60%;
 font-size: 0.8em;
 font-weight: bold;
 text-align: center;
 background: #6495ed;
 border-radius: 50px;
 display: block;
 color: #fff;
 -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 letter-spacing: 0.05rem;
 padding: 5px;
 margin: 20px auto 0;
}
.btn-primary2 a:hover {
 opacity: 0.8;
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
}
h2.anime-div > span {
 display: inline;
 background: linear-gradient(transparent 60%, rgb(141, 207, 244) 60%, rgb(141, 207, 244) 100%) 0% 60% / 0% 1em no-repeat;
 transition: 1.5s ease-out;
 word-break: keep-all;
 overflow-wrap: anywhere;
}
h2.anime-div.colorwhite > span {
 background: linear-gradient(transparent 60%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%) 0% 60% / 0% 1em no-repeat;
}
h2.anime-div.move > span {
 background-size: 100% 1em;
}
h2.anime-div + h3 {
 font-size: clamp(1.2em, 3.0vw, 1.6em);
 margin: 1em 0;
 font-weight: 500;
 word-break: keep-all;
 overflow-wrap: anywhere;
 line-height: 1.5;
}
/* ==追加== */
h3 {
 text-align: center !important;
}
h3 img {
 width: inherit;
 height: auto;
}
h4 {
 font-size: 1.5em;
}
/* 横2列 */
.w2 {
 display: flex;
}
.w2 div:first-child {
 padding-right: 30px !important;
 padding-bottom: 10px;
}
.sup-title {
 margin-bottom: .3em !important;
}
/* スライダー */
.slider-n {
 border: 1px solid #ccc;
 width: 70%;
 margin: 0 auto;
 text-align: center;
 padding: 20px;
}
.slider {
 margin: 0px auto 0;
 max-width: 500px; /*    width: 80%;*/
}
.slick-img img {
 height: auto;
 width: 100%;
}
.slick-prev, .slick-next {
 width: fit-content;
 aspect-ratio: 1;
}
.slick-prev {
 left: -25px !important;
}
.slick-next {
 right: -25px !important;
}
.slick-prev:before, .slick-next:before {
 font-size: 25px;
}
/*====男性ガッツポーズ=====*/
.lead {
 display: flex;
 flex-wrap: wrap;
 align-items: stretch;
}
.lead-z {
 background: #fff;
 padding: 30px;
 padding-bottom: 10px;
 border-radius: 7px;
 width: 93.5% !important;
 margin-left: -15px !important;
}
.lead div.lead-txt {
 width: 70%;
 text-align: left;
 margin-right: 0px !important;
}
.lead div.lead-txt img {
 width: auto !important;
 height: auto;
}
.lead div.lead-img {
 width: 30%;
 text-align: right;
 padding-top: 20px !important;
}
.lead div.lead-img img {
 width: 100% !important;
 height: auto;
 margin-top: -80px !important;
}
.lead div.lead-img-z img {
 width: 100% !important;
 height: auto;
}
.inner-box {
 display: grid;
 grid-template-columns: 1fr 30%;
 max-width: 1000px;
 margin: 0 auto;
 align-items: center;
 gap: 1em;
}
.lead-img {
 padding: .3em;
}
.movebox.mainbox {
 padding: 0 .5em;
}
.yurayura h3 {
 text-shadow: 2px 2px 4px #ffffff;
 color: #38586F;
 word-break: keep-all;
 overflow-wrap: anywhere;
 display: flex;
 line-height: 1;
 align-items: end;
 font-size: clamp(1.0em, 3.2vw, 2.0em);
 justify-content: center;
 letter-spacing: -.4px;
 > span {
  font-size: 1.8em;
  position: relative;
  bottom: -3px;
  padding: 0 5px;
 }
}
.movebox > .yurayura > div > div {
 display: grid;
 font-weight: bold;
 align-items: center;
 gap: .2em;
 text-shadow: 2px 2px 4px #ffffff;
 margin: 0 auto;
 padding: 0;
}
.movebox > .yurayura > div > .nencho-logo-box {
 font-size: clamp(1.2em, 4.0vw, 2.0em);
}
.nencho-logo-box {
 grid-template-columns: auto 1fr auto;
}
.nencho-logo-box img {
 filter: drop-shadow(2px 2px 2px #fff);
}
.batbata-box > .heading02 {
 display: grid;
 grid-template-columns: auto auto max-content;
 align-items: baseline;
 gap: 5px;
 font-size: clamp(1.1em, 2.8vw, 1.7em);
 width: fit-content;
 margin: 0 auto;
}
.bata {
 max-width: 150px;
 margin-right: 10px;
 transform: rotate(-6deg);
}
.doki {
 max-width: 140px;
 margin-right: 10px;
 transform: rotate(-6deg);
 margin-bottom: -6px;
}
#footer-fixed .panel {
 display: block;
 background: #ffffffd9;
 box-shadow: 0 0 13px 3px rgba(20, 29, 29, .1);
}
.order-link a {
 border-radius: 5px;
}
#footer-fixed .panel > .inner {
 padding: 0;
}
/*==================== ボタン ===================*/
.btn-primary.center a {
 margin-left: auto;
 margin-right: auto;
}
.btn-primary a {
 font-weight: bold;
 text-align: center;
 /*  width: 500px;*/
 width: 60%;
 background: #6495ed;
 border-radius: 50px;
 display: block;
 color: #FFF;
 -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 letter-spacing: 0.05rem;
 padding: 15px;
 margin: 20px auto;
 text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
 box-shadow: 10px 10px 15px -10px;
 border: 2px solid #fff;
 font-size: 1.2em;
}
.btn-primary a:hover {
 opacity: 0.8;
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
}
/* ボタン2 */
.btn-primary2 a {
 /*	position: absolute;
	bottom: 0;
	left: 30px;*/
 width: 60%;
 font-weight: bold;
 text-align: center;
 background: #004cff;
 border-radius: 50px;
 display: block;
 color: #fff;
 -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 letter-spacing: 0.05rem;
 padding: 5px;
 margin: 0px auto;
}
.btn-primary2 a:hover {
 opacity: 0.8;
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
}
/*Webデモ*/
.s-icon {
 background: #ff4500;
 color: #fff;
 text-align: center;
 font-weight: bold;
 font-size: 0.8em;
 border-radius: 4px;
 padding: 5px 10px; /*		width: 200px!important;*/
}
.webdemo-img {
 margin: 50px 10px 10px;
}
.webdemo-btn a {
 display: block;
 background: #fff;
 text-align: center;
 border-radius: 50px;
 border: 2px solid #38586F;
 color: #38586F;
 font-weight: bold;
 padding: 6px;
 position: relative;
 font-size: 1em;
}
.webdemo-btn {
 padding: 5px 0 0;
 max-width: 50%;
 margin: 0 auto;
 text-align: center;
}
.order-subcatch {
 font-size: 1.5em;
 font-weight: 600;
 color: #fff;
}
.btn-subtext {
 font-size: 18px;
 color: #505eaf;
 text-shadow: none;
}
/*-- ページトップ重ね順 --*/
.pagetop {
 z-index: 2 !important;
}
/*==================== ボタン ===================*/
.btn-primary.center a {
 margin-left: auto;
 margin-right: auto;
}
.btn-primary a {
 font-weight: bold;
 text-align: center;
 /*  width: 500px;*/
 width: 60%;
 background: #f4c813;
 border-radius: 50px;
 display: block;
 color: #FFF;
 -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
 letter-spacing: 0.05rem;
 padding: 15px;
 margin: 20px auto;
 text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
 box-shadow: 10px 10px 15px -10px;
 border: 2px solid #fff;
 font-size: 1.2em;
}
.btn-primary a:hover {
 opacity: 0.8;
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
}
.mfp-slick .mfp-iframe-holder .mfp-content {
 max-width: 1000px;
}
.mfp-slick .mfp-content .mfp-iframe-scaler {
 padding-top: 70% !important;
}
@media only screen and (max-width:1000px) {
 .btn-primary a {
  width: 70%;
 }
 .btn-primary a {
  width: 70%;
 }
}
@media only screen and (max-width:768px) {
 .inner-box {
  grid-template-columns: 1fr;
  padding: 1em 0;
 }
 .lead-img {
  max-width: 300px;
  margin: 0 auto;
 }
 .heading02 > span {
  display: block;
 }
 .w2 {
  display: block;
  width: 100%;
 }
 .w2 div:first-child {
  width: 100%;
  /*	font-size: 1.5rem;*/
  margin-bottom: 20px;
  line-height: 2.5rem;
  padding-right: 0px !important;
 }
 .grid-box {
  grid-template-columns: 1fr;
 }
 .grid-box:has(.slider) {
  display: flex;
  flex-direction: column;
 }
 .lead {
  display: block !important;
 }
 .lead div.lead-txt {
  width: auto; /*	  text-align: center;*/
 }
 .lead div.lead-txt-left {
  width: auto;
  text-align: left !important;
 }
 .lead div.lead-img {
  width: auto;
  text-align: center !important;
  margin-top: 20px;
 }
 .lead div.lead-img img {
  width: 70% !important;
  margin-top: -100px !important;
 }
 .lead-z {
  width: auto !important;
  margin-left: 0px !important;
 }
 .btn-primary a {
  width: 90%;
  font-size: 1.2em !important;
  width: 100% !important;
 }
 .btn-primary a {
  width: 90%;
  font-size: 1.2em !important;
  width: 100% !important;
 }
 .howto-n {
  grid-template-columns: 1fr;
  gap: 25px;
 }
 .howto-n .howto-box:not(:last-child)::after {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  translate: -50% 0;
  left: 50%;
  bottom: -20px;
  top: auto;
  aspect-ratio: 3;
  width: auto;
  height: 20px;
 }
 .center img {
  width: 100%;
 }
 .ag-slider {
  display: none !important;
 }
}
@media only screen and (max-width:640px) {
 .ag-pc {
  display: none !important;
 }
 .ag-sp {
  display: block !important;
 }
 .webdemo-img {
  margin: 10px;
 }
 .order-subcatch {
  font-size: 1.1em;
  color: #fff;
 }
 .btn-subtext {
  font-size: 15px;
  line-height: 10px !important;
 }
}
@media only screen and (max-width:480px) {
 .batbata-box > .heading02 {
  font-size: clamp(1.0em, 2.8vw, 1.7em);
 }
}