@charset "utf-8";
/* CSS Document */
@media screen and (max-width:900px){
	
	html {
		font-size: 8px;
	}
	body {
		max-width: 900px;
	}
	.sp-only {
		display: block;
	}
	.pc-only {
		display: none;
	}
	
	/*header*/
	.head-logo a {
		width: 280px;
	}
	.head-logo a span {
		font-size: 17px;
	}
	
	/*--- メインビジュアル ---*/
	.mainvisual {
		height: 70vh;
		width: 100%;
	}
	.catch-copy {
		position: absolute;
		bottom: 80px;
		right: 30px;
	}
	.catch-copy h2 {
		text-align: center;
		font-size: 36px;
	}
	.mainvisual::before {
		content: "";
		width: 300px;
		height: 223px;
		bottom: 20px;
		right: 150px;
	}
	.mainvisual::after {
		content: "";
		width: 120px;
		height: 310px;
		bottom: 50px;
		left: 10px;
		opacity: 0.7;
	}

	/*about*/
	#about {
		padding: 10rem 0;
		position: relative;
	}
	#about::before {
		content: "";
		width: 175px;
		height: 195px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		opacity: 0.4;
		z-index: -1;
	}
	#about .inner {
		width: 95%;
		margin: auto;
		flex-direction: column-reverse;
		gap: 3rem;
	}
	#about .inner .left {
		width: 70%;
		margin: auto;
	}
	#about .inner .right {
		width: 100%;
	}
	.ttl-about {
		font-size: 36px;
		text-align: center;
	}
	.ttl-about span {
		font-size: 20px;
	}
	.about-txt {
		width: 80%;
		margin: auto;
		flex-direction: column;
		gap: 1.5rem;
	}
	.about-txt li {
		list-style: disc;
		list-style-position: inside;
		font-size: 16px;
	}
	
	/*bnr-space*/
	.bnr-space {
		width: 80%;
	}

	
	/*GIKO*/
	#giko::before {
		width: 100%;
	}
	#giko .inner {
		width: 90%;
		margin: auto;
		flex-direction: column;
		gap: 3rem;
	}
	#giko .inner .left {
		width: 100%;
	}
	#giko .inner .right {
		width: 70%;
		margin: auto;
	}
	.giko-logo {
		width: 390px;
	}
	.giko-txt-b {
		font-size: 20px;
	}
	.giko-txt-s {
		font-size: 15px;
		width: 95%;
	}
	
	
	/*point*/
	#point::before {
		height: 100%;
	}
	#point .inner {
		flex-direction: column;
		gap:10rem;
	}
	#point .inner .item {
		width: 95%;
		margin: auto;
		height: 640px;
	}
	.point-ttl {
		font-size: 24px;
	}
	.point-img {
		width: 80%;
	}
	.point-txt {
		font-size: 16px;
	}
	
	
	/*feature*/
	.feature-ttl {
		font-size: 24px;
	}
	#feature .inner {
		width: 90%;
	}
	#feature .inner ul {
		width: 90%;
		flex-direction: column;
		gap: 5rem;
	}
	#feature .inner ul li {
		width: 100%;
		margin-bottom: 0;
	}
	.f-txt-b p {
		font-size: 20px;
	}
	.feature-txt {
		font-size: 15px;
	}
	
	
	/*merit-demerit*/
	#merit-demerit::before {
		content: "";
		width: 150px;
		height: 90px;
		opacity: 0.5;
	}
	#merit-demerit .inner {
		width: 95%;
		flex-direction: column;
		gap:5rem;
	}
	#merit-demerit .inner .container {
		width: 100%;
	}
	.demerit-con {
		margin-top: 0rem;
	}
	.merit-ttl {
		font-size: 22px;
	}
	.merit-list {
		font-size: 15px;
	}
	
	
	/*comparison*/
	#comparison .inner {
		width: 98%;
	}
	
	
	/*case*/
	.case-wrapper {
		width: 95%;
	}
	.case-wrapper .item {
		width: 45%;
	}
	.case-name {
		font-size: 18px;
	}
	.case-txt {
		font-size: 15px;
	}

	
	/*flow*/
	#flow .container {
		width: 95%;
	}
	.flow-list {
		width: 90%;
	}
	.flow-list li {
		gap: 0rem;
		justify-content: space-between;
		align-items: center;
	}
	.flow-no {
		width: 25%;
	}
	.flow-no p {
		font-size: 18px;
	}
	.flow-in {
		width: 72%;
	}
	.flow-ttl {
		font-size: 18px;
	}
	.flow-txt {
		font-size: 15px;
	}

	/*price*/
	.price-con {
		margin: auto;
		width: 90%;
	}
	.price-ttl {
		font-size: 22px;
	}
	.price-table {
		width: 95%;
	}
	.price-table table th,
	.price-table table td {
		font-size: 15px;
	}

	/*greeting*/
	#greeting {
		padding-top: 10rem;
	}
	#greeting .inner {
		width: 95%;
		margin: auto;
		flex-direction: column;
		gap:5rem;
	}
	#greeting .inner .left {
		width: 100%;
	}
	#greeting .inner .right {
		width: 100%;
	}
	.greeting-txt {
		font-size: 15px;
	}
	.doc-name {
		font-size: 24px;
	}
	
	
	/*site-map*/
	.site-map .inner {
		width: 90%;
	}
	.site-map .inner .item {
		width: 350px;
		margin: auto;
	}
	.site-map .inner .item:nth-child(3) {
		margin-top: 3rem;
	}
	.site-map2 .inner {
		width: 90%;
	}
	.site-map2 .inner .item {
		width: 350px;
	}
    .site-map2 .inner .item:nth-child(2) {
		margin-top: 3rem;
	}
	.site-map2 .inner .item:nth-child(3) {
		margin-top: 3rem;
	}
	/*footer*/
	.foot-logo {
		width: 390px;
		margin: auto;
	}
	#footer .inner {
		width: 90%;
		margin: 5rem auto;
		flex-direction: column;
		gap: 5rem;
	}
	#footer .inner .left {
		width: 70%;
		margin: auto; 
	}
	.foot-info dl dt,
	.foot-info dl dd {
		font-size: 16px;
	}
	.foot-info dl dt {
		width: 20%;
	}
	.foot-info dl dd {
		width: 80%;
	}
	.web-bnr {
		width: 80%;
		margin: auto;
	}
	#footer .inner .right {
		width: 80%;
		margin: auto;
	}
	
	
	#sp-btn {
		position: fixed;
		bottom: 0;
		left: 50%;
		z-index: 980;
    width: 100%;
		transform: translateX(-50%);
	}
	#sp-btn ul {
		justify-content: center;
    max-width: 900px;
    padding-bottom: 0;
    margin: 0 auto;
    position: relative;
	}
	#sp-btn .type1 ul::before {
		background: rgba(76, 190, 227, 0.7);
	}
	#sp-btn ul::before {
		content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
		background:#20928B;
		backdrop-filter: blur(2px);
	}
	#sp-btn ul li {
		width: calc(100% / 4);
    margin: 0;
    padding: 10px 0 6px;
    text-align: center;
    line-height: 1.2;
    position: relative;
	}
	#sp-btn ul li a {
		display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
		text-align: center;
	}
	#sp-btn ul li i {
		font-size: 3.6rem;
    font-family: "Font Awesome 5 Free";
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 3px;
		text-align: center;
	}
	#sp-btn ul li span {
		display: block;
    font-size: 1.8rem;
    color: #fff;
		text-align: center;
	}
	
	
	
	/*下層*/
	/*--- メインビジュアル ---*/
	.s-mainvisual {
		height: 50vh;
		width: 100%;
	}
	.page-ttl {
		width: 90%;
		position: absolute;
		bottom: 150px;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-ttl h2 {
		text-align: center;
		font-size: 45px;
	}

	
	
}



