@charset "utf-8";

/* -------------------------------------------------------------------------*/
/* CUSTOM PROPERTIES
/* -------------------------------------------------------------------------*/
:root{
    /* COLOR */
	--color_1         : #006bd5;
    --color_text      : #333;
    --color_text-2    : #464646;
    --color_background: #f7f7f7;

	--color-ai        : #de4e43;
	--color-cs        : #82b244;
	--color-ix        : #319688;
	--color-hm        : #f7a329;


    /* FONT */
    --font_gothic: 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif;
    --font_mincho: 'YuMincho', 'Yu Mincho', serif;
    
    --font_size-14: clamp(0.75rem, 0.625rem + 0.33vw, 0.875rem);
    --font_size-16: clamp(0.875rem, 0.75rem + 0.33vw, 1rem);
    --font_size-17: clamp(0.938rem, 0.813rem + 0.33vw, 1.063rem);
    --font_size-18: clamp(1rem, 0.875rem + 0.33vw, 1.125rem);
    --font_size-20: clamp(1.125rem, 1rem + 0.33vw, 1.25rem);
    --font_size-22: clamp(1.125rem, 0.875rem + 0.67vw, 1.375rem);
    --font_size-24: clamp(1.375rem, 1.25rem + 0.33vw, 1.5rem);
    --font_size-28: clamp(1.625rem, 1.5rem + 0.33vw, 1.75rem);
    --font_size-32: clamp(1.5rem, 1rem + 1.33vw, 2rem);
    --font_size-36: clamp(1.875rem, 1.5rem + 1vw, 2.25rem);
    --font_size-38: clamp(1.75rem, 1.125rem + 1.67vw, 2.375rem);
    --font_size-40: clamp(2.25rem, 2rem + 0.67vw, 2.5rem);
    --font_size-45: clamp(2.5rem, 2.188rem + 0.83vw, 2.813rem);
    --font_size-55: clamp(2.813rem, 2.188rem + 1.67vw, 3.438rem);
    --font_size-65: clamp(2.438rem, 0.813rem + 4.33vw, 4.063rem);
    --font_size-72: clamp(3.75rem, 3rem + 2vw, 4.5rem);

}


/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* BASE
/* -------------------------------------------------------------------------*/
html {
  font-size: 100%;
  line-height: 1.8;
  font-family: sans-serif;
  color: var(--color_text);
  background-color: var(--color_background);
}

body{
    font-family: var(--font_gothic);
    font-size: var(--font_size-16);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}

img{
    vertical-align: bottom;
}

.ta-C{ text-align: center;}
.ta-R{ text-align: right;}
.ta-L{ text-align-last: left;}

/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* 
/* -------------------------------------------------------------------------*/
#HD{
	position: relative;
	padding: 20px;

	#JAIST-logo{
		position: absolute;
		top: 30px;
		left: 30px;

		img{
			width: 100px;
			height: auto;
		}
	}

	#JAIST-transition{
		position: absolute;
		top: 30px;
		right: 30px;
    font-size: var(--font_size-18);

		a{
			display:block;
			border:1px solid var(--color_1);
			width:12rem;
			text-align:center;
  		color: var(--color_text);
			text-decoration:none;
		}
	}

	#HD-logo{
		margin: 120px 0 0;
		padding: 0;
		text-align: center;
		font-size: var(--font_size-40);
		font-weight: 900;
		font-feature-settings: "palt";
		line-height: 1.5;

		span{
			display: inline-block;
		}
	}

	.hd-date{
		width: 280px;
		margin: 30px auto 0;
		padding: 2px;
		text-align: center;
		border: 1px solid #0076e0;
		border-radius: 5rem;
		color: #fff;
		font-size: var(--font_size-18);
		font-weight: 600;
		line-height: 1;

		span{
			display: block;
			padding: 8px 10px 10px;
			background-color: #0076e0;
			border-radius: 5rem;
			letter-spacing: 1px;
		}

		i{
			font-size: var(--font_size-32);
			font-style: normal;
			font-weight: 900;
		}
	}

	@media (width < 1100px){
		#JAIST-logo{
			top: 20px;
			left: 20px;

			img{
				width: 90px;
			}
		}
	  #JAIST-transition{
			top: 20px;
			right: 20px;
	  }
		#HD-logo{
			margin-top: 100px;
		}
	}

	@media (width < 600px) {
		#JAIST-logo{
			top: 10px;
			left: 10px;

			img{
				width: 60px;
			}
		}
	  #JAIST-transition{
			top: 10px;
			right: 10px;
	    font-size: var(--font_size-16);

			a{
				width:8rem;
			}
	  }

		#HD-logo{
			margin-top: 60px;
			font-size: 6.5vw;
		}

	}
}

