@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: module.css
 * Summary:   モジュール用スタイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    modules
 *     =2    modules for javascript
 *
 * ===============================================================
*/


/** =1
 * ========================================
 * modules
 * ========================================
 */


/**
 * icon
 * ----------------------------------
 */
/*
 * icon
 * ----------------------------------
 */
[class^="icon-"] {
	display: inline-block;
	vertical-align: middle;
}

[class^="icon-"] svg {
	width: 100%;
	height: 100%;
	vertical-align: top;
	stroke-width: 2.5;
}

	/* [ arrow ]
	------------------------------ */
	.icon-arrow {
		width: 20px;
		height: 35px;
	}

/**
 * header
 * ----------------------------------
 */
#header {}
#header .logo {
	letter-spacing: .3em;
	line-height: 1.2;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		#header .logo {
			margin-top: .1em;
			padding: 5px;
			font-size: 19px;
			font-size: 1.9rem;
		}
	}

	/* -- >>> styles for medium & wide layout ----- */
	@media screen and (min-width: 768px) {
		#header {
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-align-items: baseline;
			align-items: baseline;
		}
		#header .logo {
			padding-right: 10px;
			padding-left: 10px;
			font-size: 23px;
			font-size: 2.3rem;
		}
	}
	
	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) and (max-width: 1199px) {
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 1200px) {
	}


/**
 * nav
 * ----------------------------------
 */
#nav {}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		#nav {
			background-color: #fff;
			background-color: rgba(255,255,255,.9);
			font-size: 0;
			letter-spacing: -.4em;
			word-spacing: -.4em;
			text-align: center;
		}
		#nav::before {
			display: inline-block;
			width: 0;
			height: 100%;
			vertical-align: middle;
			content: "";
		}
		#nav .navInner {
			display: inline-block;
			font-size: 1.4rem;
			letter-spacing: 0;
			word-spacing: 0;
			text-align: center;
			vertical-align: middle;
		}
	}

	/* -- >>> styles for medium & wide layout ----- */
	@media screen and (min-width: 768px) {
		#nav .navInner {
			margin-right: -1.07em;
		}
	}
	
	/* [ navList ]
	------------------------------ */
	#nav .navList {
		line-height: 1.4;
	}
	#nav .navList .itemNav a {
		display: block;
		letter-spacing: .2em;
	}
	
		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
			#nav .navList .itemNav + .itemNav {
				margin-top: 50px;
			}
			#nav .navList .itemNav a {
				font-size: 2.0rem;
			}
		}
	
		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
			#nav .navList {
				font-size: 0;
				letter-spacing: -.4em;
				word-spacing: -.4em;
			}
			#nav .navList .itemNav {
				display: inline-block;
				font-size: 14px;
				font-size: 1.4rem;
				letter-spacing: 0;
				word-spacing: 0;
			}
			#nav .navList .itemNav + .itemNav {
				margin-left: .25em;
			}
			#nav .navList .itemNav a {
				padding: .35em .8em .25em 1.0em;
				font-size: 17px;
				font-size: 1.7rem;
			}
		}
	
		/* navListSub */
		#nav .navListSub {
			text-align: center;
		}
		#nav .navListSub .navListSubItem a {
			display: block;
			padding: .45em 0 .45em .2em;
			background-color: #464646;
			color: #fff;
		}
			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 767px) {
				#nav .navListSub .navListSubContent {
					max-width: 255px;
					margin-top: 25px;
					margin-right: auto;
					margin-left: auto;
					font-size: 0;
					letter-spacing: -.4em;
					word-spacing: -.4em;
				}
				#nav .navListSub .navListSubItem {
					display: inline-block;
					width: 49%;
					width: -webkit-calc( 250/510 * 100% );
					width: calc( 250/510 * 100% );
					margin-left: 2%;
					margin-left: -webkit-calc( 10/510 * 100% );
					margin-left: calc( 10/510 * 100% );
					font-size: 1.4rem;
					letter-spacing: .2em;
					word-spacing: 0;
				}
				#nav .navListSub .navListSubItem:nth-child(2n+1) {
					margin-left: 0;
				}
				#nav .navListSub .navListSubItem a {
					font-size: 1.8rem;
				}
			}
		
			/* -- >>> styles for medium & wide layout ----- */
			@media screen and (min-width: 768px) {
				.no-touch #nav .navListSub:hover .navListSubTitle a,
				#nav .navListSub.js-dropdown.is-open .navListSubTitle a {
					/* background-color: #000;
					color: #fff; */
					color: #999;
				}
				#nav .navListSub .navListSubItem + .navListSubItem {
					margin-top: 2px;
				}
				#nav .navListSub .navListSubItem a {
					font-size: 15px;
					font-size: 1.5rem;
				}
				.no-touch #nav .navListSub .navListSubItem a:hover {
					color: #aaa;
				}
			}


