@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Rubik:400,700|M+PLUS+Rounded+1c:400,700&display=swap');

body {
	color: #333;
	font-size: 16px;
	line-height: 1;
	font-family: 'Noto Sans',  'M PLUS Rounded 1c', sans-serif;
	background: #fff;
}
.fw-700 { font-weight: 700;}
::selection { background: #e3dae7;}

/* --- common --- */
/* a */
a,
a:hover {
	color: #333;
	text-decoration: none;
}
/* wrap */
.wrap {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}
@media screen and (max-width: 770px) {
.wrap {
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
}
}

/* img */
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

/* --- header --- */
#header { padding: 30px 0 60px;}
#header .description {
	position: absolute;
	top: 35px;
	left: 40px;
	font-size: 10px;
}
#header h1 { width: 190px;}
.drawer-hamburger:hover { cursor: pointer;}
.hamburger {
	position: relative;
	display: block;
}
.hamburger:after,
.hamburger:before {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	-webkit-transition: all .6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all .6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	background-color: #000;
	-webkit-border-radius: 99px;
	border-radius: 99px;
}
.hamburger:after { top: 0;}
.hamburger:before { top: 10px;}
.drawer-open .hamburger:after,
.drawer-open .hamburger:before { top: 5px;}
.drawer-open .hamburger:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.drawer-open .hamburger:before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.drawer-menu li { padding: 5px;}
.drawer-menu li:first-child { padding-top: 15px;}
.drawer-menu a {
	display: block;
	padding: 10px;
}
@media screen and (max-width: 770px) {
#header { padding: 30px 0 50px;}
#header h1 { width: 160px;}
}


/* --- footer --- */
#footer {
	padding: 100px 0 50px;
	font-size: 12px;
	text-align: center;
}
@media screen and (max-width: 770px) {
#footer { padding: 60px 0 40px;}
}


/* --- container --- */
#container {
	position: relative;
	padding-left: 10px;
	padding-right: 10px;
}
#container .section {
	clear: both;
	line-height: 2;
}
#container .section + .section { padding-top: 80px;}
.archive #container .section + .section { padding-top: 30px;}
#container .section p + p { margin-top: 15px;}
#container header {
	margin-bottom: 20px;
	line-height: 1;
}
#container header .title {
	margin-bottom: 10px;
	font-size: 18px;
	line-height: 1.3;
}
.archive h2.title {
	margin-bottom: 50px;
	font-size: 20px;
}
#container .date {
	font-size: 12px;
	font-family: 'Rubik';
	letter-spacing: 1px;
	text-align: right;
}
#container footer { margin-top: 50px;}
.home #container footer { margin-top: 20px;}
#container .tags-list {
	margin-bottom: 15px;
	text-align: right;
	line-height: 1;
}
#container .tags-list a {
	font-size: 12px;
	line-height: 1;
	text-decoration: underline;
	font-family: 'Rubik';
	letter-spacing: 0.7px;
}
#container .tags-list a:hover { text-decoration: none;}
#container .info-list {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: flex-end;
}
#container .info-list li {
	font-size: 12px;
	line-height: 1;
	font-family: 'Rubik';
	letter-spacing: 0.4px;
}
#container .info-list li + li:before {
	content: '/';
	padding: 0 5px;
}
#container .info-list a { text-decoration: underline;}
#container .info-list a:hover { text-decoration: none;}

#container .post-related {
	margin-top: 30px;
}
#container .post-link {
	margin-top: 30px;
}
#container .post-link ul {
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}

