@charset "utf-8";

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
reset style
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}

/* change colours to suit your needs */
ins{background-color:#ff9; color:#000; text-decoration:none;}
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del{text-decoration: line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help;}
table{border-collapse:collapse; border-spacing:0;}

/* change border colour to suit your needs */
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select{vertical-align:middle;}



/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
default style
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
*{
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	text-decoration: none;
	text-shadow: none;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

	/* outline: 1px solid #ff0099 !important; */
}
html{
height: 100%;
font-size: 10px;
}
html, body{min-height: 100%;}
body{
/*min-width: 1040px;*/
font-family: 'Noto Sans JP', sans-serif;
word-wrap: break-word;
font-weight: 400; /* Regular */
opacity: 0;
color: #000;
counter-reset: list-counter;
line-height:1.625;
	a {
		color: #000;
	}
}


/* element
----- ----- ----- ----- ----- */
a, a:active, a:hover{cursor: pointer;}
a{transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s;}
a.on{opacity: 0.7;}
ul,ol{margin: 0; padding: 0; list-style: none;}
img{max-width: 100%;}


/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
fadeIn style
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.fadeInDown,
.fadeInUp,
.fadeInLeft,
.fadeInRight{
opacity: 0;
transition: all 0.5s ease-out 0.3s;
}

.fadeInDown.in,
.fadeInUp.in,
.fadeInLeft.in,
.fadeInRight.in{
opacity: 1;
}

.fadeInDown{transform: translateY(-50px);}
.fadeInDown.in{transform: translateY(0);}
.fadeInUp{transform: translateY(50px);}
.fadeInUp.in{transform: translateY(0);}
.fadeInLeft{transform: translateX(50px);}
.fadeInLeft.in{transform: translateX(0);}
.fadeInRight{transform: translateX(-50px);}
.fadeInRight.in{transform: translateX(0);}

li:nth-child(2){transition-delay: 0.5s;}
li:nth-child(3){transition-delay: 0.7s;}
li:nth-child(4){transition-delay: 0.9s;}
li:nth-child(5){transition-delay: 1.1s;}
li:nth-child(6){transition-delay: 1.3s;}
li:nth-child(7){transition-delay: 1.5s;}
li:nth-child(8){transition-delay: 1.7s;}
li:nth-child(9){transition-delay: 1.9s;}
li:nth-child(10){transition-delay: 2.1s;}

.no-deley{ transition-delay: 0s; }

@media screen and (max-width:768px){ /* SP */
	.fadeInDown,
	.fadeInUp{
		transition-delay: 0;
	}
}/* @media */



/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
utility class
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
@media screen and (max-width:820px) { /* iPad Air Portrait */
	._PC{display: none;}
}/* @media */

.sec_arrow-bottom{
	margin-bottom: 40px;
	position: relative;
	&:after{
		content: "";
		margin-left: -40px;
		border: 40px solid transparent;
		border-top: 40px solid #000;
		position: absolute;
		top: 100%;
		left: 50%;
	}
}

.bgGray{
	background: #f2f5f6;
}

._line{
	text-decoration: underline; /* 下線 */
	text-decoration-thickness: 0.5em; /* 線の太さ */
	text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
	text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
	&._yellow{
		text-decoration-color: rgba(247, 229, 25, .5); /* 線の色 */
	}
}

.btn_mv{
	a{
		display: block;
		width: 400px;
		padding: .5em 0;
		background: #f7e519;
		border: 1px solid #f7e519;
		border-radius: 32px;
		text-align: center;
		font-size: 2.4rem;
		font-weight: 700; /*700 Bold*/
		color: #000;
		position: relative;
		&:after{
			content: "\f054";
			font-family: "Font Awesome 6 Free";
			font-weight: 800;
			font-size: .8em;
			position: absolute;
			right: 24px;
			top: 50%;
			transform: translateY(-50%);
			color: #000;
		}
	}
	@media screen and (max-width:1024px) { /* iPad landscape */
		a{
			align-items: center;
			justify-content: center;
			font-size: 1.8rem;
			padding: .8em 0;
			margin: 0 auto;
		}
	}
	@media screen and (max-width:640px) { /* SP */
		a{
			width: 320px;
			font-size: 1.8rem;
		}
	}
}

.btn{
	display: flex;
	justify-content: center;
	a{
		padding: 1em 2em;
		background: #f7e519;
		border: 1px solid #f7e519;
		border-radius: 64px;
		text-align: center;
		font-size: 2.4rem;
		font-weight: 500; /*500 Medium*/
		color: #000;
		position: relative;
		&:after{
			content: "\f054";
			font-family: "Font Awesome 6 Free";
			display: block;
			font-weight: 800;
			font-size: .8em;
			position: absolute;
			right: 24px;
			top: 50%;
			transform: translateY(-50%);
			color: #000;
		}
	}
	@media screen and (max-width:640px){ /* SP */
		a{
			font-size: 1.6rem;
			padding: .8em 1.8em;
			&:after{
				font-size: .6em;
				right: 12px;
			}
		}
	}/* @media */
}


/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
basic style
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
#header{
	width: 100%;
	height: 90px;
	padding: 0 3.5%;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 99;
	transition: transform 0.3s 0.3s;
	&.hidden {
	    transform: translateY(-90px);	
	}
	h1{
		width: 134px;
		img{
			max-width: 100%;
		}
	}
	@media screen and (max-width:820px) { /* iPad Air Portrait */
		height: 64px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		&.hidden {
			transform: translateY(-64px);	
		}
		h1{
			width: 80px;
		}
	}/* @media */
}

#gNav{
	ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
		li{
			padding: 0 1em;
			a{
				font-size: 1.6rem;
				font-weight: 500; /*500 Medium*/
				color: #000;
				@media screen and (max-width:1024px) { /* iPad landscape */
					font-size: 1.35rem;
				}/* @media */
			}
			&.btn_header a{
				display: flex;
				align-items: center;
				border: 1px solid #f7e519;
				padding: 0.6em 1.8em;
				border-radius: 2em;
				line-height: 1;
			}
			&.btn_header{
				padding: 0 0 0 0.5em;
				a{
					background: #f7e519;
					color: #000;
				}
			}
			@media screen and (max-width:820px) { /* iPad Air Portrait */
				display: none;
				&.btn_header{
					display: block;
				}
				&.btn_header a{
					padding: 0.8em 1.2em;
				}
			}/* @media */
		}
	}
}

