@charset "UTF-8";
/* CSS Document */

.head {
	width: 100%;
	margin: 0;
	padding: 0 0 10px;
	overflow: hidden;
	z-index: 99999999;
}

.head .inner {
	width: 100%;
	max-width: 1980px;
	margin: 0 auto;
	padding: 0;
}

.head .inner h1 {
	width: 90%;
	margin: 5px 5%;
	float: left;
	font-size: 15px;
	color: rgba(0,0,0,0.80);
}




.head .logo {
	width: 720px;
	margin: 1vw 0 0 50px;
	padding: 0;
	float: left;
}

.head .logo td:nth-of-type(1) {
	width: 80px;
	margin: 0;
	padding: 0;
}

.head .logo td:nth-of-type(2) {
	width: 350px;
	margin: 0;
	padding: 0;
}

.head .logo td:nth-of-type(3) {
	width: 290px;
	margin: 0;
	padding: 0;
	font-size: 40px;
	font-weight: 900;
	color: #3166b1;
	letter-spacing: 0;
}

.head .button {
	top: 80px;
	right: 20px;
	display: block;
	position: absolute;
}

.head .button a {
	padding: 0 50px 0 100px;
	font-weight: 700;
	color: #FFF;
	background-color:rgba(14,223,28,1.00);
	display: block;
	transition: ease 0.5s all;
	line-height: 70px;
	border-radius: 35px;
	font-size: 26px;
	background-image: url("../images/lco_mail.png");
	background-repeat: no-repeat;
	background-position: center left 50px;
}

.head .button a:hover {
	opacity: 0.7;
}

