/*
Theme Name: Nakamura Taiiku 20260430
Theme URI:  http://nakamurataiiku.com/
Description: 中村体育のテンプレート20260302
Author: SAN GRAPHICA, NEXT RESERVATION
Author URI: http://sangraphica.com/, https://nextreservation.jp/
Version: 2
*/


@import url(css/base.css);
@import url(css/textsettings.css);

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

/*  フォントサイズ早見表
	以下のようにサイズを指定することで各ブラウザでのフォントサイズを揃えることが出来ます。
	左記のパーセントで指定してください。

	77% = 10px	|	122% = 16px	|	167% = 22px	
	85% = 11px	|	129% = 17px	|	174% = 23px 
	92% = 12px	|	136% = 18px	|	182% = 24px 
	100% = 13px	|	144% = 19px	|	189% = 25px 
	107% = 14px	|	152% = 20px	|	197% = 26px 
	114% = 15px	|	159% = 21px	| 	
*/

/* ------------------------------------------------------------ */
/* 基本、レイアウト指定 */
/* ------------------------------------------------------------ */
.cat-item-none {
	padding:10px 0 10px 20px !important;
}
#cat_title {
	margin:0 0 10px !important;
}
* html body { background: url(null) fixed; }  

body {
	margin:0;
	padding:0;
	color:#3c3c3c;
	font-family:YuGothic, '游ゴシック', sans-serif;
	height:auto !important;
}

html { 
	overflow-x:hidden; 
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

.img_left {
	float:left;
	margin:0 15px 15px 0;
}
.img_right {
	float:right;
	margin:0 0 15px 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright {
	float: right;
	margin:0 0 15px 15px;
}
.alignleft {
	float: left;
	margin:0 15px 15px 0;
}

.word {
	display: inline-block;
}



/* ------------------------------------------------------------ */
/* 検索 */
/* ------------------------------------------------------------ */

.notsearch {
	width:90%;
	text-align:center;
	padding:20px 0;
	border:solid #333 1px;
	background:#fff;
	margin:0 auto;
	font-weight:bold;
	font-size:107%;
}
.serchBox input#submitBtn {
	float: right;
	padding-left: 20px;
	width: 125px;
	height: 35px;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	transition: background .5s;
	background: #3c3c3c url(img/serch_icon.png) no-repeat 12px 10px;
	border: 1px solid #3c3c3c;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}

/* ------------------------------------------------------------ */
/* ページ送り */
/* ------------------------------------------------------------ */

.pagination {
	margin: 40px 0;
}
@media (min-width: 960px) {
	.pagination {
		margin-bottom: 0;
	}
}
.pagination span {
	padding:5px;
	background:#ccc;
	color:#fff;
	margin:0 5px 0 0;
}
.pagination a {
	padding:5px;
	background:#3c3c3c;
	color:#fff !important;
	margin:0 5px 0 0;
}
/* ------------------------------------------------------------ */
/* リンク色 */
/* ------------------------------------------------------------ */
a {
	-webkit-transition: all .3s;
	transition: all .3s;
}
a:link {
	color:#333;
	text-decoration:none;
}
a:visited {
	color:#333;
	text-decoration:none;
}
a:hover {
	color:#000;
	text-decoration:none;
}
a:active {
	color:#333;
	text-decoration:none;
}
.clearfix:after {
  content: ".";  /* 新しいコンテンツ */
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; /* 非表示に */
}
a img {
	-webkit-transition: all .5s;
	transition: all .5s;
}
a:hover img {
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}
.button {
	display: inline-block;
	padding:0 25px;
	height: 30px;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	outline: none;
	background:#fff;
	border:solid 1px #333;
	border-radius: 3px; /* CSS3草案 */ 
		-webkit-border-radius: 3px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 3px; /* Firefox用 */

}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button:hover {
	background-color: #666;
	color:#fff;
}
.clearfix { min-height: 1px; }

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
/* ------------------------------------------------------------ */
/* 全体格納 */
/* ------------------------------------------------------------ */
#wrapper { background:#fbfcf0 ; }


/* ------------------------------------------------------------ */
/* ヘッダー */
/* ------------------------------------------------------------ */
#header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
	background:#fbfcf0;
}
#header.in  {
	background-color: #91BCC3;
}
#header .topline {
	width:calc(100% - 16px);
	background:#91bcc3;
	padding:5px 8px 5px 8px;
	color:#fff;
}
#header .topline div {
	width: 100%;
	max-width: 1030px;
	margin:0 auto;
	clear:both;
	overflow:hidden;
}
#header .topline h1 {
	width: 100%;
    font-size: 12px;
    font-weight: normal;
}
#header .topline .info {
	display: none;
}


#header .box {
	width: calc(100% - 16px);
	max-width: 1030px;
	margin:0 auto;
	clear:both;
	padding:10px 8px;
	overflow:hidden;
}


#header .box h2 {
	width: 200px;
	float:left;
}
#header .box h2 > a > img {
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	padding: 4px;
	background-color: #fbfcf0;
}


#header .box > p {
	display: none;
}


/* ハンバーガーメニュー　ボタン */
.hamburger_icon {
	float: right;
	height: 30px;
}
.hamburger_icon span {
	display: block;
    position: relative;
    width: 50px;
    height: 2px;
    background: #EA6C6C;
	transition: all .5s;
}
.hamburger_icon span:nth-child(1){
	top: 10%;
}
.hamburger_icon span:nth-child(2){
	top: 50%;
}
.hamburger_icon span:nth-child(3){
	top: 90%;
}
.in .hamburger_icon span:nth-child(1){
	top: calc(50% + 1px);
	transform: rotate(45deg);
}
.in .hamburger_icon span:nth-child(2){
	display: none;
}
.in .hamburger_icon span:nth-child(3){
	top: calc(50% - 1px);
	transform: rotate(-45deg);
}


/* ハンバーガーメニュー */
.global_nav {
	display: block;
	z-index: -1;
	transform: translateY(-100%);
	transition: none;
	opacity: 0;
	position: absolute;
}
.in .global_nav {
	display: block;
    width: calc(100% - 20px);
    margin: 0 auto;
    padding: 10px;
    clear: both;
    transform: translateY(0%);
    opacity: 1;
    position: static;
	transition: transform .5s, opacity .5s;
}
.global_nav ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 110px);
	gap: 10px;
}
@media (min-width: 440px) {
	.global_nav ul {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 110px);
	}
}
@media (min-width: 820px) {
	.global_nav ul {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(1, 110px);
	}
}
.global_nav li {
	width: 100%;
	margin: 0 auto;
}
.global_nav li a {
	display:block;
	text-align:center;
	background-color: #fbfcf0;
	background-position: center;
	background-repeat: no-repeat;
	transition: none;
	width:100%;
	height:90px;
	padding:20px 0 0;
	float:left;
	border-radius: 20px;
}
#nav li.nav01 a {background-image:url(img/nav01.png)}
#nav li.nav02 a {background-image:url(img/nav02.png)}
#nav li.nav03 a {background-image:url(img/nav03.png)}
#nav li.nav04 a {background-image:url(img/nav04.png)}
#nav li.nav05 a {background-image:url(img/nav05.png)}
#nav li.nav06 a {background-image:url(img/nav06.png)}

.global_nav > p {
	display: block;
	width: fit-content;
	height: fit-content;
	margin: 16px auto;
}


@media (min-width: 1100px) {
	#header {
		position: static;
	}

	.hamburger_icon {
		display: none;
	}

/* グローバルメニュー */
	.global_nav {
		position: static;
		opacity: 1;
		transform: translateY(0);
	}
	#header { background:#fbfcf0; }
	#header .topline {
		width:100%;
		background:#91bcc3;
		padding:5px 0;
		color:#fff;
	}
	#header .topline .info {
		display: block;
	}
	#header .topline div {
		width:1030px;
		margin:0 auto;
		clear:both;
		overflow:hidden;
	}
	#header .box {
		width:1030px;
		margin:0 auto;
		clear:both;
		padding:40px 0;
		overflow:hidden;
	}
	#header .box h2 {
		width:290px;
		float:left;
	}
	#header .box h2 > a > img {
		width: 100%;
		height: 100%;
		padding: 0;
	}
	#header .box p {
		display: block;
		width:160px;
		float:right;
		margin:0 8px 0 0;
	}
	#header .topline h1 {
		font-size:12px;
		width:60%;
		float:left;
		font-weight:normal;
	}
	#header .topline p {
		float:right;
		width:40%;
		text-align:right;
		font-size:12px;
	}
	#nav {
		width:1027px;
		margin:0 auto;
		clear:both;
	}
	#nav li a {
		width: 170px;
		height:101px;
		float:left;
		padding:20px 0 0;		
		border-left: 1px dashed #CCCCCC;
	}
	#nav li.nav06 a {
		width:170px;
		border-right: 1px dashed #CCCCCC;
		padding:25px 0 0 !important;
		height:96px !important;
	}
	#nav li a {
		display:block;
		text-align:center;
		border-radius: 0;
	}
	#nav li a img {
		-webkit-transition: all .3s;
		transition: all .3s;
		-ms-transition: all .3s;
	}

	#nav li a:hover img {
	-webkit-transform: rotate(10deg);  
		-moz-transform: rotate(10deg);
		-ms-transform: rotate(10deg); 
	}
	#nav li.nav01 a {background:url(img/nav01.png) no-repeat 0 0;}
	#nav li.nav02 a {background:url(img/nav02.png) no-repeat 0 0;}
	#nav li.nav03 a {background:url(img/nav03.png) no-repeat 0 0;}
	#nav li.nav04 a {background:url(img/nav04.png) no-repeat 0 0;}
	#nav li.nav05 a {background:url(img/nav05.png) no-repeat 0 0;}
	#nav li.nav06 a {background:url(img/nav06.png) no-repeat 0 0;}

	.global_nav ul {
		gap: 0;
	}
	.global_nav > p {
		display: none;
	}
}


/* FVスライドショー周辺 */
div#sliderWrap{
	position: relative;
	overflow: hidden;
}

ul#slider{
	position: relative;
	left: 50%;
	float: left;
}

ul#slider li{
	position: relative;
	left: -50%;
	float: left;
}

ul#slider li img{
	position: relative;
	left: -250px;
}


ul#coverWrap{ overflow: hidden;}

ul#coverWrap li{
	position: absolute;
	margin: 0 auto!important;
	text-align: center!important;
	display: block!important;
	z-index: 900;
	width: 100%;
}

ul#coverWrap li img{
	text-align: center;
	display: block!important;
	margin: 0 auto!important;
	width: 100%!important;
	height: 100%!important;;
}

