/*
Theme Name:　Bruno Template vol.1
Theme URI:　https://web-bruno.com
Author: Bruno masa
Author URI: https://web-bruno.com
Version: 1.01
*/

/*######################################################################

		Reset CSS

************************************************************************/

/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	list-style:none;
}

ol {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	line-height:1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
	display:block;
	height:0;
	border:0;
	border-top:0;
	margin:0;
	padding:0;
}

input, select {
	vertical-align:middle;
}


iframe {
	max-width: 100%;
}

address {
	font-style: normal;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
	background-color: #f6f5f0!important;
}


/*
////////////////////////////////////////////////////////////////////////

	◆ General

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

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face{
    font-family: 'WebIconFonts';
    src: url('https://web-bruno.com/wp-content/themes/bruno/font/webiconfonts.eot');
    src: url('https://web-bruno.com/wp-content/themes/bruno/font/WebIconFonts.eot') format('eot'),
         url('font/WebIconFonts.woff') format('woff'),
         url('font/WebIconFonts.ttf') format('truetype');
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: normal;
	 src: local("YuGothic-Medium"),
		  local("Yu Gothic Medium"),
		  local("YuGothic-Regular");
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: bold;
	 src: local("YoGothic-Bold"),
		  local("Yu Gothic");
}

html {
	font-size: 62.5%;
}

body {
	color: #555;
	font-size: 1.6rem;
	font-family: "Open Sans","Noto Sans Japanese","メイリオ",sans-serif;
	line-height: 1.61;
/*	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	font-feature-settings: "pwid";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
}

@media screen and (max-width: 568px){
	body {
		font-size: 1.5rem;
	}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}

::-webkit-scrollbar {
	width: .7rem;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(226,190,25,1);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}


/* -------
	Link Style
------- */

a{
	color: #E2BE19;
	text-decoration: none;
}

a:hover {
	color: #FAD62E;
	text-decoration: underline;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	transition: 0.3s ease;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}


/* -------
	Section
------- */

.section {
	margin-bottom: 8rem;
	background-color: #fff;
}
.section_area {
	margin: 0 auto;
	width: 1280px;
}

.section:nth-last-of-type(1) {
	padding-bottom: 4rem;
}

@media screen and (max-width: 1280px) {
	.section {
		margin-bottom: 3rem;
		background-color: #fff;
	}

	.section_area {
		padding-bottom: 4em;
		width: 100%;
	}
}

@media screen and (max-width: 568px) {
	.section_area:last-child {
		padding-bottom: 0;
	}
}

.contents-bg {
	padding: 7rem 0;
	background-color: #F9F8F2;
}

@media screen and (max-width: 568px){
	.contents-bg {
		padding: 3rem 0;
	}
}

#page_header {
	margin: 0 0 7em;
}

.section_title {
	margin: 0 0 1em;
	font-size: 2.3rem;
	text-align: center;
	line-height: 1.2;
	letter-spacing: normal;
}
.section_title span {
	display: block;
	margin: 0 0 .3em;
	font-size: 1.6rem;
}

#container p.section_sub_txt {
	margin: 0 0 3em;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.section_title {
		font-size: 2.1rem;
	}

	.section_title {
		display: block;
		margin: 0 auto 1em;
		width: 80%;
	}
	.section_title span {
		font-size: 1.4rem;
	}

	.section_sub_txt {
		margin: 0 0 2em;
		padding: 0 26px;
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 568px) {
	.section_title {
		font-size: 2rem;
	}
}

.reverse-contents {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.reverse-contents:nth-child(even) {
	flex-direction: row-reverse;
}

.reverse-contents:not(:last-child) {
	margin-bottom: 7rem;
}

.reverse-contents-img {
	width: 42%;
}
.reverse-contents-text {
	width: 55%;
}

@media screen and (max-width: 768px){
	.reverse-contents {
		margin-bottom: 5rem;
		padding: 0 2rem;
	}

	.reverse-contents-img {
		margin-bottom: 2rem;
		width: 100%;
	}
	.reverse-contents-text {
		width: 100%;
	}
}

.reverse-contents-img img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.reverse-contents-title {
	margin-bottom: 2rem;
	font-size: 2.8rem;
}

@media screen and (max-width: 768px){
	.reverse-contents-title {
		margin-bottom: 1.5rem;
		font-size: 2.4rem;
		text-align: center;
	}
}

.reverse-contents-text p {
	margin-bottom: 1.7rem;
}

.reverse-more a {
	display: inline-block;
	position: relative;
	padding: .7rem 2rem;
	width: 25rem;
	color: #4a4a4a;
	font-size: 1.8rem;
	font-weight: bold;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	background-color: #E2BE19;
	border-radius: .4rem;
}
.reverse-more a:hover {
	opacity: .7;
	text-decoration: none;
}

.reverse-more a:after {
	content: '\f101';
	position: absolute;
	top: .7rem;
	right: 3rem;
	font-family: 'FontAwesome';
}

@media screen and (max-width: 768px){
	.reverse-more {
		text-align: center;
	}
}

@media screen and (max-width: 568px){
	.reverse-more {
		margin: 0 auto;
		width: 90%;
	}

	.reverse-more a {
		padding: 1rem 3rem;
		width: 100%;
	}

	.reverse-more a:after {
		top: 1rem;
		right: 3rem;
		font-family: 'FontAwesome';
	}
}

.section_body {
	position: relative;
}

.section_body h2 {
	margin: 0 0 1em;
	font-size: 2.6rem;
}

@media screen and (max-width: 768px) {
	.section_body h2 {
		margin: 0 0 .7em;
		font-size: 2rem;
	}
}

.section_image_right {
	text-align: right;
}

.section_contents_left {
	display: table;
	position: absolute;
	right: auto;
	left: 0;
	top: 50px;
	padding: 3em;
	width: 60%;
	background-color: rgba(255,255,255,.6);
}

.section_image_left {
	text-align: left;
}

.section_contents_right {
	display: table;
	position: absolute;
	right: 0;
	top: 50px;
	padding: 3em;
	width: 60%;
	background-color: rgba(255,255,255,.6);
}

.section_image_right img,
.section_image_left img {
	display: inline-block;
	width: 50%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.section_image_right {
		text-align: left;
	}

	.section_contents_left,
	.section_contents_right {
		display: block;
		position: relative;
		right: 0;
		top: 0;
		padding: 0 2em;
		width: 100%;
	}

	.section_image_right,
	.section_image_left {
		margin: 0 0 3em;
	}

	.section_image_right img,
	.section_image_left img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.section_txt {
	font-size: 1.5rem;
}

.section_txt p {
	margin: 0 0 1.61em;
}

.section_txt p:last-child {
	margin: 0;
}


/*
////////////////////////////////////////////////////////////////////////

	◆ Header

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

/*
	header-area
/////////////////////////////////////////////////////////*/

/*  header-general */

#header {
	position: relative;
	z-index: 100;
}

#wrap {
	display: none;
}

.top-header-bg {
	background-color: #000;
}

.header-area {
	position: relative;
	opacity: 0;
	-webkit-animation: headercontents 1s ease 1.0s 1 forwards;
	animation: headercontents 1s ease 1.0s 1 forwards;
}

.header-area a:hover {
	text-decoration: none;
}

.header-area:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,.3);
	z-index: 0;
}

.page-header:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,.5);
	z-index: 0;
}

.top-header {
	position: relative;
	height: 84rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

@media screen and (max-width: 768px){
	.top-header {
		height: 32rem;
	}
}

.page-header {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.header-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	padding: 0 2rem;
	z-index: 10;
}

.header-wrap.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: rgba(0,0,0,1);
	z-index: 9000;
}

@media screen and (max-width: 1000px){
	.header-wrap {
		padding: 1.5rem 2rem 1.5rem 1.5rem;
		width: 100%;
	}

	.header-wrap.fixed {
		background-color: rgba(0,0,0,.8);
	}
}

@media screen and (max-width: 568px){
	.header-wrap {
		height: 6rem;
	}

	.header-wrap.fixed {
		background-color: rgba(0,0,0,.8);
	}
}

.header-wrap a:hover {
	text-decoration: none;
}

.header-btn-activebg .header-wrap {
	background-color: rgba(0,0,0,.8);
}

.logo a {
	display: inline-block;
	position: relative;
	color: #fff;
	font-size: 6rem;
	font-family: 'Courgette', cursive;
	line-height: 1;
	z-index: 200;
	overflow: hidden;
	opacity: 0;
	-webkit-animation: headercontents .5s ease 1.0s 1 forwards;
	animation: headercontents .5s ease 1.0s 1 forwards;
}

@media screen and (max-width: 568px){
	.logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}

.logo a:hover {
	color: #fff;
}

.logo a:after {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 80%;
	margin-top: -8px;
	right: 0;
	background: #E2BE19;
	transform: translate3d(-100%,0,0);
	transition: transform 0.4s;
	transition-timing-function: cubic-bezier(0,0,0.25,1);
}

.logo a:hover::after {
	transform: translate3d(100%,0,0);
}

.logo a::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #E2BE19;
	white-space: nowrap;
	width: 0%;
	transition: width 0.4s 0.3s;
}

.logo a:hover::before {
	width: 100%;
}

.header-wrap.fixed .logo a {
	font-size: 3.2rem;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

@media screen and (max-width: 768px){
	.logo a,
	.header-wrap.fixed .logo a {
		font-size: 2.8rem;
	}
}

.header-nav {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	align-items: center;
	opacity: 0;
	-webkit-animation: headercontents 0.5s ease 2s 1 forwards;
	animation: headercontents 0.5s ease 2s 1 forwards;
}

.header-nav-sns {
	margin: 0 1.5rem;
}

.header-nav-sns.fb a {
	margin-right: 3rem;
}

.header-nav-sns a {
	color: #fff;
	font-size: 2rem;
}

.header-nav-txt > a {
	display: inline-block;
	position: relative;
	margin: 0 3rem;
	color: rgba(255,255,255,1);
	font-size: 1.8rem;
	font-family: 'Courgette', cursive;
	text-align: center;
	letter-spacing: 1px;
}

.header-nav-txt > a:before {
	position: absolute;
	bottom: 0;
	display: block;
	height: 3px;
	width: 0%;
	content: "";
	background-color: #E2BE19;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.header-nav-txt > a:hover:before {
  width: 100%;
}

.header-nav-txt > ul > li:hover {
  background-color: rgba(0,0,0,1);
  z-index: 1000;
}

.header-nav-txt > .header-menu-area {
	position: absolute;
	left: 0;
	width: 100%;
	max-height: 0;
	text-align: center;
	overflow: hidden;
	opacity: 0;
}

.header-nav-txt:hover > .header-menu-area {
  min-height: 100%!important;
	-webkit-transition: all .5s;
	transition: all .5s;
  overflow: visible;
  opacity: 1;
}

.header-nav-txt > ul > li > a {
	display: inline-block;
	padding: 1rem 2rem;
  transition: all .2s ease-in;
}

.header-nav-txt > .header-menu-area a {
  color: #fff;
}
.header-nav-txt > .header-menu-area a:hover {
	color: #E2BE19;
}

.header-nav-txt > .header-menu-inner li {
  display: inline-block;
}

.header-menu-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	padding: 3rem;
  background-color: rgba(0,0,0,1);
  z-index: 100;
}

.header-menu-inner li {
	padding: 3rem;
	width: 50%;
}

.header-menu-inner li:nth-child(2n+1) {
	border-right: 1px dotted #4d4f53;
}

.header-menu-inner li:not(:nth-child(n+3)) {
	border-bottom: 1px dotted #4d4f53;
}

