@charset "utf-8";
/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg-sub {
	background: var(--base-color) url("../images/sub-01s.jpg") no-repeat center center / cover;
	width: 100%;
	padding-top: 80%;	/*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
}

	/*画面420px以上の追加指定*/
	@media screen and (min-width:420px) {
 #mainimg-sub {
 background: var(--base-color) url("../images/sub-01.jpg") no-repeat center center / cover;
 padding-top: 30%;	/*アスペクト比2:3（3÷2=1.5）*/
}
}
/*追加指定ここまで*/



#mainimg-sub > div {
	position: absolute;
	top: 90px;	/*header分を確保*/
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
}
	/*画面420px以上の追加指定*/
	@media screen and (min-width:700px) {
 #mainimg-sub > div {
 align-items: flex-start;
 top: 40%;	/*header分を確保*/
}
}/*追加指定ここまで*/
/*テキストのブロック*/
#mainimg-sub p {
	margin: 0;
}
#mainimg-sub .text {
	font-weight: 800;	/*太字に*/
	line-height: 2;	/*行間*/
	text-align: left;	/*テキストをセンタリング*/
	margin-left:30px;
	margin-top:-15px;
}

	/*画面420px以上の追加指定*/
	@media screen and (min-width:700px) {
 #mainimg-sub .text {
 text-align: left;	/*テキストを左寄せ*/
 margin-left:10rem;
}
}/*追加指定ここまで*/
/*breadcrumb（ぱんくず）
---------------------------------------------------------------------------*/

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	background-color: var(--base-color);
	font-size: var(--font-ss);
	color: rgba( 255, 255, 255, 0.5);
}
 .breadcrumb li:not(:last-of-type)::after {
 content: "｜";
 padding: 0 0 1rem 1rem;
 font-weight: 900;
 font-size: var(--font-ss);
 color: #FFF; /* 記号の色 */
}
.breadcrumb a {
	text-decoration: none;
	color: #FFF;
}
.fa-home {
	margin-right: 0.5rem;
}
	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {
	
	
.breadcrumb {
	 margin: 1rem 10rem;
}
}
/*ページタイトル
---------------------------------------------------------------------------*/