#slideTop{ top: 0px;}
#slideBottom{ bottom: 0px;}

/* 設定 */
.container {width: 100%; height: 100%; overflow-x: hidden; position:relative; background:#fbfcf0;}
.slide_all {width: 1200px; margin: 0 auto 0; height: 580px; position: relative;}
.slide_wrap {width: 3600px; position: absolute; left: 50%; margin-left: -2150px;}
.slide_body {width: 100%;}
.slide {width: 1200px;}
.slide img {width: 100%; vertical-align: bottom;}


/* ------------------------------------------------------------ */
/* コンテンツ */
/* ------------------------------------------------------------ */

#content #topics {
	position:relative;
	overflow: hidden;
	clear:both;
	padding: 80px 0 200px;
}
#topics .box {
	width: calc(100% - 16px);
	padding: 0 8px;
	max-width:1030px;
	margin:0 auto;
	position:relative;
	overflow: hidden;
	z-index:99;
}
#topics h3 {
	margin:0 0 50px;
}
#topics .button {
	position:absolute;
	right: 0;
	top:0;
	margin-right: 8px;
}
#topics ul {
	width: 100%;
}
#topics ul li {
	margin:0 0 30px;
	clear:both;
}
#topics ul li a {
	width: 100%;
	background:#fbfcf0;
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 10px;
	border-radius: 3px;
}
#topics ul li .data_time {
	font-size:85%;
	margin:0 0 10px;
}
#topics ul li .photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.a_target {
	position: absolute;
	transition: all .8s;
}
.a_target.para1 {
	bottom: 0;
	right: -90%;
	width: 90%;
}
.a_target.on.para1 {
	bottom: 0;
	right: 0;
}
@media (min-width: 500px) {
	#content #topics {
		padding: 80px 0 350px;
	}
	#topics ul li a {
		grid-template-columns: 1fr 4fr;
	}
}
@media (min-width: 800px) {
	#content #topics {
		padding: 80px 0 100px;
	}
	#topics .button {
		right: auto;
		left:40%;
	}
	#topics ul li a {
		grid-template-columns: 1fr 3fr;
	}
	#topics ul {
		width:50%;
	}
	#topics ul li a {
		padding:5px;
	}
	.a_target.on.para1 {
		max-width: 1000px;
		width: 60%;
	}
}

#works {
	position:relative;
	background:#ffdf3c;
	width:100%;
	padding: 80px 0;
	overflow: hidden;
}

.a_target.para2 {	
	top: 0;
	left: -390px;
	width: 400px;
}
.a_target.on.para2 {
	top: 0;
	left: 0;
	width: 400px;
}
.a_target.para3 {
	bottom: -90px;
	right: -490px;
	width: 500px;
}
.a_target.on.para3 {
	bottom: -90px;
	right: -100px;
	width: 500px;
}
#works .box {
	width: calc(100% - 16px);
	max-width:1030px;
	margin:0 auto;
	padding: 0 8px;
	position:relative;
	overflow:hidden;
	z-index:99;
}
#works .box h3 {
	margin:0 0 40px;
}
#works .box h3 > img {
	background-color: #ffdf3c;
	padding: 4px 0;
}
#works .box .button {
	position: absolute;
	right: 0;
	top: 0;
	margin-right: 8px;
}
#works .box ul {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	padding-top: 100px;
	padding-bottom: 240px;
}
#works .box ul li .text {
	padding:0 10px;
}
#works .box ul li a {
	width: calc(100% - 20px);
	height: fit-content;
	padding: 10px;
	background: url(img/works_icon.png) no-repeat right bottom #fbfcf0;
	display: block;
	-webkit-transition: all .3s;
	transition: all .3s;
}
#works .box ul li a:hover {
	background:url(img/works_icon.png) no-repeat right bottom #3e3e3e;
	color:#fff;
}
#works .box ul li h4 {
	margin:0 0 5px;
	padding:0 10px;
}
#works .box ul li a .photo {
	width: 100%;
	max-width: 300px;
	margin:0 auto 15px;
}
#works .box ul li a .photo > img {
	width: 100%;
}
#works .box ul li a .data_time {
	font-size:12px;
	margin:0 0 10px;
	padding:0 10px;
}
#works .box ul li a .data_time span.tag {
	color:#fff;
	margin:0 5px 0 0;
	font-size:10px;
	padding:3px ;
	border-radius: 3px; /* CSS3草案 */ 
		-webkit-border-radius: 3px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 3px; /* Firefox用 */
}
#works .box ul li a .data_time span.park { background:#afc300; }
@media (min-width: 500px) {
	#works .box ul {
		grid-template-columns: repeat(2, 1fr);
	}
	#works .box ul li a {
		height: 350px;
	}
}
@media (min-width: 1000px) {
	#works .box ul {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 1200px) {
	.a_target.on.para2 {
		top: 0;
		left: -140px;
		width: 600px;
	}
	.a_target.on.para3 {
		bottom: -90px;
		right: -370px;
		width: 800px;
	}
	#works .box ul {
		padding: 10px 0;
	}
}
@media (min-width: 1400px) {
	.a_target.on.para2 {
		top: 0;
		left: 0;
		width: 30%;
		max-width: 600px;
	}
	.a_target.on.para3 {
		bottom: -90px;
		right: -170px;
		width: 40%;
		max-width: 800px;
	}
}
#access {
	max-width:1030px;
	width: calc(100% - 16px);
	margin:0 auto ;
	padding: 80px 8px;
}
#access h3 { margin: 0 0 40px; }
#access .access_wrap {
	width: 100%;
	display: grid;
	grid-template-columns: 100%;
	gap: 10px;
}
#access .map {
	width: 100%;
	height: 300px;
}
#access .map {
	width: 100%;
}
#access .right {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 250px, 1fr));
	gap: 10px;
}
#access .right .photo { 
	margin:0 0 10px;
}
#access .right .photo > img {
	width: 100%;
	height: auto;
}
#access .right h4 {
	margin:0 0 10px;
	font-size:122%;
}
#access .right .text {
	margin:0 0 15px;
}
#access .right ul {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 160px, 1fr));
	gap: 10px;
}
#access .right ul li {
	width: 100%;
}
#access .right ul li a {
	width:100%;
}
@media (min-width: 700px) {
	#access .access_wrap {
	    grid-template-columns: calc(60% - 10px) 40%;
	}
	#access .map {
		width: 100%;
		height: auto;
	}
}

/* ------------------------------------------------------------ */
/* フッター */
/* ------------------------------------------------------------ */
#footer {
	background-image: url(img/bg-footer.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto;
	padding:340px 0 0;
	clear:both;
	overflow:hidden;
}
#footer .box {
	width: 100%;
	background: #91bcc3;
	padding:20px 0;
	color:#fff;
}
#footer .box .wrapper {
	width: calc(100% - 16px);
	max-width: 1030px;
	margin: 0 auto;
	padding: 0 8px;
	text-align: center;
}
#footer .wrapper .nav {
	display: inline-block;
	padding-bottom: 24px
}
#footer .wrapper .nav a {
	color: white;
	padding: 10px 10px;
	display: block;
}

#footer .wrapper > span {
	display: block;
}

@media (min-width:800px) {
	#footer {
		background-size: cover;
	}
	#footer .box .wrapper {
		display: flex;
		justify-content: space-between;
	}
	#footer .wrapper .nav a {
		display: inline-block;
		padding: 0 10px;
		border-right: 1px solid;
	}
	#footer .wrapper .nav a:last-child {
		border-right: none;
	}
}

/* ページトップ　追従 */
#page_top {
	position: sticky;
	visibility: hidden;
	opacity: 0;
	bottom: 100px;
	left: 100%;
	width: 25%;
	max-width: 170px;
	z-index: 900;
	transition: all .8s;
}
#page_top.on {
	visibility: visible;
	opacity: 1;
}
#page_top a {
	text-decoration: none;
	color: #fff;
	height: fit-content;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page_top a img {
	width: 100%;
}

/* ------------------------------------------------------------ */
/* 下層ここから */
/* ------------------------------------------------------------ */
#sub #header {
	margin: 0 auto 30px !important; 
}
#sub #container {
	max-width: 1030px;
	width: 100%;
	margin: 0 auto;
}
#sub #container .main {
	width: calc(100% - 16px);
	padding: 0 8px;
}
@media (min-width: 960px) {
	#sub #container .main {
		width: 70%;
		float: left;
	}	
}

/* -----------------------　ぱんくず　------------------------------------- */
#punkuz {
	width:calc(100% - 16px);
	height:44px;
	line-height:48px;
	color:#fff;
	padding: 110px 8px 0;
	margin:0 0 30px;
}
@media (min-width: 412px) {
	#punkuz {
		padding-top: 96px;
	}
}
@media (min-width: 1100px) {
	#punkuz {
		width: 100%;
		padding: 0;
	}
}

.planner #punkuz,.recruit-top #punkuz,.craftsman #punkuz,.designer #punkuz,.factory #punkuz{
	margin: 0;
}

#punkuz p {
	max-width: 1030px;
	width: 100%;
	margin:0 auto;
}

#punkuz a { color:#fff; }
#punkuz a:hover { color:#333; }


.news #punkuz { background: #afc300; }
.product #punkuz,
.product_cat #punkuz,
.products_detail #punkuz { background: #8787b9; }
.works #punkuz,
.works_detail #punkuz { background: #e69490; }
.recruit-top #punkuz { background: #FABB05; }
.planner #punkuz { background: #e69490; }
.designer #punkuz { background: #91bcc3; }
.craftsman #punkuz { background: #afc300; }
.factory #punkuz { background: #D02517; }
.article #punkuz { background: #e77831; }
.company #punkuz,
.hoken #punkuz { background: #91bcc3; }
.contact #punkuz { background: #b7ad93; }


/* -----------------------　side area　------------------------------------- */

#sub #container .sidebar {
	width: calc(100% - 16px);
	padding: 0 8px;
}
#sub #container h2 {
	font-size:137%;
	padding:0 0 0 25px;
	margin:0 0 30px;
}
@media (min-width: 960px) {
	#sub #container .sidebar {
		width: 26%;
		float:right;
	}
}


/* --------　search　-------- */

#sub .sidebar .serchBox { margin: 55px 0 80px;}
	
#sub .sidebar input[type=text] {
	width: calc(100% - 22px);
	margin-bottom: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}

#sub .sidebar input[type=button] {
	float: right;
	padding-left: 20px;
	width: 125px;
	height: 35px;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	transition: background .5s;
	background: #3c3c3c url(img/serch_icon.png) no-repeat 12px 10px;
	border: 1px solid #3c3c3c;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}

