@media screen and (min-width: 641px) {/*::::: PC :::::*/
.pcNone{display: none;}
}
@media screen and (min-width: 1441px) {/*::::: PC大 :::::*/
html{font-size: .9375vw;}
}
@media screen and (min-width: 641px) and (max-width: 1440px) {/*::::: PC可変 :::::*/
html{font-size: 13.5px;}
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.spNone{display: none;}
html{font-size: 4.5vw;}
body{
}
}


body {
  padding-top: 4.5rem;
  font-family: sans-serif;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 400;
  line-height: 1.6;
}
section{
  overflow: hidden;
}
.section-divider {
  height: .5em;
  width: 100%;
  border: solid #000;
  border-width: .2em 0;
  background-color: #fff;
}
section:nth-of-type(2) {
  --dot-color: #FF4B78;
  --background-color: #ede2d3;
  --dot-size: 1.25em;
  --dot-radius: 20%;

  background-color: var(--background-color);
  background-image: 
  radial-gradient(var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 4%)), 
  radial-gradient(var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 4%));
  background-size: var(--dot-size) var(--dot-size);
  background-position: 0 0, calc(var(--dot-size) / 2) calc(var(--dot-size) / 2);
}
section:nth-of-type(3) {
  --stripe-width: 1.25em;
  --color-a: #E9DFCF;
  --color-b: #7AB2A5;
  background-size: var(--stripe-width) 100%;
  background-image: linear-gradient(
  to right,
  var(--color-a) 0%,
  var(--color-a) 50%,
  var(--color-b) 50%,
  var(--color-b) 100%
  );
}
section:nth-of-type(4) {
  background: #E9DFCF;
}
section:nth-of-type(5) {
  background: #83c9c7;
}
section:nth-of-type(6) {
  background: #E74921;
}
header :is(ul,li,a,picture,img){height: inherit;}
header {
  border-bottom: .2em solid #000;
  width: 100%;
  background: #fff;/*linear-gradient(72deg,rgb(255 255 255/1) 70.75%, rgb(255 255 0/ 1) 71%)*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
header div{
  margin: 0 auto;
  width: min(100%, 100em);
}
header h1{
  margin: .125rem .5rem;
  font-size: .75rem;
  line-height: 1.2;
}
header ul{
  margin: 0 .5rem .125rem;
  height: 3.25rem;
  display: flex;
  justify-content: space-between;
}
.tocontact{
  display: flex;
  justify-content: center;
  padding: .5em 0;
  background: #ffe100;
}
.tocontact a{
  width: 30em;
}
.tocontact a img{
  width: 100%;
}
.tocontact:first-of-type{
  margin-top: -2em;
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
body {padding-top: 4.5rem;}
header ul{
  height: 2.25rem;
}
.top{padding-bottom: 5em;}
.tocontact a {
  width: 80%;
}
.tocontact.topman{
  margin-top: -6.6em;
  padding: 0;
  background: transparent;
}
.tocontact.topman a{width: 100%;}
.tocontact.topman a img{vertical-align: bottom;}
}



.top{
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #F73118,#FB7338);
}
.top picture{
  width: 100%;
}
.top img{
  width: 100%;
}



.okomari{
  --base-size: 40em;
}
.okomari h2 {
  margin: 1em auto 3em;
  padding: .45em 0;
  width: 19em;
  line-height: 1.1;
  font-size: 2.5em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 5;
}
.okomari h2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: skewX(-18deg);
  box-shadow: .25em .2em #fff;
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.okomari h2 {
  width: 90%;
  font-size: 1.75em;
}
}

.okomari article {
  margin: 0 auto;
  margin-bottom: 6em;
  display: flex;
  position: relative;
}

.case {
  background-image: url('./img/bg_okomari.svg');
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  justify-content: space-around;
  align-items: center;
}
.case h3 {
  position: absolute;
  top: -1.2em;
  z-index: 10;
  display: inline-block;
  padding: .3em 1em;
  border: .25em solid #000;
  background: #FFE100;
  font-size: 1.4em;
  font-weight: 700;
  transform: skewY(-2deg);
  box-shadow: .1em .1em #000;
}
.case:before {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  width: 17em;
  height: 17em;
  left: -16em;
}
.case li:before {
  content: '●';
  margin-right: .25em;
}
.answer{
  margin-bottom: 3em;
  flex-flow: column;
  justify-content: center;
}
.p01:before {
  background: url(./img/person01.png);
  background-size: contain;
}
.p02:before {
  background: url(./img/person02.png);
  background-size: contain;
}


