@charset "UTF-8";
/*@import url(https://fonts.googleapis.com/css?family=Abel);*/

html {
	font-size: 62.5%;
	box-sizing: border-box;
}
body {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.6;
	letter-spacing: .1em;
	color: #191716;
	background-color: #fff;
	box-sizing: border-box;
}
h3 {
	font-size: 18px;
	font-weight: bold;
}
strong {
	font-weight: bold;
}
a {
	text-decoration: none;
	color: #0f949b;
	box-sizing: border-box;
}
a:visited, a:hover {
	color: #0f949b;
}
a:active {
	color: #16d6e0;
}
a:hover {
	text-decoration: underline;
}
.fw_bold {
	font-weight: bold;
}


.loading.is-active {
	opacity: 0;
	visibility: hidden;
  }

.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}

.is-layout-flex {
	display: flex;
}

.is-layout-flow {
	margin: 0 0 0 40px;
}

@media screen and (max-width: 960px) {
	.is-layout-flex {
		display: block;
	}

	.is-layout-flow {
		margin: 0;
	}
	
}

/* mediaquery
------------------------------------------------------------*/

/* align
------------------------------------------------------------*/

h2.text-center, div.text-center {
	margin: 110px auto 70px;
	text-align: center;
	font-weight: bold;
}

/* layout
------------------------------------------------------------*/

img.block-center, section div.container, #skills i {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
/* font
------------------------------------------------------------*/

/*
.abel, section h2, #skills h3, #works .works-box a .works-box-inner .button-readmore {
	font-family: 'Abel', sans-serif;
}
*/

/*
.uppercase, section h2, #skills h3, #works .works-box a .works-box-inner .button-readmore {
  text-transform: uppercase;
}
*/


.pc { display: block; }
.sp { display: none; }

@media screen and (max-width: 480px) {
  .pc { display: none; }
  .sp { display: block; }
}
@media screen and (min-width: 480px) and (max-width: 600px) {
  .pc { display: none; }
  .sp { display: block; }
}

/* loading
------------------------------------------------------------*/
.norotate {
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	background: url(../img/sampleimage.png) center / cover no-repeat;
	margin: auto;
	z-index: 9999999;
}

/* loading
------------------------------------------------------------*/

#loading-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #191816;
	z-index: 9999;
}
#loading-text {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #999;
	width: 100px;
	height: 30px;
	margin: -7px 0 0 -45px;
	text-align: center;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 20px;
}
#loading-content {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 170px;
	height: 170px;
	margin: -85px 0 0 -85px;
	border: 3px solid #F00;
}
#loading-content:after {
	content: "";
	position: absolute;
	border: 3px solid #0F0;
	left: 15px;
	right: 15px;
	top: 15px;
	bottom: 15px;
}
#loading-content:before {
	content: "";
	position: absolute;
	border: 3px solid #00F;
	left: 5px;
	right: 5px;
	top: 5px;
	bottom: 5px;
}
#loading-content {
	border: 3px solid transparent;
	border-top-color: #4D658D;
	border-bottom-color: #4D658D;
	border-radius: 50%;
	-webkit-animation: loader 2s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
	animation: loader 2s linear infinite;
}
#loading-content:before {
	border: 3px solid transparent;
	border-top-color: #D4CC6A;
	border-bottom-color: #D4CC6A;
	border-radius: 50%;
	-webkit-animation: loader 3s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
	animation: loader 3s linear infinite;
}
#loading-content:after {
	border: 3px solid transparent;
	border-top-color: #84417C;
	border-bottom-color: #84417C;
	border-radius: 50%;
	-webkit-animation: loader 1.5s linear infinite;
	animation: loader 1.5s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
}
@-webkit-keyframes loaders {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
#content-wrapper {
	color: #FFF;
	position: fixed;
	left: 0;
	top: 20px;
	width: 100%;
	height: 100%;
}
#header {
	width: 800px;
	margin: 0 auto;
	text-align: center;
	height: 100px;
	background-color: #666;
}
#content {
	width: 800px;
	height: 1000px;
	margin: 0 auto;
	text-align: center;
	background-color: #888;
}

/* title
------------------------------------------------------------*/
.subtitle-fast {
	font-size: 24px;
	font-weight: bold;
	padding: .5em 0 .5em .75em;
	border-top: 1px solid #191816;
	border-bottom: 1px solid #191816;
}
.subtitle-sec {
	font-size: 20px;
	letter-spacing: 0px;
	font-weight: normal;
	color: #191816;
	padding: .5em 0 .5em .75em;
	border-top: 1px solid #191816;
	border-bottom: 1px solid #191816;
}
.subtitle-thrd {
  border-bottom: 4px solid #d5c7ac;
  font-size: 24px;
  padding: 5px 15px 5px 5px;
  margin-bottom: 5px;
}


/* Header
------------------------------------------------------------*/

