@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese');
/*
Theme Name： UW PLAN0 POST Ver.2
Description: UW プラン０ テンプレート 投稿ありバージョン ver.2.0
Version: 2.0
*/

/* ---------------------
* common
* ----------------------------------- */

* {
	/* font-family: ‘Noto Sans JP’, sans-serif;
	font-style: normal; */
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
body {
	background: #fff;
}
img {
	display: block;
	width: 100%;
	height: auto;
}
a {
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	opacity: 0.8;
}
/* input{
	-webkit-appearance: none;
} */
.flex {
	display: flex;
}
.left-justification {
	flex-flow: row wrap;
	justify-content: left;
}
.center-middle {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}
.spacing {
	letter-spacing: 0.05em;
}
.effect-link:hover {
	opacity: 0.8;
}
main section h2 {
	padding: 4% 0;
	text-align: center;
	font-size: 2vw;
}
main section h2 span {
	display: block;
	font-size: 1vw;
	margin: 1em 0 0 0;
}

/* transform */
.center-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* shadow */
.box-shadow {
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
}

/* font */
.tsuku {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 400!important;
  font-style: normal;
}
.mincho {
  font-family: "ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.gothic {
  font-family: "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
.hiragino {
  font-family: "Hiragino Sans W7"!important;
  font-weight: 700!important;
}
.hiraginow5 {
  font-family: "Hiragino Sans W5", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "KozGoPro-Light", "小塚ゴシック Pro L", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif!important;
  font-weight: 500!important;
}

/* color */
.bl {
	color: #000
}
.wh {
	color: #fff;
}

/* letter spacing */
.ls10 {
	letter-spacing: 0.01em;
}
.ls50 {
	letter-spacing: 0.05em;
}
.ls100 {
	letter-spacing: 0.1em;
}
.ls140 {
	letter-spacing: 0.14em;
}
.ls200 {
	letter-spacing: 0.2em;
}

/* effect */
.effect-btn:hover {
  opacity: 0.8;
}
.g-btn {
	position: relative;
	transition: .3s;
	z-index: 0;
}
.g-btn:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
	z-index:-1;
	top: 0;
  left:0;
  transition:0.5s;
  background: linear-gradient(-219deg, #4db148 0%, #82e324 100%);
}
.g-btn:after{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
	z-index:-2;
	top: 0;
  left:0;
  background: linear-gradient(-39deg, #4db148 0%, #82e324 100%);
}
.g-btn:hover:before{
  opacity:0;
}
a {
  text-decoration: none!important;
}
.g-text {
  background: -webkit-linear-gradient(14deg, #4db148, #82e324);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 769px) {
	.pc {
		display: block!important;
	}
	.pc-flex {
		display: flex!important;
		justify-content: left;
		flex-flow: row wrap;
	}
	.sp,
	.sp-flex {
		display: none!important;
	}
}
@media only screen and (max-width: 768px) {
	.pc,
	.pc-flex {
		display: none!important;
	}
	.sp-flex {
		display: flex!important;
	}
	.sp {
		display: block!important;
	}
	main section h2 {
		padding: 10% 0;
		font-size: 7vw;
	}
	main section h2 span {
		font-size: 3vw;
	}
}

/* ---------------------
* header
* ----------------------------------- */
header {
	position: relative;
}
.pc-header {
	position: relative;
	background: rgba(255, 255, 255, 0);
	background: linear-gradient(to right, #fff 0%, #fff 30%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
	height: 100px;
	z-index: 10;
	padding: 0 5%;
	justify-content: space-between;
	align-items: center;
}
.logo {
	width: 300px;
}
.header-navigation-container ul {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}
.header-navigation-container ul li {
	display: block;
}
.header-navigation-container ul li a {
	display: block;
	text-align: center;
	padding: 0 20px;
}
.contact {
	width: 250px;
	height: 60px;
	border-radius: 30px;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-align: center;
}
.contact img,
.contact span {
	display: block;
}
.contact img {
	width: 18px;
	margin: 0 10px 0 0;
}
@media only screen and (max-width: 768px) {
	header {
		position: relative;
	}
	.sp-header {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 1);
		height: 75px;
		z-index: 10;
		padding: 0 calc(5% + 50px) 0 5%;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		z-index: 9999;
	}
	.logo {
		display: block;
		width: 200px;
	}
	.contact {
		width: 40px;
		height: 40px;
		border-radius: 25px;
		text-align: center;
	}
	.contact img {
		display: block;
		width: 18px;
		margin: 11px 0 0 9px;
	}
}

/* ---------------------
* page header
* ----------------------------------- */
.page-header h1 {
	padding: 3% 5%;
	color: #fff;
	font-size: 2.5vw;
}
.page-header h1 span {
	display: block;
	font-size: 1vw;
	margin: 0.5em 0 0 0;
}
.breadcrumb {
	font-size: 1vw;
	color: #6a6a6a;
	padding: 1% 5%;
}
@media only screen and (max-width: 768px) {
	.page-header {
		margin: 75px 0 0 0;
	}
	.page-header h1 {
		padding: 10% 5%;
		font-size: 7vw;
	}
	.page-header h1 span {
		font-size: 3vw;
	}
	.breadcrumb {
		font-size: 3vw;
		padding: 3% 5%;
	}
}

/* ---------------------
* front
* ----------------------------------- */
.main-slider-wrap {
	overflow: hidden;
	position: relative;
	width: 100%;
	margin: -100px 0 0 0;
}
.main-slider {
	margin: 0!important;
	padding: 0;
	height: 100%;
}
.main-slider li.main-slide {
	display: block!important;
	height: 0;
	padding: 50% 0 0 0;
}
.main-slider li.main-slide.first-slide {
	transform: scale(1.2);
}
.main-slider li.main-slide.zoom {
	animation: zoom 10s linear;
}
.main-slider-wrap > img {
	display: block;
	width: 40%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;
}
.main-slider .slick-dots {
	width: 100%;
	padding: 0;
	bottom: 5%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
	text-align: center;
}
.main-slider .slick-dots li,
.main-slider .slick-dots li button,
.main-slider .slick-dots li button:before {
	width: 10px;
	height: 10px;
	border-radius: 5px;
}
.main-slider .slick-dots li {
	margin: 0 10px;
}
.main-slider .slick-dots li button {
	padding: 0;
	background: none;
}
.main-slider .slick-dots li button:before {
	content: '';
	background: #ececec;
	opacity: 1;
}
@keyframes zoom {
	0% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
@media only screen and (max-width: 768px){
	.main-slider-wrap {
		width: 100%;
		margin: 0;
	}
	.main-slider {
		margin: 0!important;
		padding: 0;
		height: 100%;
	}
	.main-slider li.main-slide {
		padding: 100vh 0 0 0;
	}
}


#news {
	align-items: stretch;
}
#news > div {
	width: 30%;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}
#news > div > h2 {
	color: #fff;
	font-size: 200%;
	letter-spacing: 0.2em;
}
#news > div > h2 > span {
	font-size: 50%;
	color: #fff;
}
#news > ul {
	width: 70%;
	padding: 3%;
	margin: 0;
	list-style: none;
}
#news > ul li {
	display: block;
	padding: 1% 0;
	border-bottom: 1px solid  #cbcbcb;
}
#news > ul li a {
	width: 100%;
	align-items: center;
	letter-spacing: 0.05em;
}
#news > ul li a .date {
	width: 10%;
	font-size: 90%;
	margin: 0 1em 0 0;
}
#news > ul li a .cat {
	width: 15%;
	color: #fff;
	padding: 5px 15px;
	font-size: 80%;
	margin: 0 1em 0 0;
	text-align: center;
}
#news > ul li a .title {
	width: 75%;
	color: #000;
	font-size: 110%;
}
@media only screen and (max-width: 768px) {
	#news {
		flex-flow: row wrap;
	}
	#news > div {
		width: 100%;
		min-height: 160px;
	}
	#news > ul {
		width: 100%;
		padding: 10% 5%;
	}
	#news > ul li {
		padding: 4% 0;
	}
	#news > ul li a {
		flex-flow: row wrap;
	}
	#news > ul li a .date {
		width: 30%;
		font-size: 80%;
		margin: 0;
	}
	#news > ul li a .cat {
		width: 40%;
		font-size: 80%;
	}
	#news > ul li a .title {
		display: block;
		width: 100%;
		font-size: 100%;
		margin: .5em 0 0 0;
	}
}

