@charset "UTF-8";
/*--------------------------------------------------------------
# ビューポイントごと表示非表示
-------------------------------------------------------------- */
.off1200,
.off1170,
.off1100,
.off991,
.off850,
.off767,
.off640,
.off480,
.off375,
.off360,
.off320 {
		display: block !important;
}

.on1200,
.on1170,
.on1100,
.on991,
.on850,
.on767,
.on640,
.on480,
.on375,
.on360,
.on320 {
		display: none !important;
}

@media (max-width: 1200px) {
		.off1200 {
				display: none !important;
		}
		.on1200 {
				display: block !important;
		}
}

@media (max-width: 1170px) {
		.off1170 {
				display: none !important;
		}
		.on1170 {
				display: block !important;
		}
}

@media (max-width: 1100px) {
		.off1100 {
				display: none !important;
		}
		.on1100 {
				display: block !important;
		}
}

@media (max-width: 991px) {
		.off991 {
				display: none !important;
		}
		.on991 {
				display: block !important;
		}
}

@media (max-width: 850px) {
		.off850 {
				display: none !important;
		}
		.on850 {
				display: block !important;
		}
}

@media (max-width: 767px) {
		.off767 {
				display: none !important;
		}
		.on767 {
				display: block !important;
		}
}

@media (max-width: 640px) {
		.off640 {
				display: none !important;
		}
		.on640 {
				display: block !important;
		}
}

@media (max-width: 480px) {
		.off480 {
				display: none !important;
		}
		.on480 {
				display: block !important;
		}
}

@media (max-width: 375px) {
		.off375 {
				display: none !important;
		}
		.on375 {
				display: block !important;
		}
}

@media (max-width: 360px) {
		.off360 {
				display: none !important;
		}
		.on360 {
				display: block !important;
		}
}

@media (max-width: 320px) {
		.off320 {
				display: none !important;
		}
		.on320 {
				display: block !important;
		}
}

/*--------------------------------------------------------------
# 設定
--------------------------------------------------------------*/
* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
}

html {
		overflow-y: scroll;
		line-height: 1.6;
		-webkit-text-size-adjust: 100%;
		font-size: 10px;
		font-size: 62.5%;
		margin-top: 1px;
		background: #202f54;
}

html.active {
		overflow: hidden;
}

body {
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-o-text-size-adjust: 100%;
		text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.6;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 300;
		margin-bottom: 0 !important;
		letter-spacing: 1px;
}

@media (max-width: 480px) {
		body {
				font-size: 14px;
				font-size: 1.4rem;
				line-height: 1.4;
		}
}

body {
		overflow: hidden;
		animation-name: fadein;
		animation-duration: 1s;
		animation-iteration-count: 1;
		background: #202f54;
}

@keyframes fadein {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}

@-webkit-keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}