#sub .sidebar input[type=button]:hover { border: 1px solid #949494; background: #949494 url(img/serch_icon.png) no-repeat 12px 10px; }

/* --------　topics　-------- */

#sub .sidebar .topics {
	border-top:solid 5px #859400;
	border-left:solid 2px #afc300;
	border-right:solid 2px #afc300;
	border-bottom:solid 2px #afc300;
	margin:0 0 50px;
}
#sub .sidebar .topics li {
	background:url(img/side-icon01.gif) no-repeat 8px 13px;
	padding:0 5px;
}
#sub .sidebar .topics li a {
	display:block;
	padding:8px 0 8px 20px;
	border-bottom:dotted 1px #afc300;
}
#sub .sidebar .topics li a:hover { color:#afc300; }

/* --------　products　-------- */
#sub .sidebar ul.children {
	padding:0 12px;
}
#sub .sidebar ul.children a {
	border:none !important;
	padding: 4px 0 4px 15px !important;
	font-weight:normal !important;
}
#sub .sidebar ul.children li {
    padding: 0 5px;
    background: url(img/side-icon01.gif) no-repeat 8px 12px!important;
	background-size:5px 5px !important;
}
#sub .sidebar .products_cat01,
#sub .sidebar .products_cat02 {
	border-top: solid 5px #383f9f;
	border-left: solid 2px #8787b9;
	border-right: solid 2px #8787b9;
	border-bottom: solid 2px #8787b9;
	margin: 0 0 50px;
	font-size:107%;
}

#sub .sidebar .products_cat01 li,
#sub .sidebar .products_cat02 li {
	padding: 0 5px;
	background: url(img/side-icon01.gif) no-repeat 13px 13px;
}

	#sub .sidebar .products_cat01 li a,
	#sub .sidebar .products_cat02 li a {
		display: block;
		padding: 8px 0 8px 23px;
		border-bottom: dotted 1px #8787b9;
		font-weight:bold;
		color:#333;
	}

	#sub .sidebar .products_cat01 li a:hover,
	#sub .sidebar .products_cat02 li a:hover { color: #8787b9; }


/* --------　works　-------- */

#sub .sidebar .works {
	border-top:solid 5px #c15651;
	border-left:solid 2px #e69490;
	border-right:solid 2px #e69490;
	border-bottom:solid 2px #e69490;
	margin:0 0 50px;
}
#sub .sidebar .works li {
	padding:0 5px;
	clear:both;
}
#sub .sidebar .works li a {
	display:block;
	border-bottom:dotted 1px #e69490;
	padding:10px 0;
	clear:both;
	overflow:hidden;
}
#sub .sidebar .works li .photo {
	width:50px;
	float:left;
	margin:0 10px 0 5px;
}
#sub .sidebar .works li .tag {
	background:#333;
	padding:2px;
	color:#fff;
	font-size:77%;
	margin:0 3px 0 0;
}
#sub .sidebar .works li .data { font-size:85%; }
#sub .sidebar .works li .title {
	font-size:12px;
	line-height:1.2em;
}
#sub .sidebar .works li a:hover { color:#e69490; }

#sub .sidebar .works_cat li:last-child a,
#sub .sidebar .works li:last-child a,
#sub .sidebar .topics li:last-child a,
#sub .sidebar .products_cat01 li:last-child a,
#sub .sidebar .products_cat02 li:last-child a  { border:none; }

/* ------------------------------------------------------------ */
/* ニュース・新着情報 */
/* ------------------------------------------------------------ */

.news .main h2 {
	background:url(img/h2-icon_news.png) no-repeat 0 3px;
}
.news .entory {
	clear:both;
	overflow:hidden;
	margin:0 0 50px;
}
.news .entory .data {
	width:80px;
}
.news .entory .data .day {
	font-size:55px;
	line-height:1.0em;
}
.news .entory .data .year {
	font-size:107%;
	letter-spacing:1.5px;
}
.news .entory .box {
	padding: 10px 0;
	border-top: 2px solid #afc300;
	line-height:2.0em;
}
.news .entory .box img {
	margin: 0 4px 4px 0;
}
.news .entory h3 {
	font-size:122%;
	margin:0 0 10px;
}
@media (min-width: 960px) {
	.news .entory .data {
		float:left;
		padding:10px 0;
	}
	.news .entory .box {
		width:calc(100% - 100px);
		padding:10px 0 10px 18px;
		float:right;
		border-top: none;
		border-left:solid 2px #afc300;
	}
}

/* ------------------------------------------------------------ */
/* 製品情報 */
/* ------------------------------------------------------------ */
.product h2,
.product_cat h2,
.products_detail h2 { background:url(img/h2-icon_product.gif) no-repeat 0 3px; }

#sub.product #container {
	width: calc(100% - 16px);
	padding: 0 8px; 
}

/* --------　serchBox　-------- */

.product .serchBox {
	width: 100%;
	min-height: 170px;
	padding: 0 0 50px;
	margin: 0 0 60px;
	background: url(img/bg_serchbox.gif) repeat-x left bottom;
}


.product .serchBox .search_text_area {
	width: fit-content;
}
.product .serchBox .search_form_area {
	width: 100%;
	max-width: 390px;
}
@media (min-width: 850px) {
	.product .serchBox .search_text_area { float: left; }
	.product .serchBox .search_form_area { float: right; }
}

.product .serchBox .search_form_area input[type=text] {
	width: calc(100% - 20px);
	max-width: 370px;
	margin-bottom: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}

.product .serchBox .search_form_area input[type=button] {
	float: right;
	padding-left: 20px;
	width: 125px;
	height: 35px;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	transition: background .5s;
	background: #3c3c3c url(img/serch_icon.png) no-repeat 12px 10px;
	border: 1px solid #3c3c3c;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}

.product .serchBox .search_form_area input[type=button]:hover { border: 1px solid #949494; background: #949494 url(img/serch_icon.png) no-repeat 12px 10px; }

.product h3 {
	font-size: 137%;
	margin: 0 0 20px;
}
.product .catlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 270px, 1fr));
	gap: 20px;
	clear: both;
	overflow: hidden;
	margin: 0 0 50px;
}

.product .catlist li img {
	width: 100%;
	display: block;
}
.product .catlist li h4 {
	background: url(img/icon_product_list.gif) no-repeat 0 2px;
	padding: 0 0 0 18px;
	margin-top: 6px;
}

.bn {
	width: calc(100% - 16px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 300px, 1fr));
	gap: 10px;
	padding: 36px 8px 0;
	margin: 0 auto;
}
.bn li {
	width: 100%;
	margin: 0 auto;
}
.bn li img {
	width: 100%;;
}

/* ------------------------------------------------------------ */
/* 製品カテゴリ一覧 */
/* ------------------------------------------------------------ */

.product_cat .catlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 230px, 1fr));
	gap: 35px 15px;
	overflow: hidden;
}

.product_cat .catlist li .photo {
	margin: 0 0 5px;
	display: block;
	overflow:hidden;
	background:#ccc;
}
.product_cat .catlist li .photo > img {
	width: 100%;
}

