@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-main: #93278F;
$color-mainhalf: #E9D4E9;
$color-maindouble: #6E1D6B;

#wrapper{
	overflow: hidden;
}

//header
header{
	background: url("../img/sub-img.jpg");
	background-repeat: repeat-x;
	background-position: center top;
	background-size: cover;
	position: relative;
	height: 300px;
	padding-top: 1.5rem;
	@include md {
		height: 250px;
	}
	@include xs {
		background: url("../img/phone-back2.png"), url("../img/phone-back.png");
		background-position: center bottom,center top;
		background-repeat: no-repeat;
		background-size: contain,cover;
		height: 375px;
	}
	h1{
		font-size: 12px;
		font-size: 1.2rem;
		margin: 0;
		margin-bottom: 0.5rem;
		@include sm {
			text-align: center;
		}
	}
	h1 + div{
		display: flex;
		justify-content: space-between;
		@include sm {
			display: block;
		}
		a{
			color: #0068B7;
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				width: 70px;
				margin-right: 0.5rem;
				padding-top: 0.5rem;
				@include xs {
					width: 80px;
				}
			}
			p{
				font-size: 18px;
				font-size: 1.8rem;
				line-height: 2.5rem;
				@include xs {
					font-size: 20px;
					font-size: 2rem;
					line-height: 2.8rem
				}
				span{
					font-size: 21px;
					font-size: 2.1rem;
					font-weight: bold;
					@include xs {
						font-size: 25px;
						font-size: 2.5rem;
					}
				}
			}
		}
		ul{
			display: flex;
			align-items: center;
			@include sm {
				justify-content: center;
			}
			@include xs {
				display: block;
				text-align: center;
			}
			li {
				@include md {
					font-size: 15px;
					font-size: 1.5rem;
				}
				@include xs {
					margin: 1rem 0;
				}
				a {
					@include xs {
						width: 75%;
					}
				}
			}
			li:first-child{
				margin-right: 1rem;
				@include xs {
					margin-right: 0;
				}
				a{
					display: inline-block;
					background: #4D9A24;
					color: #fff;
					text-align: center;
					font-weight: 400;
					padding: 0.3rem 2rem 0.5rem 2rem;
					border-radius: 0.5rem;
					&:hover{
						background: #3A731B;
						color: #FCEE21;
					}
				}
			}
			li:last-child{
				a{
					display: inline-block;
					background: $color-main;
					color: #fff;
					text-align: center;
					font-weight: 400;
					padding: 0.3rem 2rem 0.5rem 2rem;
					border-radius: 0.5rem;
					&:hover{
						background: $color-maindouble;
						color: #FCEE21;
					}
				}
			}
		}
	}
	.top-title{
		text-align: center;
		font-size: 35px;
		font-size: 3.5rem;
		font-weight: bold;
		color: $color-main;
		line-height: 4rem;
		letter-spacing: 1.5px;
		@include sm {
			font-size: 32px;
			font-size: 3.2rem;
		}
		@include xs {
			font-size: 30px;
			font-size: 3rem;
		}
		&:before{
			content: "";
			position: absolute;
			right: 0;
			left: 0;
			bottom: 50px;
			margin: auto;
			@include md {
				bottom: 45px;
			}
			@include xs {
				bottom: 80px;
			}
		}
		&:after{
			content: '';
			display: inline-block;
			position: absolute;
			bottom: -43px;
			right: 16%;
			width: 200px;
			height: 200px;
			background-image: url("../img/sub-character.svg");
			background-size: contain;
			background-repeat: no-repeat;
			vertical-align: middle;
			@include xl {
				right: 13%;
			}
			@include lg {
				bottom: -41px;
				right: 9%;
				width: 190px;
				height: 190px;
			}
			@include md {
				bottom: -37px;
				right: 5%;
				width: 175px;
				height: 175px;
			}
			@include sm {
				bottom: -33px;
				right: 2%;
				width: 150px;
				height: 150px;
			}
			@include xs {
				bottom: -24px;
				right: 35%;
				width: 110px;
				height: 110px;
			}
		}
	}
}
//header------ここまで
//purple-back
.purple-back{
	background: url("../img/purple-background.png");
	padding-top: 2rem;
	padding-bottom: 6rem;
}
//purple-back------ここまで
//sidenav
#sidenav{
	ul.dropmenu{
		*zoom: 1;
		list-style-type: none;
		margin: 5px auto 30px;
		padding: 0;
		&:before{
			content: "";
			display: table;
		}
		&:after{
			content: "";
			display: table;
			clear: both;
		}
		li{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			@include lg {
				font-size: 15px;
				font-size: 1.5rem;
			}
			@include md {
				font-size: 16px;
				font-size: 1.6rem;
			}
			&:hover ul li{
				overflow: visible;
				height: 38px;
			}
			a{
				display: block;
				margin: 0;
				padding: 15px 0 11px;
				line-height: 0.7;
				background: $color-main;
				color: #fff;
				font-weight: 500;
				img{
					width: 40px;
					margin-right: 1rem;
					margin-left: 1.5rem;
				}
				&:hover{
					background: $color-maindouble!important;
					color: #FCEE21;
				}
			}
			ul{
				list-style: none;
				position: absolute;
				z-index: 9999;
				top: 100%;
				left: 0;
				margin: 0;
				padding: 0;
				li{
					width: 100%;
					overflow: hidden;
					height: 0;
					transition: .2s;
					a{
						padding: 15px 15px;
						border-top: 1px solid $color-mainhalf;
						text-align: left;
						background: #A952A5;
						@include lg {
							font-size: 13.5px;
							padding: 15px 10px;
						}
						@include md {
							font-size: 15px;
							padding: 15px 15px;
						}
						&:hover{
							background: $color-maindouble!important;
						}
					}
				}
			}
		}
	}
}
#sidenav li.col-lg-3.col-sm-6{
  border: 2px solid #fff;
}
#sidenav li:nth-child(5) li:nth-child(2) a{
  letter-spacing: -1px;
}

