@charset "utf-8";

/* 共通設定(リセット)
--------------------------------------------------------------------------------------------------------------------*/
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,div,p,dl,dt,dd,form,input,textarea,table,tr,th,td,object,iframe,
header,section,figure,figcaption,aside,footer {
	margin: 0;
	padding: 0;
	border: none;
}
img {
	line-height: 0;/* for IE */
	vertical-align: middle;
	border: none;
}
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}



/* 共通設定
--------------------------------------------------------------------------------------------------------------------*/
html {
	height: 100%;
	overflow-y: scroll;
}
body {
	height: 100%;
	color: #000000;
	font-size: 87.5%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
	background: #ffffff;
}
a { transition: all 0.2s ease; }
a:link    { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:active  { color: #000000; text-decoration: none; }
a:hover   { color: #000000; text-decoration: none; opacity: 0.4; }


/* 共通部分
-------------------------------------------------*/
#loader-bg {
	width: 100%;
	height: 100%;
	background: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}
#wrapper {
	margin: 0 auto;
	width: 318px;
	min-width: 318px;
	height: 100vh;
	text-align: center;
	overflow: visible;
	position: relative;
}
header {
	padding: 42px 0 0;
	height: 16vh;
	box-sizing: border-box;
}
header h1,
header h2 {
	line-height: 0;
}
header h1 img {
	width: 186px;
	height: auto;
}
header h2 img {
	height: auto;
}
header h2 img.kushima,
header h2 img.suzuki {
	width: 105px;
}
header h2 img.slash {
	width: 7px;
}
.pc-contents { display: block; }
.sp-contents { display: none; }

#pc_links {
	height: 74vh;
	box-sizing: border-box;
	display: flex; /* 上下中央 */
	justify-content: center;
	align-items: center;
}
#pc_links p {
	margin: 0 0 59px;
}
#pc_links p a img{
	width: 100%;
	height: auto;
}
#pc_outLinks {
	margin: 0 auto;
	width: 239px;
	height: 8.35vh;
	min-height: 61px;
}
#pc_outLinks a img {
	width: 20%;
	height: auto;
}
footer {
	font-size: 12px;
	width: 100%;
	position: fixed;
	bottom: 15px; left: 0;
}


@media screen and (max-width: 959px) { /* 960px以下 タブレット、スマホ想定 */
	.pc-contents { display: none; }
	.sp-contents { display: block; }
	#wrapper {
		width: 100%;
		height: auto;
	}
	header h1 img {
		width: 36%;
	}
	header h2 img {
		height: auto;
	}
	header h2 img.kushima,
	header h2 img.suzuki {
		width: 20.4%;
	}
	header h2 img.slash {
		width: 1.33%;
	}
	#main {
		margin: 0 auto;
		width: 83%;
		height: 68vh;
		overflow: hidden;
	}
	#links,
	#outLinks {
		padding: 10vh 0 0;
	}
	#links p,
	#outLinks p {
		margin: 0 0 8vh;
	}
	#links p img,
	#outLinks p img {
		width: 100%;
		height: auto;
	}
	#outLinks p a img {
		width: 20%;
		height: auto;
		display: inline;
	}
	.slick-initialized .slick-slide {
		margin: 0 5.3% 0;
		box-sizing: border-box;
	}
	.slick-dots {
		bottom: 30px;
	}
	.slick-dots li {
		margin: 0;
	}
	.slick-dots li button {
		padding: 0;
	}
	.slick-dots li button::before {
		font-size: 16px;
	}
	.slick-dots li,
	.slick-dots li button,
	.slick-dots li button::before {
		width: 11px;
		height: 11px;
	}
	footer {
		padding: 10px 0;
		font-size: 9px;
		min-height: auto;
	}
	/* ABOUT ----------------------------------------*/
	#header {
		transition: all 0.2s ease;
	}
	#header:hover {
		opacity: 0.4;
		cursor: pointer;
	}
	#header a:hover {
		opacity: 1;
	}
	#about {
		padding: 0 10.6%;
		height: 68vh;
		display: flex; /* 上下中央 */
		justify-content: center;
		align-items: center;
	}
	#about p {
		margin: 0 0 12.14vh;
	}
	#about p img {
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 320px) { /* 表示領域 幅320px以下 スマホ想定 */
	header {
		padding: 20px 0 0;
		height: 14vh;
	}
	/* ABOUT ----------------------------------------*/
	#about p {
		margin: 0 0 10vh;
	}
}

@media screen and (max-height: 650px) { /* 表示領域 高さ650px以下 */
	header,
	footer {
		height: auto !important;
		position: relative;
	}
	#main {
		height: auto;
	}
	#pc_links {
		padding: 59px 0 0;
		height: auto !important;
	}
	#links,
	#outLinks {
		height: auto;
		min-height: auto;
	}
	.slick-dots {
		margin: 40px 0 0;
		position: relative;
	}
}

@media screen and (max-height: 680px) { /* 表示領域 高さ680px以下 */
	#pc_links {
		height: 71vh;
	}
}

@media screen and (orientation: landscape) { /* スマートフォン 横向き対応 */
	html,body {
		height: auto;
	}
	#main {
		height: auto !important;
		overflow: visible !important;
	}
	#about,
	#about p {
		margin: 0;
		padding: 0;
	}
}