#top-nav {
	position: relative;
	padding: 4% 12%;
}
#top-nav::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

  /* ここで色と不透明度をまとめて管理 */
  background: rgba(200, 200, 200, 100) !important; /* 赤 (#cb0000) + 80% */
}
#top-nav ul {
	position: relative;
	margin: 0;
	padding: 0;
	justify-content: space-between;
	z-index: 2;
}
#top-nav ul li {
	position: relative;
	display: block;
	width: calc(98%/2);
	height: 300px;
	border-radius: 8px;
	background: #fff;
}
#top-nav ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}
#top-nav ul li a h2 {
	text-align: center;
	font-size: 200%;
	letter-spacing: 0.1em;
	line-height: 1.8;
}
#top-nav ul li a h2 span {
	display: block;
	font-size: 50%;
	opacity: .5;
}
.sns-inner {
	padding: 5% 10%;
	justify-content: space-between;
	background: #f4f6fc;
}
.sns-inner > div {
	width: 48%;
	text-align: center;
}
.media-inner {
	padding: 5% 10%;
	text-align: center;
}
.media-inner h3 {
	text-align: center;
	display: inline-block;
	padding: 10px 30px;
	margin: 0 0 2em 0;
	color: #fff;
	font-size: 120%;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #fff;
}
.medias .yrc-shell ul.yrc-core {
    display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
} 
.medias .yrc-item {
	width: 23%!important;
	margin: 1%!important;
}
.media-inner > a {
	display: block;
    width: 30%;
    margin: 5% auto 0 auto;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
	color: #fff;
	border: 1px solid #fff;
    text-align: center;
}
.location-inner {
	padding: 2% 5% 5% 5%;
	align-items: stretch;
}
.location-inner > div {
	width: 50%;
}
.location-inner > div:nth-of-type(1) {
	position: relative;
	margin: 0;
	padding: 5%;
	color: #fff;
	font-size: 1vw;
	z-index: 2;
}
.location-inner > div:nth-of-type(1) .links {
	padding: 6% 0 3% 0;
	align-items: center;
	justify-content: center;
}
.location-inner > div:nth-of-type(1) .links a {
	display: block;
	width: 40%;
	margin: 0 3%;
	height: 60px;
	line-height: 60px;
	border: 1px solid #fff;
	border-radius: 30px;
	color: #fff;
	text-align: center;
}
.info-table > h3 {
	width: 30%;
	padding: 3% 2%;
	border-bottom: 1px solid #dcdcdc;
	text-align: center;
	font-weight: normal;
}
.info-table > p {
	width: 70%;
	padding: 3% 2%;
	border-bottom: 1px solid #dcdcdc;
}
.info-table > h3:first-of-type {
	border-top: 2px solid #fff;
}
.info-table > p:first-of-type {
	border-top: 2px solid #dcdcdc;
}
.sns-link {
	padding: 5% 0 0 0;
	margin: 0;
	justify-content: center;
	list-style: none;
}
.sns-link li {
	width: 50px;
	margin: 0 10px;
}
.sns-link > a,
.sns-link > img {
	display: block;
	width: 100%;
}
.map {
	position: relative;
	width: 100%;
	height: 100%;
	/* padding: 75% 0 0 0; */
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
}
@media only screen and (max-width: 768px) {
	#top-nav {
		padding: 5%;
	}
	#top-nav ul {
		flex-flow: row wrap;
		justify-content: left;
	}
	#top-nav ul li {
		width: 100%;
		height: 200px;
		margin: 10px 0;
	}
	#top-nav ul li a span span:nth-of-type(1) {
		font-size: 7vw;
	}
	#top-nav ul li a span span:nth-of-type(2) {
		font-size: 3vw;
	}
	#top-nav ul li a span span:nth-of-type(3) {
		font-size: 4vw;
	}
	.sns-inner {
		padding: 5%;
		flex-flow: row wrap;
	}
	.sns-inner > div {
		width: 100%;
		height: 750px;
		margin: 0;
		padding: 10% 0;
		box-sizing: content-box;
	}
	.media-inner {
		padding: 10% 5%;
	}
	.media-inner h3 {
		padding: 10px 30px;
		margin: 0 0 1em 0;
	}
	.medias {
		min-height: 440px;
	}
	.medias .yrc-shell ul.yrc-core .yrc-video:nth-of-type(3),
	.medias .yrc-shell ul.yrc-core .yrc-video:nth-of-type(4),
	.medias .yrc-shell ul.yrc-core .yrc-video:nth-of-type(5),
	.medias .yrc-shell ul.yrc-core .yrc-video:nth-of-type(6),
	.medias .yrc-shell ul.yrc-core .yrc-video:nth-of-type(7),
	.medias .yrc-shell ul.yrc-core .yrc-video:nth-of-type(8) {
		display: none!important;
		height: 0!important;
	}
	.medias .yrc-item {
		width: 100%!important;
		margin: 5% 0!important;
	}
	.media-inner > a {
		display: block;
		width: 80%;
		margin: 5% auto 0 auto;
		height: 60px;
		line-height: 60px;
		border-radius: 30px;
		color: #fff;
		text-align: center;
	}
	.location-inner {
		flex-flow: row wrap;
		justify-content: flex-start;
		padding: 0;
	}
	.location-inner > div {
		width: 100%;
	}
	.location-inner > div:nth-of-type(1) {
		padding: 10% 5%;
		margin: 0;
		font-size: 4vw;
	}
	.location-inner > div:nth-of-type(1) > a {
		display: block;
		width: 80%;
		margin: 10% auto;
	}
	.info-table > h3 {
		width: 100%;
		padding: 5% 2% 0 2%;
		border-bottom: none;
		text-align: left;
		font-weight: normal;
		color: #fff;
	}
	.info-table > p {
		width: 100%;
		padding: 2% 2% 5% 2%;
		border-bottom: 1px solid #dcdcdc;
	}
	.info-table > h3:first-of-type {
		padding: 5% 2% 0 2%;
		border-top: 1px solid #dcdcdc;
	}
	.info-table > p:first-of-type {
		padding: 2% 2% 5% 2%;
		border-top: none;
	}
	.location-inner > div:nth-of-type(1) .links {
		padding: 6% 0 3% 0;
		flex-flow: row wrap;
	}
	.location-inner > div:nth-of-type(1) .links a {
		display: block;
		width: 80%;
		margin: 3% 10%;
		font-size: 110%;
	}
	.map {
		position: relative;
		width: 100%;
		height: 0;
		padding: 75% 0 0 0;
	}
	.sns-link li {
		width: 40px;
	}
}