.hstyle-pageBasic {
	font-weight: bold;
	font-size: var(--font-M);
	text-align: center;
	color: #000;
	margin-bottom: 50rem;
	text-align:center;
	margin: 3rem 0;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {
.hstyle-pageBasic {
 text-align:left;
 margin: 3rem 10rem;
}
}
/*会社概要
---------------------------------------------------------------------------*/

.outline {
	padding: 0 10rem;	/*余白。上下、左右へ。*/
}
table.style-01 {
	border-top: 1px solid #CC5526;
	width:100%;
}
table.style-01 th, table.style-01 td {
	font-size: var(--font-S);
}
table.style-01 th {
	color: #FFF;
	text-align: left;
	padding: 2rem;
	margin-bottom: 2rem;
	width:15%;
	vertical-align: top;
}
table.style-01 tr {
	border-bottom: 1px solid #CC5526;
}
table.style-01 td {
	padding: 2rem 0;
	padding-bottom: 2rem;
}
 table.style-01 dl:not(:last-of-type) {
 margin-top: 0;
 margin-bottom: 2rem;
}
table.style-01 dl dt {
	font-weight:400;
}
table.style-01 dl dt span {
	font-weight: 900;
}
table.style-01 dl dd {

}

	/*画面700px以下の追加指定*/
	@media screen and (max-width:900px) {
 .outline {
 padding: 0 1.5rem;	/*余白。上下、左右へ。*/
}
 table.style-01 {
 padding: 0;
 margin: 0;
 width:100%;
}
 table.style-01 th, table.style-01 td {
 display: inline-block;
 width:100%;
 float: left;
 padding: 0.5rem 1.2rem;
}
 table.style-01 th {
 margin-bottom:0;
 text-align: left;
}
}
/*沿革
---------------------------------------------------------------------------*/

/*ボックス全体*/
.enkaku {
	display: flex;			/*直接の子要素を横並びにする*/
	flex-direction: column;	/*一旦縦並びにしておく*/
	margin-top: 2vw;		/*上寄せですが、この分だけ下げます。*/
}
.enkaku h2 {
	text-align: center;
}
/*画像ブロック*/
	.enkaku .image img {
	width: 100%;	/*幅。画面の0%*/
}
/*テキストブロック*/
.enkaku .text {
	padding: 1rem 2rem;		/*上下、左右へのブロック内の余白*/
	margin-bottom: 20px;		/*下に空けるスペース*/
	font-size: clamp(1.6rem, 1.3vw, 3rem);
}
.enkaku .text p {
	margin-bottom: 10px;		/*下に空けるスペース*/
}



	/*画面幅799px以下の追加指定（並び順を変更します。数字が小さな順に並びます。）*/
	@media screen and (max-width:799px) {
	

	/*画像ブロック*/
	.enkaku .image {
order: 1;
}

	/*テキストブロック*/
	.enkaku .text {
order: 2;
}
}
/*追加指定ここまで*/
	
	
	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
	
	

	/*ボックス全体*/
	.enkaku {
 display: flex;
 flex-direction: row-reverse; /*順番を逆にする*/
 
}
 .enkaku h2 {
 text-align: left;
}


	/*テキストブロック*/
	.enkaku .text {
 margin-top: 0;
 flex: 1;
 align-self: flex-start;	/*上寄せになります*/
 position: relative;
 margin-right: 0;
 padding: 0 5% 10% 10rem;
}
	
	/*画像ブロック*/
	.enkaku .image {
 align-self: flex-start;	/*上寄せになります*/
 margin-top: 2vw;		/*上寄せですが、この分だけ下に下げます。*/
 padding: 0;		/*余白をリセット*/
 width: 40%;	/*幅。画面の0%*/
 overflow: hidden;
}
 .enkaku .image img {
 width: 100%;
 height: auto;
 display: block;
}
}
/*追加指定ここまで*/


	/*沿革*/
	
	.timeline {
	padding: 0 5%;	/*余白。上下、左右へ。*/
}
.timeline-list li {
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;
}
.timeline-date {
	width: 20%;
	float: left;
	color:#fff;
	font-size: clamp(2rem, 1.6vw, 2.2rem);
　　　
}
.timeline-content-F {
	width: 80%;
	float: left;
	padding-left: 10px;
	padding-bottom: 30px;
}
.timeline-content-L {
	width: 80%;
	float: left;
	padding-left: 10px;
	padding-bottom: 80px;
}
.timeline-content {
	width: 80%;
	float: left;
	padding-left: 10px;
	padding-bottom: 30px;
}
.timeline-content-F:before {
	content: '';
	width: 30px;
	height: 100%;
	background: url(../images/enkaku-line-F.png) left 0px top 0px no-repeat;
	position: absolute;
	left: 42px;
	top: 0;
}
.timeline-content-L:before {
	content: '';
	width: 30px;
	height: 100%;
	background: url(../images/enkaku-line-L.png) left 0px top 0px no-repeat;
	position: absolute;
	left: 42px;
	top: 0;
}
.timeline-content:before {
	content: '';
	width: 30px;
	height: 100%;
	background: url(../images/enkaku-line.png) left 0px top 0px no-repeat;
	position: absolute;
	left: 42px;
	top: 0;
}
.timeline-content-F p {
	margin: 0;
	padding: 0;
	font-size: clamp(1.6rem, 1.3vw, 3rem);
}
.timeline-content-L p {
	margin: 0;
	padding: 0;
	font-size: clamp(1.6rem, 1.3vw, 3rem);
}
.timeline-content p {
	margin: 0;
	padding: 0;
	font-size: clamp(1.6rem, 1.3vw, 3rem);
}
	
	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
 .timeline {
 padding: 0 0 0 5%;	/*余白。上下、左右へ。*/
}
 .timeline-date {
 width: 13%;
 float: left;
 text-align:right;
 padding-righ: 6%;
 color:#fff;
 font-size: clamp(2rem, 1.6vw, 3rem);
 margin-top: 0;
 font-weight: 800;		/*太字*/
}
 .timeline-content-F {
 width: 85%;
 float: left;
 padding-left: 5%;

}
 .timeline-content-L {
 width: 85%;
 float: left;
 padding-left: 5%;

}
 .timeline-content {
  width: 85%;
 float: left;
  padding-left: 5%;

}
 .timeline-content-F:before {
 content: '';
 width: 50px;
 height: 100%;
 background: url(../images/enkaku-line-F.png) left 0px top 0px no-repeat;
 position: absolute;
 left: 13%;
 top: 0;
}
 .timeline-content-L:before {
 content: '';
 width: 50px;
 height: 100%;
 background: url(../images/enkaku-line-L.png) left 0px top 0px no-repeat;
 position: absolute;
 left: 13%;
 top: 0;
}
 .timeline-content:before {
 content: '';
 width: 50px;
 height: 100%;
 background: url(../images/enkaku-line.png) left 0px top 0px no-repeat;
 position: absolute;
 left: 13%;
 top: 0;
}


}
/*追加指定ここまで*/