.answer {
  background-image: url('./img/bg_okomari_a.svg');
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  gap: .5em;
}
.answer:before {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  width: 18em;
  height: 18em;
  right: -16em;
  background: url(./img/personA.png);
  background-size: contain;
}
.answer h3{
  display: flex;
  justify-content: center;
  font-size: 1.8em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  text-shadow: .2em .2em 0 #fff;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.answer h3:after {
  content: "";
  position: absolute;
  z-index: -1;
  display: inline;
  width: 13em;
  height: .4em;
  bottom: 0;
  background: #fff;
}
.answer ul {
  margin-bottom: .75em;
}
.answer li svg {    
  width: 1.25em; /* アイコンのサイズ */
  height: 1em;
  vertical-align: middle;
}
#checkIcon .check{
  fill: #f00;
  stroke: #fff;
  stroke-width: .5em;
}

.case li,.answer li {
  padding-left: 1.25em;
  text-indent: -1.25em;
}

@media screen and (min-width: 641px) {/*::::: PC :::::*/
.okomari article{
  width: calc(var(--base-size));
  height: calc(.6 * var(--base-size));
}
.okomari article>div{
  position: absolute;
  display: flex;
  z-index: 1;
}
.case{
  padding: 0 6em 0 10em;
  width: 100%;
  height: calc(var(--base-size) / 15 * 4);
  left: 0;
}
.answer{
  padding: 0 4em;
  width: 100%;
  height: calc(var(--base-size) / 27 * 10);
  top: calc(var(--base-size) / 15 * 3.25);
  right: 0;
}
}