main{
	font-size: 1.6rem;
	@media screen and (max-width:820px) { /* iPad Air Portrait */
		padding-top: 64px;
	}
}

#mainv{
	display: flex;
	justify-content: center;
	width: 100%;
	height: 730px;
	background: #F2F5F6;
	padding-top: 90px;
	&.sec_arrow-bottom{
		&:after{
			border-top: 40px solid #F2F5F6;
		}
	}
	.inner{
		display: flex;
		align-items: center;
		width: 1074px;
		height: 640px;
		background: url(../img/mainv_laptop_bg.png) right 180px no-repeat;
		position: relative;
		.copy{
			h1{
				margin-bottom: 2.7rem;
				font-size: 3.6rem;
				font-weight: 900; /*900 Black*/
				line-height: 1.428;
				color: #14a7cc;
			}
			h2{
				margin-bottom: 5.0rem;
				font-size: 2.0rem;
				font-weight: 700; /*700 Bold*/
				line-height: 1.7;
				color: #808080;
			}
			.tags{
				display: flex;
				flex-wrap: wrap;
				width: 445px;
				margin-bottom: 1.4rem;
				li{
					min-width: 115px;
					padding: .2em 1em;
					margin-right: 9px;
					margin-bottom: 9px;
					background: #fff;
					border: 1px solid #14a7cc;
					border-radius: 6px;
					text-align: center;
					font-size: 1.44rem;
					font-weight: 500; /*500 Medium*/
					color: #14a7cc;
					&:nth-child(3n){
						margin-right: 0;
					}
					&:last-child{
						border: none;
						background: none;
						text-align: left;
					}
				}
			}
			.btn{
				a{
					display: block;
					width: 284px;
					padding: .3em 0;
					background: #333;
					border: 1px solid #333;
					border-radius: 6px;
					text-align: center;
					font-size: 1.98rem;
					font-weight: 700; /*700 Bold*/
					color: #fff;
				}
			}
		}
		.mv{
			position: absolute;
			right: 6.33147113594041%;
			top: 31.5625%;
			video{
				width: 461px;
				height: 281px;
				pointer-events: none;
				@media screen and (max-width:1024px){ /* iPad landscape */
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-moz-touch-callout: none;
					-moz-user-select: none;
					user-select: none;
				}/* @media */
			}
		}
	}
	@media screen and (max-width:1024px) { /* iPad landscape */
		height: auto;
		.inner{
			display: block;
			width: 90%;
			height: auto;
			padding: 0 0 64px;
			background-position: center 288px;
			.copy{
				h1{
					padding-top: 1em;
					margin-bottom: 2.7rem;
					text-align: center;
					font-size: 2.75rem;
				}
				h2{
					margin-bottom: 420px;
					text-align: center;
					font-size: 1.7rem;
				}
				.tags{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					width: 100%;
					li{
						min-width: 49%;
						font-size: 1.6rem;
						padding: .2em 0;
						margin: 0 0 6px;
					}
				}
				.btn{
					a{
						width: 100%;
						font-size: 2.0rem;
					}
				}
			}
			.mv{
				position: static;
				video{
					display: block;
					max-width: 77.21943048576214%;
					height: auto;
					aspect-ratio: 461 / 281;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: 298px;
				}
			}
		}
	}/* @media */
	@media screen and (max-width:640px){ /* SP */
		padding-top: 64px;
		.inner{
			padding: 0 0 16.4%;
			background-size: contain;
			.copy{
				h2{
					margin-bottom: 76%;
				}
			}
		}
	}/* @media */
}

#footer{
	.actionInfo{
		padding: 8.8rem 0;
		background: #C8D2D4;
		text-align: center;
		letter-spacing: .3rem;
		text-indent: .3rem;
		@media screen and (max-width:820px) { /* iPad Air Portrait */
			padding: 64px 0;
		}
		h2{
			margin-bottom: 3.2rem;
			font-size: 2.8rem;
			font-weight: 700; /*700 Bold*/
			@media screen and (max-width:820px) { /* iPad Air Portrait */
				font-size: 1.8rem;
			}
		}
		.btn{
			a{
				font-size: 2.8rem;
				font-weight: 700; /*700 Bold*/
				&:after{
					content: "\f054";
					font-family: "Font Awesome 6 Free";
					font-weight: 800;
					font-size: .8em;
					position: absolute;
					right: 24px;
					top: 50%;
					transform: translateY(-50%);
					color: #000;
					@media screen and (max-width:820px) { /* iPad Air Portrait */
						right: 12px;
					}
				}
				@media screen and (max-width:820px) { /* iPad Air Portrait */
					font-size: 1.6rem;
				}
			}
		}
	}
	.companyInfo{
		padding: 24px 0;
		background: #4d4d4d;
		text-align: center;
		font-size: 1.2rem;
		color: #fff;
		.logoCompany{
			margin-bottom: 1.6rem;
		}
		.accessTxt{
			a.tel{color: #fff;}
			a.tel, a.tel:active, a.tel:hover{cursor: default;}
			a.tel.on{opacity: 1;}
			@media screen and (max-width:768px){ /* SP */
				padding: 0 1em;
			}
		}
	}
	.copyright{
		height: 4.0rem;
		text-align: center;
		font-size: 1.2rem;
		position: relative;
		@media screen and (max-width:768px){ /* SP */
			height: auto;
			padding: 1em 0;
		}
		small{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			@media screen and (max-width:768px){ /* SP */
				display: block;
				height: auto;
				margin-bottom: .4em;
			}
			a{
				color: #000;
			}
			a, a:active, a:hover{cursor: default;}
			a.on{opacity: 1;}
		}
		.personalinfo{
			display: flex;
			align-items: center;
			justify-content: left;
			height: 100%;
			position: absolute;
			right: 2em;
			top: 0;
			@media screen and (max-width:768px){ /* SP */
				display: block;
				height: auto;
				position: static;
			}
		}
	}
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
section basic style
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.sec{
	display: flex;
	justify-content: center;
	padding: 84px 0 100px;
	@media screen and (max-width:768px){ /* SP */
		padding: 64px 0;
	}/* @media */
	.inner{
		width: 1024px;
		@media screen and (max-width:1024px) { /* iPad landscape */
			width: 94%;
		}
		@media screen and (max-width:768px){ /* SP */
			width: 94%;
		}/* @media */
	
	}
	h1{
		font-size: 4.0rem;
		color: #14a7cc;
		font-weight: 700 !important; /*700 Bold*/
		text-align: center;
		@media screen and (max-width:768px){ /* SP */
			font-size: 2.7rem;
		}/* @media */
	}
	h2{
		font-size: 2.0rem;
		color: #14a7cc;
		font-weight: 700 !important; /*700 Bold*/
		text-align: center;
		@media screen and (max-width:768px){ /* SP */
			font-size: 2.2rem;
		}/* @media */
	}
}
.sec_bd{
	background-size: 10px 1px;
	background-image: linear-gradient(to right,#bdccd4 5px, transparent 5px);
	background-position: left bottom;
	background-repeat: repeat-x;
}


/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
section style
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.sec#about{
	padding: 64px 0 0px;
	.inner{
		padding-bottom: 84px;
		h2{
			font-size: 2.4rem;
			color: #4d4d4d;
			margin-bottom: 76px;
		}
		h1{
			margin-bottom: 50px;
		}
		p{
			width: 82rem;
			margin: 0 auto;
			font-size: 2rem;
			font-weight: 500; /*500 Medium*/
			line-height: 1.888;
			@media screen and (max-width:820px) { /* iPad Air Portrait */
				width: 100%;
			}
		}
		.serviceVideo {
			p {
				color: #14a7cc;
				font-weight: bold;
				font-size: 2.4rem;
				@media screen and (max-width:640px) { /* SP */
					font-size: 2.2rem;
				}
			}
			lite-youtube {
				margin: 0 auto;
			}
		}
	}
	@media screen and (max-width:768px){ /* SP */
		.inner{
			padding-bottom: 64px;
			h2{
				font-size: 2.0rem;
				margin-bottom: 38px;
			}
		}
	}/* @media */
}

.sec#featuresAbout{
	padding: 64px 0 0px;
	.inner{
		padding-bottom: 84px;
		h1{
			margin-bottom: 50px;
		}
		img{
			margin-bottom: 40px;
		}
		p{
			width: 82rem;
			margin: 0 auto;
			font-size: 1.8rem;
			font-weight: 500; /*500 Medium*/
			line-height: 1.888;
			@media screen and (max-width:820px) { /* iPad Air Portrait */
				width: 100%;
			}
		}
	}
	@media screen and (max-width:768px){ /* SP */
		.inner{
			padding-bottom: 64px;
		}
	}/* @media */
}