#top-posts {
	padding: 6% 12%;
}
.post-slider {
	position: relative;
	margin: 0;
	padding: 0;
}
.post-slider .slick-slide {
	margin: 20px;
}
.post-slide {
	position: relative;
}
.post-slide > a {
	display: block;
	width: 100%;
	background: #fff;
	padding: 16px;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .34);
}
.post-slide > a > .thumb {
	position: relative;
	width: 100%;
	height: 0;
	padding: 75% 0 0 0;
}
.post-slide > a > .text {
	padding: 4% 3%;
	text-align: left;
}
.post-slide > a .cat {
	display: inline-block;
	margin: 0;
	font-size: 80%;
	padding: 4px 12px;
	border-radius: 9999px;
}
.post-slide > a .date {
	display: block;
	margin: .5em 0;
	font-size: 85%;
}
.post-slide > a > .text > h3 {
	margin: 0 0 .5em 0!important;
	font-size: 110%!important;
	text-align: justify!important;
}
.post-slide > a > .text > .link {
	font-size: 85%;
	text-align: right;
	margin: 0;
}
.post-slider .slick-dots {
	width: 100%;
	padding: 0;
	bottom: -12%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
	text-align: center;
}
.post-slider .slick-dots li,
.post-slider .slick-dots li button,
.post-slider .slick-dots li button:before {
	width: 10px;
	height: 10px;
	border-radius: 5px;
}
.post-slider .slick-dots li {
	margin: 0 10px;
}
.post-slider .slick-dots li button {
	padding: 0;
	background: none;
}
.post-slider .slick-dots li button:before {
	content: '';
	background: #ececec;
	opacity: 1;
}
.post-slider .slick-prev,
.post-slider .slick-next {
	top: 50%;
	width: 50px;
	height: 50px;
}
.post-slider .slick-prev {
	z-index: 10;
	background: rgba(0, 0, 0, 0);
	left: -75px;
}
.post-slider .slick-prev:hover {
	opacity: 0.8;
	background: rgba(0, 0, 0, 0);
}
.post-slider .slick-prev:before {
	display: block;
	content: '';
	width: 50px;
	height: 50px;
	background-image: url(./lib/images/common/arrow-prev.png);
	background-size: 100% 100%;
	opacity: 1;
}
.post-slider .slick-next {
	text-align: center;
	background: rgba(0, 0, 0, 0);
	right: -75px;
}
.post-slider .slick-next:hover {
	opacity: 0.8;
	background: rgba(0, 0, 0, 0);
}
.post-slider .slick-next:before {
	display: block;
	content: '';
	width: 50px;
	height: 50px;
	background-image: url(./lib/images/common/arrow-next.png);
	background-size: 100% 100%;
	opacity: 1;
}
#top-posts > a {
	display: block;
	width: 40%;
	margin: 8% auto 0 auto;
	height: 60px;
	line-height: 60px;
	border-radius: 30px;
	text-align: center;
}
@media only screen and (max-width: 768px){
	#top-posts {
		padding: 15% 5%;
	}
	#top-posts > a {
		width: 80%;
		margin: 25% auto 0 auto;
		height: 60px;
		line-height: 60px;
		border-radius: 30px;
		text-align: center;
	}
}