.header_container {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
	text-align: center;
	background-color: #191816;
}
@media screen and (max-width: 480px) {
	.header_container img {
		/* ===== low480px ===== */
		width: 30%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.header_container img {
		/* ===== 480px〜600px ===== */
		width: 30%;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.header_container img {
		/* ===== 600px〜960px ===== */
		width: 150px;
	}
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
	.header_container img {
		/* ===== 960px〜1280px ===== */
		width: 150px;
	}
}
@media screen and (min-width: 1280px) {
	.header_container img {
		/* ===== over1280px ===== */
		width: 150px;
	}
}
.button-contact {
	font-size: 20px;
	line-height: 0;
	display: block;
	width: 20px;
	height: 20px;
	margin: 20px 20px 0 0;
	padding: 10px;
	text-align: center;
	color: #4c4c4c;
	border: 2px solid #4c4c4c;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.button-contact:visited {
	color: #4c4c4c;
}
.button-contact:hover, .button-contact:active {
	color: #fff;
	background-color: #4c4c4c;
}
.profile {
	width: 58rem;
	margin: 0 auto;
	padding: 20rem 0;
	position: relative;
	display: flex;
	align-items: center;
}
@media screen and (max-width: 480px) {
	.profile {
		/* ===== low480px ===== */
		width: 100%;
		padding: 5vh 0 10vh;
		display: block;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.profile {
		/* ===== 480px〜600px ===== */
		width: 100%;
		padding: 5vh 0 10vh;
		display: block;
	}
}
.box {
	max-width: 70vw;
	padding: 30px;
	margin: 0 auto;
	position: relative;
	top: 50%;
	font-size: 30px;
	line-height: 1.5;
	transform: translateY(-50%);
	perspective: 400px;
}
.source {
	color: skyblue;
	margin: 0 auto;
}
.site-title {
	font-size: 18px;
	font-size: 1.8rem;
	line-height: normal;
}
.site-title span {
	font-size: 42px;
	font-size: 4.2rem;
	display: block;
	color: #99a05d;
}
.profile-icon {
	margin: 30px auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 10px solid rgba(10, 10, 10, 0.09);
}
.profile p {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.56em;
	display: block;
	margin: 0;
}
@media screen and (max-width: 480px) {
	.profile p {
		/* ===== low480px ===== */
		width: 90%;
		margin: 0 auto;
		font-size: 1em;
		line-height: 1.56rem;
		display: block;
		white-space: pre-line;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.profile p {
		/* ===== 480px〜600px ===== */
		width: 90%;
		margin: 0 auto;
		font-size: 1em;
		line-height: 1.56rem;
		display: block;
		white-space: pre-line;
	}
}
ul.back_text {
	margin: 0;
	list-style: none;
	font-size: 4vw;
	position: absolute;
	transform-style: preserve-3d;
	animation: three-dimensions-circle 30s linear infinite;
}
ul.back_text li {
	position: absolute;
	top: 50%;
	left: 50%;
}
ul.back_text li:nth-child(1) {
	transform: translate(-50%, -50%) rotate(0deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(2) {
	transform: translate(-50%, -50%) rotate(30deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(3) {
	transform: translate(-50%, -50%) rotate(60deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(4) {
	transform: translate(-50%, -50%) rotate(90deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(5) {
	transform: translate(-50%, -50%) rotate(120deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(6) {
	transform: translate(-50%, -50%) rotate(150deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(7) {
	transform: translate(-50%, -50%) rotate(180deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(8) {
	transform: translate(-50%, -50%) rotate(210deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(9) {
	transform: translate(-50%, -50%) rotate(240deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(10) {
	transform: translate(-50%, -50%) rotate(270deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(11) {
	transform: translate(-50%, -50%) rotate(300deg) translateY(-260px) rotateX(90deg);
}
ul.back_text li:nth-child(12) {
	transform: translate(-50%, -50%) rotate(330deg) translateY(-260px) rotateX(90deg);
}
@keyframes three-dimensions-circle {
	0% {
		transform: rotateX(-100deg) rotate(0);
	}
	100% {
		transform: rotateX(-100deg) rotate(-360deg);
	}
}
/* main
------------------------------------------------------------*/

.sep {
	border: 0;
	width: 3em;
	height: 1px;
	margin: 1em 0;
	background-color: rgba(255, 255, 255, 0.4);
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.sep {
		/* ===== 600px〜960px ===== */
		display: none;
	}
}
.mast {
	position: relative;
	display: flex;
	align-items: center;
	color: #4c4c4c;
	background-color: #111;
}
.mast:after {
	content: '';
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(17, 17, 17, 0.9);
}
.mast>header {
	z-index: 2;
	position: relative;
}
.mast__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-size: cover;
	background-position: 50%;
}
.mast__header {
	position: absolute;
	top: 45rem;
	height: 200px;
	padding: 10rem 5rem;
}
@media screen and (max-width: 480px) {
	.mast__header {
		/* ===== low480px ===== */
		width: 100%;
		padding: 0;
		position: static;
		bottom: 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.mast__header {
		/* ===== 480px〜600px ===== */
		width: 100%;
		padding: 0;
		position: static;
		bottom: 0;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.mast__header {
		/* ===== 600px〜960px ===== */
		height: 15vw;
		padding: 0 10vw;
		top: 65rem;
	}
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
	.mast__header {
		/* ===== 960px〜1280px ===== */
		bottom: 0;
	}
}
.mast__title {
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}
@media screen and (max-width: 480px) {
	.mast__title {
		/* ===== low480px ===== */
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.mast__title {
		/* ===== 480px〜600px ===== */
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
}
.mast__title span {
	animation: letter-glow 0.7s 0s ease both;
}
.mast__title span:nth-child(1) {
	animation-delay: 0.05s;
}
.mast__title span:nth-child(2) {
	animation-delay: 0.1s;
}
.mast__title span:nth-child(3) {
	animation-delay: 0.15s;
}
.mast__title span:nth-child(4) {
	animation-delay: 0.2s;
}
.mast__title span:nth-child(5) {
	animation-delay: 0.25s;
}
.mast__title span:nth-child(6) {
	animation-delay: 0.3s;
}
.mast__title span:nth-child(7) {
	animation-delay: 0.35s;
}
.mast__title span:nth-child(8) {
	animation-delay: 0.4s;
}
.mast__title span:nth-child(9) {
	animation-delay: 0.45s;
}
.mast__title span:nth-child(10) {
	animation-delay: 0.5s;
}
.mast__title span:nth-child(11) {
	animation-delay: 0.55s;
}
.mast__title span:nth-child(12) {
	animation-delay: 0.6s;
}
.mast__title span:nth-child(13) {
	animation-delay: 0.65s;
}
.mast__title span:nth-child(14) {
	animation-delay: 0.7s;
}
.mast__title span:nth-child(15) {
	animation-delay: 0.75s;
}
.mast__title span:nth-child(16) {
	animation-delay: 0.8s;
}
.mast__title span:nth-child(17) {
	animation-delay: 0.85s;
}
.mast__title span:nth-child(18) {
	animation-delay: 0.9s;
}
.mast__title span:nth-child(19) {
	animation-delay: 0.95s;
}
.mast__title span:nth-child(20) {
	animation-delay: 1s;
}
.mast__title span:nth-child(21) {
	animation-delay: 1.05s;
}
.mast__title span:nth-child(22) {
	animation-delay: 1.1s;
}
.mast__title span:nth-child(23) {
	animation-delay: 1.15s;
}
.mast__title span:nth-child(24) {
	animation-delay: 1.2s;
}
.mast__title span:nth-child(25) {
	animation-delay: 1.25s;
}
.mast__text {
	font-size: 1em;
	margin: 0 0 0.5em;
	line-height: 1.5;
	white-space: pre-line;
}
@media screen and (max-width: 480px) {
	.mast__text {
		/* ===== low480px ===== */
		width: 90%;
		margin: 0 auto;
		padding-bottom: 10vh;
		white-space: pre-line;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.mast__text {
		/* ===== 480px〜600px ===== */
		width: 90%;
		margin: 0 auto;
		padding-bottom: 10vh;
		white-space: pre-line;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.mast__text {
		/* ===== 600px〜960px ===== */
		white-space: unset;
	}
}
.mast__text span {
	animation: letter-glow 0.7s 0s ease both;
}
.mast__text span:nth-child(1) {
	animation-delay: 0.05s;
}
.mast__text span:nth-child(2) {
	animation-delay: 0.1s;
}
.mast__text span:nth-child(3) {
	animation-delay: 0.15s;
}
.mast__text span:nth-child(4) {
	animation-delay: 0.2s;
}
.mast__text span:nth-child(5) {
	animation-delay: 0.25s;
}
.mast__text span:nth-child(6) {
	animation-delay: 0.3s;
}
.mast__text span:nth-child(7) {
	animation-delay: 0.35s;
}
.mast__text span:nth-child(8) {
	animation-delay: 0.4s;
}
.mast__text span:nth-child(9) {
	animation-delay: 0.45s;
}
.mast__text span:nth-child(10) {
	animation-delay: 0.5s;
}
.mast__text span:nth-child(11) {
	animation-delay: 0.55s;
}
.mast__text span:nth-child(12) {
	animation-delay: 0.6s;
}
.mast__text span:nth-child(13) {
	animation-delay: 0.65s;
}
.mast__text span:nth-child(14) {
	animation-delay: 0.7s;
}
.mast__text span:nth-child(15) {
	animation-delay: 0.75s;
}
.mast__text span:nth-child(16) {
	animation-delay: 0.8s;
}
.mast__text span:nth-child(17) {
	animation-delay: 0.85s;
}
.mast__text span:nth-child(18) {
	animation-delay: 0.9s;
}
.mast__text span:nth-child(19) {
	animation-delay: 0.95s;
}
.mast__text span:nth-child(20) {
	animation-delay: 1s;
}
.mast__text span:nth-child(21) {
	animation-delay: 1.05s;
}
.mast__text span:nth-child(22) {
	animation-delay: 1.1s;
}
.mast__text span:nth-child(23) {
	animation-delay: 1.15s;
}
.mast__text span:nth-child(24) {
	animation-delay: 1.2s;
}
.mast__text span:nth-child(25) {
	animation-delay: 1.25s;
}
.mast__text span:nth-child(26) {
	animation-delay: 1.3s;
}
.mast__text span:nth-child(27) {
	animation-delay: 1.35s;
}
.mast__text span:nth-child(28) {
	animation-delay: 1.4s;
}
.mast__text span:nth-child(29) {
	animation-delay: 1.45s;
}
.mast__text span:nth-child(30) {
	animation-delay: 1.5s;
}
.mast__text span:nth-child(31) {
	animation-delay: 1.55s;
}
.mast__text span:nth-child(32) {
	animation-delay: 1.6s;
}
.mast__text span:nth-child(33) {
	animation-delay: 1.65s;
}
.mast__text span:nth-child(34) {
	animation-delay: 1.7s;
}
.mast__text span:nth-child(35) {
	animation-delay: 1.75s;
}
.mast__text span:nth-child(36) {
	animation-delay: 1.8s;
}
.mast__text span:nth-child(37) {
	animation-delay: 1.85s;
}
.mast__text span:nth-child(38) {
	animation-delay: 1.9s;
}
.mast__text span:nth-child(39) {
	animation-delay: 1.95s;
}
.mast__text span:nth-child(40) {
	animation-delay: 2s;
}
.mast__text span:nth-child(41) {
	animation-delay: 2.05s;
}
.mast__text span:nth-child(42) {
	animation-delay: 2.1s;
}
.mast__text span:nth-child(43) {
	animation-delay: 2.15s;
}
.mast__text span:nth-child(44) {
	animation-delay: 2.2s;
}
.mast__text span:nth-child(45) {
	animation-delay: 2.25s;
}
.mast__text span:nth-child(46) {
	animation-delay: 2.3s;
}
.mast__text span:nth-child(47) {
	animation-delay: 2.35s;
}
.mast__text span:nth-child(48) {
	animation-delay: 2.4s;
}
.mast__text span:nth-child(49) {
	animation-delay: 2.45s;
}
.mast__text span:nth-child(50) {
	animation-delay: 2.5s;
}
.mast__text span:nth-child(51) {
	animation-delay: 2.55s;
}
.mast__text span:nth-child(52) {
	animation-delay: 2.6s;
}
.mast__text span:nth-child(53) {
	animation-delay: 2.65s;
}
.mast__text span:nth-child(54) {
	animation-delay: 2.7s;
}
.mast__text span:nth-child(55) {
	animation-delay: 2.75s;
}
.mast__text span:nth-child(56) {
	animation-delay: 2.8s;
}
.mast__text span:nth-child(57) {
	animation-delay: 2.85s;
}
.mast__text span:nth-child(58) {
	animation-delay: 2.9s;
}
.mast__text span:nth-child(59) {
	animation-delay: 2.95s;
}
.mast__text span:nth-child(60) {
	animation-delay: 3s;
}
.mast__text span:nth-child(61) {
	animation-delay: 3.05s;
}
.mast__text span:nth-child(62) {
	animation-delay: 3.1s;
}
.mast__text span:nth-child(63) {
	animation-delay: 3.15s;
}
.mast__text span:nth-child(64) {
	animation-delay: 3.2s;
}
.mast__text span:nth-child(65) {
	animation-delay: 3.25s;
}
.mast__text span:nth-child(66) {
	animation-delay: 3.3s;
}
.mast__text span:nth-child(67) {
	animation-delay: 3.35s;
}
.mast__text span:nth-child(68) {
	animation-delay: 3.4s;
}
.mast__text span:nth-child(69) {
	animation-delay: 3.45s;
}
.mast__text span:nth-child(70) {
	animation-delay: 3.5s;
}
.mast__text span:nth-child(71) {
	animation-delay: 3.55s;
}
.mast__text span:nth-child(72) {
	animation-delay: 3.6s;
}
.mast__text span:nth-child(73) {
	animation-delay: 3.65s;
}
.mast__text span:nth-child(74) {
	animation-delay: 3.7s;
}
.mast__text span:nth-child(75) {
	animation-delay: 3.75s;
}
.mast__text span:nth-child(76) {
	animation-delay: 3.8s;
}
.mast__text span:nth-child(77) {
	animation-delay: 3.85s;
}
.mast__text span:nth-child(78) {
	animation-delay: 3.9s;
}
.mast__text span:nth-child(79) {
	animation-delay: 3.95s;
}
.mast__text span:nth-child(80) {
	animation-delay: 4s;
}
.mast__text span:nth-child(81) {
	animation-delay: 4.05s;
}
.mast__text span:nth-child(82) {
	animation-delay: 4.1s;
}
.mast__text span:nth-child(83) {
	animation-delay: 4.15s;
}
.mast__text span:nth-child(84) {
	animation-delay: 4.2s;
}
.mast__text span:nth-child(85) {
	animation-delay: 4.25s;
}
.mast__text span:nth-child(86) {
	animation-delay: 4.3s;
}
.mast__text span:nth-child(87) {
	animation-delay: 4.35s;
}
.mast__text span:nth-child(88) {
	animation-delay: 4.4s;
}
.mast__text span:nth-child(89) {
	animation-delay: 4.45s;
}
.mast__text span:nth-child(90) {
	animation-delay: 4.5s;
}
.mast__text span:nth-child(91) {
	animation-delay: 4.55s;
}
.mast__text span:nth-child(92) {
	animation-delay: 4.6s;
}
.mast__text span:nth-child(93) {
	animation-delay: 4.65s;
}
.mast__text span:nth-child(94) {
	animation-delay: 4.7s;
}
.mast__text span:nth-child(95) {
	animation-delay: 4.75s;
}
.mast__text span:nth-child(96) {
	animation-delay: 4.8s;
}
.mast__text span:nth-child(97) {
	animation-delay: 4.85s;
}
.mast__text span:nth-child(98) {
	animation-delay: 4.9s;
}
.mast__text span:nth-child(99) {
	animation-delay: 4.95s;
}
.mast__text span:nth-child(100) {
	animation-delay: 5s;
}
.mast__text span:nth-child(101) {
	animation-delay: 5.05s;
}
.mast__text span:nth-child(102) {
	animation-delay: 5.1s;
}
.mast__text span:nth-child(103) {
	animation-delay: 5.15s;
}
.mast__text span:nth-child(104) {
	animation-delay: 5.2s;
}
.mast__text span:nth-child(105) {
	animation-delay: 5.25s;
}
.mast__text span:nth-child(106) {
	animation-delay: 5.3s;
}
.mast__text span:nth-child(107) {
	animation-delay: 5.35s;
}
.mast__text span:nth-child(108) {
	animation-delay: 5.4s;
}
.mast__text span:nth-child(109) {
	animation-delay: 5.45s;
}
.mast__text span:nth-child(110) {
	animation-delay: 5.5s;
}
.mast__text span:nth-child(111) {
	animation-delay: 5.55s;
}
.mast__text span:nth-child(112) {
	animation-delay: 5.6s;
}
.mast__text span:nth-child(113) {
	animation-delay: 5.65s;
}
.mast__text span:nth-child(114) {
	animation-delay: 5.7s;
}
.mast__text span:nth-child(115) {
	animation-delay: 5.75s;
}
.mast__text span:nth-child(116) {
	animation-delay: 5.8s;
}
.mast__text span:nth-child(117) {
	animation-delay: 5.85s;
}
.mast__text span:nth-child(118) {
	animation-delay: 5.9s;
}
.mast__text span:nth-child(119) {
	animation-delay: 5.95s;
}
.mast__text span:nth-child(120) {
	animation-delay: 6s;
}
.mast__text span:nth-child(121) {
	animation-delay: 6.05s;
}
.mast__text span:nth-child(122) {
	animation-delay: 6.1s;
}
.mast__text span:nth-child(123) {
	animation-delay: 6.15s;
}
.mast__text span:nth-child(124) {
	animation-delay: 6.2s;
}
.mast__text span:nth-child(125) {
	animation-delay: 6.25s;
}
.mast__text span:nth-child(126) {
	animation-delay: 6.3s;
}
.mast__text span:nth-child(127) {
	animation-delay: 6.35s;
}
.mast__text span:nth-child(128) {
	animation-delay: 6.4s;
}
.mast__text span:nth-child(129) {
	animation-delay: 6.45s;
}
.mast__text span:nth-child(130) {
	animation-delay: 6.5s;
}
.mast__text span:nth-child(131) {
	animation-delay: 6.55s;
}
.mast__text span:nth-child(132) {
	animation-delay: 6.6s;
}
.mast__text span:nth-child(133) {
	animation-delay: 6.65s;
}
.mast__text span:nth-child(134) {
	animation-delay: 6.7s;
}
.mast__text span:nth-child(135) {
	animation-delay: 6.75s;
}
.mast__text span:nth-child(136) {
	animation-delay: 6.8s;
}
.mast__text span:nth-child(137) {
	animation-delay: 6.85s;
}
.mast__text span:nth-child(138) {
	animation-delay: 6.9s;
}
.mast__text span:nth-child(139) {
	animation-delay: 6.95s;
}
.mast__text span:nth-child(140) {
	animation-delay: 7s;
}
.mast__text span:nth-child(141) {
	animation-delay: 7.05s;
}
.mast__text span:nth-child(142) {
	animation-delay: 7.1s;
}
.mast__text span:nth-child(143) {
	animation-delay: 7.15s;
}
.mast__text span:nth-child(144) {
	animation-delay: 7.2s;
}
.mast__text span:nth-child(145) {
	animation-delay: 7.25s;
}
.mast__text span:nth-child(146) {
	animation-delay: 7.3s;
}
.mast__text span:nth-child(147) {
	animation-delay: 7.35s;
}
.mast__text span:nth-child(148) {
	animation-delay: 7.4s;
}
.mast__text span:nth-child(149) {
	animation-delay: 7.45s;
}
.mast__text span:nth-child(150) {
	animation-delay: 7.5s;
}
.mast__text span:nth-child(151) {
	animation-delay: 7.55s;
}
.mast__text span:nth-child(152) {
	animation-delay: 7.6s;
}
.mast__text span:nth-child(153) {
	animation-delay: 7.65s;
}
.mast__text span:nth-child(154) {
	animation-delay: 7.7s;
}
.mast__text span:nth-child(155) {
	animation-delay: 7.75s;
}
.mast__text span:nth-child(156) {
	animation-delay: 7.8s;
}
.mast__text span:nth-child(157) {
	animation-delay: 7.85s;
}
.mast__text span:nth-child(158) {
	animation-delay: 7.9s;
}
.mast__text span:nth-child(159) {
	animation-delay: 7.95s;
}
.mast__text span:nth-child(160) {
	animation-delay: 8s;
}
.mast__text span:nth-child(161) {
	animation-delay: 8.05s;
}
.mast__text span:nth-child(162) {
	animation-delay: 8.1s;
}
.mast__text span:nth-child(163) {
	animation-delay: 8.15s;
}
.mast__text span:nth-child(164) {
	animation-delay: 8.2s;
}
.mast__text span:nth-child(165) {
	animation-delay: 8.25s;
}
.mast__text span:nth-child(166) {
	animation-delay: 8.3s;
}
.mast__text span:nth-child(167) {
	animation-delay: 8.35s;
}
.mast__text span:nth-child(168) {
	animation-delay: 8.4s;
}
.mast__text span:nth-child(169) {
	animation-delay: 8.45s;
}
.mast__text span:nth-child(170) {
	animation-delay: 8.5s;
}
.mast__text span:nth-child(171) {
	animation-delay: 8.55s;
}
.mast__text span:nth-child(172) {
	animation-delay: 8.6s;
}
.mast__text span:nth-child(173) {
	animation-delay: 8.65s;
}
.mast__text span:nth-child(174) {
	animation-delay: 8.7s;
}
.mast__text span:nth-child(175) {
	animation-delay: 8.75s;
}
.mast__text span:nth-child(176) {
	animation-delay: 8.8s;
}
.mast__text span:nth-child(177) {
	animation-delay: 8.85s;
}
.mast__text span:nth-child(178) {
	animation-delay: 8.9s;
}
.mast__text span:nth-child(179) {
	animation-delay: 8.95s;
}
.mast__text span:nth-child(180) {
	animation-delay: 9s;
}
.mast__text span:nth-child(181) {
	animation-delay: 9.05s;
}
.mast__text span:nth-child(182) {
	animation-delay: 9.1s;
}
.mast__text span:nth-child(183) {
	animation-delay: 9.15s;
}
.mast__text span:nth-child(184) {
	animation-delay: 9.2s;
}
.mast__text span:nth-child(185) {
	animation-delay: 9.25s;
}
.mast__text span:nth-child(186) {
	animation-delay: 9.3s;
}
.mast__text span:nth-child(187) {
	animation-delay: 9.35s;
}
.mast__text span:nth-child(188) {
	animation-delay: 9.4s;
}
.mast__text span:nth-child(189) {
	animation-delay: 9.45s;
}
.mast__text span:nth-child(190) {
	animation-delay: 9.5s;
}
.mast__text span:nth-child(191) {
	animation-delay: 9.55s;
}
.mast__text span:nth-child(192) {
	animation-delay: 9.6s;
}
.mast__text span:nth-child(193) {
	animation-delay: 9.65s;
}
.mast__text span:nth-child(194) {
	animation-delay: 9.7s;
}
.mast__text span:nth-child(195) {
	animation-delay: 9.75s;
}
.mast__text span:nth-child(196) {
	animation-delay: 9.8s;
}
.mast__text span:nth-child(197) {
	animation-delay: 9.85s;
}
.mast__text span:nth-child(198) {
	animation-delay: 9.9s;
}
.mast__text span:nth-child(199) {
	animation-delay: 9.95s;
}
.mast__text span:nth-child(200) {
	animation-delay: 10s;
}
.mast__text span:nth-child(201) {
	animation-delay: 10.05s;
}
.mast__text span:nth-child(202) {
	animation-delay: 10.1s;
}
.mast__text span:nth-child(203) {
	animation-delay: 10.15s;
}
.mast__text span:nth-child(204) {
	animation-delay: 10.2s;
}
.mast__text span:nth-child(205) {
	animation-delay: 10.25s;
}
.mast__text span:nth-child(206) {
	animation-delay: 10.3s;
}
.mast__text span:nth-child(207) {
	animation-delay: 10.35s;
}
.mast__text span:nth-child(208) {
	animation-delay: 10.4s;
}
.mast__text span:nth-child(209) {
	animation-delay: 10.45s;
}
.mast__text span:nth-child(210) {
	animation-delay: 10.5s;
}
.mast__text span:nth-child(211) {
	animation-delay: 10.55s;
}
.mast__text span:nth-child(212) {
	animation-delay: 10.6s;
}
.mast__text span:nth-child(213) {
	animation-delay: 10.65s;
}
.mast__text span:nth-child(214) {
	animation-delay: 10.7s;
}
.mast__text span:nth-child(215) {
	animation-delay: 10.75s;
}
.mast__text span:nth-child(216) {
	animation-delay: 10.8s;
}
.mast__text span:nth-child(217) {
	animation-delay: 10.85s;
}
.mast__text span:nth-child(218) {
	animation-delay: 10.9s;
}
.mast__text span:nth-child(219) {
	animation-delay: 10.95s;
}
.mast__text span:nth-child(220) {
	animation-delay: 11s;
}
.mast__text span:nth-child(221) {
	animation-delay: 11.05s;
}
.mast__text span:nth-child(222) {
	animation-delay: 11.1s;
}
.mast__text span:nth-child(223) {
	animation-delay: 11.15s;
}
.mast__text span:nth-child(224) {
	animation-delay: 11.2s;
}
.mast__text span:nth-child(225) {
	animation-delay: 11.25s;
}
.mast__text span:nth-child(226) {
	animation-delay: 11.3s;
}
.mast__text span:nth-child(227) {
	animation-delay: 11.35s;
}
.mast__text span:nth-child(228) {
	animation-delay: 11.4s;
}
.mast__text span:nth-child(229) {
	animation-delay: 11.45s;
}
.mast__text span:nth-child(230) {
	animation-delay: 11.5s;
}
.mast__text span:nth-child(231) {
	animation-delay: 11.55s;
}
.mast__text span:nth-child(232) {
	animation-delay: 11.6s;
}
.mast__text span:nth-child(233) {
	animation-delay: 11.65s;
}
.mast__text span:nth-child(234) {
	animation-delay: 11.7s;
}
.mast__text span:nth-child(235) {
	animation-delay: 11.75s;
}
.mast__text span:nth-child(236) {
	animation-delay: 11.8s;
}
.mast__text span:nth-child(237) {
	animation-delay: 11.85s;
}
.mast__text span:nth-child(238) {
	animation-delay: 11.9s;
}
.mast__text span:nth-child(239) {
	animation-delay: 11.95s;
}
.mast__text span:nth-child(240) {
	animation-delay: 12s;
}
.mast__text span:nth-child(241) {
	animation-delay: 12.05s;
}
.mast__text span:nth-child(242) {
	animation-delay: 12.1s;
}
.mast__text span:nth-child(243) {
	animation-delay: 12.15s;
}
.mast__text span:nth-child(244) {
	animation-delay: 12.2s;
}
.mast__text span:nth-child(245) {
	animation-delay: 12.25s;
}
.mast__text span:nth-child(246) {
	animation-delay: 12.3s;
}
.mast__text span:nth-child(247) {
	animation-delay: 12.35s;
}
.mast__text span:nth-child(248) {
	animation-delay: 12.4s;
}
.mast__text span:nth-child(249) {
	animation-delay: 12.45s;
}
.mast__text span:nth-child(250) {
	animation-delay: 12.5s;
}
.mast__text span:nth-child(251) {
	animation-delay: 12.55s;
}
.mast__text span:nth-child(252) {
	animation-delay: 12.6s;
}
.mast__text span:nth-child(253) {
	animation-delay: 12.65s;
}
.mast__text span:nth-child(254) {
	animation-delay: 12.7s;
}
.mast__text span:nth-child(255) {
	animation-delay: 12.75s;
}
.mast__text span:nth-child(256) {
	animation-delay: 12.8s;
}
.mast__text span:nth-child(257) {
	animation-delay: 12.85s;
}
.mast__text span:nth-child(258) {
	animation-delay: 12.9s;
}
.mast__text span:nth-child(259) {
	animation-delay: 12.95s;
}
.mast__text span:nth-child(260) {
	animation-delay: 13s;
}
.mast__text span:nth-child(261) {
	animation-delay: 13.05s;
}
.mast__text span:nth-child(262) {
	animation-delay: 13.1s;
}
.mast__text span:nth-child(263) {
	animation-delay: 13.15s;
}
.mast__text span:nth-child(264) {
	animation-delay: 13.2s;
}
.mast__text span:nth-child(265) {
	animation-delay: 13.25s;
}
.mast__text span:nth-child(266) {
	animation-delay: 13.3s;
}
.mast__text span:nth-child(267) {
	animation-delay: 13.35s;
}
.mast__text span:nth-child(268) {
	animation-delay: 13.4s;
}
.mast__text span:nth-child(269) {
	animation-delay: 13.45s;
}
.mast__text span:nth-child(270) {
	animation-delay: 13.5s;
}
.mast__text span:nth-child(271) {
	animation-delay: 13.55s;
}
.mast__text span:nth-child(272) {
	animation-delay: 13.6s;
}
.mast__text span:nth-child(273) {
	animation-delay: 13.65s;
}
.mast__text span:nth-child(274) {
	animation-delay: 13.7s;
}
.mast__text span:nth-child(275) {
	animation-delay: 13.75s;
}
.mast__text span:nth-child(276) {
	animation-delay: 13.8s;
}
.mast__text span:nth-child(277) {
	animation-delay: 13.85s;
}
.mast__text span:nth-child(278) {
	animation-delay: 13.9s;
}
.mast__text span:nth-child(279) {
	animation-delay: 13.95s;
}
.mast__text span:nth-child(280) {
	animation-delay: 14s;
}
.mast__text span:nth-child(281) {
	animation-delay: 14.05s;
}
.mast__text span:nth-child(282) {
	animation-delay: 14.1s;
}
.mast__text span:nth-child(283) {
	animation-delay: 14.15s;
}
.mast__text span:nth-child(284) {
	animation-delay: 14.2s;
}
.mast__text span:nth-child(285) {
	animation-delay: 14.25s;
}
.mast__text span:nth-child(286) {
	animation-delay: 14.3s;
}
.mast__text span:nth-child(287) {
	animation-delay: 14.35s;
}
.mast__text span:nth-child(288) {
	animation-delay: 14.4s;
}
.mast__text span:nth-child(289) {
	animation-delay: 14.45s;
}
.mast__text span:nth-child(290) {
	animation-delay: 14.5s;
}
.mast__text span:nth-child(291) {
	animation-delay: 14.55s;
}
.mast__text span:nth-child(292) {
	animation-delay: 14.6s;
}
.mast__text span:nth-child(293) {
	animation-delay: 14.65s;
}
.mast__text span:nth-child(294) {
	animation-delay: 14.7s;
}
.mast__text span:nth-child(295) {
	animation-delay: 14.75s;
}
.mast__text span:nth-child(296) {
	animation-delay: 14.8s;
}
.mast__text span:nth-child(297) {
	animation-delay: 14.85s;
}
.mast__text span:nth-child(298) {
	animation-delay: 14.9s;
}
.mast__text span:nth-child(299) {
	animation-delay: 14.95s;
}
.mast__text span:nth-child(300) {
	animation-delay: 15s;
}
.mast__text span:nth-child(301) {
	animation-delay: 15.05s;
}
.mast__text span:nth-child(302) {
	animation-delay: 15.1s;
}
.mast__text span:nth-child(303) {
	animation-delay: 15.15s;
}
.mast__text span:nth-child(304) {
	animation-delay: 15.2s;
}
.mast__text span:nth-child(305) {
	animation-delay: 15.25s;
}
.mast__text span:nth-child(306) {
	animation-delay: 15.3s;
}
.mast__text span:nth-child(307) {
	animation-delay: 15.35s;
}
.mast__text span:nth-child(308) {
	animation-delay: 15.4s;
}
.mast__text span:nth-child(309) {
	animation-delay: 15.45s;
}
.mast__text span:nth-child(310) {
	animation-delay: 15.5s;
}
.mast__text span:nth-child(311) {
	animation-delay: 15.55s;
}
.mast__text span:nth-child(312) {
	animation-delay: 15.6s;
}
.mast__text span:nth-child(313) {
	animation-delay: 15.65s;
}
.mast__text span:nth-child(314) {
	animation-delay: 15.7s;
}
.mast__text span:nth-child(315) {
	animation-delay: 15.75s;
}
.mast__text span:nth-child(316) {
	animation-delay: 15.8s;
}
.mast__text span:nth-child(317) {
	animation-delay: 15.85s;
}
.mast__text span:nth-child(318) {
	animation-delay: 15.9s;
}
.mast__text span:nth-child(319) {
	animation-delay: 15.95s;
}
.mast__text span:nth-child(320) {
	animation-delay: 16s;
}
.mast__text span:nth-child(321) {
	animation-delay: 16.05s;
}
.mast__text span:nth-child(322) {
	animation-delay: 16.1s;
}
.mast__text span:nth-child(323) {
	animation-delay: 16.15s;
}
.mast__text span:nth-child(324) {
	animation-delay: 16.2s;
}
.mast__text span:nth-child(325) {
	animation-delay: 16.25s;
}
.mast__text span:nth-child(326) {
	animation-delay: 16.3s;
}
.mast__text span:nth-child(327) {
	animation-delay: 16.35s;
}
.mast__text span:nth-child(328) {
	animation-delay: 16.4s;
}
.mast__text span:nth-child(329) {
	animation-delay: 16.45s;
}
.mast__text span:nth-child(330) {
	animation-delay: 16.5s;
}
.mast__text span:nth-child(331) {
	animation-delay: 16.55s;
}
.mast__text span:nth-child(332) {
	animation-delay: 16.6s;
}
.mast__text span:nth-child(333) {
	animation-delay: 16.65s;
}
.mast__text span:nth-child(334) {
	animation-delay: 16.7s;
}
.mast__text span:nth-child(335) {
	animation-delay: 16.75s;
}
.mast__text span:nth-child(336) {
	animation-delay: 16.8s;
}
.mast__text span:nth-child(337) {
	animation-delay: 16.85s;
}
.mast__text span:nth-child(338) {
	animation-delay: 16.9s;
}
.mast__text span:nth-child(339) {
	animation-delay: 16.95s;
}
.mast__text span:nth-child(340) {
	animation-delay: 17s;
}
.mast__text span:nth-child(341) {
	animation-delay: 17.05s;
}
.mast__text span:nth-child(342) {
	animation-delay: 17.1s;
}
.mast__text span:nth-child(343) {
	animation-delay: 17.15s;
}
.mast__text span:nth-child(344) {
	animation-delay: 17.2s;
}
.mast__text span:nth-child(345) {
	animation-delay: 17.25s;
}
.mast__text span:nth-child(346) {
	animation-delay: 17.3s;
}
.mast__text span:nth-child(347) {
	animation-delay: 17.35s;
}
.mast__text span:nth-child(348) {
	animation-delay: 17.4s;
}
.mast__text span:nth-child(349) {
	animation-delay: 17.45s;
}
.mast__text span:nth-child(350) {
	animation-delay: 17.5s;
}
.mast__text span:nth-child(351) {
	animation-delay: 17.55s;
}
.mast__text span:nth-child(352) {
	animation-delay: 17.6s;
}
.mast__text span:nth-child(353) {
	animation-delay: 17.65s;
}
.mast__text span:nth-child(354) {
	animation-delay: 17.7s;
}
.mast__text span:nth-child(355) {
	animation-delay: 17.75s;
}
.mast__text span:nth-child(356) {
	animation-delay: 17.8s;
}
.mast__text span:nth-child(357) {
	animation-delay: 17.85s;
}
.mast__text span:nth-child(358) {
	animation-delay: 17.9s;
}
.mast__text span:nth-child(359) {
	animation-delay: 17.95s;
}
.mast__text span:nth-child(360) {
	animation-delay: 18s;
}
.mast__text span:nth-child(361) {
	animation-delay: 18.05s;
}
.mast__text span:nth-child(362) {
	animation-delay: 18.1s;
}
.mast__text span:nth-child(363) {
	animation-delay: 18.15s;
}
.mast__text span:nth-child(364) {
	animation-delay: 18.2s;
}
.mast__text span:nth-child(365) {
	animation-delay: 18.25s;
}
.mast__text span:nth-child(366) {
	animation-delay: 18.3s;
}
.mast__text span:nth-child(367) {
	animation-delay: 18.35s;
}
.mast__text span:nth-child(368) {
	animation-delay: 18.4s;
}
.mast__text span:nth-child(369) {
	animation-delay: 18.45s;
}
.mast__text span:nth-child(370) {
	animation-delay: 18.5s;
}
.mast__text span:nth-child(371) {
	animation-delay: 18.55s;
}
.mast__text span:nth-child(372) {
	animation-delay: 18.6s;
}
.mast__text span:nth-child(373) {
	animation-delay: 18.65s;
}
.mast__text span:nth-child(374) {
	animation-delay: 18.7s;
}
.mast__text span:nth-child(375) {
	animation-delay: 18.75s;
}
.mast__text span:nth-child(376) {
	animation-delay: 18.8s;
}
.mast__text span:nth-child(377) {
	animation-delay: 18.85s;
}
.mast__text span:nth-child(378) {
	animation-delay: 18.9s;
}
.mast__text span:nth-child(379) {
	animation-delay: 18.95s;
}
.mast__text span:nth-child(380) {
	animation-delay: 19s;
}
.mast__text span:nth-child(381) {
	animation-delay: 19.05s;
}
.mast__text span:nth-child(382) {
	animation-delay: 19.1s;
}
.mast__text span:nth-child(383) {
	animation-delay: 19.15s;
}
.mast__text span:nth-child(384) {
	animation-delay: 19.2s;
}
.mast__text span:nth-child(385) {
	animation-delay: 19.25s;
}
.mast__text span:nth-child(386) {
	animation-delay: 19.3s;
}
.mast__text span:nth-child(387) {
	animation-delay: 19.35s;
}
.mast__text span:nth-child(388) {
	animation-delay: 19.4s;
}
.mast__text span:nth-child(389) {
	animation-delay: 19.45s;
}
.mast__text span:nth-child(390) {
	animation-delay: 19.5s;
}
.mast__text span:nth-child(391) {
	animation-delay: 19.55s;
}
.mast__text span:nth-child(392) {
	animation-delay: 19.6s;
}
.mast__text span:nth-child(393) {
	animation-delay: 19.65s;
}
.mast__text span:nth-child(394) {
	animation-delay: 19.7s;
}
.mast__text span:nth-child(395) {
	animation-delay: 19.75s;
}
.mast__text span:nth-child(396) {
	animation-delay: 19.8s;
}
.mast__text span:nth-child(397) {
	animation-delay: 19.85s;
}
.mast__text span:nth-child(398) {
	animation-delay: 19.9s;
}
.mast__text span:nth-child(399) {
	animation-delay: 19.95s;
}
.mast__text span:nth-child(400) {
	animation-delay: 20s;
}
@keyframes letter-glow {
	0% {
		opacity: 0;
		text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
	}
	66% {
		opacity: 1;
		text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	}
	77% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
		text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
	}
}
/* background
------------------------------------------------------------*/

.animation-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
@media screen and (max-width: 480px) {
	.animation-container {
		/* ===== low480px ===== */
		width: 100%;
		position: absolute;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.animation-container {
		/* ===== 480px〜600px ===== */
		width: 100%;
		position: absolute;
	}
}
.animation-container span {
	color: #191816;
	display: block;
	font-size: 18px;
	font-family: 'Helvetica';
	text-shadow: 0 0 1px white;
	position: absolute;
	user-select: none;
	pointer-events: none;
	cursor: default;
	z-index: 1;
	opacity: 0;
	will-change: transform, opacity;
	animation-timing-function: ease-out;
	animation-name: move;
}
@keyframes move {
	0% {
		opacity: 0;
		transform: translateY(100vh);
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: none;
	}
}
/* navigation
------------------------------------------------------------*/

nav.gnav {
	height: 50px;
	width: 100%;
	line-height: 50px;
	display: flex;
	border-top: 1px solid #d5c7ac;
	background-color: #191816;
}
nav.gnav h2 {
	width: 15%;
	margin-right: 1vw;
	text-align: center;
	color: #fff;
	transform: skewX(-150deg);
	border-right: 1px solid #d5c7ac;
}
@media screen and (max-width: 480px) {
	nav.gnav h2 {
		/* ===== low480px ===== */
		width: 40%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	nav.gnav h2 {
		/* ===== 480px〜600px ===== */
		width: 40%;
	}
}
nav.gnav h2 span {
	display: block;
	transform: skewX(150deg);
	padding: 0 10px;
}
@media screen and (max-width: 480px) {
	nav.gnav h2.news_nav {
		/* ===== low480px ===== */
		width: 50%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	nav.gnav h2.news_nav {
		/* ===== 480px〜600px ===== */
		width: 50%;
	}
}
nav.gnav ul.gnav_content {
	width: 40%;
	display: flex;
}
@media screen and (max-width: 480px) {
	nav.gnav ul.gnav_content {
		/* ===== low480px ===== */
		display: none;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	nav.gnav ul.gnav_content {
		/* ===== 480px〜600px ===== */
		display: none;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	nav.gnav ul.gnav_content {
		/* ===== 600px〜960px ===== */
		width: 70%;
	}
}
nav.gnav li {
	margin: 0 auto;
}
nav.gnav li.selected_border {
	position: relative;
}
nav.gnav li.selected_border:after {
	content: "";
	height: 3%;
	width: 100%;
	position: absolute;
	top: 38px;
	left: 0;
	display: block;
	background: #d5c7ac;
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	nav.gnav li.selected_border:after {
		/* ===== 600px〜960px ===== */
		top: 3.8vh;
	}
}
nav.gnav li.selected_border a {
	color: #d5c7ac;
}
nav.gnav li.selected_border a:hover {
	color: #d5c7ac;
	padding-bottom: 0;
	border-bottom: none;
	transition: 0;
}
nav.gnav li a {
	color: #fff;
	text-decoration: none;
}
nav.gnav li a:hover {
	padding-bottom: 5px;
	color: #fff;
	border-bottom: 2px solid #fff;
	transition: 0.4s;
}
@media screen and (max-width: 480px) {
	nav.category_nav h2 {
		/* ===== low480px ===== */
		width: 45%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	nav.category_nav h2 {
		/* ===== 480px〜600px ===== */
		width: 45%;
	}
}
/* Anchor link
------------------------------------------------------------*/

div.anchor-icon {
	width: 8%;
	height: 8vh;
	position: fixed;
	left: -1vw;
	bottom: 5vh;
	z-index: 1;
}
@media screen and (max-width: 480px) {
	div.anchor-icon {
		/* ===== low480px ===== */
		width: 20%;
		height: 8vh;
		left: 0;
		top: 85vh;
		z-index: 1;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	div.anchor-icon {
		/* ===== 480px〜600px ===== */
		width: 20%;
		height: 8vh;
		left: 5vw;
		top: 85vh;
		z-index: 1;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	div.anchor-icon {
		/* ===== 600px〜960px ===== */
		width: 10%;
		height: 8vh;
		top: 21.5vh;
	}
}
div.anchor-icon a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: -1.5vh;
	z-index: 1;
}
.scroll-down-dude:before, .scroll-down-dude:after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
	border-bottom: 4px solid #333;
	border-right: 4px solid #333;
}
.scroll-down-dude:before {
	margin: 0 auto;
	animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.scroll-down-dude:after {
	margin: 0 auto;
	animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes down-arrow-before {
	50% {
		transform: rotate(45deg) translate(70%, 70%);
	}
	100% {
		transform: rotate(45deg) translate(70%, 70%);
	}
}
@keyframes down-arrow-after {
	50% {
		transform: rotate(45deg) translate(110%, 110%);
		opacity: 0;
	}
	51% {
		transform: rotate(45deg) translate(-130%, -130%);
	}
	100% {
		transform: rotate(45deg) translate(-70%, -70%);
		opacity: 1;
	}
}

/* breadcrumb
--------------------------------------------------------------
------------------------------------------------------------*/
.breadcrumb {
	width: 100%;
	max-width: 1140px;
	margin: 4rem auto 0;
	display: flex;
	padding: 0 0 0 20px;
	align-items: center;
}
.breadcrumb h3 {
	border-top: 1px solid #191816;
	border-bottom: 1px solid #191816;
	color: #333;
	margin-right: 10px;
	padding: 10px;
	width: 18%;
	display: inline-block;
}
.breadcrumb_list {
	line-height: 20px;
}
.breadcrumb a {
	color: #191816;
}
.breadcrumb a:hover {
	color: #d5c7ac;
	transition: .4s;
}
@media screen and (max-width: 960px) {
	.breadcrumb {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: 10px auto;
		padding: 10px;
		background: #fff;
		color: #191816;
		font-size: 3.2vmin;
	}
	.breadcrumb h3 {
		width: 100%;
		margin: 0 auto;
		border: none;
		padding: 0;
		margin-bottom: 10px;
		border-bottom: 1px solid;
		font-size: 4vmin;
		color: #191816;
	}
	.breadcrumb a {
		color: #191816;
	}
}

/* wp-pagenavi
--------------------------------------------------------------
------------------------------------------------------------*/
.wp-pagenavi {
	text-align: center;
	margin: 100px auto 80px;
	font-size: 24px;
}
.pages {
	color: #fff;
    padding: 10px;
    margin-right: 10px;
	background: #191816;
}
.wp-pagenavi .current {
	padding: 10px 15px;
    color: #fff;
	background: #191816;
    margin-right: 10px;
}
.page.smaller,
.previouspostslink,
.page.larger,
.nextpostslink {
	color: #191816 !important;
	padding: 10px 15px;
	margin-right: 10px;
	border: 1px solid #191816;
}
.page.smaller:hover,
.previouspostslink:hover,
.page.larger:hover,
.nextpostslink:hover {
	color: #fff !important;
    background: #c8bba2;
    transition: .4s;
    border: 1px solid #c7baa0;
    text-decoration: none;
    box-sizing: border-box;
}
.nextpostslink:last-of-type {
	margin-right: 0;
}
.nextpostslink {
}


/* / main
--------------------------------------------------------------
------------------------------------------------------------*/

/* index.html
------------------------------------------------------------*/

section .container {
	width: 80%;
	margin: 0 auto;
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	section .container {
		/* ===== 600px〜960px ===== */
		width: 100%;
		padding: 60px 0 0;
	}
}
section h2 {
	font-size: 32px;
	font-size: 3.2rem;
}
#relation {
	background-color: #d5c7ac;
}
@media screen and (max-width: 480px) {
	#relation {
		/* ===== low480px ===== */
		background-color: #fff;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#relation {
		/* ===== 480px〜600px ===== */
		background-color: #fff;
	}
}
#relation .container {
	display: -webkit-flex;
	justify-content: space-between;
}
@media screen and (max-width: 480px) {
	#relation .container {
		/* ===== low480px ===== */
		width: 100%;
		display: block;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#relation .container {
		/* ===== 480px〜600px ===== */
		width: 100%;
		display: block;
	}
}
#relation h2 {
	padding: 60px 0 0;
	color: #0e1003;
	font-weight: bold;
}
#relation .skill-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 32%;
	padding: 20px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #fdfcf6;
}
#relation i {
	font-size: 45px;
	font-size: 4.5rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 80px;
	height: 80px;
	margin-bottom: 5px;
	padding-top: 15px;
	text-align: center;
	color: #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #d6a350;
}
#relation h3 {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 10px;
	color: #100f0d;
}
@media screen and (max-width: 960px) {
	#relation h2 {
		padding: 120px 0 20px;
	}
}
@media screen and (max-width: 480px) {
	#relation h3 {
		font-size: 7px;
    font-size: 7vw;
    line-height: 20vw;
    font-weight: bold;
    word-wrap: break-word;
    margin-bottom: 0;
    height: 20vw;
    color: #100f0d;
    padding: 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
  #relation h3 {
		font-size: 7px;
    font-size: 7vw;
    line-height: 20vw;
    font-weight: bold;
    word-wrap: break-word;
    margin-bottom: 0;
    height: 20vw;
    color: #100f0d;
    padding: 0;
  }
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	#relation h3 {
		/* ===== 600px〜960px ===== */
		margin-bottom: 0;
		font-size: 18px;
		font-size: 1.8rem;
	}
}
/* Relation
------------------------------------------------------------*/

#relations_content {
	height: 550px;
	width: 90%;
	margin: 100px auto;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media screen and (max-width: 480px) {
	#relations_content {
		/* ===== low480px ===== */
		margin: 0 auto;
		height: auto;
		display: block;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#relations_content {
		/* ===== 480px〜600px ===== */
		margin: 0 auto;
		height: auto;
		display: block;
	}
}
#relations_content li {
	display: inline;
	margin-bottom: 10vw;
	width: 25.33333%;
	-webkit-perspective: 500;
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective;
	-webkit-transition-duration: 0.5s;
}
@media screen and (max-width: 480px) {
	#relations_content li {
		/* ===== low480px ===== */
    width: 100%;
    margin-bottom: 10vw;
    display: block;
    position: relative;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#relations_content li {
		/* ===== 480px〜600px ===== */
    width: 100%;
    margin-bottom: 10vw;
    display: block;
    position: relative;
	}
}
#relations_content li:hover {
	-webkit-perspective: 5000;
}
#relations_content li img {
	height: 400px;
	border: 10px solid #fcfafa;
	-webkit-transform: rotateY(30deg);
	-moz-box-shadow: 0 3px 10px #888;
	-webkit-box-shadow: 0 3px 10px #888;
	-webkit-transition-property: transform;
	-webkit-transition-duration: 0.5s;
}
@media screen and (max-width: 480px) {
	#relations_content li img {
		/* ===== low480px ===== */
		width: 100%;
		height: auto;
		margin: 0 auto;
		display: block;
		border: none;
		-webkit-transform: none;
		-moz-box-shadow: 0 3px 10px #888;
		-webkit-box-shadow: none;
		-webkit-transition-property: none;
		-webkit-transition-duration: unset;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#relations_content li img {
		/* ===== 480px〜600px ===== */
		width: 100%;
		height: auto;
		margin: 0 auto;
		display: block;
		border: none;
		-webkit-transform: none;
		-moz-box-shadow: 0 3px 10px #888;
		-webkit-box-shadow: none;
		-webkit-transition-property: none;
		-webkit-transition-duration: unset;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	#relations_content li img {
		/* ===== 600px〜960px ===== */
		width: 80%;
		height: auto;
		margin: 0 auto;
		display: block;
	}
}
#relations_content li:hover img {
	-webkit-transform: rotateY(0deg);
}
.main_content_info {
	width: 200px;
	height: 180px;
	margin: -195px 0 0 55px;
	padding: 20px;
	background-color: #d5c7ac;
	border: 10px solid #fcfafa;
	position: absolute;
	-moz-box-shadow: 0 20px 40px #888;
	-webkit-box-shadow: 0 20px 40px #888;
	-webkit-transform: translateZ(30px) rotateY(30deg);
	-webkit-transition-property: transform, box-shadow, margin;
	-webkit-transition-duration: 0.5s;
}
@media screen and (max-width: 480px) {
	.main_content_info {
		/* ===== low480px ===== */
    width: 100%;
    height: auto;
    margin: 0px auto;
    padding: 0;
    border: none;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    -moz-box-shadow: 0 20px 40px #888;
    -webkit-box-shadow: none;
    -webkit-transform: none;
    -webkit-transition-property: unset;
    -webkit-transition-duration: 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.main_content_info {
		/* ===== 480px〜600px ===== */
    width: 100%;
    height: auto;
    margin: 0px auto;
    padding: 0;
    border: none;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    -moz-box-shadow: 0 20px 40px #888;
    -webkit-box-shadow: none;
    -webkit-transform: none;
    -webkit-transition-property: unset;
    -webkit-transition-duration: 0;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.main_content_info {
		/* ===== 600px〜960px ===== */
		width: 50%;
		height: 200px;
	}
}
#relations_content li:hover .main_content_info {
	margin: -175px 0 0 13px;
	-webkit-transform: rotateY(0deg);
	-webkit-box-shadow: 0 5px 10px #888;
}
@media screen and (max-width: 480px) {
	#relations_content li:hover .main_content_info {
		/* ===== low480px ===== */
		margin: 0;
		-webkit-transform: none;
		-webkit-box-shadow: none;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#relations_content li:hover .main_content_info {
		/* ===== 480px〜600px ===== */
		margin: 0;
		-webkit-transform: none;
		-webkit-box-shadow: none;
	}
}
.main_content_info h3 {
	height: 70px;
	padding-bottom: 15px;
	color: #100f0d;
	font-variant: small-caps;
	font-family: 'lato';
	text-align: center;
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.main_content_info h3 {
		/* ===== 600px〜960px ===== */
		height: 50px;
	}
}
.main_content_info p {
	height: 85px;
	color: #100f0d;
	padding-bottom: 15px;
}
@media screen and (max-width: 480px) {
	.main_content_info p {
		/* ===== low480px ===== */
    width: 90%;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    white-space: pre-wrap;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.main_content_info p {
		/* ===== 480px〜600px ===== */
    width: 90%;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    white-space: pre-wrap;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.main_content_info p {
		/* ===== 600px〜960px ===== */
		padding-bottom: 58px;
	}
}
.main_content_info a {
	width: 80px;
	margin: 0 auto;
	padding: 5px 10px;
	display: block;
	color: #eee;
	text-decoration: none;
	background-color: #100f0d;
	text-align: center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
@media screen and (max-width: 480px) {
	.main_content_info a {
		/* ===== low480px ===== */
		width: 90%;
		margin: 0 auto 20px;
		padding: 20px 0;
		box-sizing: border-box;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.main_content_info a {
		/* ===== 480px〜600px ===== */
    width: 100%;
    margin: 0 auto;
    padding: 15px 0;
    box-sizing: border-box;
	}
}
.main_content_info a:hover, .main_content_info a:focus {
	background-color: #333;
	color: #fff;
	transition: 0.5s;
}
@media screen and (max-width: 480px) {
	.main_content_info a:hover, .main_content_info a:focus {
		/* ===== low480px ===== */
		background-color: #100f0d;
		transition: 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.main_content_info a:hover, .main_content_info a:focus {
		/* ===== 480px〜600px ===== */
		background-color: #100f0d;
		transition: 0;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	.main_content_info a:hover, .main_content_info a:focus {
		/* ===== 600px〜960px ===== */
		margin: -175px 0 0 35px;
	}
}
/* News Content
------------------------------------------------------------*/

#works h2 {
	padding: 20px 0 60px;
	font-weight: bold;
}
#works .news_box {
	width: 100%;
	display: flex;
	background: #191816;
}
@media screen and (max-width: 480px) {
	#works .news_box {
		/* ===== low480px ===== */
		display: block;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .news_box {
		/* ===== 480px〜600px ===== */
		display: block;
	}
}
#works .news_box .first_contents {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
	#works .news_box .first_contents {
		/* ===== low480px ===== */
		display: block;
		flex-wrap: none;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .news_box .first_contents {
		/* ===== 480px〜600px ===== */
		display: block;
		flex-wrap: none;
	}
}
#works .news_box .new_works_box {
	width: 100%;
	position: relative;
}
#works .news_box .new_works_box a {
	height: 100%;
	position: relative;
	display: block;
}
#works .news_box .new_works_box a img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	display: block;
}
#works .news_box .new_works_box a .new_works_box_inner {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 480px) {
	#works .news_box .new_works_box a {
		position: relative;
		display: block;
		width: 100%;
		height: 70vw;
	}
	#works .news_box .new_works_box a img {
		width: 100%;
		height: -webkit-fill-available;
		display: block;
	}
	#works .news_box .new_works_box a .new_works_box_inner {
		/* ===== low480px ===== */
		display: block;
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .news_box .new_works_box a {
		position: relative;
		display: block;
		width: 100%;
		height: 70vw;
	}
	#works .news_box .new_works_box a img {
		width: 100%;
		height: -webkit-fill-available;
		display: block;
	}
	#works .news_box .new_works_box a .new_works_box_inner {
		/* ===== 480px〜600px ===== */
		display: block;
		width: 100%;
	}
}
#works .news_box .new_works_box a .new_works_box_inner .new_text_center {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 84px;
	margin: auto;
	text-align: center;
	padding: 0;
}
#works .news_box .new_works_box a .new_works_box_inner h3.new_works_title {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0 0 5px;
	padding: 0 80px;
}
@media screen and (max-width: 480px) {
	#works .news_box .new_works_box a .new_works_box_inner h3.new_works_title {
		/* ===== low480px ===== */
		font-size: 4.8vw;
		word-break: break-all;
		margin: -30px auto 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .news_box .new_works_box a .new_works_box_inner h3.new_works_title {
		/* ===== 480px〜600px ===== */
		font-size: 4.8vw;
		word-break: break-all;
		margin: -30px auto 0;
	}
}
#works .news_box .new_works_box a .new_works_box_inner small.new_works_data {
	font-size: 10px;
	font-size: 1rem;
	display: block;
	margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
	#works .news_box .new_works_box a .new_works_box_inner small.new_works_data {
		/* ===== low480px ===== */
		font-size: 15.6px;
		font-size: 1.56rem;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .news_box .new_works_box a .new_works_box_inner small.new_works_data {
		/* ===== 480px〜600px ===== */
		ont-size: 15.6px;
		font-size: 1.56rem;
	}
}
#works .news_box .new_works_box a .new_works_box_inner .new_button-readmore {
	font-size: 10px;
	font-size: 1rem;
	font-weight: bold;
	display: block;
	width: 180px;
	margin: auto;
	padding: 5px 0;
	text-align: center;
	color: #191816;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #d5c7ac;
	transition: 0.2s;
}
#works .news_box .new_works_box a .new_works_box_inner .new_button-readmore:hover {
	background-color: #ead49a;
}
#works .news_box .new_works_box:hover .new_works_box_inner {
	display: block;
	width: 100%;
}
#works .sub_contents {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
	#works .sub_contents {
		/* ===== low480px ===== */
		display: block;
		flex-wrap: none;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .sub_contents {
		/* ===== 480px〜600px ===== */
		display: block;
		flex-wrap: none;
	}
}
#works .works-box {
	width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 480px) {
	#works .works-box {
		/* ===== low480px ===== */
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .works-box {
		/* ===== 480px〜600px ===== */
		width: 100%;
	}
}
#works .works-box a {
	position: relative;
	display: block;
}
#works .works-box a img {
	display: block;
	max-width: 100%;
	height: auto;
}
#works .works-box a .works-box-inner {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	height: 100%;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 480px) {
	#works .works-box a .works-box-inner {
		/* ===== low480px ===== */
		display: block;
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .works-box a .works-box-inner {
		/* ===== 480px〜600px ===== */
		display: block;
		width: 100%;
	}
}
#works .works-box a .works-box-inner div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100px;
	margin: auto;
	padding: 0 20px;
}
#works .works-box a .works-box-inner h3 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0 0 5px;
}
@media screen and (max-width: 480px) {
	#works .works-box a .works-box-inner h3 {
		/* ===== low480px ===== */
		margin: 0;
		font-size: 4.8vw;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .works-box a .works-box-inner h3 {
		/* ===== 480px〜600px ===== */
		margin: 0;
		font-size: 2.6rem;
	}
}
#works .works-box a .works-box-inner small {
	font-size: 10px;
	font-size: 1rem;
	display: block;
	margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
	#works .works-box a .works-box-inner small {
		/* ===== low480px ===== */
		font-size: 1.56rem;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#works .works-box a .works-box-inner small {
		/* ===== 480px〜600px ===== */
		font-size: 1.56rem;
	}
}
#works .works-box a .works-box-inner .button-readmore {
	font-size: 10px;
	font-size: 1rem;
	font-weight: bold;
	display: block;
	width: 180px;
	margin: auto;
	padding: 5px 0;
	text-align: center;
	color: #191816;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #d5c7ac;
	transition: 0.2s;
}
#works .works-box a .works-box-inner .button-readmore:hover {
	background-color: #ead49a;
}
#works .works-box a:hover .works-box-inner {
	display: block;
	width: 100%;
}
#works::after {
	display: block;
	clear: both;
	content: '';
}
#contact {
	width: 100%;
	padding: 0;
	display: flex;
	background-color: #191816;
	border-top: 1px solid #d5c7ac;
}
@media screen and (max-width: 480px) {
	#contact {
		/* ===== low480px ===== */
		display: block;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#contact {
		/* ===== 480px〜600px ===== */
		display: block;
	}
}
#contact div.text-left-content {
	width: 33.33333%;
	padding: 60px 0;
	text-align: center;
}
@media screen and (max-width: 480px) {
	#contact div.text-left-content {
		/* ===== low480px ===== */
		width: 100%;
		padding: 50px 0 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#contact div.text-left-content {
		/* ===== 480px〜600px ===== */
		width: 100%;
		padding: 50px 0 0;
	}
}
#contact div.text-left-content h2 {
	color: #d5c7ac;
	font-weight: bold;
}
#contact ul.text-left-box {
	text-align: center;
}
#contact ul.text-left-box li {
	padding: 10px 0;
}
#contact ul.text-left-box li.selected_border a {
	padding-bottom: 0.7vh;
	border-bottom: 2.5px solid #d5c7ac;
}
#contact ul.text-left-box li.selected_border a:hover {
	padding-bottom: 0.7vh;
	color: #d5c7ac;
	border-bottom: 2.5px solid #d5c7ac;
	transition: 0;
}
@media screen and (max-width: 480px) {
	#contact ul.text-left-box li {
		/* ===== low480px ===== */
		padding: 15px 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#contact ul.text-left-box li {
		/* ===== 480px〜600px ===== */
		padding: 15px 0;
	}
}
#contact ul.text-left-box li a {
	width: 100%;
	text-decoration: none;
	list-style: none;
	color: #fff;
}
#contact ul.text-left-box li a:hover {
	padding-bottom: 5px;
	color: #fff;
	border-bottom: 2px solid #fff;
	transition: 0.4s;
}
#contact div.text-center-content {
	width: 33.33333%;
	padding: 60px 0;
}
@media screen and (max-width: 480px) {
	#contact div.text-center-content {
		/* ===== low480px ===== */
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#contact div.text-center-content {
		/* ===== 480px〜600px ===== */
		width: 100%;
	}
}
#contact div.text-center-content h2 {
	color: #d5c7ac;
	font-weight: bold;
	margin: 0 auto;
}
#contact ul.text-center-box {
	margin-top: 60px;
	text-align: center;
}
@media screen and (max-width: 480px) {
	#contact ul.text-center-box {
		/* ===== low480px ===== */
		margin-top: 20px;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	#contact ul.text-center-box {
		/* ===== 480px〜600px ===== */
		margin-top: 20px;
	}
}
#contact ul.text-center-box li {
	font-size: 28px;
	font-size: 2.8rem;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: 20px;
	text-align: center;
	vertical-align: top;
}
#contact ul.text-center-box li:last-child {
	margin-right: 0;
}
#contact ul.text-center-box li a {
	display: block;
	width: 65px;
	height: 60px;
	color: #fff;
	list-style: none;
	text-decoration: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #191816;
	text-shadow: 0 1px 0 #c9cfce, 0 2px 0 #bcc2c2, 0 3px 0 #afb6b6, 0 4px 0 #a4adac, 0 5px 0 #9fa8a7, 0 6px 0 #99a3a2, 0 7px 0 #97a1a0, 0 8px 0 #949e9d, 0 0 5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.3);
}
#contact ul.text-center-box li a i {
	transition: 0.8s;
}
#contact ul.text-center-box li a i:hover {
	position: relative;
	bottom: -12.5px;
	text-shadow: none;
	display: block;
}
#contact .github, #contact .instagram {
	font-size: 32px;
	font-size: 3.2rem;
}
#contact .github i {
	margin-left: 2px;
}