.head .button p {
	margin: 10px 0 0;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.intro {
	width: 100%;
	height: 85vw;
	margin: 0;
	padding: 0;
	display: flex;
	text-align: center;
}

.intro h2 {
	font-size: 5vw;
	font-weight: 900;
	color: #0931E4;
	text-align: center;
	letter-spacing: 0.1em;
	padding: 1em 0;
	text-shadow:
    3px 3px 5px #FFF,
    -3px 3px 5px #FFF,
    -3px -3px 5px #FFF,
    3px -3px 5px #FFF;
}

.intro .logo_text {
	width: 80%;
	margin: 0 10%;
	text-align: center;
}

.intro .logo_text img {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.intro .logo_img {
	width: 40%;
	margin: -100px 30% 0;
	text-align: center;
}

.intro .bubble {
	width: auto;
	background-color: #FFF;
	padding: 20px 40px;
	border-radius: 40%;
	max-width: 25%;
	box-shadow: 0 0 5px 5px #000;
	display: block;
	position: relative;
}

.intro .bubble.left01 {
	top: -650px;
	left: 5%;
}

.intro .bubble.left02 {
	top: -450px;
	left: 5%;
}

.intro .bubble.right01 {
	top: -950px;
	left: 70%;
}

.intro .bubble.right02 {
	top: -850px;
	left: 70%;
}

.intro .bubble h3 {
	color: #0931E4;
}

.intro .bubble span {
	font-weight: 700;
	font-size: 18px;
	background: linear-gradient(transparent 60%, #fff231 40%);
}

.flow {
	width: 100%;
	margin: 0;
	padding: 0;
}

.flow h2 {
	color: #0931E4;
	font-size: 50px;
	font-weight: 900;
	text-align: center;
	letter-spacing: 0.2em;
}

.flow .flow_block {
	width: 90%;
	margin: 50px 5%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 20px;
}

.flow .flow_block dl {
	border: #0931E4 2px solid;
}

.flow .flow_block dt {
	background-color: #0931E4;
	color: #FFF;
	text-align: center;
	margin: 0;
	padding: 5px 0;
	font-weight: 700;
}

.flow .flow_block dt span {
	font-size: 20px;
}

.flow .flow_block dd {
	margin: 0;
	padding: 10px;
}

.flow .flow_block .imgbox {
	width: 100%;
	height: 200px;
	margin: 0;
	padding: 0;
	text-align: center;
}

.flow .flow_block .imgbox img {
	width: auto;
	height: 200px;
	margin: 0 auto;
}

.reason {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}

.reason .cover,
.intro .cover {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/reason_bg.svg");
	background-size: cover;
	background-position: center;
}

.reason h2 {
	font-size: 80px;
	font-weight: 900;
	color: #0931E4;
	text-align: center;
	line-height: 1.3em;
	letter-spacing: 0.1em;
	padding: 1em 0;
	text-shadow:
    3px 3px 5px #FFF,
    -3px 3px 5px #FFF,
    -3px -3px 5px #FFF,
    3px -3px 5px #FFF;
}

.reason h2 span {
	font-size: 50px;
	color: #FFF;
	text-shadow:
    3px 3px 5px #0931E4,
    -3px 3px 5px #0931E4,
    -3px -3px 5px #0931E4,
    3px -3px 5px #0931E4;
	letter-spacing: 0.1em;
}

.reason h2 span.yellow {
	color: #fff231;
	font-size: 80px;
	letter-spacing: 0;
}

.reason h2 span.yellow span {
	font-size: 100px;
	color: #fff231;
}

.reason h3 {
	font-size: 30px;
	font-weight: 700;
	color: #FFF;
	text-shadow:
    3px 3px 5px #0931E4,
    -3px 3px 5px #0931E4,
    -3px -3px 5px #0931E4,
    3px -3px 5px #0931E4;
	text-align: center;
}

.reason table {
	border-collapse: collapse;
}

.reason td:nth-of-type(1),
.reason td:nth-of-type(3) {
	width: 45%;
	margin: 0;
}

.reason td:nth-of-type(2) {
	width: 10%;
	margin: 0;
}

.reason td:nth-of-type(3) p .yellow {
	color: #fff231;
}

.arrow {
  position: relative;
  display: inline-block;
  width: 90%;
  height: 62px;
  margin: 0 5%;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 100%;
  height: 10px;
  border-radius: 9999px;
  background-color: #0931E4;
  transform-origin: calc(100% - 2px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

.dli-arrow-down {
  display: none;
}

.reason .imgbox {
	width: 90%;
	margin: 20px 5% 0;
	padding: 0;
	float: left;
}

.reason .imgbox .glid {
	width: 33.3%;
	margin: 0;
	padding: 0;
	float: left;
	text-align: center;
}

.reason ul {
	width: 90%;
	margin: 0 5%;
	padding: 0;
	float: left;
}

.reason ul li {
	width: 100%;
	margin: 0 0 20px;
	padding: 10px 0;
	float: left;
	background-color: #44403f;
	color: #FFF;
	font-weight: 700;
	text-align: center;
	border-radius: 20px;
}

.reason .logobox {
	width: 90%;
	margin: 0 5%;
	padding: 5px 0;
	text-align: center;
	background-color: #FFF;
	border-radius: 20px;
	float: right;
}

.reason .logobox img {
	width: 90%;
	margin: 0 5%;
	text-align: center;
}

.reason .speechBubble {
  position: relative;
  float: right;
  display: inline-block;
  margin-bottom: 0;
  margin-right: 20px;
  padding: 5px 10px;
  border-radius: 8px;
  background-color:rgba(14,223,28,1.00);
  text-align: left;
  font-size: 30px;
  font-weight: 700;
  color: #FFF;
}

.reason .speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: rgba(14,223,28,1.00) transparent transparent;
  translate: -50% 100%;
  transform: skew(-25deg);
  transform-origin: top;
}

.reason .speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  border-style: solid;
  border-width: 15.2px 15.2px 0 0;
  border-color: rgba(14,223,28,1.00) transparent transparent;
  translate: calc(-50% - 0.4px) 100%;
  transform: skew(-25deg);
  transform-origin: top;
}

.reason td:nth-of-type(3) p {
	width: 90%;
	margin: 0 5% 20px;
	color: #FFF;
	font-weight: 700;
	font-size: 50px;
	text-shadow:
    3px 3px 5px #0931E4,
    -3px 3px 5px #0931E4,
    -3px -3px 5px #0931E4,
    3px -3px 5px #0931E4;
	text-align: center;
	float: left;
}

.reason .reason_box {
	width: 90%;
	margin: 0 5% 50px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}

.reason .reason_box dl {
	background-color: #FFF;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 0 5px 5px #0931E4;
}

.reason .reason_box dt {
	color: #0931E4;
	font-weight: 700;
	font-size: 40px;
	text-align: center;
}

.reason .reason_box dd {
	text-align: center;
	font-weight: 700;
}

.reason .reason_box dd p {
	color: red;
	font-size: 30px;
	text-shadow: 0 0 0 #FFF;
	background: linear-gradient(transparent 60%, #fff231 40%);
}

.qa {
	width: 100%;
	margin: 0 0 50px;
	padding: 50px 0;
	display: inline-block;
}

.qa .fukidashi {
	display: grid;
	place-items: center;
	width: 100px;
	height: 100px;
	color: #000;
	border-radius: 100% 100% 0 100%;
	background-color: #fff231;
	font-weight: 700;
	font-size: 30px;
	margin: 0 0 0 50px;
}

.qa .casestudy .fukidashi {
	line-height: 35px;
	margin-top: -50px;
}

.qa .glid {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}

.qa .glid table {
	width: 95%;
	margin: 0 0 0 5%;
	padding: 0;
}

.qa .glid table table {
	width: 100%;
	margin: 0;
}

.qa .glid table table td {
	color: #0931E4;
	font-size: 18px;
	font-weight: 700;
}

.qa .glid table table .square {
	width: 30px;
	height: 30px;
	background-color: #0931E4;
	color: #FFF;
	font-weight: 700;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
}

.qa .glid.casestudy table td:nth-of-type(2) {
	width: 200px;
	font-size: 18px;
	text-align: center;
	padding: 0 20px;
}

.qa .glid.casestudy table td:nth-of-type(2) .pc { display: block; }

.qa .glid.casestudy table td:nth-of-type(2) span {
	font-size: 20px;
	font-weight: 700;
}

.price {
	width: 100%;
	padding: 0 0 50px;
	background-color: #fcb937;
	display: flex;
}

.price .inner {
	width: 90%;
	margin: 0 5%;
	padding: 0;
	float: left;
}

.price .speechBubble {
  position: relative;
  top: -30px;
  float: left;
  display: inline-block;
  margin-bottom: 0;
  margin-left: 20px;
  padding: 5px 10px;
  border: 2px solid red;
  border-radius: 8px;
  background-color: red;
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  color: #FFF;
}

.price .speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: red transparent transparent;
  translate:-50% 100%;
  transform: skew(25deg);
  transform-origin: top;
}

.price h2 {
	width: 100%;
	float: left;
	font-size: 6vw;
	font-weight: 900;
	color: #0931E4;
	text-align: center;
	line-height: 0.6em;
	padding: 0;
	margin: 0 0 50px;
	text-shadow:
    3px 3px 5px #FFF,
    -3px 3px 5px #FFF,
    -3px -3px 5px #FFF,
    3px -3px 5px #FFF;
}

.price h3 {
	width: 90%;
	padding: 0;
	margin: 0 5% 50px;
	float: left;
}

.price h3 .title {
	width: auto;
	float: left;
	font-size: 20px;
	font-weight: 700;
	color: #0931E4;
	padding: 10px 1em;
	background-color: #FFF;
	border: #0931E4 2px solid;
	border-radius: 25px;
	letter-spacing: 0.1em;
}

.price .glid_left {
	width: 60%;
	margin: 0;
	padding: 0;
	float: left;
}

.price .glid_right {
	width: 40%;
	margin: 0;
	padding: 0;
	float: right;
}

.price .glid_right small {
	width: 100%;
	text-align: right;
	float: right;
	margin-top: -70px;
}

.price table {
	width: 100%;
	margin: 0;
	padding: 0;
}

.price table td:nth-of-type(2) {
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	padding: 0 20px;
}

.price dl {
	background-color: #0931E4;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 5px 5px 5px 0 #000;
	border: #000 2px solid;
}

.price dt {
	background-color: #FEDD96;
	padding: 5px 0;
	text-align: center;
	width: 80%;
	margin: 0 10%;
	float: left;
	font-size: 20px;
	font-weight: 700;
	border-radius: 10px;
}

.price dd {
	width: 100%;
	font-size: 4vw;
	font-weight: 900;
	color: red;
	text-align: center;
	margin: 0;
	text-shadow:
    3px 3px 5px #FFF,
    -3px 3px 5px #FFF,
    -3px -3px 5px #FFF,
    3px -3px 5px #FFF;
}

.price dd .small {
	font-size: 16px;
	font-weight: 400;
	color: #FFF;
	text-shadow:initial;
	padding-top: -30px;
}

.price dd span {
	font-size: 2vw;
}

.price .glid_right p {
	font-size: 2.5vw;
	width: 90%;
	font-weight: 900;
	margin: 100px 5% 0;
	text-shadow:
    3px 3px 5px #FFF,
    -3px 3px 5px #FFF,
    -3px -3px 5px #FFF,
    3px -3px 5px #FFF;
}

.price .glid_right .speechBubble {
  position: relative;
  top: -140px;
  float: left;
  display: inline-block;
  margin-bottom: 0;
  margin-left: 20px;
  padding: 5px 10px;
  border: 2px solid red;
  border-radius: 8px;
  background-color: red;
  font-size: 20px;
  font-weight: 700;
  color: #FFF;
  text-align: center;
}

.price .glid_right .speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: red transparent transparent;
  translate:-50% 100%;
  transform: skew(25deg);
  transform-origin: top;
}

.price .example {
	width: 100%;
	margin: 50px 0;
	float: left;
}

.price .example .photo {
	width: 30%;
	margin: 0 5%;
	float: left;
}

.price .example table {
	width: 60%;
	margin: 0;
	float: left;
	background-color: #FFF;
	border-radius: 20px;
	box-shadow: 3px 3px 3px 3px #000;
	border-collapse: collapse;
}

.price .example table td {
	padding: 1em;
	border-bottom: #000 1px solid;
}

.price .example table td.last {
	border-bottom: none;
}

.price .example table td:nth-of-type(1) {
	font-weight: 700;
	text-align: center;
}

.price .example table td:nth-of-type(2) {
	font-size: 1.3vw;
	text-align: left;
}

.price .example table td:nth-of-type(2) .mb { display: none; }

.price .option {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.price .option .box {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}

.price .option dl {
	border-radius: 0;
	background-color: #FFF;
	padding: 0;
}

.price .option dt,
.price .option dd {
	width: 50%;
	margin: 0;
	padding: 10px 0;
	float: left;
	font-size: 1.3vw;
}

.price .option dt {
	border-radius: 0;
	background-color: #0931E4;
	color: #FFF;
	font-weight: 400;
}

.price .option dd {
	font-weight: 400;
	color: #000;
	text-shadow: initial;
}

.movie {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}

.movie .inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}

.movie .glid {
	width: 46%;
	margin: 0 2% 50px;
	padding: 0;
	float: left;
	aspect-ratio: 560 / 315;
}

.ft_contact {
	width: 100%;
	margin: 0;
	padding: 50px 0;
	background-color: #0931E4;
	float: left;
}

.ft_contact .inner {
	width: 100%;
	max-width: 1980px;
	margin: 0 auto;
	padding: 0;
}

.ft_contact .glid {
	width: 50%;
	margin: 0;
	padding: 0;
	float: right;
}

.ft_contact h2 {
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	float: left;
	color: #fff231;
	font-size: 2.7vw;
	text-align: center;
}

.ft_contact h3 {
	width: 100%;
	margin: 20px 0 0;
	padding: 0;
	float: left;
	color: #FFF;
	font-size: 1.5vw;
	text-align: center;
}

.ft_contact .tel {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	color: #FFF;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.ft_contact .button {
	width: 100%;
	margin: 50px 0;
	padding: 0;
	float: left;
}

.ft_contact .button a {
	width: 80%;
	margin: 0 10%;
	padding: 0;
	float: left;
	background-color:rgba(14,223,28,1.00);
	font-weight: 700;
	font-size: 2.3vw;
	text-align: center;
	line-height: 5vw;
	border-radius: 2.5vw;
	color: #FFF;
}

.ft_contact .button p {
	text-align: center;
	color: #FFF;
	width: 100%;
	margin: 20px 0 0;
	float: left;
	font-size: 20px;
	font-weight: 700;
}

.ft_contact .logo dl {
	width: 90%;
	margin: 0 5%;
	padding: 0;
	float: left;
}

.ft_contact .logo dt {
	width: 25%;
	margin: 0;
	padding: 0;
	float: left;
}

.ft_contact .logo dd {
	width: 75%;
	margin: 0;
	padding: 0;
	float: left;
}

.ft_contact .logo dd .tenpo {
	width: 95%;
	margin: 0 5% 0 0;;
	padding:0;
	float: right;
	text-align: right;
	color: #FFF;
	font-size: 40px;
	font-weight: 900;
}

.ft_contact .logo .photo {
	width: 70%;
	margin: -70px 0 20px 30%;
	float: left;
	text-align: center;
}

.ft_contact .logo .photo img {
	max-width: 170px;
	margin: 0 auto;
	border-radius: 20px;
}

.ft_contact .logo .photo p {
	width: 100%;
	margin: 5px 0 0;
	float: left;
	text-align: center;
	color: #FFF;
	float: left;
}

.ft_contact .logo .corpname {
	width: 70%;
	margin: 20px 0 0 30%;
	text-align: left;
	color: #FFF;
}

.ft_contact .logo .corpname .post {
	margin: 10px 0 0;
}



/*
.ft_contact .logo {
	width: 100%;
	margin: 0 0 50PX;
	padding: 0;
	float: left;
}

.ft_contact .logo_img {
	width: 50px;
	float: left;
}

.ft_contact .logo_text {
	width: 300px;
	float: left;
	margin-top: 20px;
}

.ft_contact .button {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	text-align: center;
	color: #FFF;
}

.ft_contact .button a {
	width: 350px;
	margin: 0 auto 10px;
	padding: 10px 0;
	background-color: #fff231;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: #3166b1;
	display: block;
	border-radius: 10px;
	transition: ease 0.5s all;
}

.ft_contact .button a:hover {
	background-color: #FFF;
	border-radius: 20px;
}

.ft_contact .tenpo {
	float: left;
	margin-top: 25px;
	font-size: 25px;
	font-weight: 700;
	color: #FFF;
}

.ft_contact .corp_gr {
	width: 45%;
	margin: 0 0 0 50px;
	padding: 0;
	float: left;
	color: #FFF;
}

.ft_contact .corp_gr .infomation {
	font-size: 30px;
	font-weight: 700;
	text-align: center;
}

.ft_contact .corp_gr .qr_code {
	width: 100PX;
	margin: 0 0 0 20px;
}
*/

.economy {
	width: 100%;
	padding: 50px 0 0;
	margin: 0 0 -100px;
	float: left;
}

.economy h2 {
	width: 100%;
	font-size: 6vw;
	color: #0931E4;
	text-align: center;
	padding: 50px 0;
	float: left;
	text-shadow:
    3px 3px 5px #fff231,
    -3px 3px 5px #fff231,
    -3px -3px 5px #fff231,
    3px -3px 5px #fff231;
}

.economy h2 span {
	font-size: 7vw;
	color: #fff231;
	text-shadow:
    3px 3px 5px #0931E4,
    -3px 3px 5px #0931E4,
    -3px -3px 5px #0931E4,
    3px -3px 5px #0931E4;
}

.economy h3 {
	width: 100%;
	padding: 0;
	margin: 0 0 20px;
	float: left;
	font-size: 30px;
	text-align: center;
}

.economy .wory {
	width: 100%;
	margin: 0;
}

.economy table {
	width: 90%;
	margin: 0 5%;
}

.economy td:nth-of-type(1) {
	width: 45%;
}

.economy td:nth-of-type(2) {
	width: 100px;
}

.economy td:nth-of-type(2) p {
	width: 100%;
	background: #0931E4;
	clip-path: polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);
	writing-mode: vertical-rl;
	color: #FFF;
	padding: 50px 40px 50px 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.3em;
}

.economy .wory ul {
	width: 60%;
	margin: 0;
	padding: 0;
	float: left;
}

.economy .wory ul li {
	width: 100%;
	margin: 0 0 20px;
	padding: 10px 0;
	float: left;
	background-color: #44403f;
	color: #FFF;
	font-weight: 700;
	text-align: center;
	border-radius: 5px;
}

.economy .wory img {
	width: 40%;
	margin: 0;
	float: left;
}

.economy td:nth-of-type(3) { display: flex;vertical-align: middle; }

.economy td:nth-of-type(3) .glid {
	width: 70%;
	padding: 0;
	margin: 0;
	float: left;
}

.economy td:nth-of-type(3) table {
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
	float: left;
}

.economy td:nth-of-type(3) table td {
	width: 100%;
	padding: 5px 0 5px 40px;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	float: left;
	background-image: url("../images/check.svg");
	background-repeat: no-repeat;
	background-position: center left 10px;
	background-size: 20px;
}

.economy td td img {
	width: 30px;
}

.economy td:nth-of-type(3) .block {
	width: 30%;
	margin: 50px 0 0;
	float: right;
}

.economy td:nth-of-type(3) .box {
	width: 100%;
	margin: 0;
	padding: 10px 0;
	float: left;
	text-align: center;
	background-color: #0931E4;
	color: #fff231;
	font-size: 20px;
	font-weight: 700;
	border-radius: 5px;
}

.economy td:nth-of-type(3) .block .image {
	width: 100%;
	margin: 0;
	padding: 0;
	float: right;
}

.economy td:nth-of-type(3) .block .imaage img {
	margin: 0;
	width: 100%;
}

.economy .cost {
	width: 90%;
	margin: 0 5% 50px;
	float: left;
}

.economy .cost h4 {
	width: 100%;
	padding: 0;
	float: left;
	margin: 0;
}

.economy .cost h4 p {
	width: auto;
	font-size: 30px;
	color: #0931E4;
	border: #0931E4 2px solid;
	border-radius: 10px;
	padding: 20px 1em;
	float: left;
	margin: 0;
}

.economy .cost p.example {
	font-size: 24px;
	font-weight: 700;
}

.economy .cost .balloon1-left {
  position: relative;
  float: right;
  display: inline-block;
  margin: 0;
  padding: 20px 0.5em;
  max-width: calc(100% - 30px);
  box-sizing: border-box;
  color: #FFF;
  font-size: 3vw;
  font-weight: 700;
  background-color: red;
  line-height: 1em;
  text-align: center;
  border: red 2px solid;
  border-radius: 20px;
}

.economy .cost .balloon1-left::before {
  content: "";
  position: absolute;
  top: 60%;
  left: -45px;
  margin-top: -30px;
  border: 15px solid transparent;
  border-right: 30px solid red;
}

.economy .cost .balloon1-left p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.economy .cost .balloon1-left span {
  font-size: 2vw;
}


.economy .cost table {
	width: 75%;
	margin: 20px 0;
}

.economy .cost th,
.economy .cost td{
	width: 25%;
	text-align: center;
	padding: 5px 0;
	font-size: 20px;
}

.economy .cost th {
	background-color: #d1e8f8;
	font-weight: 700;
}

.economy .cost td {
	background-color: #f1f8fd;
}

.economy .cost td:nth-of-type(3){
	width: 100%;
	margin: 0;
	display: block;
}

.economy .cost small {
	font-size: 16px;
}

.economy .trial {
	width: 90%;
	margin: 0 5%;
	padding: 0;
	float: left;
}

.economy .trial .glid_left {
	width: 35%;
	margin: 0;
	padding: 0;
	float: left;
}

.economy .trial .glid_right {
	width: 65%;
	margin: 0;
	padding: 0;
	float: right;
}

.economy .trial .glid_left .balloon {
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em;
  padding: 1em;
  min-width: 120px;
  max-width: 100%;
  box-sizing: border-box;
  color: #FFF;
  font-size: 1.3vw;
  background: #44403f;
  text-align: justify;
}

.economy .trial .glid_left .balloon::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #44403f;
}

