@charset "utf-8";

/*====================================================================================================
  WHOLE
====================================================================================================*/

@media only screen and (max-width: 820px) {
	html { font-size: 16px;}
	#main { width: 100%; padding: 0 20px;}

	.pc { display: none!important;}
	.tb { display: block;}
	.sm { display: none;}
}

@media only screen and (max-width: 468px) {
	#main { margin: 0 auto;}

	.pc { display: none!important;}
	.tb { display: none;}
	.sm { display: block;}
}

/*====================================================================================================
  BASE
====================================================================================================*/


@media only screen and (max-width: 820px) {
	#main h3 { font-size: 1.75rem;}
	#main h4 { font-size: 1.125rem;}
}

@media only screen and (max-width: 468px) {

	#main h3 { font-size: 1.75rem;}
	#main h4 { font-size: 1.125rem;}
}
	

/*====================================================================================================
  HEADER
====================================================================================================*/

@media only screen and (max-width: 1024px) {
	#header { height: 70px; }
	#header h1,
	#header h1 a { width: 280px; height: 30px; z-index: 9999; margin-left: 1rem;}
	#header h1 a { gap: 0.003125vw; /* 6/1920 */}
	#header h1 a img.logo1 { width: 76px; height: auto;}
	#header h1 a img.logo2 { display: none;}
	#header .h_nav,
	#header .inaba_link { height: 70px; display: none;}

	/*========= ナビゲーションのためのCSS ===============*/

	#header #h_nav_sm{
		display: block;
		/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
		position:fixed;
		z-index: 999;
		/*ナビのスタート位置と形状*/
		top:-120%;
		left:0;
		width:100%;
		height: 100vh;/*ナビの高さ*/
		background:#c5d8ef;
		/*動き*/
		transition: all 0.6s;
	}

	/*アクティブクラスがついたら位置を0に*/
	#header #h_nav_sm.panelactive{ top: 0;}

	/*ナビゲーション*/
	#header #h_nav_sm ul {
		/*ナビゲーション天地中央揃え*/
		width: 100%;
		position: absolute;
		z-index: 999;
		top:30%;
		left:50%;
		transform: translate(-50%,-50%);
	}

	/*リストのレイアウト設定*/
	#header #h_nav_sm li:first-child { border-top: solid 1px #ececec;}
	#header #h_nav_sm li{ list-style: none; text-align: center; border-bottom: solid 1px #ececec}

	#header #h_nav_sm li a{
		color: var(--main-color);
		text-decoration: none;
		padding:15px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-size: 1.125rem;
		font-weight: bold;
	}

	/*========= ボタンのためのCSS ===============*/
	#header .openbtn{
		position:fixed;
		z-index: 9999;/*ボタンを最前面に*/
		right: 0;
		cursor: pointer;
		width: 70px;
		height:70px;
		background: #1e1e1e;
	}
		
	/*×に変化*/	
	#header .openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 2px;
		background-color: #fff;
		width: 35px;
	}

	#header .openbtn span:nth-of-type(1) { top:25px; left: 17px;}

	#header .openbtn span:nth-of-type(2) { top:35px; left: 17px;}

	#header .openbtn span:nth-of-type(3) { top:45px; left: 17px;}

	#header .openbtn.active span:nth-of-type(1) { top: 25px; left: 18px; transform: translateY(7px) rotate(-35deg); width: 50%;}

	#header .openbtn.active span:nth-of-type(2) { opacity: 0;}

	#header .openbtn.active span:nth-of-type(3){ top: 37px; left: 18px; transform: translateY(-5px) rotate(35deg); width: 50%;}

	}

	@media only screen and (max-width: 468px) {
		#header #h_nav_sm ul { top: 40%;}
}

/*====================================================================================================
  TOPPAGE
====================================================================================================*/

/*** mainimg *******************************************************/
@media only screen and (max-width: 1024px) {
	#toppage .mainimg { top: 70px;}
	#toppage .mainimg ul.slide { margin-left: 0; width: 100%; height: auto; line-height: 0;}
	#toppage h2.catch {
		margin-top: 70px;
		text-align: center;
		position: static;
		transform: none;
		aspect-ratio: initial;
		width: 100%;
		padding: 1.4375rem 2.1875rem;
	}
	#toppage h2.catch span { font-size: 1.125rem;;}
}