@media screen and (max-width: 480px) {
	#contact ul.text-center-box li a {
		    color: #fff;
	}
}

/*  / index.htm
--------------------------------------------------------------
------------------------------------------------------------*/

/* catgory
------------------------------------------------------------*/

section#categoy {
	margin-bottom: 60px;
}
section#categoy h2 {
	width: 50%;
	margin: 110px auto 70px;
	position: relative;
}
@media screen and (max-width: 480px) {
	section#categoy h2 {
		/* ===== low480px ===== */
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#categoy h2 {
		/* ===== 480px〜600px ===== */
		width: 100%;
	}
}
.text-center span::after,
section#categoy h2 span::after {
	content: "";
	width: 10%;
	padding-bottom: 0;
	display: block;
	position: absolute;
	border-bottom: 5px solid #d5c7ac;
	left: 45%;
}
section#categoy ul.category_container {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media screen and (max-width: 480px) {
	section#categoy ul.category_container {
		/* ===== low480px ===== */
		width: 90%;
		display: block;
		justify-content: normal;
	}

	#contact ul.text-center-box li a i {
		text-shadow: none;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#categoy ul.category_container {
		/* ===== 480px〜600px ===== */
		width: 100%;
		display: block;
		justify-content: normal;
	}
}
section#categoy ul.category_container li {
	width: 30.33333%;
	display: inline-block;
	margin-bottom: 70px;
	box-sizing: border-box;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.1));
    box-shadow: 10px 10px 45px -20px;
}
@media screen and (max-width: 480px) {
	section#categoy ul.category_container li {
		/* ===== low480px ===== */
		width: 100%;
		margin-bottom: 60px;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#categoy ul.category_container li {
		/* ===== 480px〜600px ===== */
		width: 100%;
		margin-bottom: 20px;
	}
}
section#categoy ul.category_container li:hover img {
	transform: scale(1.05, 1.05);
	-webkit-transform: scale(1.05, 1.05);
	-moz-transform: scale(1.05, 1.05);
	-o-transform: scale(1.05, 1.05);
	-ms-transform: scale(1.05, 1.05);
	transition: 0.4s;
	opacity: 0.8;
}
section#categoy ul.category_container li:hover .read_more {
	transform: translateX(5px);
	transition-duration: 0.5s !important;
}
section#categoy ul.category_container li:hover div.category-text-box {
	opacity: 0.8;
	transition: 0.4s;
}
section#categoy ul.category_container li:hover div.category-text-box span {
	transition: 0.4s;
}
section#categoy ul.category_container li a {
    width: 100%;
    height: 100%;
    display: block;
    color: #191816;
    text-decoration: none;
    overflow: hidden;
}
section#categoy ul.category_container li a img {
	width: 100%;
    height: 52.5%;
    display: block;
    transition: .3s ease-in-out;
	box-sizing: border-box;
}
section#categoy ul.category_container li a div.category-text-box {
	padding: 15px;
    height: 47.5%;
    box-sizing: border-box;
}
section#categoy ul.category_container li a div.category-text-box span {
	margin: 10px 0;
	padding: 10px 20px;
	display: inline-block;
	letter-spacing: 1.56px;
	font-size: 10px;
	font-weight: bold;
	background: #191816;
	color: #fff;
	text-align: center;
}
section#categoy ul.category_container li a div.category-text-box p {
	height: auto;
	font-size: 16px;
	font-weight: bold;
}
section#categoy ul.category_container li a div.category-text-box button.read_more {
	width: 30px;
	height: 30px;
	margin: 10px 0;
	background: #191816;
	border: none;
	border-radius: 120px;
	text-decoration: none;
	display: inline-block;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.2s ease;
}
section#categoy ul.category_container li a div.category-text-box button.read_more i {
	color: #fff;
	font-size: 11px;
}
section#categoy ul.category_container li a div.category-text-box button.read_more i:before {
	content: "\f178";
}
section#categoy ul.category_container li a div.category-text-box button.read_more i:before:active {
	background: #fff;
}
/*  / catgory
--------------------------------------------------------------
------------------------------------------------------------*/