.economy .trial .glid_left .balloon p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.economy .trial .glid_left dl {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #20aee5;
	color: #FFF;
	font-weight: 700;
	display: inline-block;
}

.economy .trial .glid_left dt {
	width: 68%;
	margin: 20px 3%;
	padding: 0;
	float: left;
	font-size: 1.5vw;
}

.economy .trial .glid_left dt span {
	color: #fff231;
}

.economy .trial .glid_left dd {
	width: 26%;
	margin: 0;
	padding: 0;
	float: left;
	text-align: center;
}

.economy .trial .glid_left dd img {
	width: 80%;
	margin: 15px 10%;
}

.economy .trial .glid_right dl {
	width: 80%;
	margin: 0 15% 0 5%;
	padding: 0;
	background-color: #20aee5;
	color: #FFF;
	font-weight: 700;
	display: block;
	float: left;
}

.economy .trial .glid_right dt {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.economy .trial .glid_right dd {
	width: 100%;
	margin: 0;
	padding: 0.3em 0;
	text-align: center;
	float: left;
	font-size: 1.5vw;
}

.economy .trial .glid_right .fukidasi {
	width: 180px;
	height: 180px;
	text-align: center;
	font-size: 24px;
	background-color: #0931E4;
	color: #FFF;
	font-weight: 700;
	float: right;
	border-radius: 90px;
	padding: 30px 0 0;
	top: -300px;
	display: block;
	position: relative;
}

.economy .trial .glid_right .fukidasi span {
	font-size: 28px;
	color: #fff231;
}

.copy {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
	font-size: 2.5vw;
	font-weight: 700;
	color: #FFF;
	line-height: 2em;
	text-align: center;
	float: left;
}

.copy span {
	color: #fff231;
}

.case_study {
	width: 100%;
	margin: 0 0 50px;
	padding: 0;
}

.case_study h2 {
	width: 90%;
	margin: 50px 5%;
	padding: 0;
	font-size: 50px;
	color: #0931E4;
	text-align: center;
	float: left;
}

.case_study .case_block {
	width: 90%;
	max-width: 1980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}

.case_study .case_block dl {
	box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.3);
	border-radius: 5px;
}