#BG_1{
	width: 810px;
	height: 554px;
	background: url(../img/back_1.png) 0 0 no-repeat;
	background-size: cover;

	position: absolute;
	right: 0;
	top: 0;

	@media (width < 600px) {
		width: 600px;
		height: 410px;
	}
}
/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* KV
/* -------------------------------------------------------------------------*/
#KV{
	position: relative;
	padding: 0 20px;
	margin-top: 30px;

	.kv-inner{
		position: relative;
		max-width: 1370px;
		margin: 0 auto;
		height: 260px;
		border-radius: 5px;
		overflow: hidden;
		background: linear-gradient(to right,  #e7f0ed 23%,#9cb4b7 50%,#e7f0ed 78%);
	}

	.kv-psn{
		position: absolute;
		top: 0;
		bottom: 0;

		img{
			width: auto;
			height: 100%;
		}
	}

	.kv-psn-1{ left: 0;}
	.kv-psn-2{ right: 0;}

	.kv-line{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0.9;

		img{
			width: auto;
			height: 100%;
		}
	}

	.kv-text{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #fff;
		line-height: 1;
		opacity: 0;
		transition: opacity 2s ease;
		text-shadow: 0 0 5px rgb(0 23 52 / 0.342);
	}

	.kv-text-1{
		font-size: var(--font_size-45);
		font-weight: 600;
		letter-spacing: 2px;

		span{
			font-weight: 900;
			text-shadow: 0 0 15px rgba(34, 38, 255, 0.4), 0 0 2px #005a96, 0 0 3px #005a96, 0 0 2px #005a96;
			color: #76f6ff;
		}
	}

	.kv-text-2{
		margin-top: 10px;
		font-size: var(--font_size-14);
		letter-spacing: 1px;
		font-weight: 500;
		line-height: 1.5;

		span{
			font-weight: 900;
			color: #76f6ff;
			text-shadow: 0 0 1px #005a96, 0 0 2px #005a96;
		}
	}

	.kv-bottomLine{
		margin-top: 11px;

		&::after{
			content: '';
			display: block;
			height: 9px;
			max-width: 1370px;
			margin: 0 auto;
			border-radius: 1rem;
			background: linear-gradient(to right,  #00bdff 0%,#0042c9 100%);
		}
	}

	.kv-icons{
		img{
			width: auto;
			height: 260px;

			position: absolute;
			z-index: 1;
			top: 0;
			left: calc(50% - 250px);
		}
	}

	.kv-icons-1,
	.kv-icons-2,
	.kv-icons-3,
	.kv-icons-4 {
		opacity: 0;
		transition: all 0.8s ease;
	}

	.kv-icons-1,
	.kv-icons-3 {
		transform: translateX(-50px);
	}

	.kv-icons-2,
	.kv-icons-4 {
		transform: translateX(50px);
	}

	&.ic-1 .kv-icons-1,
	&.ic-2 .kv-icons-2,
	&.ic-3 .kv-icons-3,
	&.ic-4 .kv-icons-4{
		opacity: 1;
		transform: translateX(0);
	}

	&.ic-end{
		.kv-icons-1,
		.kv-icons-2,
		.kv-icons-3,
		.kv-icons-4 {
			opacity: 0;
		}

		.kv-text{
			opacity: 1;
			transition-delay: 0.5s;
		}
	}

	@media (width < 1100px) {
		margin-top: 15px;

		.kv-psn-1{ left: -90px;}
		.kv-psn-2{ right: -90px;}
	}

	@media (width < 800px) {
		.kv-psn-1{ left: -130px;}
		.kv-psn-2{ right: -130px;}
	}

	@media (width < 600px) {
		padding: 0 10px;
		margin-top: 0;

		.kv-psn-1{ left: -160px;}
		.kv-psn-2{ right: -170px;}
		
		.kv-inner {
			height: 240px;
			background: linear-gradient(to right,  #e7f0ed 1%,#9cb4b7 30%, #9cb4b7 70%, #e7f0ed 100%);
		}

		.kv-icons{
			img{
				height: 180px;
				top: 30px;
				left: calc(50% - 173px);
			}
		}

		.kv-text-1{
			font-size: 7vw;
		}
	}
}
/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* TOP MESSAGE
/* -------------------------------------------------------------------------*/
#TOP-message{
	position: relative;
	margin-top: 60px;
	padding: 0 20px;

	h2{
		margin: 0 auto;
		text-align: center;
		font-size: var(--font_size-36);
		font-weight: 800;
		max-width: 1300px;

		span{
			display: inline-block;
			padding: 0 20px;
			background: linear-gradient(to right,  #0028bd 0%,#0028bd 0%,#00b0fc 15%,#00b0fc 21%,#0028bd 43%,#0028bd 56%,#00b0fc 76%,#00b0fc 82%,#0028bd 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		i{
			display: inline-block;
			white-space: nowrap;
		}
	}

	.top-message-block{
		position: relative;
		z-index: 1;
		font-size: var(--font_size-17);
		line-height: 2;
		max-width: 1100px;
		margin: 30px auto 0;
		padding: 50px 40px;
		background-color: rgb(255 255 255 / 0.5);
		border-radius: 10px;
		box-shadow: 0 0 10px rgb(30 75 164 / 0.07);
	}

	.top-message-block-inner{
		max-width: 1000px;
		margin: 0 auto;

		p{
			margin: 0;
		}

		p + p{
			margin-top: 1.5rem;
		}
	}

	@media (width < 1000px) {
		margin-top: 5%;
	}

	@media (width < 600px) {
		padding: 0 15px;
		margin-top: 40px;

		h2{
			font-size: 5vw;
			line-height: 7vw;
		}

		.top-message-block{
			padding: 30px 15px;
		}
	}
}

#BG_2{
	width: 777px;
	height: 555px;
	background: url(../img/back_2.png) 0 0 no-repeat;
	background-size: cover;

	position: absolute;
	z-index: 0;
	left: 0;
	bottom: 0;
	transform: translateY(50%);

	@media (width < 800px) {
		width: 100%;
		height: auto;
		padding-top: calc(555%/777*100);
	}
}
/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* 4 Courses
/* -------------------------------------------------------------------------*/
#FourCourses{
	position: relative;
	background-color: rgb(229 234 245 / 0.5);
	margin-top: 80px;
	padding: 60px 20px;

	h3{
		position: relative;
		z-index: 1;
		margin: 0;
		text-align: center;
		color: var(--color_text-2);
		font-size: var(--font_size-32);
		font-weight: 800;
	}

	.fourCourses-fig{
		position: relative;
		z-index: 1;
		margin: 40px 0 20px;
		text-align: center;
		opacity: 0;
		transition: opacity 0.8s;

		img{
			width: 100%;
			height: auto;
			max-width: 800px;
		}

		&.anm--on{
			opacity: 1;
		}
	}


	.fourCourses-bg{
		font-size: 90px;
		font-weight: 900;
		color: #fff;
		transform: rotate(90deg);
		transform-origin: top left;
		opacity: 0.5;

		position: absolute;
		z-index: 0;
		left: 190px;
		top: -20px;

		text-shadow: 0 0 5px rgb(7 42 114 / 0.1);
	}

	@media (width < 1100px) {
		margin-top: 70px;

		.fourCourses-bg{
			left: 140px;
		}

		.fourCourses-bg{
			font-size: 80px;
		}
	}

	@media (width < 800px) {
		margin-top: 60px;

		.fourCourses-bg{
			left: 90px;
		}

		.fourCourses-bg{
			font-size: 60px;
		}
	}

	@media (width < 600px) {
		padding: 40px 10px;
	}
}
/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* 
/* -------------------------------------------------------------------------*/
#CharacterPortrait{
	padding: 70px 20px;

	.characterPortrait-inner{
		max-width: 1100px;
		margin: 0 auto;
	}

	.characterPortrait-lsit{
		list-style: none;
		margin: 40px 0 0;
		padding: 0;

		display: flex;
		gap: 30px;

		li{
			flex: 1;

			display: flex;
			align-items: center;
			padding: 20px 20px 20px 10px;
			background-color: #fff;
			border-radius: 10px;
			border: 2px solid #e3e3e3;
		}

		h4{
			width: 100px;
			margin: 0;
			padding: 0;
			font-size: 70px;
			font-weight: bold;
			color: var(--color_1);
			font-weight: 800;
			line-height: 1;
			text-align: center;
		}

		p{
			flex: 1;
			margin: 0;
			font-size: var(--font_size-17);
			font-weight: 500;
		}
	}

	.characterPortrait-text{
		max-width: 1000px;
		margin: 30px auto 0;
	}


	@media (width < 1000px) {
		.characterPortrait-lsit{
			gap: 20px;

			h4{
				width: 70px;
				font-size: 60px;
			}
		}
	}

	@media (width < 600px) {
		padding: 40px 15px;

		.characterPortrait-lsit{
			display: block;

			li{
				padding: 15px 15px 15px 5px;

				+ li{
					margin-top: 10px;
				}
			}

			h4{
				width: 50px;
				font-size: 40px;
			}
		}
	}
}

