:root {
    --min-viewport-width: 720;
    --max-viewport-width: 1366;
    --min-fluid-ratio: calc(1 / var(--min-viewport-width) * 100dvi);
    --max-fluid-ratio: calc(1 / var(--max-viewport-width) * 100dvi);
    --base-font-size: 16;
    --rem: calc(1rem / var(--base-font-size));
    --noto-sans-jp: "Noto Sans JP", sans-serif;
    --text-color: #000;
    --line-color: #af8f5b;
    --strong-color: #a27b47;
    --bg-primary-color: #fff5db;
    --bg-secondary-color: #00125e;
    --text-spacing: 0.01em;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --shared-width: min(1024px , calc(1024 * var(--max-fluid-ratio)));
    --radius: min(30px , calc(30 * var(--max-fluid-ratio)));
  
  }
  
  /* index */
  .maruf-lp {
      background-color: var(--bg-primary-color);
      color: var(--text-color);
      font-style: normal;
      font-size: calc(16 * var(--rem));
      font-family: var(--noto-sans-jp);
      font-feature-settings: "palt";
      position: relative;
  }
  .maruf-lp,
  .maruf-lp *,
  .maruf-lp *::before,
  .maruf-lp *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .maruf-lp .pc {
    display: inline;
  }
  
  .maruf-lp .sp {
    display: none;
  }
  
  .maruf-lp img {
    max-width: 100%;
    height: auto;
    backface-visibility: hidden;
    vertical-align: top;
  }
  
  .maruf-lp a {
      transition: opacity 0.2s ease;
  }
  @media (hover:hover) {
      .maruf-lp a:hover {
        opacity: 0.7;
  }
  }
  
  .maruf-lp .deco {
      position: absolute;
  }
  
  .maruf-lp .deco-sp {
      display: none;
      position: absolute;
  }
  
  
  .maruf-lp .deco1 {
      width: min(calc(158px / 2), calc((158 / 2) * var(--max-fluid-ratio)));
      bottom: min(92px, calc(92 * var(--max-fluid-ratio)));
      right: max(-240px , calc(-240 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .deco2 {
      width: min(calc(174px / 2), calc((174 / 2) * var(--max-fluid-ratio)));
      top: max(-7px , calc(-7 * var(--max-fluid-ratio)));
      left: max(-71px , calc(-71 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .deco3 {
      width: min(calc(203px / 2), calc((203 / 2) * var(--max-fluid-ratio)));
      bottom: min(80px , calc(80 * var(--max-fluid-ratio)));
      right: max(-32px , calc(-32 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .deco4 {
      width: min(calc(202px / 2), calc((202 / 2) * var(--max-fluid-ratio)));
      top: max(-67px , calc(-67 * var(--max-fluid-ratio)));
      left: min(315px , calc(315 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .deco5 {
      width: min(calc(174px / 2), calc((174 / 2) * var(--max-fluid-ratio)));
      bottom: max(-46px , calc(-46 * var(--max-fluid-ratio)));
      left: max(-73px , calc(-73 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .deco6 {
      width: min(calc(203px / 2), calc((203 / 2) * var(--max-fluid-ratio)));
      top: max(-26px , calc(-26 * var(--max-fluid-ratio)));
      left: max(-6px , calc(-6 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .deco7 {
      width: min(calc(189px / 2), calc((189 / 2) * var(--max-fluid-ratio)));
      top: min(15px , calc(15 * var(--max-fluid-ratio)));
      right: min(58px , calc(58 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .mv {
      background: url(../images/mv_bg.png) no-repeat center min(188px, calc(188 * var(--max-fluid-ratio))) / min(1303px, calc(1303 * var(--max-fluid-ratio))) auto;
  }
  
  .maruf-lp .mv .mv_inner {
      display: block grid;
      grid-template-columns: 1fr;
      position: relative;
  }
  
  .maruf-lp .mv .mv_title-area {
      position: relative;
      width: min(731px, calc(731 * var(--max-fluid-ratio)));
      margin: 0 auto;
  }
  
  .maruf-lp .mv .mv_img {
      width: min(235px , calc(235 * var(--max-fluid-ratio)));
      margin: 0 auto;
      display: block;
      padding-top: min(38px , calc(38 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .mv .mv_img img {
      transform: translateX(min(32px , calc(32 * var(--max-fluid-ratio))));
  }
  
  .maruf-lp .mv .mv_title {
      position: absolute;
      right: 0;
      width: min(177px , calc(177 * var(--max-fluid-ratio)));
      top: min(29px , calc(29 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .mv .mv_text {
      width: var(--shared-width);
      position: absolute;
      margin-inline: auto;
      inset-inline: 0;
      bottom: min(80px , calc(80 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .mv .mv_text p {
      width: min(336px , calc(336 * var(--max-fluid-ratio)));
      transform: translateX(min(52px , calc(52 * var(--max-fluid-ratio))));
  }
  
  .maruf-lp .mv .mv_slide {
      order: -1;
      width: 100%;
      height: min(236px , calc(236 * var(--max-fluid-ratio)));
      background-image: url(../images/slide1.png);
      background-repeat: repeat-x;
      background-size: auto min(236px , calc(236 * var(--max-fluid-ratio)));
      background-position: 0 0;
      animation: slide1 60s linear infinite;
  }
  
  @keyframes slide1 {
      from {
          background-position: 0 0;
      }
    
      to {
          background-position: max(-1366px , calc(-1366 * var(--max-fluid-ratio))) 0;
      }
  }
  
  .maruf-lp .about {
      margin-top: max(-52px , calc(-52 * var(--max-fluid-ratio)));
      text-align: center;
  }
  
  .maruf-lp .about .about_inner {
      width: var(--shared-width);
      background-color: var(--bg-secondary-color);
      position: relative;
      display: block grid;
      grid-template-columns: 1fr;
      z-index: 1;
      margin-inline: auto;
      border-radius: var(--radius);
      padding:
      min(42px , calc(42 * var(--max-fluid-ratio)))
      min(82px , calc(82 * var(--max-fluid-ratio)))
      min(43px , calc(43 * var(--max-fluid-ratio)))
      min(52px , calc(52 * var(--max-fluid-ratio)));
      
  }
  
  .maruf-lp .about .about_box {
      display: block grid;
      text-align: left;
      column-gap: min(13px , calc(13 * var(--max-fluid-ratio)));
      grid-template-columns: min(199px , calc(199 * var(--max-fluid-ratio))) min(678px , calc(678 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .about_box1 .about_text img  {
      transform: translateY(max(-2px , calc(-2 * var(--max-fluid-ratio))));
  }
  
  .maruf-lp .about .about_box2 {
      margin-top: min(25px , calc(25 * var(--max-fluid-ratio)));
      grid-template-columns: min(199px , calc(199 * var(--max-fluid-ratio))) min(593px , calc(593 * var(--max-fluid-ratio)));
  }
  .maruf-lp .about_box2 .about_text img  {
      transform: translate(
          min(2px, calc(2 * var(--max-fluid-ratio))),
          max(-4px , calc(-4 * var(--max-fluid-ratio)))
      );
  }
  
  .maruf-lp .about .about_box3 {
      margin-top: min(34px , calc(34 * var(--max-fluid-ratio)));
      grid-template-columns: min(199px , calc(199 * var(--max-fluid-ratio))) min(563px , calc(563 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .about_box3 .about_text img  {
      transform: translate(
          min(2px, calc(2 * var(--max-fluid-ratio))),
          max(-3px , calc(-3 * var(--max-fluid-ratio)))
      );
  }
  
  .maruf-lp .about .about_box4 {
      margin-top: min(24px , calc(24 * var(--max-fluid-ratio)));
      grid-template-columns: min(199px , calc(199 * var(--max-fluid-ratio))) min(681px , calc(681 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .about_box4 .about_text img  {
      transform: translateX(min(2px ,  calc(2 * var(--max-fluid-ratio))));
  }
  
  .maruf-lp .flow {
      margin-top: min(42px , calc(42 * var(--max-fluid-ratio)));
      position: relative;
      z-index: 1;
  }
  
  .maruf-lp .flow .flow_inner {
      width: var(--shared-width);
      margin-inline: auto;
      position: relative;
  }
  
  .maruf-lp .flow .flow_title {
      width: min(181px , calc(181 * var(--max-fluid-ratio)));
      margin-inline: auto;
  }
  
  .maruf-lp .flow .flow_list {
      display: grid;
      margin: max(-29px, calc(-29 * var(--max-fluid-ratio))) auto 0;
      list-style-type: none;
      padding:
       min(40px , calc(40 * var(--max-fluid-ratio)))
       min(27px , calc(27 * var(--max-fluid-ratio)))
       min(26px , calc(26 * var(--max-fluid-ratio)))
       min(10px , calc(10 * var(--max-fluid-ratio)));
      border: min(4px , calc(4 * var(--max-fluid-ratio))) solid var(--line-color);
      border-radius: var(--radius);
      grid-template-columns: repeat(4, min(224px , calc(224 * var(--max-fluid-ratio))));   
      column-gap: min(28px , calc(28 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .flow li {
      position: relative;
  }
  
  .maruf-lp .flow .flow_list li::after {
      --icon-width: min(15px , calc(15 * var(--max-fluid-ratio)));
      --icon-height: min(30px , calc(30 * var(--max-fluid-ratio)));
      content: "";
      width: var(--icon-width);
      height: var(--icon-height);
      background-color: var(--line-color);
      clip-path: polygon(var(--icon-width) 50%, 0% 0%, 0% var(--icon-height));
      position: absolute;
      inset: min(17px , calc(17 * var(--max-fluid-ratio))) max(-29px, calc(-29 * var(--max-fluid-ratio))) 0 auto;
      margin-block: auto;
  }
  
  .maruf-lp .flow li:last-child::after {
      content: none;
  }
  
  .maruf-lp .appli {
      margin-top: min(82px , calc(82 * var(--max-fluid-ratio)));
      padding-bottom: min(65px , calc(65 * var(--max-fluid-ratio)));
  }
  
  .maruf-lp .appli .appli_slide {
      width: 100%;
      height: min(207px , calc(207 * var(--max-fluid-ratio)));
      background-image: url(../images/slide2.png);
      background-repeat: repeat-x;
      background-size: auto min(207px , calc(207 * var(--max-fluid-ratio)));
      background-position: 0 0;
      animation: slide2 60s linear infinite;
  }
  
  @keyframes slide2 {
      from {
          background-position: 0 0;
      }
    
      to {
          background-position: max(-1792px , calc(-1792 * var(--max-fluid-ratio))) 0;
      }
  }
  
  
  .maruf-lp .appli_inner {
      width: min(824px , calc(824 * var(--max-fluid-ratio)));
      margin: min(59px , calc(59 * var(--max-fluid-ratio))) auto 0;
      position: relative;
  }
  
  .maruf-lp .appli .appli_btn {
      display: block;
      width: min(386px , calc(386 * var(--max-fluid-ratio)));
      margin-inline: auto;
  }
  
  .maruf-lp .btn-fixed {
      position: fixed;
      width: var(--shared-width);
      height: min(148px , calc(148 * var(--max-fluid-ratio)));
      margin-inline: auto;
      inset: auto 0 min(40px , calc(40 * var(--min-fluid-ratio))) 0;
      z-index: 10;
      pointer-events: none;
      justify-content: flex-end;
      display: none;
  }

.maruf-lp .btn-fixed.absolute-position {
    position: absolute;
}  
  .maruf-lp .btn-fixed a {
      pointer-events: all;
      display: block;
      width: min(148px , calc(148 * var(--max-fluid-ratio)));
      position: absolute;
      top: 0;
      right: 0;
  }
  
.end_text {
          text-align: center;
          font-size: 2vw;
          color:red;
          padding: 2vw 0;
          font-weight: bold;
      }

.info {
          max-width: 400px;
          margin: 0 auto;
      }
.info p{
          font-size: 15px;
      }
.info span{
          font-weight: bold;
          font-size: 25px;
      }

  @media print, screen and (max-width:767px) {
  
      :root {
          --shared-width: calc(660 * var(--min-fluid-ratio));
          --radius: calc(20 * var(--min-fluid-ratio));
      }
  
      .maruf-lp img {
          width: 100%;
      }
      .maruf-lp .pc {
          display: none;
      }
      .maruf-lp .sp {
          display: inline;
      }
  
      .maruf-lp {
          font-size: calc(28 * var(--min-fluid-ratio));
          border-top: none;
      }
      .maruf-lp .deco {
          display: none;
      }
      .maruf-lp .deco-sp {
          display: block;
      }
      
      .maruf-lp .deco1 {
          width: calc(82 * var(--min-fluid-ratio));
          bottom: auto;
          right: auto;
          left: calc(64 * var(--min-fluid-ratio));
          top: calc(94 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .deco2 {
          width: calc(82 * var(--min-fluid-ratio));
          top: auto;
          bottom: calc(91 * var(--min-fluid-ratio));
          left: calc(42 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .deco3 {
          width: calc(65 * var(--min-fluid-ratio));
          bottom: auto;
          top: calc(-66 * var(--min-fluid-ratio));
          right: calc(7 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .deco4 {
          width: calc(71 * var(--min-fluid-ratio));
          top: calc(106 * var(--min-fluid-ratio));
          left: calc(19 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .deco5 {
          width: calc(82 * var(--min-fluid-ratio));
          bottom: calc(-57 * var(--min-fluid-ratio));
          left: auto;
          right: calc(11 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .deco6 {
          width: calc(73 * var(--min-fluid-ratio));
          left: auto;
          top: auto;
          bottom: calc(-22 * var(--min-fluid-ratio));
          right: calc(5 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .deco7 {
          width: calc(82 * var(--min-fluid-ratio));
          top: calc(-6 * var(--min-fluid-ratio));
          right: auto;
          left: calc(73 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .mv {
          background: url(../images/sp/mv_bg.png) no-repeat center calc(-3 * var(--min-fluid-ratio)) / 100% auto;
      }
      
      .maruf-lp .mv .mv_inner {
          display: block grid;
          grid-template-columns: 1fr;
          position: relative;
      }
      
      .maruf-lp .mv .mv_title-area {
          position: relative;
          width: 100%;
          margin: 0 auto;
          order: 0;
      }
      
      .maruf-lp .mv .mv_img {
          width: calc(236 * var(--min-fluid-ratio));
          padding-top: calc(55 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .mv .mv_img img {
          transform: translateX(calc(2 * var(--min-fluid-ratio)));
      }
      
      .maruf-lp .mv .mv_title {
          right: calc(42 * var(--min-fluid-ratio));
          width: calc(177 * var(--min-fluid-ratio));
          top: calc(49 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .mv .mv_text {
          width: var(--shared-width);
          position: relative;
          margin: calc(46 * var(--min-fluid-ratio)) auto 0;
          inset-inline: auto;
          bottom: auto;
          order: 2;
          text-align: center;
          z-index: 2;
      }
      
      .maruf-lp .mv .mv_text p {
          width: calc(490 * var(--min-fluid-ratio));
          margin-inline: auto;
          transform: translateX(calc(-1 * var(--min-fluid-ratio)));
      }
      
      .maruf-lp .mv .mv_slide {
          order: 1;
          height: calc(155 * var(--min-fluid-ratio));
          background-image: url(../images/sp/slide1.png);
          background-size: auto calc(155 * var(--min-fluid-ratio));
          animation: slide1 60s linear infinite;
          margin-top: calc(-56 * var(--min-fluid-ratio));
          position: relative;
          z-index: 1;
      }
      
      @keyframes slide1 {
          from {
              background-position: 0 0;
          }
        
          to {
              background-position: calc(-721 * var(--min-fluid-ratio)) 0;
          }
      }
      
      .maruf-lp .about {
          margin-top: calc(44 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .about .about_inner {
          width: var(--shared-width);
          padding:
          calc(20 * var(--min-fluid-ratio))
          calc(50 * var(--min-fluid-ratio))
          calc(1 * var(--min-fluid-ratio))
          calc(35 * var(--min-fluid-ratio));
          
      }
      
      .maruf-lp .about .about_box {
          column-gap: calc(8 * var(--min-fluid-ratio));
          grid-template-columns: calc(129 * var(--min-fluid-ratio)) calc(440 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .about_box1 .about_text img  {
          transform: translateY(calc(-1 * var(--min-fluid-ratio)));
      }
      
      .maruf-lp .about .about_box2 {
          margin-top: calc(12 * var(--min-fluid-ratio));
          grid-template-columns: calc(129 * var(--min-fluid-ratio)) calc(385 * var(--min-fluid-ratio));
      }
      .maruf-lp .about_box2 .about_text img  {
          transform: translate(
              calc(2 * var(--min-fluid-ratio)),
              calc(-4 * var(--min-fluid-ratio))
          );
      }
      
      .maruf-lp .about .about_box3 {
          margin-top: calc(4 * var(--min-fluid-ratio));
          grid-template-columns: calc(129 * var(--min-fluid-ratio)) calc(401 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .about_box3 .about_text img  {
          transform: translate(
              calc(2 * var(--min-fluid-ratio)),
              calc(-2 * var(--min-fluid-ratio))
          );
      }
      
      .maruf-lp .about .about_box4 {
          margin-top: calc(17 * var(--min-fluid-ratio));
          grid-template-columns: calc(129 * var(--min-fluid-ratio)) calc(404 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .about_box4 .about_text img  {
          transform: translateX(calc(1 * var(--min-fluid-ratio)));
      }
      
      .maruf-lp .flow {
          margin-top: calc(30 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .flow .flow_inner {
          width: var(--shared-width);
      }
      
      .maruf-lp .flow .flow_title {
          width: calc(117 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .flow .flow_list {
          display: grid;
          margin-top: calc(-24 * var(--min-fluid-ratio));
          padding:
          calc(26 * var(--min-fluid-ratio))
          calc(17 * var(--min-fluid-ratio))
          calc(17 * var(--min-fluid-ratio))
          calc(8 * var(--min-fluid-ratio));
          border-width: calc(2.5 * var(--min-fluid-ratio));
          grid-template-columns: repeat(4, calc(145 * var(--min-fluid-ratio)));   
          column-gap: calc(17  * var(--min-fluid-ratio));
      }
      
      .maruf-lp .flow .flow_list li::after {
          --icon-width: calc(10 * var(--min-fluid-ratio));
          --icon-height: calc(19 * var(--min-fluid-ratio));
          inset: calc(13 * var(--min-fluid-ratio)) calc(-18 * var(--min-fluid-ratio)) 0 auto;
      }
      
      .maruf-lp .appli {
          margin-top: calc(48 * var(--min-fluid-ratio));
          padding-bottom: calc(48 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .appli .appli_slide {
          height: calc(134 * var(--min-fluid-ratio));
          background-size: auto calc(134 * var(--min-fluid-ratio));
          animation: slide2 60s linear infinite;
      }
      
      @keyframes slide2 {
          from {
              background-position: 0 0;
          }
        
          to {
              background-position: calc(-1146 * var(--min-fluid-ratio)) 0;
          }
      }
      
      .maruf-lp .appli_inner {
          width: auto;
          margin-top:calc(35 * var(--min-fluid-ratio));
      }
      
      .maruf-lp .appli .appli_btn {
          width: calc(309 * var(--min-fluid-ratio));
      }
  
      .maruf-lp .btn-fixed {
          height: calc(119 * var(--min-fluid-ratio));
          inset: auto 0 calc(42 * var(--min-fluid-ratio)) 0;
      }
      
      .maruf-lp .btn-fixed a {
          pointer-events: all;
          width: calc(119 * var(--min-fluid-ratio));
      }
      
      .end_text {
          text-align: center;
          font-size: 4vw;
          color:red;
          padding: 2vw 0;
          font-weight: bold;
      }
      
.info {
          max-width: 53%;
          margin: 0 auto;
      }
.info p{
          font-size: 2vw;
      }
.info span{
          font-weight: bold;
          font-size: 3vw;
      }
  }