@media only screen and (max-width: 468px) {
	#toppage h2.catch { font-size: 1.3125rem;}
	#toppage h2.catch span { font-size: 0.875rem;}
}

@media only screen and (max-width: 376px) {
	#toppage h2.catch { font-size: 1.2rem;}
}


/*** service 理念 *******************************************************/
@media only screen and (max-width: 820px) {
	#toppage .service {  margin-top: 2rem; margin-bottom: 0; justify-content: space-around;}
	#toppage .service_box_r { order: 3;}
	#toppage .service_box { 
		grid-auto-flow: row;
		row-gap: 1.875rem;
		grid-template-columns: 1fr;
		grid-template-areas:
		"service-h3"
		"service-h4"
		"service-img"
		"service-come"
		"service-btn"
	}
	#toppage .service_box_r .item1 { justify-self: end;}
	#toppage .service_box_r .item2 { justify-self: center;}
}


/*** product 取扱商品 *******************************************************/
@media only screen and (max-width: 820px) {
	#toppage .product { margin-bottom: 0;}
	#toppage .product_box { grid-template-columns: 1fr; margin-bottom: 5rem;}
}
 
@media only screen and (max-width: 468px) {
	#toppage .product ul.slide_sm { padding-inline: inherit; display: block; width: 100%;  height: auto; }
}

/*** about 会社概要 *******************************************************/
@media only screen and (max-width: 820px) {
	#toppage .about { margin-bottom: 5rem;}
	#toppage .about_box { display: block; margin-bottom: 0;}
	#toppage .about_box iframe { width: 100%;}
	#toppage .about_box img { margin-bottom: 6rem;}
	#toppage .about img { padding: 0;}
}

/*** inaba イナバ *******************************************************/
@media only screen and (max-width: 820px) {
	#toppage .inaba { margin-bottom: 5rem;}
	#toppage .inaba_box {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
		grid-template-areas:
			"inaba-h4"
			"inaba-come"
			"inaba-img"
			"inaba-btn"

	}
	#toppage .inaba_box_r {justify-self: center;}
}

/*** catalog カタログ *******************************************************/
@media only screen and (max-width: 820px) {
	#toppage .catalog { padding: 8%; margin-bottom: 5rem;}
	#toppage .catalog_box h3 { margin-top: 0; font-size: 2rem;}
	#toppage .catalog_box_r { align-self: center;}
}

@media only screen and (max-width: 468px) {
	#toppage .catalog { background-image: url(../../image/top/catalog-bg-sm.png);}
	#toppage .catalog_box {
		grid-template-columns: 1fr;
		/* grid-template-rows: repeat(4, auto); */
		grid-template-areas:
		"catalog-h3"
		"catalog-come"
		"catalog-img"
		"catalog-btn";
	}
	#toppage .catalog_box_r { justify-self: center; order: 3; margin-bottom: 2.625rem;}
	#toppage .catalog_box .b_more { margin-bottom: 3.125rem;}
	#toppage .catalog_box h3 { width: 100%; text-align: center; font-size: 1.75rem;}
}

/*** recruitment 採用情報 *******************************************************/

/*** news お知らせ *******************************************************/
@media only screen and (max-width: 820px) {
	#toppage .news { margin-bottom: 5rem;}
	#toppage .news_box {
		grid-auto-flow: row;
		row-gap: 1rem;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3,auto);
		grid-template-areas:
		"news-h3"
		"news-list"
		"news-btn";
	}
	#toppage .news_box .news_box_r { order: 2; width: 100%; margin-bottom: 3rem;}
	#toppage .news_box_r ul { width: 100%;}
	#toppage .news_box .b_more { right: 0.5rem;}
	#toppage .news_box_r ul li a:after { display: none;}

	#subpage .news_list_area { width: 100%; padding: 0;}
}

/*====================================================================================================
  FOOTER
====================================================================================================*/

/*** contact お問合せ *******************************************************/
@media only screen and (max-width: 1024px) {
	#footer .contact { width: 100%;}
	#footer .contact .contact_ttl { padding: 0.3em;}
	#footer .contact .contact_box { width: 80%;}
	#footer .contact_inner { flex-direction: column;}
	#footer .contact_inner_l,
	#footer .contact_inner_r { align-items: center; margin-left: 0;}
	#footer #page-top { display: none;}
}

