@charset "UTF-8";

/* ===========================================================

  Nano Creative Company - Service SP Styles

=========================================================== */

/* -----------------------------------------------------------
  Page Header
----------------------------------------------------------- */
.page-header.sub h3 { width: calc(413 / 750 * 100vw); }

/* -----------------------------------------------------------
  Section
----------------------------------------------------------- */

/* Section01
----------------------------------------------------------- */
.sec01 { padding: calc(100 / 750 * 100%) 0 calc(140 / 750 * 100%); }
.sec01 .inner { padding: 0; }
.sec01 h2 {
  font-size: calc(48 / 750 * 100vw);
  line-height: calc(64 / 48);
  margin: 0 0 calc(40 / 750 * 100%);
}
.sec01 h2 + p {
  font-size: calc(26 / 750 * 100vw);
  line-height: calc(48 / 26);
}
.flow-unit {
  overflow-x: scroll;
  margin: calc(100 / 750 * 100%) 0 0;
  padding: 0 calc(95 / 750 * 100vw);
}
.flow {
  width: calc(500 / 750 * 100vw);
  flex-shrink: 0;
}
.flow:nth-of-type(2) { margin: 0 calc(125 / 750 * 100vw); }
.flow:not(:last-of-type)::after {
  right: calc( ((125 - 72) / 2 + 72) / 750 * 100vw * -1 );
  width: calc(72 / 750 * 100vw);
  height: calc(74 / 750 * 100vw);
}
.flow h3 { font-size: calc(38 / 750 * 100vw); }
.flow figure {
  width: calc(305 / 750 * 100vw);
  height: auto;
  margin: calc(25 / 750 * 100%) auto;
}
.flow dl dt span { font-size: calc(34 / 750 * 100vw); }
.flow dl dd {
  font-size: calc(26 / 750 * 100vw);
  line-height: calc(46 / 26);
}

/* Section02
----------------------------------------------------------- */
.sec02 {
  aspect-ratio: 750 / 1125;
  background-image: url(../images/service_wave_sp_l.svg);
}
/*
.sec02 > figure { display: none; }
*/
.sec02 .inner {
  width: 100%;
  justify-content: flex-start;
  padding: calc(35 / 750 * 100%) 0 0 4%;
}
.sec02 h3 {
  position: relative;
  font-size: calc(40 / 750 * 100vw);
}
.sec02 i.pict {
  width: calc(203 / 750 * 100vw);
  height: calc(155 / 750 * 100vw);
  margin: calc(35 / 750 * 100%) auto 0;
}
.step.jp {
  width: 100%;
  display: block;
  margin: -5% 0 0;
}
.step.os { margin: calc(80 / 750 * 100% - 5%) 0 0; }
.step p {
  font-size: calc(26 / 750 * 100vw);
  margin: 0 0 15px;
  padding: 0 6%;
}
.step p span {
  font-size: calc(32 / 26 * 1em);
  display: block;
  margin: 0 0 0.25em;
}
.step.jp figure {
  width: 698px;
  padding: 0 4% 0 0;
}
.step.os figure {
  width: 1056px;
  padding: 0 4% 0 0;
}
.scroll {
  overflow-x: scroll;
  padding: 0 0 25px 20%;
}

/* Section03
----------------------------------------------------------- */
.sec03 { padding: calc(70 / 750 * 100%) 0 calc(165 / 750 * 100%); }
.sec03 .inner { padding: 0 calc(25 / 750 * 100%); }
.sec03 h3 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 0 calc(40 / 750 * 100%);
}
.sec03 h3 small { font-size: calc(30 / 40 * 1em); }
.support-unit {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.support-item {
  width: 100%;
  padding: calc(50 / 750 * 100%) calc(40 / 750 * 100%) 15%;
  margin: 0 0 calc(70 / 750 * 100%);
}
.support-item.si01 { height: auto; }
.support-item.si08 {
  height: auto;
  order: 9;
}
.support-item.si09 { order: 7; }
.support-item.si10 { order: 8; }

.support-item dl {
  font-size: calc(26 / 750 * 100vw);
}
.support-item dl dt {
  font-size: calc(28 / 26 * 1em);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
}
.support-item dl dd { line-height: calc(40 / 26); }
.support-item.si01 figure {
  left: initial;
  transform: initial;
  right: 0;
  bottom: -20px;
  width: calc(196 / 750 * 100vw);
}
.support-item.si02 figure {
  right: -5px;
  bottom: -15px;
  width: calc(188 / 750 * 100vw);
}
.support-item.si03 figure {
  right: 20px;
  bottom: -15px;
  width: calc(151 / 750 * 100vw);
}
.support-item.si04 figure {
  right: 0;
  bottom: -15px;
  width: calc(132 / 750 * 100vw);
}
.support-item.si05 figure {
  right: -5px;
  bottom: -5px;
  width: calc(152 / 750 * 100vw);
}
.support-item.si06 figure {
  right: 10px;
  bottom: -15px;
  width: calc(156 / 750 * 100vw);
}
.support-item.si07 figure {
  right: -10px;
  bottom: -25px;
  width: calc(154 / 750 * 100vw);
}
.support-item.si08 figure {
  left: initial;
  transform: initial;
  right: 10px;
  bottom: -10px;
  width: calc(173 / 750 * 100vw);
}
.support-item.si09 figure {
  right: -7.5px;
  bottom: -7.5px;
  width: calc(138 / 750 * 100vw);
}
.support-item.si10 figure {
  right: 5px;
  bottom: -20px;
  width: calc(99 / 750 * 100vw);
}

/* Section04
----------------------------------------------------------- */
.sec04 {
  height: auto;
  /*
  aspect-ratio: 750 / 782;
  display: block;
  background: url(../images/service_info_bg_sp.png) no-repeat 50% 0 rgba(var(--blk-rgb),0.5);
  background-size: 100%;
  */
  padding: 0 0 calc(60 / 750 * 100%);
}
.sec04 figure.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 782;
}
.sec04::before {
  top: calc(70 / 750 * 100vw * -1);
  width: calc(216 / 750 * 100vw);
  height: calc(160 / 750 * 100vw);
}
.sec04 h3 {
  font-size: calc(48 / 750 * 100vw);
  margin: calc(110 / 750 * 100%) 0 0;
}
.sec04 .inner {
  height: auto;
  padding: calc(235 / 750 * 100%) 0 0;
}
.info { flex-direction: column; }
.info:last-of-type {
  flex-direction: column;
  margin: calc(100 / 750 * 100%) 0 0;
  padding: 0;
}
.info dl {
  font-size: calc(26 / 750 * 100vw);
  margin: 0 0 calc(35 / 750 * 100%);
}
.info:first-of-type dl { padding: 0; }
.info:last-of-type dl { padding: 0; }
.info dl dt { font-size: calc(30 / 26 * 1em); }
.info dl dd { line-height: calc(30 / 16); }
.info figure { width: calc(308 / 750 * 100vw); }