/* web_list
------------------------------------------------------------*/

section#list {
	padding: 0;
}
section#list figure.first_view_pics {
	width: 100%;
	height: 400px;
	/*background-image: url("../images/img_work_site.jpg");*/
	background-size: cover;
	background-position: center center;
	box-sizing: border-box;
	object-fit: cover;
}
section#list figure.first_view_pics img {
  width: 100%;
  height: 40rem;
}
@media screen and (max-width: 480px) {
	section#list figure.first_view_pics {
		/* ===== low480px ===== */
		height: 55vw;
	}
  section#list figure.first_view_pics img {
    width: 100%;
    height: 55vw;
  }
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#list figure.first_view_pics {
		/* ===== 480px〜600px ===== */
		height: 55vw;
	}
    section#list figure.first_view_pics img {
      width: 100%;
      height: 40rem;
    }
}
section#list div.list_box {
	width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 480px) {
  section#list h2.text-center {
  	padding: 0 0 7vw;
  }
	section#list div.list_box {
		/* ===== low480px ===== */
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#list div.list_box {
		/* ===== 480px〜600px ===== */
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
}
section#list div.list_box ul.list_container li.list_area {
	margin-bottom: 60px;
	position: relative;
}
section#list div.list_box ul.list_container li.list_area a.list_anc {
	display: flex;
	justify-content: center;
	text-decoration: none;
}
@media screen and (max-width: 480px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc {
		/* ===== low480px ===== */
		display: block;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc {
		/* ===== 480px〜600px ===== */
		display: block;
	}
}
section#list div.list_box ul.list_container li.list_area a.list_anc:hover {
	opacity: 0.7;
	transition: 0.2s;
}
section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box {
	width: 55%;
	height: 20%;
}
@media screen and (max-width: 480px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box {
		/* ===== low480px ===== */
		width: 100%;
		height: 50vw;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box {
		/* ===== 480px〜600px ===== */
		width: 100%;
		height: 53vw;
	}
}
section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box figure.list_image {
	width: 100%;
	height: auto;
	/*background: url("../images/img_work_site.jpg") no-repeat center center/cover;*/
}
@media screen and (max-width: 480px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box figure.list_image {
		/* ===== low480px ===== */
		width: 100%;
		height: 51vw;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box figure.list_image {
		/* ===== 480px〜600px ===== */
		width: 100%;
		height: 51vw;
	}
}
section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box figure.list_image img{
	width: 100%;
	height: auto;
	display: block;
}
section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text {
	width: 40%;
  padding: 0 50px;
	color: #191716;
  background: #fff;
	box-sizing: border-box;
	box-shadow: 10px 10px 45px -20px;
}
@media screen and (max-width: 480px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text {
		/* ===== low480px ===== */
		width: 100%;
    padding: 2vw 4vw;
	}
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_image_box figure.list_image img{
		height: 50vw;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text {
		/* ===== 480px〜600px ===== */
		width: 100%;
		height: 45vw;
		padding: 0 10px;
	}
}
section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text h3 {
	margin: 25px 0 20px;
	font-size: 32px;
	color: #191816;
}
@media screen and (max-width: 480px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text h3 {
		/* ===== low480px ===== */
		margin: 2vw 0;
    font-size: 7vw;
		letter-spacing: -1.44px;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text h3 {
		/* ===== 480px〜600px ===== */
		margin: 2vw 0;
		letter-spacing: -1.44px;
	}
}
section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text p {
	color: #848484;
  line-height: 3rem;
}
section#list div.list_box ul.list_container li.list_area ul.share_link_icon {
	width: 32%;
	margin-bottom: 10px;
	display: flex;
	position: absolute;
	bottom: 0;
	right: 80px;
}
section#list div.list_box ul.list_container li.list_area ul.share_link_icon li {
	width: 40px;
	height: 40px;
	margin-right: 15px;
	border: 1px dashed #858585;
	border-radius: 50%;
	opacity: 0.5;
	box-sizing: border-box;
}
section#list div.list_box ul.list_container li.list_area ul.share_link_icon li:hover {
	opacity: 0.5;
	background: #d5c7ac;
	border: 1px dashed #848484;
	transition: 0.5s;
}
section#list div.list_box ul.list_container li.list_area ul.share_link_icon li:hover a {
	color: #fff;
	transition: 0.5s;
}
section#list div.list_box ul.list_container li.list_area ul.share_link_icon li a {
	width: 100%;
	height: auto;
	text-align: center;
	color: #848484;
	font-size: 18px;
	margin: 0 auto;
	display: block;
	line-height: 38px;
}
@media screen and (max-width: 480px) {
  section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text p {
    line-height: 8vw;
  }
}
@media screen and (min-width: 480px) and (max-width: 600px) {
  section#list div.list_box ul.list_container li.list_area a.list_anc div.list_text p {
  	line-height: 8vw;
  }
}
/*  / web_list
--------------------------------------------------------------
------------------------------------------------------------*/