.case_study .case_block dt {
	margin: 0;
	padding: 5px 0;
	color: #FFF;
	text-align: center;
	background-color: #0931E4;
}

.case_study .case_block .box {
	margin: 0;
	padding: 0;
	float: left;
}

.case_study .case_block .box.photo {
	width: 45%;
	aspect-ratio: 600 / 450;
	text-align: center;
}

.case_study .case_block .box.photo img {
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
}

.case_study .case_block .box.photo p {
	padding: 5px 0;
	font-weight: 700;
	text-align: center;
	color: #0931E4;
	font-style: italic;
}

.case_study .case_block .box.arr {
	width: 10%;
}

.case_study .case_block .box.arr .arrow {
  position: relative;
  display: inline-block;
  width: 80%;
  height: 30px;
  margin: 3.5vw 5% 0;
}

.case_study .case_block .box.arr .arrow::before,
.case_study .case_block .box.arr .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 100%;
  height: 5px;
  border-radius: 9999px;
  background-color: #0931E4;
  transform-origin: calc(100% - 2px) 50%;
}

.case_study .case_block .box.arr .arrow::before { transform: rotate(45deg); }
.case_study .case_block .box.arr .arrow::after { transform: rotate(-45deg); }

/* *******************************************************************
           Responsiv Layout (1500px)
********************************************************************** */