@media screen and (max-width: 640px) {/*::::: SP :::::*/
.okomari{
  --base-size: 20vw;
}
.okomari article {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.okomari article>div {
  position: relative;
  z-index: 1;
}
.case {
  padding: 4em 8em 6em;
  width: calc(8 * var(--base-size));
}
.case:before {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  width: 12em;
  height: 12em;
  left: 4em;
  bottom: -7em;
}
.case h3 {
  top: -1em;
  left: 6em;
  font-size: 1.25em;
}
.answer {
  margin-top: 5em;
  padding: 5em 6em 7em;
  width: calc(7 * var(--base-size));
  display: flex;
  gap: 1.5em;
}
.answer:before {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  width: 13em;
  height: 13em;
  right: 2em;
  bottom: -4em;
  background: url(./img/personA.png);
  background-size: contain;
}
.answer h3 {
  margin: 0 -1em;
  font-size: 1.6em;
}
}



.jisseki{
  --base-size: 4.5em;
}
.jisseki-box {
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.jisseki-box h2 {
  margin-bottom: 2em;
  width: calc(15 * var(--base-size));
}
.jisseki-box h2 img {
  width: 100%;
}
.case-box h3 img,.solution-box h3{
  position: absolute;
}
.case-box h3 img{
  top: calc(-.5 * var(--base-size));
  height: calc(1.5 * var(--base-size));
}
.solution-box h3{
  top: calc(-1 * var(--base-size));
}
.solution-box h3 img{
  height: calc(1.8 * var(--base-size));
}
.case-box h3 span {
  font-size: 1.8em;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: end;
  position: relative;
  z-index: 5;
}
.case-box h3 span:before {
  content: "";
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 100%;
  height: .6em;
  background: #FFE100;
  transform: skewX(-16deg);
}


.client-keizoku{
  padding: 1em 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.client-keizoku:before{
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: 20vw;
  top: 0;
  background: #7AB2A5;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.client-keizoku img{
  width: 40%;
  z-index: 5;
}
.client-keizoku+div {
  position: relative;
  z-index: 2;
}
.jisseki-box{
  display: flex;
  flex-flow: column;
  align-items: center;
}

.jisseki-box article{
  margin-bottom: 4em;
  display: flex;
  position: relative;
}
.jisseki-box article>div{
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.case-box{
  background-image: url('./img/bg_case.svg');
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  gap: 1em;
}
.solution-box{
  background-image: url('./img/bg_solution.svg');
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
@media screen and (min-width: 641px) {/*::::: PC :::::*/
.jisseki-box article{
  width: calc(16.5 * var(--base-size));
  height: calc(6.75 * var(--base-size));
}
.jisseki-box article>div{
  position: absolute;
  padding-bottom: 2em;
}
.case-box{
  padding: 0 8em;
  width: calc(8 * var(--base-size));
  height: calc(6.4 * var(--base-size));
  left: 0;
}
.solution-box{
  margin-top: calc(.75 * var(--base-size));
  padding: 0 6em;
  width: calc(9 * var(--base-size));
  height: calc(6 * var(--base-size));
  right: 0;
}
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.client-keizoku img {
  width: 90%;
}
.jisseki-box h2 {
  width: 100%;
}
.case-box h3 img {
  height: calc(1.25 * var(--base-size));
}
.solution-box h3 img {
  height: calc(1.75 * var(--base-size));
}
.jisseki-box article {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.jisseki-box article>div {
  position: relative;
}
.case-box {
  padding: 5em 6em 7em;
  width: calc(7 * var(--base-size));
}
.solution-box {
  margin-top: calc(.75 * var(--base-size));
  padding: 5em 6em 7em;
  width: calc(7 * var(--base-size));
}
}



.koukoku{
  display: flex;
  justify-content: center;
  padding: 3em 0;
}
.koukoku picture{
  width: 70%;
}
.koukoku img{
  width: 100%;
}
.g_partner{
  padding: .5em 0;
  background: #DCC8AF;
  display: flex;
  justify-content: center;
}
.g_partner div{
  margin: 0 auto;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
}
.g_partner p{
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.koukoku picture{
  width: 100%;
}
.g_partner div {
  margin: 1em auto;
  width: 80%;
  flex-flow: column;
  gap: .5em;
}
}



.wd-narrow .flow-box:after,.wd-narrow.flow-box:before,.wd-narrow.flow-box:after{
  content: "";
  position: absolute;
  display: block;
}
.wd-narrow .flow-box{
  margin-bottom: 10em;
}
.wd-narrow .flow-box:after{
  background: url(./img/sarani.png);
  background-size: contain;
  background-repeat: no-repeat;
  --base: 2em;/*500:350=10:7*/
  width: calc(var(--base) * 10);
  height: calc(var(--base) * 7);
  left: 12em;
  bottom: -13em;
  counter-reset: list-number;
}
.wd-narrow.flow-box:before{
  background: url(./img/followup.png);
  background-size: contain;
  background-repeat: no-repeat;
  --base: 1em;/*925:250=37:10*/
  width: calc(var(--base) * 37);
  height: calc(var(--base) * 10);
  top: -7em;
  right: -5em;
  transform: rotateZ(6deg);
}
.wd-narrow.flow-box:after{
  background: url(./img/good.png);
  background-size: contain;
  background-repeat: no-repeat;
  --base: 10em;/*315:315=1:1*/
  width: calc(var(--base));
  height: calc(var(--base));
  left: -8em;
  bottom: 1.5em;
}
.pin-card li{
  display: inline-block;
  margin-top: 1em;
  padding: 1.25em 1.5em 1.25em 2em;
  border: .2em solid #000;
  background: #EACD1B;
  box-shadow: .1em .1em #000;
  min-width: 24em;
  font-size: 1.25em;
  font-weight: 700;
}
.pin-card li span{
  font-size: 1rem;
  font-weight: 400;
}
.pin-card li:nth-child(1) {
  transform: rotate(1deg);
  z-index: 1;
}
.pin-card li:nth-child(2) {
  transform: rotate(-1.25deg) translate(.25em, 0px);
  z-index: 2;
}
.pin-card li:nth-child(3) {
  transform: rotate(.75deg) translate(0, 0); 
  z-index: 3;
}
.pin-card li:nth-child(4) {
  transform: rotate(-1deg) translate(-.25em, 0px); 
  z-index: 4;
}

.wd-wide{
  margin: 3em auto 3em;
  width: min(80em, 93%);
  position: relative;
}
@media screen and (min-width: 641px) {/*::::: PC :::::*/
.wd-wide:before {
  --size: min(50vw,45em);
  content: "";
  position: absolute;
  background: url(./img/bg-surfin.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--size);
  height: var(--size);
  right: -20vw;
  top: 20em;
}
}
.wd-narrow{
  width: min(55.56em, 100%);
  box-sizing: border-box;
}
.wd-narrow:first-of-type{
  float: left;
  position: relative;
  z-index: 5;
}
.wd-narrow:last-of-type{float: right;}
.flow h2 {
  margin: 0 auto -2.5em;
  width: 60%;
  position: relative;
  z-index: 7;
}
.flow h2 img {
  width: 100%;
}
.flow-box{
  margin-bottom: 4em;
  padding: 2.5em 1em 2em;
  border: .33em solid #000;
  background-color: #DCC8AF;
  position: relative;
}
.step-card~.step-card{
  margin-top: 1em;
}
.step-card{
  --box-sz: 3em;
  --box-clr: #EDE2D3;
  --border-wdt: .2em;
  --b-clr: #2698BB;
  --y-clr: #EACD1B;
  --deg: 90deg;
  --pointer: 15.75%;
  position: relative;
  padding: 2em 1.5em;
  border: var(--border-wdt) solid #000;
  background-color: var(--box-clr);
  counter-increment: list-number;
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.step-card{
  --deg: 180deg;
  --pointer: 3.5em;
}
}
.step-card:not(:last-of-type) {
  display: flex;
  gap: 3em;
}
.step-card:not(:last-of-type):before{
  content: "STEP" counter(list-number);
  font-size: 1.6em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  color: #fff;
}
.step-card:not(:last-of-type):after {
  content: "";
  position: absolute;
  display: block;
  bottom: calc(0em - var(--box-sz) / 2);
  left: calc(50% - var(--box-sz) / 2);
  width: var(--box-sz);
  height: var(--box-sz);
  background: var(--box-clr);
  transform: rotate(45deg);
  border: var(--border-wdt) solid #000;
  clip-path: polygon(45% 45%, 100% 10%, 100% 100%, 10% 100%);
}
.step-card:nth-of-type(1) {background: linear-gradient(var(--deg), color-mix(in srgb, var(--b-clr) 100%, var(--y-clr) 0%) var(--pointer), #EDE2D3 var(--pointer));z-index: 10;}
.step-card:nth-of-type(2) {background: linear-gradient(var(--deg), color-mix(in srgb, var(--b-clr) 80%, var(--y-clr) 20%) var(--pointer), #EDE2D3 var(--pointer));z-index: 9;}
.step-card:nth-of-type(3) {background: linear-gradient(var(--deg), color-mix(in srgb, var(--b-clr) 60%, var(--y-clr) 40%) var(--pointer), #EDE2D3 var(--pointer));z-index: 8;}
.step-card:nth-of-type(4) {background: linear-gradient(var(--deg), color-mix(in srgb, var(--b-clr) 40%, var(--y-clr) 60%) var(--pointer), #EDE2D3 var(--pointer));z-index: 7;}
.step-card:nth-of-type(5) {background: linear-gradient(var(--deg), color-mix(in srgb, var(--b-clr) 20%, var(--y-clr) 80%) var(--pointer), #EDE2D3 var(--pointer));z-index: 6;}
.step-card:before{
}
.step-card:last-of-type{
  background: #EACD1B;
  font-size: 1.25em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  text-align: center;
}
.step-card:last-of-type span {
  font-size: 1.5em;
  color: #fff;
  line-height: .75;
  vertical-align: -.1em;
  position: relative;
  z-index: 5;
  -webkit-text-stroke: .05em #000;
}
.step-card:last-of-type span:before {
  content: "";
  position: absolute;
  display: block;
  width: .75em;
  height: .5em;
  top: -.25em;
  left: .15em;
  background: #000;
  clip-path: polygon(0 0, 45% 43%, 45% 0, 100% 50%, 45% 100%, 45% 57%, 0 100%);
  z-index: -1;
}
.step-content h3,.step-card:last-of-type p {
  font-size: 1.6em;
  font-weight: 700;
}
.step-content h3+p {
  margin-top: .5em;
}
.step-content p {
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.flow h2 {
  margin: 0 auto -2em;
  width: 95%;
}
.flow-box{padding: 2.5em .5em 2em;}
.step-card:not(:last-of-type) {
  padding: .5em 1em 1.5em;
  flex-flow: column;
  gap: 1.5em;
}
.step-card:last-of-type{padding: 2em 1em 1.5em;}
.step-content h3, .step-card:last-of-type p {line-height: 1.2;}

.wd-narrow .flow-box {
  margin-bottom: 11em;
}
.wd-narrow .flow-box:after {
  --base: 1em;
  left: -1em;
  bottom: -6em;
}
.wd-narrow.flow-box:before {
  --base: .8em;
  top: -6em;
  right: -5em;
  transform: rotateZ(4deg);
}

.pin-card li {
  padding: 1em .75em;
  min-width: auto;
}
.wd-narrow.flow-box:after {
  --base: 7em;
  left: -2em;
  bottom: -2.5em;
}
}



.hiyou h2{
  margin: 1em auto;
  padding: .5em 1em;
  border-radius: 2em;
  background: #000;
  width: 8em;
  font-size: 2em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  color: #fff;
  text-align: center;
}
.hiyou h3{
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  color: #E74921;
}
.hiyou-box{
  margin: auto;
  padding: 1.75em;
  width: min(66.67em, 93%);
  box-sizing: border-box;
  border: .33em solid #000;
  background-color: #EDE2D3;
}
.hiyou-box{
  margin-bottom: 3em;
}
.cost-table{
  width: 100%;
}
.cost-table tr{
  width: 100%;
  display: flex;
}
.cost-table th,.cost-table td:first-of-type{
  flex: 33%;
  font-size: 1.5em;
  font-weight: 700;
}
.cost-table th{
  display: flex;
  justify-content: center;
  gap: .5em;
}
.cost-table td:first-of-type{
  color: #2091D3;
  text-align: center;
}
.cost-table td:last-of-type{
  flex: 34%;
}
@media screen and (min-width: 641px) {/*::::: PC :::::*/
.cost-table tr{
  height: 6rem;
  border-top: .15em solid #000;
  align-items: center;
}
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.hiyou-box {
  padding: 1.5em .75em;
}
.cost-table tbody {
  display: flex;
  flex-flow: column;
  gap: 1.5em;
}
.cost-table tr {
  display: flex;
  flex-flow: column;
  gap: 1em;
}
.cost-table th {
  padding: .5em 0;
  background: #000;
  display: flex;
  justify-content: center;
  font-size: 1.25em;
  color: #fff;
}
}



#otoiawase {
  background: #FFEBEE;
}
#otoiawase h2{
  margin: 1em auto;
  padding: .5em 0;
  background: #fff;
  border: .2em solid #000;
  box-sizing: border-box;
  width: 14em;
  font-size: 1.75em;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
#otoiawase h2{width: 90%;}
}



.about {
  background: #EFCE4A;
  background-image: url(./img/bg-zou.png);
  background-repeat: no-repeat;
  background-position: bottom -15em right 0;
  background-size: min(56em,70%);
}
.about .wrap{
  margin: 3em auto 3em;
  width: min(80em, 93%);
}
.about h2{
  display: inline-block;
  margin-bottom: .5rem;
  padding: .5em;
  background: rgba(255 255 255 / .8);
  font-size: 1.4em;
  font-weight: bold;
  color: #000;
}
.about .discription {
  margin-top: 1em;
  padding: 1em;
  box-sizing: border-box;
  background: rgba(255 255 255 / .8);
}
.about .discription dl{
  margin-top: 1em;
}
.about .discription dl dt{
  font-size: 1.2em;
  font-weight: bold;
}
.about .discription dl dt~dt{
  margin-top: 1rem;
}
@media screen and (min-width: 641px) {/*::::: PC :::::*/
.about .discription {
  width: min(40em,50%);
}
}
@media screen and (max-width: 640px) {/*::::: SP :::::*/
.about{
  background-position: bottom -20% left -50%;
  background-size: 150vw;
}
}



footer {
  background: rgba(119,119,119,.1);
  padding: 2rem 0;
  font-size: .75em;
}
.container {
  width: min(80em, 93%);
  margin-right: auto;
  margin-left: auto;
}
.foot .com {
  text-align: left;
  margin-bottom: 1rem;
}
.foot .logo {
  display: inline-block;
  margin-bottom: 1rem;
}
.foot .logo img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.foot .com_name {
  font-size: 1.1em;
}
.copy {
  padding: 2em;
  text-align: center;
}