@charset "utf-8";

		
/* -- Manu Background Class -- */

.circle-bg{
	position: fixed;
	z-index:100000;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: var(--l-gray);
	transform: scale(0);
	top:calc(50% - 50px);
	left:calc(50% - 50px);
	transition: all 0.3s;
}

.circle-bg.circleactive{
  transform: scale(50);
	z-index:100000;
}

/* Commmon Class */

nav {
	position: fixed;
	z-index: 2000000;
	left: 0;
	top: 30px;
	
	overflow-x: hidden;
	overflow-y: scroll;
	
	width: 100vw;
	display: none;
	
	.content {
		width: 100%;
		max-width: 1080px;
		margin: 0 auto;
		line-height: 1.6;
		padding-bottom: 120px;
		@media screen and (max-width: 1080px) {
			padding: 0 15px 120px;
		}
	}
	
	.search-bar {
		background: #fff;
	}

}

/* -- Navigation Class -- */

nav::-webkit-scrollbar {
	width: 6px;
	background: rgb(255,255,255,0.3);
	border-radius: 3px;
}
nav::-webkit-scrollbar-thumb {
	width: 6px;
	background: var(--cl-red);
	border-radius: 3px;
}
nav::-webkit-scrollbar-track {
	background: rgb(255,255,255,0.3);
	border-radius: 3px;
}


/* -----------------------------
	Panelactive Navigation Class 
--------------------------------- */