.contact-inner {
	position: relative;
	padding: 0 15%;
	margin: 0 0 5% 0;
}
.contact-inner button {
	position: absolute;
	top: 0%;
    right: 17%;
	font-size: 300%;
	box-shadow: none;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
}
.contact-inner .wpcf7 {
	background: #fff;
	padding: 5% 10%;
	border-radius: 8px;
}
.form-record {
	margin: 1em 0;
}
.form-record label {
	display: flex;
	justify-content: left;
	align-items: center;
}
.form-record label > span {
	display: block;
}
.form-record label .form-title {
	width: 40%;
	text-align: right;
	font-size: 1vw;
}
.form-record label .form-title + span {
	width: 60%;
}
.form-record label .form-title span {
	display: inline-block;
	background: #d34a4a;
	color: #fff;
	text-align: right;
	margin: 0 2em 0 1em;
	padding: 5px 10px;
	border-radius: 4px;
}
.wpcf7 input[type='text'],
.wpcf7 input[type='tel'],
.wpcf7 input[type='email'] {
	-webkit-appearance: none;
	background: #eeeeee;
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 6px;
}
.wpcf7 select {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 10px;
	border: none;
	cursor: pointer;
	background: #eeeeee;
}
.wpcf7 .c-menu::before,
.wpcf7 .c-menu::after {
	content: '';
	display: block;
	position: absolute;
	pointer-events: none;
	border: 1px solid transparent;
	width: 0;
	height: 0;
	right: 16px;
}
.wpcf7 .c-menu::before {
	bottom: 50%;
	border-width: 0 4px 6px 4px;
	border-bottom-color: #000;
	z-index: 2;
}
.wpcf7 .c-menu::after {
	border-width: 6px 4px 0 4px;
	border-top-color: #000;
	top: 70%;
}
.wpcf7 textarea {
	width: 100%;
	background: #eeeeee;
	border-radius: 6px;
	border: none;
	padding: 10px;
}
.privacy-policy {
	width: 100%;
	height: 200px;
	border: 2px solid #eeeeee;
	border-radius: 6px;
	padding: 4% 3%;
	margin: 5% 0;
	line-height: 1.4;
	overflow-y: scroll;
}
.wpcf7-list-item {
	margin: 0 0 0 .5em;
}
.wpcf7-list-item > label {
	display: flex;
	align-items: center;
}
.wpcf7-list-item > label > input {
	margin: 0 1em 0 0;
}
.wpcf7 input[type='submit'] {
	width: 50%;
	margin: 5% 25% 0 25%;
	padding: 2% 0;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	font-size: 1.25vw;
	cursor: pointer;
	transition: 0.3s;
	border: none;
	box-shadow: none;
}
.wpcf7 input[type='submit']:hover {
	opacity: 0.8;
}
@media only screen and (max-width: 768px) {
	#contact {
		padding-top: 75px!important;
		margin-top: -75px!important;
	}
	.contact-inner {
		padding: 10% 5%;
	}
	.contact-inner button {
		top: 3%;
    	right: 10%;
	}
	.contact-inner .wpcf7 {
		padding: 10% 5%;
	}
	.form-record label {
		flex-flow: row wrap;
		justify-content: left;
	}
	.form-record label .form-title {
		width: 100%;
		text-align: left;
		font-size: 3vw;
		margin: 0 0 1em 0;
	}
	.form-record label .form-title + span {
		width: 100%;
	}
	.privacy-policy {
		font-size: 90%;
		padding: 10% 5%;
		margin: 10% 0;
	}
	.wpcf7-list-item {
		font-size: 75%;
	}
	.wpcf7 input[type='submit'] {
		width: 80%;
		margin: 10% 10% 0 10%;
		padding: 5% 0;
		font-size: 3.5vw;
		border: none;
	}
}

/* ---------------------
* footer
* ----------------------------------- */
.footer-navigation-container ul {
	padding: 1% 0;
	margin: 0;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #fff;
}
.footer-navigation-container ul li {
	display: block;
	padding: 0 20px;
}
.footer-navigation-container ul li a {
	display: block;
	color: #fff;
	text-align: center;
}
.footer-inner {
	padding: 5%;
	justify-content: space-between;
	align-items: center;
}
.footer-logo {
	width: 300px;
}
.footer-after {
	padding: 0 5%;
}
.footer-logo-miepita {
	display: block;
	width: fit-content;
}
.footer-logo-miepita img {
	width: 90px;
}
.footer-contact {
	width: 250px;
	height: 60px;
	border-radius: 30px;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #e01414;
	text-align: center;
}
.footer-contact img,
.footer-contact span {
	display: block;
}
.footer-contact img {
	width: 18px;
	margin: 0 10px 0 0;
}
.footer-inner .sns-link {
	padding: 0;
	width: calc(100% - 600px);
	justify-content: flex-end;
}
.footer-inner .sns-link > a {
	display: block;
	width: 28%;
	margin: 0 1%;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	padding: 8px 0;
}
.copyright {
	text-align: center;
	font-size: 0.8vw;
	color: #fff;
	padding: 0 0 2% 0;
}
@media only screen and (max-width: 768px) {
	.footer-navigation-container ul {
		padding: 1% 0;
		flex-flow: row wrap;
		justify-content: left;
		border-bottom: none;
	}
	.footer-navigation-container ul li {
		width: 100%;
		padding: 10px 20px;
		border-bottom: 1px solid #fff;
	}
	.footer-navigation-container ul li a {
		display: block;
		text-align: left;
	}
	.footer-navigation-container ul li a::after {
		content: '＞';
		float: right;
	}
	.footer-inner {
		padding: 10% 5%;
		flex-flow: row wrap;
		justify-content: left;
	}
	.footer-logo {
		width: 100%;
		padding: 10% 5%;
	}
	.footer-after {
		padding-bottom: 9%;
	}
	.footer-logo-miepita {
		margin-inline: auto;
	}
	.footer-contact {
		width: 66%;
		margin: 5% 17% 0 17%;
		height: 50px;
		line-height: 50px;
		border-radius: 30px;
		justify-content: center;
		align-items: center;
		color: #fff;
		text-align: center;
	}
	.footer-contact img,
	.footer-contact span {
		display: block;
	}
	.footer-contact img {
		width: 18px;
		margin: 0 10px 0 0;
	}
	.footer-inner .sns-link {
		padding: 5% 0;
		width: 100%;
		flex-flow: row wrap;
		justify-content: center;
	}
	.footer-inner .sns-link > a {
		width: 80%;
		margin: 3% 10%;
	}
	.copyright {
		font-size: 3vw;
	}
}

