.sp {
  display: none;
}
h1 {
  font-size:clamp(1.125rem, 0.84rem + 1.18vw, 1.125rem);
  text-align: center;
  color: #fff;
  margin-top: 1.2em;
  display: none;
}

h2 {
  font-size: clamp(1.625rem, 1.184rem + 1.18vw, 2.125rem);
  text-align: center;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
.reason h2,.point h2,.rank h2,.works h2,.price h2,.flow h2,.optionplan h2 {
    margin-bottom: 1.5em;    
}
.youtube_movie {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}
.youtube_movie:hover {
  filter: brightness(0.9);
}
.youtube_movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
     height: 100%;
}
.youtube_movie img {
    position: absolute;
    z-index: 2;
    top: 0;
}
.youtube_movie img:hover {
    cursor: pointer;
}
.movie img.play {
    position: absolute;
    z-index: 3;
    width: 10%;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
}
.mainvis {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: max(40svh,700px);
  position: relative;
  z-index: 1;
}
.mainvis::before {
  content: "";
  background: #000 url(../images/top/bg_black.jpg) no-repeat bottom;
  background-size: 100% auto;
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.btn {
  width: min(100%,580px);
  margin: 30px auto 0 auto;
  background: linear-gradient(0deg, rgba(188,0,0,1) 8%, rgba(255,0,0,1) 75%, rgba(255,0,0,1) 100%);
  border-radius: 999px;
  filter: drop-shadow(7px 7px 5px rgba(0,0,0,30%));
  overflow: hidden;
}
.btn[data-color="blue"] {
  background: linear-gradient(0deg, rgba(29,42,84,1) 0%, rgba(0,159,232,1) 100%);
}
.btn[data-color="gold"] {
  background: linear-gradient(0deg, rgba(166,125,34,1) 0%, rgba(230,195,129,1) 73%, rgba(247,240,227,1) 100%);
}
.btn[data-color="brown"] {
  background: linear-gradient(0deg, rgba(66,18,19,1) 22%, rgba(158,128,87,1) 100%);
}
.btn[data-color="purple"] {
  background: linear-gradient(0deg, rgba(27,20,75,1) 22%, rgba(101,96,150,1) 100%);
}
.btn[data-color="ligtblue"] {
  background: linear-gradient(0deg, rgba(0,91,151,1) 0%, rgba(0,117,190,1) 14%, rgba(30,156,215,1) 56%, rgba(120,173,226,1) 100%);
}
.btn[data-color="brown2"] {
background: linear-gradient(0deg, rgba(66,18,19,1) 22%, rgba(158,128,87,1) 100%);
}
.btn a {
  color: #fff;
  font-size: 1.438em;
  font-weight: 700;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.btn br { display: none; }
.btn br.sp { display: none!important; }
.btn a::after {
  content: "";
  display: inline-block;
  width: 23px;
  height: 23px;
  background: url(../images/common/ic_arrow.svg) no-repeat;
  background-size: 100% auto;
  margin-left: 15px;
  transition: .3s;
}
.btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0;
  transition: .3s;
}

.btn em {
  font-style: normal;
}
.btn + p {
  margin-top: 10px;
  font-size: 0.875em;
  color: #fff;
}

.reason figure {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.reason p {
    font-size: clamp(1.188rem, 0.56rem + 0.55vw, 1.438rem);
    font-weight: bold;
    padding-left: 2em;
    line-height: 2;
}
.reason p span {
    color: #E60000;
}
.reason p span.big {
    font-size: clamp(1rem, 0.727rem + 1.36vw, 1.75rem);
}
.point,.optionplan,.reason,.flow,.rank,.works,.price,.contact-title {
  position: relative;
  z-index: 0;
}
.optionplan::before,.reason::before,.flow::before,.rank::before,.works::before,.price::before,.contact-title::before {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  z-index: -1;
}
.optionplan::before,.reason::before,.rank::before,.price::before {
  background: #fff;
}
.works::before {
    background: #F3F3F3;
}

.point,.reason,.rank,.works,.price,.optionplan,.flow {
  padding: 50px 0;
}
.movie{
width: 80%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
padding: 8% 4% 4% 4%;/*ここで動画の周りの余白を調整*/
background: #e6e6e6;/*余白の背景色*/
}
video.mve_main {
width: 100%;
max-width: 640px;/*PC版での最大幅*/
margin: 40px auto 0;
}
.point,.flow {
    color: white;
}
.point::before,.flow::before {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #002B6B;
  margin: 0 calc(50% - 50vw);
  z-index: -1;
}
.point .lead p {
    font-size: clamp(1rem, 0.727rem + 1.36vw, 1.75rem);
    font-weight: bold;
}
.point .lead p span {
    font-size: 70%;
}
.point strong {
  color: var(--sub-color);
}
.point h3 {
  font-size: clamp(1.875rem, 1.268rem + 1.62vw, 2.563rem);
  text-align: center;
  line-height: 1.707em;
}
.point h3::before,.point h3::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.point h3::before {
  width: min(15%,147px);
  aspect-ratio: 1 / 1;
  background-image: url(../images/top/ic_point.svg);
  left: -2%;
  top: -12%;
}
.point h3::after {
  width: min(16%,156px);
  aspect-ratio: 156 / 196;
  background-image: url(../images/top/img_point02.png);
  right: 0;
  bottom: -10px;
}
.point h3 strong {
  color: var(--sub-color);
  letter-spacing: -0.05em;
}
.point .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.point .flex .txt {
  width: 100%;
  margin-top: 85px;
  position: relative;
}
.point .flex .img {
  width: min(42%,420px);
  margin-top: 85px;
}
.point h4 {
  font-size: clamp(1.25rem, 1.044rem + 1.03vw, 1.688rem);
  padding-left: min(30%,155px);
  position: relative;
  display: flex;
  align-items: center;
  color: #FFF829;
}
.point .txt::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: min(25%,128px);
    aspect-ratio: 1 / 1;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.point .txt[data-no="1"]::before {
  background-image: url(../images/top/ic_point01.svg);
}
.point .txt[data-no="2"]::before {
  background-image: url(../images/top/ic_point02.svg);
}
.point .txt[data-no="3"]::before {
  background-image: url(../images/top/ic_point03.svg);
}
.point .flex .txt p {
    margin-top: 1em;
    line-height: 1.563em;
    padding-left: min(30%,155px);
}
.rank .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rank .flex {
    margin-bottom: 4em;
}
.rank .flex .frame {
    display: flex;
    background: #D8E8FF;
    border-radius: 15px;
    padding: 2em;
    width: 70%;
    margin-right: 2em;
}
.rank .flex .frame ul li {
    line-height: 2;
    margin-right: 2em;
    font-weight: 600;
    font-size: 0.85rem;
}
.rank .flex picture {
    flex-shrink: 0;
    width: 38%;
}
.research .title {
    color: #E60000;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.5em;
    font-size: clamp(2.375rem, 1.404rem + 3.75vw, 3.75rem);
    line-height: 1;
}
.research .title span {
    font-size: 60%;
    color: black;
}
.research .title br {
    display: none;
}
.research .flex picture {
    display: table;
    flex-shrink: 0;
    width: auto;
}
.research .conclusion {
    background: url(../images/top/research_frame.svg) no-repeat center;
    background-size: 100% 100%;
    padding: 2em 4em 2em 1em;
    position: relative;
    width: 100%;
    font-size: clamp(0.938rem, 0.584rem + 1.37vw, 1.438rem);
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
}
.research .conclusion:after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: min(16%,156px);
    aspect-ratio: 156 / 196;
    background-image: url(../images/top/img_point02.png);
    right: 0;
    bottom: -10px;    
}
.works {
  text-align: center;
}
.works p {
    font-size: 1.250rem;
    font-weight: bold;
}
.works table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
}
.works table th,
.works table td {
    border: 4px solid #F3F3F3;
}
.works table th {
    color: white;
    font-size: clamp(1rem, 0.735rem + 1.02vw, 1.375rem);
    font-weight: bold;
    padding: 1.5em 1em;
    background: #002B6B;
}
.works table td {
    padding: 0.5em 1em;
    font-weight: bold;
    font-size: clamp(0.875rem, 0.787rem + 0.34vw, 1rem);
}
.works table td:nth-child(odd) {
    background: #D1D0D0;
}
.works table td:nth-child(even) {
    background: white;
}
.works table td span:first-of-type {
    font-size: clamp(1.125rem, 0.816rem + 1.19vw, 1.563rem);
    color: #E60000;
}
.works table td span:nth-of-type(2) {
    font-size: clamp(1rem, 0.823rem + 0.68vw, 1.25rem);
}
.works table td:nth-child(3) {
    font-size: 13px;
    white-space: nowrap;
}
.price table {
    border-collapse: collapse;
}
.price table th {
    background: #002B6B;
    padding: 1.5em 2em;
    text-align: center;
}
.price table th,
.price table td {
    border: 4px white;
    font-weight: bold;
}
.price table th p {
    line-height: 1.5;
}
.price table th p:first-of-type {
    color: #FFF829;
    font-size: clamp(1.875rem, 1.433rem + 1.71vw, 2.5rem);
}
.price table th p:nth-of-type(2) {
    color: white;
}
.price table th p:first-of-type span:first-of-type,
.price table th p:first-of-type span:nth-of-type(2) {
    font-size: 60%;
}
.price table th p:first-of-type span:nth-of-type(3) {
    font-size: 40%;
}
.price table th p:nth-of-type(2) {
    font-size: 14px;
}
.price table td {
    padding: 2em 2em;
    background: #D8E8FF;
    display: flex;
    justify-content: space-between;
    line-height: 1;
    align-items: center;
}
.price table td .box {
    border-radius: 10px;
    background: white;
    padding: 2em;
}
.price table td .sentence, .price table td .box {
    width: 48%;
}
.price table td dl {
    margin-bottom: 0.8em;
    display: flex;
    justify-content: space-between;
    padding: 0 0.5em 0.8em 0.5em;
}
.price table td dl.top {
    border-bottom: 6px solid #BAC5D7;
}
.price table td dl {
    border-bottom: 1px solid #BAC5D7;
}
.price table td dl:last-of-type {
    margin-bottom: 0;
}
.price table td dl dt {
    font-size: clamp(0.813rem, 0.724rem + 0.34vw, 0.938rem);
}
.price table td dl.top dd {
    font-size: clamp(1.125rem, 0.948rem + 0.68vw, 1.375rem);
}
.price table td dl.top dd span:first-of-type {
    font-size: 80%;
}
.price table td dl.top dd span:nth-last-of-type(2) {
    font-size: 60%;
}
.price table td dl dd {
    font-size: clamp(1rem, 0.912rem + 0.34vw, 1.125rem);
}
.price table td dl dd span {
    font-size: 70%;
}
.price table td p {
    font-size: clamp(0.813rem, 0.768rem + 0.17vw, 0.875rem);
    letter-spacing: 0.05em;
    line-height: 1.8;
}
.price table td p:first-child {
    margin-bottom: 2em;
}
.flow .wrap {
    background: white;
    width: 100%;
    padding: 6em;
}
.flow ul {
    font-weight: bold;
}
.flow ul dl {
    z-index: 4;
    position: relative;
}
.flow ul dt {
    font-size: clamp(1.375rem, 0.801rem + 2.22vw, 2.188rem);
    line-height: 1;
    margin-bottom: 0.6em;
    color: #002B6B;
}
.flow ul li {
    padding: 2em;
    position: relative;
    z-index: 1;
}
.flow ul.zero dt {
    color: #FFF829;
}
.flow ul.zero dd {
    color: white;
}
.flow ul.zero p {
    position: absolute;
    background: #6D90C7;
    padding: 1.5em;
    color: white;
    text-align: center;
    bottom: -1.5em;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    left: 50%;
    right: 0;
    display: block;
    width: 90%;
    line-height: 1;
    z-index: 3;
    border-radius: 10px;
    bottom: -2em;
    font-size: clamp(0.813rem, 0.768rem + 0.17vw, 0.875rem);
}
.flow ul.zero p:before {
    content: "";
    width:0;
    height:0;
    display: table;
    border-style:solid;
    border-width: 0 33px 20px 33px;
    border-color: transparent transparent #6D90C7 transparent;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px); 
    left: 50%;
    right: 0;
    position: absolute;
    top: -20px;
}
.flow ul.one li {
    border: 6px solid #000;
    box-shadow: 15px 15px 0px -5px #000000;
    margin-bottom: 4em;
}
.flow ul.one li:last-child {
    margin-bottom: 0;
}
.flow ul.one li:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 45px 0 45px;
    border-color: #002B6B transparent transparent transparent;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    left: 50%;
    right: 0;
    bottom: -60px;
}
.flow ul.one li:last-child:after {
    content: none;
}
.flow ul dd {
    font-size: clamp(0.813rem, 0.768rem + 0.17vw, 0.875rem);
    line-height: 1.5;
}
.flow ul.one dd {
    color: black;
}
.flow ul.zero li {
    background: #002B6B;
    margin-bottom: 5em;
    padding: 2em 2em 4em 2em;
}
.flow ul.zero li:before {
    background-image: url(../images/top/flow_num_0.png);
    left: -5%;
    top: -15%;
    width: 10%;
}
.flow ul.one li:before {
    left: -4%;
    top: -20%;
    width: 8.5%;
}
.flow ul.one li:first-child:before {
    background-image: url(../images/top/flow_num_1.png);
}
.flow ul.one li:nth-child(2):before {
    background-image: url(../images/top/flow_num_2.png);
}
.flow ul.one li:nth-child(3):before {
    background-image: url(../images/top/flow_num_3.png);
}
.flow ul li:before {
    content: "";
    aspect-ratio: 1 / 1;
    display: table;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 5;
}
.flow ul.zero li:after {
    content: "";
    width: 100%;
    height: 100%;
    border: 6px solid #002B6B;
    position: absolute;
    right: -0.8em;
    bottom: -0.8em;
    z-index: 2;
}
.optionplan h3 {
    font-size: clamp(1.25rem, 1.029rem + 0.85vw, 1.563rem);
    text-align: center;
    font-weight: bold;
    line-height: 1;
    padding: 1em 0;
    width: 100%;
    margin-bottom: 2em;
    background: #002B6B;
    border-radius: 10px;
    color: white;
}
.optionplan ul {
    margin-bottom: 2em;
}
.optionplan ul li {
    display: flex;
    align-items: center;
    line-height: 2.5;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: bold;
}
.optionplan ul li:before {
    content: "";
    width: 1.15em;
    aspect-ratio: 1 / 1;
    margin-right: 0.5em;
    display: table;
    background: url(../images/top/optionplan_icon.svg) no-repeat left;
    background-size: contain;
    flex-shrink: 0;
}
.optionplan .flex {
    display: flex;
    align-items: center;
    margin-bottom: 5em;
}
.optionplan .flex picture {
    flex-shrink: 0;
    display: table;
    padding-left: 2em;
}
.optionplan .flex .note {
    font-weight: bold;
    line-height: 2;
    font-size: clamp(0.813rem, 0.68rem + 0.51vw, 1rem);
}
.optionplan .box {
    border-radius: 15px;
    background: #E6E7E8;
    padding: 3em 4em;
}
.optionplan .box picture {
    display: table;
    margin: 0 auto 1em auto;
}
.optionplan .box p.word {
    text-indent: -999em;
    background: white url(../images/top/optionplan_catch.png) no-repeat center;
    background-size: 90%;
    display: table;
    padding: 0 1em 5em 1em;
    font-size: 1em;
    border-radius: 10px;
    box-shadow: 12px 12px 0px -5px #000000;
    margin: 0 auto 3em auto;
    width: 100%;
}
.optionplan .box .text {
    background: #373737;
    border-radius: 10px;
    color: white;
    padding: 2.5em 4em;
}
.optionplan .box .text dl {
    margin-bottom: 1em;
    font-weight: bold;
    letter-spacing: 0.08em;
    font-feature-settings: "palt";
}
.optionplan .box .text dt {
    font-size: clamp(0.875rem, 0.698rem + 0.68vw, 1.125rem);
    line-height: 1;
    margin-bottom: 1.5em;
}
.optionplan .box .text dd {
    font-size: clamp(1.125rem, 0.595rem + 2.05vw, 1.875rem);  
    line-height: 1.5;
}
.optionplan .box .text dd span {
    color: #FFF829;
}
.optionplan .box .text p.note {
    font-size: clamp(0.813rem, 0.768rem + 0.17vw, 0.875rem);
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: 0.08em;
}
.contact-title {
    color: white;
    background: black;
    padding: 50px 0 0 0;
}
.contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 80px 0 75px;
  position: relative;
  z-index: 0;
}
.contact.bg::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  top: 0;
  left: 0;
  background: url(../images/common/bg_contact.jpg) no-repeat bottom left;
  background-size: 100% auto;
  z-index: -1;
}
.contact figure {
  width: min(23.2%, 232px);
}
.contact .txt {
  color: #fff;
  width: min(73%, 730px);
}
.contact p {
  font-size: clamp(1.875rem, 1.287rem + 2.94vw, 3.125rem);
  font-weight: 700;
  text-align: center;
  font-feature-settings: "palt";
}
.contact p strong {
  font-size: clamp(1.875rem, 0.846rem + 5.15vw, 4.063rem);
}
.contact p span {
  font-size: clamp(1.125rem, 0.794rem + 0.88vw, 1.5rem);
}
.contact p span.second {
    font-size: clamp(1.875rem, 1.287rem + 2.94vw, 3.125rem);
}
.contact p em {
  font-style: normal;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}