.header-menu-inner li a {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.header-menu-inner-figure {
	width: 35%;
}
.header-menu-inner-contents {
	width: 60%;
	text-align: left;
}

.header-menu-inner-figure img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.header-menu-inner-title {
	margin-bottom: 1rem;
	font-size: 1.7rem;
}
.header-menu-inner-text {
	font-size: 1.2rem;
	font-weight: normal;
}

.header-menu-inner-blog {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 3rem;
  background-color: rgba(0,0,0,1);
}

.header-menu-inner-blog li {
	padding: 3rem;
	width: 20%;
}

.header-menu-inner-blog-figure {
	margin-bottom: 1rem;
	height: 11rem;
	overflow: hidden;
}

.header-menu-inner-blog-figure img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.header-menu-inner-blog-contents {
	font-size: 1.4rem;
	text-align: center;
}

.header-menu-inner-tag {
	padding: 0 3rem;
  background-color: rgba(0,0,0,1);
}

.header-menu-inner-tag-section {
	display: flex;
	flex-wrap: wrap;
	padding: 3rem 2rem;
	border-top: 1px dotted #4d4f53;
}

.header-menu-inner-tag-section li {
	margin: 0 2rem 2rem 0;
	font-size: 1.4rem;
}

.header-nav-contact a {
	display: block;
	position: relative;
	padding: 1.5rem 0;
	width: 18rem;
	color: #000;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	background-color: #E2BE19;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.header-nav-contact a:hover {
	opacity: .7;
}

.header-wrap.fixed .header-nav-contact a {
	padding: .7rem 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.header-nav-contact span,
.header-nav-contact .fa-envelope {
	display: block;
}

.header-nav-contact .fa-envelope {
	margin: 0 auto .5rem;
	font-size: 2.5rem;
}

.header-wrap.fixed .header-nav-contact .fa-envelope {
	margin: 0 auto .2rem;
	font-size: 2rem;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.header-nav-contact span {
	font-size: 3rem;
	font-family: 'Courgette', cursive;
	line-height: 1;
}

.header-wrap.fixed .header-nav-contact span {
	font-size: 2.1rem;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.header-nav-contact .fa-hand-point-up {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.8rem;
	transform: rotate(-30deg);
}

.header-nav-contact a:hover .fa-hand-point-up {
	bottom: 1.3rem;
	right: 1.3rem;
}

.header-btn {
	display: none;
}

@media screen and (max-width: 1000px){
	.header-nav {
		display: none;
	}

	.header-btn,
	.header-btn span {
		display: inline-block;
		transition: all .4s;
		opacity: 0;
		-webkit-animation: headercontents 0.5s ease 2s 1 forwards;
		animation: headercontents 0.5s ease 2s 1 forwards;
	}
	.header-btn {
		position: relative;
		width: 2rem;
		height: 1rem;
	}
	.header-btn span {
		position: absolute;
		left: 0;
		width: 100%;
		height: .1rem;
		background-color: #fff;
	}
	.header-btn span:nth-of-type(1) {
		top: 0;
	}
	.header-btn span:nth-of-type(2) {
		bottom: 0;
	}

	.header-btn.header-btn-active span:nth-of-type(1) {
		-webkit-transform: translateY(.45rem) rotate(-45deg);
		transform: translateY(.45rem) rotate(-45deg);
	}
	.header-btn.header-btn-active span:nth-of-type(2) {
		-webkit-transform: translateY(-.45rem) rotate(45deg);
		transform: translateY(-.45rem) rotate(45deg);
	}

	.header-menu {
		position: absolute;
		top: 6rem;
		left: 0;
		width: 100%;
		height: 42.7rem;
		background-color: rgba(0,0,0,.8);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.header-menu-list {
		border-top: 1px solid #111;
	}

	.header-menu-list .fa-folder,
	.header-menu-list .fa-envelope-open {
		margin-right: .5rem;
	}

	.header-menu li a {
		display: block;
		padding: 2rem 2rem;
		width: 100%;
		color: #fff;
		font-size: 1.3rem;
		border-bottom: 1px solid #2a2a2a;
	}

	.header-menu li a:hover {
		text-decoration: none;
		opacity: .8;
	}

	.header-menu-aco01 label,
	.header-menu-aco02 label {
		display: block;
		position: relative;
		padding: 2rem;
		width: 100%;
		color: #fff;
		font-size: 1.3rem;
		border-bottom: 1px solid #2a2a2a;
	}

	.header-menu-aco01 label:after,
	.header-menu-aco02 label:after {
		position: absolute;
		top: 2rem;
		right: 2rem;
		content: '\f0d7';
		font-family: FontAwesome;
	}

	.header-menu-aco01 label:hover,
	.header-menu-aco02 label:hover {
		opacity: .8;
	}

	.header-menu-aco01 input,
	.header-menu-aco02 input {
		display: none;
	}

	.header-menu-aco01 .header-menu-show,
	.header-menu-aco02 .header-menu-show {
		padding: 0;
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: all .2s ease-in;
	}

	.header-menu-show li a {
		padding-left: 4rem;
	}

	.header-menu-acc:checked + .header-menu-show {
		padding: 5px;
		height: auto;
		background-color: rgba(0,0,0,0);
		opacity: 1;
	}
}

.header-message {
	position: absolute;
	bottom: -4rem;
	left: 9rem;
	font-family: 'Courgette', cursive;
	opacity: 0;
	-webkit-animation: headermessage .5s ease 3s 1 forwards;
	animation: headermessage .5s ease 3s 1 forwards;
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

.header-message p {
	color: #fff;
	font-size: 10rem;
	text-shadow: 0 2px 4px rgba(0,0,0,.5);
	line-height: 1.3;
}

.header-message p span {
	display: block;
	color: #E2BE19;
	font-size: 17rem;
}

@media screen and (max-width: 768px){
	.header-message {
		position: absolute;
		bottom: 0;
		top: 57%;
		left: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%) rotate(-5deg);
		transform: translateX(-50%) translateY(-50%) rotate(-5deg);
	}

	.header-message p {
		font-size: 3.5rem;
	}

	.header-message p span {
		font-size: 9rem;
	}
}

@-webkit-keyframes headercontents {
  100% {
    opacity: 1;
  }
}
@keyframes headercontents {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes headermessage {
  100% {
    opacity: 1;
  }
}
@keyframes headermessage {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes ani-mouse {
	0% {
		opacity: 1;
		top: 29%;
	}
	15% {
		opacity: 1;
		top: 50%;
	}
	50% {
		opacity: 0;
		top: 50%;
	}
	100% {
		opacity: 0;
		top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
		opacity: 1;
		top: 29%;
	}
	15% {
		opacity: 1;
		top: 50%;
	}
	50% {
		opacity: 0;
		top: 50%;
	}
	100% {
		opacity: 0;
		top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
		opacity: 1;
		top: 29%;
	}
	15% {
		opacity: 1;
		top: 50%;
	}
	50% {
		opacity: 0;
		top: 50%;
	}
	100% {
		opacity: 0;
		top: 29%;
	}
}
.scroll-btn {
	display: block;
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	text-align: center;
}

@media screen and (max-width: 768px){
	.scroll-btn {
		right: 0;
		left: 0;
	}
}

.scroll-btn > * {
	font-size: 13px;
	font-weight: normal;
	color: #7f8c8d;
	color: #ffffff;
	font-family: 'Courgette', cursive;
	letter-spacing: 2px;
}

.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #ffffff;
}

.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: .8;
	filter: alpha(opacity=80);
}

.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 3.5rem;
	height: 5.5rem;
	margin: 0 auto .5rem;
	border: 3px solid white;
	border-radius: 2rem;
}

@media screen and (max-width: 768px){
	.scroll-btn .mouse {
		width: 2.7rem;
		height: 4rem;
	}
}

.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 4px;
	height: 8px;
	margin: -4px 0 0 -2px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;
}


/*---  Blur  ---*/

.header-wrap.fixed {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.header-btn-activebg .header-wrap {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.header-btn-activebg .header-menu {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/*.header-btn-activebg .header-message,
.header-btn-activebg #container,
.header-btn-activebg .header_image_txt,
.header-btn-activebg #post_contents,
.header-btn-activebg #post-footer,
.header-btn-activebg #footer {
	-webkit-filter: blur(3px);
	filter: blur(3px);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}*/


/*
	header-title etc
/////////////////////////////////////////////////////////*/

.header-title-area {
	position: relative;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 10rem 0;
	color: #fff;
	text-align: center;
	animation: fadeIn 1s linear 0s 1 normal;
	-webkit-animation: fadeIn 1s linear 0s 1 normal;
	z-index: 1;
}

@media screen and (max-width: 768px){
	.header-title-area {
		padding: 3rem 0 5rem;
	}
}

.header-bg {
	position: relative;
	height: 100%;
	background: rgba(0,0,0,.5);
	/*background-image: radial-gradient(rgba(0,0,0,.2) 20%, transparent 0), radial-gradient(rgba(0,0,0,.2) 20%, transparent 0);*/
	background-position: 0 0, 3px 3px;
	background-size: 6px 6px;
}

.header_image_txt {
	position: relative;
	padding: 10rem 0;
	width: 100%;
	height: auto;
	color: #fff;
	text-align: center;
	z-index: 1;
}
@media screen and (max-width: 768px) {
	.header_image_txt {
		padding: 10rem 0;
	}
}
@media screen and (max-width: 568px) {
	.header_image_txt {
		padding: 3rem 0 10rem;
	}
}

.header_image_txt a {
	display: block;
	width: 100%;
	height: auto;
}

.work_image_txt {
	padding: 20em 0;
	width: 100%;
	height: auto;
	color: #e5e5de;
	text-align: center;
	background: rgba(0,0,0,.5);
	/*background-image: radial-gradient(rgba(0,0,0,.2) 20%, transparent 0), radial-gradient(rgba(0,0,0,.2) 20%, transparent 0);*/
	background-position: 0 0, 3px 3px;
	background-size: 6px 6px;
}
@media screen and (max-width: 840px) {
	.work_image_txt {
		padding: 15em 0;
	}
}
@media screen and (max-width: 768px) {
	.work_image_txt {
		padding: 10em 0;
	}
}
@media screen and (max-width: 568px) {
	.work_image_txt {
		padding: 10em 0;
	}
}

.header_image_txt a {
	display: block;
	width: 100%;
	height: auto;
}

.image_title {
	margin: 0 auto 1em;
	width: 800px;
	font-size: 3.6rem;
	font-weight: bold;
	text-align: left;
	text-shadow: 0 2px 3px rgba(0,0,0,0.8);
	animation: fadeIn 2s linear 0s 1 normal;
	-webkit-animation: fadeIn 2s linear 0s 1 normal;
}

@media screen and (max-width: 800px) {
	.image_title {
		margin: 0 auto 1em;
		width: 85%;
		font-size: 2.6rem;
	}
}

@media screen and (max-width: 568px) {
	.image_title {
		font-size: 2.1rem;
	}
}

.header_image_tag li {
	display: inline-block;
	margin: 0 1em 0 0;
	font-size: 1.4rem;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

@media screen and (max-width: 568px) {
	.header_image_tag li {
		font-size: 1.2rem;
	}

	.header_image_tag li:first-child {
		display: block;
	}
}

.post-thunbnail-no {
	display: none;
}

.newpost {
	position: absolute;
	bottom: 0;
	width: 100%;
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
}

.newpost a {
	display: block;
	padding: .5rem 0;
	color: #fff;
	background-color: rgba(0,0,0,.7);
}
.newpost a:hover {
	opacity: .6;
}

.newpost a span {
	margin-right: 1rem;
}

.prof-header-title-area {
	position: relative;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 6rem 0;
	color: #fff;
	text-align: center;
	animation: fadeIn 1s linear 0s 1 normal;
	-webkit-animation: fadeIn 1s linear 0s 1 normal;
	z-index: 2;
}

@media screen and (max-width: 768px){
	.prof-header-title-area {
		padding: 4rem 0 3rem;
	}

	.prof-header-title-area p span {
		display: block;
	}
}

.header-title {
	margin-bottom: .8rem;
	font-size: 2.8rem;
	font-weight: bold;
	text-shadow: 0 2px 3px rgba(0,0,0,0.8);
}
.header-title span {
	display: block;
	font-size: 2.0rem;
}

.header-description {
	font-size: 1.7rem;
	text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

@media screen and (max-width: 568px){
	.header-title {
		margin-bottom: 2rem;
		font-size: 2.3rem;
	}
	.header-title span {
		font-size: 1.6rem;
	}

	.header-description {
		font-size: 1.4rem;
	}
	.header-description span {
		display: block;
	}
}

@media screen and (max-width: 768px){
	.header-title-area p span {
		display: block;
	}
}


/*
////////////////////////////////////////////////////////////////////////

	◆ Contents

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

/* -------
	General
------- */

h1, h2, h3, h4, h5 {
	font-weight: normal;
}

#top-contents {
	padding: 4rem 0 0;
}

@media screen and (max-width: 568px){
	#top-contents {
		padding: 0;
	}
}

#container{
	position: relative;
	font-size: 1.5rem;
	z-index: 0;
}

.contents_area {
	letter-spacing: -.40em;
}

.contents_box3 {
	display: inline-block;
	margin: 0 2% 3em 0;
	width: 32%;
	vertical-align: top;
	letter-spacing: normal;
}
.contents_box3:nth-child(3n+3) {
	margin: 0 0 3em;
}

.work_h3 {
	margin: 0 0 .5em;
	font-size: 2.4rem;
	text-align: center;
}
.work_h3 span.top_price {
	display: block;
	font-size: 1.9rem;
}

@media screen and (max-width: 768px) {
	.contents_box3 {
		display: inline-block;
		margin: 0 0 3em;
		width: 100%;
		vertical-align: top;
		letter-spacing: normal;
	}

	.work_h3 {
		padding: 0 2em;
		font-size: 2rem;
	}
	.work_h3 span.top_price {
		display: block;
		font-size: 1.6rem;
	}
}

.work_img {
	margin: 0 0 1em;
	height: auto;
	overflow: hidden;
}

.work_img img {
	display: block;
	width: 100%;
	height: auto;
}

p.contents_txt {
	font-size: 1.4rem;
}
#container p.contents_txt:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 568px){
	p.contents_txt {
			padding: 0 2em;
	}
}

.pa-top {
	padding-top: 2em;
}

.pt5 {
	padding: 7em 0 100px;
}

@keyframes fadeIn {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}


/* -- Breadcrumb -- */

.breadcrumb {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 3rem auto 7rem;
	width: 80rem;
	font-size: 1.3rem;
}

.breadcrumb li:not(:last-child):after {
	content: '>';
	display: inline-block;
	padding: 0 .7rem;
	color: #999;
	font-size: 1rem;
}

@media screen and (max-width: 800px){
	.breadcrumb {
		margin: 2rem auto 3rem;
		padding: 0 2rem;
		width: 100%;
		font-size: 1.2rem;
	}
}

.more a {
	display: inline-block;
	position: relative;
	padding: 1.5rem 3rem;
	width: 35rem;
	color: #4a4a4a;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0,0,0,.3);
	background-color: #E2BE19;
	border-radius: .4rem;
}
.more a:hover {
	opacity: .7;
	text-decoration: none;
}

.more a:after {
	content: '\f101';
	position: absolute;
	top: 1.5rem;
	right: 3rem;
	font-family: 'FontAwesome';
}

@media screen and (max-width: 768px){
	.more {
		text-align: center;
	}
}

@media screen and (max-width: 568px){
	.more {
		margin: 0 auto;
		width: 90%;
	}

	.more a {
		padding: 1rem 3rem;
		width: 100%;
	}

	.more a:after {
		top: 1rem;
		right: 3rem;
		font-family: 'FontAwesome';
	}
}

.more-center {
	text-align: center;
}

.fadein-animation {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1.5s;
	-ms-animation-duration:1.5s;
	animation-duration:1.5s;
	-webkit-animation-name: fadein-animation;
	-ms-animation-name: fadein-animation;
	animation-name: fadein-animation;
	visibility: visible !important;
}
@-webkit-keyframes fadein-animation {
	0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadein-animation {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/* -------
	Contents_section
------- */

.contents_section {
	margin: 0 auto 5em;
	padding: 4em 10em;
	width: 90%;
	background-color: #f6f5f0;
}

.contents_section_title {
	margin: 0 0 1em;
	font-size: 2.4rem;
	text-align: center;
	line-height: 1.4;
}
@media screen and (max-width: 568px){
	.contents_section_title {
		font-size: 2rem;
	}

	.contents_section_title span {
		display: block;
	}
}

.contents_section_list li {
	margin: 0 0 1em;
	padding-left: 1em;
	text-indent: -1.14em;
}
.contents_section_list li:last-child {
	margin: 0;
}

.contents_section_list li:before {
	content: '\f105';
	font-family: FontAwesome;
	padding: 0 1em 0 0;
	color: #43abc9;
	font-size: 1.2rem;
	font-weight: bold;
	vertical-align: top;
}

@media screen and (max-width: 768px) {
	.contents_section {
		margin: 0 auto 3em;
		padding: 2em;
		width: 100%;
		background-color: #f6f5f0;
	}
}

/*-- auther imformation --*/

.auther-imformation {
	padding: 2em;
	font-size: 1.4rem;
	background-color: #fff;
	border-radius: 3px;
}

#container .auther-imformation p {
	margin: 0 0 .5em;
}

.auther-imformation-wrap {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 568px){
	.auther-imformation {
		padding: 0 2em;
		background-color: transparent;
	}
	.auther-imformation-wrap {
		flex-direction: column;
	}
}

.auther-img {
	margin-right: 5%;
	width: 15%;
}
.auther-contents {
	margin-right: 5%;
	width: 55%;
}
.auther-sns {
	width: 20%;
}

@media screen and (max-width: 568px){
	.auther-img {
		margin-right: 0;
		margin-bottom: 2rem;
		width: 35%;
	}
	.auther-contents {
		margin-right: 0;
		margin-bottom: 2rem;
		width: 100%;
	}
	.auther-sns {
		width: 100%;
	}
}

.auther-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}

#container .auther-imformation p.auther-contents-name {
	margin-bottom: 1.5em;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1;
}

@media screen and (max-width: 568px){
	.auther-contents-title{
		text-align: center;
	}

	#container .auther-imformation p.auther-contents-name {
		margin-bottom: 1em;
		font-size: 2rem;
		text-align: center;
	}
}

.auther-contents-txt {
	margin-bottom: .7em;
}

.auther-sns li a {
	display: block;
	margin: 1rem 0;
	padding: 1em;
	width: 100%;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border-radius: 3px;
}

.auther-sns li:hover {
	opacity: .7;
}


/* -------
	Archive_style
------- */

.contents_center {
	margin: 0 0 2em;
	text-align: center;
}

.contents_more a {
	display: inline-block;
	position: relative;
	padding: 20px 50px 16px;
	color: #4a4a4a;
	font-size: 1.4rem;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	z-index: 2;
}

.contents_more a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.contents_more a,
.contents_more a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.contents_more a:hover {
	color: #fff;
}

.contents_more a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.contents_more a:hover::after {
	background: #4a4a4a;
	-webkit-transform: scale(1);
	transform: scale(1);
}


@media screen and (max-width: 768px) {
	.contents_more_s {
		text-align: center;
	}
}

.contents_more_s a {
	display: inline-block;
	position: relative;
	padding: 2rem 7rem;
	color: #4a4a4a;
	font-size: 1.6rem;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	z-index: 2;
}

.contents_more_s a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.contents_more_s a,
.contents_more_s a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.contents_more_s a:hover {
	color: #fff;
}

.contents_more_s a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.contents_more_s a:hover::after {
	background: #4a4a4a;
	-webkit-transform: scale(1);
	transform: scale(1);
}

@media screen and (max-width: 768px){
	.contents_more_s a {
		padding: 1.4rem 0;
		width: 100%;
		font-size: 1.4rem;
	}
}

/* -------
	Archive_post_box
------- */

.archive_post_box {
	display: inline-block;
	margin: 0 2.75% 3em 0;
	width: 31.5%;
	letter-spacing: normal;
	vertical-align: top;
}
.archive_post_box:nth-child(3n+3) {
	margin: 0 0 3em;
}

@media screen and (max-width: 768px) {
	.archive_post_box {
		margin: 0 4% 3em 0;
		width: 48%;
	}
	.archive_post_box:nth-child(3n+3) {
		margin: 0 4% 3em 0;
	}
	.archive_post_box:nth-child(2n+2) {
		margin: 0 0 3em;
	}
}

@media screen and (max-width: 568px) {
	.archive_post_box,
	.archive_post_box:nth-child(3n+3),
	.archive_post_box:nth-child(2n+2) {
		margin: 0 0 3em;
		width: 100%;
	}

}

.archive_post_box a {
	display: block;
	margin: 0 0 4px;
	padding: 0 0 3em;
	color: #4a4a4a;
	border-bottom: 1px solid #e5e5de;
	transition: all 0.2s ease-in-out;
}
.archive_post_box a:hover {
	margin: 0;
	border-bottom: 5px solid #43abc9;
}

@media screen and (max-width: 568px) {
	.archive_post_box a {
		margin: 0;
		padding: 0;
		border-bottom: 0;
	}
	.archive_post_box a:hover {
		margin: 0;
		border-bottom: 0;
	}
}

.archive_post_image {
	margin: 0 0 2.5em;
	padding: 0 0 3em;
	width: 100%;
	height: 230px;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	border-radius: 2px;
	transition: all 0.2s ease-in-out;
}

.archive_post_image:hover {
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

@media screen and (max-width: 568px) {
	.archive_post_image,
	.archive_post_image:hover {
		margin: 0 auto 2em;
		width: 94%;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
}

.archive_post_image img {
	display: none;
}

.archive_post_title {
	margin: 0 0 .7em;
	font-size: 1.8rem;
}

.archive_post_meta li {
	display: inline-block;
	margin: 0 0 .9em;
	color: #999;
	font-size: 1.3rem;
}

@media screen and (max-width: 768px) {
	.archive_post_meta {
		padding: 0 2em;
	}

	.archive_post_title {
		margin: 0 0 .7em;
		font-size: 1.6rem;
	}

	.archive_post_meta li {
		font-size: 1.2rem;
	}
}

.archive_post_meta li {
	margin: 0 1.6rem 0 0;
}

.archive_post_meta li span:before {
	content: '#';
	margin: 0 .2em 0 0;
	font-size: 1rem;
}

.archive_post_txt {
	width: 100%;
	color: #999;
	font-size: 1.4rem;
}

#container .archive_post_txt p {
	margin-bottom: 0;
}


.category-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media screen and (max-width: 568px){
	.category-area{
		flex-direction: column;
	}
}

.category-box {
	margin: 7rem 0 0;
	width: 30%;
}

@media screen and (max-width: 980px){
	.category-box {
		padding: 0 1rem;
		width: 47%;
	}
}

@media screen and (max-width: 568px){
	.category-box {
		margin: 5rem 0 0;
		width: 100%;
	}
	.category-box.last-child {
		margin: 0;
		width: 100%;
	}
}

.category-post-box {
	margin: 0 0 3rem;
	padding: 0 0 4px;
	border-bottom: 1px solid #e5e5de;
}
.category-post-box:last-child {
	margin: 0;
}

.category-post-box:hover {
	padding: 0;
	border-bottom: 5px solid #43abc9;
}

.category-post-box a {
	display: inline-block;
	padding: 0 0 3rem;
	width: 100%;
	color: #4a4a4a;
}
.category-post-box a:hover {
}

@media screen and (max-width: 568px) {
	.category-post-box,
	.category-post-box:hover {
		margin: 0 0 1rem;
		padding: 0 0 1rem;
		border-bottom: 1px solid #e5e5de;
	}

	.category-post-box a {
		margin: 0;
		padding: 0;
	}
	.category-post-box a:hover {
		margin: 0;
		padding: 0;
	}
}

.category-post-title {
	margin-bottom: 1rem;
}

@media screen and (max-width: 568px){
	.category-post-title {
		font-size: 1.3rem;
	}
}

.category-post-meta li {
	font-size: 1.1rem;
}

.category-post-image img {
	display: none;
}

.category-post-image:nth-of-type(1) {
	margin: 0 0 3rem;
	width: 100%;
	height: 200px;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	border-radius: 2px;
	transition: all 0.2s ease-in-out;
}

.category-post-box:nth-of-type(n+2) a {
	display: flex;
	justify-content: space-between;
}

.category-post-box:nth-of-type(n+2) .category-post-image {
	margin: 0 4% 0 0;
	width: 31%;
	height: 75px;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	border-radius: 2px;
	transition: all 0.2s ease-in-out;
}

.category-post-box:nth-of-type(n+2) .category-post-meta {
	width: 70%;
}

@media screen and (max-width: 568px){
	.category-post-image:nth-of-type(1) {
		margin: 0 0 1rem;
	}

	.category-post-image:nth-of-type(1),
	.category-post-box:nth-of-type(n+2) .category-post-image {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		border-radius: 0;
	}
}


/* -------
	Top Portfolio
------- */

.portfolio-archive {
	display: flex;
	flex-wrap: wrap;
}

.portfolio-archive-item {
	margin: 0 2% 5rem 0;
	width: 32%;
}
.portfolio-archive-item:nth-child(3n+3) {
	margin: 0 0 5rem;
}

.portfolio-archive-img {
	margin-bottom: 2rem;
	height: 28rem;
	overflow: scroll;
	border: 1px solid #d8d8d8;
}

.portfolio-archive-img img {
	display: block;
	max-width: 100%;
	height: auto;
}

.portfolio-archive-title {
	text-align: center;
}

@media screen and (max-width: 1200px){
	.portfolio-archive-img {
		height: 30rem;
		overflow: hidden;
	}
}

@media screen and (max-width: 768px){
	.portfolio-archive-item {
		margin: 0 4% 3rem 0;
		width: 48%;
	}
	.portfolio-archive-item:nth-child(3n+3) {
		margin: 0 4% 3rem 0;
	}
	.portfolio-archive-item:nth-child(2n+2) {
		margin: 0 0 3rem;
	}
}

@media screen and (max-width: 568px){
	.portfolio-archive-item {
		margin: 0 0 3rem;
		width: 100%;
	}

	.portfolio-archive-item:nth-child(3n+3) {
		margin: 0 0 3rem;
	}
}


/* -------
	archive_portfolio
------- */

.archive_portfolio_section {
	background: #f2f2f2;
	background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #f2f2f2 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=0 );
}

.archive_portfolio_section {
	line-height: 2;
}

.archive_portfolio_wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 8rem 0;
	width: 1280px;
}

@media screen and (max-width: 1280px) {
	.archive_portfolio_wrapper {
		padding: 5rem 0;
		width: 100%;
	}
}

.archive_portfolio_left {
	margin-right: 5%;
	width: 50%;
	max-height: 65rem;
	border: 1px solid #e5e5de;
	overflow: scroll;
}
.archive_portfolio_right {
	width: 45%;
	font-weight: bold;
}

.archive_portfolio_left img {
	display: block;
	max-width: 100%;
	height: auto;
}

.archive_portfolio_title {
	margin: 0 0 2rem;
	font-family: 'Merienda One',cursive;
	font-size: 2.4rem;
	font-weight: bold;
}

.archive_portfolio_title span {
	display: block;
	font-size: 5rem;
	font-weight: normal;
	line-height: 1.3;
}

@media screen and (max-width: 768px) {
	.archive_portfolio_left {
		margin-right: 0;
		margin-bottom: 2rem;
		padding: 0 2rem;
		width: 100%;
		max-height: 35rem;
		border: 0;
		overflow: hidden;
	}
	.archive_portfolio_right {
		padding: 0 2em;
		width: 100%;
		font-weight: normal;
	}

	.archive_portfolio_title {
		margin: 0 0 1rem;
		font-size: 1.8rem;
		text-align: center;
	}

	.archive_portfolio_title span {
		display: block;
		font-family: 'Kaushan Script', cursive;
		font-size: 3rem;
		line-height: 1.3;
	}

	.archive_portfolio_link {
		text-align: center;
	}
}

.archive_portfolio_txt {
	margin: 0 0 3rem;
}

.archive_portfolio_section p {
	margin: 0 0 1.5rem!important;
	font-size: 1.5rem;
	line-height: 1.8;
}
.archive_portfolio_section p:last-child {
	margin: 0;
}

.archive_portfolio_type {
	margin: 0 0 2rem;
}

.archive_portfolio_type li,
.archive_portfolio_type li {
	display: inline-block;
	vertical-align: middle;
	margin: 0 1em 1em 0;
	padding: .3em 1em;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
	border-radius: 4px;
	letter-spacing: normal;
}

.archive_portfolio_type li.on,
.archive_portfolio_type li.on {
	color: #fff;
	background-color: #4a4a4a;
}
f
.archive_portfolio_type li.off,
.archive_portfolio_type li.off {
	color: #777;
	background-color: #e5e5de;
}


/* -------
	Post - single
------- */

#post_contents {
	position: relative;
	text-align: left;
	line-height: 1.7;
}

.post_contents_wrapper {
	margin: 0 0 10rem;
}

@media screen and (max-width: 800px) {
	.post_contents_wrapper {
		margin: 0 0 5rem;
	}
}

.post_contents_wrapper_wd {
	margin: 2em auto 10em;
	width: 1280px;
}

@media screen and (max-width: 1280px) {
	.post_contents_wrapper_wd {
		padding: 0 20px;
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.post_contents_wrapper_wd {
		padding: 0 2rem;
		width: 100%;
	}
}

.post_sub_header_wd {
	position: relative;
	background-color: #f6f5f0;
}

.post-section {
	margin: 6rem auto 0;
	width: 860px;
}

@media screen and (max-width: 860px){
	.post-section {
		padding: 0 2rem;
		width: 100%;
	}
}

.post_sub_header_container_wd {
	margin: 0 auto;
	padding: 0 5em;
	width: 1280px;
}

.post_contents_wd_first {
	letter-spacing: -.40em;
}

.post_descrption_wd,
.post_header_ad_wd {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}

.post_descrption_wd {
	margin-right: 10%;
	margin-bottom: 5rem;
	padding-left: 10%;
	width: 50%;
	font-weight: bold;
	line-height: 2;
}
.post_header_ad_wd {
	width: 40%;
}

@media screen and (max-width: 1280px) {
	.post_sub_header_container_wd {
		padding: 0 2em;
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.post_descrption_wd,
	.post_header_ad_wd {
		width: 100%;
	}

	.post_descrption_wd {
		margin-right: 0;
		padding-left: 0;
		margin: 0 0 3em;
		width: 100%;
		font-weight: normal;
	}
	.post_header_ad_wd {
		width: 100%;
		text-align: center;
	}
}

.post_descrption_wd p {
	margin: 0 0 1.61em;
}
.post_descrption_wd p:last-child {
	margin: 0;
}

.post a:hover {
	text-decoration: underline;
}

.post p {
	margin: 0 0 2.5em;
}

.post .sp8 {
	margin-top: 6rem;
}

.post section {
	margin: 6rem auto 0;
	width: 860px;
}

@media screen and (max-width: 860px){
	.post section {
		padding: 0 2rem;
		width: 100%;
	}
}

.post h2 {
	position: relative;
	margin: 0 0 3rem;
	padding: 1.6rem 1rem;
	font-size: 3rem;
	line-height: 1.4;
	border-top: 2px solid #4a4a4a;
}

.post h2:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: .3rem;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT1jGhi9QwMDI3IgmABkCKYIFwAJogiABIEAM2/BIWEpQYtAAAAAElFTkSuQmCC);
	background-repeat: repeat-x;
}

@media screen and (max-width: 1280px) {
	.post section {
		margin-top: 6rem;
	}

	.post h2 {
		font-size: 2.2rem;
	}
}

.post h3 {
	position: relative;
	margin: 2.5rem 0 3rem;
	padding: 0 0 .7rem;
	font-size: 2.4rem;
	border-bottom: 2px dotted #999;
}

@media screen and (max-width: 1280px) {
	.post h3 {
		font-size: 1.8rem;
	}
}

.post h4 {
	margin: 0 0 1em;
	font-size: 2rem;
	line-height: 1.4;
}

.post h2:before, .post h3:before, .post h4:before {

}

.post ol.post_ol {
	margin: 0 0 3em;
}

.post ol.post_ol li {
	margin: 0 0 .5em;
	padding-left: 1em;
	text-indent: -2em;
	list-style: circle inside;
}

.post ul.post_ul {
	margin: 0 0 3em;
	padding-left: 2rem;
}

.post ul.post_ul li {
	margin: 0 0 .5em;
	padding-left: 1em;
	text-indent: -1.1em;
}

.post ul.post_ul li:before {
	content: '\f105';
	padding-right: 1rem;
	font-size: 1.2rem;
	font-family: FontAwesome;
}

.check-ul {
	position: relative;
	margin: 5em 0 2em;
}

.check-ul:before {
	content: '';
	display: block;
	margin-bottom: 1em;
	width: 100%;
	height: 3px;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT1jGhi9QwMDI3IgmABkCKYIFwAJogiABIEAM2/BIWEpQYtAAAAAElFTkSuQmCC) repeat-x;
}
.check-ul:after {
	content: '';
	display: block;
	margin-top: 1em;
	width: 100%;
	height: 3px;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT1jGhi9QwMDI3IgmABkCKYIFwAJogiABIEAM2/BIWEpQYtAAAAAElFTkSuQmCC) repeat-x;
}