/* ---------------------
* page
* ----------------------------------- */
.post-header {
	padding: 3% 5%;
}
.post-header h1 {
	font-size: 250%;
	letter-spacing: 0.1em;
	color: #fff;
}
.post-header h1 span {
	display: block;
	font-size: 50%;
	padding: 1% 0 0 0;
}
.page-content section {
	text-align: center;
}
.page-content section h2 {
	display: inline-block;
	color: #000;
	margin: 0 0 5% 0;
}
.page-content section h2 span:nth-of-type(1) {
	display: block;
	font-size: 140%;
	border-bottom: 1px solid #000;
	padding: 1% 100px;
}
.page-content section h2 span:nth-of-type(2) {
	display: block;
	margin: 3% 0 0 0;
}
@media only screen and (max-width: 768px) {
	.post-header {
		padding: 20% 5%;
		margin: 75px 0 0 0;
	}
	.post-header h1 {
		font-size: 200%;
	}
	.post-header h1 span {
		padding: 3% 0 0 0;
	}
	.page-content section {
		text-align: center;
	}
	.page-content section h2 {
		display: inline-block;
		color: #000;
		margin: 0 0 5% 0;
	}
	.page-content section h2 span:nth-of-type(1) {
		display: block;
		font-size: 140%;
		border-bottom: 1px solid #000;
		padding: 1% 50px;
	}
	.page-content section h2 span:nth-of-type(2) {
		display: block;
		margin: 3% 0 0 0;
	}
}

/* ---------------------
* company
* ----------------------------------- */
#message {
	padding: 5% 0;
}
.message-inner > div {
	width: 50%;
}
.message-inner > div:nth-of-type(2) {
	padding: 5%;
	text-align: justify;
}
.message-inner > div:nth-of-type(2) h3 {
	margin: 0 0 1em 0;
	font-size: 140%;
	line-height: 1.4;
}
.message-inner > div:nth-of-type(2) p {
	color: #000;
	letter-spacing: 0.14em;
	line-height: 1.4;
}
.message-inner > div:nth-of-type(2) p.name {
	margin: 2em 0 0 0;
	float: right;
}
@media only screen and (max-width: 768px) {
	#message {
		padding: 5% 0;
	}
	.message-inner {
		flex-flow: row wrap;
	}
	.message-inner > div {
		width: 100%;
	}
	.message-inner > div:nth-of-type(1) {
		padding: 5% 0 0 0;
	}
	.message-inner > div:nth-of-type(2) {
		padding: 10% 5%;
	}
	.message-inner > div:nth-of-type(2) h3 {
		text-align: center;
		font-size: 110%;
		margin: 0 0 2em 0;
	}
}

#philosophy {
	position: relative;
	padding: 5% 0;
}
#philosophy h2 {
	position: relative;
	color: #fff!important;
	z-index: 2;
}
#philosophy h2 span:nth-of-type(1) {
	border-bottom: 1px solid #fff;
}
#philosophy h2 span:nth-of-type(2) {
	color: #fff!important;
}
#philosophy h3 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	font-size: 240%;
	color: #fff;
	line-height: 1.6;
	z-index: 2;
}
#philosophy p {
	position: relative;
	width: 60%;
	margin: 5% auto 0 auto;
	padding: 3%;
	line-height: 1.6;
	text-align: justify;
	color: #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	z-index: 2;
}
#philosophy .filter {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 768px) {
	#philosophy {
		padding: 15% 5%;
	}
	#philosophy h3 {
		width: 100%;
		margin: 5% auto;
		font-size: 130%;
		text-align: justify;
	}
	#philosophy p {
		width: 100%;
		margin: 10% auto 0 auto;
		padding: 5%;
	}
}

#company-outline {
	padding: 8% 0;
}
.outline-table {
	width: 70%;
	margin: 0 auto;
	flex-flow: row wrap;
	border-top: 1px solid #aaaaaa;
}
.outline-table h3 {
	width: 30%;
	padding: 2%;
	background: #f3f3f3;
	border-bottom: 1px solid #aaaaaa;
	text-align: left;
	line-height: 1.6;
	font-weight: normal;
}
.outline-table p {
	width: 70%;
	padding: 2%;
	color: #000;
	border-bottom: 1px solid #aaaaaa;
	text-align: justify;
	line-height: 1.6;
}
#company-history {
	padding: 8% 0;
	background: #f3f3f3;
}
.history-table {
	width: 70%;
	margin: 0 auto;
	padding: 5%;
	flex-flow: row wrap;
	background: #fff;
}
.history-table h3 {
	width: 25%;
	padding: 2%;
	border-bottom: 1px solid #aaaaaa;
	text-align: left;
	line-height: 1.6;
	font-weight: normal;
}
.history-table p {
	width: 75%;
	padding: 2%;
	color: #000;
	border-bottom: 1px solid #aaaaaa;
	text-align: justify;
	line-height: 1.6;
}
@media only screen and (max-width: 768px) {
	#company-outline {
		padding: 15% 5%;
	}
	.outline-table {
		width: 100%;
		margin: 10% 0 0 0;
	}
	.outline-table h3 {
		width: 100%;
		padding: 4% 2% 0 2%;
		background: none;
		border-bottom: none;
	}
	.outline-table p {
		width: 100%;
		padding: 0 2% 4% 2%;
	}
	#company-history {
		padding: 15% 5%;
	}
	.history-table {
		width: 100%;
		margin: 10% auto 0 auto;
		padding: 5%;
		flex-flow: row wrap;
	}
	.history-table h3 {
		width: 100%;
		padding: 4% 2% 0 2%;
		border-bottom: none;
	}
	.history-table p {
		width: 100%;
		padding: 0 2% 4% 2%;
	}
}