/*list-normal-2（2カラム　テキスト　画像）
---------------------------------------------------------------------------*/
.list-normal-2 {
	padding: 0 1.5rem;	/*余白。上下、左右へ。*/
}
/*ブロック１個あたり*/
.list-normal-2 .list {
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem 0;
	margin-bottom: 2rem;
	position: relative;
	border-bottom: 1px solid #CC5526;
}
.list-normal-2 .list:first-child {
	border-top: 1px solid #CC5526;
}


	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-normal-2 {
 padding: 0 12rem;	/*余白。上下、左右へ。*/
}


	/*テキストブロック*/
	.list-normal-2 .text {
 flex: 1;
}
	
	/*ブロック１個あたり*/
	.list-normal-2 .list {
 display: flex;
 gap: 5rem;	/*画像とテキストの間のスペース。5文字分。画像がない場合はこれは適用されません。*/
}
}
/*追加指定ここまで*/


/*画像ブロック*/
.list-normal-2 figure {
	width: 100%;	/*幅*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}
/*画像ブロック共通*/
.list-normal-2 img {
	box-shadow: 10px 10px #5D0053;	/*ボックスの影。右へ、下へ、ぼかし幅。*/
	width: 100%;		/*画像サイズ*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像ブロック*/
.list-normal-2 figure {
 width: 35%;	/*幅*/
 margin-bottom: 1rem;	/*下に空けるスペース*/
}
}/*追加指定ここまで*/


	.list-normal-2 .text {
 padding-bottom: 1.5em;
}


.list-normal-2 h4 {
	font-size: clamp(2rem, 5vw, 6rem);
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	color:#FFF;
}

.list-normal-2 p {
	font-size: var(--font-S);
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-normal-2 h4 {
	font-size: clamp(1.3rem, 2.2vw, 6rem);
 line-height: 1.8;	/*行間*/
}
 .list-normal-2 p {
	font-size: var(--font-S);
 line-height: 1.4;	/*行間*/
}
}
/*追加指定ここまで*/

/*導入--お客様の声　
---------------------------------------------------------------------------*/
.d-koe {
	background: #FA7944;		/*背景色。*/
	color: #FFF;	/*文字色。*/
	padding:20px;	/*余白。上下、左右へ。*/
	border-radius: 30px;	/*角を丸くする*/
	margin: 0;
}

.d-koe h5{
	font-size: clamp(2.2rem, 1.8vw, 6rem);
	margin-top: 0;
	margin-bottom: 20px;
	padding: 0;
}

.d-koe h5:before{
  content: '●';
  margin-right: 8px;
  color: #ffb800; /*アイコン色*/
}

.d-koe h5 span{
	font-size: var(--font-ss);
}

.d-koe p{
	font-size: var(--font-S);
	color:#000;
	font-weight: 800;	/*太字に*/
	line-height: 1.5;
	margin: 0;
	padding: 0;
}


/*list-dounyu-3（3カラム　ステップ　左テキスト　右画像）
---------------------------------------------------------------------------*/
.list-dounyu-3 {
	background: #FA7944;		/*背景色。*/
	color: #FFF;	/*文字色。*/
	padding: 1rem;	/*余白。上下、左右へ。*/
	padding-bottom: 2rem;	
	border-radius: 30px;	/*角を丸くする*/
	margin: 1rem;
}

.list-dounyu-3 h3 {
	font-size: var(--font-M);
	padding-left: 1.5rem;	/*余白。上下、左右へ。*/
	color:#000;
}

.list-dounyu-3 h3:before {
  content: '●';
  margin-right: 8px;
}

.list-dounyu * {
	margin: 0;
	padding: 0;
}

	/*テキストブロック*/
	.list-dounyu .text {
 padding-bottom: 1.5em;
}
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	 .list-dounyu-3 {
	 	margin: 3rem 10rem;
		padding: 3rem;	/*余白。上下、左右へ。*/
}

	.list-dounyu-3 h3 {
	font-size: var(--font-M);
}

	/*テキストブロック*/
	.list-dounyu .text {
 flex: 1;
}
}
/*追加指定ここまで*/