.check-ul ul {
	padding: 2.5em 3.5em 2em;
	border-left: 1px solid #e5e5de;
	border-right: 1px solid #e5e5de;
}

.check-ul li {
	margin: 0 0 .5em;
	padding-left: 1.7em;
	text-indent: -1.5em;
}
.check-ul li:nth-last-of-type(1) {
	margin: 0;
}

.check-ul li:before {
	content: '\f046';
	margin-right: 1rem;
	width: 1rem;
	height: 1rem;
	font-family: FontAwesome;
}

.post p.check-ul-title {
	display: inline-block;
	position: absolute;
	margin: 0;
	padding: 0 1.2em;
	top: -.9em;
	left: 2em;
	font-size: 2.0rem;
	background-color: #fff;
}

.post figure {
	margin: 3em 0 4em;
	border: 1px solid #e5e5de;
}
.post img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 1280px) {
	.post img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		height: auto;
	}
}

.post hr {
	display: block;
	margin: 10rem 0;
	width: 100%;
	height: .2rem;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT1jGhi9QwMDI3IgmABkCKYIFwAJogiABIEAM2/BIWEpQYtAAAAAElFTkSuQmCC);
}

@media screen and (max-width: 768px){
	.post hr {
		margin: 3rem 0;
	}
}

pre[rel]  {
	position: relative;
	margin: 0 0 4em;
	font-size: 1.4rem;
	letter-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	white-space: pre;
	tab-size: 4;
}

.post pre {
	font-size: 1.3rem;
}

pre + .post p {
	margin: 3em 0 2.5em;
}

pre[rel] {
    padding-top: 3em;
}

pre[rel]::before {
	content: attr(rel);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: .5em 0 .5em 2.5%;
	width: 97.5%;
	color: #fff;
	font-size: 1.4rem;
	background-color: #4a4a4a;
}

code.snipet {
	display: block;
	padding: 2em;
	font-family: Consolas, Courier, monospace, sans-serif;
	font-size: 1.4rem;
	line-height: 1.4;
	background-color: #f6f5f0;
	overflow: scroll;
}

.post code.snipet {
	display: block;
	padding: 2em;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace, sans-serif;
	font-size: 1.2rem;
	line-height: 1.6;
	background-color: #f6f5f0;
	overflow: scroll;
}

@media screen and (max-width: 568px) {
	.post code.snipet {
		font-size: 1rem;
	}
}

.post p .snipet {
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace, sans-serif;
	font-size: 1.5rem;
	line-height: 1.4;
}

.code_line {
	margin: 0 .5rem;
	padding: .2rem;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace, sans-serif;
	font-size: 1.5rem;
	background-color: #f6f5f0;
}

@media screen and (max-width: 568px){
	.code_line {
		font-size: 1.2rem;
	}
}

span.red {
	color: #e04646;
}

span.green {
	color: #00a78e;
}

span.grey {
	color: #aaa;
}

p.add {
	color: #999;
	font-size: 1.1rem;
}

p + p.add {
	margin-top: -3em;
}

pre + p.add {
	margin: -2em 0 2em;
}

.link_box {
	margin: 0 0 3em;
	padding: 1.7em 1.7em 1.4em;
	background-color: #f6f5f0;
	border: 1px solid #e5e5de;
}

.link_box a:after {
	content: '\f08e';
	display: inline-block;
	width: 1rem;
	height: auto;
	padding-left: 1rem;
	font-family: FontAwesome;
}


.post_box {
	margin: 0 0 3em;
	padding: 1.7em 1.7em 1.4em;
	border: 1px solid #d6d6d6;
}

p.post_box_title {
	margin: 0 0 .6em;
	font-size: 1.8rem;
}

.post blockquote {
	position: relative;
	margin: 0 0 4em;
	padding: 5em 4em 5em 0;
	background-color: #f6f5f0;
	border: 1px solid #e5e5de;
}

.post blockquote:after {
    content: "“";
	position: absolute;
	top: 30px;
	left: 40px;
	color: rgba(0,0,0,.1);
	font-size: 15rem;
	font-family: 'Times New Roman', sans-serif;
	line-height: .8;
}