.sec#features{
	&.sec_arrow-bottom{
		&:after{
			border-top: 40px solid #fff;
			z-index: 1;
		}
	}
	.inner{
		h1{
			margin-bottom: 10.0rem;
			font-size: 6rem;
			letter-spacing: 1rem;
			text-indent: 1rem;
		}
		.featuresList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 6.8rem;
			position: relative;
			li{
				width: 30.8%;
				padding: 34px 30px;
				margin-bottom: 3.4rem;
				background: #EEF2F4;
				dl{
					dt{
						img{
							max-width: 100%;
						}
						span{
							display: flex;
							align-items: center;
							justify-content: center;
							min-height: 11.6rem;
							text-align: center;
							line-height: 1.25;
							font-size: 2.4rem;
							font-weight: 700; /*700 Bold*/
							color: #6e96b4;
						}
					}
				}
				&:nth-child(4){
					margin-left: 34.6%;
				}
			}
			&::after{
				content: "";
				width: 30.8%;
				height: auto;
				aspect-ratio: 160 / 157;
				background: url(../img/features_bg.svg) center center no-repeat;
				background-size: cover;
				position: absolute;
				left: 0; bottom: 13%;
			}
		}
	}
	@media screen and (max-width:768px){ /* SP */
		/* .sec{
			padding-bottom: 0;
		} */
		.inner{
			padding-bottom: 0;
			h1{
				margin-bottom: 50px;
				font-size: 5rem;
			}
			.featuresList{
				padding-bottom: 0px;
				margin-bottom: 64px;
				li{
					width: 49%;
					padding: 12px 12px 18px;
					margin-bottom: 12px;
					dl{
						dt{
							span{
								min-height: 3.5em;
							}
						}
					}
					&:nth-child(4){
						margin-left: 0%;
					}
				}
				&::after{
					content: "";
					width: 96%;
					height: auto;
					aspect-ratio: 160 / 157;
					background: url(../img/features_bg.svg) right bottom no-repeat;
					background-size: 49%;
					position: absolute;
					left: auto;
					right: 0;
					bottom: 0%;
				}
			}
		}
	}/* @media */
	@media screen and (max-width:640px){ /* SP */
		.inner{
			.featuresList{
				padding-bottom: 300px;
				li{
					width: 100%;
				}
				&::after{
					width: 80%;
					background: url(../img/features_bg.svg) center center no-repeat;
					background-size: cover;
					left: 50%;
					right: auto;
					transform: translateX(-50%);
					bottom: 0%;
				}
			}
		}
	}/* @media */
}

.featuresTable{
	padding-top: 0;
	.inner{
		padding-bottom: 100px;
		h1{
			margin-bottom: 10rem;
			@media screen and (max-width:768px){ /* SP */
				margin-bottom: 50px;
			}/* @media */
		}
		.tbl, td, th {
			border: 0.5px solid #acacac;
			border-collapse: collapse;
			vertical-align: middle;
			.featureName{
				width: 300px;
			}
			.featureContent{
				width: 724px;
			}
		}
		.tbl {
			margin-bottom: 80px;
		}
		td, th {
			padding: 8px;
			width: 30px;
			height: 25px;
		}
		ul {
		    padding-left: 22px ;
		    li {
			  list-style: circle;
		    }
		}
		th {
			background: #14a7cc;
			color: #fff;
		}
		@media screen and (max-width: 640px) { /* SP */
			.tbl {
			  width: 100%;
			  .thead {
				display: none;
			  }
			  .featureName, .featureContent{
			    width: 100%;
				height: auto;
			  }
			  tr {
				width: 100%;
			  }
			  td{
				display: block;
				width: 100%;
				text-align: left;
				word-wrap: break-word;
				word-break: break-all;
				white-space: normal;
				&:first-child {
				  background: #14a7cc;
				  color: #fff;
				  font-weight: bold;
				  text-align: center;
				}
			  }
			}
		}/* @media */
	}
}