/* web_article_page
------------------------------------------------------------*/

section#article.mb_box {
	margin-bottom: 5vw;
}
section#article.mb_box h2 {
	margin: 40px 0 20px 0;
}
section#article .w3-row {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: block;
}
.w3-image {
	max-width: 100%;
	height: auto;
}
.w3-table, .w3-table-all {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	display: table;
}
.w3-table-all {
	border: 1px solid #ccc;
}
.w3-bordered tr, .w3-table-all tr {
	border-bottom: 1px solid #ddd;
}
.w3-striped tbody tr:nth-child(even) {
	background-color: #f1f1f1;
}
.w3-table-all tr:nth-child(odd) {
	background-color: #fff;
}
.w3-table-all tr:nth-child(even) {
	background-color: #f1f1f1;
}
.w3-hoverable tbody tr:hover, .w3-ul.w3-hoverable li:hover {
	background-color: #d5c7ac;
	color: #fff;
}
.w3-centered tr th, .w3-centered tr td {
	text-align: center;
}
.w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th {
	padding: 8px 8px;
	display: table-cell;
	text-align: left;
	vertical-align: top;
}
.w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
	padding-left: 16px;
}
.w3-btn, .w3-btn-block {
	border: none;
	display: inline-block;
	outline: 0;
	padding: 6px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background-color: #000;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}
.w3-btn:hover, .w3-btn-block:hover, .w3-btn-floating:hover, .w3-btn-floating-large:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.w3-btn, .w3-btn-floating, .w3-btn-floating-large, .w3-closenav, .w3-opennav, .w3-btn-block {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.w3-btn-floating, .w3-btn-floating-large {
	display: inline-block;
	text-align: center;
	color: #fff;
	background-color: #000;
	position: relative;
	overflow: hidden;
	z-index: 1;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 24px;
}
.w3-btn-floating {
	width: 40px;
	height: 40px;
	line-height: 40px;
}
.w3-btn-floating-large {
	width: 56px;
	height: 56px;
	line-height: 56px;
}
.w3-disabled, .w3-btn:disabled, .w3-btn-floating:disabled, .w3-btn-floating-large:disabled {
	cursor: not-allowed;
	opacity: 0.3;
}
.w3-btn.w3-disabled *, .w3-btn-block.w3-disabled, .w3-btn-floating.w3-disabled *, .w3-btn:disabled *, .w3-btn-floating:disabled * {
	pointer-events: none;
}
.w3-btn.w3-disabled:hover, .w3-btn-block.w3-disabled:hover, .w3-btn:disabled:hover, .w3-btn-floating.w3-disabled:hover, .w3-btn-floating:disabled:hover, .w3-btn-floating-large.w3-disabled:hover, .w3-btn-floating-large:disabled:hover {
	box-shadow: none;
}
.w3-btn-group .w3-btn {
	float: left;
}
.w3-btn-group .w3-btn:after {
	content: "";
	clear: both;
	display: block;
}
.w3-btn-block {
	width: 100%;
}
.w3-btn-bar .w3-btn {
	box-shadow: none;
	background-color: inherit;
	color: inherit;
	float: left;
}
.w3-btn-bar .w3-btn:after {
	content: "";
	clear: both;
	display: block;
}
.w3-btn-bar .w3-btn:hover {
	background-color: #ccc;
}
.w3-badge, .w3-tag, .w3-sign {
	background-color: #000;
	color: #fff;
	display: inline-block;
	text-align: center;
}
.w3-badge {
	border-radius: 50%;
}
ul.w3-ul {
	list-style-type: none;
	padding: 0;
	margin: 15px 0 0;
}
ul.w3-ul li {
	padding: 6px 2px 6px 16px;
	border-bottom: 1px solid #ddd;
}
ul.w3-ul li:last-child {
	border-bottom: none;
}
.w3-tooltip, .w3-display-container {
	position: relative;
}
.w3-tooltip .w3-text {
	display: none;
}
.w3-tooltip:hover .w3-text {
	display: inline-block;
}
.w3-navbar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.w3-navbar li {
	float: left;
}
.w3-navbar li:after {
	content: "";
	clear: both;
	display: block;
}
.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
	display: block;
	padding: 8px 16px;
}
.w3-navbar li .w3-btn, .w3-navbar li .w3-input {
	border: none;
	outline: none;
	width: 100%;
}
.w3-navbar li a:hover {
	color: #000;
	background-color: #ccc;
}
.w3-navbar .w3-dropdown-hover, .w3-navbar .w3-dropdown-click {
	position: static;
}
.w3-navbar .w3-dropdown-hover:hover, .w3-navbar .w3-dropdown-hover:first-child, .w3-navbar .w3-dropdown-click:hover {
	background-color: #ccc;
	color: #000;
}
.w3-navbar a, .w3-topnav a, .w3-sidenav a, .w3-dropdown-content a, .w3-accordion-content a, .w3-dropnav a {
	text-decoration: none;
}
.w3-navbar .w3-opennav.w3-right {
	float: right;
}
.w3-navbar .w3-opennav.w3-right:after {
	content: "";
	clear: both;
	display: block;
}
.w3-topnav {
	padding: 8px 8px;
}
.w3-topnav a {
	padding: 0 8px;
	border-bottom: 3px solid transparent;
	-webkit-transition: border-bottom .25s;
	transition: border-bottom .25s;
}
.w3-topnav a:hover {
	border-bottom: 3px solid #fff;
}
.w3-topnav .w3-dropdown-hover a {
	border-bottom: 0;
}
.w3-opennav, .w3-closenav {
	color: inherit;
}
.w3-opennav:hover, .w3-closenav:hover {
	cursor: pointer;
	opacity: 0.8;
}
.w3-btn, .w3-btn-floating, .w3-dropnav a, .w3-btn-floating-large, .w3-btn-block, .w3-navbar a, .w3-sidenav a, .w3-pagination li a, .w3-hoverable tbody tr, .w3-hoverable li, .w3-accordion-content a, .w3-dropdown-content a, .w3-dropdown-click:hover, .w3-dropdown-hover:hover, .w3-opennav, .w3-closenav, .w3-closebtn, *[class*="w3-hover-"] {
	-webkit-transition: background-color .25s, color .15s, box-shadow .25s, opacity 0.25s, filter 0.25s, border 0.15s;
	transition: background-color .25s, color .15s, box-shadow .15s, opacity .25s, filter .25s, border .15s;
}
.w3-ripple:active {
	opacity: 0.5;
}
.w3-ripple {
	-webkit-transition: opacity 0s;
	transition: opacity 0s;
}
.w3-sidenav {
	height: 100%;
	width: 200px;
	background-color: #fff;
	position: fixed;
	z-index: 1;
	overflow: auto;
}
.w3-sidenav a {
	padding: 4px 2px 4px 16px;
}
.w3-sidenav a:hover {
	background-color: #ccc;
}
.w3-sidenav a, .w3-dropnav a {
	display: block;
}
.w3-sidenav .w3-dropdown-hover:hover, .w3-sidenav .w3-dropdown-hover:first-child, .w3-sidenav .w3-dropdown-click:hover, .w3-dropnav a:hover {
	background-color: #ccc;
	color: #000;
}
.w3-sidenav .w3-dropdown-hover, .w3-sidenav .w3-dropdown-click {
	width: 100%;
}
.w3-sidenav .w3-dropdown-hover .w3-dropdown-content, .w3-sidenav .w3-dropdown-click .w3-dropdown-content {
	min-width: 100%;
}
.w3-main, #main {
	transition: margin-left .4s;
}
.w3-modal {
	z-index: 3;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: black;
	background-color: rgba(0, 0, 0, 0.4);
}
.w3-modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	width: 600px;
}
.w3-closebtn {
	text-decoration: none;
	float: right;
	font-size: 24px;
	font-weight: bold;
	color: inherit;
}
.w3-closebtn:hover, .w3-closebtn:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.w3-pagination {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.w3-pagination li {
	display: inline;
}
.w3-pagination li a {
	text-decoration: none;
	color: #000;
	float: left;
	padding: 8px 16px;
}
.w3-pagination li a:after {
	content: "";
	clear: both;
	display: block;
}
.w3-pagination li a:hover {
	background-color: #ccc;
}
.w3-input-group, .w3-group {
	margin-top: 24px;
	margin-bottom: 24px;
}
.w3-input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
	display: block;
	border: 1px solid #808080;
}
.w3-label {
	color: #009688;
}
.w3-input:not(:valid)~.w3-validate {
	color: #f44336;
}
.w3-select {
	padding: 9px 0;
	width: 100%;
	color: #000;
	border: 1px solid transparent;
	border-bottom: 1px solid #009688;
}
.w3-select select:focus {
	color: #000;
	border: 1px solid #009688;
}
.w3-select option[disabled] {
	color: #009688;
}
.w3-dropdown-click, .w3-dropdown-hover {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.w3-dropdown-hover:hover .w3-dropdown-content {
	display: block;
	z-index: 1;
}
.w3-dropdown-content {
	cursor: auto;
	color: #000;
	background-color: #fff;
	display: none;
	position: absolute;
	min-width: 160px;
	margin: 0;
	padding: 0;
}
.w3-dropdown-content a {
	padding: 6px 16px;
	display: block;
}
.w3-dropdown-content a:hover {
	background-color: #ccc;
}
.w3-accordion {
	width: 100%;
	cursor: pointer;
}
.w3-accordion-content {
	cursor: auto;
	display: none;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
.w3-accordion-content a {
	padding: 6px 16px;
	display: block;
}
.w3-accordion-content a:hover {
	background-color: #ccc;
}
.w3-progress-container {
	width: 100%;
	height: 1.5em;
	position: relative;
	background-color: #f1f1f1;
}
.w3-progressbar {
	background-color: #757575;
	height: 100%;
	position: absolute;
	line-height: inherit;
}
input[type=checkbox].w3-check, input[type=radio].w3-radio {
	width: 24px;
	height: 24px;
	position: relative;
	top: 6px;
}
input[type=checkbox].w3-check:checked+.w3-validate, input[type=radio].w3-radio:checked+.w3-validate {
	color: #009688;
}
input[type=checkbox].w3-check:disabled+.w3-validate, input[type=radio].w3-radio:disabled+.w3-validate {
	color: #aaa;
}
.w3-responsive {
	overflow-x: auto;
}
.w3-container:after, .w3-panel:after, .w3-row:after, .w3-row-padding:after, .w3-topnav:after, .w3-clear:after, .w3-btn-group:before, .w3-btn-group:after, .w3-btn-bar:before, .w3-btn-bar:after {
	content: "";
	display: table;
	clear: both;
}
.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
	float: left;
	width: 100%;
}
.w3-col:after, .w3-half:after, .w3-third:after, .w3-twothird:after, .w3-threequarter:after, .w3-quarter:after {
	content: "";
	clear: both;
	display: block;
}
.w3-col.s1 {
	width: 8.33333%;
}
.w3-col.s2 {
	width: 16.66666%;
}
.w3-col.s3 {
	width: 24.99999%;
}
.w3-col.s4 {
	width: 33.33333%;
}
.w3-col.s5 {
	width: 41.66666%;
}
.w3-col.s6 {
	width: 49.99999%;
}
.w3-col.s7 {
	width: 58.33333%;
}
.w3-col.s8 {
	width: 66.66666%;
}
.w3-col.s9 {
	width: 74.99999%;
}
.w3-col.s10 {
	width: 83.33333%;
}
.w3-col.s11 {
	width: 91.66666%;
}
.w3-col.s12, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
	width: 99.99999%;
}