.contact p em::after {
  content: attr(data-tax);
  display: block;
  font-size: clamp(0.875rem, 0.794rem + 0.88vw, 1.125rem);
  margin-top: -5px;
}
.contact dl {
  width: min(100%, 550px);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0 50px;
  border: 1px solid #fff;
  position: relative;
  z-index: 0;
  margin-top: 30px;
}
.contact dl::before,.contact dl::after {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: 1px;
  background: #000;
  z-index: 1;
  top: -1px;
}
.contact dl::after {
  top: initial;
  bottom: -1px;
}
.contact dl div {
  width: 11em;
  display: flex;
  justify-content: space-between;
}
.contact dl dd {
  width: 3em;
}
.contact ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.contact ul .btn {
  width: min(46%, 480px);
  margin-top: 80px;
}

.contact .txt .btn + p {
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: 10px;
}

.floating {
  aspect-ratio: 1 / 1;
  width: 220px;
  background: linear-gradient(0deg, rgba(188,0,0,1) 8%, rgba(255,0,0,1) 75%, rgba(255,0,0,1) 100%);
  border-radius: 50%;
}
.floating a {
  color: #fff;
  height: 100%;
  font-size: 1.438em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  flex-direction: column;
}
.floating a::after {
  content: "";
  display: inline-block;
  width: 23px;
  height: 23px;
  background: url(../images/common/ic_arrow.svg) no-repeat;
  background-size: 100% auto;
  margin-left: 15px;
  transition: .3s;
}
.floating.fixed {
  position: fixed;
  bottom: 5%;
  right: 2%;
  z-index: 10;
  animation: slidedown .3s forwards;
}
.floating.fixed:hover {
  animation: scale .3s forwards,slidedown none;
}
.floating.fixed a::after {
  transform: rotate(90deg);
  margin: 15px 0 0 0;
}