@media only screen and (max-width: 468px) {
}

/*** footer_box *******************************************************/

@media only screen and (max-width: 820px) {
	#footer .footer_box { flex-direction: column; row-gap: 2rem; padding-block: 3rem 0;}
	#footer .footer_l { width: fit-content; margin: 0 auto;}
	#footer .footer_r { width: 100%; padding: 0; text-align: center;}
	#footer .footer_r .f_nav ul { row-gap: 0;}
	#footer .footer_r .f_nav ul li { border: 0.5px solid #d9d9d9; outline: 0.5px solid #d9d9d9; line-height: 4em;}
}

@media only screen and (max-width: 468px) {
	#footer .footer_l h1,
	#footer .footer_l h1 a { width: 298px; height: 30px; }
	#footer .footer_l h1 a { width: 298px; }
	#footer .footer_l h1 a img { width: 76px; height: 30px;}
	#footer .footer_l h1 a span { color: var(--main-color); font-weight: 700; font-size: 18px;}
	#footer .footer_l ul.add .map { margin-left: 0;}
	#footer .footer_r .f_nav ul li { font-size: 0.875rem;}
}

/*====================================================================================================
  SUBPAGE
====================================================================================================*/

@media only screen and (max-width: 820px) {
	#subpage .main { margin-block: 10rem 6.25rem;}
	#subpage .mainimg  { top: 70px;}
	#subpage .mainimg img { height: 30vw; object-fit: cover;}
	#subpage h2.catch { margin-top: 70px; width: 70%; font-size: 1.5rem; padding-block: 5%;}
	#subpage .news_list_area ul li a:after { display: none;}
}

/*====================================================================================================
  KAERU
====================================================================================================*/