.product_cat .catlist li h4 {
	background: url(img/icon_product_list.gif) no-repeat 0 2px;
	padding: 0 0 0 18px;
}
.product_cat .page p.back a {
	padding: 5px 10px;
	font-size: 14px;
	color: #fff;
	background: #3c3c3c;
	transition: background .5s;
	border: 1px solid #3c3c3c;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}
.product_cat .page p.before a,
.product_cat .page p.next a {
	padding: 5px 10px;
	font-size: 14px;
	color: #fff;
	background: #3c3c3c;
	transition: background .5s;
	border: 1px solid #3c3c3c;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}
	
.product_cat .page p.before a:hover,
.product_cat .page p.next a:hover { border: 1px solid #949494; background: #949494; }

.product_cat .page p.before a { float: left; }
.product_cat .page p.next a { float: right; }

/* ------------------------------------------------------------ */
/* 製品詳細 */
/* ------------------------------------------------------------ */

.products_detail .text-area {
padding: 35px 0;
background: url(img/bg_figure.png) repeat-x left top;
}

.products_detail .text-area dl {
margin-top: 35px;
padding: 0;
width: 100%;
line-height: 1.4;
}

.products_detail .text-area dl dt {
	clear: both;
	float: left;
	margin: -1px 0px 1px 0;
	padding: 15px 0;
	width: 20%;
	font-size: 104%;
	font-weight: bold;
	border-top: 1px solid #ccc;
}

.products_detail .text-area dl dd {
	float: left;
	margin: -1px 0 1px 0;
	padding: 15px 0;
	width: 80%;
	line-height: 1.4;
	border-top: 1px solid #ccc;
}

/* Modern browse */
	[id="case3"] dl { width: 100%; }
	
	.products_detail .text-area dl > dt:first-child,
	.products_detail .text-area dl > dt:first-child + dd { border-top: none; }
	.products_detail .text-area dl > dt { margin: 0; width: 20%; }
	.products_detail .text-area dl > dd { margin: 0; width: 80%; }

	*:first-child+html .company dl dd { float: none; }


.products_detail p.pdf { text-align: center; }

.products_detail .attention {
	margin: 80px 0 65px;
	padding: 30px 45px;
	background: #fff;
	background-image: url(img/corner-topL.png),url(img/corner-topR.png),url(img/corner-bottomR.png),url(img/corner-bottomL.png);
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	background-position: top left, top right, bottom right, bottom left;
}
.products_detail .attention01 {
	margin: 80px 0 65px;
}
.products_detail .attention01 .photo img {max-width:100%; height:auto;}

.products_detail .attention h4 { color: #b7ad93; font-size: 16px; margin:0 0 10px; }
.products_detail .attention h5 { color: #333333; font-size: 15px; margin:10px 0 5px; }
.products_detail .attention .photo img {max-width:100%; height:auto;}
	.products_detail .attention h3 { color: #b7ad93; font-size: 30px; }
	.products_detail .attention p { margin: 10px 0; }
	.products_detail .attention ul { margin-left: 15px; }
	.products_detail .attention ul li { list-style: disc; }
	
	.products_detail p.back {
		text-indent: 35px;
		font-size: 18px;
		font-weight: bold;
		background: url(img/back-icon.png) 0 4px no-repeat;
	}
	
	products_detail p.back a:hover { color: #e77831; }
	
/* ------------------------------------------------------------ */
/* 施工例一覧 */
/* ------------------------------------------------------------ */

.works h2 {
	background: url(img/h2-icon_works.gif) no-repeat 0 3px;
}
.works .case {
	width:100%;
}
.works .case li {
	background:#fff;
	margin:0 0 20px;
}
.works .case li:last-of-type {
	margin: 0 0 50px;
}

.works .case li a {
	display:block;
	background:url(img/works_icon.png) no-repeat right bottom;
}
.works .case li .photo {
	width: 100%;
	height: auto;
	margin:0 20px 0 0;
}
.works .case li .photo > img {
	width: 100%;
}
.works .case li .box {
	padding: 0 8px 24px 8px;
	margin: 0;
}

.works .case li .data {
	padding:15px 0 10px;
	border-bottom:dotted 1px #e69490;
	position:relative;
	text-align:right;
	margin:0 0 15px;
}
.works .case .data span {
	color:#e69490;
	position:absolute;
	top:15px;
	left:0;
}
.works .case h4 {
	font-size:122%;
	margin:0 0 10px;
}

#sub .sidebar .works_cat {
	border-top:solid 5px #c15651;
	border-left:solid 2px #e69490;
	border-right:solid 2px #e69490;
	border-bottom:solid 2px #e69490;
	margin:0 0 50px;
}

#sub .sidebar .works_cat li { padding:0 5px; }

#sub .sidebar .works_cat li a {
	display:block;
	padding:0 0 0 50px;
	height:40px;
	line-height:40px;
	border-bottom:dotted 1px #e69490;
}

#sub .sidebar .works_cat li a:hover { color: #e69490; }

#sub .sidebar .works_cat li.w_01 { background: url(img/works_icon_01.gif) no-repeat 5px 5px; background-size: 30px; }
#sub .sidebar .works_cat li.w_02 { background: url(img/works_icon_02.gif) no-repeat 5px 5px; background-size: 30px; }
#sub .sidebar .works_cat li.w_03 { background: url(img/works_icon_03.gif) no-repeat 5px 5px; background-size: 30px; }
#sub .sidebar .works_cat li.w_04 { background: url(img/works_icon_04.gif) no-repeat 5px 5px; background-size: 30px; }

@media (min-width: 550px) {
	.works .case li a {
		display: grid;
		grid-template-columns: 290px auto;
		gap: 10px;
		background:url(img/works_icon.png) no-repeat right bottom;
	}
	.works .case li .photo {
		width:290px;
		height:auto;
		margin:0 20px 0 0;
	}
	.works .case li .box {
		width: calc(100% - 16px);
		padding: 0 8px;
		margin:0 20px 0 0;
	}
}



/* ------------------------------------------------------------ */
/* 施工例詳細 */
/* ------------------------------------------------------------ */
	.works_detail .main h2.other {
		background: url(img/works_icon_04.gif) no-repeat 0 0;
		background-size:30px;
	}
	.works_detail .main h2.works {
		background: url(img/works_icon_03.gif) no-repeat 0 0;
		background-size:30px;
	}
	.works_detail .main h2.park {
		background: url(img/works_icon_02.gif) no-repeat 0 0;
		background-size:30px;
	}
	.works_detail .main h2.shool {
		background: url(img/works_icon_01.gif) no-repeat 0 0;
		background-size:30px;
	}
	.works_detail .main h2 {
		text-indent: 20px;
		height: 35px;
		line-height: 35px;
	}

	/* 仮　画像表示 */
	/* 施工例一覧および製品一覧 */
	#slider_gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 20px;
		margin-bottom: 10px;
	}
	#slider_gallery li > img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
		width: 100%;
	}

	.works_detail .text-area {
		padding: 35px 0;
		background: url(img/bg_figure.png) repeat-x left top;
	}

	.works_detail .text-area .tags { margin: 30px 0; }
	.works_detail .text-area .tags a {
		display: inline-block;
		padding: 3px 5px;
		color: #fff;
		background: #000;
		margin:0 5px 0 0;
	}
	

	.works_detail .page p.before a,
	.works_detail .page p.next a{ font-size: 14px; color: #e69490; }
	
	.works_detail .page p.before {
		float: left;
		padding-bottom: 10px;
		padding-right: 10px;
		color: #e69490;
	}
	.works_detail .page p.next {
		float: right;
		padding-bottom: 40px;
		padding-left: 10px;
		color: #e69490;
	}

/* ------------------------------------------------------------ */
/* 採用情報トップ */
/* ------------------------------------------------------------ */

/* -------- 採用情報トップ共通 -------- */

:root {
	--main-color: #FABB05;
	--base-color: #FBFCF0;
	--plan: #e69490;
	--design: #91BCC3;
	--craftsman: #AFC300;
	--build: #8787B9;
	--entry: #e77831;
}
.recruit #header .topline {
	width: 100%;
}

.recruit-top,.planner,.designer,.craftsman {
	font-size: 16px;
}

.recruit-top #page_top,.recruit-planner #page_top,.recruit-designer #page_top,.recruit-craftsman #page_top {
	display: none;
}

.recruit .other .job-wr{
	justify-content: center;
	margin: 2em 0;
}
.recruit .both {
	width: calc(100% - 32px);
	max-width: 1020px;
	margin: 2rem auto;
}

.recruit .h2-column {
	width: fit-content;
	text-align: center;
}	

.recruit .h2-single {
	margin: 4rem auto;
	text-align: center;
}

.planner p,.recruit-top p,.designer p,.craftsman p, #entry-form {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 1.5px;
}

.recruit .h2-area {
	padding: 0;
	font-size: 1.8rem;
	letter-spacing: 5px;
    margin: 1em auto;
}

.recruit .text-area p {
	line-height: 1.6;
	max-width: 640px;
}

@media (min-width: 500px) {
	.recruit .h2-area {
		font-size: 2rem;
		}
	.planner .h2-area,.craftsman .h2-area,.designer .h2-area {
		margin: 1em 0;
	}
	.recruit .both {
		margin: 4rem auto;
	}
}

.recruit .h2-area span {
	background-image: url(img/ellipse.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 124%;
	padding-left: 5px;
}
.planner .h2-area span {
	background-image: url(img/ellipse-pl.svg);
}
.designer .h2-area span {
	background-image: url(img/ellipse-de.svg);
}
.craftsman .h2-area span {
	background-image: url(img/ellipse-cr.svg);
}

@media (min-width: 500px) {
	.recruit .br-none {
		display: none;
	}
}

.recruit .back-side .br-none {
	display: block;
}

.planner .work-flow h3 ,.planner .back-side h3{
	color: #864441;
}
.designer .work-flow h3 ,.designer .back-side h3{
	color: #54767C;
}
.craftsman .work-flow h3,.craftsman .back-side h3 {
	color: #727F00;
}

/* -------- recruit-fix -------- */

.recruit-wr {
	position: relative;
}

.entry-fix {
	position: fixed;
	display: flex;
	justify-content: center;
    align-items: center;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
    background-color: #FABA05;
    height: 50px;
	font-weight: bold;
	bottom: 0;
	z-index: 1000;
}

@media (min-width: 500px) {
	.entry-fix {
		width: 120px;
		height: 120px;
		bottom: 80px;
		right: 20px;
		border-radius: 999px;
		padding: 8px;	
	}		
}


/* -------- recruit-top_fv -------- */

.recruit-fv {
	position: relative;
	max-width: 1440px;
	width: 100%;
}

.recruit-fv .fv-image::before {
	content: '';
	position: absolute;
	background-image: url(img/slide_bottom.png);
	background-size: cover;
	background-position: center;
	transform: scale(1, -1);
	width: 100%;
	height: 16px;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 10;
}

.recruit-fv .fv-image {
	position: relative;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-flow: column;
}

.recruit-fv .fv-image::after {
	content: '';
	position: absolute;
	background-image: url(img/slide_bottom.png);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 16px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	z-index: 10;
}

.recruit-fv .fv-image img {
	object-fit: cover;
	aspect-ratio: 2 / 1;
}

.recruit-fv .fv-image .fv-image01 {
	object-position: 60% 45%;
}

.recruit-fv .fv-image .fv-image02 {
	object-position: 40% 50%;
}

.recruit-fv .fv-image .fv-image03 {
	object-position: 45% 45%;
}

.recruit-fv .head-wr {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 1020px;
	width: 100%;
	height: 100%;
}



.recruit-fv .head-wr h1 {
    margin: 24px auto auto 12px;	font-size: 1.5rem;
	font-weight: bold;
	background-color: #FABB05;
	padding: 12px 50px;
}

.designer-fv .head-wr h1 {
	background-color: rgba(145, 188, 195, 90%);
}
.craftsman .head-wr h1 {
	background-color: rgba(175, 195, 0, 90%);
}

@media (min-width: 500px) {
	.recruit-fv {
		aspect-ratio: 2.2 / 1;
		margin: 0 auto;
	}	

	.recruit-fv .fv-image::before {
		height: 16px;
	}
	
	.recruit-fv .fv-image {
		flex-flow: row;
		height: 100%;
	}

	.recruit-fv .fv-image::after {
		height: 16px;
	}

	.recruit-fv .fv-image img {
		flex: 0px 1 1;
		width: 0;
		height: 100%;
		aspect-ratio: unset;
	}
		
	.recruit-fv .head-wr h1 {
		margin: auto auto 50px 12px;
		font-size: 1.6rem;
		font-weight: bold;
		padding: 10px 35px;
	}
}

@media (min-width: 900px) {
	.recruit-fv .fv-image::before {
		height: 24px;
	}

	.recruit-fv .fv-image::after {
		height: 24px;
	}
	.recruit-fv .head-wr h1 {
		margin-bottom: 60px;
		font-size: 2rem;
	}
}

/* --------　top-memory　-------- */

.top-memory {
	width: 100%;
}

.top-memory .text-area {
	display: flex;
	flex-flow: column wrap;
	margin: 2rem auto;
	width: 100%;
}

.top-memory .text-area .h2-area{
	margin:0 auto;
}

#wrapper .recruit-wr .top-memory .text-area p {
	flex-basis: 50%;
}

.top-memory .gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: space-around;
	gap: 12px 0;
}

.top-memory .gallery img {
	width: 45%;
}

@media (min-width: 500px) {
	.top-memory {
		margin: 4rem auto;
	}
	.top-memory .text-area {
		flex-flow: row wrap;
		justify-content: center;
		gap: 24px;
	}
	.recruit-wr .top-memory .text-area p {
		flex: 1;
		max-width: 40rem;
	}	
	.top-memory .gallery {
		justify-content: space-between;
		gap: 12px;
	}
	.top-memory .gallery img {
		width: 30%;
		flex: 0px 1 1;
	}
}

/* --------　top-company　-------- */

#wrapper .recruit-wr .top-company {
	margin: 4rem auto 0;
}