.article_prof {
	width: 150px;
	margin: 0 auto 20px;
	border: none;
}

@media only screen and (min-width: 601px) {
	section#article .w3-row {
		width: 1200px;
		max-width: 1200px;
		margin: 8rem auto 0;
		display: block;
	}
	.w3-col.m1 {
		width: 8.33333%;
	}
	.w3-col.m2 {
		width: 16.66666%;
	}
	.w3-col.m3, .w3-quarter {
		width: 24.99999%;
	}
	.w3-col.m4, .w3-third {
		width: 33.33333%;
	}
	.w3-col.m5 {
		width: 41.66666%;
	}
	.w3-col.m6, .w3-half {
		width: 49.99999%;
	}
	.w3-col.m7 {
		width: 58.33333%;
	}
	.w3-col.m8, .w3-twothird {
		width: 66.66666%;
	}
	.w3-col.m9, .w3-threequarter {
		width: 74.99999%;
	}
	.w3-col.m10 {
		width: 83.33333%;
	}
	.w3-col.m11 {
		width: 91.66666%;
	}
	.w3-col.m12 {
		width: 99.99999%;
	}
}
@media only screen and (min-width: 993px) {
	.w3-col.l1 {
		width: 8.33333%;
	}
	.w3-col.l2 {
		width: 16.66666%;
	}
	.w3-col.l3, .w3-quarter {
		width: 24.99999%;
	}
	.w3-col.l4, .w3-third {
		width: 33.33333%;
	}
	.w3-col.l5 {
		width: 41.66666%;
	}
	.w3-col.l6, .w3-half {
		width: 49.99999%;
	}
	.w3-col.l7 {
		width: 58.33333%;
	}
	.w3-col.l8, .w3-twothird {
		width: 66.66666%;
	}
	.w3-col.l9, .w3-threequarter {
		width: 74.99999%;
	}
	.w3-col.l10 {
		width: 83.33333%;
	}
	.w3-col.l11 {
		width: 91.66666%;
	}
	.w3-col.l12 {
		width: 99.99999%;
	}
}
.w3-content {
	max-width: 980px;
	margin: auto;
}
.w3-rest {
	overflow: hidden;
}
.w3-hide {
	display: none;
}
.w3-show-block, .w3-show {
	display: block;
}
.w3-show-inline-block {
	display: inline-block;
}
@media (max-width: 600px) {
	.w3-modal-content {
		margin: 0 10px;
		width: auto;
	}
	.w3-modal {
		padding-top: 30px;
	}
}
@media (max-width: 768px) {
	.w3-modal-content {
		width: 500px;
	}
	.w3-modal {
		padding-top: 50px;
	}
}
@media (min-width: 993px) {
	.w3-modal-content {
		width: 900px;
	}
}
@media screen and (max-width: 600px) {
	.w3-topnav a {
		display: block;
	}
	.w3-navbar li:not(.w3-opennav) {
		float: none;
		width: 100%;
	}
	.w3-navbar li.w3-right {
		float: none;
	}
}
@media screen and (max-width: 600px) {
	.w3-topnav .w3-dropdown-hover .w3-dropdown-content, .w3-navbar .w3-dropdown-click .w3-dropdown-content, .w3-navbar .w3-dropdown-hover .w3-dropdown-content {
		position: relative;
	}
}
@media screen and (max-width: 600px) {
	.w3-topnav, .w3-navbar {
		text-align: center;
	}
}
@media (max-width: 600px) {
	.w3-hide-small {
		display: none;
	}
}
@media (max-width: 992px) and (min-width: 601px) {
	.w3-hide-medium {
		display: none;
	}
}
@media (min-width: 993px) {
	.w3-hide-large {
		display: none;
	}
}
@media screen and (max-width: 992px) {
	.w3-sidenav.w3-collapse {
		display: none;
	}
	.w3-main {
		margin-left: 0;
		margin-right: 0;
	}
}
@media screen and (min-width: 993px) {
	.w3-sidenav.w3-collapse {
		display: block;
	}
}
.w3-top, .w3-bottom {
	position: fixed;
	width: 100%;
	z-index: 1;
}
.w3-top {
	top: 0;
}
.w3-bottom {
	bottom: 0;
}
.w3-overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
}
.w3-left {
	float: left;
}
.w3-right {
	float: right;
}
.w3-tiny {
	font-size: 10px;
}
.w3-small {
	font-size: 12px;
}
.w3-medium {
	font-size: 15px;
}
.w3-large {
	font-size: 18px;
}
.w3-xlarge {
	font-size: 24px;
}
.w3-xxlarge {
	font-size: 36px;
}
.w3-xxxlarge {
	font-size: 48px;
}
.w3-jumbo {
	font-size: 64px;
}
div.w3-vertical {
	word-break: break-all;
	line-height: 1;
	text-align: center;
	width: 0.6em;
}
div.w3-justify .date {
	padding: 10px 10px 15px;
}
.w3-left-align {
	text-align: left;
}
.w3-right-align {
	text-align: right;
}
.w3-justify {
	text-align: justify;
}
.w3-justify h1.w3-justify_title {
	font-size: 24px;
	font-weight: bold;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #d5c7ac;
	border-bottom: 1px solid #191816;
}
.w3-justify .w3-opacity {
  margin: 1rem 0 2rem;
	display: block;
  font-weight: bold;
}
.w3-justify .thumbnail_image_box img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width: 960px) {
	.w3-justify {
		text-align: left;
	}
}