#pager .pagination ul { text-align: center;}
#pager .pagination li {
	display: inline;
	margin: 0 2px;
	padding: 0;
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	position: relative;
}
#pager .pagination li .page-numbers {
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display: table;
	font-size: 12px;
	font-family: 'Rubik';
	text-decoration: none;
}
#pager .pagination li a span,
#pager .pagination li span span {
	display: table-cell;
	vertical-align: middle;
}
#pager .pagination li a:hover,
#pager .pagination li span.current {
	background: #ccc;
	border-radius: 50%;
}
@media screen and (min-width: 751px) {
#pager .pagination li .page-numbers {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
#pager .pagination li a:hover,
#pager .pagination li span.current {
	animation: animScale 0.4s ease-out;
	transform-origin: 50% 50%;
	-webkit-animation: animScale 0.4s ease-out;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: animScale 0.4s ease-out;
	-moz-transform-origin: 50% 50%;
}
@keyframes animScale {
  0% { transform: scale(0.8, 0.8); }
  40% { transform: scale(1.2, 1.2); }
  60% { transform: scale(1, 1); }
  80% { transform: scale(1.1, 1.1); }
  100% { transform: scale(1, 1); }
}
@-webkit-keyframes animScale {
  0% { -webkit-transform: scale(0.8, 0.8); }
  40% { -webkit-transform: scale(1.2, 1.2); }
  60% { -webkit-transform: scale(1, 1); }
  80% { -webkit-transform: scale(1.1, 1.1); }
  100% { -webkit-transform: scale(1, 1); }
}
@-moz-keyframes animScale {
  0% { -moz-transform: scale(0.8, 0.8); }
  40% { -moz-transform: scale(1.2, 1.2); }
  60% { -moz-transform: scale(1, 1); }
  80% { -moz-transform: scale(1.1, 1.1); }
  100% { -moz-transform: scale(1, 1); }
}
}
@media screen and (max-width: 750px) {
}


/* --- parts  --- */
.form-area .required {
	padding: 0 5px;
	color: #003f6c;
	font-size: 12px;
	font-weight: 700;
}
.form-area input,
.form-area textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1;
	margin: 0;
    border: none;
    outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.form-area label { cursor: pointer;}
.form-area .button {
	position: relative;
	margin: 0 auto;
	width: 200px;
	text-align: center;
}
div.wpcf7#wpcf7-f54-p35-o1 .ajax-loader {
	position: absolute;
	top: 50%;
	left: 7px;
	margin: 0;
	margin-top: -8px;
}
#wpcf7-f54-p35-o1 span.wpcf7-not-valid-tip {
	margin-top: 5px;
	color: #f00;
	font-size: 12px;
	line-height: 1;
}
.form-area .wpcf7-submit {
	padding: 15px 0;
	width: 100%;
	cursor: pointer;
	background: #dae2e7;
}
.form-list {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.form-list dl { width: 100%;}
.form-list .wpcf7-text,
.form-list .wpcf7-textarea {
	padding: 10px;
	width: 100%;
	background: #dae2e7;
}
.form-list .wpcf7-textarea {
	resize: vertical;
	line-height: 1.6;
}
.form-list .wpcf7-text:focus,
.form-list .wpcf7-textarea:focus {
    background: #f2fafe;
    outline: 0;
}
.form-list .wpcf7-text.wpcf7-not-valid,
.form-list .wpcf7-textarea.wpcf7-not-valid { background: #ffe1e1;}
@media screen and (min-width: 769px) {
.form-list dt,
.form-list dd {
	padding: 15px 0;
	vertical-align: middle;
}
.form-list dd { padding-left: 20px;}
.form-list .table { display: table-row;}
.form-list .table dt,
.form-list .table dd { display: table-cell;}
.form-list .table dt {
	width: 140px;
	text-align: center;
}
}
@media screen and (max-width: 770px) {
.form-list dt { padding-bottom: 5px;}
.form-list dd { padding-bottom: 15px;}
}

.iframe-wrap {
    position: relative;
    padding-bottom: 60%;
    height: 0;
    overflow: hidden;
}
.iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
p + .iframe-wrap { margin-top: 20px;}

.link { margin-top: 20px;}
.link a {
	position: relative;
	padding-left: 20px;
	text-decoration: underline;
}
.link a:before {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -3px;
	content: '';
	width: 6px;
	height: 6px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
}
.link a:hover {
	text-decoration: none;
}