h1, h2, h3, h4, h5, h6 {
		font-family: 'Charis SIL', serif;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
		font-weight: 100;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dt, dd, li,
table, td, th,
address,
blockquote, form, fieldset, legend, div, hr, pre {
		margin: 0;
		padding: 0;
		font-style: normal;
		font-size: 100%;
		list-style: none;
}

img,
object,
embed {
		border: 0;
		vertical-align: top;
		outline: none;
		max-width: 100%;
		height: auto;
}

object:focus {
		outline: none;
}

embed:focus {
		outline: none;
}

input[type="button"],
input[type="text"],
input[type="submit"] {
		-webkit-appearance: none;
}

button {
		background-color: transparent;
		border: 0;
		cursor: pointer;
		outline: none;
		padding: 0;
		appearance: none;
}

::-webkit-input-placeholder {
		color: #ccc;
}

::-moz-placeholder {
		color: #ccc;
}

:-moz-placeholder {
		color: #ccc;
}

:-ms-input-placeholder {
		color: #ccc;
}

a {
		color: #333;
		outline: none;
		text-decoration: none;
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
}

@media (hover: hover) {
		a:hover {
				color: #333;
		}
}

@media (hover: none) {
		a:active {
				color: #333;
		}
}

a:visited {
		color: #333;
}

a:focus {
		outline: none;
}

img {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		vertical-align: top;
}

b, strong {
		font-weight: 800;
}

div,
ul,
section,
article {
		width: auto;
		zoom: 1;
}

aside,
li,
dd,
ul,
section,
article {
		zoom: 1;
}

/*画面遷移アニメーション*/
#splash,
.splashbg1,
.splashbg2 {
		display: none;
}

/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/
#masthead {
		/*トップ以外のヘッダー*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 2;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
		background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
		background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
		background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#80000000',GradientType=0 );
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
}

#masthead * {
		transition-duration: 0.2s;
}

#masthead .header-inner {
		width: 100%;
		max-width: 123rem;
		padding: 1rem 1.5rem;
		margin: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: relative;
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
}

@media (max-width: 1300px) {
		#masthead .header-inner {
				max-width: 100%;
		}
}

@media (max-width: 991px) {
		#masthead .header-inner {
				padding: 1rem;
		}
}

#masthead .header-inner .site-branding {
		padding: 1rem;
}

#masthead .header-inner .site-branding a img {
		width: 35rem;
		height: auto;
}

@media (hover: hover) {
		#masthead .header-inner .site-branding a:hover {
				opacity: 0.8;
		}
}

@media (hover: none) {
		#masthead .header-inner .site-branding a:active {
				opacity: 0.8;
		}
}

#masthead.scrollUp .header-inner .site-branding a img {
		width: 25rem;
}

/*--------------------------------------------------------------
# コンテンツ
--------------------------------------------------------------*/
section {
		background: #dfdfe0;
		position: relative;
}

section .section-inner {
		width: 100%;
		max-width: 123rem;
		padding: 10rem 1.5rem;
		margin: auto;
}

section .section-inner .section-head h2 {
		text-align: center;
		font-size: 5rem;
		position: relative;
		margin-bottom: 5rem;
		color: #515151;
		letter-spacing: 2px;
}

@media (max-width: 767px) {
		section .section-inner .section-head h2 {
				font-size: 4.5rem;
		}
}

@media (max-width: 640px) {
		section .section-inner .section-head h2 {
				font-size: 4rem;
		}
}

@media (max-width: 480px) {
		section .section-inner .section-head h2 {
				font-size: 3.5rem;
		}
}

section .section-inner .section-head h2::after {
		position: absolute;
		width: 10rem;
		height: 1px;
		background: #000;
		content: "";
		bottom: -10px;
		left: 0;
		right: 0;
		margin: auto;
}

section.blog .section-inner {
		padding: 0 1.5rem;
}

/*--------------------------------------------------------------
# トップへ戻る
--------------------------------------------------------------*/
#page-top {
		display: none;
		position: fixed;
		bottom: 5rem;
		right: 0;
		z-index: 1000;
}

#page-top a {
		display: block;
		padding: 3.5rem 3rem;
		position: relative;
}

#page-top a::before {
		content: "";
		width: 1px;
		height: 85%;
		position: absolute;
		background-color: #888;
		transition: all .2s ease;
		bottom: 0;
}

#page-top a::after {
		content: "";
		width: 1px;
		position: absolute;
		background-color: #888;
		height: 42%;
		left: 4rem;
		top: 8%;
		transform: rotate(135deg);
		transition: all .2s ease;
}

@media (hover: hover) {
		#page-top a:hover::before {
				height: 100%;
		}
		#page-top a:hover::after {
				left: 4rem;
				top: -0.5rem;
		}
}

@media (hover: none) {
		#page-top a:active::before {
				height: 100%;
		}
		#page-top a:active::after {
				left: 4rem;
				top: -0.5rem;
		}
}

/*--------------------------------------------------------------
# base setting｜footerを一番下に固定
--------------------------------------------------------------*/
#page {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		min-height: 100vh;
		background: #dfdfe0;
}

#colophon {
		margin-top: auto;
		padding-bottom: 0;
		background: #1F2F54;
		padding: 5rem;
		text-align: right;
		display: flex;
		justify-content: space-between;
		align-items: center;
}

#colophon .facebook-link {
		width: 5rem;
}

#colophon .facebook-link img {
		width: 100%;
		height: auto;
}

#colophon p.copy {
		color: #fff;
}

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

# base setting｜move コンテンツに動きをつける

-------------------------------------------------------------- */
.off {
		opacity: 0;
		transform: translate(0, 0);
		transition: 0.8s all ease 0s;
}

.off.up {
		opacity: 0;
		transform: translate(0, 45px);
		transition: 0.8s all ease 0s;
}

.off.up1 {
		opacity: 0;
		transform: translate(0, 45px);
		transition: 1s all ease 0s;
		transition-delay: 0s;
}

.off.up2 {
		opacity: 0;
		transform: translate(0, 45px);
		transition: 1.2s all ease 0s;
		transition-delay: 0.2s;
}

.off.up3 {
		opacity: 0;
		transform: translate(0, 45px);
		transition: 1.4s all ease 0s;
		transition-delay: 0.4s;
}

.off.down {
		opacity: 0;
		transform: translate(0, -45px);
		transition: 0.8s all ease 0s;
}

.off.left {
		opacity: 0;
		transform: translate(-45px, 0);
		transition: 0.8s all ease 0s;
}

.off.right {
		opacity: 0;
		transform: translate(45px, 0);
		transition: 0.8s all ease 0s;
}

.off.on {
		opacity: 1;
		transform: translate(0, 0);
}