/*ブロック１個あたり*/
.list-dounyu .list {
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem 1rem;
	border-bottom: solid 5px #FFF;
	margin-bottom: 0;
	position: relative;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック１個あたり*/
	.list-dounyu .list {
 display: flex;
 padding: 3rem;
 gap: 3rem;	/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
}
}
/*追加指定ここまで*/


/*h4見出し*/
.list-dounyu h4 {
	font-size: var(--font-S);
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	color:#FFF;
}
 .list-dounyu p {
font-size: var(--font-S);

}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-dounyu h4 {
	font-size: clamp(1.5rem, 2vw, 6rem);
 line-height: 1.8;	/*行間*/
}
 .list-dounyu p {
font-size: var(--font-S);
 line-height: 1.4;	/*行間*/
}
}
	/*追加指定ここまで*/


/*制作の流れで使用しているブロック間の「▼」の矢印*/
.list-dounyu.flow .list::after {
 content: "▼";	/*このテキストを出力します*/
 position: absolute;
 left: 47%;		/*左からの配置場所。*/
 bottom: -2.1rem;	/*下からの配置場所。マイナスがつくので本来の場所とは逆向きに移動。*/
 transform: scaleX(1.5);	/*横幅を150%に*/
 font-size: 2rem;	/*文字サイズ200%*/
 color: #FFF;
}

/*最後のボックスだけ下矢印を出さない*/
.list-dounyu.flow .list:last-child::after {
 content: none;
}
/*最後のボックスだけ下矢印を出さない*/
.list-dounyu.flow .list:last-child {
	border-bottom: none;
}
 @media screen and (min-width:600px) {
.list-dounyu.flow .list::after {
 left: 65px;		/*左からの配置場所。*/
}
}
/*画像ブロック*/
.list-dounyu figure {
	width: 100%;	/*幅*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}
/*画像ブロック共通*/
.list-dounyu img {
	box-shadow: 10px 10px #5D0053;	/*ボックスの影。右へ、下へ、ぼかし幅。*/
	width: 100%;		/*画像サイズ*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像ブロック*/
.list-dounyu figure {
 width: 35%;	/*幅*/
 padding: 1.5em 0;
 margin-bottom: 1rem;	/*下に空けるスペース*/
}
}
/*追加指定ここまで*/
	
	
	
.list-dounyu .circle{
  position: relative;
  display: inline-block;
  left: 38%;		/*左からの配置場所。*/
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #FFF;/*背景色*/
  color:#FF4800;
  padding: 1rem 1.5rem;
  text-align:center;
  margin-bottom: 2rem;
    font-size:1.5rem;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
.list-dounyu .circle{
  left: 0;		/*左からの配置場所。*/
}
}


.list-dounyu .circle span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 55%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :90px;
  text-align:center;
  font-family: "rebuchet MS" ;
  font-size:3.3rem;
}
	

ol.num {
	margin-top:50px;
	font-size: var(--font-ss);
}


ol.num li {
	list-style-type: none;
	list-style-position: inside;
	counter-increment: cnt;
	padding-left: 1.5em;
	position: relative;
}
ol.num li:before {
	display: marker;
	content:  counter(cnt) ". ";
	position: absolute;
	left: 0;
	top: 0;
}

ul.kome  {
	margin-top:50px;
	font-size: var(--font-ss);
}

ul.kome li {
 list-style-type: none;
  position: relative;
  padding-left: 1.5em;
}
ul.kome li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

	@media screen and (min-width:600px) {
	 .num {
 font-size: 1.4rem;	/*文字サイズ*/
 line-height: 1.4;	/*行間*/
}
 .kome {
 font-size: 1.4rem;	/*文字サイズ*/
 line-height: 1.4;	/*行間*/
}

}

/*当日のお願い*/
  .toujitsu {
    margin: 0 50px 50px 50px;
    padding: 50px 50px;
	border-top: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	color:#000;
  }
  .toujitsu h4 {
	font-size: var(--font-S);
    text-align: center;
    width: 100%;
	color:#FFF;
  }
  .toujitsu ul.dott {
    padding-left: 5px;
    margin-top: 0;
  }
  .toujitsu ul.dott li {
	font-size: var(--font-S);
  }
  
  	@media screen and (min-width:600px) {

  .toujitsu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
 
  }

  .toujitsu h4 {
    width: 20%;
  }
 .toujitsu ul.dott li {
	font-size: var(--font-S);
 line-height: 1.4;	/*行間*/
}

}