@keyframes scale {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.1) translateY(0); }
}
@keyframes slidedown {
  0% { transform: scale(1) translateY(100%); }
  100% { transform: scale(1) translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .btn a:hover::before {
    opacity: .3;
  }
}

@media screen and (max-width:960px) {
  h2 {
    font-size: 1.625rem;
  }
    .movie{
        width: 100%;
    }
  .btn a {
    font-size: 1.250rem;
    height: 60px;
  }
  .btn a::after {
    width: 19px;
    height: 19px;
  }
  .btn + p{
        font-size: 0.670rem;
  }
  .point,.rank,.reason,.price,.flow {
    padding: 30px 0;
  }
  .point h3 {
    font-size: 1.500rem;
  }
  .point .flex {
    flex-direction: column;
    align-items: center;
  }
  .point .flex .txt {
    width: min(100%,515px);
  }
  .point .flex .img {
    width: min(100%,420px);
    margin-top: 25px;
  }
  .point .flex .txt:nth-of-type(1) {
    order: 1;
  }
  .point .flex .img:nth-of-type(1) {
    order: 2;
  }
  .point .flex .txt:nth-of-type(2) {
    order: 3;
  }
  .point .flex .img:nth-of-type(2) {
    order: 4;
  }
  .point .flex .txt:nth-of-type(3) {
    order: 5;
  }
  .point .flex .img:nth-of-type(3) {
    order: 6;
  }
  .point .flex .txt:nth-of-type(4) {
    order: 7;
  }
  .point .flex .img:nth-of-type(4) {
    order: 8;
  }
  .point .flex .txt:nth-of-type(5) {
    order: 9;
  }
  .point .flex .img:nth-of-type(5) {
    order: 10;
  }
  .point .lead p span {
        font-size: 80%;
    }
  
  .works {
    padding: 50px 0 45px;
  }
  
  .contact {
    flex-direction: column;
    padding: 45px 0 40px 0;
  }
  .contact .txt {
    color: #fff;
    width: min(100%, 730px);
  }
  .contact ul {
    flex-direction: column;
  }
  .contact ul .btn {
    width: min(100%, 580px);
    margin-top: 35px;
  }
    
    .reason p {
        margin-top: 1em;
        padding-left: 0;
        line-height: 1.5;
    }
    .reason figure picture {
        width: min(100%,310px);
        display: table;
        flex-shrink: 0;
        padding-right: 1em;
    }
    .rank .flex {
        flex-flow: column;
    }
    .rank .flex picture {
        order: 1;
        width: 45%;
        margin-bottom: 1em;
        position: relative;
        left: -1em;
    }
    .research .flex picture {
        left: 0;
    }
    .research .flex {
        flex-flow: initial;
    }
    .research .title br {
        display: block;
    }
    .rank .flex .frame {
        order: 2;
        width: 100%;
        margin-right: 0;
        padding: 0.8em;
        display: block;
    }
    .rank .flex .frame ul {
        display: flex;
        flex-wrap: wrap;
    }
    .rank .flex .frame ul li {
        width: 42%;
    } 
    .price table td .box {
        width: 55%;
    }
    .price table td .sentence {
        width: 42%;
    }
    .price table th {
        padding: 0.5em 1em;
    }
    .flow .wrap {
        padding: 3em;
    }
    .optionplan ul li {
        line-height: 1.5;
        margin-bottom: 1em;
    }
    .optionplan ul li:last-child {
        margin-bottom: 0;
    }
    .optionplan .flex picture {
        width: 28vw;
    }
    .optionplan .flex {
        margin-bottom: 3em;
    }
    .optionplan .box {
        padding: 2em 2em;
    }
    .optionplan .box .text {
        padding: 1.5em;
    }
      
}

@media screen and (max-width:600px) {
  .sp_none {
    display: none;
  }
  .sp {
      display: block;
  }
    .reason h2, .point h2, .rank h2, .works h2, .price h2, .flow h2, .optionplan h2 {
        margin-bottom: 1em;
    }
  .mainvis {
    /* height: 100svh; */
  }
  .mainvis img {
    width: auto;
    height: 55vh;
    margin: 0 auto; 
  }
  .btn {
    width: min(100%,320px);
    margin-top: 30px;
  }
  .btn a {
    height: 60px;
  }
  .btn span {
    display: none;
  }
  .btn br.sp { display: none!important; }
  h1{
    margin-top: 0.2em;
  }
  .point h2 br {
    display: none;
  }
  .point h3::before {
    width: 30%;
    left: -3%;
    top: -5%;
  }
  .point h3::after {
    width: 40%;
    right: 10%;
    top: -15%;
    bottom: initial;
  }
  .point h3 strong {
    color: var(--sub-color);
    letter-spacing: -0.05em;
  }

  .point .flex .txt {
    margin-top: 50px;
  }
  .point h4 {
    padding-left: min(30%,155px);
    display:  block;
  }
  .point h4::before {
    display: block;
    width: 108px;
    position: static;
    margin-bottom: 20px;
  }
  .point .flex .txt p {
    margin-top: 20px;
  }
  video.mve_main {
    max-height: 300px;
    max-width: 920px;/*PC版での最大幅*/
  }
    .rank .flex .frame ul li {
        font-size: 2.85vw;
    }   
    .rank .flex picture {
        width: 80%;
    }
    .research .conclusion {
        padding: 2em 40% 2em 2em;
        text-align: left;
        line-height: 1.6;
        background: url(../images/top/research_frame_sp.svg) no-repeat;
        background-size: 100% 100%;
    }
  .research .conclusion:after {
    width: 30%;
    right: 10%;
    bottom: initial;
    top: 50%;
    transform: translateY(-50%);
  }
    .rank .flex {
        margin-bottom: 1em;
    }
    .research .flex {
        flex-flow: column;
    }
    .price table td {
        flex-direction: column;
        padding: 1em;
    }
    .price table td .box,.price table td .sentence {
        width: 100%;
    }
    .price table td .box {
        padding: 1em;
        margin-bottom: 1em;
    }
    .flow .wrap {
        padding: 1.5em 2em;
    }
    .flow ul.zero li:before {
        width: 15%;
        top: -8%;
    }
    .flow ul.zero li {
        padding: 2em 1em 4em 1em;
        margin-bottom: 4em;
    }
    .flow ul.zero p {
        line-height: 1.5;
        padding: 0.8em;
        text-align: left;
    }
    .flow ul.zero li:after {
        border: 4px solid #002B6B;
        right: -0.5em;
        bottom: -0.5em;
    }
    .flow ul.zero p:before {
        border-width: 0 23px 15px 23px;
        top: -15px;
    }
    .flow ul.one li {
        padding: 1em;
        border: 4px solid #000;
        box-shadow: 10px 10px 0px -5px #000000;
        margin-bottom: 2.5em;
    }
    .flow ul.one li:before {
        width: 12%;
        top: -13%;
        left: -6%;
    }
    .flow ul.one li:after {
        border-width: 14px 35px 0 35px;
        bottom: -35px;
    }
    .optionplan .flex {
        display: block;
    }
    .optionplan .flex picture {
        width: 60vw;
        margin: 1em auto 0 auto;
    }
    .optionplan .box p.word {
        background: white url(../images/top/optionplan_catch_sp.png) no-repeat center;
        background-size: 90%;
    }
    .optionplan .box {
        padding: 1em;
    }
    .optionplan .box picture {
        width: 100%;
        margin: 0 auto 2em auto;
        display: table;
    }
    .optionplan .box picture img {
        width: 100%;
    }
    .reason figure {
        flex-flow: column;
    }
    .reason figure picture {
        padding-right: 0;
    }
  
  .contact.bg::before {
    background: url(../images/common/bg_contact_sp.jpg) no-repeat bottom left;
    background-size: 100% auto;
  }
  .contact figure {
    width: 150px;
  }
  .contact .txt {
    width: min(100%, 315px);
  }
  .contact p {
    margin-top: 25px;
  }
  .contact dl {
    background: #000;
    width: min(100%, 255px);
    padding: 0 35px;
    margin-top: 40px;
  }
  .contact ul .btn {
    width: min(100%, 320px);
  }

  .floating {
    width: 120px;
  }
    .floating a {
        font-size: 1rem;
        line-height: 1.3;
    }
  .floating a::after {
    display: none;
  }
  .main_logo_p{
    font-size: 0.670rem;
    text-align: center;
  }
}