/* ---------------------
* business-introduction
* ----------------------------------- */
#business-introduction {
	padding: 5% 0;
}
.service-inner {
	width : 80%;
	margin: 0 auto;
	padding: 3%;
	border-top: 1px solid #dcdcdc;
	align-items: center;
}
.service-inner.sub {
	width : 66%;
	margin: 0 auto;
}
.service-inner.sub + .service-inner.main {
	margin: 5% auto 0 auto;
}
.servie-img {
	width: 50%;
	padding: 3% 0;
	text-align: center;
	margin: 0 auto;
}
.service-inner > div {
	width: 50%;
}
.service-inner > div:nth-of-type(1) {
	padding: 3% 3% 3% 0;
}
.service-inner > div:nth-of-type(1) h3 {
	position: relative;
	text-align: left;
	font-size: 140%;
	padding: 0 0 2% 0;
	margin: 0 0 1em 0;
	letter-spacing: 0.1em;
	z-index: 1;
}
.service-inner.sub > div:nth-of-type(1) h3 {
	font-size: 120%;
}
.bottom-line {
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 25%;
	border-bottom: 2px solid #e01414;
	z-index: 2;
}
.service-inner > div:nth-of-type(1) p {
	text-align: justify;
	color: #000;
	line-height: 1.4;
	letter-spacing: 0.1em;
}
.service-inner > div:nth-of-type(1) a {
	display: block;
	width: 50%;
	margin: 5% 0 0 0;
	height: 60px;
	line-height: 60px;
	border-radius: 30px;
	text-align: center;
}
@media only screen and (max-width: 768px) {
	#business-introduction {
		padding: 10% 0;
	}
	.service-inner {
		width : 90%;
		flex-flow: row wrap;
		justify-content: flex-start;
		margin: 5% auto;
		padding: 0;
	}
	.service-inner > div {
		width: 100%;
		padding: 5% 0;
	}
	.service-inner > div:nth-of-type(1) {
		padding: 5% 0;
		padding: 15% 0 5% 0;
	}
	.service-inner > div:nth-of-type(1) h3 {
		margin: 10% 0 1em 0;
	}
	.service-inner.sub > div:nth-of-type(1) h3 {
		margin: 10% 0 1em 0;
	}
	.service-inner > div:nth-of-type(1) a {
		width: 80%;
		margin: 10% auto 5% auto;
	}
	.service-inner.sub {
		width: 90%;
		margin: 0 5%;
	}
	.service-inner.sub + .service-inner.main {
		margin: 10% auto 0 auto;
	}
	.servie-img {
		width: 100%;
		padding: 5%;
		text-align: center;
	}
}


/* ---------------------
* products
* ----------------------------------- */
/* #categories {
	padding: 5% 0 0 0;
}
.categories {
	justify-content: flex-start;
	flex-flow: row wrap;
	padding: 0 10% 2% 10%;
}
.categories li {
	display: block;
	width: calc(20% - 4px);
	margin: 2px;
	background:#cb0000;
	border: 1px solid#cb0000;
	color: #fff;
	padding: 10px 0;
	text-align: center;
	cursor: pointer;
}
.categories li.active {
	background: #fff;
	color:#cb0000;
}
.categories + p {
	color:#cb0000;
	text-align: center;
}
@media only screen and (max-width: 768px) {
	#categories {
		padding: 10% 0 0 0;
	}
	.categories {
		padding: 10% 5%;
	}
	.categories li {
		width: 48%;
		margin: 1%;
		padding: 10px 0;
		font-size: 90%;
	}
	.categories + p {
		font-size: 80%;
	}
}

#products {
	padding: 5%;
}
#products h3 {
	display: block;
	text-align: center;
	color:#cb0000;
	border-bottom: 2px solid#cb0000;
	font-size: 120%;
	margin: 0 0 3% 0;
	padding: 2% 0;
}
#products h3 + p {
	text-align: center;
	color: #000;
	margin: 0 0 5% 0;
	line-height: 1.6;
}
#products ul {
	margin: 0;
	padding: 0 5% 5% 5%;
	flex-flow: row wrap;
	justify-content: flex-start;
}
#products ul li {
	display: block;
	width: 16%;
	margin: 3% 2%;
}
#products ul li img {
	display: block;
	width: 100%;
	box-shadow: 0 0 10px rgba(0,0,0,0.34);
}
#products ul li h4 {
	text-align: center;
	color:#cb0000;
	font-size: 120%;
	margin: 1.5em 0 1em 0;
	line-height: 1.4;
}
#products ul li h4 small {
	font-size: 80%;
}
#products ul li a {
	text-align: center;
	color:#cb0000;
}
@media only screen and (max-width: 768px) {
	#products {
		padding: 10% 5%;
	}
	#products h3 {
		font-size: 110%;
		margin: 0 0 10% 0;
		padding: 4% 0;
	}
	#products h3 + p {
		font-size: 80%;
		margin: 0 0 5% 0;
		line-height: 1.6;
	}
	#products ul {
		margin: 0;
		padding: 0;
	}
	#products ul li {
		display: block;
		width: 46%;
		margin: 5% 2%;
	}
	#products ul li h4 {
		font-size: 100%;
		margin: 1.5em 0 1em 0;
	}
	#products ul li h4 small {
		font-size: 80%;
	}
	#products ul li a {
		font-size: 90%;
	}
} */


/* ---------------------
* recruit
* ----------------------------------- */
#recruit-wrap section {
	text-align: center;
}
#recruit {
	padding: 5% 0 0 0;
}
#recruit h3 {
	text-align: center;
	font-size: 160%;
	margin: 0 0 5% 0;
}
.recruit-inner {
	padding: 5% 15%;
	text-align: left;
}
.recruit-inner > h4 {
	display: inline-block;
	padding: 8px 50px;
	border-radius: 9999px;
	color: #fff;
	margin: 0 0 1.5em 0;
}
.recruit-table {
	justify-content: flex-start;
	flex-flow: row wrap;
	border-top: 1px solid #aaaaaa;
}
.recruit-table h5 {
	width: 25%;
	padding: 2%;
	border-bottom: 1px solid #aaaaaa;
}
.recruit-table p {
	width: 75%;
	padding: 2%;
	color: #000;
	border-bottom: 1px solid #aaaaaa;
}
.recruit-inner > a {
	display: block;
	width: 40%;
	margin: 5% auto 0 auto;
	padding: 2% 0;
	color: #fff;
	text-align: center;
	font-size: 120%;
	border-radius: 9999px;
}
@media only screen and (max-width: 768px) {
	#recruit-wrap section {
		text-align: center;
	}
	#recruit {
		padding: 10% 0 0 0;
	}
	#recruit h3 {
		width: 90%;
		margin: 10% auto 10% auto;
		text-align: justify;
		font-size: 140%;
		line-height: 1.4;
	}
	.recruit-inner {
		padding: 10% 5%;
		text-align: center;
	}
	.recruit-table {
		justify-content: flex-start;
		flex-flow: row wrap;
		border-top: 1px solid #aaaaaa;
	}
	.recruit-table h5 {
		width: 100%;
		padding: 4% 2% 0 2%;
		text-align: left;
		border-bottom: none;
	}
	.recruit-table p {
		width: 100%;
		text-align: left;
		padding: 2% 2% 4% 2%;
	}
	.recruit-inner > a {
		display: block;
		width: 80%;
		margin: 10% auto 0 auto;
		padding: 5% 0;
	}
}