@media screen and (max-width: 1500px) {

.reason .reason_box { grid-template-columns: 1fr; }

.reason .reason_box dt {
	width: 20%;
	margin: 0;
	padding: 0;
	float: left;
}

.reason .reason_box dd {
	width: 80%;
	margin: 0;
	padding: 0;
	float: left;
}

.reason .reason_box dd br { display: none; }

.intro .bubble.left01 {	top: -500px; }
.intro .bubble.right01 { top: -850px; }
.intro .bubble.right02 { top: -800px; }

}

/* *******************************************************************
           Responsiv Layout (1300px)
********************************************************************** */

@media screen and (max-width: 1300px) {

.head .logo { width: 500px; }

.head .logo table { border-collapse: collapse; }

.head .logo td:nth-of-type(1) { width: 100px;float: left; }
.head .logo td:nth-of-type(2) { width: 400px;padding-top: 30px;float: left; }
.head .logo td:nth-of-type(3) {	width: 380px;padding: 0 20px 0 0;float: right;text-align: right;line-height: 1em; }

.head .button a {
	padding: 0 2vw 0 6vw;
	line-height: 5vw;
	border-radius: 2.5vw;
	font-size: 2vw;
	background-position: center left 2vw;
	background-size: 3vw;
}

.reason h2 { font-size: 7vw; }
.reason h2 span { font-size: 5vw; }
.reason h2 span.yellow { font-size: 6vw; }
.reason h2 span.yellow span { font-size: 8vw; }
.reason .reason_box { grid-template-columns: 1fr; }
.reason td:nth-of-type(3) p { font-size: 4vw; }
.reason .reason_box dd p { font-size: 28px; }

.intro .logo_img { width: 30%;margin: -50px 35% 0; }
.intro .bubble { max-width: 30%; }
.intro .bubble span { font-size: 16px; }
.intro .bubble.left01 {	top: -400px; }
.intro .bubble.left02 {	top: -350px; }
.intro .bubble.right01 { top: -750px;left: 65%; }
.intro .bubble.right02 { top: -700px;left: 65%; }

.price .example { margin: 0 0 50px; }
.price .example h3 {	margin: 0 5%; }
.price .example .photo { margin: -50px 5% 0; }
.price .example table td { width: 100%;	float: left; }
.price .example table td:nth-of-type(1) { border-bottom: none;padding: 1em 0 0; }
.price .example table td:nth-of-type(2) { text-align: center;font-size: 16px; }
.price .option dt,
.price .option dd {	font-size: 16px; }

.economy .trial .glid_right .fukidasi {
	width: 140px;
	height: 140px;
	font-size: 18px;
	line-height: 24px;
	border-radius: 70px;
	top: -250px;
}
.economy .trial .glid_right .fukidasi span { font-size: 24px; }
.economy td:nth-of-type(3) table td br { display: none; }

.ft_contact .logo .corpname { width: 80%;margin: 20px 0 0 20%; }
.ft_contact .logo .photo { width: 90%;margin: -50px 0 20px 10%; }

}