.sec#case{
	padding: 136px 0 100px;
	margin-top: -40px;
	&.sec_arrow-bottom{
		&:after{
			border-top: 40px solid #f2f5f6;
		}
	}
	.inner{
		h1{
			margin-bottom: 8.4rem;
		}
		.caseList{
			margin-bottom: 10.0rem;
			li{
				margin-bottom: 6.0rem;
				list-style: none;
				&:last-child{
					margin-bottom: 0;
				}
				dl{
					dt{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: nowrap;
						background: #14a7cc;
						border-top-left-radius: 28px;
						border-top-right-radius: 28px;
						font-weight: 700; /*700 Bold*/
						.caseNo{
							display: flex;
							align-items: center;
							justify-content: center;
							flex-wrap: wrap;
							width: 65px;
							height: 65px;
							margin: 12.5px 37.5px;
							background: #fff;
							border-radius: 65px;
							font-size: 1.3rem;
							line-height: 1;
							color: #14a7cc;
							span{
								display: block;
								margin-top: -1.5rem;
								font-size: 3.8rem;
							}
						}
						.title{
							font-size: 2.3rem;
							line-height: 1.3;
							color: #fff;
						}
					}
					dd{
						background: #fff;
						.flexBox{
							display: flex;
							align-items: start;
							justify-content: space-around;
							.box{
								width: 400px;
								padding: 40px 0;
								p{
									margin-bottom: 1em;
									&:last-child{
										margin-bottom: 0;
									}
									&.bd{
										padding: 20px;
										border: 1px solid #666;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	@media screen and (max-width:820px) { /* iPad Air Portrait */
		padding: 104px 0 64px;
		.inner{
			h2{
				font-size: 1.8rem;
			}
			h1{
				font-size: 2.4rem;
				margin-bottom: 50px;
			}
			.caseList{
				padding-top: 25px;
				margin-bottom: 64px;
				li{
					margin-bottom: 49px;
					dl{
						dt{
							display: block;
							padding: 33px 12px 12px;
							font-size: 1.8rem;
							position: relative;
							.caseNo{
								width: 50px;
								height: 50px;;
								margin: 0;
								border: 2px solid #14a7cc;
								position: absolute;
								left: 28px;
								top: -25px;
								span{
									font-size: 2.4rem;
								}
							}
						}
						dd{
							padding: 12px;
							.flexBox{
								flex-wrap: wrap;
								.box{
									width: 100%;
									padding: 0px 0;
									p{
										&:last-child{
											margin-bottom: 1em;
										}
									}
									&:last-child p:last-child{
										margin-bottom: 0em;
									}
								}
							}
						}
					}
				}
			}
		}
	}/* @media */
}
.sec#examples{
	flex-wrap: wrap;
	padding: 80px 0 100px;
	margin-top: -40px;
	@media screen and (max-width:768px){ /* SP */
		padding: 104px 0 64px;
	}/* @media */
	.inner{
		h2{
			width: 82rem;
			margin: 0 auto;
			padding-bottom: 40px;
			@media screen and (max-width:768px){ /* SP */
				width: 100%;
				font-size: 1.8rem;
			}/* @media */
		}
		h1{
			margin-bottom: 10rem;
			letter-spacing: 1em;
			text-indent: 1em;
			@media screen and (max-width:768px){ /* SP */
				margin-bottom: 50px;
			}/* @media */
		}
	} 

	.examplesList{
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-wrap: nowrap;
		width: 100%;
		.slick-arrow{
			width: 77px;
			height: 77px;
			background: rgba(255, 255, 255, 0.1);
			border: 2px solid #bdccd4;
			border-radius: 77px;
			z-index: 1;
			&:before{
				content: "";
				display: block;
				width: 20px;
				height: 20px;
				border-top: 2px solid #bdccd4;
				border-right: 2px solid #bdccd4;
			}
			&.slick-prev{
				left: 50%;
				transform: translateX(-315px);
				&:before{
					-webkit-transform: rotate(-135deg);
					transform: rotate(-135deg);
					margin-left: 28px;
				}
			}
			&.slick-next{
				right: 50%;
				transform: translateX(315px);
				&:before{
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					margin-left: 20px;
				}
			}
		}
		.slick-list.draggable{
			padding: 0 calc(50% - 290px);
			@media screen and (max-width:640px){ /* SP */
				padding: 0 20px;
			}/* @media */
		}
		li{
			min-width: 500px !important;
			margin: 0 40px;
			background: #f8fafb;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			@media screen and (max-width:640px){ /* SP */
				min-width: 280px !important;
				margin: 0 8px;
			}/* @media */
			dl{
				dt{
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					padding: 18px 16px;
					background: #14a7cc;
					border-top-left-radius: 10px;
					border-top-right-radius: 10px;
					color: #fff;
					.ico{
						width: 55px;
					}
					.tit{
						display: flex;
						width: 412px;
						padding-left: 12px;
						justify-content: flex-start;
						flex-wrap: wrap;
						@media screen and (max-width:640px){ /* SP */
							width: auto;
							flex: 1;
						}/* @media */
						.tag{
							padding:  3px 14px;
							border: 1px solid #fff;
							border-radius: 18px;
							font-size: 1.4rem;
						}
						.main{
							display: block;
							min-height: 2.2em;
							margin: 8px 0 20px 0;
							line-height: 1.272;
							font-size: 2.2rem;
							@media screen and (max-width:640px){ /* SP */
								font-size: 1.8rem;
								min-height: 3.8em;
								/* margin-bottom: 32px; */
							}
						}
					}
					.txt{
						width: 100%;
						min-height: 60px;
						padding: 30px 20px 0px;
						background-size: 10px 1px;
						background-image: linear-gradient(to right,#fff 5px, transparent 5px);
						background-position: left top;
						background-repeat: repeat-x;
						@media screen and (max-width:640px){ /* SP */
							padding: 20px 0 0;
						}
					}
				}
				dd{
					padding: 32px 40px 40px;
					@media screen and (max-width:640px){ /* SP */
						padding: 16px;
					}
					.bf, .af{
						display: flex;
						justify-content: flex-start;
					}
					h3{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 60px;
						height: 60px;
						border: 1px solid #14a7cc;
						border-radius: 60px;
						font-size: 1.5rem;
					}
					p{
						flex: 1;
						padding-left: 20px;
					}
					.bf{
						padding-bottom: 48px;
						margin-bottom: 20px;
						position: relative;
						&:after{
							content: "";
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							border-top: 24px solid #bdccd4; /* 好みで高さ色を変えてください */
							border-left: 50px solid transparent;
							border-right: 50px solid transparent;
						}
						h3{
							background: #fff;
							color: #14a7cc;
						}
						p{
							height: 156px;
							@media screen and (max-width:640px){ /* SP */
								height: 240px;
							}/* @media */
						}
					}
					.af{
						h3{
							background: #14a7cc;
							color: #fff;
						}
						p{
							font-weight: 500; /*500 Medium*/
							color: #14a7cc;
							height: 208px;
							@media screen and (max-width:640px){ /* SP */
								height: 320px;
							}/* @media */
						}
					}
				}
			}
		}
	}
}
.sec#flow{
	padding-top: 0;
	&.sec_arrow-bottom{
		&:after{
			border-top: 40px solid #fff;
		}
	}
	.sec_bd{
		background-position: left top;
	}
	.inner{
		padding-top: 100px;
		h1{
			margin-bottom: 42px;
			letter-spacing: .75em;
			text-indent: .75em;
		}
		h2{
			margin-bottom: 16px;
			font-size: 2.6rem;
			letter-spacing: .25em;
			text-indent: .25em;
			color: #333;
		}
		> p{
			margin-bottom: 44px;
			text-align: center;
			font-size: 2.0rem;
			font-weight: 500; /*500 Medium*/
		}
		.flowList{
			display: flex;
			justify-content: space-between;
			margin-bottom: 144px;
			li{
				width: 189px;
				position: relative;
				&:after{
					content: "";
					display: block;
					width: 42px;
					height: 40px;
					background: #bdccd4;
					clip-path: polygon(0 23.8%, 45.2% 23.8%, 45.2% 0, 100% 50%, 45.2% 100%, 45.2% 76.3%, 0 76.3%);
					position: absolute;
					top: 76px;
					right: -37px;
					z-index: 1;
				}
				&:last-child:after{
					display: none;
				}
				dl{
					padding-top: 41px;
					dt{
						min-height: 123px;
						padding: 28px 0 0 0;
						background: #5ac1db;
						border-radius: 10px;
						position: relative;
						text-align: center;
						.no{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 61px;
							height: 61px;
							background: #fff;
							border-radius: 61px;
							border: 2px solid #5ac1db;
							font-weight: 700; /*700 Bold*/
							font-size: 2.6rem;
							color: #5ac1db;
							position: absolute;
							top: -41px;
							left: 50%;
							transform: translateX(-50%);
						}
						.tit{
							display: block;
							margin-bottom: 8px;
							font-weight: 700; /*700 Bold*/
							color: #fff;
						}
					}
					dd{
						padding: 18px 14px 0;
					}
				}
			}
		}
	}
	@media screen and (max-width:820px) { /* iPad Air Portrait */
		.inner{
			padding-top: 64px;
			> p{
				font-size: 1.4rem;
			}
			.flowList{
				flex-wrap: wrap;
				margin-bottom: 64px;
				li{
					width: 100%;
					padding-bottom: 84px;
					&:after{
						content: "";
						display: block;
						width: 81px;
						height: 54px;
						background: #bdccd4;
						clip-path: polygon(0 30%, 27.8% 30%, 27.8% 0, 72.2% 0, 72.2% 30%, 100% 30%, 50% 100%);
						position: absolute;
						top: auto;
						bottom: 0px;
						right: auto;
						left: 50%;
						transform: translateX(-50%);
					}
					&:last-child{
						padding-bottom: 0;
					}
					dl{
						display: flex;
						justify-content: space-between;
						align-items: start;
						dt{
							width: 49%;
						}
						dd{
							width: 49%;
							padding-top: 0;
							span{
								display: block;
								font-size: 1.4rem;
							}
						}
					}
					&:first-child dl dt{
						margin: 0 auto;
					}
				}
			}
		}
	}/* @media */
}
.sec#faq{
	padding: 136px 0 150px;
	margin-top: -40px;
	@media screen and (max-width:768px){ /* SP */
		padding: 104px 0 64px;
	}
	.inner{
		h1{
			margin-bottom: 100px;
			letter-spacing: 1em;
			text-indent: 1em;
			@media screen and (max-width:768px){ /* SP */
				margin-bottom: 50px;
				letter-spacing: .75em;
				text-indent: .75em;
			}
		}
		.bgWhite{
			padding: 58px 62px;
			background: #fff;
			border-radius: 15px;
			@media screen and (max-width:768px){ /* SP */
				padding: 24px 16px;
			}
			.faq{
				padding: 38px 46px;
				background-size: 10px 1px;
				background-image: linear-gradient(to right,#a1dceb 5px, transparent 5px);
				background-position: left bottom;
				background-repeat: repeat-x;
				@media screen and (max-width:768px){ /* SP */
					padding: 16px 12px;
				}
				&:first-child{
					padding-top: 0;
				}
				&:last-child{
					padding-bottom: 0;
					background: none;
				}
				dt:before,
				dd:before{
					display: flex;
					width: 30px;
					height: 30px;
					border-radius: 30px;
					justify-content: center;
					align-items: center;
					font-weight: 500 !important; /*500 Medium*/
					position: absolute;
					top: 0;
					left: 0;
				}
				dt{
					padding-left: 60px;
					margin-bottom: 20px;
					font-weight: 500 !important; /*500 Medium*/
					font-size: 2.0rem;
					color: #14a7cc;
					position: relative;
					@media screen and (max-width:768px){ /* SP */
						padding-left: 48px;
						margin-bottom: 12px;
					}
					&:before{
						content: "Q";
						background: #14a7cc;
						border: 1px solid #14a7cc;
						color: #fff;
					}
				}
				dd{
					padding-left: 60px;
					font-size: 1.8rem;
					position: relative;
					@media screen and (max-width:768px){ /* SP */
						padding-left: 48px;
					}
					&:before{
						content: "A";
						background: #fff;
						border: 1px solid #1a1a1a;
						color: #1a1a1a;
					}
				}
			}
		}
	}
}

.sec#blog {
	flex-wrap: wrap;
	padding: 80px 0 100px;
	margin-top: -40px;
	@media screen and (max-width:640px){ /* SP */
		padding: 104px 0 64px;
	}/* @media */
	.inner{		
		h1{
			margin-bottom: 10rem;
			letter-spacing: 1em;
			text-indent: 1em;
			@media screen and (max-width:640px){ /* SP */
				margin-bottom: 50px;
			}/* @media */
		}
		.blogList {
			display: flex;
			justify-content: space-around;
			gap: 16px;
			list-style: none;
			padding: 0;
			margin: 0;
			li {
				width: 30%;
				border-radius: 8px;
				overflow: hidden;
				@media screen and (max-width: 640px) { /* SP */
					width: 360px;
					max-width: 100%;
				}
				figure img {
					display: block;
					width: 100%;
					height: auto;
				}
				.blogBody {
					padding: 12px;
					.blogTitle {
						font-size:16px;
						margin:10px 0;
						letter-spacing:0.06rem;
						line-height:1.4;
						&:after{
							content: "\f08e";
							font-family: "Font Awesome 6 Free";
							font-weight: 800;
							font-size: .8em;
							transform: translateY(-50%);
							color: #333;
						}
					}
				}
			}
		}
		.slick-slide {
			margin: 0 8px;
		}
		.slick-prev, .slick-next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
			width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.slick-prev {
			left: 10px;
		}
		.slick-next {
			right: 10px;
		}
		.slick-prev:before, .slick-next:before {
			position:absolute;
			content: "";
			width:16px;
			height:16px;
			border-right: 2px solid #888;
			border-top: 2px solid #888;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
			transform:rotate(45deg);	
		}
		.slick-prev:before {
			transform: rotate(-135deg);
		}
	}
}


@media screen and (max-width:1024px) { /* iPad landscape */
}/* @media */

@media screen and (max-width:820px) { /* iPad Air Portrait */
}/* @media */

@media screen and (max-width:768px) { /* iPad Portrait */
}/* @media */

@media screen and (max-width:640px) { /* SP */
}/* @media */





/* youtube 16 / 9
----- ----- ----- ----- ----- */
.youtube iframe,
.youtube1609 iframe{
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}







/* common styles
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* float
----- ----- ----- ----- ----- */
.float{overflow: hidden;}
.float .left{float: left;}
.float .right{float: right;}
@media screen and (max-width: 820px) {
	.float .left{width:49%;}
	.float .right{width:49%;}
}/* @media */


/* display
----- ----- ----- ----- ----- */
.db{display:block !important;}
.di{display:inline !important;}
.dib{display:inline-block !important;}
.dt{display:table !important;}
.dtc{display:table-cell !important;}

/* display:flex */
.df{display:flex !important;}
.jcsb{justify-content:space-between !important;}
.fdc{flex-direction:column !important;}
.aic{align-items:center !important;}
.ais{align-items:stretch !important;}
.fww{flex-wrap:wrap !important;}


/* border
----- ----- ----- ----- ----- */
.bd0{border:0 !important;}
.bdb{border-bottom:1px solid #717171;}
.bdn{border: none !important;}
.imgBd{border: 1px solid #efefef;}


/* width & height
----- ----- ----- ----- ----- */
.w-auto{width:auto !important;}
.mw100p{max-width:100% !important;}

/* font & text
----- ----- ----- ----- ----- */
.qs {font-family:'Quicksand', sans-serif;}
.serif {font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;}
.san-serif {font-family: -apple-system, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'メイリオ', meiryo, sans-serif;}

/* font-weight */
.fwb{font-weight:bold !important;}
.bold{font-weight:bold !important;}
.fw100{font-weight:100 !important;} /*100 Thin*/
.fw300{font-weight:300 !important;} /*300 Light*/
.fw400{font-weight:400 !important;} /*400 Regular*/
.fw500{font-weight:500 !important;} /*500 Medium*/
.fw700{font-weight:700 !important;} /*700 Bold*/
.fw900{font-weight:900 !important;} /*900 Black*/

/* font-size */
.fsz09rem{font-size:0.9rem !important;}
.fsz10rem{font-size:1.0rem !important;}
.fsz11rem{font-size:1.1rem !important;}
.fsz12rem{font-size:1.2rem !important;}
.fsz13rem{font-size:1.3rem !important;}
.fsz14rem{font-size:1.4rem !important;}
.fsz15rem{font-size:1.5rem !important;}
.fsz16rem{font-size:1.6rem !important;}
.fsz17rem{font-size:1.7rem !important;}
.fsz18rem{font-size:1.8rem !important;}
.fsz19rem{font-size:1.9rem !important;}
.fsz20rem{font-size:2.0rem !important;}
.fsz21rem{font-size:2.1rem !important;}
.fsz22rem{font-size:2.2rem !important;}
.fsz23rem{font-size:2.3rem !important;}
.fsz24rem{font-size:2.4rem !important;}
.fsz28rem{font-size:2.8rem !important;}
.fsz32rem{font-size:3.2rem !important;}
.fsz36rem{font-size:3.6rem !important;}
.fsz40rem{font-size:4.0rem !important;}
.fsz010em{font-size:0.10em !important;}
.fsz020em{font-size:0.20em !important;}
.fsz030em{font-size:0.30em !important;}
.fsz040em{font-size:0.40em !important;}
.fsz050em{font-size:0.50em !important;}
.fsz060em{font-size:0.60em !important;}
.fsz070em{font-size:0.70em !important;}
.fsz080em{font-size:0.80em !important;}
.fsz090em{font-size:0.90em !important;}
.fsz100em{font-size:1.00em !important;}
.fsz110em{font-size:1.10em !important;}
.fsz120em{font-size:1.20em !important;}
.fsz130em{font-size:1.30em !important;}
.fsz140em{font-size:1.40em !important;}
.fsz150em{font-size:1.50em !important;}
.fsz160em{font-size:1.60em !important;}
.fsz170em{font-size:1.70em !important;}
.fsz180em{font-size:1.80em !important;}
.fsz190em{font-size:1.90em !important;}
.fsz200em{font-size:2.00em !important;}

/* text-align */
.tal{text-align:left !important;}
.tac{text-align:center !important;}
.tar{text-align:right !important;}
.txtL{text-align:left !important;}
.txtC{text-align:center !important;}
.txtR{text-align:right !important;}

/* color */
.cBlue{color:#14A7CC !important;}
.fcBlue1{color: #14A7CC;}
.fcRed{color: #BD0808;}
.fcGreen{color: #5CBD8A;}
.fcOrange{color: #F6B63E;}
.fcBlue2{color: #46ABEC;}
.fcGlay{color: #AAA;}

/* font & text other style */
strong{font-weight:bold !important;}
em{font-style:italic !important;}
.tul{text-decoration: underline;}
.tdu{text-decoration:underline !important;}
.tlt{text-decoration: line-through;}
.underline{text-decoration: underline !important;}
.tdn{text-decoration:none !important;}
.indent{text-indent:1em !important;}


/* padding & margin
----- ----- ----- ----- ----- */
.mg0a{margin:0 auto !important;}

/* padding-top */
.pt00em{padding-top:0em !important;}
.pt04em{padding-top:0.4em !important;}
.pt05em{padding-top:0.5em !important;}
.pt08em{padding-top:0.8em !important;}
.pt10em{padding-top:1.0em !important;}
.pt12em{padding-top:1.2em !important;}
.pt15em{padding-top:1.5em !important;}
.pt16em{padding-top:1.6em !important;}
.pt20em{padding-top:2.0em !important;}
.pt24em{padding-top:2.4em !important;}
.pt25em{padding-top:2.5em !important;}
.pt28em{padding-top:2.8em !important;}
.pt30em{padding-top:3.0em !important;}
.pt32em{padding-top:3.2em !important;}
.pt35em{padding-top:3.5em !important;}
.pt40em{padding-top:4.0em !important;}
.pt45em{padding-top:4.5em !important;}
.pt50em{padding-top:5.0em !important;}

/* padding-right */
.pr00px{padding-right:0px !important;}
.pr04px{padding-right:4px !important;}
.pr05px{padding-right:5px !important;}
.pr08px{padding-right:8px !important;}
.pr10px{padding-right:10px !important;}
.pr12px{padding-right:12px !important;}
.pr15px{padding-right:15px !important;}
.pr16px{padding-right:16px !important;}
.pr20px{padding-right:20px !important;}
.pr24px{padding-right:24px !important;}
.pr25px{padding-right:25px !important;}
.pr28px{padding-right:28px !important;}
.pr30px{padding-right:30px !important;}
.pr32px{padding-right:32px !important;}
.pr35px{padding-right:35px !important;}
.pr40px{padding-right:40px !important;}
.pr45px{padding-right:45px !important;}
.pr50px{padding-right:50px !important;}

/* padding-bottom */
.pb00em{padding-bottom:0em !important;}
.pb04em{padding-bottom:0.4em !important;}
.pb05em{padding-bottom:0.5em !important;}
.pb08em{padding-bottom:0.8em !important;}
.pb10em{padding-bottom:1.0em !important;}
.pb12em{padding-bottom:1.2em !important;}
.pb15em{padding-bottom:1.5em !important;}
.pb16em{padding-bottom:1.6em !important;}
.pb20em{padding-bottom:2.0em !important;}
.pb24em{padding-bottom:2.4em !important;}
.pb25em{padding-bottom:2.5em !important;}
.pb28em{padding-bottom:2.8em !important;}
.pb30em{padding-bottom:3.0em !important;}
.pb32em{padding-bottom:3.2em !important;}
.pb35em{padding-bottom:3.5em !important;}
.pb40em{padding-bottom:4.0em !important;}
.pb45em{padding-bottom:4.5em !important;}
.pb50em{padding-bottom:5.0em !important;}

/* padding-left */
.pl00px{padding-left:0px !important;}
.pl04px{padding-left:4px !important;}
.pl05px{padding-left:05px !important;}
.pl08px{padding-left:8px !important;}
.pl10px{padding-left:10px !important;}
.pl12px{padding-left:12px !important;}
.pl15px{padding-left:15px !important;}
.pl16px{padding-left:16px !important;}
.pl20px{padding-left:20px !important;}
.pl24px{padding-left:24px !important;}
.pl25px{padding-left:25px !important;}
.pl28px{padding-left:28px !important;}
.pl30px{padding-left:30px !important;}
.pl32px{padding-left:32px !important;}
.pl35px{padding-left:35px !important;}
.pl40px{padding-left:40px !important;}
.pl45px{padding-left:45px !important;}
.pl50px{padding-left:50px !important;}

/* margin-top */
.mta{margin-top:auto !important;}
.mt00em{margin-top:0em !important;}
.mt04em{margin-top:0.4em !important;}
.mt05em{margin-top:0.5em !important;}
.mt08em{margin-top:0.8em !important;}
.mt10em{margin-top:1.0em !important;}
.mt12em{margin-top:1.2em !important;}
.mt15em{margin-top:1.5em !important;}
.mt16em{margin-top:1.6em !important;}
.mt20em{margin-top:2.0em !important;}
.mt24em{margin-top:2.4em !important;}
.mt25em{margin-top:2.5em !important;}
.mt28em{margin-top:2.8em !important;}
.mt30em{margin-top:3.0em !important;}
.mt32em{margin-top:3.2em !important;}
.mt35em{margin-top:3.5em !important;}
.mt40em{margin-top:4.0em !important;}
.mt45em{margin-top:4.5em !important;}
.mt50em{margin-top:5.0em !important;}

/* margin-right */
.mra{margin-right:auto !important;}
.mr00px{margin-right:0px !important;}
.mr04px{margin-right:4px !important;}
.mr05px{margin-right:5px !important;}
.mr08px{margin-right:8px !important;}
.mr10px{margin-right:10px !important;}
.mr12px{margin-right:12px !important;}
.mr15px{margin-right:15px !important;}
.mr16px{margin-right:16px !important;}
.mr20px{margin-right:20px !important;}
.mr24px{margin-right:24px !important;}
.mr25px{margin-right:25px !important;}
.mr28px{margin-right:28px !important;}
.mr30px{margin-right:30px !important;}
.mr32px{margin-right:32px !important;}
.mr35px{margin-right:35px !important;}
.mr40px{margin-right:40px !important;}
.mr45px{margin-right:45px !important;}
.mr50px{margin-right:50px !important;}

/* margin-bottom em */
.mba{margin-bottom:auto !important;}
.mb0{margin-bottom:0px !important;}
.mb00em{margin-bottom:0em !important;}
.mb04em{margin-bottom:0.4em !important;}
.mb05em{margin-bottom:0.5em !important;}
.mb08em{margin-bottom:0.8em !important;}
.mb10em{margin-bottom:1.0em !important;}
.mb12em{margin-bottom:1.2em !important;}
.mb15em{margin-bottom:1.5em !important;}
.mb16em{margin-bottom:1.6em !important;}
.mb20em{margin-bottom:2.0em !important;}
.mb24em{margin-bottom:2.4em !important;}
.mb25em{margin-bottom:2.5em !important;}
.mb28em{margin-bottom:2.8em !important;}
.mb30em{margin-bottom:3.0em !important;}
.mb32em{margin-bottom:3.2em !important;}
.mb35em{margin-bottom:3.5em !important;}
.mb36em{margin-bottom:3.6em !important;}
.mb40em{margin-bottom:4.0em !important;}
.mb44em{margin-bottom:4.4em !important;}
.mb45em{margin-bottom:4.5em !important;}
.mb48em{margin-bottom:4.8em !important;}
.mb50em{margin-bottom:5.0em !important;}
.mb52em{margin-bottom:5.2em !important;}
.mb56em{margin-bottom:5.6em !important;}
.mb60em{margin-bottom:6.0em !important;}
.mb64em{margin-bottom:6.4em !important;}
.mb68em{margin-bottom:6.8em !important;}
.mb72em{margin-bottom:7.2em !important;}
.mb76em{margin-bottom:7.6em !important;}
.mb80em{margin-bottom:8.0em !important;}

/* margin-bottom rem */
.mb00rem{margin-bottom:0.0rem !important;}
.mb04rem{margin-bottom:0.4rem !important;}
.mb05rem{margin-bottom:0.5rem !important;}
.mb08rem{margin-bottom:0.8rem !important;}
.mb10rem{margin-bottom:1.0rem !important;}
.mb12rem{margin-bottom:1.2rem !important;}
.mb15rem{margin-bottom:1.5rem !important;}
.mb16rem{margin-bottom:1.6rem !important;}
.mb20rem{margin-bottom:2.0rem !important;}
.mb24rem{margin-bottom:2.4rem !important;}
.mb25rem{margin-bottom:2.5rem !important;}
.mb28rem{margin-bottom:2.8rem !important;}
.mb30rem{margin-bottom:3.0rem !important;}
.mb32rem{margin-bottom:3.2rem !important;}
.mb35rem{margin-bottom:3.5rem !important;}
.mb36rem{margin-bottom:3.6rem !important;}
.mb40rem{margin-bottom:4.0rem !important;}
.mb44rem{margin-bottom:4.4rem !important;}
.mb45rem{margin-bottom:4.5rem !important;}
.mb48rem{margin-bottom:4.8rem !important;}
.mb50rem{margin-bottom:5.0rem !important;}
.mb52rem{margin-bottom:5.2rem !important;}
.mb56rem{margin-bottom:5.6rem !important;}
.mb60rem{margin-bottom:6.0rem !important;}
.mb64rem{margin-bottom:6.4rem !important;}
.mb68rem{margin-bottom:6.8rem !important;}
.mb72rem{margin-bottom:7.2rem !important;}
.mb76rem{margin-bottom:7.6rem !important;}
.mb80rem{margin-bottom:8.0rem !important;}
.mb84rem{margin-bottom:8.4rem !important;}
.mb88rem{margin-bottom:8.8rem !important;}

/* margin-left */
.mla{margin-left:auto !important;}
.ml00px{margin-left:0px !important;}
.ml04px{margin-left:4px !important;}
.ml05px{margin-left:5px !important;}
.ml08px{margin-left:8px !important;}
.ml10px{margin-left:10px !important;}
.ml12px{margin-left:12px !important;}
.ml15px{margin-left:15px !important;}
.ml16px{margin-left:16px !important;}
.ml20px{margin-left:20px !important;}
.ml24px{margin-left:24px !important;}
.ml25px{margin-left:25px !important;}
.ml28px{margin-left:28px !important;}
.ml30px{margin-left:30px !important;}
.ml32px{margin-left:32px !important;}
.ml35px{margin-left:35px !important;}
.ml40px{margin-left:40px !important;}
.ml45px{margin-left:45px !important;}

/* br
----- ----- ----- ----- ----- */
.pcNoBr{display:none !important;}
.tbNoBr{display:inline !important;}
.spNoBr{display:inline !important;}
.spbr{display:none !important;}
.br1024{display:none !important;}
@media screen and (max-width: 1024px) {
	.br1024{display: inline;}
}/* @media */
@media screen and (max-width: 820px) {
	.pcnobr{display:inline !important;}
	.tbnobr{display:none !important;}
	.pcNoBr{display:inline !important;}
	.tbNoBr{display:none !important;}
}/* @media */
@media screen and (max-width: 640px) {
	.spnobr{display:none !important;}
	.spbr{display:inline !important;}
	.spNoBr{display:none !important;}
}/* @media */


/* img style
----- ----- ----- ----- ----- */
/* 2カラムのイメージレイアウト。横幅可変でなりゆき */
.imgLayout2{
	display: flex;
	justify-content: center;
}
/* .imgLayout2c = 2カラムのイメージレイアウト。横幅50%。3つ目以降は折り返しでセンター揃え */
/* .imgLayout3c = 3カラムのイメージレイアウト。横幅33%。 */
/* .imgLayout4c = 4カラムのイメージレイアウト。横幅25%。 */
.imgLayout2c,
.imgLayout3c,
.imgLayout4c{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.imgLayout2c > *{width:50%;}
.imgLayout3c > *{width:33%;}
.imgLayout4c > *{width:25%;}

.imgLayout2c > * img,
.imgLayout3c > * img,
.imgLayout4c > * img{max-width:100%;}

@media screen and (max-width: 640px) {
	.imgLayout2,
	.imgLayout2c,
	.imgLayout3c,
	.imgLayout4c{
		display:block;
	}
	.imgLayout2c > *,
	.imgLayout3c > *,
	.imgLayout4c > *{width:100%;}
}/* @media */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width:640px){ /* SP */
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* list styles
----- ----- ----- ----- ----- */
ul.ul,
ol.ol{padding-left: 1.5em}
ul.ul li{list-style-position: outside; list-style-type: circle;}
ol.ol li{list-style-position: outside; list-style-type: decimal;}
ul.disc li{list-style-position: outside; list-style-type: disc;}




/* other common styles
----- ----- ----- ----- ----- */
.ovh{overflow: hidden;}
.wsn{white-space:nowrap;}
.att { /* 2行目以降インデント */
	padding-left:1em !important;
	text-indent:-1em !important;
	margin-left: 1em !important;
}






/* ----- ----- ----- ----- -----
 /hoge/index.php
----- ----- ----- ----- ----- */
@media screen and (max-width:1024px) { /* iPad landscape */
}/* @media */

@media screen and (max-width:820px) { /* iPad Air Portrait */
}/* @media */

@media screen and (max-width:768px) { /* iPad Portrait */
}/* @media */

@media screen and (max-width:640px) { /* SP */
}/* @media */