#flow {
	padding: 5% 0;
	background: #f3f3f3;
}
#flow img {
	display: block;
	width: 60%;
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
	#flow {
		padding: 15% 5%;
	}
	#flow img {
		width: 100%;
		margin: 10% auto 0 auto;
	}
}

#entry {
	padding: 5% 0;
}
#entry h2 span {
	color: #fff!important;
}
#entry h2 span:nth-of-type(1) {
	border-bottom: 1px solid #fff!important;
}
#entry .contact-inner {
	background: none;
}
#entry .wpcf7 input[type='submit'] {
    background: #e01414;
}
@media only screen and (max-width: 768px) {
	#entry {
		padding: 15% 0;
	}
}


/* ---------------------
* work
* ----------------------------------- */
.genre-btn {
	padding: 6% 0;
}
.genre-btn ul {
	width: 100%;
	padding: 0 12%;
	margin: 0 auto;
	flex-flow: row wrap;
	justify-content: center;
}
.genre-btn ul li {
	display: block;
	width: calc(90%/4);
	margin: calc(10%/8);
	padding: 12px 0;
	text-align: center;
	letter-spacing: 0.06em;
	border-radius: 9999px;
	cursor: pointer;
	font-size: 90%;
}
.genre-btn ul li.cat-active {
	background: rgba(0,0,0,0);
}
@media only screen and (max-width: 768px) {
	.genre-btn {
		padding: 9% 0;
	}
	.genre-btn ul {
		width: 90%;
		padding: 0;
		margin: 0 auto;
		flex-flow: row wrap;
	}
	.genre-btn ul li {
		display: block;
		width: 100%!important;
		margin: 2% 0!important;
	}
}

.post-archives-inner {
	margin: 0;
	padding: 0 12% 4% 12%;
	list-style: none;
	flex-flow: row wrap;
}
.post-archives-inner .post-slide {
	width: 29%;
	margin: calc(13%/6);
}
.post-archives-inner .post-slide p {
	text-align: justify;
}
@media only screen and (max-width: 768px){
	.post-archives-inner {
		padding: 0 10% 10% 10%;
	}
	.post-archives-inner .post-slide {
		width: 100%;
		margin: 5% 0;
	}
}

.page-nate {
	display: flex;
	justify-content: center;
	font-size: 100%;
	padding: 0 0 12% 0;
}
.page-numbers {
	display: block;
	color: #fff;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0 10px;
	line-height: 40px;
	border-radius: 20px;
}
.page-nate .current {
	background: #fff;
}
.page-nate .next,
.page-nate .prev {
	display: none;
}
@media only screen and (max-width: 768px) {
	.page-nate {
		padding: 10% 0;
	}
	.page-numbers {
		display: block;
		color: #fff;
		width: 30px;
		height: 30px;
		padding: 0;
		margin: 0 6px;
		line-height: 30px;
		border-radius: 15px;
	}
}


/* ---------------------
* single work
* ----------------------------------- */
.single-construction-inner {
	padding: 6% 12%;
}
.single-construction h2 {
	font-size: 160%;
	text-align: left;
	width: 100%;
	margin: 0 auto 5% auto;
	padding: 1% 4%;
	border-radius: 9999px;
}
.single-construction .construction-genre {
	width: 25%;
	background: #555555;
	padding: 1%;
	letter-spacing: 0.16em;
	font-size: 60%;
	color: #fff;
	text-align: center;
}
.single-construction h2 span {
	display: inline-block;
	margin: 0 0 0 5%;
	padding: 0 6%;
	height: 30px;
	border-radius: 15px;
	color: #fff;
	border: 1px solid #fff;
	font-size: 50%;
	line-height: 30px;
	vertical-align: text-top;
}
@media only screen and (max-width: 768px){
	.single-construction-inner {
		padding: 15% 5%;
	}
	.single-construction h2 {
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 10% 5%;
		border-radius: 20px;
	}
	.single-construction h2 span {
		display: block;
		width: 50%;
		margin: 5% auto 0 auto;
		height: 30px;
		border-radius: 15px;
		color: #fff;
		border: 1px solid #fff;
		font-size: 50%;
		line-height: 30px;
	}
}
.single-construction section {
	width: 95%;
	margin: 5% auto;
	padding: 0 0 5% 0;
	line-height: 1.4;
	border-bottom: 2px solid #eeeeee;
}
.single-construction section p {
	text-align: justify;
	margin: 0 0 1em 0;
}

/* single works slider */
.construction-slider {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#photo {
	width: 73%;
	position: relative;
	padding: calc(73% * 0.73) 0 0 0;
	margin: 0;
}
#photo li {
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#photo li > a {
	display: block;
	width: 100%;
	height: 100%;
}
#photo li > a > img {
	display: block;
	width: 100%;
	height: auto;
}
#thumbnail {
	width: 25%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: left;
	margin: 0;
	padding: 0;
}
#thumbnail li {
	position: relative;
	display: block;
	width: 48%;
	height: 0;
	margin: 1%;
	cursor: pointer;
	padding: 35% 0 0 0;
}
#thumbnail li span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}
.modaal-container img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1.01);
}
@media only screen and (max-width: 768px) {
	.construction-slider {
		flex-flow: row wrap;
		padding: 5%;
	}
	#photo {
		width: 100%;
		position: relative;
		margin: 0 0 calc(5px / 2) 0;
		padding: 75% 0 0 0;
	}
	#photo li {
		position: absolute;
		display: block;
		width: 100%!important;
		height: 100%!important;
		top: 0;
		left: 0;
	}
	#photo li a {
		display: block;
		width: 100%!important;
		height: 100%!important;
	}
	#thumbnail {
		width: 100%;
		margin: 0;
		display: flex;
		justify-content: flex-start;
		flex-flow: row wrap;
		padding: 0;
	}
	#thumbnail li {
		display: block;
		width: calc(25% - 5px);
		cursor: pointer;
		margin: calc(5px / 2);
		padding: calc(75%/4) 1% 0 1%;
	}
	.modaal-close {
		top: 100px!important;
	}
}