.panelactive {
		
	/* -- Navigation Panelactive Class -- */

	nav {
		opacity: 1;
		left: 0;
		top: 80px;
		
		width: 100vw;
		height: 100vh;
		
		line-height: 1.6;
		
	}

}
@media screen and (max-width: 640px) {
	
	header.panelactive {
		
	}
		
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
	Nav Settings
   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


nav {
	.g_nav {
		display: flex;
		flex-flow: wrap;
		column-gap: 40px;
		row-gap:  40px;
		margin: 40px 0;
	}
	
	
	/* --- guide --- */
	
	.guide {
		width: calc(100% / 2 - 20px);
		text-align: center;
		border: solid 2px var(--d-gray);
		border-radius: 6px;
		padding: 3px;
		display: table;
		
		@media screen and (max-width: 640px) {
			width: 100%;
		}
		
		a {
			display: table-cell;
			vertical-align: middle;
			border-radius: 6px;
			padding: 30px 0;
			height: 100%;
		}
		
		a:hover {
			background: rgb(0,0,0,0.1);
		}
		
		.caption {
			margin-top: 15px;
			font-size: var(--fs-regular);
			color: var(--d-gray);
			background: url("../images/common/link_arrowwhite.svg") no-repeat left center;
			background-size:  var(--fs-regular);
			display: inline-block;
			padding-left: 1.5em;
		}
	}
	
	.guide-title {
		--bubble-sp      : 40px 20px 35px;
		--bubble-fs      : 50px;
		--main_title-fs  : 24px;
		--sub_title-fs   : 18px;
		--em-position    : 15px;
		--sub-position   : 90px;
		
		@media screen and (max-width: 1000px) {
			--bubble-sp      : 4vw 2vw 3.5vw;
			--bubble-fs      : 5vw;
			--main_title-fs  : 2.4vw;
			--sub_title-fs   : 1.8vw;
			--em-position    : 1.5vw;
			--sub-position   : 9vw;
		}
		
		@media screen and (max-width: 640px) {
			--bubble-sp      : 40px 20px 35px;
			--bubble-fs      : 50px;
			--main_title-fs  : 24px;
			--sub_title-fs   : 18px;
			--em-position    : 15px;
			--sub-position   : 90px;
		}

		display: inline-block;
		position: relative;
		padding-bottom: 25px;
		background:
			radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) 98% bottom  / 6px 6px no-repeat,
			radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) left bottom  / 6px 6px no-repeat,
			linear-gradient(var(--d-gray) 50%, transparent 0%) 0px 99% / 98% 3px no-repeat;
		
		p.main_title {
			font-size: var(--fs-big);
			display: flex;
			align-items: flex-end;
			font-size: var(--main_title-fs);
			font-weight: var(--fw-bold);
			color: var(--cl-red);
			
			.bubble {
				font-weight: var(--fw-Medium);
				aspect-ratio: 5/5;
				display: inline-block;
				position: relative;
				background: url("../images/common/bg_firststep.svg") no-repeat center center;
				background-size: 100%;
				padding: var(--bubble-sp);
				text-align: center;
				color: #fff !important;
				margin-right: 10px; 
				font-size: var(--bubble-fs);
				line-height: 0;
			
				em {
					font-size: 20%;
					color: #fff !important;
					position: absolute;
					top: var(--em-position);
					left: 50%;
					transform: translateX(-50%);
					-webkit-transform: translateX(-50%);
					-ms-transform: translateX(-50%);
					white-space: nowrap;
					letter-spacing: 3px;
				}
			}
			
		}
		
		.sub_title {
			font-weight	: var(--fw-Medium);
			font-size	: var(--sub_title-fs);
			position	: absolute;
			top			: var(--em-position);
			left		: var(--sub-position);
			color		: var(--d-gray);
		}
		
		
	}
	
	/* --- casestudy --- */
	
	.casestudy {
		width: calc(100% / 2 - 20px);
		border-radius: 6px;
		padding: 3px;
		color: var(--d-gray);
		@media screen and (max-width: 640px) {
			width: 100%;
		}
		
		h2 {
			font-size: var(--fs-big);
			font-weight: var(--fw-bold);
			text-align: center;
			padding-bottom: 10px;
			margin-bottom: 15px;
			background:
				radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) 98% bottom  / 6px 6px no-repeat,
				radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) left bottom  / 6px 6px no-repeat,
				linear-gradient(var(--d-gray) 50%, transparent 0%) 0px 99% / 98% 3px no-repeat;
		}
		
		.caption {
			font-size: var(--fs-small);
			margin-bottom: 5px;
		}
		
		ul li {
			margin-top: 9px;
			@media screen and (max-width: 640px) {
				margin-top: 20px;
			}
		}
		
		ul li a {
			background: url("../images/common/link_arrowwhite.svg") no-repeat left top 7px;
			background-size: calc(var(--fs-regular) - 1%);
			padding-left: 1.3em;
			text-decoration: underline;
		}
	
		ul li a:hover {
			text-decoration: none;
		}
		
		
	}
	
	/* --- service --- */
	
	.service {
		
		background: var(--l-pink);
		padding: 15px;
		width: 100%;
		color: var(--d-gray);
		
		h2 {
			font-size: var(--fs-big);
			font-weight: var(--fw-bold);
			text-align: center;
			padding-bottom: 10px;
			margin-bottom: 15px;
			background:
				radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) 98% bottom  / 6px 6px no-repeat,
				radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) left bottom  / 6px 6px no-repeat,
				linear-gradient(var(--d-gray) 50%, transparent 0%) 0px 99% / 98% 3px no-repeat;
		}
		
		ul {
			display: flex;
			align-items: center;
			column-gap: 20px;
			row-gap: 20px;
			flex-flow: wrap;
			
			li {
				width: calc( 100% / 3 - 20px);
				align-items: center;
				@media screen and (max-width: 1000px) {
					width: calc( 100% / 2 - 20px);
				}
				@media screen and (max-width: 640px) {
					width: calc( 100% / 1 - 20px);
				}
				
				a {
					background: #fff;
					border-radius: 6px;
					font-size: var(--fs-regular);
					font-weight: var(--fw-Medium);
					display: block;
					text-align: center;
					padding: 15px;
					
					span {
						background: url("../images/common/link_arrowwhite.svg") no-repeat left center;
						background-size: var(--fs-regular);
						padding-left: 1.5em;
					}
				}
				
				a:hover {
					background: var(--cl-red);
					color: #fff;
					span {
						background: url("../images/common/link_arrowred.svg") no-repeat left center;
						background-size: var(--fs-regular);
					}
				}
				
			}
			
		}
		
		.approach {
			border-top: dotted 4px #fff;
			margin-top: 30px;
			padding: 25px 0 25px;
			
			h3 {
				font-size: var(--fs-Medium);
				font-weight: var(--fw-Medium);
				color: var(--cl-red);
				text-align: center;
				margin-bottom: 20px;
			}
			
			ul{ 
				column-gap: 3px;
				row-gap:  3px;
				li {
					width: calc( 100% / 2 - 3px);
					a {
						border-radius: 0px;
						font-size: var(--fs-Medium);
					}
				}
			}
			
		}
		
		
	}
	
	/* --- column --- */
	
	.column {
		width: 100%;
		color: var(--d-gray);
		
		h2 {
			font-size: var(--fs-big);
			font-weight: var(--fw-bold);
			text-align: center;
			padding-bottom: 10px;
			margin-bottom: 30px;
			background:
				radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) 98% bottom  / 6px 6px no-repeat,
				radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) left bottom  / 6px 6px no-repeat,
				linear-gradient(var(--d-gray) 50%, transparent 0%) 0px 99% / 98% 3px no-repeat;
		}
		
		dl {
			display: flex;
			flex-flow: wrap;
			column-gap: 40px;
			row-gap:  40px;
			
			div {
				
				width: calc( 100% / 2 - 40px);
				@media screen and (max-width: 640px) {
					width:100%;
				}
				
				dt {
					font-size: var(--fs-Medium);
					font-weight: var(--fw-Medium);
					color : var(--cl-red);
					padding-left: 45px;
					padding-right: 20px;
					margin-bottom: 20px;
					display: inline-block;
					border-bottom: solid 2px var(--cl-red);
						
					@media screen and (max-width: 1000px) {
						padding-left: 4.5vw;
					}
					@media screen and (max-width: 640px) {
						padding-left: 45px;
					}
				}
				
				&.school dt {
					background: url("../images/home/icon_column_school.svg") no-repeat left bottom;
				}
				
				&.corporate dt {
					background: url("../images/home/icon_column_business.svg") no-repeat left bottom;
				}
				
				dd {
					font-size: var(--fs-regular);
					font-weight: var(--fw-Medium);
					margin-top: 9px;
					padding-bottom:9px;
					border-bottom : dotted 1px var(--l-brown);
					@media screen and (max-width: 640px) {
						margin-top: 20px;
						padding-bottom:20px;
					}
				}

				dd a {
					background: url("../images/common/link_arrowwhite.svg") no-repeat left top 7px;
					background-size: calc(var(--fs-regular) - 1%);
					padding-left: 1.3em;
					text-decoration: underline;
					display: block;
				}

				dd a:hover {
					text-decoration: none;
				}
		
				
			}
			
			
		}
		
	}
	
	/* --- other --- */
	
	.other {
		
		font-size: var(--fs-regular);
		font-weight: var(--fw-Medium);
		border-top: dotted 4px #ccc;
		margin-top: 40px;
		padding: 40px 0;
		line-height: 0;
		@media screen and (max-width: 1080px) {
			padding: 15px;
		}
		
		li { 
			line-height: 1.6;
			display:  inline-block;
			padding-right: 25px;
			
			@media screen and (max-width: 640px) {
				display: block;
				border-bottom: dotted 2px #ccc;
				
				&:last-child {
					border-bottom: none;
				}
				
			}
		}
		
		li a {
			background: url("../images/common/link_arrowwhite.svg") no-repeat left top 5px;
			background-size: calc(var(--fs-regular) - 2%);
			padding-left: 1.3em;
			color: var(--d-gray);
			
			@media screen and (max-width: 640px) {
				background: url("../images/common/link_arrowwhite.svg") no-repeat left 15px center;
				background-size: var(--fs-regular);
				width: 100%;
				display: block;
				padding : 15px 25px 15px 35px;
				padding-left: 2.8em;
			}
		}
	
		li a:hover {
			color: var(--cl-red);
			background: url("../images/common/link_arrowwhite-bgred.svg") no-repeat left top 5px;
			background-size: calc(var(--fs-regular) - 2%);
			
			@media screen and (max-width: 640px) {
				background: url("../images/common/link_arrowwhite-bgred.svg") no-repeat left 15px center;
				background-size: var(--fs-regular);
			}
		}
		
	}
	
	
	/* --- contact --- */
	
	.contact {
		background:
			radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) 98% top  / 6px 6px no-repeat,
			radial-gradient(circle closest-side, var(--d-gray) 80%, transparent) left top  / 6px 6px no-repeat,
			linear-gradient(var(--d-gray) 50%, transparent 0%) 0px 3px / 98% 3px no-repeat;
		margin-bottom: 40px;
		padding-top: 20px;
		text-align: center;
		
		dt{
			position: relative;
			display: inline-block;
			margin: 1.5em 0 30px;
			padding: 17px 60px;
			min-width: 120px;
			max-width: 100%;
			color: #555;
			font-size: 16px;
			background: var(--d-gray);

			font-size: var(--fs-regular);
			font-weight: var(--fw-Medium);
			color: #fff;
		}

		dt:before {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -15px;
			border: 15px solid transparent;
			border-top: 15px solid  var(--d-gray);
		}

		dt span {
			display: block;
			margin: 0;
			padding: 0;
		}
		
		.txt {
			font-size: var(--fs-Medium);
			font-weight: var(--fw-Medium);
			line-height: 1.8;
			color: var(--d-gray);
			margin-bottom: 40px;
			@media screen and (max-width: 1080px) {
				padding: 15px;
			}
		}
		
		dd {
	
			ul {
				display: block;
				width: 100%;
				display:flex;
				flex-wrap:wrap;
				align-items: center;
				justify-content: space-between;
				column-gap: 30px;
				font-size: var(--fs-Medium);
				font-weight: var(--fw-Medium);

				@media screen and (max-width: 1080px) {
					padding : 0 15px;
				}

				li{
					width: calc(50% - 15px);
					padding-bottom: 3px;
					@media screen and (max-width: 640px) {
						width: 100%;
						padding : 0 15px 1px;
					}
				}

				li a {
					background: #fff;
					background-size: 30px;
					font-size: var(--fs-regular);
					color: var(--black);
					display: block;
					width: 100%;
					padding: 25px;
					letter-spacing: 2px;
				}

				li a:hover {
					background: var(--cl-red);
					color: #fff;
				}

				li a span.mail {
					background: url("../images/common/icon_mail.svg") no-repeat left center;
					padding-left: 45px;
				}

				li a span.soudan {
					background: url("../images/common/icon_soudan.svg") no-repeat left center;
					padding-left: 45px;
				}

				li:hover a span.mail {
					background: url("../images/common/icon_mail_ov.svg") no-repeat left center;
				}

				li:hover a span.soudan {
					background: url("../images/common/icon_soudan_ov.svg") no-repeat left center;
				}
			}
		}
		
	}

}