.post_text {
	margin-bottom: 5vw;
}
.w3-center {
	text-align: center;
}
.w3-display-topleft {
	position: absolute;
	left: 0;
	top: 0;
}
.w3-display-topright {
	position: absolute;
	right: 0;
	top: 0;
}
.w3-display-bottomleft {
	position: absolute;
	left: 0;
	bottom: 0;
}
.w3-display-bottomright {
	position: absolute;
	right: 0;
	bottom: 0;
}
.w3-display-middle {
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.w3-display-left {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
.w3-display-right {
	position: absolute;
	top: 50%;
	right: 0%;
	transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
.w3-display-topmiddle {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
}
.w3-display-bottommiddle {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
}
.w3-display-container:hover .w3-display-hover {
	display: block;
}
.w3-display-container:hover span.w3-display-hover {
	display: inline-block;
}
.w3-display-hover {
	display: none;
}
.w3-circle {
	border-radius: 50%;
}
.w3-round-small {
	border-radius: 2px;
}
.w3-round, .w3-round-medium {
	border-radius: 4px;
}
.w3-round-large {
	border-radius: 8px;
}
.w3-round-xlarge {
	border-radius: 16px;
}
.w3-round-xxlarge {
	border-radius: 32px;
}
.w3-round-jumbo {
	border-radius: 64px;
}
.w3-margin {
	margin: 16px;
	background: #fff;
}
.w3-margin-0 {
	margin: 0;
}
.w3-margin-top {
	margin-top: 16px;
}
.w3-margin-bottom {
	margin-bottom: 16px;
	background: #191817;
}
.w3-margin-bottom a {
	margin: 0 auto !important;
}
.w3-margin-left {
	margin-left: 16px;
}
.w3-margin-right {
	margin-right: 16px;
}
.w3-section {
	margin-top: 16px;
	margin-bottom: 16px;
}
.w3-padding-tiny {
	padding: 2px 4px;
}
.w3-padding-small {
	padding: 4px 8px;
}
.w3-padding-medium, .w3-padding, .w3-form {
	padding: 8px 16px;
}
.w3-padding-large {
	padding: 0 24px 12px;
}
@media screen and (max-width: 480px) {
	.w3-justify h3 {
		font-size: 6vw;
		font-weight: bold;
		padding: .25em 0 .5em .75em;
		border-left: 6px solid #d5c7ac;
		border-bottom: 1px solid #191816;
	}
	.w3-padding-large {
		/* ===== low480px ===== */
		padding: 0;
	}
	.w3-justify .thumbnail_image_box img {
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.w3-padding-large {
		/* ===== 480px〜600px ===== */
		padding: 0;
	}
}
.w3-padding-xlarge {
	padding: 16px 32px;
}
.w3-padding-xxlarge {
	padding: 24px 48px;
}
.w3-padding-jumbo {
	padding: 32px 64px;
}
.w3-padding-4 {
	padding-top: 4px;
	padding-bottom: 4px;
}
.w3-padding-8 {
	padding-top: 8px;
	padding-bottom: 8px;
}
.w3-padding-12 {
	padding-top: 12px;
	padding-bottom: 12px;
}
.w3-padding-16 {
	padding-top: 16px;
	padding-bottom: 16px;
}
.w3-padding-24 {
	padding-top: 24px;
	padding-bottom: 24px;
}
.w3-padding-32 {
	padding-top: 32px;
	padding-bottom: 32px;
}
.w3-padding-48 {
	padding-top: 48px;
	padding-bottom: 48px;
}
.w3-padding-64 {
	padding-top: 64px;
	padding-bottom: 64px;
}
.w3-padding-128 {
	padding-top: 128px;
	padding-bottom: 128px;
}
.w3-padding-0 {
	padding: 0;
}
.w3-padding-top {
	padding-top: 8px;
}
.w3-padding-bottom {
	padding-bottom: 8px;
}
.w3-padding-left {
	padding-left: 16px;
}
.w3-padding-right {
	padding-right: 16px;
}
.w3-topbar {
	border-top: 6px solid #ccc;
}
.w3-bottombar {
	border-bottom: 6px solid #ccc;
}
.w3-leftbar {
	border-left: 6px solid #ccc;
}
.w3-rightbar {
	border-right: 6px solid #ccc;
}
.w3-row-padding {
	margin-top: 20px;
}
.w3-row-padding, .w3-row-padding>.w3-half, .w3-row-padding>.w3-third, .w3-row-padding>.w3-twothird, .w3-row-padding>.w3-threequarter, .w3-row-padding>.w3-quarter, .w3-row-padding>.w3-col {
	padding: 0 8px;
}
.w3-spin {
	animation: w3-spin 2s infinite linear;
	-webkit-animation: w3-spin 2s infinite linear;
}
@-webkit-keyframes w3-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
@keyframes w3-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
.w3-black {
	color: #fff;
	background: #191816;
}
.w3-container {
	margin-top: 20px;
}
.w3-container p {
	padding: 0 0 20px;
  font-size: 16px;
  line-height: 2.56;
	word-wrap: break-word;
}
.w3-container p img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media screen and (max-width: 480px) {
	.w3-container p {
		/* ===== low480px ===== */
		padding: 10px;
		word-wrap: break-word;
		line-height: 2.15;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.w3-container p {
		/* ===== 480px〜600px ===== */
		padding: 10px;
		word-wrap: break-word;
	}
}
.w3-container p a {
	height: auto;
	padding: 0 10px;
	margin: 20px auto;
	display: inline-block;
	color: #fff;
	background: #191816;
	text-decoration: none;
}
.w3-container p a:hover {
	color: #fff;
	background: #d5c7ac;
}
.w3-panel {
	padding: 0.01em 16px;
	margin-top: 16px;
	margin-bottom: 16px;
}
.w3-example {
	background-color: #f1f1f1;
	padding: 0.01em 16px;
}
.w3-code, .w3-codespan {
	font-size: 16px;
}
.w3-code {
	line-height: 1.4;
	width: auto;
	background-color: #fff;
	padding: 8px 12px;
	border-left: 4px solid #4caf50;
	word-wrap: break-word;
}
.w3-codespan {
	color: crimson;
	background-color: #f1f1f1;
	padding-left: 4px;
	padding-right: 4px;
	font-size: 110%;
}
.w3-example, .w3-code {
	margin: 20px 0;
}
.w3-card {
	border: 1px solid #ccc;
}
.w3-card-2, .w3-example {
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.w3-card-4, .w3-hover-shadow:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.w3-card-8 {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.w3-card-12 {
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.w3-card-16 {
	box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.w3-card-24 {
	box-shadow: 0 24px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
.w3-animate-fading {
	-webkit-animation: fading 10s infinite;
	animation: fading 10s infinite;
}
@-webkit-keyframes fading {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fading {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.w3-animate-opacity {
	-webkit-animation: opac 0.8s;
	animation: opac 0.8s;
}
@-webkit-keyframes opac {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes opac {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.w3-animate-top {
	position: relative;
	-webkit-animation: animatetop 0.4s;
	animation: animatetop 0.4s;
}
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}
@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}
.w3-animate-left {
	position: relative;
	-webkit-animation: animateleft 0.4s;
	animation: animateleft 0.4s;
}
@-webkit-keyframes animateleft {
	from {
		left: -300px;
		opacity: 0;
	}
	to {
		left: 0;
		opacity: 1;
	}
}
@keyframes animateleft {
	from {
		left: -300px;
		opacity: 0;
	}
	to {
		left: 0;
		opacity: 1;
	}
}
.w3-animate-right {
	position: relative;
	-webkit-animation: animateright 0.4s;
	animation: animateright 0.4s;
}
@-webkit-keyframes animateright {
	from {
		right: -300px;
		opacity: 0;
	}
	to {
		right: 0;
		opacity: 1;
	}
}
@keyframes animateright {
	from {
		right: -300px;
		opacity: 0;
	}
	to {
		right: 0;
		opacity: 1;
	}
}
.w3-animate-bottom {
	position: relative;
	-webkit-animation: animatebottom 0.4s;
	animation: animatebottom 0.4s;
}
@-webkit-keyframes animatebottom {
	from {
		bottom: -300px;
		opacity: 0;
	}
	to {
		bottom: 0px;
		opacity: 1;
	}
}
@keyframes animatebottom {
	from {
		bottom: -300px;
		opacity: 0;
	}
	to {
		bottom: 0;
		opacity: 1;
	}
}
.w3-animate-zoom {
	-webkit-animation: animatezoom 0.6s;
	animation: animatezoom 0.6s;
}
@-webkit-keyframes animatezoom {
	from {
		-webkit-transform: scale(0);
	}
	to {
		-webkit-transform: scale(1);
	}
}
@keyframes animatezoom {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
.w3-animate-input {
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
}
.w3-animate-input:focus {
	width: 100%;
}
.w3-opacity, .w3-hover-opacity:hover {
	filter: alpha(opacity=60);
	-webkit-backface-visibility: hidden;
}
.w3-opacity-off, .w3-hover-opacity-off:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-backface-visibility: hidden;
}
.w3-opacity-max {
	opacity: 0.25;
	filter: alpha(opacity=25);
	-webkit-backface-visibility: hidden;
}
.w3-opacity-min {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-webkit-backface-visibility: hidden;
}
.w3-greyscale-max, .w3-grayscale-max, .w3-hover-greyscale:hover, .w3-hover-grayscale:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.w3-greyscale, .w3-grayscale {
	-webkit-filter: grayscale(75%);
	filter: grayscale(75%);
}
.w3-greyscale-min, .w3-grayscale-min {
	-webkit-filter: grayscale(50%);
	filter: grayscale(50%);
}
.w3-sepia {
	-webkit-filter: sepia(75%);
	filter: sepia(75%);
}
.w3-sepia-max, .w3-hover-sepia:hover {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
}
.w3-sepia-min {
	-webkit-filter: sepia(50%);
	filter: sepia(50%);
}
.w3-text-shadow {
	text-shadow: 1px 1px 0 #444;
}
.w3-text-shadow-white {
	text-shadow: 1px 1px 0 #ddd;
}
.w3-transparent {
	background-color: transparent;
}
.w3-hover-none:hover {
	box-shadow: none;
	background-color: transparent;
}
/*  / web_article_page
--------------------------------------------------------------
------------------------------------------------------------*/

/* contact
------------------------------------------------------------*/

main section#hire {
	margin: 60px auto 50px;
	text-align: center;
	padding: 50px 0 110px;
	width: 580px;
	max-width: 1100px;
}
@media screen and (max-width: 480px) {
	main section#hire {
		width: 90%;
	}
	body.contact_area section#hire {
		/* ===== low480px ===== */
		margin: 60px auto;
	}
}
@media screen and (min-width: 480px) and (max-width: 960px) {
	main section#hire {
		width: 90%;
	}
	body.contact_area section#hire {
		/* ===== 480px〜600px ===== */
		margin: 60px auto;
		padding: 50px 0;
	}
}
section#hire h2.contact_title {
	margin: 0 0 70px;
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-weight: 100;
}
section#hire h2.contact_title span {
	font-size: 32px;
	font-size: 3.2rem;
	font-weight: bold;
}
section#hire h2.contact_title span::after {
    content: "";
    width: 5%;
		margin: 0 auto;
    padding-bottom: 0;
    display: block;
    position: absolute;
    border-bottom: 5px solid #d5c7ac;
		right: 0;
		left: 0;
}
form.form_text {
	color: #d5c7ac;
	font-size: 62.5%;
	width: 100%;
	margin: 0 auto;
}

	form.form_text button[type="submit"] {
		padding: 13px 50px;
		color: #191816;
		border: 1px solid #191816;
		-webkit-appearance: none;
		font-weight: 400;
		position: relative;
		font-size: 1.4em;
    background: #fff;
		letter-spacing: 0.1em;
		font-size: 16px;
		transform: scale(1);
		font-family: 'Lato', sans-serif;
		-webkit-transition: all 333ms ease-in-out;
		-moz-transition: all 333ms ease-in-out;
		-o-transition: all 333ms ease-in-out;
		-ms-transition: all 333ms ease-in-out;
		transition: all 333ms ease-in-out;
	}
	form.form_text button[type="submit"]:hover {
		background: #d5c7ac;
		color: #191816;
		border: 1px solid #d5c7ac;
	}
	form.form_text button[type="submit"]:focus {
		outline: none;
		color: #fff;
		border: none;
		background: #191816;
	}

@media screen and (max-width: 480px) {
	form.form_text {
		/* ===== low480px ===== */
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	form.form_text {
		/* ===== 480px〜600px ===== */
		width: 100%;
	}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	form.form_text {
		/* ===== 600px〜960px ===== */
		width: 100%;
	}
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
	form.form_text {
		/* ===== 960px〜1280px ===== */
		width: 100%;
	}
}
form.form_text .field {
	width: 100%;
	position: relative;
	margin-bottom: 15px;
}
form.form_text .field:active label {
	width: 18%;
}
form.form_text .field label {
	position: absolute;
	top: 0;
	left: 0;
	background: #191816;
	width: 100%;
	padding: 18px 0;
	font-size: 1.45em;
	letter-spacing: 0.075em;
	-webkit-transition: all 333ms ease-in-out;
	-moz-transition: all 333ms ease-in-out;
	-o-transition: all 333ms ease-in-out;
	-ms-transition: all 333ms ease-in-out;
	transition: all 333ms ease-in-out;
}
form.form_text .field label+span {
	font-family: 'SSStandard';
	opacity: 0;
	color: white;
	display: block;
	position: absolute;
	top: 12px;
	left: 7%;
	font-size: 2.5em;
	text-shadow: 1px 2px 0 #cd6302;
	-webkit-transition: all 333ms ease-in-out;
	-moz-transition: all 333ms ease-in-out;
	-o-transition: all 333ms ease-in-out;
	-ms-transition: all 333ms ease-in-out;
	transition: all 333ms ease-in-out;
}
form.form_text .field input[type="text"], form.form_text .field textarea {
	border: none;
	background: #e8e9ea;
	width: 80.5%;
	margin: 0;
	padding: 20px 0 18px;
	padding-left: 19.5%;
	color: #191816;
	font-size: 1.4em;
	letter-spacing: 0.05em;
	font-size: 16px;
	transform: scale(1);
}
@media screen and (max-width: 480px) {
	form.form_text .field input[type="text"], form.form_text .field textarea {
		/* ===== low480px ===== */
		width: 97%;
		padding: 19.25px 0;
		text-align: right;
		font-size: 16px;
		transform: scale(1);
		padding-right: 10px;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	form.form_text .field input[type="text"], form.form_text .field textarea {
		/* ===== 480px〜600px ===== */
		width: 100%;
		padding: 18px 0;
		text-align: right;
		font-size: 16px;
		transform: scale(1);
	}
}
form.form_text .field input[type="text"]#msg, form.form_text .field textarea#msg {
	height: 18px;
	resize: none;
	font: 400 14.3333px Arial;
	-webkit-transition: all 333ms ease-in-out;
	-moz-transition: all 333ms ease-in-out;
	-o-transition: all 333ms ease-in-out;
	-ms-transition: all 333ms ease-in-out;
	transition: all 333ms ease-in-out;
}
form.form_text .field input[type="text"]:focus, form.form_text .field input[type="text"].focused, form.form_text .field textarea:focus, form.form_text .field textarea.focused {
	outline: none;
}
form.form_text .field input[type="text"]:focus#msg, form.form_text .field input[type="text"].focused#msg, form.form_text .field textarea:focus#msg, form.form_text .field textarea.focused#msg {
	padding-bottom: 150px;
}
form.form_text .field input[type="text"]:focus+label, form.form_text .field input[type="text"].focused+label, form.form_text .field textarea:focus+label, form.form_text .field textarea.focused+label {
	width: 18%;
	background: #d5c7ac;
	color: #191816;
}
@media screen and (max-width: 480px) {
	form.form_text .field input[type="text"]:focus+label, form.form_text .field input[type="text"].focused+label, form.form_text .field textarea:focus+label, form.form_text .field textarea.focused+label {
		/* ===== low480px ===== */
		width: 30%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	form.form_text .field input[type="text"]:focus+label, form.form_text .field input[type="text"].focused+label, form.form_text .field textarea:focus+label, form.form_text .field textarea.focused+label {
		/* ===== 480px〜600px ===== */
		width: 30%;
	}
}
form.form_text .field input[type="text"].focused+label, form.form_text .field textarea.focused+label {
	background: #d5c7ac;
	color: #191816;
}
form.form_text .field:hover label {
	width: 18%;
	background: #d5c7ac;
	color: #fff;
}
form.form_text button[type="button"] {
	padding: 13px 50px;
	background: none;
	color: #d5c7ac;
	border: 2px solid #d5c7ac;
	background: #191816;
	-webkit-appearance: none;
	position: relative;
	font-size: 1.4em;
	letter-spacing: 0.1em;
	font-size: 16px;
	transform: scale(1);
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	-webkit-transition: all 333ms ease-in-out;
	-moz-transition: all 333ms ease-in-out;
	-o-transition: all 333ms ease-in-out;
	-ms-transition: all 333ms ease-in-out;
	transition: all 333ms ease-in-out;
}
form.form_text button[type="button"]:hover {
	background: #d5c7ac;
	color: #191816;
}
form.form_text button[type="button"]:focus {
	outline: none;
	color: #fff;
	border: none;
	background: #191816;
}
.alert-danger {
	margin: 40px auto 0;
}
.alert-success {
	width: 540px;
	padding: 15px 0;
	margin: 50px auto 0;
	letter-spacing: 0;
	font-size: 20px;
	border-radius: 50px;
	color: #333;
	font-weight: normal;
}
@media screen and (max-width: 480px) {
	.alert-success {
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 600px) {
	.alert-success {
		width: 100%;
	}
}

/*  / contact
--------------------------------------------------------------
------------------------------------------------------------*/

/* thanks
------------------------------------------------------------*/

section#thanks_area h2 {
	text-align: center;
	padding: 200px 0;
}
/*  / thanks
--------------------------------------------------------------
------------------------------------------------------------*/

/* Footer
------------------------------------------------------------*/

footer {
	padding: 10px 0;
	text-align: center;
	color: #d5c7ac;
	border-top: 1px solid #d5c7ac;
	background-color: #191816;
}
/*# sourceMappingURL=style.css.map */





.aligncenter {
	display: block;
	margin : 50px auto;
}

div.text_link--ver1 {
  color: #191816;
  padding: 0 10px 0;
  margin-bottom: 20px;
}
div.text_link--ver1 a {
	border-bottom: solid 3px #191816;
	position: relative;
	padding-bottom: 5px;
	color: #191816;
  font-size: 20px;
}
div.text_link--ver1 a:hover {
  color: #d5c7ac;
  border-bottom: solid 3px #d5c7ac;
  text-decoration: none;
  transition: 0.5s;
}
div.text_link--ver1 a:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #d5c7ac;
  bottom: -3px;
  width: 50%;
}
div.text_link--ver1 a:hover:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #191816;
  bottom: -3px;
  width: 50%;
  transition: 0.5s;
}

/*星のスタイル*/
.rating-star{
  color: #f5bc55;
  font-size: 1.2em;
}
/*数字のスタイル*/
.rating-number{
  color: #333;
  font-size: 0.9em;
  margin-left: 0.4em;
}
.star_box {
	display: flex;
	align-items: center;
}
.star_box__num {
	margin-left: 10px;
}

.coding_tips {
	background: #191816;
	color: #fff;
	padding: 30px;
	border-radius: 10px;
	width: 92%;
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: pre-wrap; /* CSS3 */
	word-wrap: break-word; /* IE 5.5+ */
}

.sponser_link {
	text-align: center;
	margin-top: 60px;
	display: block;
}
.adsense_width_pc{
	margin-bottom: 20px;
}
.adsense_width_pc ins {
	margin-bottom: 40px;
	width: 100%;
	display: block;
}
.adsense_height_pc ins {
	margin: 20px auto 0!important;
	width: 100%!important;
	display: block!important;
	height: auto !important;
}

.adsense_width_pc .ads_responsive,
.adsense_height_pc .ads_responsive {
	width: 100% !important;
	height: 100px !important;
	margin: 0 auto !important;
	text-align: center;
	overflow: hidden;
}
.right_column_adsense_pc {
	display: none;
}
.adsense_height_pc .ads_responsive {
	width: 400px !important;
	height: 400px !important;
	overflow: unset;
	margin: 0 auto !important;
	display: block !important;
}
@media screen and (max-width: 730px) {
	.adsense_height_pc .ads_responsive,
	.ads_responsive {
		width: 100% !important;
		text-align: center;
		overflow: hidden;
		margin: 0 !important;
	}
	.adsense_height_pc .ads_responsive {
		height: 149px !important;
	}
	.right_column_adsense_pc {
		display: none;
	}
	.right_column_adsense_sp {
		display: block;
	}

}

@media screen and (max-width: 480px) {
	.coding_tips {
		background: #191816;
		color: #fff;
		padding: 7vmin;
		font-size: 3.58vmin;
		border-radius: 10px;
		word-wrap: break-word;
		width: 80%;
		white-space: -moz-pre-wrap; /* Mozilla */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: -o-pre-wrap; /* Opera 7 */
		white-space: pre-wrap; /* CSS3 */
		word-wrap: break-word; /* IE 5.5+ */
	}
}


div.pay_button form input {
	width: 100% !important;
	display: block !important;
	margin-top: -40px;
}
div.pay_button form input:hover {
	opacity: 0.7;
	transition: 0.2s;
}
@media screen and (max-width: 950px) {
	div.pay_button form input {
		margin-top: -10px;
	}
}