@charset "utf-8";
/* CSS Document */

/* ================================================================================================

　全ページ共通設定

=================================================================================================== */

* { margin: 0px;padding: 0px;}/*全ての要素の空白をなくす*/
li { list-style-type: none;}/*リストの・を消す*/
img{vertical-align: bottom;}/*画像の下にできた余白を消す*/
body {width:100%;} 
*, *::before, *::after {box-sizing: border-box;}/*paddingにより枠が広がることを防止*/
/*--------------------------------------------------------------------------------------------------*/

/* リンク設定 ------- */
a {
text-decoration:none!important;/*リンクの下の下線を消す*/
color: inherit!important;/*リンクの色を変更しない*/
}
a:visited{color: inherit;/*リンクの色を変更しない*/}
a:active{color: inherit;/*リンクの色を変更しない*/}

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

/* ▼ アイテム間の余白 ------- */
.contents_margin0{margin-bottom: 15px;}
.contents_margin1{margin-bottom: 30px;}
.contents_margin2{margin-bottom: 50px;}
.contents_margin3{margin-bottom: 100px;}
.contents_margin4{margin-bottom: 150px;}

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

/* ▼ 短いページでもフッターが最下部に固定 ------- */
html, body {height: 100%;}
body {margin: 0;}

#wrap {min-height: 100%;display: flex;flex-direction: column;}
#wrap > main {flex: 1;}/* main が余白を全部使う */
#footer {flex-shrink: 0;}/* フッターは縮まない */

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




/* ===========================================================================================================================================================


　ヘッダー（外部ファイル:link_header.html）


=========================================================================================================================================================== */

/* ▼ PCヘッダー：会社情報 -------- */
.header_back{
  width: 100%;
  background: #3F3B3A;
  }
