@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Sacramento');

:root {
	--white: #fff;
	--black: #000000;		
	--blue: #0053c0;
    --green: #0FAF97;
}

/*全体の設定 */
body *{
	box-sizing: border-box;
}

body {
	box-sizing: inherit;
	margin: 0; padding:0;
	font-family: "MS Pゴシック", "メイリオ", "Arial", "游ゴシック", "ヒラギノ角ゴ ProN", sans-serif, 'Ubuntu Mono', monospace;
	text-size-adjust: auto;
	font-optical-sizing: auto;
	font-weight:500;
	background: var(--white);
	color: bar(--black);
	line-height: 2;
}

html,body {
	font-size: 13px;
	height: 100%;
}

	@media screen and (min-width:786px) {
		html, body {
			font-size: 14px;
		}
	}

img {
	border: none;
	max-width: 100%;
	height: auto;
}

video {max-width: 100%;}

section {
	overflow-x: hidden;
	padding: 8vw;	
}

a {
	transition: 0.3s;
}

a:hover {
	text-decoration: none;
	opacity: 0.9;
}

#container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 1800px;
	margin: auto;
	top: 40px;
}


/*ヘッダー*/
header {
	background-color: rgba(255, 255, 255, 0.8);
	position: fixed;
	z-index: 1;
	left: 0px;
	top: 0;
	width: 100%;
	height: 40px;	
}

/*ロゴ*/
#logo1 img {
    position: fixed;
	display: flex;
	width: 80px;
	top: 10px;
}
#logo1 {
	margin:0;padding: 0;
	padding-left: 20px;
}

	@media screen and (min-width: 768px){
		header {
			height: 60px;	
		}
		#logo1 img{
			top: 20px;
			padding-left: 20px;
			width: 120px;
		}
	}

	@media screen and (min-width: 1200px){
		header {
			height: 80px;	
		}
		#logo1 img{
			width: calc((200 / 1800) * 100%);
			top: 20px;
			padding-left: 20px;
		}
	}


/*ブロック全体*/
#mainimg {
	background: var(--white) url("../images/main_phone.png") no-repeat center center / cover;
	width: 100%;
	padding-top: 150%;	/*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
}

	@media screen and (min-width:768px) {

	#mainimg {
		background: var(--white) url("../images/main_pc.png") no-repeat center center / cover;
		padding-top: 56.25%;	/*アスペクト比16:9（9÷16=0.5624）*/
	}

	}

#mainimg > div {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

	@media screen and (min-width:768px) {
		#mainimg > div {
			padding-left: 100px;
			align-items: flex-start;
			justify-content: center;
		}
	}

	@media screen and (min-width: 1200px){
		#mainimg > div{
			padding-left: 15%;
		}
	}


#mainimg p{
	margin: 0px
}

#mainimg .text {
	/* font-size: 28px;	 */
	font-size: clamp(1.5rem, 0.538rem + 5.13vw, 3rem);
	font-weight: 800;	
	line-height: 1.8;
	text-align: center;	
}

	@media screen and (min-width:768px) {
		#mainimg .text {
			text-align: left;	
			font-size: clamp(1rem, -17.732rem + 39.02vw, 3rem);	
		}
	}

	@media screen and (min-width:768px) {
		#mainimg .text {
			text-align: left;	
			font-size: clamp(3rem, 4vw, 5rem);
		}
	}


/*ボタン*/
#mainimg .btn {
	font-size: clamp(1.3rem, 0.851rem + 2.39vw, 2rem);	
	font-weight: 600;	
	margin-top: 20px;	
	display: flex;
}
#mainimg .btn a {
	display: block;
	text-decoration: none;
	padding: 3px 20px;	
}

	@media screen and (min-width:768px) {
		#mainimg .btn {
			font-size: 20px;
		}
		#mainimg .btn a {
			padding: 3px 30px;
		}
	}

#mainimg .btn p a{
	background: var(--blue);
	color: white;	
}


main {
	flex: 0 0 auto;
	overflow-x: hidden;
}