@media only screen and (max-width: 820px) {

	/* MIDASHI */
	#subpage h3 { margin:0 2% 80px; font-size:24px;}
	#subpage h4.mid { margin:0 2% 20px; font-size:19.5px;}
	#subpage h4 { margin:0 2% 20px; font-size:18px;}
	#subpage .inline_cirlce { margin-inline:2%; font-size:18px;}

	/* COMMON */
	#subpage .comment1 { margin:0 2.5% 20px;}
	#subpage :is(.comment2, .comment3, .comment4) { margin:0 2.5% 20px; padding:5%;}

	/* HYOU */
	#subpage table.hyou { margin:0 auto; width:85%; table-layout:auto;}
	#subpage table.hyou th,
	#subpage table.hyou td{
		table-layout:auto !important;
		display:block !important;
		padding:2% 5%!important;
		width:100% !important;
		height:auto !important;
		font-size:1rem;
	}
	#subpage table.hyou td {
	border-bottom: 1px solid #CCC!important;
	}
	#subpage table.pc_tit { display:none;}
	#subpage table.hyou .sm_mid { display:block;}

	/* 2RETU */
	#subpage table.hyou2 td table {}
	#subpage table.hyou2 td table th,
	#subpage table.hyou2 td table td {
		display:table-cell !important;
		padding:5% !important;
		width:auto !important;
		height:auto !important;
	}

	/* 3RETU */
	#subpage table.hyou3 { border-top:1px solid #DDD;}
	#subpage table.hyou3+table.hyou3 { border-top:1px solid #DDD;}

	/* 4RETU */
	#subpage table.hyou4 {border-top:1px solid #DDD;}
	#subpage table.hyou4+table.hyou4 { border-top:1px solid #DDD;}

	/* 5RETU */
	#subpage table.hyou5 { border-top:1px solid #DDD;}
	#subpage table.hyou5+table.hyou5 { border-top:1px solid #DDD;}

	/* FREE */
	#subpage .pc_table { display:none;}
	#subpage .sm_table { display:block;}
	#subpage .sm_table table td { padding:5% !important;}
		
	/* FREE2 */
	#subpage table.free { margin:20px 2% 0; border-top:1px solid #DDD !important; border-bottom:1px solid #DDD !important;}
	#subpage table.free td {
		table-layout:auto !important;
		display:block !important;
		padding:5% !important;
		width:90% !important;
		height:auto !important;
		border-bottom:none;
	}
	#subpage table.free td:last-child {border-bottom:none;}
	#subpage table.free td div.sm {display:block !important; text-align:center; border-bottom:none !important /*1px solid #1F266C*/;}
	#subpage table.free tr:nth-child(1) td:nth-child(1),
	#subpage table.free tr:nth-child(1) td:nth-child(3) {border-bottom:1px dotted #DDD !important;}

	/* FIX */
	#subpage .fix_table {font-size:1vw;}
	#subpage .fix_table table { padding: 0;}
	#subpage .fix_table table th,
	#subpage .fix_table table td { padding:2%;}

	/* LIST */
	#subpage ul.list-ul { margin:0 2%;}

	/* LINK */
	#subpage .link2,
	#subpage .link3,
	#subpage .link4 {width:auto; float:none; clear:both;}
	#subpage .file2,
	#subpage .file3,
	#subpage .file4 {width:auto; float:none; clear:both;}
	#subpage .pdf { margin-inline:2%;}

	/* EMBEDDED */
	#subpage .embedded { margin: 0 auto; width: 90%; }
	#subpage .embedded iframe { width: 100%; height: 300px;}

	/* PHOTO BOX */
	#subpage ul.photo_box { clear:none !important; float:none !important; margin:5% 2%; width:96% !important;}
	#subpage ul.g1 li,
	#subpage ul.g2 li,
	#subpage ul.g3 li,
	#subpage ul.g4 li,
	#subpage ul.g5 li{ margin:15px 0; width:100%;}
	#subpage ul.g1 li.photo img,
	#subpage ul.g2 li.photo img,
	#subpage ul.g3 li.photo img,
	#subpage ul.g4 li.photo img,
	#subpage ul.g5 li.photo img { max-width:100% !important; height:auto !important;}
		

	/* YOUTUBE */
	#subpage .youtube {position: relative; width: 100%;}
	#subpage .youtube iframe { width: 100% !important;  height: 100% !important;}

	/* BOX */
	#subpage .temple-box { margin:0 2%; width:96%;}
	#subpage .temple-box:after { display:none;}
	#subpage .box1,
	#subpage .box2 { float:none;margin: 0 2% 20px; width:96%;}
	#subpage .box1:after,
	#subpage .box2:after { display:none;}
	#subpage .box1 .catch { margin:0 0 20px !important;}
	#subpage .box1 h4,
	#subpage .box2 h4 { margin:10px 0; }
	#subpage .photo-c { float:none; padding:0; width:100%;}
	#subpage .photo-c img { max-width:100%!important; height:auto !important; margin:0;}
	#subpage .photo-l,
	#subpage .photo-r { float:none; padding:0; width:100%; text-align:center;}
	#subpage .photo-l img,
	#subpage .photo-r img { max-width:100%!important; height:auto !important; margin:0;}

	/* LINE */
	#subpage .line {
		margin:0 2% 20px;
		height:50px;
		background-size:100% auto;
	}

	/* BUTTON */
	#subpage .btn { float:none; margin:1% 5%;}
	#subpage .b1,
	#subpage .b2,
	#subpage .b3 { width:fit-content; margin-inline:auto; min-width: 55%;}

	/* COLUMNBOX */
	#subpage .column {}
	#subpage .column:after { display:none;}
	#subpage .column .col2 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col3 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col4 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col5 { float:none; margin: 2%; width: 96%;}

	/* FLOW */
	#subpage ul.flow_box { width: 100%;}
	#subpage ul.flow_box:after { display:none;}
	#subpage ul.flow_box li { float:none; width:96% !important;}
	#subpage ul.flow_box li a:hover {}
	#subpage .flow1+.flow1 { margin-top:30px;}
	#subpage .flow1+.flow1:before { top:-30px;}
	#subpage ul.flow_box li+li { margin-top:30px;}
	#subpage ul.flow_box li+li:before {
		position:absolute;
		top:-30px;
		left:0;
		display:block;
		clear:both;
		content:"";
		width:100%;
		height:30px;
		background:url(../image/flow_bg_sm.png) no-repeat center center;
	}
	#subpage .flow1a+.flow1a {margin-top:30px;}
	#subpage .flow1a+.flow1a:before { top:-30px; width:100%;}
	#subpage .flow1a li+li { margin-top:5px !important; padding: 0 !important;}


}