@charset "UTF-8";


/*=======================================================*/
/*      		セクション毎のCSS   			  		  */
/*======================================================*/


/*======= TOPページ ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(40px, 6vw, 90px) 0 clamp(20px, 6vw, 70px) 0;
	background-color: var(--base-color);
}
/*呼びかけ見出し*/
/*H3タイトル*/
.greeting-heading {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(17px, 2vw, 22px);
	text-align: center;
	border: 0;
	color: #444;
}
  
.greeting-heading::before,
.greeting-heading::after {
	content: '';
	width: 1px;
	height: 40px;
	background-color: var(--accent-color2);
}

.greeting-heading::before {
	margin-right: 35px;
	transform: rotate(-30deg);
}
.greeting-heading::after {
	margin-left: 35px;
	transform: rotate(30deg)
}
@media screen and (max-width: 568px) {
	.greeting-heading::before {
		margin-right: 17px;
	}
	.greeting-heading::after {
		margin-left: 17px;
	}
}
/*3つの特徴 画像*/
.top_greet-item {
	padding-bottom: 3vw;
}
.top_greet-item-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px 20px;
}
@media (min-width: 568px) {
	.top_greet-item-container {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* 各コンテンツ */
.top_greet-item p {
	font-size: clamp(13px, 1.4vw, 15px);
	min-height: 0vw;
	text-align: center;
	margin-bottom: 5px;
}

/*section1*/
.top_sec1 {
	padding: 10px 0 clamp(50px, 2vw, 70px) 0;
	background: url(../img/bg_01.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.top_sec1 h3{
	font-size: clamp(18px, 2vw, 24px);
	font-family: "Montserrat", sans-serif;
}
/*H3 取扱商品*/
h3.heading08, h3.heading08b, h3.heading08c {
	position: relative;
	font-size: clamp(22px, 2vw, 27px);
	text-align: center;
	border-bottom: 5px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 5px;
}
h3.heading08:after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 5px;
	background-color: #e10000;
}
h3.heading08b:after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 5px;
	background-color: #3f80b9;
}
h3.heading08c:after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 5px;
	background-color: #eaa21a;
}
/*見出し下文章*/
.top_sec1 h3.heading07 + p{
	text-align: center;
	margin: -7px auto 10px;
	color: var(--accent-color1);
}
/*画像装飾　切り込み*/
.endcutimg {
	position: relative;
	margin-bottom: 10px;
}

.endcutimg::before,
.endcutimg::after {
	content: '';
	position: absolute;
	transform: rotate(-35deg);
	width: 70px;
	height: 25px;
	background-color: #fff;/*背景色*/
	z-index: 1;
}
.endcutimg::before {
	top: -10px;
	left: -25px;
	border-bottom: 1px solid #aaa;
}

.endcutimg::after {
	bottom: -10px;
	right: -25px;
	border-top: 1px solid #aaa;
}
/*リスト　横並び　下線　あえてこの指定の仕方で*/
ul.list05{
	display: flex;
	justify-content: start;/*アイテムを先頭に寄せる*/
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 20px;
	list-style-type: disc;
	list-style-position: inside;
	margin-top: 5px;
	margin-bottom: 20px;
	padding-left: 0;
}
ul.list05 li{
	width: calc((100% - 21px) / 2);
	font-size: clamp(14px, 1.2vw, 15px);
	border-bottom: 1px dashed #999;
}
@media (max-width: 968px) {
	ul.list05 li {
		width: 100%;
	}
}
@media (max-width: 768px) {
	ul.list05 li {
		width: calc((100% - 21px) / 2);
	}
}
@media (max-width: 568px) {
	ul.list05 li {
		width: 100%;
	}
}

/**/
div.linkukuri2 {
	box-sizing: border-box;
	padding: 15px 30px;
	background: rgba(245, 245, 245, 0.9);
	margin: 0 auto;
	text-align: center;
	/*box-shadow: 0px 3px 3px 0px rgba(83, 83, 83, 0.5);*/
	border-radius: 10px;
}
/*ページ内リンク リスト*/
.link-menu2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
ul.link-menu2 li {
	box-sizing: border-box;
	padding: 2px 5px;
}
ul.link-menu2 li::before {
	content: "■";
}

@media screen and (max-width: 568px) {
	div.linkukuri2 {
		width: 99%;
		padding: 15px 20px;
	}
	.link-menu2 {
		gap: 0%;
		justify-content: flex-start;
	}
	.link-menu2 li {
		display:inline-block;
		width: 48%;
		text-align: left;
		border-bottom: 1px dashed #8cd2c3;
	}
	ul.link-menu2 li::after{
		content: none;
	}
}
/*括り*/
.kukuri {
	margin: 5px 0;
	padding: 25px 30px;
	background-color: rgba(255,255,255,0.85);
	border: 4px double #bbb;
}
@media (max-width: 768px)  {
	.kukuri {
		padding: 15px 20px;
	}
}
.kukuri p{
	font-size: clamp(12px, 1.2vw, 13px);
	margin: 10px 0;
}

/*TELバナー セクション*/
.topbnr_sec{
	padding: 60px 0;
	background-color: #ececec;
}
.topbnr_sec-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}
@media (max-width: 568px) {
	.topbnr_sec-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 2fr;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
}