/* [ navHandler ]
------------------------------ */
.navHandler {
	display: none;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		.navHandler {
			display: block;
			position: absolute;
			top: 50%;
			right: 5%;
			z-index: 101;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
			margin-right: 5px;
			margin-left: 5px;
		}
		.navHandler a {
			display: block;
			overflow: hidden;
			position: relative;
			width: 25px;
			height: 16px;
			text-indent: 100%;
			white-space: nowrap;
		}
		.navHandler a::before,
		.navHandler a::after {
			display: block;
			position: absolute;
			right: 0;
			left: 0;
			height: 2px;
			margin-top: -1px;
			background-color: #000;
			content: "";
		}
		.navHandler a::before {
			top: 50%;
		}
		.navHandler a::after {
			top: 1px;
			-webkit-box-shadow: 0 14px 0 #000;
			box-shadow: 0 14px 0 #000;
			-webkit-transition: all .5s ease;
			transition: all .5s ease;
		}
		.is-navOpen .navHandler a::after {
			opacity: 0;
			top: 50%;
			-webkit-box-shadow: 0 0 0 #000;
			box-shadow: 0 0 0 #000;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) and (max-width: 1199px) {
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 1200px) {
	}


/*
 * iframe
 * ----------------------------------
 */

.iframeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}



/*
 * pagetop
 * ----------------------------------
 */

.pagetop {
	display: none;
	position: fixed;
	right: 40px;
	bottom: 55px;
	z-index: 10;
}

.pagetop a {
	display: block;
	width: 20px;
	height: 35px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		.pagetop {
			right: 20px;
			bottom: 20px;
		}
	
		.pagetop a {
			-webkit-transform: scale(.7);
			transform: scale(.7);
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) and (max-width: 1199px) {
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 1200px) {
	}


/** =2
 * ========================================
 * modules for javascript
 * ========================================
 */

/* [ dropdown ]
------------------------------ */
.js-dropdown {}
	
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		.js-dropdownContent {
			display: block !important;
		}
		.js-dropdownContent .js-dropdownItem {
			opacity: 1 !important;
		}
	}

	/* -- >>> styles for medium & wide layout ----- */
	@media screen and (min-width: 768px) {
		.js-dropdown {
			position: relative;
		}
		.js-dropdownTrigger {
			position: relative;
		}
		/* .js-dropdownTrigger a {
			cursor: default;
		} */
		.js-dropdown.is-open .js-dropdownTrigger {
			z-index: 12;
		}
		.js-dropdownContent {
			display: none;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			z-index: 11;
			margin-top: 2px;
			padding-top: 2.35em;
		}
	}


/* [ slider (slick.js) ]
------------------------------ */
.slick-slider {
	position: relative;
}
.slick-slider .slick-dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px;
	font-size: 0;
	letter-spacing: -.4em;
	word-spacing: -.4em;
	text-align: center;
	line-height: 2px;
}
.slick-slider .slick-dots > li {
	display: inline-block;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: -.4em;
	word-spacing: -.4em;
	line-height: 2px;
	vertical-align: top;
}
/* .slick-slider .slick-dots > li + li {
	margin-left: 5px;
} */
.slick-slider .slick-dots > li button {
	overflow: hidden;
	/* width: 30px;
	height: 2px; */
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background-color: #aaa;
	text-indent: 100%;
	white-space: nowrap;
	outline: none;
	-webkit-transition: background-color .5s ease;
	transition: background-color .5s ease;
	line-height: 2px;
}
.slick-slider .slick-dots > li.slick-active button {
	background-color: #fff;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
	}

	/* -- >>> styles for medium & wide layout ----- */
	@media screen and (min-width: 768px) {
	}