.top-company .company-ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
	gap: 32px 16px;
}

.top-company .company-ul li {
	display: flex;
	flex-direction: column;
	width: 304px;
}

#wrapper .recruit-wr .top-company .company-ul li .number {
	color: #FABB05;
	font-size: 2.5rem;
	line-height: 1.5;
	letter-spacing: 2px;
	font-weight: bold;
	text-align: center;
}

.top-company .company-ul li div {
	display: flex;
	flex-direction: column;
	border: solid 2.5px #FABB05;
	border-radius: 30px 30px 0 0;
	background-color: white;
	padding: 26px 16px 16px;
	text-align: left;
	height: 100%;
}

.top-company .company-ul li h3 {
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.3;
	flex-basis: 74px;
	margin-bottom: 8px;
}

.top-company .company-ul li p {
	flex-grow: 1;
}

.top-company .company-ul li img {
	display: block;
	width: 100%;
}

.top-company .company-ul li div p {
	margin-bottom: 1em;
}

@media (min-width: 500px) {
	#wrapper .recruit-wr .top-company {
		margin: 8rem auto 0;
	}	
}
/* --------　top-making　-------- */

.top-making {
	margin: 6rem auto;
}

.top-making .h2-area {
	text-align: center;
	margin: 0 auto;
	padding: 0 1em;
}

.top-making p {
	max-width: 40em;
	margin: 2rem auto;
	padding: 0 1em;
}

.top-making .slider-wr {
	background-image: url(img/top-slide.jpg);
	background-size: 1500px auto;
	background-repeat: repeat-x;
	background-position: center;
	height: 180px;
	width: 100%;
	animation: slideImage 25s linear infinite;
	overflow: hidden;
}

@keyframes slideImage {
	from {
		background-position-x: 1500px;
	}
	to {
		background-position-x: 0;
	}
}

/* -------- top_job -------- */

.top-job .h2-area {
	text-align: center;
}

.top-job .job-wr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
	gap: 40px 16px;
}

.top-job .job-wr li {
	display: flex;
	flex-direction: column;
	width: 304px;
}

.top-job .job-wr li a {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	background-size: cover;
}

.top-job .job-wr .plan a {
	background-image: url(img/top-job01.jpg);
}

.top-job .job-wr .design a {
	background-image: url(img/top-job02.jpg);
}

.top-job .job-wr .craftsman a {
	background-image: url(img/top-fv03.jpg);
}

.top-job .job-wr li a span::before {
	content: url('img/glass.svg');
	display: inline-block;
	width: 20px;
    height: 20px;
}

.top-job .job-wr li a span {
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: space-around;
	width: 210px;
	right: 0;
	bottom: 16px;
	padding: 0.5em;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1px;
}

.top-job .job-wr .plan a span {
	background-color: rgba(230, 148, 144, 80%);
}

.top-job .job-wr .design a span {
	background-color: rgba(145, 188, 195, 80%);
}

.top-job .job-wr .craftsman a span {
	background-color: rgba(175, 195, 0, 80%);
}

#wrapper .recruit-wr .top-job .job-wr p {
	margin-bottom: 8px;
}

.top-job .job-wr li h3 {
	text-align: center;
	font-size: 24px;
	letter-spacing: 3px;
	margin: 0.5em auto;
}

.top-job .job-flow {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	margin: 4em 2em ;
}

.top-job .job-flow li {
	display: flex;
	flex-direction: column;
}