/*h2見出し*/
main h2 {
	margin: 0;padding: 0;
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

	@media screen and (min-width:768px) {
		main h2 {
			font-size: 30px;
		}	
	}


main h2.c {
	align-items: center;
	font-size: 1.5rem;
	/* font-size: clamp(1rem, 0.359rem + 3.42vw, 2rem); */
	font-weight: 800;
}

	@media screen and (min-width:768px) {
		main h2.c{
			font-size: 2.5rem;
		}	
	}

	@media screen and (min-width:1200px) {
		main h2.c{
			font-size: 4rem;
		}	
	}

	main h2.d {
	align-items: center;
	font-size: 2.3rem;
	/* font-size: clamp(1rem, 0.359rem + 3.42vw, 2rem); */
	font-weight: 800;
}

	@media screen and (min-width:768px) {
		main h2.d{
			font-size: 2.5rem;
		}	
	}

	@media screen and (min-width:1200px) {
		main h2.d{
			font-size: 4rem;
		}	
	}

		main h2.e {
	align-items: center;
	font-size: 2rem;
	/* font-size: clamp(1rem, 0.359rem + 3.42vw, 2rem); */
	font-weight: 800;
	text-align: center;
}

	@media screen and (min-width:768px) {
		main h2.e{
			font-size: 2.5rem;
		}	
	}

	@media screen and (min-width:1200px) {
		main h2.e{
			font-size: 4rem;
		}	
	}

/*h2の英語*/
main h2 span {
	font-size: 1rem;
	font-weight: normal;
}
	@media screen and (min-width:768px){
		main h2 span{
			font-size: 2rem;
		}
	}


/*フッター */
footer {
	background: var(--green);
	color: var(--white);
	padding: 50px;
	display: flex;
	flex-direction: column;
	font-size: 0.7rem;
}

	@media screen and (min-width: 768px){
		footer{
			font-size: 0.7rem;
			line-height: 1rem;
		}
	}

footer small {
	margin-top: 10px;
}

footer .name{
    text-align: center;
}


/* 背景色 */

.bg1 {
	background-color: #A2A5A6;	
	color: var(--black);
}

.bg-triangle{
	position: relative;
	border-top: none;
}

.bg-triangle:before{
	content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%); /* ココ */
    background-color: #A2A5A6;/* デモは赤色の部分 */
	left: 0;
    top: 0; /* topにピッタリくっつけたいので0にする */ 
}

.bg2 {
	background-color: #fff;
    color: var(--black);
	padding: 2rem;
}

.bg3 {
	background: #F8FDFB;
    color: var(--black);
}


.bg4 {
	background: var(--blue);
	color: var(--white);
	padding: 4rem 1.5rem;
	padding-top: 7rem;
}


.bg5 {
	background-color: #fff;	/*背景色 */
    color: var(--black);
	padding: 4rem 0;
}



/* MUrakoze
-------------------------------- */

.list1{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	text-align: center;
}

	@media screen and (min-width:768px){
		.list1{
			flex-direction: row;
			align-items: center;
		}
	}

.logo2{
	text-align: center;
}
.logo2 img{
	width: 30%;
	margin: 0;
}

	@media screen and (min-width:768px){
			.logo2 img{
				width: 20%;
				margin: 1rem;
		}
	}


.list1 .text{
	width: 100%;
	text-align: left;
	line-height: 2rem;
}

	@media screen and (min-width:768px){
		.list1 .text{
			width: 300%;
			font-size: 15px;
	}
}

	@media screen and (min-width:1200px){
		.list1 .text{
			width: 150%;
			padding: 5%;
			font-size: 1.5rem;
		}
	}

.list1 figure img{
	width: 100%;
	box-shadow: 5px 5px 10px 0px #A2A5A6;
	display:flex;
	border-radius:30px 30px 30px 30px;
}

	@media screen and (min-width:768px){
		.list1 figure{
			margin: 0;
			padding: 0;
		}
		.list1 figure img{
			margin-left: 2rem;
			width: 90%;
		}
	}


/* video
-------------------------------- */
div.vid_contents {
    width: 100%;/*背景色を横幅いっぱいに広げる*/
    text-align: center;
    margin: auto;
    padding: 4% 4% 4% 4%;/*ここで動画の周りの余白を調整*/
    background: #F8FDFB;/*余白の背景色*/
}

video.vid_main {
    width: 100%;
    max-width: 920px;/*PC版での最大幅*/
}

.vid_contents .chui{
	font-size: 0.7rem;
	line-height: 1rem;
}

	@media screen and (min-width:450px){
		.vid_contents .chui{
			text-align: center;
			font-size: clamp(0.7rem, 0.433rem + 0.95vw, 1.5rem);
		}
	}


/* お悩み */
/* ------------------------------------ */
.nayami {
    display: flex; 
    justify-content: space-between;
    gap: 5rem;
	flex-direction : column;
	align-items: center;
    margin: 0;
    padding: 0;
}

	@media screen and (min-width: 768px){
		.nayami{
			flex-direction: row;
			align-items: flex-start;
			gap: 1.5rem;
		}
	}