/* *******************************************************************
           Responsiv Layout (1000px)
********************************************************************** */

@media screen and (max-width: 1000px) {

.head .logo { margin: 1vw 0 0 5%; }
.head .logo { width: 45%; }
.head .logo td:nth-of-type(1) {	width: 20%; }
.head .logo td:nth-of-type(2) {	width: 80%; }
.head .logo td:nth-of-type(3) {	width: 80%;font-size: 3.5vw; }

.head .button p { font-size: 16px; }

.reason td:nth-of-type(1),
.reason td:nth-of-type(2),
.reason td:nth-of-type(3) { width: 100%;float: left; }
.arrow { display: none; }
.dli-arrow-down {
	left: 50%;
	display: inline-block;
	vertical-align: middle;
	color: #0931E4;
	line-height: 1;
	position: relative;
	width: 10px;
	height: 70px;
	background: currentColor;
}

.dli-arrow-down::before {
  content: '';
  width: 30px;
  height: 30px;
  border: 10px solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: -5px;
  box-sizing: border-box;
}
.reason .speechBubble { font-size: 4vw; }
.reason .reason_box { grid-template-columns: 1fr 1fr 1fr; }
.reason .reason_box dt,
.reason .reason_box dd { width: 100%; }
.reason .reason_box dd br { display: block; }

.qa .glid { width: 100%;padding: 0 0 50px; }

.intro { height: auto;padding: 0 0 50px; }
.intro .logo_img { width: 30%;margin: 0 0 0 5%;float: left; }
.intro .bubble { 
	width: 55%;
	max-width: 55%;
	text-align: left;
	padding: 20px;
	border-radius: 20px;
	margin: 20px 5% 0 0;
}
.intro .bubble br { display: none; }
.intro .bubble.left01,
.intro .bubble.left02,
.intro .bubble.right01,
.intro .bubble.right02 { top: initial;left: initial;float: right; }

.flow .flow_block {	grid-template-columns: 1fr; }
.flow .flow_block dl { width: 100%;float: left;box-sizing: border-box; }
.flow .flow_block dt { width: 30%;height: 200px;padding: 5px 0;float: left; }
.flow .flow_block .imgbox {	width: 30%;height: 200px;float: left; }
.flow .flow_block dd { width: 38%;margin: 0;padding: 20px 1%;float: left; }

.price .glid_left {	width: 100%; }
.price .glid_right { width: 100%; }
.price .glid_right p { margin: 20px 5% 0;text-align: center; }

.price .glid_right .speechBubble {
	top: -20px;
	left: 32%;
	position: relative;
	display: inline-block;
	margin: 1.5em 15px 1.5em 0;
	padding: 7px 10px;
  min-width: 120px;
  max-width: calc(100% - 15px);
  box-sizing: border-box;
  color: #FFF;
  font-size: 20px;
  background: red;
}

.price .glid_right .speechBubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: none;
  border-left: none;
  translate:initial;
  transform: initial;
  transform-origin: initial;
}