.top-job .job-flow li div {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.top-job .job-flow li div p {
	flex-basis: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-job .job-flow li a {
	width: 100%;
	margin: 0.5em auto;
	text-align: center;
	padding: 0.5em 0;
	border-radius: 20px;
}

.top-job .job-flow .flow-plan p {
	background-color: var(--plan);
}

.top-job .job-flow .flow-design p {
	background-color: var(--design);
}

.top-job .job-flow .flow-craftsman p {
	background-color: var(--craftsman);
}

.top-job .job-flow .flow-coating p {
	background-color: var(--main-color);
}

.top-job .job-flow .flow-build p {
	background-color: var(--build);
}

.top-job .job-flow .tag-plan {
	background-color: var(--plan);
}

.top-job .job-flow .tag-design {
	background-color: var(--design);
}

.top-job .job-flow .tag-craftsman {
	background-color: var(--craftsman);
}

.top-job .job-flow li::after {
	content: '';
	background-image: url(img/arrow-under.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-basis: 22px;
	width: 100%;
	margin: 0.25em auto;
}

.top-job .job-flow li:last-child::after {
	display: none;
}

@media (min-width: 500px) {
	.top-job .job-flow {
		flex-flow: row wrap;
		justify-content: center;
		margin: 2em auto;
	}
	.top-job .job-flow li {
		flex-basis: 150px;
		flex-grow: 0;
		flex-direction: row;
		margin: 16px 0 78px;
	}
	.top-job .job-flow li::after {
		background-image: url(img/arrow.svg);
		margin: 0 auto;
	}
	.top-job .job-flow li div {
		flex-basis: 150px;
		position: relative;
	}	
	#wrapper .top-job .job-flow li div p {
		flex-basis: 200px;
		font-weight: bold;
		font-size: 1.5em;
	}	
	.top-job .job-flow p {
		writing-mode: vertical-rl;
	}
	.top-job .job-flow li a {
		position: absolute;
		bottom: -56px;
		font-weight: bold;
	}
	.top-job .job-flow .flow-coating a {
		bottom: -70px;
	}
	.top-job .job-flow li:last-child .tag-plan {
		bottom: -104px;
	}
	.top-job .job-flow li:last-child .tag-craftsman {
		bottom: -56px;
	}
}

/* -------- top_message -------- */

.top-message .text-area{
	display: flex;
	flex-flow: column wrap;
	width: 100%;
	margin: 0 auto 1em;
}

.recruit .top-message hgroup .h2-area {
	width: fit-content;
	margin: 1em auto;
}

.top-message .text-area p {
	max-width: 40em;
	margin: 0 auto;
}

.top-message img {
	width: 100%;
}

@media (min-width: 500px) {
	.top-message .text-area{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		gap: 1.5em;
	}
}

@media (min-width: 850px) {
	.top-message .text-area p {
		flex-basis: 50%;
		flex: 1;
		max-width: 40em;
	}
	.recruit .top-message hgroup .h2-area {
		margin: 0;
	}
}
/* ------------------------------------------------------------ */
/* 遊具企画職 */
/* ------------------------------------------------------------ */

/* -------- 共通 -------- */

.planner {
	position: relative;
}

/* -------- planner-fv -------- */

.planner-fv {
	position: relative;
}

.planner-fv .fv-image {
    display: grid;
	grid-template-areas:
	"fv01 fv03 fv04"
	"fv02 fv03 fv05"
	;
	align-items: stretch;
}

.planner-fv .fv-image img {
	width: 100%;
}

.planner-fv .fv-image .fv-image01{
	grid-area: fv01;
}

.planner-fv .fv-image .fv-image02 {
	grid-area: fv02;
}

.planner-fv .fv-image .fv-image03 {
	grid-area: fv03;
	object-fit: cover;
}

.planner-fv .fv-image .fv-image04 {
	grid-area: fv04;
}

.planner-fv .fv-image .fv-image05 {
	grid-area: fv05;
}

.planner-fv .fv-image::before {
	content: '';
	position: absolute;
	background-image: url(img/slide_bottom.png);
	background-size: cover;
	background-position: center;
	transform: scale(1, -1);
	width: 100%;
	height: 16px;
	right: 0;
	top: 0;
	left: 0;
	margin: 0 auto;
	z-index: 10;
}

.planner-fv .fv-image::after {
	content: '';
	position: absolute;
	background-image: url(img/slide_bottom.png);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 16px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	z-index: 10;
}
.planner-fv .head-wr {
	position: absolute;
	display: flex;
	top: 0px;
	left: 0px;
	right: 0px;
	max-width: 1020px;
	width: 100%;
	height: 100%;
	margin: 0px auto;
}

.planner-fv .head-wr h1 {
    font-size: 1.5rem;
    font-weight: bold;
	background-color: rgba(230, 148, 144, 90%);
    margin: auto auto 24px 12px;
    padding: 12px 50px;
}

@media (min-width: 500px) {
    .planner-fv .head-wr h1 {
        font-size: 1.6rem;
        font-weight: bold;
        margin: auto auto 50px 12px;
        padding: 10px 35px;
    }
}

@media (min-width: 900px) {
    .planner-fv .head-wr h1 {
        margin-bottom: 60px;
		font-size: 2rem;
    }
}
/* -------- sticky-wr -------- */
.recruit .main {
	height: 100%;
}

.recruit .bg-wr {
	display: none;
}

.introduction h2 {
	text-align: center;
	margin-bottom: 1em;
}

@media (min-width: 640px) {
	.introduction h2 {
		text-align: left;
	}
}
@media (min-width: 750px) {
	.recruit .main {
		position: relative;
		height: 100%;
	}
	.recruit .main .work-flow {
        margin: 8rem auto 4rem;
	}
	.recruit .main .sticky-wr .bg-wr {
		position: sticky;
        top: 65vh;
        right: 0;
        left: auto;
        width: 280px;
        margin: 0px 20px -330px auto;
        z-index: -20;
	}
	.recruit .bg-wr {
		display: block;
		position: sticky;
		bottom: 0;
		right: 0;
	}
	.recruit .introduction {
        margin: 4rem auto 4rem;
    }
}
@media (min-width: 1001px) {
	.recruit .main .work-flow {
        margin: -20rem auto 4rem;
	}
	.recruit .main .sticky-wr .bg-wr {
        top: 50vh;
        width: 350px;
        margin: 60px 20px 0 auto;
		right: calc(50% - 510px);
	}
	.recruit .introduction {
        margin: 4rem auto 0;
    }
}

/*-- planner --*/
@media (min-width: 1001px) {
	.planner .main .work-flow {
		margin: -20rem auto 4rem;
	}
}

/*-- designer --*/

@media (min-width: 751px) {
	.designer .main .sticky-wr .bg-wr {
	top: 20vh;
}
}
@media (min-width: 1001px) {
	.designer .main .sticky-wr .bg-wr {
		top: 20vh;
	}
}

/*-- craftsman --*/
@media (min-width: 750px) {
	.craftsman .main .work-flow {
        margin: 2rem auto 4rem;
	}
    .craftsman .main .sticky-wr .bg-wr {
		background-image: radial-gradient(50% 50% at 50% 50%, rgba(251, 252, 240, 0) 0%, rgba(251, 252, 240, 1) 100%), linear-gradient(0deg, #AFC300, #AFC300),url(img/craftsman-bg.jpg);
		background-blend-mode: normal, color, normal;
		top: 40vh;
		width: 250px;
		height: 250px;
		filter: grayscale(1),;
        margin: 70px 20px -330px auto;
    }
}
@media (min-width: 1000px) {
	.craftsman .main .sticky-wr .bg-wr {
	width: 350px;
	height: 350px;
	margin: 70px 40px -330px auto;
	}
}
/* -------- work-flow -------- */

.work-flow .flow-ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	gap: 32px 16px;
	margin: 2em auto;
}

.work-flow .flow-ul li {
	display: flex;
	flex-direction: column;
	width: 304px;
}

.work-flow .flow-ul li::after {
	content: '';
	display: block;
    height: 30px;
    width: 22px;
	background-image: url(img/arrow-under.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 20px auto 0;	
}

.work-flow .flow-ul li:last-child::after {
	visibility: hidden;
}

.work-flow .flow-ul li .number {
	color: var(--plan);
	font-size: 2.5rem;
	line-height: 1.5;
	letter-spacing: 2px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
}

.work-flow .flow-ul li .ul-after div {
	display: flex;
	flex-direction: column;
	border: solid 2.5px var(--plan);
	border-radius: 30px 30px 0 0;
	background-color: white;
	padding: 26px 16px 16px;
	text-align: left;
}

.work-flow .flow-ul li h3 {
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.3;
	flex-basis: 50px;
	text-align: center;
	margin-bottom: 0.5em;
}

.work-flow .flow-ul li h3 {
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.3;
	flex-basis: 50px;
	text-align: center;
	margin-bottom: 0.5em;
}


.work-flow .flow-ul li p {
	flex-grow: 1;
	margin: 1em auto;
}

.work-flow .flow-ul li img {
	display: block;
	width: 100%;
}

@media (min-width: 500px) {
	.work-flow {
		margin: 8rem auto 0;
	}
}
@media (min-width: 660px) {
	.work-flow .flow-ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: unset;
	}
	.work-flow .flow-ul li p {
		margin: 1em auto 0;
	}
	.work-flow .flow-ul li .ul-after {
		flex-basis: 304px;
	}
	.work-flow .flow-ul li .ul-after {
		height: 100%;
	}
	.work-flow .flow-ul li .ul-after p {
		flex-basis: 360px;
	}
	.work-flow .flow-ul li {
		flex-basis: 304px;
		flex-direction: row;
		align-items: center;
		margin: 2em 0;
	}	
	.work-flow .flow-ul li::after {
		background-image: url(img/arrow.svg);
		margin: auto 8px auto 8px;
	}	
}
/* -------- career-up -------- */

.career-up .diagonal {
	background-image: url(img/diagona-line.png);
	background-color: var(--plan);
	padding: 1em;
}

.career-up .diagonal hgroup {
	margin: 0 auto;
	padding: 1em;
	background-color: #FFFFFFCC;
}

.career-up .diagonal hgroup h3 {
	margin: 0 auto 1em;
}

.career-up .diagonal hgroup p {
	margin: 0 auto 1em;
	max-width: 40em;
}

@media (min-width: 500px) {
	.career-up .diagonal {
		padding: 2em;
	}
	.career-up .diagonal hgroup {
		width: 84%;
		padding: 2em;
	}
}

@media (min-width: 850px) {
	.career-up .diagonal hgroup {
		width: 90%;
	}
}

/* -------- career-up -------- */

.take-shape ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 30px auto;
	gap: 20px;
}

.take-shape ul li {
	width: 304px;
}

.take-shape ul li::after {
	content: '';
	display: block;
    height: 22px;
    width: 22px;
	background-image: url(img/arrow-under.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 20px auto 0;
}

@media (min-width: 640px) {
	.take-shape ul li {
		display: flex;
		align-items: center;
	}

	.take-shape ul li::after {
		rotate: -90deg;
		margin: 0 0 0 20px;
	}
}

.take-shape ul li:last-child:after {
	content: '';
	display: block;
    height: 22px;
    width: 50px;
	background-image: none;
}

.take-shape ul li img {
	display: block;
	width: 100%;
}

.take-shape ul li p {
    background-color: #FFF;
    text-align: center;
    border: 2px solid #864441;
    color: #864441;
    font-weight: bold;
    width: fit-content;
    margin: 1em auto;
    padding: 0 1em;
}

/* -------- .back-side -------- */

.back-side .employee {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.back-side .employee h2 {
	width: fit-content;
	font-size: 1.7em;
	letter-spacing: 3px;
}

.back-side .employee .profile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 1rem 2rem;
	background-color: #ffffff;
	border: 3px solid #864441;
	width: fit-content;
}

.back-side .employee .profile img {
	aspect-ratio: 1 / 1;
	max-width: 200px;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: left top;
}

.back-side .employee .profile .name div {
	font-size: 2rem;
	font-weight: 600;
}

.back-side .employee .profile .name div .small {
	font-size: 1.4rem;
}

.back-side .employee .profile .name p {
	font-size: 1.1rem;
}

.back-side .box {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 30px;
	background-color: #ffffff;
	margin: 30px 0;
	padding: 30px;
	border-radius: 30px;
	border: 4px solid var(--plan);
}

.back-side .box h3 {
	font-size: 1.4rem;
	color: #864441;
	letter-spacing: 0.1rem;
}

.back-side .box p {
	margin-top: 30px;
}

.back-side .box img {
	display: block;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}
@media (min-width: 500px) {
	.back-side .employee h2 {
		font-size: 1.8em;
		letter-spacing: 5px;
	}
}
@media (min-width: 700px) {
	.back-side .box:nth-child(3) {
		flex-direction: row-reverse;
	}

	.back-side .box .contents {
		width: 55%;
	}
	
	.back-side .box img {
		width: 40%;
	}
}

/* -------- .recruitment -------- */

.recruitment .recruit-list {
	margin-top: 30px;
}

.recruitment .recruit-list > div {
	margin: 0.6rem 0;
}

.recruitment .recruit-list > div dt {
	width: 100%;
	background-color: var(--plan);
	padding: 1.4rem 0;
	text-align: center;
	font-weight: 600;
}

.recruitment .recruit-list > div dd {
	width: auto;
	background-color: #ffffff;
	padding: 1.4rem;
}

@media (min-width: 400px) {
	.recruitment .recruit-list > div {
		display: flex;
		justify-content: center;
		margin: 0.6rem 0;
	}

	.recruitment .recruit-list > div dt {
		max-width: 260px;
		width: 35%;
	}

	.recruitment .recruit-list > div dd {
		width: 65%;
		padding: 1.4rem 0 1.4rem 1.4rem;
	}
}

/* ------------------------------------------------------------ */
/* 遊具設計職 */
/* ------------------------------------------------------------ */

/* -------- h2 -------- */

.designer .h2-single {
    margin: 4em auto 2em;
}

/* -------- fv -------- */

.designer-fv .fv-image img {
	aspect-ratio: 1 / 1;
}

/* -------- work-flow -------- */

.designer .work-flow .flow-ul li .number {
	color: var(--design);
}

.designer .work-flow .flow-ul li .ul-after div {
	border: solid 2.5px var(--design);
}
@media (min-width: 660px) {
    .designer .work-flow .flow-ul li .ul-after p {
        flex-basis: 170px;
    }
}

/* -------- career-up -------- */

.designer .career-up .diagonal {
	background-color: var(--design);
}

/* -------- back-side -------- */
.designer .back-side .employee .profile {
	border: 3px solid var(--design);
}
.designer .back-side .box {
	border: 4px solid var(--design);
}

.designer .back-side .box h3 {
	color: #54767c;
}


/* -------- recruitment -------- */
.designer .recruitment .recruit-list > div dt {
	background-color: var(--design);
}

/* ------------------------------------------------------------ */
/* 遊具職人 */
/* ------------------------------------------------------------ */

/* -------- fv -------- */
.craftsman-fv .fv-image img {
	aspect-ratio: 1 / 1;
}

/* -------- work-flow -------- */
.craftsman .work-flow .flow-ul li .number {
	color: var(--craftsman);
}

.craftsman .work-flow .flow-ul li .ul-after div {
	border: solid 2.5px var(--craftsman);
}

@media (min-width: 660px) {
    .craftsman .work-flow li {
		flex-grow: 0;
    }
    .craftsman .work-flow .ul-center {
		margin: 0 auto;
    }
    .craftsman .work-flow .flow-ul li .ul-after p {
        flex-basis: 265px;
    }
}
@media (min-width: 994px) {
    .craftsman .work-flow .flow-ul {
		justify-content: center;
    }
}

/* -------- career-up -------- */

.craftsman .career-up .diagonal {
	background-color: var(--craftsman);
}

/* -------- back-side -------- */
.craftsman .back-side .employee .profile {
	border: 3px solid var(--craftsman);
}
.craftsman .back-side .box {
	border: 4px solid var(--craftsman);
}

.craftsman .back-side .box h3 {
	color: #727f00;
}

/* -------- recruitment -------- */
.craftsman .recruitment .recruit-list > div dt {
	background-color: var(--craftsman);
}

.article .fv hgroup p::before {
    background-image: url(h1-icon.png);
}

/* ------------------------------------------------------------ */
/* エントリーフォーム */
/* ------------------------------------------------------------ */

/*------------------------
　共通
------------------------*/
#entry-form {
	padding: 32px 20px;
    max-width: 1280px;
    margin: 0 auto;
}

#sub.entry #container h2 {
	font-size: 24px;
    font-weight: bold;
    background-color: #E77831;
    display: inline-block;
    padding: 8px 2em;
    color: white;
}

#sub.entry #container p {
	margin: 8px;
	font-size: 16px;
}

@media (min-width: 500px){
	#sub.entry #container h2 {
		font-size: 32px;
	}	
}

#entry-form dl {
	padding: 0;
    max-width: 1000px;
    margin: 0 auto 4em;
}

#entry-form dl div {
    margin: 30px auto;
}

#entry-form dt {
    text-align: left;
    font-weight: 600;
    margin: 0 0 8px 0;
}

#entry-form dt .required {
    background: #E77831;
    color: white;
    padding: 4px 8px;
    font-weight: normal;
    font-size: 14px;
    border-radius: 3px;
    margin-left: 8px;
}

#entry-form dl dd {
    margin: 0;
    text-align: left;
}
#entry-form dl dd span .wpcf7-form-control {
	width: 100%;
	border-radius: 6px;
	border: solid 1px #0A717E;
	padding: 16px;
	box-sizing: border-box;
}

#entry-form dl dd span .wpcf7-form-control .wpcf7-list-item {
	margin: 0;
}