.post blockquote p {
	padding: 0 0 0 10em;
	font-style: italic;
}

@media screen and (max-width: 768px) {
	.post blockquote {
		margin: 0 0 2em;
		padding: 10em 1.5em 2em;
		background-color: #f6f5f0;
		border: 1px solid #e5e5de;
	}

	.post blockquote p {
		margin: 0 0 .5em;
		padding: 0 0 1.61em;
		font-weight: normal;
	}
}

.link_box p:last-child,
.post_box p:last-child,
.post blockquote p:last-child {
	margin: 0;
}

.post blockquote p.link {
	margin: 0;
}

.post_iframe{
    position: relative;
    margin: 2.5em 0;
    padding: 79px 0 50%;
    overflow: hidden;
}

.post_iframe iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post .post-dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	font-size: 1.7rem;
	border-right: 1px dotted #e5e5de;
	border-bottom: 1px dotted #e5e5de;
	border-left: 1px dotted #e5e5de;
	background-color: #f6f5f0;
}
.post .post-dl:first-of-type {
	border-top: 1px dotted #e5e5de;
}

.post .post-dl:last-of-type + p {
	margin-top: 4rem;
}

.post .post-dl:last-of-type + p.add {
	margin-top: 2rem;
}

.post-dl dt {
	padding: 1rem 2rem;
	width: 40%;
}

.post-dl dd {
	padding: 1rem 2rem;
	width: 60%;
}

@media screen and (max-width: 568px){
	.post .post-dl {
		flex-direction: column;
	}

	.post-dl dt,
	.post-dl dd {
		width: 100%;
	}
}

.post-dl dd {
	background-color: #fff;
}

.post-dl-min {
	margin-bottom: 4rem;
}

.post-dl-min dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2rem;
	border-bottom: 1px dotted #e5e5de;
}
.post-dl-min dl:first-of-type {
	padding: 0 2rem 2rem;
}

.post-dl-min dt {
	width: 20%;
}
.post-dl-min dd {
	width: 80%;
}

.post-dl3 dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	font-size: 1.4rem;
	text-align: center;
	border-top: 1px dotted #e5e5de;
}

.post-dl3:last-child {
	border-bottom: 1px dotted #e5e5de;
}

.post-dl3 dt {
	padding: 1rem;
	width: 10%;
	font-size: 2.4rem;
	background-color: #f6f5f0;
}
.post-dl3 dd {
	padding: 1rem;
	width: 70%;
}
.post-dl3 dd:last-child {
	width: 20%;
	border-left: 1px dotted #e5e5de;
}

@media screen and (max-width: 568px){
	.post-dl3 dl {
		flex-direction: column;
	}
	.post-dl3 dt {
		width: 100%;
	}
	.post-dl3 dd {
		width: 100%;
	}
	.post-dl3 dd:last-child {
		width: 100%;
		border-top: 1px dotted #e5e5de;
		border-left: 0;
	}
}

.post strong {
	background: linear-gradient(transparent 70%, #e6c300 70%);
}

.demo-link {
	text-align: center;
}

.demo-link a {
	display: inline-block;
	position: relative;
	margin-bottom: 7em;
	padding: 1em 5em;
	color: #4a4a4a;
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	z-index: 2;
}

.demo-link a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.demo-link a,
.demo-link a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.demo-link a:hover {
	color: #fff;
}

.demo-link a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.demo-link a:hover::after {
	background: #4a4a4a;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* wd */

.wd_section {
	line-height: 2;
	background: #f6f5f0;
	background: -moz-linear-gradient(top, #f6f5f0 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #f6f5f0 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #f6f5f0 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f5f0', endColorstr='#ffffff',GradientType=0 );
}

.wd_section:last-child {
	margin-bottom: 50px;
}

.wd_section_wrapper {
	margin: 0 auto;
	padding: 7rem 0;
	width: 1280px;
	letter-spacing: -.40em;
}

@media screen and (max-width: 1280px) {
	.wd_section_wrapper {
		padding: 3rem 2rem;
		width: 100%;
	}
}

.wd_left,
.wd_right {
	display: inline-block;
	vertical-align: middle;
	letter-spacing: normal;
}

.wd_left {
	margin-right: 10%;
	width: 50%;
	max-height: 760px;
	overflow: hidden;
}
.wd_right {
	width: 40%;
	font-weight: bold;
}

.wd_left img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e5e5de;
}

.wd_title {
	margin: 0 0 1.61em;
	font-family: 'Merienda One',cursive;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.3;
}

.wd_title span {
	display: block;
	font-size: 5rem;
	font-weight: normal;
}

@media screen and (max-width: 768px) {
	.wd_left {
		margin-right: 0;
		margin-bottom: 3rem;
		width: 100%;
		max-height: 400px;
	}
	.wd_right {
		width: 100%;
		font-weight: normal;
	}

	.wd_title {
		font-size: 2.1rem;
		text-align: center;
	}

	.wd_title span {
		display: block;
		margin-bottom: 2rem;
		font-family: 'Kaushan Script', cursive;
		font-size: 3rem;
	}

	p.wd_link {
		margin: 0;
		text-align: center;
	}
}

.wd_txt {
	margin: 0 0 6rem;
}

@media screen and (max-width: 860px){
	.wd_txt {
		margin: 0 0 3rem;
	}
}

.wd_txt p {
	margin: 0 0 1.61em;
	line-height: 1.8;
}
.wd_txt p:last-child {
	margin: 0;
}

.post_descrption {
	margin: 0 auto 2rem;
	width: 860px;
}

@media screen and (max-width: 860px){
	.post_descrption {
		margin: 0 auto 2rem;
		padding: 0 2rem;
		width: 100%;
	}
}

.post_descrption p {
	margin: 0 0 2.5rem;
}
.post_descrption p:last-child {
	margin: 0;
}

@media screen and (max-width: 568px){
	.post_descrption {
		margin: 0 0 3rem;
	}
}

.webfont_display {
	padding: 6em;
	background-color: #f6f5f0;
}

.gfont {
	font-size: 10rem;
	line-height: 1.2;
}

.webfont_title {
	margin: 0 0 .5em;
	font-family: 'Courgette',cursive;
	font-size: 5.4rem;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.webfont_display {
		padding: 3em;
	}

	.gfont {
		font-size: 5rem;
		line-height: 1.2;
	}

	.webfont_title {
		margin: 0 0 .5em;
		font-size: 3.4rem;
		text-align: center;
	}
}

.webfont_txt {
	margin: 0 0 6em;
	font-size: 1.5rem;
	line-height: 1.8;
}

.webfont_txt p {
	margin: 0 0 1.61em;
	font-size: 1.8rem;
}
.webfont_txt p:last-child {
	margin: 0;
}


/* post-section */

.post-column {
	line-height: 2;
	background: #f6f5f0;
	background: -moz-linear-gradient(top, #f6f5f0 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #f6f5f0 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #f6f5f0 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f5f0', endColorstr='#ffffff',GradientType=0 );
}

.post-column:last-child {
	margin-bottom: 5rem;
}

.post-column-wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 7rem 0;
	width: 1280px;
}

@media screen and (max-width: 1280px) {
	.post-column-wrapper {
		padding: 7rem 2rem;
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.post-column-wrapper {
		flex-direction: column;
	}
}

.post-column-left {
	margin-right: 10%;
	width: 50%;
}
.post-column-right {
	width: 40%;
}

.post-column-left img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e5e5de;
}

.post-column-title {
	margin: 0 0 1.61rem;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.3;
}

.post-column-title span {
	font-size: 2.1rem;
}

@media screen and (max-width: 768px) {
	.post-column-left {
		margin-right: 0;
		margin-bottom: 3rem;
		width: 100%;
		max-height: 400px;
	}
	.post-column-right {
		width: 100%;
	}

	.post-column-title {
		font-size: 2.1rem;
		text-align: center;
	}

	.post-column-title span {
		font-size: 1.6rem;
	}
}

.post-column-txt {
	margin: 0 0 3rem;
}

.post-column-txt p {
	margin: 0 0 1.61rem;
	font-size: 1.6rem;
}
.post-column-txt p:last-child {
	margin: 0;
}

.post-column-link a {
	display: inline-block;
	position: relative;
	padding: 2rem 5rem 1.6rem;
	color: #4a4a4a;
	font-size: 1.4rem;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	z-index: 2;
}

.post-column-link a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.post-column-link a,
.post-column-link a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.post-column-link a:hover {
	color: #fff;
}

.post-column-link a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.post-column-link a:hover::after {
	background: #4a4a4a;
	-webkit-transform: scale(1);
	transform: scale(1);
}

p.post-column-link {
	margin: 0;
}

@media screen and (max-width: 768px) {
	p.post-column-link {
		text-align: center;
	}
}


/* design-column */

.design-columnlar {
	line-height: 2;
	background: #f6f5f0;
	background: -moz-linear-gradient(top, #f6f5f0 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #f6f5f0 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #f6f5f0 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f5f0', endColorstr='#ffffff',GradientType=0 );
}

.design-columnlar:first-child {
	margin-top: 6rem;
}
.design-columnlar:last-child {
	margin-bottom: 5rem;
}

.design-columnlar-wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto;
	padding: 7rem 0;
	width: 1280px;
}

@media screen and (max-width: 1280px) {
	.design-columnlar-wrapper {
		padding: 7rem 2rem;
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.design-columnlar-wrapper {
		flex-direction: column;
		padding: 3rem 2rem;
	}
}

.design-columnlar-left {
	margin-right: 5%;
	width: 70%;
}
.design-columnlar-right {
	width: 25%;
}

.design-columnlar-left img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e5e5de;
}

.design-columnlar-title {
	margin: 0 0 1.61rem;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.3;
}

.design-columnlar-title span {
	font-size: 2.1rem;
}

@media screen and (max-width: 768px) {
	.design-columnlar-left {
		margin-right: 0;
		margin-bottom: 3rem;
		width: 100%;
		max-height: 400px;
	}
	.design-columnlar-right {
		width: 100%;
	}

	.design-columnlar-title {
		font-size: 2.1rem;
		text-align: center;
	}

	.design-columnlar-title span {
		font-size: 1.6rem;
	}
}

.design-columnlar-txt {
	margin: 0 0 3rem;
}

.design-columnlar-txt p {
	margin: 0 0 1.61rem;
	font-size: 1.6rem;
}
.design-columnlar-txt p:last-child {
	margin: 0;
}

p + p.design-columnlar-link {
	margin-top: 2rem;
}

.design-columnlar-link a {
	display: inline-block;
	position: relative;
	padding: 2rem 5rem 1.6rem;
	color: #4a4a4a;
	font-size: 1.4rem;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	z-index: 2;
}

.design-columnlar-link a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.design-columnlar-link a,
.design-columnlar-link a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.design-columnlar-link a:hover {
	color: #fff;
}

.design-columnlar-link a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.design-columnlar-link a:hover::after {
	background: #4a4a4a;
	-webkit-transform: scale(1);
	transform: scale(1);
}

p.design-columnlar-link {
	margin: 0;
}

@media screen and (max-width: 768px) {
	p.design-columnlar-link {
		text-align: center;
	}
}


/* post-section-link-ban */


.post-section-link-ban a {
	display: inline-block;
	position: relative;
	padding: 2rem 5rem 1.6rem;
	color: #4a4a4a;
	font-size: 1.4rem;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	z-index: 2;
}

.post-section-link-ban a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.post-section-link-ban a,
.post-section-link-ban a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.post-section-link-ban a:hover {
	color: #fff;
}

.post-section-link-ban a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.post-section-link-ban a:hover::after {
	background: #4a4a4a;
	-webkit-transform: scale(1);
	transform: scale(1);
}

p.post-section-link-ban {
	margin: 0 0 8rem;
	text-align: center;
}


/* --- likes --- */

.post-footer-likes {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 5rem;
	line-height: 1.6;
	letter-spacing: -.40em;
	background-color: #fff;
}

@media screen and (max-width: 568px){
	.post-footer-likes {
		flex-direction: column;
	}
}

.post-footer-likes-img,
.post-footer-likes-txt {
	width: 50%;
	height: 260px;
	vertical-align: top;
	letter-spacing: normal;
	overflow: hidden;
}

.post-footer-likes-img {
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 10;
}

.post-footer-likes-img p {
	display: -webkit-box;
	display: -ms-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 3em;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	background-color: rgba(0,0,0,0.4);
}

@media screen and (max-width: 800px) {
	.post-footer-likes,
	.post-footer-likes-img {
		width: 100%;
	}

	.post-footer-likes-txt {
		display: block;
		width: 100%;
		height: auto;
	}

	.post-footer-likes-img p {
		padding: 2em 1.5em;
	}
}

.post-footer-likes-txt {
	text-align: center;
	padding: 2.5em 0;
	font-size: 1.7rem;
}

@media screen and (max-width: 800px) {
	.post-footer-likes-txt {
		padding: 2em 0;
	}
}

.post-footer-likes-txt p {
	margin: 0 0 1.4em;
	font-size: 1.4rem;
	line-height: 1.8;
}

.post-footer-likes-txt span {
	display: block;
}

p.post-footer-title {
	margin: 0 0 .3em;
	font-family: 'Merienda One',cursive;
	font-size: 4.6rem;
	line-height: 1;
}

.post-footer-follow-wrap {
	display: -webkit-box;
 	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 auto;
	width: 80%;
	line-height: 1;
}

.post-footer-follow-btn {
	height: 20px;
}

@media screen and (max-width: 768px){
	p.post-footer-title {
		font-size: 3rem;
	}

	.post-footer-follow-wrap {
		width: 90%;
	}
}

a.tw-follow-btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 8em;
	height: 20px;
	color: #fff;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1;
	background-color: #1b95e0;
	border-radius: 3px;
	letter-spacing: normal;
}

.tw-follow-btn:before {
	content: '\f099';
	height: auto;
	font-size: 1.4rem;
	font-family: FontAwesome;
}

a.tw-follow-btn:hover {
	background-color: #0c7abf;
}

.tw-follow-btn span {
	text-align: left;
}

@media screen and (max-width: 568px){
	.tw-follow-btn {
		font-weight: bold;
	}
}

.push-btn a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 8em;
	height: 20px;
	color: #fff;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1;
	background-color: #e5a717;
	border-radius: 3px;
	letter-spacing: normal;
}

.push-btn a:before {
	content: '\f090';
	height: auto;
	font-size: 1.4rem;
	font-family: FontAwesome;
}

.push-btn a:hover {
	background-color: #C58900;
}

.push-btn span {
	display: block;
	width: 6rem;
	text-align: left;
}

@media screen and (max-width: 568px){
	.push-btn {
		font-weight: bold;
	}
}

/*-- post auther imformation --*/

.post-auther-imformation {
	padding: 2em;
	font-size: 1.4rem;
	background-color: #fff;
	border-radius: 3px;
}

.post-auther-imformation-wrap {
	display: flex;
}

.post-auther-img {
	margin-right: 5%;
	width: 20%;
}
.post-auther-contents {
	width: 75%;
}

.post-auther-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}

.post-auther-contents-name {
	margin-bottom: .7em;
	font-size: 2.0rem;
	font-weight: bold;
}

.post-auther-contents-txt {
	margin-bottom: .7em;
}


/*-- post footer tags --*/

.post-footer-tags {
	margin: 0 auto;
	width: 860px;
}

.tags-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 5rem;
}

.tags-list li a {
	display: block;
	margin-right: 1em;
	padding: .7em 1.5em;
	color: #4a4a4a;
	font-size: 1.2rem;
	background-color: #fff;
	border: 1px solid #e5e5de;
}

.tags-list li a:hover {
	color: #E2BE19;
	text-decoration: none;
	background-color: #f6f5f0;
}

@media screen and (max-width: 860px){
	.post-footer-tags {
		width: 100%;
	}
}

@media screen and (max-width: 568px){
	.post-footer-tags {
		padding: 0 2em;
	}

	.tags-list li a {
		margin-right: 1em;
		padding: .3em 1em;
		font-size: 1.1rem;
	}
}

/* --- share --- */

.post-share {
	padding: 5rem 0;
	background-color: #f6f5f0;
}

@media screen and (max-width: 568px){
	.post-share {
		padding: 4em 0 0;
	}
}

.post-share-area {
	margin: 0 auto;
	width: 860px;
}

@media screen and (max-width: 860px){
	.post-share-area {
		padding: 0 1rem;
		width: 100%;
	}
}