.price .example .photo { width: 60%;margin: 0 20% 20px; }
.price .example table { width: 100%; }
.price .option .box { grid-template-columns: 1fr 1fr; }

.economy td,
.economy td:nth-of-type(1),
.economy td:nth-of-type(2){ width: 100%;float: left; }
.economy td:nth-of-type(2) p {
	clip-path: polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
	writing-mode:horizontal-tb;
	width: 50%;
	margin: 0 25%;
	padding: 20px 0 40px;
	text-align: center;
}
.economy .wory img { width: 30%;margin: 0 5%; }
.economy td:nth-of-type(3) .block .imaage img {
	width: 80%;
}


.economy .cost th { display: none; }
.economy .cost td:nth-of-type(1),
.economy .cost td:nth-of-type(2),
.economy .cost td:nth-of-type(3),
.economy .cost td:nth-of-type(4){ width: 100%;float: left; }
.economy .cost td::before { 
	width: 100%;
	float: left;
	text-align: center;
	background-color: #d1e8f8;
	font-weight: 700;
	line-height: 1.7em;
}
.economy .cost td:nth-of-type(4){ margin-bottom: 20px; }
.economy .cost td:nth-of-type(1)::before { content: "外壁メンテナンス方法" }
.economy .cost td:nth-of-type(2)::before { content: "費用" }
.economy .cost td:nth-of-type(3)::before { content: "実施回数（生涯）" }
.economy .cost td:nth-of-type(4)::before { content: "トータル費用" }
.economy .trial .glid_left,
.economy .trial .glid_right { width: 100%; }
.economy .trial .glid_left .balloon {
  margin: 0 0 1.5em;
  padding: 1em 2%;
  width: 45%;
  min-width: 45%;
  max-width: 45%;
  font-size: 16px;
}
.economy .trial .glid_left .balloon::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: initial;
  margin-left: 0;
  margin-right: -40px;
  border: 15px solid transparent;
  border-left: 30px solid #44403f;
  margin-top: -30px;
}
.economy .trial .glid_left dl { width: 45%;float: right; }
.economy .trial .glid_left dt { font-size: 16px; }
.economy .trial .glid_right .fukidasi { top: -30vw; }

.ft_contact .logo dd .tenpo { font-size: 3.5vw; }
.ft_contact .logo .corpname { width: 90%;margin: 20px 0 0 10%; }

.case_study .case_block { grid-template-columns: 1fr 1fr; }

}

/* *******************************************************************
           Responsiv Layout (880px)
********************************************************************** */

@media screen and (max-width: 880px) {

.price .glid_right p { font-size: 4vw; }
.price .glid_right .speechBubble {
	width: 70%;
	top: initial;
	left: initial;
	position: relative;
	display:block;
	margin: 1.5em 15% 0;
	padding: 7px 5%;
	font-size: 20px;
	float: left;
}
.price .glid_right small { text-align: center;margin-top: 0; }

.ft_contact .glid {	width: 100%; }
.ft_contact h2 { font-size: 5vw; }
.ft_contact .button a { font-size: 4vw;line-height: 7vw;border-radius: 3.5vw; }
.ft_contact .logo dd .tenpo { font-size: 6vw; }
.ft_contact .logo .corpname { width: 70%;margin: 20px 0 0 30%; }
.ft_contact h3 { font-size: 16px; }

.economy .trial .glid_left .balloon {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
  margin: 0 10% 20px;
}
.economy .trial .glid_left .balloon::before {
  right: initial;
  border-left: none;
  top: 100%;
  left: 50%;
  margin-right: initial;
  margin-left: -15px;
  margin-top: 0;
  border: 15px solid transparent;
  border-top: 15px solid #44403f;
}
.economy .trial .glid_left dl { width: 80%;margin: 0 10% 30px; }
.economy .trial .glid_right dl { width: 80%;margin: 0 10%; }
.economy .trial .glid_right .fukidasi { margin-right: -5%; }

}

/* *******************************************************************
           Responsiv Layout (780px)
********************************************************************** */

@media screen and (max-width: 780px) {

.economy .cost h4 { display: flex;margin-top: 20px; }
.economy .cost h4 p { float: none;margin: 0 auto;padding: 0.1em 1em; }
.economy .cost p.example { text-align: center;margin-bottom: 20px; }
.economy .cost table { width: 100%;margin: 20px 0;float: left; }
.economy .cost small { width: 100%;margin: 0;float: left; }
.economy .cost .balloon1-left { font-size: 5vw; }
.economy .cost .balloon1-left::before {
  top: 100%;
  left: calc(50% - 15px);
  margin-top: 0;
  border: 15px solid transparent;
  border-top: 30px solid #0931E4;
}
.economy .cost .balloon1-left span { font-size: 3.5vw; }

}