/* paging */
#paging {
	width: 30%;
	margin: 0 auto;
	padding: 5% 0;
}
#paging div {
	width: 50%;
	font-size: 120%;
	color: #000;
	text-align: center;
}
.prev-post a:before {
	content: '\025c0';
	font-size: 60%;
	vertical-align: middle;
}
.next-post a:after {
	content: '\025b6';
	font-size: 60%;
	vertical-align: middle;
}
#paging div a:hover {
	opacity: 0.8;
}
@media only screen and (max-width: 768px) {
	#paging {
		width: 80%;
	}
	#paging div {
		font-size: 100%;
	}
}
.construction-single-page-link > div {
	width: calc(100%/3);
}
@media only screen and (max-width: 768px) {
	.construction-single-page-link {
		display: block!important;
	}
	.construction-single-page-link > div {
		width: 100%;
	}
}


/* ---------------------
* post-content
* ----------------------------------- */
.post-title .meta {
	font-size: 40%;
	margin: 0 0 1em 0;
}
.post-content {
	padding: 5% 15%;
}
.post-content p {
	font-size: 100%;
	line-height: 1.4;
	margin: 0 0 2em 0;
}
.post-content img {
	display: inline;
	width: auto;
	height: auto;
	margin: 0 0 1em 0;
}
.post-content h2 {
	position: relative;
	font-size: 200%;
	margin: 2em 0 1em 0;
	padding: 5px 0;
	letter-spacing: 0.1em;
}
.post-content h2::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 15%;
	height: 2px;
	background: #e01414;
}
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
	margin: 2em 0 1em 0;
	padding: 5px 0;
	letter-spacing: 0.1em;
}
.post-content h3 {
	font-size: 180%;
}
.post-content h4 {
	font-size: 160%;
}
.post-content h5 {
	font-size: 140%;
}
.post-content h6 {
	font-size: 120%;
}
.post-content .normal-btn {
    display: block;
    width: 25%;
    margin: 5% auto;
    padding: calc(3%/2) 0;
    text-align: center;
    color: #fff;
    border-radius: 6px;
}
@media only screen and (max-width: 768px) {
	.post-content {
		padding: 10% 5%;
	}
	.post-content .normal-btn {
        width: 80%;
        margin: 10% auto;
        padding: 5% 0;
	}
	.post-content h2 {
		position: relative;
		font-size: 160%;
		margin: 2em 0 1em 0;
		padding: 5px 0;
		letter-spacing: 0.1em;
	}
	.post-content h3,
	.post-content h4,
	.post-content h5,
	.post-content h6 {
		margin: 2em 0 1em 0;
		padding: 5px 0;
		letter-spacing: 0.1em;
	}
	.post-content h3 {
		font-size: 140%;
	}
	.post-content h4 {
		font-size: 130%;
	}
	.post-content h5 {
		font-size: 120%;
	}
	.post-content h6 {
		font-size: 110%;
	}
}

#paging {
	width: 30%;
	margin: 0 auto;
	padding: 0 0 5% 0;
}
#paging div {
	width: 50%;
	font-size: 120%;
	text-align: center;
}
.prev-post {
	float: left;
}
.next-post {
	float: right;
}
#paging div a:hover {
	opacity: 0.8;
}
@media only screen and (max-width: 768px) {
	#paging {
		width: 100%;
		padding: 0 5% 20% 5%;
	}
	#paging div {
		font-size: 100%;
	}
}


/* ---------------------
* thanks
* ----------------------------------- */
.thanks p {
	font-size: 120%;
}
@media only screen and (max-width: 768px) {
	.thanks p {
		text-align: justify;
	}
}


/* ---------------------
* 404
* ----------------------------------- */
#empty {
	padding: 5%;
}
#empty h2 {
	text-align: center;
	font-size: 200%;
	margin: 0 0 2em 0;
}
#empty a {
	display: block;
	text-align: center;
	color: #000;
}
@media only screen and (max-width: 768px) {
	#empty h2 {
		text-align: justify;
		font-size: 200%;
	}
}


/* ----------------------------------------
* pagetop
---------------------------------------- */
.pagetop {
	position: fixed;
	bottom: 50px;
	right: 50px;
	color: #fff;
	z-index: 9999;
}
@media only screen and (max-width: 768px) {
	.pagetop {
		right: 25px;
		bottom: 100px;
	}
}
.pagetop span {
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 32px;
}




/* ===== Top Video Hero ===== */
.main-slider-wrap {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面いっぱい */
  overflow: hidden;
}

.main-slider-wrap video.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* トリミングしてフィット */
  z-index: 1;
}
/* ラッパーで中央寄せ（ここだけabsolute） */
.slider-text-wrap {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(90%, 1200px);
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 6px rgba(0,0,0,0.6);

  /* 縦並び＋間隔 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
}

/* ── 旧ルールの打ち消し（重要） ── */
.main-slider-wrap .slider-catch-main,
.main-slider-wrap .slider-catch {
  position: static !important;      /* ← absoluteを無効化 */
  top: auto !important;
  left: auto !important;
  transform: none !important;       /* ← 個別のtranslateを無効化 */
  width: auto;
  max-width: 100%;
  margin: 0;                        /* 余計な上下marginを消してgapで制御 */
}

/* 見た目 */
.main-slider-wrap .slider-catch-main {
  font-size: 3vw;
  font-weight: 700;
  line-height: 1.2;
}
.main-slider-wrap .slider-catch {
  font-size: 1.5vw;
  line-height: 1.5;
}

/* スマホ */
@media (max-width: 768px) {
  .main-slider-wrap .slider-catch-main {
    font-size: 8vw;
    line-height: 1.4;
  }
  .main-slider-wrap .slider-catch {
    font-size: 4.5vw;
    line-height: 1.5;
  }

}

/* PCのみ .pc-header を完全透明に */
@media (min-width: 769px) {
  .pc-header{
    background: transparent !important;  /* 背景を透明に */
    background-image: none !important;   /* 念のためグラデーションも無効化 */
  }
}