.top-post-share-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto 1rem;
	padding: 3rem 0 0;
	width: 860px;
}

@media screen and (max-width: 860px){
	.top-post-share-list {
		width: 100%;
	}
}

.top-post-share-list li {
	text-align: center;
	width: 18%;
	line-height: 1;
}

.top-post-share-list li:first-child {
	font-family: 'Merienda One',cursive
}

.top-post-share-list li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 1rem 0;
	width: 100%;
	color: #fff;
	font-weight: bold;
	border-radius: 4px;
}
.top-post-share-list li a:hover {
	opacity: .7;
}

.top-post-share-list li span {
	font-size: 1.6rem;
}

.top-post-share-list .all span {
	display: inline-block;
	margin-right: 1rem;
	font-size: 1.3rem;
}

@media screen and (max-width: 668px){
	.top-post-share-list .all {
		text-align: center;
	}

	.top-post-share-list .all span {
		display: block;
		margin-top: 1rem;
		margin-right: 0;
		margin-bottom: .3rem;
		font-size: 1.3rem;
	}
}

.post-share-list-area {
	display: flex;
	justify-content: space-between;
	margin: 0 auto 2rem;
	width: 860px;
}

@media screen and (max-width: 860px){
	.post-share-list-area {
		margin: 0 0 3em;
		padding: 0 1rem;
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.post-share-list-area {
		flex-direction: column;
	}
}

.post-share-list-all {
	width: 10%;
	line-height: 1.4;
}

.post-share-list-all span {
	display: block;
	width: 100%;
}

.post-share-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	width: 90%;
}

@media screen and (max-width: 768px) {
	.post-share-list-all {
		margin-bottom: 1rem;
		width: 100%;
		text-align: center;
	}

	.post-share-list-all span {
		display: inline-block;
		width: auto;
	}

	.post-share-list {
		width: 100%;
	}
}

.post-share-list li.ha,
.post-share-list li.tw,
.post-share-list li.fb,
.post-share-list li.pk {
	width: 24%;
	height: 50px;
	font-size: 1.4rem;
	text-align: center;
	border-radius: 4px;
}

.post-share-list li:first-child {
	font-family: 'Merienda One',cursive
}

.post-share-list li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 1rem 0;
	width: 100%;
	color: #fff;
	font-weight: bold;
	border-radius: 4px;
}
.post-share-list li:hover {
	opacity: .7;
}

.tw a {
	background-color: #55ACEE;
	text-shadow: 0 1px 1px rgba(0,0,0,.4);
	box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.fb a {
	background-color: #315096;
	text-shadow: 0 1px 1px rgba(0,0,0,.8);
	box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.ha a {
	background-color: #008FDE;
	text-shadow: 0 1px 1px rgba(0,0,0,.4);
	box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.pk a {
	background-color: #F03E51;
	text-shadow: 0 1px 1px rgba(0,0,0,.4);
	box-shadow: 0 1px 1px rgba(0,0,0,.5);
}

.tw span:before {
	content: '\f099';
	font-family: FontAwesome;
}
.fb span:before {
	content: '\f09a';
	font-family: FontAwesome;
}
.pk span:before {
	content: '\f265';
	font-family: FontAwesome;
}
.ha span:before {
	content: 'B!';
	font-family: Verdana;
	font-weight: bold;
}

.post-share-list li span:before {
	padding: 0 .4em 0 0;
}

@media screen and (max-width: 768px) {
	.post-share-list li {
		margin-bottom: .5em;
		padding: 1rem 0;
		font-size: 1.2rem;
	}

	.post-share-list li span:before {
		padding: 0;
	}

	.tw span:before,
	.fb span:before,
	.ha span:before,
	.pk span:before {
		display: block;
		padding: 0;
		font-size: 1.8rem;
		line-height: 1.2;
		text-align: center;
	}

	.post-share-list li span {
		font-size: .8rem;
	}

	.post-share-list-all span {
		margin-top: 1rem;
		font-size: 1.2rem;
	}
}

.copy-btn-area {
	text-align: center;
}

.copy-btn {
	display: inline-block;
	margin: 1rem auto 3rem;
	padding: 1rem 3rem;
	text-align: center;
	background-color: #f6f5f0;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	border-radius: 4px;
}

.copy-btn:before {
	content: '\f0c1';
	margin-right: 1rem;
	font-family: FontAwesome;
}

.copy-btn:hover {
	color: #fff;
	background-color: #e5a717;
}

.copy-ok {
	color: #cdcdcd;
	background-color: #f6f5f0;
}
.copy-not {
	color: #fff;
	background-color: #e5a717;
}

.arrow-box {
	display: none;
	position: relative;
	margin: 0 0 10px;
	width: 100%;
	height: 33px;
	text-align:center;
	line-height: 33px;
	background: #fff;
	border: 1px solid #bbb;
	border-radius: 4px;
}

.arrow-box:after,
.arrow-box:before {
	content: " ";
	top: 100%;
	left: 50%;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border: solid transparent;
}

.arrow-box:after {
	margin-left: -3px;
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 3px;
}
.arrow-box:before {
	margin-left: -5px;
	border-color: rgba(187, 187, 187, 0);
	border-top-color: #ddd;
	border-width: 5px;
}


/*--- post-footer-works ---*/

.post-footer-works {
	background-color: #f6f5f0;
}

.post-footer-works-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto;
	padding: 5rem 0;
	width: 960px;
}

@media screen and (max-width: 960px){
	.post-footer-works-wrap {
		width: 100%;
		padding: 5rem 2rem;
	}
}

@media screen and (max-width: 768px){
	.post-footer-works-wrap {
		flex-direction: column;
		margin: 0 0 3rem;
		padding: 3rem 2rem;
	}
}

.post-footer-works-img,
.post-footer-works-txt {
	width: 48%;
}

@media screen and (max-width: 768px){
	.post-footer-works-img,
	.post-footer-works-txt {
		width: 100%;
	}
}

@media screen and (max-width: 568px){
	.post-footer-works-img {
		margin: 0 0 2rem;
	}
}

.post-footer-works-img img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.post-footer-works-txt-title {
	margin-bottom: 2rem;
	font-size: 2.8rem;
	text-align: center;
	line-height: 1.2;
}

@media screen and (max-width: 568px){
	.post-footer-works-txt-title {
		font-size: 2.2rem;
	}
}

.post-footer-works-txt-lead {
	margin-bottom: 2rem;
	font-size: 1.4rem;
}

.post-footer-works-txt-link {
	text-align: center;
}

.post-footer-works-txt-link a {
	display: inline-block;
	margin: 0 auto;
	padding: 1rem 0;
	width: 70%;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 2px 1px rgba(171,72,0,1);
	background-color: #FF6C00;
	box-shadow: 0 2px 1px rgba(171,72,0,1);
	border-radius: 7px;
}

.post-footer-works-txt a:hover {
	opacity: .7;
}



/*--- latest-entry ---*/

.post-footer-latest-entry {
	margin-top: 5rem;
	padding: 3rem 12rem;
	background-color: #fff;
}

.latest-title {
	margin: 0 0 1.5rem;
	font-size: 2.6rem;
	text-align: center;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
	.post-footer-latest-entry {
		padding: 3rem 7rem;
	}

	.latest-title {
		margin: 0 auto 2rem;
		width: 80%;
		font-size: 2.0rem;
	}
}

@media screen and (max-width: 568px) {
	.post-footer-latest-entry {
		padding: 3rem;
	}
}

.post-newmark {
	color: #ed1b2e!important;
	font-size: 1.4rem;
	font-family: 'Merienda One',cursive;
	text-decoration: underline;
}

@media screen and (max-width: 568px){
	.post-newmark {
		font-size: 1.2rem;
	}
}

.post-footer-latest-entry-list li {
	margin-bottom: .7rem;
	padding-left: 1em;
	text-indent: -.8em;
	font-size: 1.4rem;
}

.post-footer-latest-entry-list li:before {
	content: '\f101';
	font-family: FontAwesome;
}

/*--- post_related ---*/

.post-related {
	padding: 5rem 0 0;
}

.related-title {
	margin: 0 0 3rem;
	font-size: 2.6rem;
	text-align: center;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
	.post-related {
		padding: 3rem 0 0;
	}

	.related-title {
		margin: 0 auto 2rem;
		width: 80%;
		font-size: 2.0rem;
	}
}

.related-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	width: 1280px;
}

@media screen and (max-width: 1280px){
	.related-area {
		padding: 0 2rem;
		width: 100%;
	}
}

.related-post-box {
	width: 30%;
}
.related-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 67%;
}

.related-post-list {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	width: 48%;
	border-bottom: 1px solid #e5e5de;
}

@media screen and (max-width: 620px){
	.related-area {
		flex-direction: column;
	}

	.related-post-box {
		margin-bottom: 3rem;
		padding-bottom: 3rem;
		width: 100%;
		border-bottom: 1px solid #e5e5de;
	}
	.related-list {
		width: 100%;
	}
}

@media screen and (max-width: 568px){
	.related-list {
		flex-direction: column;
	}

	.related-post-list {
		width: 100%;
	}

	.related-post-list:last-child {
		margin-bottom: 0;
	}
}

.related-post-list a {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
}

.related-post-list-image {
	width: 30%;
}
.related-post-list-meta {
	width: 65%;
}