.nayami .bg-black {
    background-color: var(--black);
    color: white;
	padding: 3rem;
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-height: 550px;
	position: relative;
}


	@media screen and (min-width: 768px) {
		.nayami .bg-black {
			width: calc((100% - 40px) / 3);
			height: 400px;
			/* height: 55vw; */
			flex-direction: column; 
			padding: 1.5rem;
			margin-top: 2rem;
		}
	}

	@media screen and (min-width: 900px){
		.nayami .bg-black{
			height: 450px;
		}
	}

	/* @media screen and (min-width: 1500px) {
		.nayami .bg-black {
			width: calc((100% - 40px) / 3);
			height: 450px;
			flex-direction: column; 
			padding: 1.5rem;
			margin-top: 2rem;
		}
	} */

.bg-black figure img{
	filter: saturate(0%);
	width: 100%;
}

.bg-black .icon{
	position: relative;
	top: -6rem;
}

.nayami .bg-black .kazari{
	margin: 0;
	/* font-size: clamp(1.5rem, 0.859rem + 3.42vw, 2.5rem); */
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 3rem;
	position: relative;
	top: -4rem;
}

	/* @media screen and (min-widht: 1500px){
		.nayami .bg-black .kazari{
			font-size: 2rem;
	} */

.nayami .bg-black span{
	color:red;
}

.nayami .bg-black p{
	font-size: 1.3rem;
	/* font-size: clamp(1rem, 0.359rem + 3.42vw, 2rem); */
	font-weight: 400;
	line-height: 2.5rem;
	position: relative;
	top: -4rem;
	flex-grow:1;
}

	@media screen and (min-width:500px){
		.nayami .bg-black{
			max-height: 570px;
		}
		.nayami .bg-black .kazari{
			font-size: 2rem;
		}
		.nayami .bg-black p{
			font-size: 1.8rem;
		}
	}

	@media screen and (min-width: 768px){
		.bg-black .icon{
			top: -4rem;
		}
		.nayami .bg-black .kazari{
			font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem);
			line-height: 2rem;
		}
		.nayami .bg-black p{
			/* font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem); */
			font-size: 1rem;
			line-height: 2rem;
		}
	}

	@media screen and (min-width: 1000px){
		.nayami .bg-black .kazari{
			/* font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem); */
			font-size: 1.5rem;
			line-height: 2.5rem;
		}
	}

.nayami .bg-black .num{
	margin: 0;
	font-style: oblique;
	/* font-size:8rem;  */
	font-size: clamp(3rem, -0.205rem + 17.09vw, 8rem);
	color: white;
	position: absolute;
	top: -1%;
	left: -6%;
}

	@media screen and (min-width: 768px){
		.nayami .bg-black .num{
			font-size: 4rem;
			top: -1%;
			left: -8%;
		}
	}

	@media screen and (min-width: 1200px){
		.nayami .bg-black .num{
			font-size: clamp(5rem, 2.231rem + 3.69vw, 8rem);
			top: 2%;
		}
	}

.nayami .bg-black .comma{
	font-family: 'Ubuntu Mono', monospace;
	color: #414141;
	font-size: clamp(6rem, 5.035rem + 6.18vw, 8rem);
	position: absolute;
	top: 11%;
	left: 10%;
}

	@media screen and (min-width: 450px){
		.nayami .bg-black .comma{
			font-size: 8rem;
			top: 15%;
		}
	}

	@media screen and (min-width: 768px){
		.nayami .bg-black .comma{
			font-size: clamp(5rem, 1.444rem + 7.41vw, 7rem);
			top: 1%;
		}
	}

	@media screen and (min-width: 900px){
		.nayami .bg-black .comma{
			font-size: clamp(7rem, 4.545rem + 4.36vw, 10rem);
			top: 5%;
		}
	}

	@media screen and (min-width: 1000px){
		.nayami .bg-black .comma{
			font-size: 6rem;
			top: 20%;
	}
}


/*



/* ここから解決策 */
.kaiketu {
    display: flex; 
    justify-content: space-between;
    gap: 5rem;
	flex-direction: column;
	align-items: center;
    margin: 0;
    padding: 0;
}

	@media screen and (min-width: 768px){
		.kaiketu{
			flex-direction: row;
			align-items: flex-start;
			gap: 0;
		}
	}