/* *******************************************************************
           Responsiv Layout (680px)
********************************************************************** */

@media screen and (max-width: 680px) {

.head .inner h1 { font-size: 14px; }
.head .logo td:nth-of-type(2) { padding-top: 10px; }

.head .button { display:block; }
.head .button a { 
	width: 170px;
	margin: 0 auto;
	padding: 0 18px 0 40px;
	line-height: 36px;
	border-radius: 18px;
	font-size: 18px;
	background-position: center left 18px;
	background-size: 20px;
}
.head .button p {
	width: 100%;
	float: left;
	font-size: 14px;
}

.head .button a span { display: none; }

.reason .reason_box { grid-template-columns: 1fr; }
.reason .reason_box dt { width: 20%;margin: 0;padding: 0;float: left; }
.reason .reason_box dd { width: 80%;margin: 0;padding: 0;float: left; }
.reason .reason_box dd br { display: none; }

.movie .glid { width: 90%;margin: 0 5% 20px; }

.flow .flow_block dl { width: 100%;float: left;box-sizing: border-box; }
.flow .flow_block dt { width: 100%;height: auto;padding: 5px 0}
.flow .flow_block .imgbox {	width: 30%; }
.flow .flow_block dd { width: 68%; }

.price dd { font-size: 24px; }
.price dd span { font-size: 20px; }

.economy .trial .glid_right { margin: 0 0 30px; }
.economy .trial .glid_right .fukidasi {
	width: 100px;
	height: 100px;
	font-size: 16px;
	line-height: 20px;
	border-radius: 50px;
	padding: 18px 0 0;
}
.economy .trial .glid_right .fukidasi span { font-size: 18px; }
.economy .trial .glid_right dd { font-size: 14px;padding: 5px 5%;text-align: left; }

}

/* *******************************************************************
           Responsiv Layout (580px)
********************************************************************** */

@media screen and (max-width: 580px) {

.flow .flow_block .imgbox {	width: 100%; }
.flow .flow_block dd { width: 100%;padding: 20px 3%; }

.qa .glid {padding: 0 0 20px; }
.qa .fukidashi { width: 70px;height: 70px;font-size: 20px; }
.qa .glid.casestudy table td:nth-of-type(1),
.qa .glid.casestudy table td:nth-of-type(2) { width: 100%;margin: 0 0 20px;float: left;font-size: 16px; }
.qa .glid.casestudy table td:nth-of-type(2) .pc { display: none; }

.price .glid_left td {  width: 90%;margin: 0 5%;padding: 0;float: left; }
.price .glid_right p { font-size: 5vw; }
.price .glid_right .speechBubble { width: 90%;margin: 1.5em 5% 0; }
.price .option .box { grid-template-columns: 1fr; }
.price .example table td:nth-of-type(2) .mb { display: block; }
.price .example table td span { font-size: 20px; }

.case_study .case_block { grid-template-columns: 1fr; }

.ft_contact .logo .corpname { width: 80%;margin: 20px 0 0 10%; }
.ft_contact .button { margin: 20px 0 0; }

.economy .wory ul { width: 100%;margin: 0; }
.economy .wory img { margin: 0 35%; }
.economy td:nth-of-type(3) { display: block; }
.economy td:nth-of-type(3) .glid { width: 100%;float: left; }
.economy td:nth-of-type(3) .block { width: 100%;margin: 0;padding: 0;float: left; }
.economy td:nth-of-type(3) .block .imaage { width: 30%; margin: 0 35%;float: left; }
.copy {	padding: 0 5%;font-size: 16px;text-align: left; }
.flow h2 { font-size: 9vw;width: 90%;margin: 0 5% 20px;float: left; }

}

/* *******************************************************************
           Responsiv Layout (480px)
********************************************************************** */

@media screen and (max-width: 480px) {

.head .logo { width: 90%;margin: 0 5%; }
.head .button {
	width: 100%;
	margin: 0;
	top: 0;
	right: 0;
	position: relative;
	float: left;
}
.head .logo td:nth-of-type(3) {	font-size: 24px; }

.reason h3 { font-size: 6vw; }
.reason ul li {	padding: 10px 5%;text-align: left; }
.reason ul li br { display: none; }
.reason .reason_box dt,
.reason .reason_box dd { width: 100%; }

.intro .logo_img { width: 20%; }
.intro .bubble { width: 90%;max-width: 90%; }
.intro .bubble h3 { font-size: 16px;margin-bottom: 10px; }

.flow h2 { font-size: 9vw;width: 90%;margin: 0 5% 20px;float: left; }
.flow .flow_block dt { font-size: 5vw; }

.price .glid_right .speechBubble {  font-size: 18px; }

.ft_contact .logo .corpname span { width: 100%;	float: left;font-weight: 700; }

.economy { padding: 0; }
.economy h3 { font-size: 6vw; }
.economy td:nth-of-type(2) p { width: 80%;margin: 0 10%; }
.economy td:nth-of-type(3) dd br { display: none; }
.economy td:nth-of-type(3) .block .image { width: 100%;margin:0;padding: 0;float: left; }

.case_study h2 { font-size: 9vw; }


}