.header_contents1 {
  width: 50%;
  display:flex;
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*上下中央*/
  margin: auto;
  padding: 10px 0px 15px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
.header_left{
  width: 32%;
  display:flex;
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*上下中央*/
  flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
  }
/* ▼ ロゴ -------- */
.header_left_logo img{height: 100%;}

/* ▼ 会社名 -------- */
.header_left_company{
  color: #F8B73D;
  font-size: 15px;
  font-weight: bold;
  margin-left: 10px;
  }
/* ▼ インボイス登録番号 -------- */
.header_left_invoice{
  width: 100%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  background: #898989;
  padding: 3px 5px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  line-height:100%;
  border-radius: 5px;/*角丸*/
  text-align: center;
  }
/* ▼ TEL/アイコン -------- */
.header_right{
  width: 50%;
  display:flex;
  justify-content: right;/*右寄せ*/
  align-items: center;/*上下中央*/
  }
.header_right_tel img{height: 100%;padding-right: 10px;}

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

/* ▼ PCヘッダー：ナビゲーション -------- */
.header_contents2{width: 50%;margin: auto;}
.header_nav_container{
  display:flex;
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*上下中央*/
  padding: 20px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
/* ▼ ナビゲーション：ボタン -- */
.header_nav_item1{
  width: 15%;
  color: #3F3B3A;
  font-size: 18px;
  font-weight: bold;
  border: solid 1px #EFEFF0;
  text-align: center;
  padding: 5px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
.header_nav_item1:hover{background: #EFEFF0;}
.header_nav_item1:active{background: #3F3B3A;color: #FFFFF;}
.header_nav_item2{
  width: 10%;
  display:flex;
  justify-content: right;/*右寄せ*/
  align-items: center;/*上下中央*/
  margin-left: 20px;
  }
.header_nav_item2 img{width: 100%;}



/* ******************************************************************************************************
レスポンシブ設定 ↓
****************************************************************************************************** */

/* ▼ スマホ：560px以下の幅の場合に適応される////////////////////////////////////////////////////////////*/
@media screen and (max-width:560px){

/* ▼ PCヘッダー：会社情報 -------- */
.header_contents1 {display: none;}
.header_contents2 {display: none;}
  
/*--------------------------------------------------------------------------------------------------*/

/* ▼ スマホヘッダー：表示されている部分 -------- */
.header_contents_sp{
  width: 90%;
  background: #3F3B3A;
  display:flex;
  flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*上下中央*/
  margin: auto;
  padding: 15px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
/* ▼ TEL/MAILアイコン */
.header_sp_tel{height: 40px; }
.header_sp_tel img{height: 100%;}
.header_sp_btn_mail{height: 40px;}
.header_sp_btn_mail img{height: 100%;}
/* ▼ インボイス登録番号 */
.header_sp_invoice{
  width: 100%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  background: #898989;
  text-align: center;
  padding: 2px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ▼ タブレット：561pxから1280pxまでの幅の場合に適応される///////////////////////////////////////////////////////*/
@media screen and (min-width:561px) and (max-width:1280px){

/* ▼ PCヘッダー：会社情報 -------- */
.header_contents1 {display: none;}
.header_contents2 {display: none;}
  
/*--------------------------------------------------------------------------------------------------*/

/* ▼ スマホヘッダー：表示されている部分 -------- */
.header_contents_sp{
  width: 90%;
  background: #3F3B3A;
  display:flex;
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*上下中央*/
  margin: auto;
  padding: 15px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
/* ▼ TEL/MAILアイコン */
.header_right_tel_sp{height: 40px; }
.header_right_tel_sp img{height: 100%;}
.header_right_btn_mail_sp{height: 40px;}
.header_right_btn_mail_sp img{height: 100%;}
/* ▼ インボイス登録番号 */
.header_sp_invoice{
  width: 100%;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  background: #898989;
  text-align: center;
  padding: 2px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ▼ パソコン：1280pxから1600pxまでの幅の場合に適応される///////////////////////////////////////////////////////*/
@media screen and (min-width:1281px) and (max-width:1600px){

.header_contents1 {width: 80%;}
.header_left{width: 30%;}
/* ▼ TEL/アイコン -------- */
.header_right{
  width: 50%;
  display:flex;
  justify-content: right;/*右寄せ*/
  align-items: center;/*上下中央*/
  }
.header_right_tel img{height: 100%;padding-right: 10px;}

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

/* ▼ PCヘッダー：ナビゲーション -------- */
.header_contents2{width: 80%;}
.header_nav_container{
  display:flex;
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*上下中央*/
  padding: 20px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
/* ▼ ナビゲーション：ボタン -- */
.header_nav_item1{
  width: 15%;
  color: #3F3B3A;
  font-size: 18px;
  font-weight: bold;
  border: solid 1px #EFEFF0;
  text-align: center;
  padding: 5px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
.header_nav_item2{
  width: 10%;
  display:flex;
  justify-content: right;/*右寄せ*/
  align-items: center;/*上下中央*/
  margin-left: 20px;
  }
.header_nav_item2 img{width: 100%;}

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

/* ▼ スマホヘッダー -------- */
.header_contents_sp{display: none;}
.header_sp_invoice{display: none;}

}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ▼ パソコン：1601pxの幅の場合に適応される////////////////////////////////////////////////////////////////*/
@media screen and (min-width:1601px) {

/* ▼ スマホヘッダー -------- */
.header_contents_sp{display: none;}
.header_sp_invoice{display: none;}

}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/









/* ===========================================================================================================================================================


　フッター（外部ファイル:link_footer.html）


=========================================================================================================================================================== */

/* ▼ フッター：会社情報・ナビ -------- */
.footer_contents1{
  width: 100%;
  background: #C9CACB;
  padding: 50px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
.footer_container{
  width: 55%;
  margin: auto;
  display:flex;
  flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*上下中央*/
  }
/* ▼ フッターコンテンツ：ロゴ -- */
.footer_item_logo{width: 15%;margin-right: 100px;}
.footer_item_logo img{width: 100%;}

/* ▼ フッターコンテンツ：ナビ -- */
.footer_item_nav{
  width: 18%;
  color: #3F3B3A;
  font-size: 15px;
  font-weight: bold;
  line-height: 250%;
  }

/* ▼ フッターコンテンツ：SUS -- */
.footer_item_sns{
  width: 15%;
  display:flex;
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
  }
.footer_item_sns img{width: 100%;} 

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

/* ▼ フッター：コピーライト -------- */
.footer_contents2{
  width: 100%;
  background: #EFEFF0;
  padding: 10px 0px;
  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  }
.footer_contents2 p{
  font-size: 14px;
  color: #898989;
  text-align: center;
  }



/* ******************************************************************************************************
レスポンシブ設定 ↓
****************************************************************************************************** */

/* ▼ スマホ：560px以下の幅の場合に適応される////////////////////////////////////////////////////////////*/
@media screen and (max-width:560px){
  
/* ▼ フッター：会社情報・ナビ -------- */
.footer_contents1{padding: 25px;}
.footer_container{width: 90%;}
/* ▼ フッターコンテンツ：ロゴ -- */
.footer_item_logo{width: 100%;margin:0px auto;text-align: center;}
.footer_item_logo img{width: 50%;}

/* ▼ フッターコンテンツ：ナビ -- */
.footer_item_nav{
  width: 30%;
  font-size: 12px;
  line-height: 200%;
  }

/* ▼ フッターコンテンツ：SUS -- */
.footer_item_sns{
  width: 100%;
  justify-content: center; /* 中央寄せ */
  margin: 50px auto;
  }
.footer_item_sns img{margin-left: 10px;} 

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

/* ▼ フッター：コピーライト -------- */
.footer_contents2{padding: 5px 0px;}
.footer_contents2 p{font-size: 12px;}
  
}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/



/* ▼ タブレット：561pxから1280pxまでの幅の場合に適応される///////////////////////////////////////////////////////*/
@media screen and (min-width:561px) and (max-width:1280px){
  
/* ▼ フッター：会社情報・ナビ -------- */
.footer_container{width: 90%;}
  
/* ▼ フッターコンテンツ：ロゴ -- */
.footer_item_logo{width: 20%;margin-right: 20px;}
  
/* ▼ フッターコンテンツ：SUS -- */
.footer_item_nav{width: 22%;}
  
/* ▼ フッターコンテンツ：SUS -- */
.footer_item_sns{
  width: 100%;
  justify-content: center; /* 中央寄せ */
  margin: 50px auto;
  }
.footer_item_sns img{margin-left: 10px;} 

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

/* ▼ フッター：コピーライト -------- */
.footer_contents2{padding: 5px 0px;}
.footer_contents2 p{font-size: 12px;}

}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/









/* ===========================================================================================================================================================


　パンくずリスト


=========================================================================================================================================================== */

/* ▼ パンくずリスト -------- */
.breadcrumb {
  width: 50%;
  margin: 5px auto 0px;
  display: flex;
  gap: 0 20px;
  list-style: none;
  padding: 0;
  font-size: .8em;
  font-weight: bold;
  }
.breadcrumb li {
  display: flex;
  align-items: center;
  }
.breadcrumb li:first-child::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 4px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23f8b73d%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  content: '';
  }
.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  width: .3em;
  height: .6em;
  margin-left: 12px;
  background-color: #F8B73D;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: '';
  }
.breadcrumb a {
  color: #3F3B3A;
  text-decoration: none;
  }
.breadcrumb a:hover{color: #F8B73D;}



/* ******************************************************************************************************
レスポンシブ設定 ↓
****************************************************************************************************** */

/* ▼ スマホ：560px以下の幅の場合に適応される////////////////////////////////////////////////////////////*/
@media screen and (max-width:560px){
  
.breadcrumb {width: 90%;font-size: 12px;}

}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ▼ タブレット：561pxから1280pxまでの幅の場合に適応される///////////////////////////////////////////////////////*/
@media screen and (min-width:561px) and (max-width:1280px){
  
.breadcrumb {width: 90%;font-size: 12px;}
  
}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ▼ タブレット：561pxから1280pxまでの幅の場合に適応される///////////////////////////////////////////////////////*/
@media screen and (min-width:1280px) and (max-width:1600px){
  
.breadcrumb {width: 90%;}
  
}/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/