.category-title{
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: var(--font_size-28);
	color: var(--color_text-2);
	font-weight: 700;

	&::before{
		content: '';
		display: block;
		margin: 0 auto 20px;
		width: 75px;
		height: 4px;
		border-radius: 1rem;
		background: linear-gradient(to right,  #0076e0 0%,#00c2f1 100%);
	}
}
/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* Features
/* -------------------------------------------------------------------------*/
#Features{
	padding: 70px 20px 90px;
	background-color: #fff;

	.features-inner{
		max-width: 1100px;
		margin: 0 auto;
	}

	.features-list{
		display: flex;
		gap: 15px;
		margin-top: 50px;

		ul{
			flex: 1;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li{
			margin: 10px 0;
			padding: 10px;

			display: flex;
			box-sizing: border-box;
			align-items: center;
			width: 100%;
			gap: 10px;

			background-color: #fff;
			border: 1px solid #b9d4ef;
			border-radius: 5px;

			figure{
				margin: 0;
				padding: 0;
				width: 50px;

				img{
					width: 100%;
					height: auto;
				}
			}

			p{
				margin: 0;
				padding: 0;
				font-size: var(--font_size-16);
				font-weight: 600;
				line-height: 1.55;
			}
		}
	}

	.features-prof{
		margin: 100px 0;
	}
	
	.features-prof-ttl{
		text-align: center;
		margin: 60px 0 30px;

		span{
			display: inline-block;
			min-width: 170px;
			padding: 9px 20px 10px;
			font-size: var(--font_size-18);
			color: #fff;
			background-color: #000;
			border-radius: 5rem;
			line-height: 1;
		}
	}

	.features-prof-ttl--ai span{ background-color: var(--color-ai);}
	.features-prof-ttl--ix span{ background-color: var(--color-ix);}
	.features-prof-ttl--cs span{ background-color: var(--color-cs);}
	.features-prof-ttl--hm span{ background-color: var(--color-hm);}

	.features-prof-card{
		display: flex;
		justify-content: center;
		gap: 30px;
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;

		li{
			width: calc(100%/3 - 20px);
			margin: 0;
			padding: 0;
			max-width: 210px;
		}

		a{
			display: block;
			text-decoration: none;
			color: var(--color_text);

			&:hover{
				img{
					opacity: 0.7;
				}
			}
		}

		figure{
			margin: 0;
			padding: 0;
		}

		img{
			width: auto;
			height: auto;
			max-width: 100%;
			border-top: none;
			border-left: none;
			border-radius: 0 20px;
			border-bottom: 5px solid;
			transition: opacity 0.2s;
		}

		p{
			display: inline-block;
			margin: 15px 0 0;
			font-weight: 600;
			color: var(--color_1);
			border-bottom: 1px solid;
			line-height: 1.3;
		}

		span{
			display: block;
			margin-top: 5px;
		}
	}

	.features-prof-card--ai img{ border-color: var(--color-ai);}
	.features-prof-card--ix img{ border-color: var(--color-ix);}
	.features-prof-card--cs img{ border-color: var(--color-cs);}
	.features-prof-card--hm img{ border-color: var(--color-hm);}

	.features-info{
		display: flex;
		flex-wrap: wrap;
		gap: 30px 12px;
		margin-top: 70px;
	}

	.features-info-box{
		box-sizing: border-box;
		background-color: #f7f7f7;
		padding: 25px 10px;
		border: 1px solid #e1e1e1;

		h4{
			margin: 0 0 25px;
			padding: 0;
			text-align: center;
			font-size: var(--font_size-17);

			span{
				display: inline-block;
				min-width: 140px;
				padding: 15px 10px;
				border: 1px solid #c6dbed;
				background-color: #fff;
				line-height: 1;
			}
		}
	}

	.features-info-box--2{
		width: calc(50% - 6px);
	}

	.features-info-box--3{
		width: calc(100%/3 - 8px);
	}

	.features-info-link{
		text-align: center;
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: var(--font_size-16);

		li{
			margin: 0;
			padding: 0;

			 + li{
				margin-top: 15px;
			 }
		}

		a{
			display: block;
			position: relative;
			padding: 15px 40px;
			background-color: #fff;
			border-radius: 10px;
			color: var(--color_1);
			font-weight: 600;
			border: 1px solid #acc9e5;
			box-shadow: 0 3px 0 #acc9e5;
			line-height: 1.5;
			transition: box-shadow 0.2s ease, background 0.2s ease;

			&::after{
				content: '';
				display: block;
				width: 8px;
				height: 8px;
				border: 2px solid var(--color_1);
				transform: rotate(-45deg);
				border-top: none;
				border-left: none;

				position: absolute;
				right: 15px;
				top: calc(50% - 4px);
			}

			&:hover{
				box-shadow: none;
				background-color: #edf6ff;
			}
		}
	}

	.features-info-link--small{
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: var(--font_size-16);

		li{
			margin: 0;
			padding: 0;

			 + li{
				margin-top: 15px;
			 }
		}

		a{
			display: block;
			position: relative;
			padding: 10px 30px 10px 10px;
			background-color: #fff;
			border-radius: 10px;
			color: var(--color_1);
			font-weight: 600;
			border: 1px solid #acc9e5;
			box-shadow: 0 3px 0 #acc9e5;
			line-height: 1.5;
			transition: box-shadow 0.2s ease, background 0.2s ease;

			&::after{
				content: '';
				display: block;
				width: 8px;
				height: 8px;
				border: 2px solid var(--color_1);
				transform: rotate(-45deg);
				border-top: none;
				border-left: none;

				position: absolute;
				right: 15px;
				top: calc(50% - 4px);
			}

			&:hover{
				box-shadow: none;
				background-color: #edf6ff;
			}

			span{
				margin-top: 5px;
				font-size: 13px;
				line-height: 1.5;
				font-weight: 400;
				display: block;
			}
		}
	}

	.features-info-link--p{
		text-align: center;
		font-size: var(--font_size-14);
	}

	.features-info-list-1{
		list-style: none;
		margin: 0 auto;
		padding: 0;
		max-width: 250px;

		li{
			display: flex;
			margin: 10px 0;
			border-radius: 5rem 0 0 5rem;
			overflow: hidden;
			background-color: #fff;
			border: 1px solid #e1e1e1;
			line-height: 1;

			h5{
				margin: 0;
				padding: 10px;
				color: #fff;
				background-color: var(--color_1);
				font-weight: 700;
				font-size: var(--font_size-1);
				white-space: nowrap;
				line-height: 1.4;
			}

			p{
				margin: 0;
				padding: 10px;
				font-size: var(--font_size-22);
				font-weight: 700;

				span{
					font-size: var(--font_size-14);
					font-weight: normal;
				}
			}
		}
	}

	.features-info-list-2{
		list-style: none;
		margin: 0 auto;
		padding: 0;
		line-height: 1.2;

		li{
			position: relative;
			margin: 8px 0;
			padding: 10px 10px 10px 35px;
			background-color: #fff;
			border: 1px solid #e1e1e1;
			border-radius: 5rem;

			&::before{
				content: '';
				display: block;
				width: 13px;
				height: 13px;
				background-color: var(--color_1);
				border-radius: 100%;

				position: absolute;
				top: 50%;
				left: 12px;
				transform: translateY(-50%);
			}
		}
	}

	.noLink{
		opacity: 0.5 !important;
		pointer-events: none !important;
		box-shadow: none !important;
		text-decoration: none !important;

		&::after{
			display: none !important;
		}
	}

	@media (width < 800px) {
		padding: 50px 20px;

		.features-prof{
			margin: 80px 0;
		}

		.features-prof-card{
			gap: 15px;

			li{
				width: calc(100%/3 - 10px);
			}
		}

		.features-info{
			display: block;
		}

		.features-info-box{
			margin: 15px 0;
			width: auto;
		}

		.features-info-link{
			margin-top: 30px;
			text-align: left;

			a{
				padding: 10px 30px 10px 10px;
			}
		}

		.features-info-list-1{
			max-width: 300px;
			margin: 20px auto 0;
		}
	}

	@media (width < 600px) {
		padding: 40px 15px;

		.features-prof{
			margin: 60px 0;
		}

		.features-list{
			display: block;
			margin-top: 30px;

			li{
				margin: 7px 0;
			}
		}
	}

	@media (width < 500px) {
		.features-prof-card{
			gap: 20px;
			flex-wrap: wrap;
			justify-content: flex-start;

			li{
				width: calc(50% - 10px);
			}
		}
	}
}
/* -------------------------------------------------------------------------*/





/* -------------------------------------------------------------------------*/
/* LINKs
/* -------------------------------------------------------------------------*/
#LINKs{
	padding: 75px 20px;
	background-color: #e7eaef;

	ul{
		list-style: none;
		max-width: 930px;
		margin: 0 auto;
		padding: 0;

		display: flex;
		gap: 10px;
	}

	li{
		flex: 1;
		display: flex;
		margin: 0;
		padding: 0;

		a{
			display: flex;
			align-items: center;
			width: 100%;
			position: relative;
			padding: 16px 30px;
			background-color: #fff;
			border-radius: 5rem;
			color: var(--color_1);
			text-align: center;
			font-weight: 600;
			border: 1px solid #a1bedd;
			box-shadow: 0 3px 0 #a1bedd;
			line-height: 1.5;
			text-decoration: none;
			transition: box-shadow 0.2s ease, background 0.2s ease;

			.links-a-inner{
				width: 100%;

			}

			&:hover{
				box-shadow: none;
				background-color: #edf6ff;
			}

			&::after{
				content: '';
				display: block;
				width: 10px;
				height: 10px;
				border: 2px solid var(--color_1);
				border-top: none;
				border-left: none;

				position: absolute;
				right: 20px;
				top: 50%;
				transform: translateY(-50%) rotate(-45deg);
			}

			p{
				font-size: var(--font_size-18);
				margin: 0;
				font-weight: 700;
				letter-spacing: 1px;
				line-height: 1.2;

				span{
					text-decoration: underline;
				}

				i{
					font-style: normal;
					font-size: 13px;
				}
			}

			span.clickHere{
				display: block;
				margin-top: 5px;
				font-size: var(--font_size-14);
				color: var(--color_text);
				color: #6673a4;
			}
		}

	}

	@media (width < 1000px) {
		ul{
			gap: 10px;
		}
	}

	@media (width < 800px) {
		padding: 50px 15px;

		li {
			a {
				padding: 16px 20px;

				&::after {
					content: '';
					width: 10px;
					height: 10px;
					right: 15px;
					top: calc(50% - 5px);
				}

				p{
					font-size: var(--font_size-20);
				}
			}
		}
	}

	@media (width < 600px) {
		padding: 30px 10px;

		ul{
			display: block;
		}

		li{
			margin: 15px 0;

			a{
				padding: 10px 20px;
			}
		}
	}
}
/* -------------------------------------------------------------------------*/




/*---------------------------------------------
	footer
---------------------------------------------*/

#FT{
	color: #FFF;
	background-color: #000;

	#copyright_area {
		max-width: 1100px;
		padding: 15px 0;
		margin: 0 auto;
	}

	#footer_link{
		font-size: 12px;
		text-align: right;
		line-height: 1.5;

		a{
			display: inline-block;
			color: #FFF;
			border-left: 1px solid #FFF;
			padding: 0 10px;
			vertical-align: middle;
			text-decoration: none;

			&:first-child{
				border-left:none;
			}

			&::before{
				content: '';
				display: inline-block;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 3px 0 3px 5px;
				border-color: transparent transparent transparent #fff;
				margin-right: 3px;
			}
		}
	}

	.address{
		margin: -15px auto 0;
		padding-left: 8px;
		font-style: normal;
		font-size: var(--font_size-14);
		line-height: 1.7;

		em{
			font-style: normal;
			font-size: var(--font_size-16);
			font-weight: 700;
		}
	}

	@media (width < 800px) {
		#footer_link{
			padding-bottom: 10px;
		}
	}

	@media (width < 600px) {
		#footer_link{
			text-align: left;
		}
	}
}


	@media (width < 800px) {
		br.pc{ display:none; }
	}