#entry-form dl dd span .wpcf7-radio {
	border-radius: 0;
	border: none;
	padding: 0;
}

#entry-form:invalid .btn-1 {
    border: solid 2px black;
    background: rgb(202, 202, 202);
}

#sub.entry #container #entry-form .btn-area {
    display: block;
    width: min(100%, 350px);
    background: #FABB05;
    border: solid 2px black;
    padding: 24px 32px 24px 0;
    margin: 16px auto;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    color: black;
    font-weight: bold;
    position: relative;
    transition: .35s;
    z-index: 10;
    cursor: pointer;
}

#entry-form .btn-area::before {
    position: absolute;
    content: '';
    width: 20px;
    aspect-ratio: 8 / 9;
    background: black;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    transition: .35s;
}

#entry-form .wpcf7-submit {
    border: none;
	font-size: 20px;
	font-weight: bold;
    background-color: #FABB05;
}

#entry-form .wpcf7-spinner {
    display: none !important;
}

@media (min-width: 600px) {
	#entry-form dl div {
        display: flex;
        justify-content: space-between;
        margin: 30px auto;
	}
	#entry-form dt {
        flex-basis: 40%;
    }
	#entry-form dl dd {
		flex-basis: 60%;
	}

}
/* ------------------------------------------------------------ */
/* オープンファクトリー */
/* ------------------------------------------------------------ */
.factory {
	--main-color: #FA6B05;
	--sub-color: #00A52C;
	font-size: 16px;
	overflow-x: hidden;
}

.factory section p {
	font-size: 20px;
	font-weight: 500;
	line-height: 36px;
	letter-spacing: -1px;
}

.factory section img {
	display: block;
	width: 100%;
}

.factory #punkuz {
	padding: 62px 8px 0;
}

@media (min-width: 412px) {
	.factory #punkuz {
		padding: 46px 8px 0;
	}
}
@media (min-width: 783px) {
	.factory #punkuz {
		padding: 60px 8px 0;
	}
}
@media (min-width: 1100px) {
	.factory #punkuz {
		padding: 0;
	}
}

.factory .m {
	max-width: 1020px;
	margin: 4em auto;
	padding: 0 8px;
}
@media (min-width: 500px){
	.factory .m {
		margin: 4em auto 8em;
	}	
}

.fv::after, .page-nav::after, .lead::after, .experience::after, .area::after, .other::after, .factory .top-making::after, .attention::after {
	display: none;
}

.of-banner {
	margin: 4em auto 2em;
	display: block;
	width: calc(100% - 16px);
	max-width: 640px;
	padding: 0 8px;
}

/* -------- fv -------- */

.factory .fv {
	position: relative;
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 160px 0 240px;
	margin-top: 110px;
}

.factory .fv .imgs {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 12px auto auto;
	height: 345px;
	width: 100%;
}

.factory .fv .imgs:nth-of-type(2) {
	margin: auto auto 0;
}

.factory .fv .imgs img {
	border: 6px solid #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	width: min(50%, 400px);
	transform: rotate(-8deg);
	margin: 0 auto auto 0;
}

.factory .fv .imgs img:last-child {
	margin: -24% 0 auto auto;
    transform: rotate(8deg);
}

.factory .fv .imgs:nth-of-type(2) img {
	transform: rotate(-8deg);
	margin: 0 0 auto auto;
}

.factory .fv .imgs:nth-of-type(2) img:last-child {
	transform: rotate(8deg);
	margin: -20% auto auto 0;
}

.factory .fv .fv-image {
	object-fit: cover;
	width: min(100%, 540px);
    margin: 0 auto;
	transition: rotate 0s .6s ease;
	rotate: X 90deg;
	transition: rotate .3s .45s cubic-bezier(0.3, 1.78, 0.48, 0.83);
	rotate: X 0deg;
	transform-origin: center bottom;
}

.factory .fv hgroup {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 1020px;
	width: clamp( 320px,50vw, 624px);
	height: clamp( 160px,23%, 312px);
	border-radius: 50% / 0 0 100% 100%;
	text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 1020px;
    width: min(100%, 570px);
	animation: fadeIn 0.8s ease forwards;
}