@media screen and (max-width:430px) {
	
	html {
		font-size: 6px;
	}
	body {
		max-width: 430px;
	}
	.spbr {
		display: block;
	}
	
	
	/*header*/
	.head-logo a {
		width: 250px;
	}
	.head-logo a span {
		font-size: 14px;
	}
	
	/*--- メインビジュアル ---*/
	.mainvisual {
		height: 60vh;
		width: 100%;
	}
	.catch-copy {
		position: absolute;
		bottom: 30px;
		right: 30px;
	}
	.catch-copy h2 {
		text-align: center;
		font-size: 28px;
	}
	.mainvisual::before {
		content: "";
		width: 210px;
		height: 170px;
		bottom: 20px;
		right: 70px;
	}
	.mainvisual::after {
		content: "";
		width: 80px;
		height: 206px;
		bottom: 10px;
		left: 0px;
		opacity: 0.5;
	}

	/*about*/
	#about::before {
		content: "";
		width: 175px;
		height: 195px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		opacity: 0.4;
		z-index: -1;
	}
	#about .inner {
		width: 95%;
		margin: auto;
		flex-direction: column-reverse;
		gap: 3rem;
	}
	#about .inner .left {
		width: 90%;
		margin: auto;
	}
	#about .inner .right {
		width: 100%;
	}
	.ttl-about {
		font-size: 24px;
		text-align: center;
	}
	.ttl-about span {
		font-size: 18px;
	}
	.about-txt {
		width: 100%;
		gap: 2rem;
	}
	.about-txt li {
		font-size: 15px;
	}
	
	/*bnr-space*/
	.bnr-space {
		width: 95%;
	}

	
	/*GIKO*/
	#giko .inner {
		width: 95%;
	}
	#giko .inner .left {
		width: 100%;
	}
	#giko .inner .right {
		width: 90%;
	}
	.giko-logo {
		width: 80%;
	}
	.giko-txt-b {
		font-size: 18px;
	}
	.giko-txt-s {
		font-size: 15px;
		width: 100%;
	}
	
	
	/*point*/
	#point .inner .item {
		width: 95%;
		margin: auto;
		height: 510px;
		padding: 3rem;
	}
	.point-ttl {
		font-size: 20px;
	}
	.point-img {
		width: 90%;
	}
	.point-txt {
		font-size: 15px;
	}
	
	
	/*feature*/
	.feature-ttl {
		font-size: 20px;
	}
	#feature .inner {
		width: 95%;
	}
	#feature .inner ul {
		width: 95%;
	}
	.f-txt-b p {
		font-size: 18px;
	}
	
	
	/*merit-demerit*/
	#merit-demerit .inner {
		width: 95%;
		margin: auto;
		flex-direction: column;
		gap:5rem;
	}
	#merit-demerit .inner .container {
		width: 100%;
	}
	.demerit-con {
		margin-top: 0rem;
	}
	.merit-ttl {
		font-size: 18px;
	}
	.merit-list {
		font-size: 15px;
	}
	
	
	/*comparison*/
	#comparison .inner {
		width: 100%;
	}
	
	
	/*case*/
	.case-wrapper {
		width: 95%;
	}
	.case-wrapper .item {
		width: 100%;
	}
	.case-name {
		font-size: 17px;
	}
	.case-txt {
		font-size: 14px;
	}

	
	/*flow*/
	#flow .container {
		width: 95%;
	}
	.flow-list {
		width: 95%;
	}
	.flow-list li {
		flex-direction: column;
		gap:3rem;
	}
	.flow-no {
		width: 50%;
		margin: auto;
	}
	.flow-no p {
		font-size: 18px;
	}
	.flow-in {
		width: 100%;
	}
	.flow-ttl {
		text-align: center;
		font-size: 17px;
	}
	.flow-txt {
		text-align: center;
		font-size: 14px;
	}

	/*price*/
	.price-con {
		margin: auto;
		width: 95%;
		padding: 3rem;
	}
	.price-ttl {
		font-size: 18px;
	}
	.price-table {
		width: 100%;
	}
	.price-table table th,
	.price-table table td {
		font-size: 15px;
	}

	/*greeting*/
	#greeting {
		padding-top: 10rem;
	}
	#greeting .inner {
		width: 95%;
		margin: auto;
		flex-direction: column;
		gap:5rem;
	}
	#greeting .inner .left {
		width: 100%;
	}
	#greeting .inner .right {
		width: 100%;
	}
	.greeting-txt {
		font-size: 15px;
	}
	.doc-name {
		font-size: 20px;
	}
	
	
	/*site-map*/
	.site-map .inner {
		width: 90%;
		flex-direction: column;
		gap:5rem;
	}
	.site-map .inner .item {
		width: 350px;
		margin: auto;
	}
	.site-map .inner .item:nth-child(3) {
		margin-top: 0;
	}
	
	/*footer*/
	#footer {
		margin-bottom: 9rem;
	}
	.foot-logo {
		width: 80%;
		margin: auto;
	}
	#footer .inner {
		width: 98%;
	}
	#footer .inner .left {
		width: 100%;
		margin: auto; 
	}
	.foot-info dl dt,
	.foot-info dl dd {
		font-size: 14px;
	}
	.foot-info dl dt {
		width: 20%;
	}
	.foot-info dl dd {
		width: 80%;
	}
	.web-bnr {
		width: 100%;
	}
	#footer .inner .right {
		width: 100%;
		margin: auto;
	}
	
	
	
	/*下層*/
	/*--- メインビジュアル ---*/
	.s-mainvisual {
		height: 40vh;
		width: 100%;
	}
	.page-ttl {
		width: 90%;
		position: absolute;
		bottom: 100px;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-ttl h2 {
		text-align: center;
		font-size: 32px;
	}
	
}