.related-post-image {
	margin: 0 0 1rem;
	height: 200px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.related-post-list-image {
	height: 80px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.related-post-image img,
.related-post-list-image img {
	display: none;
}

.related-area a {
	color: #4a4a4a;
}

.related-area a:hover {
	color: #E2BE19;
	opacity: .7;
	text-decoration: none;
}

@media screen and (max-width: 620px){
	a .related-post-title {
		padding: 0 2rem;
		text-align: center;
	}
}

a .related-post-list-title {
	font-size: 1.6rem;
}

@media screen and (max-width: 768px){
	a .related-post-list-title {
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 568px){
	a .related-post-list-title {
		font-size: 1.6rem;
	}
}

a .related-post-share-count {
	font-size: 1.3rem;
}

a:hover .related-post-share-count {
	color: #4a4a4a;
}

.related-tags {
	margin-top: 1rem;
}

.related-tags-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.related-tags-list li a {
	display: block;
	margin-right: 1em;
	padding: .5em 1em;
	color: #4a4a4a;
	font-size: 1rem;
	border: 1px solid #e5e5de;
}

.related-tags-list li a:hover {
	color: #43abc9;
	background-color: #f6f5f0;
}

@media screen and (max-width: 568px){
	.related-tags-list li a {
		margin-right: 1em;
		padding: .3em 1em;
		font-size: 1.1rem;
	}
}


/*
////////////////////////////////////////////////////////////////////////

	◆ Contact

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

.contact-area {
	margin: 0 auto;
	width: 68rem;
}

@media screen and (max-width: 680px){
	.contact-area {
		padding: 0 1rem;
		width: 100%;
	}
}

.contact-section {
	margin-bottom: 3rem;
}

.contact-section dt {
	margin-bottom: 1rem;
	font-weight: bold;
}

@media screen and (max-width: 768px){
	.contact-section dt {
		font-size: 1.8rem;
	}
}

.required {
	margin-right: 1rem;
	color: #43abc9;
}

.required-text {
	font-size: 1rem;
}

.contact-add {
	display: inline-block;
	margin-top: .7rem;
	color: #999;
	font-size: 1.2rem;
}

input.contact-input {
	padding: 2rem;
	width: 100%;
	color: #4a4a4a;
	font-size: 1.6rem;
	font-family: "Open Sans","Noto Sans Japanese","メイリオ",sans-serif;
	background-color: #f6f5f0;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input.contact-input:placeholder-shown {
	color: #bbb;
}
input.contact-input::-webkit-input-placeholder {
	color: #bbb;
}
input.contact-input:-moz-placeholder {
	color: #bbb;
	opacity: 1;
}
input.contact-input::-moz-placeholder {
	color: #bbb;
	opacity: 1;
}
input.contact-input:-ms-input-placeholder {
	color: #bbb;
}

input.contact05,
input.contact06 {
	margin-bottom: 1rem;
}

select.contact-input-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select.contact-input-select::-ms-expand {
	display: none;
}

select.contact-input-select option {
  background-color: #4a4a4a;
}

label.contact-select-label {
	position: relative;
}

textarea.contact-input-textarea {
	padding: 2rem;
	width: 100%;
	height: 30rem;
	color: #4a4a4a;
	font-size: 1.6rem;
	font-family: "Open Sans","Noto Sans Japanese","メイリオ",sans-serif;
	background-color: #f6f5f0;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.easy-select-box .esb-dropdown{
	position: absolute;
	display: none;
}

.easy-select-box {
	width: 100%!important;
}

.esb-displayer {
	display: block;
	position: relative;
	padding: 2rem 2rem 2rem 5rem;
	width: 100%!important;
	font-size: 1.6rem;
	background-color: #f6f5f0;
	z-index: 0;
}

.esb-displayer:before {
	content: '\f0d7';
	position: absolute;
	top: 2rem;
	left: 2rem;
	font-size: 2.6rem;
	font-family: 'FontAwesome';
	line-height: 1;
	z-index: 10;
}

.esb-dropdown {
	width: 68rem!important;
	height: 27rem;
	overflow-y: scroll;
	background-color: #f6f5f0;
}

@media screen and (max-width: 680px){
	.esb-dropdown {
		width: 56rem!important;
	}
}
@media screen and (max-width: 560px){
	.esb-dropdown {
		width: 42rem!important;
	}
}
@media screen and (max-width: 420px){
	.esb-dropdown {
		width: 32rem!important;
	}
}
@media screen and (max-width: 360px){
	.esb-dropdown {
		width: 24rem!important;
	}
}

.esb-dropdown .esb-item:first-of-type {
	display: none;
}

.esb-item {
	display: block;
	padding: 2rem;
	width: 100%!important;
}

.esb-item:not(:last-child) {
	border-bottom: 1px solid #c3c3c3;
}

.contact-checkbox{
	display: none;
}
.contact-checkbox-box .mwform-checkbox-field-text{
	display: inline-block;
	position: relative;
	margin: 2rem 0 4rem;
	padding: 2rem 2rem 2rem 4rem;
	background-color: #f6f5f0;
}
.contact-checkbox-box .mwform-checkbox-field-text::before{
	content: "\f146";
	display: block;
	position: absolute;
	top: 1.7rem;
	left: 2rem;
	font-size: 2rem;
	font-family: 'FontAwesome';
}
.contact-checkbox:checked + .mwform-checkbox-field-text{
  color: #fff;
  background-color: #43abc9;
}

.contact-checkbox:checked + .mwform-checkbox-field-text::before {
	display: none;
}
.contact-checkbox:checked + .mwform-checkbox-field-text::after{
	content: "\f058";
	display: block;
	position: absolute;
	top: 1.7rem;
	left: 2rem;
	color: #fff;
	font-size: 2rem;
	font-family: 'FontAwesome';
}

a.contact-privacy-policy-link {
	font-weight: bold;
}

.mw_wp_form .error {
	display: inline!important;
	margin-left: 2rem;
	color: #43abc9!important;
	font-size: 1.4rem!important;
	font-weight: bold;
}

@media screen and (max-width: 680px){
	.mw_wp_form .error {
		display: block!important;
		margin-left: 0;
	}
}

.mw_wp_form_error + .easy-select-box,
input.mw_wp_form_error,
textarea.contact-input-textarea.mw_wp_form_error,
.mw_wp_form_error + .mwform-checkbox-field-text,
.error ~ input {
	border: 3px solid #43abc9!important;
}

.mw_wp_form .easy-select-box + .error {
	display: none!important;
}

.contact-submit {
	text-align: center;
}

.contact-form-confirm .contact-submit {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}

.contact-submit-btn {
	display: inline-block;
	padding: 2rem 0;
	width: 32rem;
	color: #4a4a4a;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
	background-color: #E2BE19;
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
	border: 2px solid #E2BE19;
	border-radius: 4px;
}

.contact-submit-btn:hover {
	opacity: .7;
}

@media screen and (max-width: 768px){
	.contact-submit-btn:hover {
		opacity: 1;
	}
}

.contact-submit-backbtn {
	display: inline-block;
	margin-right: 1rem;
	padding: 2rem 0;
	width: 32rem;
	color: #4a4a4a;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	border: 2px solid #4a4a4a;
	border-radius: 4px;
}

@media screen and (max-width: 650px){
	.contact-form-confirm .contact-submit {
		flex-direction: column;
	}

	.contact-form-confirm input {
		margin: 0 auto 2rem;
	}

	.contact-submit-backbtn {
		margin-right: 0;
		padding: 1.5rem 0;
	}
}

.contact-form-confirm .contact-area {
	margin-bottom: 3rem;
	padding: 3rem 3rem 0;
	width: 80rem;
	background-color: #f6f5f0;
}

@media screen and (max-width: 800px){
	.contact-form-confirm .contact-area {
		padding: 1rem;
		width: 100%;
	}
}

.contact-form-confirm .contact-section {
	margin-bottom: 3rem;
	padding: 0 3rem 3rem;
}

.contact-form-confirm .contact-section {
	border-bottom: 1px solid #c3c3c3;
}

.contact-form-confirm .contact-section:last-child,
.contact-form-confirm .contact-section:nth-last-child(2) {
	border-bottom: none;
}

@media screen and (max-width: 768px){
	.contact-form-confirm .contact-section {
		margin-bottom: 2rem;
		padding: 0 1rem 2rem;
	}
}

.contact-form-confirm .required-text,
.contact-form-confirm .contact-add,
.contact-form-confirm .contact-confirm-no {
	display: none;
}


@media screen and (max-width: 768px){
	.contact-form-confirm .contact-section dt {
		font-size: 1.6rem;
	}
}


.contact-form-confirm .form05 label {
	display: block;
}

.contact-privacy-policy {
	display: none;
}

.lity-content .contact-privacy-policy {
	display: block;
	overflow-y: scroll;
}

.contact-privacy-policy {
	margin: 0 auto;
	padding: 3rem;
	width: 90rem;
	font-size: 1.4rem;
	background-color: #fff;
}

@media screen and (max-width: 900px){
	.contact-privacy-policy {
		padding: 2rem;
		width: 85%;
	}
}

.contact-privacy-policy-title {
	margin-bottom: 2rem;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
}

.contact-privacy-policy-area {
	padding: 3rem;
	height: 60rem;
	border: 1px solid #dcdcdc;
}

@media screen and (max-width: 670px){
	.contact-privacy-policy-title {
		margin-bottom: 1rem;
		font-size: 2rem;
	}

	.contact-privacy-policy-area {
		padding: 0;
		height: 80%;
		font-size: 1.4rem;
		border: none;
	}
}

.contact-privacy-policy-area h4 {
	margin-bottom: 1rem;
	font-size: 2rem;
	font-weight: bold;
}

@media screen and (max-width: 768px){
	.contact-privacy-policy-area h4 {
		font-size: 1.7rem;
	}
}

.contact-privacy-policy-area h4:not(:first-of-type) {
	margin-top: 4rem;
}

@media screen and (max-width: 768px){
	.contact-privacy-policy-area h4:not(:first-of-type) {
		margin-top: 2rem;
	}
}

.contact-privacy-policy-area p {
	margin-bottom: 2rem;
}


/*--- Contact Form 7 ---*/

.contact_area {
	margin: 2em auto;
	width: 65%;
}

@media screen and (max-width: 768px) {
	.contact_area {
		width: 90%;
	}
}

.required {
	color: #43abc9;
	font-weight: bold;
}

.required_text {
	display: block;
	font-size: 10px;
}

.contact_hosoku {
	font-size: 12px;
}

.contact_dl {
	margin: 0px 0 25px;
	padding: 0 0 25px;
}

.contact_dl_last {
	margin: 0 0 70px;
}

.contact_dl,
.contact_dl_last {
	letter-spacing: -.40em;
}

.contact_dl dt,
.contact_dl_last dt {
	display: inline-block;
	width: 25%;
	vertical-align: top;
	letter-spacing: normal;
}

.contact_dl dd,
.contact_dl_last dd {
	display: inline-block;
	width: 75%;
	vertical-align: middle;
	letter-spacing: normal;
}

.contact_dl dt span.contact_inline {
	display: block;
}

@media screen and (max-width: 768px) {
	.contact_dl dt,
	.contact_dl_last dt {
		margin: 0 0 10px;
		width: 100%;
	}

	.contact_dl dd,
	.contact_dl_last dd {
		width: 100%;
	}

	.contact_dl dt span.contact_inline {
		display: inline;
	}
}

.text_l input,
.text_m input,
.text_s input,
.text_ss input {
	padding: 1em;
	font-size: 1.6rem;
	background-color: #f6f5f0;
	border: 0;
	border-radius: 4px;
}

.text_l input {
	margin: 0 5px 0 0;
	width: 90%;
}

.text_m input {
	margin: 0 5px 0 0;
	width: 60%;
}

.text_s input {
	margin: 0 5px 10px;
	width: 30%;
	text-align: center;
}

.text_ss input {
	margin: 0 5px 10px;
	width: 20%;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.text_l input,
	.text_m input,
	.text_s input,
	.text_ss input {
		width: 100%;
	}

	.s_mobile input {
		width: 50%
	}
	.ss_mobile input {
		width: 30%;
	}

	.wpcf7-radio input,
	.wpcf7-checkbox input {
		max-width: 5%;
	}
}

.wpcf7-list-item {
	display: block;
	margin-left: 0 !important;
}

.text_l p,
.text_m p,
.text_s p,
.text_ss p {
	margin: 0 0 .5em;
}

.textarea_l textarea {
	padding: 1em;
	width: 100%;
	font-size: 1.6rem;
	background-color: #f6f5f0;
	border: 0;
	border-radius: 4px;
}

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

.wpcf7-submit {
	display: block;
	margin: 0 auto;
	width: 200px;
	height: 44px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	background: #4a4a4a;
	border: 0;
	border-radius: 5px;
}

.wpcf7-submit:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: .7;
}


/*--
	◆ hearing
 --*/

.hearing-section {
	margin: 0 auto;
	width: 90%;
}

.hearing-section h2 {
	margin: 0 0 6rem;
	font-size: 2.6rem;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 568px){
	.hearing-section h2 {
		margin: 0 0 4rem;
		font-size: 2.2rem;
	}
	.hearing-section h2 span {
		display: block;
	}
}

.hearing-section h2:nth-of-type(n+2) {
	margin: 12rem 0 6rem;
}

.hearing-section dl {
	margin-bottom: 3rem;
	padding: 0 15rem 3rem;
	border-bottom: 1px dashed #e5e5de;
}

.hearing-title {
	margin-bottom: 2rem;
	font-size: 1.8rem;
	font-weight: bold;
}

.hearing-title:before {
	content: '\f046';
	width: 1rem;
	height: 1rem;
	font-family: FontAwesome;
	font-weight: normal;
}

@media screen and (max-width: 980px){
	.hearing-section dl {
		flex-direction: column;
		padding: 0 7rem 5rem;
	}
}

@media screen and (max-width: 768px){
	.hearing-section {
		width: 100%;
	}

	.hearing-section dl {
		flex-direction: column;
		padding: 0 5rem 5rem;
	}

	.hearing-title {
		margin-right: 0;
		padding-left: 0;
		margin-bottom: 3rem;
		width: 100%;
	}

	.hearing-contents {
		padding-right: 0;
		width: 100%;
	}
}

@media screen and (max-width: 568px){
	.hearing-section dl {
		flex-direction: column;
		padding: 0 2rem 3rem;
	}
}

#container .hearing-contents p {
	margin-bottom: 2rem;
	font-size: 1.5rem;
}

@media screen and (max-width: 568px){
	#container .hearing-contents p {
		font-size: 1.4rem;
	}
}

.hearing-contents-txt .wpcf7-text {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 1.4rem;
	width: 60%;
	color: #4a4a4a;
	font-size: 1.8rem;
	background-color: #f6f5f0;
	border: 0;
	border-radius: .4rem;
}

.hearing-contents-txt textarea {
	padding: 1.4rem;
	width: 100%;
	color: #4a4a4a;
	font-size: 1.8rem;
	background-color: #f6f5f0;
	border: 0;
	border-radius: .4rem;
}

.hearing-contents-txt .wpcf7-date {
	padding: 1.4rem;
	width: 40%;
	height: 5rem;
	color: #4a4a4a;
	font-size: 1.8rem;
	background-color: #f6f5f0;
	border: 0;
	border-radius: .4rem;
	-moz-appearance: none;
	-webkit-appearance: none;
}

@media screen and (max-width: 568px){
	.hearing-contents-txt .wpcf7-text,
	.hearing-contents-txt .wpcf7-date {
		width: 100%;
	}
}



/*--
	◆ Contact_thanks_
 --*/

.contact_thanks_body p {
	margin: 0 0 1.61em;
	text-align: center;
}
.contact_thanks_body p span {
	display: block;
}

@media screen and (max-width: 768px) {
	.contact_thanks_body p span {
		display: inline;
	}
}

.contact_thanks_body figure {
	margin: 5em auto;
}

.contact_thanks_body img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.contact_thanks_body p {
		padding: 0 2em;
		text-align: left;
	}

	.contact_thanks_body figure {
		margin: 3em auto;
	}
}

/*
////////////////////////////////////////////////////////////////////////

	◆ Pagenation

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

.pagenation {
 	width: 100%;
 	letter-spacing: -.40em;
 	text-align: center;
}

.pagenation li {
 	display: inline-block;
 	vertical-align: middle;
 	margin: 0 5px 0 0;
	width: 60px;
	text-align: center;
	letter-spacing: normal;
}

.pagenation li a {
	display: block;
	width: 100%;
	padding: 1em 0;
	color: #4a4a4a;
	border-bottom: 2px solid transparent;
}

.pagenation li a:hover {
	text-decoration: none;
	border-bottom: 2px solid #4a4a4a;
}

.active {
	padding: 1em 0;
	width: 60px;
	text-align: center;
	border-bottom: 2px solid #4a4a4a;
}

.pagenation li.prev a {
	padding: 1em 0 1em 20px;
}
.pagenation li.next a {
	padding: 1em 20px 1em 0;
}

.pagenation li.prev,
.pagenation li.next {
	position: relative;
}

.pagenation li.prev a:after {
	content: '≪';
	position: absolute;
	top: 20px;
	left: 0;
	font-size: 1rem;
}
.pagenation li.next a:after {
	content: '≫';
	position: absolute;
	top: 20px;
	right: 0;
	font-size: 1rem;
}

@media only screen and ( max-width: 568px ) {
	.pagenation li {
		position: absolute;
		top: -9999px;
	}

	.pagenation li.active,
	.pagenation li.prev,
	.pagenation li.next {
		position: initial;
		top: initial;
		left: initial;
		position: relative;
	}

	.pagenation li,
	.pagenation li.active {
		display: inline-block;
		margin: 0;
		width: 33.3333%;
	}

	.pagenation li.active {
		display: inline-block;
		margin: 0;
		border-bottom: 2px solid transparent;
	}

	.pagenation li.active:first-child {
		margin-left: 33.3333%;
	}

	.pagenation a {
		width: 33.3333%;
		border-bottom: 2px solid transparent;
	}

	.pagenation li a:hover {
		border-bottom: 2px solid transparent;
	}

	.pagenation li.prev {
		padding: 0 0 0 20px;
		text-align: left;
	}
	.pagenation li.next {
		padding: 0 20px 0 0;
		text-align: right;
	}

	.pagenation li.prev a:after {
		content: '≪';
		position: absolute;
		top: 20px;
		left: 25px;
	}
	.pagenation li.next a:after {
		content: '≫';
		position: absolute;
		top: 20px;
		right: 25px;
	}
}

.pagenation-next {
	margin-bottom: 3rem;
	text-align: center;
}

.pagenation-next a {
	display: inline-block;
	position: relative;
	padding: 2rem 10rem;
	color: #4a4a4a;
	font-size: 1.6rem;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	z-index: 2;
}

.pagenation-next a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.pagenation-next a,
.pagenation-next a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.pagenation-next a:hover {
	color: #E2BE19;
	text-decoration: none;
}

.pagenation-next a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.pagenation-next a:hover::after {
	background: #000;
	-webkit-transform: scale(1);
	transform: scale(1);
}

@media screen and (max-width: 768px){
	.pagenation-next a {
		padding: 1.4rem 0;
		width: 90%;
		font-size: 1.4rem;
	}
}




/*
////////////////////////////////////////////////////////////////////////

	◆ 404

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

.error_h1 {
	margin: 0 0 .3em;
	font-family: 'Kaushan Script', cursive;
	font-size: 10rem;
	text-align: center;
	line-height: 1.2;
}

.error_h1 span {
	display: block;
	color: #E67E22;
}

.error_message {
	margin: 0 0 2em;
	font-size: 2.5rem;
}

.error_sub_message {
	display: block;
	margin: 0 auto;
	width: 60%;
	font-size: 1.7rem;
}

.error_message span,
.error_sub_message span {
	display: block;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.error_h1 {
		font-size: 7rem;
	}

	.error_message {
		margin: 0 0 2em;
		font-size: 1.8rem;
	}

	.error_sub_message {
		display: block;
		margin: 0 auto;
		width: 90%;
		font-size: 1.7rem;
	}

	.error_sub_message p {
		margin: 0 0 1.61em;
	}

	.error_sub_message span {
		display: inline;
		text-align: left;
	}
}

.cat_contents_list {
	letter-spacing: -.40em;
	text-align: center;
}

.cat_contents_list li {
	display: inline-block;
	margin: 0 1em 1em 0;
	vertical-align: top;
	letter-spacing: normal;
}

.cat_contents_list a {
	display: inline-block;
	position: relative;
	padding: 20px 50px 16px;
	color: #4a4a4a;
	line-height: 1;
	background-color: #fff;
	border: 1px solid #4a4a4a;
	border-radius: 4px;
	z-index: 2;
}

.cat_contents_list a::after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
}
.cat_contents_list a,
.cat_contents_list a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.cat_contents_list a:hover {
	color: #fff;
}

.cat_contents_list a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.cat_contents_list a:hover::after {
	background: #4a4a4a;
	-webkit-transform: scale(1);
	transform: scale(1);
	border-radius: 4px;
}

.cat_title {
	margin: 0 1em 0 0;
}


/*
////////////////////////////////////////////////////////////////////////

	◆ Contents SNS Icon

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

.contents-sns {
	padding: 0 0 1.5em;
	text-align: center;
}

.contents-sns li {
	display: inline-block;
	margin: 0 .5em;
	vertical-align: middle;
}

.contents-sns li a {
	display: inline-block;
	padding: .25em 0 0;
	width: 2em;
	height: 2em;
	color: #4a4a4a;
	font-size: 2rem;
	border-radius: 50%;
}

.contents-sns li a:hover {
	color: #fff;
}

.contents-sns li.icon-tw a:hover {
	background-color: #55ACEE;
}
.contents-sns li.icon-fb a:hover {
	background-color: #315096;
}


/*
////////////////////////////////////////////////////////////////////////

	◆ Search

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

.search_area {
	margin: 0 auto;
	width: 50%;
}

.search_area #s {
	padding: 1em;
	width: 100%;
	color: #4a4a4a;
	font-size: 1.9rem;
	text-align: center;
	background-color: #f6f5f0;
	border: none;
	border-radius: 0;
}

@media screen and (max-width: 768px) {
	.search_area {
		padding: 0 2em;
		width: 100%;
	}

	.search_area #s {
		padding: 1em;
		color: #4a4a4a;
		font-size: 1.9rem;
		text-align: center;
		background-color: #f6f5f0;
		border: none;
		border-radius: 0;
	}
}


/*######################################################################

		Footer

************************************************************************/

#footer {
	background-color: #E2BE19;
}

.footer-wrap {
	position: relative;
	padding: 10rem 0 3rem;
	color: #fff;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-clip-path: polygon(0 0,100% 8%,100% 100%,0 100%);
	clip-path: polygon(0 0,100% 8%,100% 100%,0 100%);
}

@media screen and (max-width: 768px){
	.footer-wrap {
		padding: 5rem 0 3rem;
	}
}

.footer-wrap:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
	z-index: 10;
}

.footer-contents {
	position: relative;
	z-index: 100;
}

.footer-section {
	margin: 0 auto 5rem;
	padding-bottom: 5rem;
	width: 80rem;
	border-bottom: 1px solid #979797;
}

@media screen and (max-width: 800px){
	.footer-section {
		margin: 0 auto 2rem;
		padding: 0 1rem 2rem;
		width: 90%;
	}
}

.footer-title {
	margin-bottom: 2rem;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.4;
}