/*list-after-2（2カラム　テキスト　画像）
---------------------------------------------------------------------------*/
.list-after-2 {
	padding: 0 1.5rem;	/*余白。上下、左右へ。*/
}
/*ブロック１個あたり*/
.llist-after-2 .list {
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem 0;
	margin-bottom: 2rem;
	position: relative;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-after-2 {
 padding: 0 10rem;	/*余白。上下、左右へ。*/
}


	/*テキストブロック*/
	.list-after-2 .text {
 flex: 1;
}
	
	/*ブロック１個あたり*/
	.list-after-2 .list {
 display: flex;
 gap: 5rem;	/*画像とテキストの間のスペース。5文字分。画像がない場合はこれは適用されません。*/

}
}
/*追加指定ここまで*/


/*画像ブロック*/
.list-after-2 figure {
	width: 100%;	/*幅*/
	margin-bottom: 5rem;	/*下に空けるスペース*/
}
/*画像ブロック共通*/
.list-after-2 img {
	box-shadow: 10px 10px #5D0053;	/*ボックスの影。右へ、下へ、ぼかし幅。*/
	width: 100%;		/*画像サイズ*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像ブロック*/
.list-after-2 figure {
 width: 40%;	/*幅*/
 margin-bottom: 5rem;	/*下に空けるスペース*/
}
}/*追加指定ここまで*/


	.list-after-2 .text {
 padding-bottom: 1.5em;
}


.list-after-2 h4 {
    font-size: var(--font-M);
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

.list-after-2 p {
	font-size: var(--font-S);
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-after-2 h4 {
  font-size: var(--font-M);
 line-height: 1.8;	/*行間*/
}
 .list-after-2 p {
	font-size: var(--font-S);
 line-height: 1.4;	/*行間*/
}
}
/*追加指定ここまで*/


/*list-benri-2（2カラム　テキスト　画像）
---------------------------------------------------------------------------*/
.list-benri-2 {
	padding: 0 1.5rem;	/*余白。上下、左右へ。*/
}
/*ブロック１個あたり*/
.list-benri-2 .list {
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 0;
	margin-bottom: 2rem;
	position: relative;
}


	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-benri-2 {
 padding: 0 10rem;	/*余白。上下、左右へ。*/
}


	/*テキストブロック*/
	.list-benri-2 .text {
 flex: 1;
}
	
	/*ブロック１個あたり*/
	.list-benri-2 .list {
 display: flex;
 gap: 5rem;	/*画像とテキストの間のスペース。5文字分。画像がない場合はこれは適用されません。*/
}
}
/*追加指定ここまで*/


/*画像ブロック*/
.list-benri-2 figure {
	width: 100%;	/*幅*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}
/*画像ブロック共通*/
.list-benril-2 img {
	width: 100%;		/*画像サイズ*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像ブロック*/
.list-benri-2 figure {
 width: 40%;	/*幅*/
 margin-bottom: 1rem;	/*下に空けるスペース*/
}
	/*画像とテキストの左右を入れ替えたい場合（600px以上のみ使用可能）*/
	.reverse {
 flex-direction: row-reverse;
}


	.reverse figure{
margin-top: -10vw;
}
}/*追加指定ここまで*/


	.list-benri-2 .text {
 padding-bottom: 1.5em;
}


.list-benri-2 h4 {
	font-size: 2rem;	/*文字サイズ%*/
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	color:#FFF;
}

.list-benri-2 p {
      font-size: var(--font-S);
	margin: 0;	/*下に空けるスペース*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-benri-2 h4 {
      font-size: var(--font-M);
 line-height: 1.8;	/*行間*/
}
 .list-benri-2 p {
      font-size: var(--font-S);
 line-height: 1.4;	/*行間*/
}
}
/*追加指定ここまで*/

/*list-normal-2（2カラム　テキスト　画像）
---------------------------------------------------------------------------*/
.privacy {
	padding: 0 1.5rem;	/*余白。上下、左右へ。*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .privacy {
 padding: 0 10rem;	/*余白。上下、左右へ。*/
}


}
/*追加指定ここまで*/


.privacy .text {
 padding-bottom: 1.5em;
}


.privacy h4 {
      font-size: var(--font-M);
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	color:#FFF;
}