.factory .fv hgroup::before {
	content: '';
    position: absolute;
    inset: 0;
    background-color: rgb(251 252 240 / 80%);
    clip-path: circle(50% at 50% 0%);
	height: clamp(350px, 240%, 600px);
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.factory .fv hgroup h1 {
	margin-top: 0.25em;
	z-index: 5;
    text-align: center;
}

.factory .fv hgroup .event-name {
	width: min(72%, 440px);
	margin: 0.25em auto;
	z-index: 5;
}

.factory .fv hgroup .catchphrase {
	width: min(52%, 330px);
	margin: 0 auto;
	z-index: 5;
}

.factory .fv .date {
	position: absolute;
	bottom: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	width: fit-content;
	background-color: rgb(251 252 240 / 80%);
	border-radius: 24px 24px 0 0;
	animation: fadeIn 0.8s ease forwards;
}

.factory .fv .date img {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	margin: 8px;
	width: clamp(304px, 50vw, 400px);
}
@media (min-width: 450px) {
	.factory .fv {
		margin-top: 90px;
	}
}
@media (min-width: 640px) {
	.factory .fv {
		padding: 240px 0;
	}
	.factory .fv .imgs {
		display: flex;
		justify-content: center;
	}
	.factory .fv .imgs img {
		border: 12px solid #fff;
		aspect-ratio: 3 / 2;
	}
	.factory .fv  .imgs img:last-child {
		margin-top: 0;
	}

	.factory .fv .imgs:nth-of-type(2) img {
		margin: auto auto 0 0;
		transform: rotate(8deg);
	}

	.factory .fv .imgs:nth-of-type(2) img:last-child {
		margin: auto 0 0 auto;
		transform: rotate(-8deg);
	}
}
@media (min-width:1100px) {
	.factory .fv {
		margin-top: unset;
	}
}

/* -------- page-nav -------- */
.factory .page-nav {
	margin: 4em 1em;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
}

.factory .page-nav .factory-nav {
	background-image: url(img/koujounai-btn.svg);
}
.factory .page-nav .event-nav {
	background-image: url(img/event-btn.svg);
}
.factory .page-nav .company-nav {
	background-image: url(img/nakamurataiikutte-btn.svg);
}
.factory .page-nav .access-nav {
	background-image: url(img/access-btn.svg);
}

.factory .page-nav a {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	width: clamp(136px, 40vw, 250px);
	aspect-ratio: 160 / 100;
	transform: scale(1);
	opacity: 1;
	transition: all 0.4s;
}

.factory .page-nav a:hover {
	transform: scale(1.1);
	transition: all 0.4s;
	opacity: 0.8;
}

@media (min-width: 608px) {
	.factory .page-nav {
		flex-wrap: nowrap;
		gap: 1.5em;
	}
		.factory .page-nav a {
		width: 180px;
	}	
}

/* -------- lead -------- */
.lead {
	position: relative;
	width: 100%;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lead img {
	width: 100px;
	height: 100px;
}
.lead .lead-text {
	font-size: 16px;
	z-index: 100;
	text-align: center;
}

.lead .lead-text em {
	color: var(--main-color);
	font-style: normal;
}

.lead .l-circle {
	background-image: url("img/plane.jpg");
	width: clamp(100px, 20vw, 240px);
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-position: 45% 50%;
	background-size: cover;
	position: absolute;
	top: 10px;
	left: 8px;
}

.lead .r-circle {
	background-image: url("img/welding.jpg");
	width: clamp(100px, 20vw, 240px);
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-position: 45% 50%;
	background-size: cover;
	position: absolute;
	bottom: 10px;
	right: 8px;
}

@media (min-width: 600px) {
	.lead {
		display: flex;
		justify-content: center;
		gap: 32px;
		height: 330px;
	}
	.lead .l-circle {
		position: relative;
		top: 0px;
		left: 0px;
	}
	.lead .r-circle {
		position: relative;
		bottom: 0px;
		right: 0px;	
	}
}

/* -------- area -------- */
.area .character {
	width: 304px;
	margin: 1em auto;
}

.area p {
	margin: 1em 0;
	padding-top: 1em;
	font-size: 20px;
	font-weight: 500;
}

@media (min-width: 500px) {
	.area div {
		display: flex;
		justify-content: space-between;
		gap: 24px;
		margin: 2em 0;
	}	
	.area .character {
		width: clamp(220px, 33vw, 380px);
		margin: 0;
	}
}
@media (min-width: 750px) {
	.area div {
		gap: 48px;	
	}	
}
/* -------- experience -------- */
.koujoutanken,.market,.juki {
	--main-color: #00A52C;
}

.miniature-yuugu,.pinball,.mini-kouen {
	--main-color: #FA6B05;
}

.experience p {
	margin-bottom: 1em;
}

.experience .event-wr {
	display: flex;
	flex-direction: column;
	margin: 4em 0 1em;
}

.experience .event-name {
	display: flex;
	gap: 8px;
	position: relative;
	width: fit-content;
}

.experience .mini-kouen .event-name::after,
.experience .market .event-name::after,
.experience .pinball .event-name::after {
	content: "";
	background-image: url(img/new.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	position: absolute;
	top: -10px;
	right: -5px;
}

.experience .pinball .event-name::after {
	right: 0px;
	top: 35px;
}

@media (min-width: 500px) {
	.experience .mini-kouen .event-name::after,
	.experience .market .event-name::after,
	.experience .pinball .event-name::after {
		width: 80px;
		height: 80px;
		position: absolute;
		top: -15px;
		right: -50px;
	}

	.experience .pinball .event-name::after {
		right: -90px;
	}
}
.experience .event-name::before {
	content: '';
	background-image: url("img/taiken.svg");
	background-size: contain;
	width: clamp(70px, 15vw, 100px);
	background-repeat: no-repeat;
	aspect-ratio: 1 / 1;
}

.experience .juki .event-name::before {
	background-image: url("img/juki.svg");
}

.experience .pinball .event-name::before {
	background-image: url("img/pinball-icon.svg");
}

.experience .miniature-yuugu .event-name::before {
	background-image: url("img/miniature-yuugu.svg");
}

.experience .mini-kouen .event-name::before {
	background-image: url("img/mini-kouen.svg");
}

.experience .market .event-name::before {
	background-image: url("img/market.svg");
}

.experience .event-name img {
	width: clamp(210px, 70vw, 400px);
}

.experience .event-wr ul {
	border: 2px solid var(--main-color);
	border-width: 2px 2px 6px 2px;
	border-radius: 30px;
	background-color: white;
	padding: 0.5em;
	margin: 1em 0;
}

.experience .event-wr ul li {
	font-weight: bold;
	letter-spacing: 1px;
	margin: 0.5em;
}

.experience .event-wr ul li span {
	color: var(--main-color);
}

.experience .intro .event-img {
	aspect-ratio: 3 / 2;
	border-radius: 32px;
	object-fit: cover;
}

.experience .intro a img {
	max-width: 250px;
	margin: 0 auto;
}
.experience .photo-p {
	margin: 1em 0;
}

@media (min-width: 550px) {
	.experience .intro {
		display: flex;
		gap: 1.5em;
		align-items: flex-start;
	}
	.experience .intro .event-img {
		margin: 0 0 auto 0;
		width: 46%;
	}
}
@media (min-width: 768px) {
	.experience .intro {
		align-items: center;
	}
	.experience .event-wr {
		flex-flow: row wrap;
		justify-content: space-between;
		gap: 2em;
	}
}

/* -------- other -------- */
.other {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}

.other ul {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-top: 2em;
}

.other ul li {
	width: calc(100% - 36px);
	padding: 1em;
	border: 2px solid var(--main-color);
	border-radius: 20px;
	background-color: white;
	display: flex;
	flex-direction: column;
}

.other .hoka-img {
	width: 200px;
	margin: 1em 1em 2em 1em;
}

.other ul li img {
	flex-grow: 0;
}
.other ul li .oh {
	max-width: 280px;
}
.other ul li .other-img {
	object-fit: cover;
	aspect-ratio: 2 / 1;
	object-position: 50% 65%;
}
.other ul li p {
	margin: 2em 0;
	flex-grow: 1;
}

@media (min-width: 700px) {
	.other .hoka-img {
		width: 200px;
		margin: 3em 1em auto 1em;
	}	
	.other ul {
		flex-direction: row;
		margin-top: 2em;
	}
	.other ul li {
		width: clamp(150px, 60vw, 720px);
		padding: 1.5em;
		flex-direction: row;
		gap: 0 20px;
	}	
	.other ul li p {
		margin: 2em 0;
		flex-basis: 45%;
	}
	.other ul li .other-img {
		width: 50%;
	}
}
/* -------- top-making -------- */

.factory .top-making img {
	max-width: 30em;
	width: calc(100% - 16px);
	margin: 0 auto;
	padding: 0 8px;	
}

.factory .top-making p {
	padding: 0 8px;	
}

.factory-slide .slider-wr {
	background-image: url(img/slide.jpg);
	height: 250px;
}
@media (min-width: 500px){

}
/* -------- attention -------- */

.factory .attention {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.factory .attention img {
	width: 230px;
	margin: 2em 0;
}

.factory .attention ul {
	border: 2px solid #C24C00;
	background-color: white;
	padding: 1em;
	width: calc(100% - 36px);
}

.factory .attention ul li {
	margin: 1.5em;
	font-size: 20px;
	list-style: url("img/ellipse-red.svg") outside;
}

.factory .attention ul li::marker {
	color: #D02517;
}
.factory .attention ul li>span {
	vertical-align: 2px;
}
@media (min-width: 500px){
	.factory .attention {
		flex-flow: row wrap;
		gap: 2em;
	}
	.factory .attention img {
		margin: 1em 0 auto 0;
	}
	.factory .attention ul {
		max-width: 660px;
	}
}
/* -------- access -------- */

.access .info {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	gap: 4em;
	margin: 4em 0 2em;
}

.access .info img {
	max-width: 320px;
}
.access .info div {
	text-align: center;
}

.access .info a, .access .info p {
	margin: 0.5em;
}

.access .info a {
	font-size: 20px;
	font-weight: 500;
	line-height: 36px;
	letter-spacing: -1px;	
}
.access .map {
	height: 400px;
}
@media (min-width: 500px) {
	.access .info {
		gap: 2em;
	}		
}
@media (min-width: 768px) {
	.access .info {
		align-items: flex-start;
		justify-content: flex-start;
	}
	.access .info div {
		text-align: unset;
	}
	.access .info img {
		margin-top: 1em;
	}
}
/* ------------------------------------------------------------ */
/* 会社概要 */
/* ------------------------------------------------------------ */

.company h2,
.hoken h2,
.sitemap h2 { background:url(img/h2-icon_company.png) no-repeat 0 3px; }

.company section {
	width: calc(100% - 16px);
	padding: 0 8px;
	margin: 0 0 60px;
}
.company section dl {
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 1.4;
}

.company section dl dt {
	padding: 22px 0 16px 0;
	font-size: 104%;
	font-weight: bold;
	border-top: 1px solid #ccc;
}
.company section dl dd {
	padding-bottom: 22px;
	line-height: 1.4;
}

@media (min-width: 500px) {
	.company section dl dt {
		clear: both;
		float: left;
		margin: -1px 0px 1px 0;
		padding: 15px 0;
		width: 20%;
		font-size: 104%;
		font-weight: bold;
		border-top: 1px solid #ccc;
	}	
	.company section dl dd {
		float: left;
		margin: -1px 0 1px 0;
		padding: 15px 0;
		width: 80%;
		line-height: 1.4;
		border-top: 1px solid #ccc;
	}
}

.company section dl > dt:first-of-type {
	border-top: none;
}
.company section dl > dd:first-of-type {
	border-top: none;
}

/* Modern browse */
/* [id="case3"] dl { width: 100%; }

.company dl > dt:first-child,
.company dl > dt:first-child + dd { border-top: none; }
.company dl > dt { margin: 0; width: 20%; }
.company dl > dd { margin: 0; width: 80%; }

	*:first-child+html .company dl dd { float: none; }

	.company section figure {
		float: left;
		margin: 0;
		padding: 0;
		width: 30%;
	}
	.company section .text-area { float: right; width: 70%; }
	.company section .text-area h3 {
		margin: 0 0 25px;
		padding: 0;
		font-size: 30px;
		line-height: 30px;
		color: 	#91bcc3;
	} */

/* --------　google map　-------- */

	.google-maps {
		width: calc(100% - 16px);
		padding: 0 8px;
	}
    .google-maps iframe {
		width: 100% !important;
		height: 435px !important;
    }


/* ------------------------------------------------------------ */
/* 保険について */
/* ------------------------------------------------------------ */

#sub.hoken #container {
	width: calc(100% - 16px);
	padding: 0 8px;
}

.hoken section { margin: 45px 0 50px; }

.hoken section .text-area {
	position: relative;
	top: 0;
	left: 0;
	margin-bottom: 20px;
	padding: 15px;
	border: 3px solid #91bcc3;
}
.hoken section .text-area img {
	max-width: fit-content;
	width: 100%;
}
.hoken section .text-area span {
	position: absolute;
	top: 10px;
	left: -20px;
	padding-left: 10px;
	width: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	border-radius: 50%;
	border: 3px solid #fff;
	background: #91bcc3;
}

.hoken section .text-area h3 { fomt-size: 14px; margin: 15px 0; }

.hoken section .text-area ul { margin: 10px 0 0 30px; }
.hoken section .text-area ul.none  { margin: 10px 0 0 0; }

.hoken section .text-area ul li { list-style: decimal; }
.hoken section .text-area ul.circle li { list-style: disc; }
.hoken section .text-area ul.none li { list-style: none; }


/* ------------------------------------------------------------ */
/* サイトマップ */
/* ------------------------------------------------------------ */

.sitemap h2 { margin: 0; padding: 0; }
#sub.sitemap #container {
	width: calc(100% - 16px);
	padding: 0 8px
}
.sitemap h3 {
	border-bottom:dotted 1px #ccc;
	margin:0 30px 20px 20px;
}
.sitemap h3 a {
	display:block;
}
.sitemap h3 a:hover{
	color:#91BCC3;
}
.sitemap .list_wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 300px, 1fr));
}
section.sitemap_list ul {
	padding-left: 30px;
}
section.sitemap_list ul li a {
	display: block;
	padding: 0 0 20px 20px;
	font-size: 14px;
	font-weight: bold;
	background: url(img/side-icon01.gif) no-repeat 0 6px;
}
section.sitemap_list ul li a:hover { color: #91BCC3; }

/* ------------------------------------------------------------ */
/* お問い合わせ */
/* ------------------------------------------------------------ */

#sub.contact #container {
	width: calc(100% - 16px);
	padding: 0 8px;
}

.contact h2 { background: url(img/h2-icon_contact.gif) no-repeat 0 3px; }

.contact .caption { margin: 0 0 30px; }

.contact .caption span,
#formBox dl span,
#formBox p span { color:#f00; }
#formBox p span { font-weight: bold; }

#formBox div {
	clear: both;
	overflow: hidden;
	margin: 0 0 30px;
}

#formBox div input {
	width: calc(100% - 22px);
}
	
.contact #formBox dd input[type=text],
.contact #formBox dd input[type=tel],
.contact #formBox dd input[type=email] {
	margin-bottom: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}

#formBox dl {
	width: 100%;
}

#formBox .checkbox {
	padding: 30px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#formBox .checkbox h3 { margin-bottom: 30px; }
.contact #formBox p input[type=checkbox] {
	margin: 0;
	padding: 0;
	width: 20px;
}
.contact #formBox .checkbox span {
	color: #000;
	margin: 0 20px 24px 0;
}

.contact #formBox textarea {
	width:calc(100% - 6px);
	border: 1px solid #ccc;
}
.contact #formBox textarea[placeholder] { font-size: 10px; }

.contact #formBox p input[type=submit],	
.contact #formBox p input[type=reset]  {
	margin-right: 10px;
	margin-bottom: 10px;
	width: 125px;
	height: 35px;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	transition: all .5s;
	background: #3c3c3c;
	border: 1px solid #3c3c3c;
	border-radius: 4px; /* CSS3草案 */ 
		-webkit-border-radius: 4px; /* Safari,Google Chrome用 */ 
		-moz-border-radius: 4px; /* Firefox用 */
}

.contact #formBox p input[type=submit]:hover,	
.contact #formBox p input[type=reset]:hover { border: 1px solid #949494; background: #949494; }

.wpcf7-list-item {
	margin:0 20px 0 0;
}
.wpcf7-response-output {
	margin:20px 0 0 !important;
}

@media (min-width: 700px) {
	#formBox div input { width: 80%;}
	#formBox dl { width: 50%; float: left; }
	#formBox dl.s { width:30% !important; }
	#formBox dl.l { width:70% !important; }
	#formBox dl.l input {width:86% !important; }
	#formBox dl dt { font-size: 107%; font-weight: bold; }
	.contact #formBox textarea { width: 92%; }
}