@media screen and (max-width: 768px){
	.footer-title {
		font-size: 2.6rem;
	}
}

.footer-title span {
	display: block;
	color: #E2BE19;
	font-family: 'Courgette', cursive;
}

.footer-title-txt {
	margin-bottom: 2rem;
}

.footer-contact-btn a {
	display: inline-block;
	position: relative;
	padding: 1.5rem 0;
	width: 45rem;
	color: #000;
	font-size: 1.7rem;
	font-weight: bold;
	background-color: #E2BE19;
	border-radius: 4px;
}

.footer-contact-btn a:hover {
	text-decoration: none;
	opacity: .7;
}

.footer-contact-btn .fa-thumbs-up {
	position: absolute;
	top: 2.1rem;
	right: 2rem;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

@media screen and (max-width: 768px){
	.footer-title-txt span {
		display: block;
	}

	.footer-contact-btn a {
		padding: 1rem 0;
		width: 90%;
		font-size: 1.4rem;
	}

	.footer-contact-btn .fa-thumbs-up {
		top: 1.4rem;
		right: 1rem;
	}
}

.footer-links {
	margin-bottom: 4rem;
}

@media screen and (max-width: 768px){
	.footer-links {
		margin-bottom: 3rem;
	}
}

.footer-links-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.footer-links-list a {
	color: #fff;
	font-size: 2.4rem;
}

.footer-sns.twitter {
	margin-right: 4rem;
}

.copyright {
	font-size: 1.5rem;
	font-family: 'Courgette', cursive;
}


/*
	general
/////////////////////////////////////////////////////////*/

#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #000;
	z-index: 9998;
}

#loader {
	display: none;
	position: relative;
	text-align: center;
	font-size: 8rem;
	font-weight: bold;
	font-family: 'Courgette', cursive;
	z-index: 9999;
}

@media screen and (max-width: 768px){
	#loader {
		font-size: 3rem;
	}
}

.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.loading span {
	position: relative;
	display: inline-block;
	margin: 0 .2rem;
	color: rgba(255,255,255,.1);
}

.loading span::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-text);
	color: #E2BE19;
	opacity: 0;
	transform: scale(1.5);
	animation: loading 3s infinite;
}
.loading span:nth-child(2)::after {
	animation-delay: .1s;
}
.loading span:nth-child(3)::after {
	animation-delay: .2s;
}
.loading span:nth-child(4)::after {
	animation-delay: .3s;
}
.loading span:nth-child(5)::after {
	animation-delay: .4s;
}
.loading span:nth-child(6)::after {
	animation-delay: .5s;
}
.loading span:nth-child(7)::after {
	animation-delay: .6s;
}

@keyframes loading {
	0%, 75%, 100% {
		transform: scale(1.5);
		opacity: 0;
	}
	25%, 50% {
		transform: scale(1);
		opacity: 1;
	}
}

.section-title {
	margin-bottom: 5rem;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}

@media screen and (max-width: 768px){
	.section-title {
		margin-bottom: 3rem;
		font-size: 2.1rem;
	}
}
@media screen and (max-width: 568px){
	.section-title {
		font-size: 1.8rem;
	}
}

.section-title span {
	display: block;
	color: #E2BE19;
	font-family: 'Courgette', cursive;
}

.contents-more {
	text-align: center;
}

.contents-more a {
	display: inline-block;
	position: relative;
	padding: 1.5rem 3rem;
	width: 30rem;
	color: #000;
	font-size: 1.7rem;
	font-weight: bold;
	text-align: left;
	background-color: #E2BE19;
	border-radius: 4px;
}

.contents-more a:hover {
	text-decoration: none;
	opacity: .7;
}

.contents-more .fa-hand-point-right {
	position: absolute;
	top: 2.2rem;
	right: 2rem;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.contents-more:hover .fa-hand-point-right {
	top: 2.2rem;
	right: 1.6rem;
}

.action-zoom {
	transition: 1.0s;
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.action-zoom-action {
	transition: 1.0s;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

.action-3dzoom {
	transition: 1.0s;
	transform: scale(0, 0) rotateY(180deg);
	-webkit-transform: scale(0, 0) rotateY(180deg);
}
.action-3dzoom-action {
	transition: 1.0s;
	transform: scale(1, 1) rotateY(360deg);
	-webkit-transform: scale(1, 1) rotateY(360deg);
}

.action-movedown {
	opacity: 0;
	transition: 2s;
	transform: translate(0,-12rem);
	-webkit-transform: translate(0,-12rem);
}
.action-movedown-action {
	opacity: 100;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}

.amove01 {
	transition: 1s;
}
.amove02 {
	transition: 1.5s;
}
.amove03 {
	transition: 2s;
}



/*
	top
/////////////////////////////////////////////////////////*/

.top-hero {
	margin: 0 auto 10rem;
	padding-top: 3rem;
	width: 120rem;
}

@media screen and (max-width: 1200px){
	.top-hero {
		margin: 0 auto 3rem;
		padding: 2rem 1rem 0;
		width: 100%
	}
}

.top-hero-titlearea {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 5rem;
}

.top-hero-titlearea-title {
	font-size: 2.8rem;
	font-weight: bold;
}

.top-hero-titlearea-btn span {
	display: block;
}

@media screen and (max-width: 890px){
	.top-hero-titlearea {
		margin-bottom: 3rem;
		text-align: center;
	}

	.top-hero-titlearea-title {
		margin: 0 auto 2rem;
		width: 100%;
		font-size: 2.1rem;
	}

	.top-hero-titlearea-btn {
		width: 100%;
	}

	.top-hero-titlearea-title span {
		display: block;
	}
}

.top-hero-titlearea-btn a {
	display: inline-block;
	position: relative;
	padding: 2rem 5rem 2rem 3rem;
	color: #000;
	font-size: 1.7rem;
	font-weight: bold;
	background-color: #E2BE19;
	border-radius: 4px;
	z-index: 1;
}

.top-hero-titlearea-btn a:hover {
	text-decoration: none;
	opacity: .7;
}

@media screen and (max-width: 768px){
	.top-hero-titlearea-btn {
		margin: 0 auto;
	}
	.top-hero-titlearea-btn a {
		padding: 1rem 3rem 1rem 2rem;
		width: 30rem;
		font-size: 1.5rem;
	}

	.top-hero-titlearea-btn span {
		display: block;
	}
}

.top-hero-titlearea-btn .fa-hand-point-up {
	position: absolute;
	top: 4rem;
	right: 2rem;
	transform: rotate(30deg);
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.top-hero-titlearea-btn:hover .fa-hand-point-up {
	top: 3.7rem;
	right: 1.8rem;
}

@media screen and (max-width: 768px){
	.top-hero-titlearea-btn .fa-hand-point-up {
		position: absolute;
		top: 2.7rem;
		right: 1rem;
	}

	.top-hero-titlearea-btn:hover .fa-hand-point-up {
		top: 2.4rem;
		right: .8rem;
	}
}

.top-hero-section {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.top-hero-section figure {
	width: 46%;
}

.top-hero-contents {
	width: 52%;
}

@media screen and (max-width: 768px){
	.top-hero-section figure {
		margin-bottom: 2rem;
		width: 100%;
	}

	.top-hero-contents {
		width: 100%;
	}
}

.top-hero-section figure img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.top-hero-contents-title {
	margin-bottom: 2rem;
	font-size: 3rem;
}

.top-hero-contents-title span {
	font-weight: bold;
}

@media screen and (max-width: 768px){
	.top-hero-contents-title {
		margin-bottom: 2rem;
		font-size: 1.8rem;
		text-align: center;
		line-height: 1.4;
	}

	.top-hero-contents-title span {
		display: block;
		font-weight: normal;
	}
}

.top-hero-contents-txt p {
	margin-bottom: 2rem;
}

@media screen and (max-width: 768px){
	.top-hero-contents-txt p {
		margin-bottom: 1.5rem;
	}
}

.movie-header {
	position: relative;
	margin-bottom: 5rem;
	height: 45rem;
	overflow: hidden;
	-webkit-clip-path: polygon(0 0%,100% 0,100% 94%,0 100%);
	clip-path: polygon(0 0%,100% 0,100% 94%,0 100%);
}

@media screen and (max-width: 768px){
	.movie-header {
		margin-bottom: 3rem;
		height: 21rem;
		overflow: hidden;
	}
}

.movie-header-bg {
	background-color: #E2BE19;
}

.movie-header:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.3);
	z-index: 10;
}

.movie-header-video {
	position: absolute;
  top: 0;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	z-index: 1;
}

.top-contents-header-title {
	position: relative;
	padding: 20rem 0 7rem;
	color: #fff;
	font-size: 4.6rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	z-index: 100;
}

@media screen and (max-width: 768px){
	.top-contents-header-title {
		padding: 8rem 0 0;
		font-size: 2.6rem;
	}
}

.top-contents-header-title span {
	display: block;
	color: #E2BE19;
	font-size: 3rem;
	font-family: 'Courgette', cursive;
}

.top-work-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 auto 7rem;
	width: 120rem;
}

@media screen and (max-width: 1200px){
	.top-work-wrap {
		margin: 0 auto 3rem;
		padding: 0 1rem;
		width: 100%;
	}
}

.top-work-contents {
	display: flex;
	flex-direction: column;
	width: 30%;
}

@media screen and (max-width: 768px){
	.top-work-contents {
		margin-bottom: 5rem;
		width: 100%;
	}
}

.top-work-title {
	margin-bottom: 2rem;
	font-size: 2.6rem;
}

.top-work-title svg {
	margin-right: 2rem;
	font-size: 2.3rem;
	vertical-align: -.2rem;
}

@media screen and (max-width: 980px){
	.top-work-title {
		margin-bottom: 2rem;
		font-size: 2rem;
	}
}

@media screen and (max-width: 768px){
	.top-work-title {
		font-size: 2.4rem;
		text-align: center;
	}

	.top-work-title svg {
		margin-right: 1.5rem;
		font-size: 1.8rem;
	}
}

.top-work-txt {
	margin-bottom: 1rem;
}

.top-work-txt p {
	margin-bottom: 2rem;
}

@media screen and (max-width: 768px){
	.top-work-txt p {
		margin-bottom: 1.5rem;
	}
}

.top-work-contents-btn {
	margin-top: auto;
}

.top-work-contents-btn a {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 1.5rem 2rem;
	color: #000;
	width: 30rem;
	font-weight: bold;
	background-color: #E2BE19;
	border-radius: 4px;
}

.top-work-contents-btn a:hover {
	text-decoration: none;
	opacity: .7;
}

@media screen and (max-width: 980px){
	.top-work-contents-btn a {
		width: 100%;
	}
}

@media screen and (max-width: 768px){
	.top-work-contents-btn a {
		width: 35rem;
	}
}

@media screen and (max-width: 468px){
	.top-work-contents-btn a {
		width: 90%;
	}
}

.top-work-contents-btn .fa-hand-point-right {
	position: absolute;
	top: 2.2rem;
	right: 2rem;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.top-work-contents-btn:hover .fa-hand-point-right {
	top: 2.2rem;
	right: 1.6rem;
}

.top-work-portfolio {
	margin-bottom: 10rem;
}

.top-work-portfolio-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 120rem;
	overflow: hidden;
}

@media screen and (max-width: 1200px){
	.top-work-portfolio-wrap {
		padding: 0 1rem;
		width: 100%;
	}
}

.top-work-portfolio-item {
	margin-bottom: 5rem;
	width: 23%;
}

@media screen and (max-width: 768px){
	.top-work-portfolio-item {
		margin-bottom: 3rem;
		width: 100%;
	}
}

.top-work-portfolio-item figure {
	margin-bottom: 1.5rem;
	height: 23rem;
	border: 1px solid #E8E7DE;
	overflow-y: hidden;
}

.top-work-portfolio-item figure img {
	display: block;
	max-width: 100%;
	height: auto;
}

.top-work-portfolio-item figcaption svg {
	display: block;
	margin: 0 auto;
	font-size: 2.5rem;
}

.top-work-portfolio-item-title {
	text-align: center;
}

[class*=" imghvr-"] figcaption,
[class^=imghvr-] figcaption {
	color: #000;
}



/*
	blog archive
/////////////////////////////////////////////////////////*/

.blog-archive-header {
	margin-bottom: 7rem;
	background-color: #E2BE19;
}

@media screen and (max-width: 768px){
	.blog-archive-header {
		margin-bottom: 3rem;
	}
}

.blog-archive-header-wrap {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-clip-path: polygon(0 15%,100% 0,100% 100%,0 100%);
	clip-path: polygon(0 15%,100% 0,100% 100%,0 100%);
}

.blog-archive-header-wrap:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.6);
}

.blog-archive-header-title {
	position: relative;
	padding: 15rem 0 12rem;
	color: #fff;
	font-size: 4.6rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	z-index: 100;
}

.blog-archive-header-title span {
	display: block;
	color: #E2BE19;
	font-size: 3rem;
	font-family: 'Courgette', cursive;
}

@media screen and (max-width: 768px){
	.blog-archive-header-title {
		padding: 7rem 0 5rem;
		font-size: 2.8rem;
	}

	.blog-archive-header-title span {
		font-size: 2.1rem;
	}
}

.blog-archive-section {
	padding-bottom: 10rem;
}

.blog-archive-wrap {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 120rem;
}

.blog-archive-item {
	margin-bottom: 5rem;
	width: 31%;
}

.blog-archive-item:not(:nth-child(3n+3)) {
	margin-right: 3.5%;
}

@media screen and (max-width: 1200px){
	.blog-archive-wrap {
		padding: 0 1rem;
		width: 100%;
	}
}

@media screen and (max-width: 980px){
	.blog-archive-item {
		width: 48%;
	}

	.blog-archive-item:not(:nth-child(3n+3)) {
		margin-right: 0;
	}
	.blog-archive-item:not(:nth-child(2n+2)) {
		margin-right: 4%;
	}
}

@media screen and (max-width: 768px){
	.blog-archive-wrap {
		padding: 0 1rem 3rem;
	}

	.blog-archive-item {
		margin-bottom: 2rem;
		padding-bottom: 2rem;
		width: 100%;
		border-bottom: 1px solid #E8E7DE;
	}

	.blog-archive-item:not(:nth-child(2n+2)) {
		margin-right: 0;
	}

	.blog-archive-item:last-child {
		margin-bottom: 0;
	}
}

.blog-archive-item a {
	display: inline-block;
	color: #4a4a4a;
}

.blog-archive-item a:hover {
	text-decoration: none;
	opacity: .7;
}

.blog-archive-img {
	position: relative;
	margin-bottom: 2rem;
	height: 22rem;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: 1px solid #E8E7DE;
}

@media screen and (max-width: 768px){
	.blog-archive-img {
		margin-bottom: 0;
		height: 10rem;
	}
}

.blog-archive-img img {
	display: none;
	max-width: 100%;
	height: auto;
	opacity: 1;
}

a figure.blog-archive-img:after,
a figure.blog-archive-img:before {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	background-color: rgba(226,190,25,.6);
	-webkit-transition: all 0.55s ease-in-out;
	transition: all 0.55s ease-in-out;
	z-index: 1;
}

a figure.blog-archive-img:after {
	top: 0;
	left: 0;
	-webkit-transform: skew(-45deg) translateX(-150%);
	transform: skew(-45deg) translateX(-150%);
}

a figure.blog-archive-img:before {
	right: 0;
	bottom: 0;
	-webkit-transform: skew(-45deg) translateX(150%);
	transform: skew(-45deg) translateX(150%);
}

a figure.blog-archive-img figcaption {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2.8rem;
	font-size: 2.8rem;
	font-family: 'Courgette', cursive;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
}

a figure.blog-archive-img p {
	margin: 0;
	width: 100%;
	color: #000;
	opacity: 0;
}

a:hover figure.blog-archive-img img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

a:hover figure.blog-archive-img:after {
	-webkit-transform: skew(-45deg) translateX(-50%);
	transform: skew(-45deg) translateX(-50%);
}

a:hover figure.blog-archive-img:before {
	-webkit-transform: skew(-45deg) translateX(50%);
	transform: skew(-45deg) translateX(50%);
}

a:hover figure.blog-archive-img figcaption p {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	opacity: 1;
}

@media screen and (max-width: 768px){
	a:hover figure.blog-archive-img img {
		-webkit-filter: grayscale(0%);
		filter: grayscale(0%);
	}

	a:hover figure.blog-archive-img:after,
	a:hover figure.blog-archive-img:before {
		display: none;
	}

	a:hover figure.blog-archive-img figcaption p {
		opacity: 0;
	}
}