/*======= 取扱商品ページ ======*/

/*section1*/
.service_sec1 {
	padding: 20px 0 10px 0;
	background-color: #FFF;
}
/*section2 作業服*/
.service_sec2 {
	padding: 70px 0 50px 0;
}
/*H3*/
h3.sim {
	margin: 0.5em 0;
	font-size: clamp(19px, 1.9vw, 26px);
	min-height: 0vw;
	border-bottom: 1px dotted #a6a6a6;
}

/*画像枠*/
.imgwaku{
	border: 1px solid #ccc;
}
/*文字ボタン*/
.btwi{
	display: block;
	margin: 10px auto 5px auto;
	box-sizing: border-box;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 568px) {
	.btwi{
		width: 100%;
	}
}
.c-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 37px;
	color: #fff;
	line-height: 1.1;
	text-decoration: none;
	transition: 0.3s;
	padding: 0 32px 0 20px;
	border-radius: 20px;
}
.btn07 a {
	background-color: var(--main-color);
	border: 1px solid transparent;
	font-size: clamp(12px, 1.4vw, 14px);
}
.btn07 a::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	background-color: transparent;
	border: 2px solid #fff;
	border-radius: 50%;
}
.btn07 a::after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #fff #fff transparent transparent;
}
.btn07 a:hover {
	background-color: #e4c000;
}
.btn07 a:hover::before {
	border: 1px solid #f2f2f2;
}
.btn07 a:hover::after {
	border-color: #f2f2f2 #f2f2f2 transparent transparent;
}
/**/
.service_sec2-item {
	padding-bottom: 2vw;
}
.service_sec2-item-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 30px;
}
@media (max-width: 968px) {
	.service_sec2-item-container {
		margin: 0 15px;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.service_sec2-item-container {
		margin: 0 15px;
		grid-template-columns: repeat(1, 1fr);
	}
}



/*section3 安全靴*/
.service_sec3 {
	padding: 50px 0 10px 0;
	background-color: #f4f4f4;
}

/*section4 ユニフォーム*/
.service_sec4 {
	padding: 50px 0 10px 0;
	background-color: #fff;
}

/*section5 その他*/
.service_sec5 {
	padding: 50px 0 10px 0;
	background-color: #FFFBF6;
}

/*section6 学校指定服*/
.service_sec6 {
	padding: 50px 0 clamp(50px, 2vw, 70px) 0;
}
/*section6plus 価格*/
.service_sec6plus {
	padding: 20px 0 clamp(50px, 2vw, 70px) 0;
	background: url(../img/bg_02.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
/*制服・体操服などの販売価格*/
.service_sec6-item-container2 {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px 30px;
}
@media (min-width: 768px) {
	.service_sec6-item-container2 {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* 各コンテンツ */
.service_sec6plus h4 {
	margin: 0.5em 0;
	font-size: clamp(18px, 2vw, 24px);
	min-height: 0vw;
	text-align: center;
}
.service_sec6plus h5 {
	margin: 1em 0;
	font-size: clamp(16px, 1.7vw, 20px);
	min-height: 0vw;
	text-align: center;
	background-color: rgba(164, 210, 199, 0.7);
}
.service_sec6plus h5.ab {
	background-color: rgba(255, 209, 149, 0.7);
}
.service_sec6plus h6 {
	font-size: clamp(14px, 1.4vw, 16px);
	min-height: 0vw;
	margin-bottom: 5px;
	color: #35554b;
}
.service_sec6plus h6.ab2 {
	color: #865531;
}

/*メニュー表*/
table.menuB {
	margin: 5px 0 15px 0;
	border-top: 1px solid var(--main-color);
	border-left: 1px solid var(--main-color);
}
table.menuB tr td {
	text-align: right;
	font-size: clamp(12px, 1.3vw, 14px);
	line-height: 1.4;
	padding: 5px;
	border-bottom: 1px solid var(--main-color);
	border-right: 1px solid var(--main-color);
}
table.menuB tr td:nth-of-type(1){
	text-align: left;
}
table.menuB tr td:nth-of-type(2){
	width: 40%;
}
/**/
table.menuB-x {
	margin: 5px 0 0 0;
	border-top: 1px solid var(--main-color);
	border-left: 1px solid var(--main-color);
}
table.menuB-x tr td {
	text-align: right;
	font-size: clamp(12px, 1.3vw, 14px);
	line-height: 1.4;
	padding: 5px;
	border-bottom: 1px solid var(--main-color);
	border-right: 1px solid var(--main-color);
}
table.menuB-x tr td:nth-of-type(1){
	text-align: left;
}
table.menuB-x tr td:nth-of-type(2){
	width: 23%;
}
table.menuB-x tr td:nth-of-type(3){
	width: 35%;
}
/*メニュー表 */
table.menuC {
	margin: 5px 0 15px 0;
	border-top: 1px solid var(--accent-color1);
	border-left: 1px solid var(--accent-color1);
}
table.menuC tr td {
	text-align: right;
	font-size: clamp(12px, 1.3vw, 14px);
	line-height: 1.4;
	padding: 5px;
	border-bottom: 1px solid var(--accent-color1);
	border-right: 1px solid var(--accent-color1);
}
table.menuC tr td:nth-of-type(1){
	text-align: left;
}
table.menuC tr td:nth-of-type(2){
	width: 30%;
	background-color: rgba(249, 240, 225, 0.7);
	text-align: center;
}
table.menuC tr td:nth-of-type(3){
	width: 30%;
}
/*メニュー表*/
table.menuD {
	margin: 5px 0 15px 0;
	border-top: 1px solid var(--accent-color1);
	border-left: 1px solid var(--accent-color1);
}
table.menuD tr th {
	text-align: center;
	font-size: clamp(12px, 1.3vw, 14px);
	line-height: 1.4;
	padding: 5px;
	background-color: rgba(249, 240, 225, 0.7);
	border-bottom: 1px solid var(--accent-color1);
	border-right: 1px solid var(--accent-color1);
}
table.menuD tr td {
	text-align: right;
	font-size: clamp(12px, 1.3vw, 13px);
	line-height: 1.4;
	padding: 5px;
	border-bottom: 1px solid var(--accent-color1);
	border-right: 1px solid var(--accent-color1);
}
table.menuD tr td:nth-of-type(1){
	text-align: left;
}
table.menuD tr td:nth-of-type(2){
	width: 29%;
}








/*======= 初めて利用される方へ(よくある質問)ページ ======*/

.flow_sec1{
	padding: 20px 0 100px 0;
}
/**/
div.linkukuri {
	box-sizing: border-box;
	padding: 15px 30px;
	background: rgba(255, 245, 235, 0.9);
	margin: 0 auto;
	width: max-content;
	text-align: center;
	/*box-shadow: 0px 3px 3px 0px rgba(83, 83, 83, 0.5);*/
	border-radius: 10px;
}
/*ページ内リンク リスト*/
.link-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
ul.link-menu li a {
	display: inline-block;
	white-space: nowrap;
	font-size: clamp(16px, 1.5vw, 18px);
}
ul.link-menu li::after {
	content: "　|　";
}
.link-menu li a:hover{
	display:inline-block;
	color: var(--accent-color3);
}
ul.link-menu li:last-child::after{
	content: none;
}
@media screen and (max-width: 568px) {
	div.linkukuri {
		width: 99%;
	}
	.link-menu {
		gap: 0%;
	}
	.link-menu li {
		display:inline-block;
		width: 100%;
		border-bottom: 1px dashed #8cd2c3;
	}
	.link-menu li a{
		display:inline-block;
		padding: 10px 0px;
	}
	ul.link-menu li::after{
		content: none;
	}
}

/*マウスオーバーアニメション*/
.textlink a {
	position: relative;
	color: #333;
	text-decoration: none;
}
.textlink a:hover {
	color: var(--accent-color3);
}
.textlink01 a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--main-color);
	transform: scaleX(0);
	transition: transform 0.3s;
}
.textlink01 a:hover::after {
	transform: scaleX(1);
}

/*ステップ*/
.flow_design01 {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flow_design01 ul {
	padding: 0;
}
.flow_design01 li {
	list-style-type: none;
}
.flow_design01 dd {
	margin-left: 0;
	width: 75%;
}
.flow01 > li {
	position: relative;
	list-style: none;
}
.flow01 > li:not(:last-child) {
	margin-bottom: 40px;
}
.flow01 > li dl {
	box-sizing: border-box;
	width: 100%;
	padding: 20px 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border: 2px solid var(--main-color);
	border-radius: 10px;
	position: relative;
}
.flow01 > li:not(:last-child) dl::before,
.flow01 > li:not(:last-child) dl::after {
	content: "";
	border: solid transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.flow01 > li:not(:last-child) dl::before {
	border-width: 22px;
	border-top-color: var(--main-color);
}

.flow01 > li:not(:last-child) dl::after {
	border-width: 20px;
	border-top-color: #fff;
}
.flow01 > li dl dt {
	font-size: 1.3em;
	font-weight: 600;
	-ms-flex-preferred-size: 20%;
	flex-basis: 25%;
	width: 25%;
	margin-right: 2vw;
	text-align: center;
}
.flow01 > li dl dt .icon01 {
	font-size: 0.6em;
	color: #fff;
	background: var(--main-color);
	padding: 5px 10px;
	margin-bottom: 10px;
	display: block;
	border-radius: 20px;
	position: relative;
	z-index: 88;
}

@media(max-width: 650px) {
	.flow01 > li:not(:last-child) {
		margin-bottom: 30px;
	}
	.flow01 > li dl {
		display: block;
		padding: 10px 15px;
	}
	.flow01 > li dl dt {
		margin-right: 0;
		width: 100%;
	}
	.flow01 > li dl dt .icon01 {
		font-size: .7em;
	}
	.flow_design01 dd {
		width: 100%;
		text-align: justify;
		margin-top: 5px;
	}
}






/*======= FAQ ======*/
.flow_faq_sec {
	padding: clamp(40px, 3vw, 40px) 0;	/*ページ内カテゴリーの場合*/
	background-color: #f5f9f7;
}
/*通常デザイン*/

div.faq p.b {
	font-weight: bold;
	color: var(--accent-color1);
}
div.faq p {
	margin-top: 5px;
	line-height: 1.4;
	text-align: left;
	text-indent: -1em;
	padding-left: 1em;
	display: block;
}




/*======= 会社案内ページ ======*/
/*会社案内*/
.info_sec1{
	padding: 20px 0 100px 0;
}
/* 概要・アクセス部分のテーブル */
.info1 {
	font-weight: bold;
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 8.5em;
}
.info2 {
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 400px;
}
.info3 {
	font-weight: bold;
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 9em;
	color: #000;
}
.info4 {
	border-bottom: 1px dashed #999;
	padding: 5px;
}
@media screen and (max-width: 568px) {
	.info1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	.info2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
	.info3 {
		display: block;
		padding: 8px 2px 8px 2px;
		width: 100%;
		background-color: #dbf0e9;
	}
	.info4 {
		display: block;
		padding: 8px 2px;
		width: 99%;
	}
}
/*会社概要*/
.bg_b{
	background: #f2f2f2;
	padding:20px;
}
/*アクセス*/
.info_sec3{
	padding: var(--v-space) 0;
	background-color: #f7f7f7;
}




/*======= お問い合わせページ ======*/