.privacy p {
      font-size: var(--font-S);
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .privacy h4 {
      font-size: var(--font-M);
 line-height: 1.8;	/*行間*/
}
 .privacy p {
      font-size: var(--font-S);
 line-height: 1.4;	/*行間*/
}
}
/*追加指定ここまで*/

/*btn-k（詳しくはこちら　ボタン）
---------------------------------------------------------------------------*/
.btn-k a {
	text-shadow: none;
	display: block;
	text-decoration: none;
	background: #000;		/*背景色。*/
	color:#fff;　　　　　　/*文字色。*/
 text-align: center;		/*テキストをセンタリング*/
	border: solid 3px #FFF;
	margin-top: 50px;
	margin-bottom:30px;
	font-size: 1.2em;		/*文字サイズ。*/
	padding: 0.5rem 3rem;	/*ボタン内の余白。上下、左右へ。*/
	border-radius: 100px;	/*角を丸くする*/
}
.btn-k a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
	background: #000);
　　/*背景色。*/
 color: var(--primary-color);				/*文字色。冒頭のprimary-colorを読み込みます。*/
	border: solid 3px var(--primary-color);
}
/*miryoku（３カラムボックス）
---------------------------------------------------------------------------*/
.miryoku .list * {
	margin: 0 10%;
	padding: 0;
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
	
	

	/*listブロック全体を囲むブロック*/
	.miryoku {
 display: grid;
 grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
 gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
 margin: 0 10%;
}
}/*追加指定ここまで*/
/*ボックス１個あたり*/
.miryoku .list {
	display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	padding: 0 2rem;	/*ボックス内の余白。２文字分。*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス１個あたり*/
	.miryoku .list {
 margin-bottom: 0;	/*下に空けるスペースをなくす*/
}
}/*追加指定ここまで*/
/*bg-black内のボックスへの追加設定*/
.miryoku .list.bg-black {
	background: #000;	/*背景色*/
	color: #fff;		/*文字色*/
}
/*ボックス内のfigure画像*/
.miryoku .list figure.icon {
	margin: 0;
	width: 100%;		/*画像サイズ*/
}



	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス内のfigure画像*/
	.miryoku .list figure.icon {
 width: 100%;		/*画像サイズ*/
 margin-top: -50px;	/*本来の場所より上にずらす*/
}
}/*追加指定ここまで*/
/*お取り扱い製品　
---------------------------------------------------------------------------*/

.ichiran {
	padding: 2rem 4rem;	/*余白。上下、左右へ。*/
	margin: 0;
}
.seihin-ichiran {
	width: 100%;
	border-top: solid 1px #ccc;
	margin-bottom: 100px;
}
.seihin-ichiran tr {
	border-bottom: solid 1px #ccc;
}
.seihin-ichiran th {
	padding: 10px;
	font-weight: bold;
	width: 20%;
	font-size: 1.5rem;
}
.seihin-ichiran td {
	padding: 10px;
	text-align: left;
}
.seihin-ichiran td span {
	display: inline-block;
	width:50%;
}
 @media screen and (max-width: 800px) {
 .ichiran {
 padding:　2rem 0;	/*余白。上下、左右へ。*/
 margin: 0;
}
 .seihin-ichiran th {
　　border-bottom: none;
 display: block;
 width: 100%;
 padding-bottom: 10px;
 font-size: 2rem;
}
 .seihin-ichiran td {
　　border-bottom: none;
 display: block;
 width: 100%;
 padding: 0 0 0 20px;
}
}
/*お知らせ　
---------------------------------------------------------------------------*/

.news {
	padding: 2rem 4rem;	/*余白。上下、左右へ。*/
	margin: var(--space-large);
}
.news .news-kiji {
	border-bottom: 1px dotted #FFF;
	padding: 2rem;	/*余白。上下、左右へ。*/
}
.news .news-kiji:first-child {
	border-top: 1px dotted #FFF;
}
.news .news-kiji dt {
	color: #FFF;
	width: 8em;	/*幅。8文字(em)分*/
}
	
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:900px) {
 .news {
 margin: 0 20% 0 20%;
}
 .news .news-kiji {
 display: flex;
 align-items: center;
}
 .news .news-kiji dt {
 width: 100px;
 padding: 5px;
}
 .news .news-kiji dd {
 flex: 1;
 padding: 0 50px;
}
}/*追加指定ここまで*/
/*緊急サポート
---------------------------------------------------------------------------*/