.blog-archive-item-title {
	margin-bottom: 1rem;
}

.blog-archive-item-txt {
	margin-bottom: 1rem;
	color: #777;
	font-size: 1.3rem;
}

.blog-archive-item-tag {
	color: #777;
	font-size: 1.2rem;
}

.blog-archive-item-tag svg {
	margin-right: .5rem;
}

@media screen and (max-width: 768px){
	.blog-archive-item a {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.blog-archive-img {
		width: 40%;
	}

	.blog-archive-contents {
		width: 55%;
	}

	.blog-archive-item-title {
		font-size: 1.4rem;
		line-height: 1.4;
	}

	.blog-archive-item-txt {
		display: none;
	}

	.blog-archive-item-tag {
		font-size: 1rem;
	}
}



/*
////////////////////////////////////////////////////////////////////////

	◆ Icon font

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

.fa.fa-angle-right {
	margin: 0 .4em 0 0;
}

.icon-management {
	content: '\f007';
	font-family: FontAwesome;
}
.icon-wp {
	content: '\f19a';
	font-family: FontAwesome;
}


/*
////////////////////////////////////////////////////////////////////////

	◆ Ad style

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

/*-- .top-ad --*/

.top-ad {
	margin: 7rem auto;
	text-align: center;
}

.top-ad img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 768px){
	.top-ad {
		margin: 3rem auto;
	}
}


/*-- post_header_ad --*/

.post-ad {
	margin: 7rem auto 10rem;
	text-align: center;
}

.post-ad img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 768px){
	.post-ad {
		margin: 5rem auto;
		text-align: center;
	}
}


/*-- post_footer_ad --*/

.ad_area {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 7rem 0;
	width: 100%;
	text-align: center;
	background-color: #fff;
}

.ad_box:first-child {
	margin-right: 3em;
}

@media screen and (max-width: 768px) {
	.ad_area {
		flex-flow: column wrap;
		padding: 3rem 0;
	}

	.ad_box:first-child {
		margin-right: 0;
	}
}

.post_paging {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.post_paging a {
	flex: 1;
}

.prevpost_left a,
.nextpost_right a {
	display: block;
	padding: 1em;
	font-size: 1.4rem;
	border-bottom: 1px solid #e5e5de;
}

.prevpost_left a {
	border-top: 1px solid #e5e5de;
}


.prevpost_left img,
.nextpost_right img {
	display: block;
	width: 100%;
	height: auto;
}

.prevpost_left a,
.nextpost_right a {
	border-bottom: 1px solid #e5e5de;
}

.prevpost_left a {
	border-top: 1px solid #e5e5de;
}

#toc_index {
	margin: 0 auto 5rem;
	width: 860px;
}

@media screen and (max-width: 860px){
	#toc_index {
		width: 100%;
	}
}

.toc {
	margin: 3em auto 0;
	padding: 2em 3em 3em;
	width: 100%;
	background-color: #f6f5f0;
	border: 1px solid #e5e5de;
}

@media screen and (max-width: 768px) {
	.toc {
		padding: 1.5em 2em 1em;
		font-size: 1rem;
	}
}

/*-- カウントセット --*/
.toc ol {
	counter-reset: hl_count;
	list-style: none;
}
.toc li {
	counter-increment: hl_count;
}
.toc li:before {
	content: counters(hl_count, "-")
}

/*-- base style --*/
h2.toc_title {
	margin: 0 0 .5em;
	padding: 0 0 0 .2em;
	font-size: 2rem;
	text-indent: -1em;
	border: 0;
}

h2.toc_title:after {
	display: none;
}

@media screen and (max-width: 768px) {
	p.toc_title {
		text-align: center;
	}
}

.toc ol ol,
.toc li ol li {
	margin-top: .2em;
}

.toc li:before {
	margin-right: 1em;
	padding: .1em .5em;
	text-align: center;
	font-family: 'Open Sans', cursive;
}

.toc li {
	padding-left: 1em;
	text-indent: -2em;
}
.toc li ol li {
	padding-left: 1em;
	text-indent: -3.3em;
}
.toc li ol li ol li {
	padding-left: 1em;
	text-indent: -4.3em;
}

.toc li ol {
	margin: 0 0 1em 2.4em;
}
.toc li ol li ol {
	margin-left: 3.9em;
}

@media screen and (max-width: 768px) {
	.toc li ol li:before {
		margin-right: 1em;
		padding: .1em .2em;
		text-align: center;
		font-family: 'Open Sans', cursive;
	}

	.toc li {
		padding-left: 2em;
		text-indent: -2.8em;
	}

	.toc li ol li {
		padding-left: 0em;
		text-indent: -3.3em;
	}

	.toc li ol {
		margin: 0 0 1em;
	}
	.toc li ol li ol {
		margin-left: 3.9em;
	}
}

/*-- font-color & border --*/

.toc li ol li:before {
	border: 0;
	border-radius: 4px;
}

/*-- font-style --*/
.toc li:before {
	font-size: 1.4rem;
}
.toc li {
	font-size: 1.4rem;
	font-weight: bold;
}
.toc li ol li {
	font-size: 1.4rem;
	font-weight: normal;
}

@media screen and (max-width: 568px){
	.toc li:before {
		font-size: 1.2rem;
	}
	.toc li {
		font-size: 1.4rem;
	}
	.toc li ol li {
		font-size: 1.2rem;
	}
}

p.to_toc_index {
	margin: 5rem 0;
	text-align: right;
}

@media screen and (max-width: 568px){
	p.to_toc_index {
		margin: 3rem 0;
	}
}

.to_toc_index a {
	color: #4a4a4a;
}

.to_toc_index a:before {
	content: '\f102\0020';
	font-family: FontAwesome;
}


/*
////////////////////////////////////////////////////////////////////////

	◆ Work Template

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

/*
////////////////////////////////////////////////////////////////////////

	◆ Contents

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

#top_container {
	width: 100%;
}

#top_container .swiper-container,
.header_single_image {
	position: absolute;
	top: 0;
	width: 100%;
}

.main-contents {
	padding-top: 70px;
}

.contents-h3 {
	margin-bottom: 1em;
	font-size: 2.2rem;
	text-align: center;
}
.contents-h3 span{
	display: block;
	margin-top: .5em;
	font-size: 1.4rem;
}


#container p {
	margin-bottom: 2.2rem;
}

.bg-gray {
	padding: 3em 0;
	background-color: #f6f5f0;
}

.contents-wrap {
	letter-spacing: -.40em;
}

.contents-half {
	display: inline-block;
	width: 50%;
	vertical-align: top;
	letter-spacing: normal;
}

.contents-half.left {
	padding-right: 3em;
}
.contents-half.right {
	padding-left: 3em;
}

@media screen and (max-width: 1280px){
	.contents-wrap {
		padding: 0 2em;
	}

	.contents-half.left {
		padding-right: 1em;
	}
	.contents-half.right {
		padding-left: 1em;
	}
}

@media screen and (max-width: 568px){
	.contents-half {
		width: 100%;
	}

	.contents-half.left {
		margin-bottom: 3em;
		padding-right: 0;
	}
	.contents-half.right {
		padding-left: 0;
	}
}

.contents-half.right p {
	margin: 0 0 1.61em;
}

.contents-box {
	display: inline-block;
	margin: 0 5% 5em 0;
	width: 30%;
	vertical-align: top;
	letter-spacing: normal;
}
.contents-box:nth-child(3n+3) {
	margin: 0 0 5em;
}

@media screen and (max-width: 768px){
	.contents-box {
		display: inline-block;
		margin: 0 10% 5em 0;
		width: 45%;
		vertical-align: top;
		letter-spacing: normal;
	}
	.contents-box:nth-child(3n+3) {
		margin: 0 10% 5em 0;
	}
	.contents-box:nth-child(2n+2) {
		margin: 0 0 5em;
	}
}

@media screen and (max-width: 568px){
	.contents-box {
		margin: 0 0 5em;
		width: 100%;
	}

	.contents-box:last-child {
		margin: 0;
	}
}

.contents-form-area {
	margin: 3em auto 0;
	width: 70%;
}

@media screen and (max-width: 568px){
	.contents-form-area {
		padding: 0 2em;
		width: 100%;
	}
}

.contact-form-area {
	margin: 5em 0 0;
}



/*---------- / Section / ----------*/

.section-area {
	margin: 0 auto;
	width: 1280px;
}

@media screen and (max-width: 1280px){
	.section-area {
		width: 100%;
	}
}


/*---------- / Plan / ----------*/

.plan_body {
	padding: 3.5em 0 0;
	letter-spacing: -.40em;
}

.plan_title {
	margin: 0 0 1em;
	font-size: 2.6rem;
}

.plan_title span {
	margin: 0 0 0 3em;
	font-size: 2rem;
}

@media screen and (max-width: 768px) {
	.plan_title {
		margin: 0 0 1.7em;
		font-size: 2.2rem;
		text-align: center;
	}
	.plan_title span {
		display: block;
		margin: 0;
		font-size: 1.6rem;
	}
}

.plan_image_left,
.plan_contents_right {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}

.plan_image_left {
	width: 50%;
	height: 650px;
	border: 1px solid #e5e5de;
	overflow: hidden;
}

.plan_contents_right {
	padding: 0 0 0 3em;
	width: 50%;
}

.plan_image_left img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.plan_image_left,
	.plan_contents_right {
		width: 100%;
	}

	.plan_image_left {
		margin: 0 0 3em;
		height: 280px;
	}

	.plan_contents_right {
		padding: 0 2em;
	}
}

.plan_txt {
	font-size: 1.5rem;
}

.plan_txt p {
	margin: 0 0 2em;
}
.plan_txt p:last-child {
	margin: 0;
}

.plan_txt dl {
	padding: 1em 1em .7em;
	font-size: 1.4rem;
	letter-spacing: -.40em;
	border-bottom: 1px dotted #d6d6d6;
}
.plan_txt dl:first-of-type {
	position: relative;
	padding: 0 1em .7em;
}

.plan_txt dt,
.plan_txt dd {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}

.plan_txt dt {
	width: 25%;
}
.plan_txt dd {
	width: 75%;
}

@media screen and (max-width: 768px) {
	.plan_txt dt {
		width: 40%;
	}
	.plan_txt dd {
		width: 60%;
	}
}



/*---------- / Profile / ----------*/

.header-prof-auther {
	position: relative;
	margin: 0 auto;
	width: 220px;
	height: 220px;
	z-index: 2;
}

@media screen and (max-width: 640px){
	.header-prof-auther {
		width: 40%;
		height: 40%;
	}
}

.header-prof-auther img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}

.profile-contents {
	padding: 8em 0 0;
	font-size: 1.5rem;
}

h2.prof-name {
	margin-bottom: .5em;
	font-size: 2.2rem;
	text-align: center;
}
.prof-name span {
	display: block;
	font-size: 2.6rem;
}

.prof-description {
	margin-top: 1em;
	text-align: center;
}

.prof-description p {
	margin-bottom: 1em;
}
.prof-description p span {
	display: block;
}

@media screen and (max-width: 640px){
	.profile-contents {
		padding: 6em 0 0;
	}

	.prof-description {
		padding: 0 2em;
		text-align: left;
	}

	.prof-description p span {
		display: inline;
	}
}

.prof-dl dl {
	padding: 1.3em 2em 1em;
	letter-spacing: -.40em;
	border-bottom: 1px solid #c3c3c3;
}
.prof-dl dl:first-child {
	padding: 0em 2em 1em;
}

.prof-dl dt,
.prof-dl dd {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}

.prof-dl dt {
	width: 20%;
}
.prof-dl dd {
	width: 80%;
}

@media screen and (max-width: 980px){
	.prof-dl dl {
		padding: 1.3em 0em 1em;
	}
	.prof-dl dl:first-child {
		padding: 0em 0em 1em;
	}

	.prof-dl dt {
		width: 30%;
	}
	.prof-dl dd {
		width: 70%;
	}
}

.prof-about-icon {
	display: block;
	margin-bottom: .4em;
	font-family: "FontAwesome";
	font-size: 6rem;
	text-align: center;
	line-height: 1;
}

.wp:after {
	content: '\f19a';
}
.design:after {
	content: '\f108';
}
.operation:after {
	content: '\f080';
}
.html:after {
	content: '\f13b';
}
.css:after {
	content: '\f13c';
}
.jquery:after {
	content: '\f1cc';
}
.responsive:after {
	content: '\f10a';
}
.blogcontent:after {
	content: '\f028';
}

.toppage:after {
	content: '\f15c';
}
.subpage:after {
	content: '\f0f6';
}
.posting:after {
	content: '\f1c7';
}
.form:after {
	content: '\f1d8';
}
.blogservice:after {
	content: '\f14b';
}
.movieservice:after {
	content: '\f008';
}


/*---------- / Question / ----------*/

.qa-wrap {
	margin: 0 auto 10rem;
	width: 80rem;
}

@media screen and (max-width: 800px){
	.qa-wrap {
		margin: 0 auto 5rem;
		padding: 0 1rem;
		width: 100%;
	}
}

.qa-contents:not(:first-of-type) {
	margin-top: 7rem;
}

@media screen and (max-width: 800px){
	.qa-contents:not(:first-of-type) {
		margin-top: 5rem;
	}
}

.qa-title {
	margin-bottom: 5rem;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
}

.qa-subtitle {
	margin-bottom: 3rem;
	font-size: 2.4rem;
	text-align: center;
}

@media screen and (max-width: 768px){
	.qa-title {
		margin-bottom: 3rem;
		font-size: 2.3rem;
		font-weight: bold;
		text-align: center;
	}

	.qa-subtitle {
		margin-bottom: 2rem;
		font-size: 2rem;
		text-align: center;
	}
}

.qa-text dl {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #E8E7DE;
}

@media screen and (max-width: 768px){
	.qa-text dl {
		margin-bottom: 1rem;
		padding-bottom: 1rem;
	}
}

.qa-text dt {
	position: relative;
	padding: 0 6rem 0 2rem;
	font-size: 1.7rem;
}

.qa-text dt:after {
	content: '\f107';
	position: absolute;
	top: 0;
	right: 2rem;
	color: #E2BE19;
	font-family: FontAwesome;
}

.qa-text dd {
	padding: 2rem 6rem 2rem 4rem;
	font-size: 1.5rem;
}

.qa-text dd p {
	margin-bottom: 1.5rem;
}

@media screen and (max-width: 768px){
	.qa-text dt {
		position: relative;
		padding: 0 4rem 0 0;
		font-size: 1.5rem;
	}

	.qa-text dt:after {
		right: 1rem;
	}

	.qa-text dd {
		padding: 2rem 4rem 0 2rem;
		font-size: 1.4rem;
	}

	.qa-text dd p {
		margin-bottom: 1.4rem;
	}
}

.hero-btn a {
	display: inline-block;
	margin: 0 auto;
	padding: 2rem 0;
	width: 48rem;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-shadow: 0 2px 1px #AB4800;
	background-color: #FF6C00;
	border-bottom: 3px solid #AB4800;
	border-radius: 7px;
}

.hero-btn a:hover {
	opacity: .7;
}

.work-ban a {
	display: block;
	margin: 0 auto 2rem;
	max-width: 100%;
	height: auto;
}

.work-ban img {
	display: block;
	max-width: 100%;
	height: auto;
}


.for-limited {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	font-family: "Montserrat", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	z-index: 500;
}

.for-limited a {
	display: block;
	padding: 2rem;
	color: #000;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	background-color: #E2BE19;
	border: 3px solid #000;
	border-radius: .5rem;
}

.for-limited a:hover {
	opacity: .5;
	text-decoration: none;
}

.for-limited a span.text {
	font-size: 1.2rem;
}
.for-limited a span.month {
	font-size: 2rem;
	font-style: italic;
}
.for-limited a span.count {
	font-size: 3rem;
	font-style: italic;
}

.for-limited a .fal.fa-external-link {
	margin-top: 1rem;
}

@media screen and (max-width: 768px){
	.for-limited a {
		padding: 1rem;
		font-size: 1.2rem;
	}

	.for-limited a span.text {
		font-size: 1rem;
	}
	.for-limited a span.month {
		font-size: 1.6rem;
	}
	.for-limited a span.count {
		font-size: 2rem;
	}
}