//sidenav------ここまで
//breadcrumb
.breadcrumb {
	margin: 3rem 2rem 1rem;
	padding: 0;
	list-style: none;
	background: none;
	li{
		display: inline;
		list-style: none;
		a{
			text-decoration: none;
			color: #000;
			&:hover{
				color: $color-main;
			}
		}
		&:after{
			font-family: "Font Awesome 5 Free";
			content: '\f105';
			padding: 0 0.5em;
			font-weight: 900;
		}
	}
	li:last-child{
		&:after{
			content:"";
		}
		a{
			color: $color-main;
		}
	}
}
//breadcrumb------ここまで
//page-menu
#page-menu{
	background: $color-main;
	border-radius: 0.5rem;
	padding: 1rem 2rem 0.3rem 2rem;
	ul{
		li{
			font-size: 14px;
			font-size: 1.4rem;
			display: inline-block;
			&:after{
				content: "｜";
				padding: 0 0.2em;
				color: #fff;
			}
			a{
				color: #fff;
				&:hover{
					color: #FCEE21;
				}
			}
		}
		li:last-child{
			&:after{
				content: "";
			}
		}
	}
}
//page-menu------ここまで
//内容（article）
article{
	background: #fff;
	border-radius: 0.5rem;
	padding: 2rem;
	margin-top: 1.5rem;
	section{
		margin-bottom: 5rem;
		&:last-child {
			margin-bottom: 0;
		}
		h3{
			display: block;
			background: url("../img/purple-background.png");
			border-top: 1px dashed $color-main;
			border-bottom: 1px dashed $color-main;
			font-size: 24px;
			font-size: 2.4rem;
			color: $color-main;
			padding: 1rem;
		}
		h4{
			margin-top: 3rem;
			font-size: 20px;
			font-size: 2rem;
			color: $color-main;
			&:before{
				content: "●";
				color: #C993C7;
			}
		}
		table{
			border: 2px solid $color-main;
			tr{
				border-bottom: 1px solid $color-main;
				th{
					background: $color-mainhalf;
					text-align: left;
					border-right: 1px solid $color-main; 
					padding: 0.5rem 1.5rem;
					font-weight: normal;
				}
				td{
					text-align: left;
					border-right: 1px solid $color-main; 
					padding: 0.5rem 1.5rem;
				}
			}
			tr:last-child{
				border-bottom: none;
			}
			a.word-link{
				display: flex;
				align-items: center;
				color: #000;
				transition: 0.3s;
				padding-right: 1rem;
				line-height: 1.3;
				&:before{
					font-family: "Font Awesome 5 Free";
					content: '\f1c2';
					font-weight: 900;
					color: #fff;
					font-size: 25px;
					font-size: 2.5rem;
					background: #29abe2;
					display: flex;
					align-items: center;
					padding: 1rem 1.5rem;
					margin: auto 1.5rem auto 0;
				}
				&:hover {
					background-color: #29abe2;
					color: #fff;
				}
			}
			a.excel-link{
				display: flex;
				align-items: center;
				color: #000;
				transition: 0.3s;
				padding-right: 1rem;
				line-height: 1.3;
				&:before{
					font-family: "Font Awesome 5 Free";
					content: '\f1c3';
					font-weight: 900;
					color: #fff;
					font-size: 25px;
					font-size: 2.5rem;
					background: #22b573;
					display: flex;
					align-items: center;
					padding: 1rem 1.5rem;
					margin: auto 1.5rem auto 0;
				}
				&:hover {
					background-color: #22b573;
					color: #fff;
				}
			}
		}
		h5{
			font-size: 18px;
			font-size: 1.8rem;
			margin-top: 2rem;
			margin-bottom: 1rem;
		}
		li{
			display: inline-block;
			a.pdf-link{
				display: flex;
				align-items: center;
				color: #000;
				background: #EAEAEA;
				margin-right: 2rem;
				transition: 0.3s;
				padding-right: 1rem;
				line-height: 1.3;
				margin-bottom: 0.5rem;
				&:before{
					font-family: "Font Awesome 5 Free";
					content: '\f1c1';
					font-weight: 900;
					color: #fff;
					font-size: 25px;
					font-size: 2.5rem;
					background: #D80C18;
					display: flex;
					align-items: center;
					padding: 1rem 1.5rem;
					margin: auto 1.5rem auto 0;
				}
				&:hover {
					background-color: #D80C18;
					color: #fff;
				}
			}
		}
	}
}
//内容（article）------ここまで
//footer
p#page-top{
	margin: 0;
	display: block;
	position: relative;
	a{
		content: "";
		position: absolute;
		display: inline-block;
		bottom: 0;
		right: 0;
		height: 150px;
		width: 220px;
		overflow: hidden;
		background: url("../img/page-top.svg"), url("../img/page-top2.svg");
		background-repeat: no-repeat,no-repeat;
		background-size: contain,contain;
		background-position: center center,center center;
		transition: 0.5s;
		@include xs {
			height: 120px;
			width: 180px;
		}
		&:hover{
			background: url("../img/page-top.svg"), url("../img/page-top2.svg");
			background-repeat: no-repeat,no-repeat;
			background-size: contain,contain;
			background-position: center center,center bottom -10px;
		}
	}
}
footer{
	border-top: 5px solid $color-main;
	.footer-title{
		display: flex;
		align-items: center;
		margin-top: 2rem;
		@include sm {
			display: block;
			margin: auto;
			text-align: center;
		}
		a{
			display: flex;
			align-items: center;
			padding-right: 3rem;
			@include lg {
				padding-right: 2rem;
			}
			@include sm {
				display: table;
				margin: auto;
				padding-top: 1.5rem;
				padding-right: 0rem;
			}
			img{
				display: inline-block;
				padding-right: 0.5rem;
				@include lg {
					width: 23%;
				}
				@include sm {
					display: table-cell;
					width: auto;
				}
			}
			p{
				color: #0068B7;
				font-size: 23px;
				font-size: 2.3rem;
				line-height: 3rem;
				@include sm {
					display: table-cell;
					text-align: left;
					vertical-align: middle;
				}
				span{
					font-size: 30px;
					font-size: 3rem;
					font-weight: bold;
					@include xs {
						font-size: 25px;
						font-size: 2.5rem;
					}
				}
			}
		}
		a + div{
			p{
				font-size: 15px;
				font-size: 1.5rem;
				line-height: 2rem;
				margin-bottom: 0.5rem;
			}
			p + p{
				font-size: 19px;
				font-size: 1.9rem;
			}
		}
	}
	table{
		margin: 2rem 0;
		width: 100%;
		tr{
			border-top: 1px solid #B2B2B2;
			font-size: 1.4rem;
			font-size: 14px;
			@include xs {
				font-size: 16px;
				font-size: 1.6rem;
			}
			th{
				font-weight: normal;
				@include xs {
					display: block;
					padding-top: 0.5rem;
				}
			}
			td{
				line-height: 2rem;
				padding: 1rem 0.5rem;
				@include xs {
					display: block;
					line-height: normal;
					padding: 0.2rem;
				}
				a{
					text-align: center;
					display: block;
					padding: 1rem;
					border-radius: 0.5rem;
					border: 1px solid $color-main;
					color: #fff!important;
					font-weight: bold;
					background: $color-main;
					@include md {
						padding: 0.5rem;
					}
					@include sm {
						padding: 1.5rem 1rem;
					}
					@include xs {
						padding: 0.5rem;
					}
					&:after {
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						content: "\f35d";
						padding-left: 1rem;
					}
					&:hover{
						background: #fff;
						color: $color-main!important;
						border: 1px solid $color-main;
					}
				}
			}
			td:last-child{
				width: 15%;
				@include md {
					width: 12%;
				}
				@include sm {
					width: 17%;
				}
				@include xs {
					width: auto;
					display: block;
				}
			}
		}
		tr:last-child{
			border-bottom: 1px solid #B2B2B2;
		}
	}
	div.logo{
		border: 1px solid #B2B2B2;
		width: 30%;
//		margin: auto;
//		text-align: center;
		margin-bottom: 2rem;
		@include xs {
			width: 50%;
			margin: auto;
			text-align: center;
			margin-bottom: 2rem;
		}
	}
}
//footer------ここまで