.kinkyu {
	　　position: relative;
　/*位置　親*/
}
.office-slideup {
	background-image: url("../images/top-yamau.png");	/*背景画像の読み込み*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 60vh;	/*高さ*/
	z-index: 1;     /*一番　下層に表示*/
}
.kinkyu-b {
	background: #000;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: #FFF;	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 2rem 4rem;	/*余白。上下、左右へ。*/
	border-radius: 30px;	/*角を丸くする*/
	text-align: center;		/*テキストをセンタリング*/
	margin: var(--space-large);
	z-index: 2;
}
.kinkyu-b .kinkyu-text h4 {
	padding: 0;
	font-size: 3rem;
	color: #FF4800;			/*文字色*/
	margin: 0;
}
.kinkyu-b .kinkyu-text p {
	display: block;
    font-size: var(--font-S);
	margin: 0;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:900px) {
 .kinkyu-b {
 margin: 0 20% -30px 20%;
 display: flex;
 gap: 2rem;	/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
}
 .kinkyu-b .kinkyu-text {
 width: 60%;	/*幅*/
}
}/*追加指定ここまで*/
/*山卯が選ばれる理由（３カラムボックス）
---------------------------------------------------------------------------*/


.riyu .list * {
	margin: 0;
	padding: 0;
}
.riyu-bg {
	background: url("../images/bg-riyu-s.png") bottom center no-repeat;	/*背景パターンの読み込み*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:600px) {
 .riyu {
 margin: var(--space-large);
}

	/*listブロック全体を囲むブロック*/
	.riyu {
 display: grid;
 grid-template-columns: repeat(2, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
 gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
}
}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:1000px) {


	/*listブロック全体を囲むブロック*/
	.riyu {
 display: grid;
 grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
 gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
}
}/*追加指定ここまで*/
/*ボックス１個あたり*/
.riyu .list {
	display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
　 height: 110vh;
	background: url("../images/top-riyu3.png") center center no-repeat;	/*背景パターンの読み込み*/
	background-size: auto 100%;
	color: #000;		/*文字色*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
	text-align: center;		/*テキストをセンタリング*/
}
/*ボックス内のh4見出し*/
.riyu .list h4 {
      font-size: var(--font-M);
	line-height: 1;	/*行間*/
	color: #FF4800;		/*文字色*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ボックス１個あたり*/
	.riyu .list {
 margin-bottom: 0;	/*下に空けるスペースをなくす*/
}
}/*追加指定ここまで*/
/*ナンバー（01〜03の飾り番号）*/
.riyu .list .num {
	font-size: 1.6rem;	/*文字サイズ*/
	line-height: 1;
	text-decoration: underline 5px #FF4800;
	margin-top:2rem;	/*下に１文字分のスペースを空ける*/
}
/*ボックス内のh4見出し*/
.riyu .list h4 {
      font-size: var(--font-M);
	line-height: 1.6;	/*行間*/
	margin-top: 1rem;	/*下に１文字分のスペースを空ける*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
}
/*ボックス内のp要素*/
.riyu .list p {
      font-size: var(--font-S);
	line-height: 1.4;	/*行間*/
	font-weight: normal;
	margin-bottom: 3rem;	/*下に１文字分のスペースを空ける*/
}
/*選ばれる理由　２ブロック
---------------------------------------------------------------------------*/
.list-riyu2 * {
	margin: 0;
	padding: 0;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-riyu2 {
 margin: var(--space-large);
}

	/*テキストブロック*/
	.list-riyu2 .text {
 flex: 1;
}
}/*追加指定ここまで*/
/*ブロック１個あたり*/
.list-riyu2 .list {
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem;
	margin-bottom: 0rem;
	position: relative;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック１個あたり*/
	.list-riyu2 .list {
 display: flex;
 gap: 2rem;	/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
}
}/*追加指定ここまで*/
/*画像ブロック*/
.list-riyu2 figure {
	width: 100%;	/*幅*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像の下マージンのリセット*/
	.list-riyu2 figure {
 width: 40%;	/*幅*/
 margin-bottom: 0;
}
}/*追加指定ここまで*/
/*h4見出し*/
.list-riyu2 h4 {
      font-size: var(--font-M);
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
 .list-riyu2 .text {
 margin-top: 2rem;	/*上に空けるスペース*/
}
 .list-riyu2 h4 {
 font-size: var(--font-M);
 line-height: 1.1;	/*行間*/
 margin-top: 2rem;	/*上に空けるスペース*/
}
}/*追加指定ここまで*/
.list-riyu2 p {
 font-size: var(--font-S);
	margin: 0;	/*下に空けるスペース*/
}
/*トップ　事務所のご案内（２カラムボックス）
---------------------------------------------------------------------------*/

.jigyousyo {
	color: #000;
	font-size: 1.4rem;		/*文字サイズ。140%に。*/
	padding: 0;
　　　　　	/*余白。上下、左右へ。*/
}
.j-list-2 .j-list * {
	margin: 0;
	padding: 0;
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
 .jigyousyo {
 margin: var(--space-large);
}

	/*listブロック全体を囲むブロック*/
	.j-list-2 {
 display: grid;
 grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
 gap: 2vw;	/*ブロックの間に空けるマージン的な指定*/
}
}/*追加指定ここまで*/
/*ボックス１個あたり*/
.j-list-2 .j-list {
	display: grid;
	margin-bottom: 1rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	color: #000;		/*文字色*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
}
/*ボックス内のp要素*/
.j-list-2 .j-list p {
	font-size: 1.2rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: normal;
}
/*ボックス内のfigure画像*/
	.j-list-2 .j-list figure {
	width: 100%;		/*画像サイズ*/
	margin-bottom: 20px;	/*下に空けるスペース*/
}
/*画像ブロック共通*/
.j-list .image img {
	box-shadow: 10px 10px #5D0053;	/*ボックスの影。右へ、下へ、ぼかし幅。*/
	width: 100vw;		/*画像サイズ*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス１個あたり*/
	.j-list-2 .j-list {
 margin-bottom: 0;	/*下に空けるスペースをなくす*/
}
}
/*追加指定ここまで*/



/*住所*/

.j-add {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 10rem;	/*上下、左右へのボックス内の余白*/
}
/*事業所(dt)、住所(dd)共通設定*/
.j-add dt, .j-add dd {
	padding: 5px 0;		/*上下、左右へのボックス内の余白*/
}
/*事業所(dt)設定*/
.j-add dt {
	width: 100%;	/*幅*/
	font-size: 2rem;	/*文字*/
}
/*記事(dd)設定*/
.j-add dd {
	width: 100%;	/*は上の「.j-add dt」のwidthの値です*/
}


	/*画面幅　以下サイズ以上の追加指定*/
	@media screen and (min-width:1200px) {

/*事業所(dt)設定*/
.j-add dt {
 width: 10em;	/*幅。12文字(em)分*/
 font-size: 1.2rem;	/*文字サイズ*/
}

/*記事(dd)設定*/
.j-add dd {
 width: calc(100% - 10em);	/*「12em」は上の「.new dt」のwidthの値です*/
}
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
content: "";
display: block;
clear: both;
}
.color-check, .color-check a {
	color: #ff0000 !important;
}
.l {
	text-align: left !important;
}
.c {
	text-align: center !important;
}
.r {
	text-align: right !important;
}
.ws {
	width: 95%;
	display: block;
}
.wl {
	width: 95%;
	display: block;
}
.mb0 {
	margin-bottom: 0px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb-space-large {
	margin-bottom: var(--space-large) !important;
}
.look {
	line-height: 1.5 !important;
	display: inline-block;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	margin: 5px 0;
	word-break: break-all;
}
.small {
	font-size: 0.75em;
}
.large {
	font-size: 2em;
	letter-spacing: 0.1em;
}
.pc {
	display: none;
}
.dn {
	display: none !important;
}
.block {
	display: block !important;
}
.inline-block {
	display: inline-block !important;
}
.relative {
	position: relative;
}
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
	.marker-y-L {background: linear-gradient(transparent 65%, #FFCC00 65%);
	font-size:clamp(4rem, 4.5vw, 7rem); 
	}

.marker-p {background: linear-gradient(transparent 65%, #FF9970 65%);
font-size: var(--font-LL);
}





	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
 .ws {
width: 48%;
display: inline;
}
 .sh {
display: none;
}
 .pc {
display: block;
}

.marker-p {background: linear-gradient(transparent 65%, #FF9970 65%);
font-size: var(--font-L);

	.marker-y-L {background: linear-gradient(transparent 65%, #FFCC00 65%);
	font-size:clamp(2rem, 4.5vw, 7rem); 
	}

}/*追加指定ここまで*/