.kaiketu .bg-blue {
    background-color: var(--white);
    color: black;
	width: 80%;
	height: 100vw;
	padding: 2rem;
	margin: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

	@media screen and (min-width: 500px){
		.kaiketu .bg-blue{
			height: 400px;
		}
	}

	@media screen and (min-width: 768px){
		.kaiketu .bg-blue {
			width: 100%;
			height: 360px;
			padding: 1.5rem;
			margin: 0.5rem;
			margin-top: 2rem;
		}
	}

	@media screen and (min-width: 1300px) {
	.kaiketu .bg-blue{
		min-height: 400px;
		height: 25vw;
		max-height: 480px;
	}
}

.bg-blue figure img{
	width: 100%;
}

.bg-blue .icon{
	position: relative;
	top: -5rem;
}

	@media screen and (min-width: 768px){
		.kaiketu .bg-blue .icon{
			width: 70%;
			top: -4rem;
		}
	}

.kaiketu .bg-blue .marker{
	margin: 0;
	padding: 0;
	position: relative;
	top: -8rem;
	font-size: clamp(1.5rem, 0.859rem + 3.42vw, 2.5rem);
	font-weight: 800;
	line-height: 2rem;
	background: linear-gradient(transparent 70%, #FFD981 70%);
}

.kaiketu .bg-blue p{
	font-size: 1.5rem;
	/* font-size: clamp(1rem, 0.359rem + 3.42vw, 2rem); */
	position: relative;
	line-height: 3rem;
	top: -8rem;
}

	@media screen and (min-width: 768px){
		.kaiketu .bg-blue .marker{
			font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem);
			top: -6.5rem;
			line-height: 3rem;
		}
		.kaiketu .bg-blue p{
			/* font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem); */
			font-size: 1rem;
			margin-top: 2rem;
			line-height: 2rem;
		}
	}

	@media screen and (min-width: 1100px){
		.kaiketu .bg-blue .marker{
			/* font-size: clamp(1.5rem, -0.071rem + 2.29vw, 2.5rem); */
			font-size: 2rem;
		}
	}


.kaiketu .bg-blue .num{
	font-style: italic;
	color: #4BB2B9;
	font-size: clamp(3rem, -0.205rem + 17.09vw, 8rem);
	text-align: left;
	position: absolute;
	top: -15%;
	left: -7%;
}

	@media screen and (min-width: 768px){
		.kaiketu .bg-blue .num{
			font-size: clamp(2rem, -1.556rem + 7.41vw, 4rem);
			top: -8%;
		}
	}

	@media screen and (min-width: 1200px){
		.kaiketu .bg-blue .num{
			font-size: clamp(4rem, 0.308rem + 4.92vw, 8rem);
			top: -14%;
		}
	}




/* ご利用の流れ */
/* ------------------------------------------------- */
.flow{
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
}

	@media screen and (min-width: 768px){
		.flow{
			display: flex;
			flex-direction: row;
			padding:0;
			margin-top: 5rem;
		}
	}

.flow .title{
	width: 100%;
	height: 8rem;
	background-color: #0053c0;
	color: white;
	padding: 1rem;
}

.bg5 .title .c{
	font-size: 1.7rem;
	line-height: 2.5rem;
	margin: 0;
}

.bg5 .title h3 span{
	font-size: 1rem;
}

	@media screen and (min-width:768px){
		.flow .title{
			border-radius:0 50px 50px 0;
			width: 40%;
		}
		.bg5 .title .c{
			font-size: 2rem;
			margin-bottom: 2rem;
		}
	}


.title figure{
	text-align: center;
}

.flow img{
	padding-top: 1rem;
	width: 38%;
	min-width: 200px;
	height: auto;
	margin: 1rem;
	position: relative;
}

	@media screen and (min-width:768px){
		.flow img{
			padding:0;
			margin: 0;
			width: 100%;
			min-width: 250px;
			margin-top: 5rem;
		}
	}

	@media screen and (min-width:1200px){
		.flow img{
			margin-top: 3rem;
			max-width: 350px;
		}
	}



.flow .text{
	text-align: center;
	margin: 3rem;
	font-size: clamp(1.3rem, 0.25rem + 1.4vw, 2rem);
	line-height: 2rem;
	margin-top: 15rem;
}

.text ul{
	list-style: none;
	display: flex;
	flex-direction: column;
	padding: 0;
	text-align: left;
}

	@media screen and (min-width:768px){
		.flow .text{
			margin-left: 2rem;
		}
	}

.text .step-num{
	font-size: clamp(2rem, 0.5rem + 2vw, 3rem);
	font-weight: 800;
	color: #A2A5A6;
}

	@media screen and (min-width:768px){
		.text .step-num{
			/* font-size: 3rem; */
			font-size: clamp(3rem, 2.256rem + 1.55vw, 4rem);
			margin-left: 1rem;
			margin-bottom: 0.5rem;
		}
	}

	@media screen and (min-width:1200px){
		.text .step-num{
			margin-bottom: 1rem;
		}
	}

li{
	width: 100%;
	background-color: white;
	border: 0.3rem solid var(--blue);
	padding: 1rem;
}

	@media screen and (min-width:768px){
		.text{
			margin: 0;
			padding: 0;
		}
		.text ul{
			margin-top: -15rem;
		}
	}

.bold{
	font-weight: 800;
}

.triangle {
	height: 0;
	width: 0;
	position: relative;
	align-self: center;
}

.triangle-bottom {
	margin-top: 0.5rem;
	border-top: 30px solid var(--blue);
	border-right: 30px solid transparent;
	border-left: 30px solid transparent;
}



/* ここから導入事例 */
/* ------------------------------------------- */
.bg3 p{
	text-align: left;
	font-size: 1.2rem;
}

	@media screen and (min-width: 768px){
		.bg3 p{
			font-size: 1.5rem
		}
	}

	@media screen and (min-width: 1232px){
		.bg3 p.description{
			text-align: center;
		}	
	}


.jirei{
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.list-jirei{
	margin: 3rem 0.1rem;
	padding: 4rem;
	background-color: white;
	background-image: url(../images/dot.png);
	background-repeat: no-repeat;
	background-size: 30%;
	height: auto;
	background-position: 90% 90%;
	box-shadow: 0px 0px 40px 0px #A2A5A6;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.list-jirei img{
	margin: 0;
	padding: 0;
	width: 40%;
}

.list-jirei .all{
	text-align: center;
}


.list-jirei h4{
	font-size: 1.5rem;
	margin-top: 1.5rem;
	line-height: 2.5rem;
}

.btn1 a {
	display: block;
	width: 80%;
	margin: auto;
	text-decoration: none;
	background: var(--blue);
	color: var(--white);
	font-weight: 800;
	font-size: 15px;
	border-radius: 100px;	
	padding: 0.5rem 0.5rem;
	text-align: center;	
}

	@media screen and (min-width: 768px){
		.list-jirei{
			background-size: 20%;
			background-position: 95% 80%;
			box-shadow: 0px 0px 40px 0px #A2A5A6;
			flex-direction: row;
			justify-content: space-between;
			padding: 2rem;
			align-items: center;
		}
		.list-jirei > div{
			width: 50%;
		}
		.list-jirei img{
			text-align: left;
			width: 80%;
			position: relative;
			left: -2rem;
		}
		.list-jirei .text{
			text-align: left;
			width: 100%;
		}
		.list-jirei h4 .nope{
			display:none;
		}
		.list-jirei h4{
			font-size: 1.5rem;
			margin: 0;
		}
		.list-jirei p{
			font-size: 1rem;
		}
		.btn1 a{
			width: 40%;
			font-size: 1.5rem;
			margin: 0;
			margin-top: 2rem;;
			margin-left: auto;
		}
	}

	@media screen and (min-width: 1200px){
		.list-jirei .text{
			align-self: flex-start;
		}
		.list-jirei h4{
			padding-top: 1rem;
			font-size: 2.5rem;
		}
		.list-jirei p{
			padding-right: 1.5rem;
			font-size: 1.5rem;
		}
	}



/* ここからお問い合わせ */
.request{
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../images/contact.png) no-repeat center center / cover;
	height: 80vw;
	color: var(--black);
	font-size: 200%;
	font-weight: 800;
	border-radius: 60px;
}

.request .text{
	color: black;
}

.comment{
	margin:0;
	font-size: 1.2rem;
	text-align: center;
	line-height: 2rem;
	padding-bottom: 4rem;
}
.comment .main{
	font-size: 2rem;
}

.btn2 a {
	display: block;
	text-decoration: none;
	background: var(--blue);
	color: var(--white);
	font-weight: 800;
	font-size: 1.5rem;
	margin-bottom: 30px;	
	padding: 10px 50px;
	border-radius: 100px;	
	text-align: center;		
}

	@media screen and (min-width: 450px){
		.comment{
			padding-bottom: 10rem;
		}
	}

	@media screen and (min-width: 768px){
		.request{
			height: 500px;
			width: 80%;
			font-size: 400%;
		}
		.comment{
			font-size: 1.5rem;
			padding-bottom: 8rem;
			line-height: 3rem;
		}
		.comment .main{
			font-size: 2.5rem;
		}
		.btn2 a{
			padding: 10px 70px;
			font-size: 2rem;
			align-items: left;
		}
	}

	@media screen and (min-width: 1200px){
		.request{
			width: 60%;
			height: 600px;
		}
	}


/* 著作 */
.pr a {
	text-decoration: none;
	display: block;
	background: rgba(0,0,0,0.9);
	text-align: right;
	padding: 0.5rem 1rem;
	color: #ccc;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}