/* Section05
----------------------------------------------------------- */
.sec05 { padding: 0 0 calc(160 / 750 * 100%); }
.sec05 .inner { padding: 0; }
.structure { padding: calc(60 / 750 * 100%) calc(30 / 750 * 100%) calc(45 / 750 * 100%); }
.structure h3 span {
  font-size: calc(36 / 750 * 100vw);
  line-height: calc(60 / 36);
  letter-spacing: 0.025em;
}
.structure h3 span::after { bottom: 5px; }
.structure figure {
  width: 100%;
  margin: calc(50 / 750 * 100%) auto 0;
}

/* Section06
----------------------------------------------------------- */
.sec06 { padding: calc(30 / 750 * 100%) 0 calc(150 / 750 * 100%); }
.sec06 h3 {
  font-size: calc(30 / 750 * 100vw);
  margin: 0 0 calc(50 / 750 * 100%);
}

/* 比較表 */
.comparison-list {
  font-size: calc(26 / 750 * 100vw);
  line-height: calc(40 / 26);
}
.comparison-list tr {
  display: grid;
  grid-template-columns: calc(150 / 690 * 100%) calc(270 / 690 * 100%) calc(270 / 690 * 100%);
}
.comparison-list thead th {
  padding: 0 0 10px;
  text-align: center;
}
.comparison-list tbody th {
  width: auto;
  white-space: nowrap;
  line-height: calc(36 / 26);
  padding: 0.5em;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.comparison-list tbody td { width: auto; }
.comparison-list tbody td:first-of-type { padding: 0.5em 0.75em; }
.comparison-list tbody td:last-of-type { padding: 0.5em 0.75em 0.5em 1em; }

/* Section07
----------------------------------------------------------- */
.sec07 { padding: calc(60 / 750 * 100%) 0 calc(160 / 750 * 100%); }
.sec07 .inner { padding: 0 calc(55 / 750 * 100%); }
.sec07 h3 {
  font-size: calc(30 / 750 * 100vw);
  margin: 0 0 40px;
}
.sec07 h3 span {
  font-size: calc(24 / 30 * 1em);
  height: calc(50 / 750 * 100vw);
  line-height: calc(50 / 750 * 100vw);
  border-radius: calc(25 / 750 * 100vw);
  padding: 0 1em;
  margin: 0 auto 15px;
}

.sif-unit {
  display: grid;
  grid-template-columns: repeat(2, calc(276 / 750 * 100vw));
  gap: calc(30 / 750 * 100vw);
}
.sif { height: calc(276 / 750 * 100vw); }
.sif figure figcaption {
  font-size: calc(24 / 750 * 100vw);
  margin: 1em 0 0;
}
.sif01 figure img { width: calc(131 / 750 * 100vw); }
.sif02 figure img { width: calc(114 / 750 * 100vw); }
.sif03 figure img { width: calc(93 / 750 * 100vw); }
.sif04 figure img { width: calc(120 / 750 * 100vw); }
.sif05 figure img { width: calc(117 / 750 * 100vw); }
.sif06 figure img { width: calc(110 / 750 * 100vw); }
.sif07 figure img { width: calc(99 / 750 * 100vw); }
.sif08 figure img { width: calc(142 / 750 * 100vw); }
.sif09 figure img { width: calc(142 / 750 * 100vw); }
.sif10 figure img { width: calc(93 / 750 * 100vw); }
.sif11 figure img { width: calc(117 / 750 * 100vw); }
.sif12 figure img { width: calc(113 / 750 * 100vw); }

.asterisk {
  font-size: calc(24 / 750 * 100vw);
  text-align: left;
  margin: 1em 0 0;
}