/*================================================
 *  inside共通
 ================================================*/
 
 /* 下層ページタイトル ------------------------*/
/* ------------------------------------- */

.inside_title_wrap{
background-image: -webkit-linear-gradient(rgba(000,000,000,0.4) 0%,rgba(000,000,000,0.4) 0%), 
url(../img/common_img/inside_title_bg.jpg);
background-position: center center;
background-size: cover;
padding-top: 50px;
padding-bottom: 50px;
position: relative;
text-align: center;
color: #ffffff;
}

.inside_title{
  font-size: 175%;
  font-weight: 500;
  color: #ffffff;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8));
}

.inside_title_sub{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
font-size: 88%;
line-height: 1.0;
font-family: var(--obun);
color: #ffffff;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.8));
}
.inside_title_sub::before,
.inside_title_sub::after{
  content: "";
  display: inline-block;
  background-color: #ffffff;
  width: 50px;
  height: 1px;
  
}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.inside_title {
font-size: 163%;
}

}
/* -------------end------------- */


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.inside_title_wrap{
padding-top: 30px;
padding-bottom: 30px;
}


}
/* -------------end------------- */

/* .box　--------------------*/
/* ------------------------------------- */

.box{margin-bottom: 50px;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.box{margin-bottom: 30px;}
}
/* -------------end------------- */




/* .inside_headline　--------------------*/
/* ------------------------------------- */

.inside_headline_wrap{
text-align: center;
position: relative;
padding-bottom: 35px;/* 縦線の長さと同じか長く　長いと文字の下に余白 */
margin-bottom: 20px;
}

.inside_headline{
color: var(--blue);
  font-size: 150%;
  text-align: center;
  font-weight: 500;
}

.inside_headline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%) ;
	width: 2px;
	height: 30px;/* 縦線の長さ */
	background-color:#cccccc;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.inside_headline_wrap{
padding-bottom: 30px;
}

.inside_headline{font-size: 125%;}

.inside_headline_wrap::after {
height: 20px;
}

}
/* -------------end------------- */

/* .inside_midashi ----------------------*/
/* ------------------------------------- */
.inside_midashi{
color: var(--navy);
font-size: 118%;
margin-bottom: 20px;
background-color:var(--palegray);
padding: 7px 7px 7px 15px;
border-left: 5px solid var(--navy);
}

.inside_midashi_w{
background-color:#ffffff;
}



/* .honbun ------------------------------*/
/* ------------------------------------- */
.honbun{margin-bottom: 10px;}
  
  
/* .common_flex_box ---------------------*/
/* ------------------------------------- */
.common_flex_box{display: flex;
  justify-content: space-between;}
  
.common_flex_box > li{width: 48%;}

.common_flex_box_64 > li:first-child{width: 58%;}
.common_flex_box_64 > li:last-child{width: 38%;}

.common_flex_box_73 > li:first-child{width: 68%;}
.common_flex_box_73 > li:last-child{width: 28%;}

.common_flex_box_82 > li:first-child{width: 78%;}
.common_flex_box_82 > li:last-child{width: 18%;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.common_flex_box{flex-wrap: wrap;}
  
.common_flex_box > li{width: 100%;}
.common_flex_box > li:first-child{margin-bottom: 20px;}

.common_flex_box_64 > li:first-child{width: 100%;}
.common_flex_box_64 > li:last-child{width: 100%;}

.common_flex_box_73 > li:first-child{width: 100%;}
.common_flex_box_73 > li:last-child{width: 100%;}

.common_flex_box_82 > li:first-child{width: 100%;}
.common_flex_box_82 > li:last-child{width: 100%;}

}
/* -------------end------------- */

.img_flex_box{display: flex;
  justify-content: space-between;}
  
.img_flex_box > li{width: 25%;}

/* .common_dl  --------------------------*/
/* ------------------------------------- */

.common_dl dt {
font-weight: 700;
color: var(--blue);
margin-bottom: 5px;
clear: left;
	float: left;
	width: 130px;}

.common_dl dd {
	padding-left: 145px;
    margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
}

.common_dl dd:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom-style: none;}
    
/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.common_dl dt {
clear: none;
float: none;
width: 100%;}

.common_dl dd {
padding-left: 0px;
}
}
/* -------------end------------- */    


/* 下層ページのコンテンツ　--------------------*/
/* ------------------------------------- */
.inside_outside_g {
padding-top: 60px;
padding-bottom: 60px;
background-color: var(--palegray);}

.inside_outside_w {
background-color: #ffffff;
background-image: url("https://www.transparenttextures.com/patterns/groovepaper.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){

.inside_outside_g{
padding-top: 40px;
padding-bottom: 40px;}
    
}
/* -------------end------------- */

.link_list li {
margin-bottom: 10px;
}

.link_list li a{
color: var(--blue);
}

.link_list li a::after {
  font-family: "Font Awesome 5 Free"; /* FAのフォント名 */
  font-weight: 900; /* Solid の場合は 900 */
  content: "\f105"; /* 右向き矢印 */
  margin-left: 5px; /* 矢印とテキストの間隔 */
}


 /*================================================
 *   about
 ================================================*/
.guidelines{color: var(--orange);
font-size: 113%;
font-weight: 500;}

.sdgs_flex{display: flex;
justify-content: space-between;}

.sdgs_flex li{width: 18%;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.sdgs_flex{flex-wrap: wrap;}
.sdgs_flex::after{
  content:"";
  display: block;
  width:31%;
}

.sdgs_flex li{width: 31%;}
.sdgs_flex li:nth-child(-n+3){margin-bottom: 10px;}

}
/* -------------end------------- */

/* .guidelines_list ---------------------*/
/* ------------------------------------- */

.guidelines_list{margin-bottom: 30px;}

.guidelines_list li{
margin-bottom: 5px;
    padding-left: 1.5em; /* ← アイコン分のスペースを確保（ここ重要） */
    padding-bottom: 5px;
    border-bottom: 1px dashed #CCC;
    position: relative;}
    
.guidelines_list li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f111"; /* fa-circle のユニコード */
    font-weight: 900; /* fas（solid）は 900 */
    position: absolute;
    left: 0;
    top: 40%;
    transform: translateY(-50%);
    color: var(--orange);
    }
    
/* .effort_dl ---------------------------*/
/* ------------------------------------- */
    
.effort_dl{
margin-bottom: 30px;}
    
.effort_dl dt{
margin-bottom: 5px;}
    
.effort_dl dt > span{background-color: var(--blue);
color: #ffffff;
padding: 3px 10px 3px 10px;
}

.effort_dl dd{
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px dashed #CCC;}
    
.effort_dl dd:last-child{
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom: none;}

/* .about_iso ---------------------------*/
/* ------------------------------------- */
.about_iso {background-color: var(--palegray);
padding: 30px;}

.about_iso_title{color: var(--navy);
font-size: 113%;
font-weight: 500;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.about_iso {
padding: 20px;}

}
/* -------------end------------- */

 /*================================================
 *   事業内容
 ================================================*/
/* ← これが上下中央揃え！ */
.service_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    position: relative;
    max-width: 1600px;
    margin-bottom: 50px;
}

.service_text_box {
    width: 60%;
    background: rgba(0, 46, 93, 0.8);
    /*background-color: var(--palegray);*/
    color: #fff;
    padding: 2em;
    margin-right: -10%; 
    box-sizing: border-box;
    z-index: 2; 
    
}

.service_title {

    font-size: 125%;
    font-weight: 500;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;

}

/*  20px下にずらす -10%;がここがポイント！画像側に食い込ませる　*/
/*.service_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.service_text_box {
    width: 60%;
    background: rgba(45, 86, 122, 0.8);
    color: #fff;
    padding: 2em;
    margin-right: -10%; 
    transform: translateY(20px); 
    box-sizing: border-box;
    z-index: 2; 
}*/
/*  下にずらす */

.service_img {
    width: 55%;
    position: relative;
    z-index: 1;
}

/* 写真が左、テキストが右にする */
.service_wrapper_r {
    flex-direction: row-reverse;
}

.service_wrapper_r .service_text_box {
    margin-right: 0;      /* 逆なのでリセット */
    margin-left: -10%;     /* 左側に重ねる */
}


/* 小さい画面用の設定-------------- */
@media (max-width: 767px) {
.service_wrapper {
        flex-direction: column;
    }

.service_text_box {
        width: 100%;
        margin-right: 0;
        transform: none;
    }

.service_img {
        width: 100%;
    } 

.service_wrapper_r .service_text_box {
        width: 100%;
        margin-left: 0;
    }
}
/* -------------end------------- */



 /*================================================
 *   保有車両
 ================================================*/
 
 .truk_attension{text-align: right;
 font-size: 88%;
 margin-bottom: 5px;}
 
 
.truk_flex{display: flex;
justify-content: space-between;
flex-wrap: wrap;}

.truk_flex > li{width: 31%;
margin-bottom: 30px;}

.truk_flex > li:last-child{
margin-bottom: 0px;}

.truk_flex > li img{margin-bottom: 5px;}

.truk_name{font-size: 113%;
font-weight: 500;
color: var(--navy);
margin-bottom: 5px;}

.truk_list > li{font-size: 88%;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px dashed #cccccc;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){


.truk_flex > li{width: 100%;
margin-bottom: 30px;}






}
/* -------------end------------- */


 /*================================================
 *   搬入ガイド
 ================================================*/
 
 .guide_list{margin-bottom: 20px;}
 
  .guide_list > li{margin-bottom: 5px;
  padding-bottom: 5px;
border-bottom: 1px dashed #cccccc;
font-weight: 500;
font-size: 113%;
color: var(--orange);}
 
.guide_flow {
	display: flex;
align-items: center;
}

.guide_flow dt {
	background-color: var(--navy);
    color: #ffffff;
    padding: 10px 20px;
    width: 30%;
    display: flex;
align-self: stretch;
align-items: center;
}

 .guide_flow dd {
padding: 10px 20px;
 width: 70%;
 background-color:  #ffffff;

}

/* 矢印デザイン */
.arrow {
    text-align: center;
    margin: 3px auto; /* 上下15pxで合計30pxの余白 */
    font-size: 1.5em;
    color: #004499; /* お好みで調整 */
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
 
.guide_flow {
flex-wrap: wrap;
}

.guide_flow dt {
 width: 100%;
}

 .guide_flow dd {
 width: 100%;
 }

}
/* -------------end------------- */







 /*================================================
 *   許可品目
 ================================================*/


.table_box{
  overflow-x: auto;
  width:100%;
  -webkit-overflow-scrolling: touch;
}
.tb_waste {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.tb_waste th, .tb_waste td {
  vertical-align: middle;
  padding: 10px;
  border: 1px solid #ccc;
  color: #000;
  font-size: 15px;
  text-align: center;
  white-space: nowrap;
}
.tb_waste th {
  background: var(--palegray);
  width: 30%;
  text-align: left;
}
.tb_waste td {
  background: #fff;
  width: 14%;
  text-align: center;
}

.tb_waste_2 td {
  width: 70%;
}



.tb_waste td .maru {
  font-size: 150%;
  font-weight: 700;
  color: var(--blue);
}





.sticky {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-left: none;
  border-right: none;
  z-index: 1; /* 追加 */
}

.sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background-color: rgba(204, 236, 254, 0.4);
  z-index: -1; /* このまま */
}


.scroll-hint-icon-wrap {
 z-index: 99999!important;
	margin-bottom: 30px;
}



 /*================================================
 *   マニフェスト
 ================================================*/

.manifesto_img{width: 68%;
margin-left: auto;
margin-right: auto;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.manifesto_img{width: 100%;
}
}
/* -------------end------------- */


 /*================================================
 *   会社概要
 ================================================*/
.company_wrap,
.company_chart{width: 80%;
margin-left: auto;
margin-right: auto;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.company_wrap,
.company_chart{width: 100%;}
}
/* -------------end------------- */


.permit_num_flex_box{display: flex;
justify-content: space-between;
}

.permit_num_flex_box > li{flex: 1; /* 均等幅 */
border-right: 1px solid #cccccc;
padding-right: 20px;
padding-left: 20px;
box-sizing: border-box;}

.permit_num_flex_box > li:last-child{
border-right: none;
}


.permit_title{margin-bottom: 10px;
background-color: var(--palegray);
padding: 5px;}

.permit_dl dt {
clear: left;
	float: left;
	width: 7em;
    font-size: 88%;
    padding-left: 5px;}

.permit_dl dd {
	padding-left: 8em;
    margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
    font-size: 88%;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.permit_num_flex_box{flex-wrap: wrap;
}

.permit_num_flex_box > li{
flex: none; /* flex: 1; を無効にする */
width: 100%;
border-right: none;
padding-right: 0px;
padding-left: 0px;
}

.permit_num_flex_box > li{
margin-bottom: 20px;
}

.permit_num_flex_box > li:last-child{
margin-bottom: 0px;
}
}
/* -------------end------------- */
 
 /*================================================
 *   Q&A
 ================================================*/

/* Chrome、Safari以外 */
summary {
  display: block;}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

.qa-case {
border-bottom: 1px solid #cccccc;
}

.qa-case summary {
display: flex;
align-items: center;
position: relative;
padding: 1em 1.5em 1em 2.0em;
cursor: pointer;
justify-content: space-between;
}

.qa-case summary::before,
.qa-case p::before {
    position: absolute;
    left: 0.5em;
    font-weight: 600;
}

.qa-case summary::before {
color: var(--blue);
content: "Q";
}

.qa-case summary::after {
    position: absolute;
    right: 1em; /* 右端に固定 */
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-bottom: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    content: '';
    transition: transform .5s;
}

.qa-case[open] summary::after {
    transform: rotate(225deg);
}

.qa-case p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding-top: .3em;
    padding-left:  2.0em;
    padding-bottom: 1.5em;
    color: var(--orange);
    transition: transform .5s, opacity .5s;
}

.qa-case[open] p {
    transform: none;
    opacity: 1;
    
}

.qa-case p::before {
    color: var(--orange);
    content: "A";
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){


.qa-case {
    max-width: 100%;
}
}
/* -------------end------------- */



 /*================================================
 *  プライバシー
 ================================================*/
 
.ordinary_dl dt {
font-weight: 700;
color: var(--blue);
margin-bottom: 5px;}


.ordinary_dl dd {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
}

.ordinary_dl dd:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom-style: none;
	
}

.ordinary_ol,
.ordinary_ol2, 
.ordinary_ol3 {
counter-reset:item; /* 数字のカウントをリセットする */
padding-left: 1em;}


.ordinary_ol > ol,
.ordinary_ol2 > ol,
.ordinary_ol3 > ol{
  padding-left: 2em;
}
.ordinary_ol > li,
.ordinary_ol2 > li,
.ordinary_ol3 > li{
  text-indent: -1.3em;
  padding-left: 1.3em;
}

.ordinary_ol > li:before,
.ordinary_ol2 > li:before,
.ordinary_ol3 > li:before{
/* カウンタ（数字になる部分） */
counter-increment: item; /* 任意の名前を付けて！ */
content: counter(item); /* 名前を付けたカウンターを呼び出し */
/* 色を変えたり、背景画像を敷いたり！自由自在！ */
	  counter-increment: item;/* 任意の名前を付ける（もちろん英語で） */
  content: counter(item)'.';/* 名前を付けたカウンターをcontentで発動！ */
  /* 以下は自由に装飾... */
  padding-right: .5em;
}



.pp_box_wrap {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
}

.pp_box {
  text-align: left; /* テキストは左揃え */
}

 /*================================================
 *  ペットボトルキャップ
 ================================================*/
 
 .pet_img_flex{display: flex;
 justify-content: space-between;}
 
.pet_img_flex li{width: 50%;}
 
 
.tb_vaccine  {
	border-spacing: 0;
	border-collapse:collapse;
	width: 100%;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
    background-color: #ffffff;}

.tb_vaccine th {
	vertical-align: middle;
	padding-bottom: 5px;
	padding-top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-left: 5px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
	background-color: #ebf6fd;
}

.tb_vaccine td {
	vertical-align: middle;
	padding-bottom: 5px;
	padding-top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-left: 5px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
    text-align: center;
}

/************************************
応募フォーム
*************************************/
.birth_flex{display: flex;
justify-content: space-between;
align-items: center;}

.birth_flex li:nth-child(even){width: 20%;}
.birth_flex li:nth-child(odd){width: 9%;
margin-left: 0.2em;
box-sizing: border-box;}

.birth_flex li:first-child{width: 12%;
min-width: 2em;}


/************************************
送信完了
*************************************/

.thanks_img{width:30%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.thanks_img{width: 50%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}
	}
/* -------------end------------- */


/*================================================
 *  募集要項詳細
 ================================================*/



/* yoko_box-------------- */
.yoko_dl dt{font-size: 113%;
    font-weight: 500;
    color: var(--blue);
    margin-bottom: 5px;
}

.yoko_dl dd{
    margin-bottom: 25px;
}

.yoko_dl dd:last-child{
    margin-bottom: 0px;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){

.yoko_dl dt{font-size: 100%;}

.yoko_dl dd{
    margin-bottom: 10px;
}
}
/* -------------end------------- */


/* tb_yoko-------------- */
.tb_yoko
{
    border-spacing: 0;
    width: 100%;
    border-collapse: separate;
    background-color: #ffffff;
}

.tb_yoko th {
    vertical-align: middle;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px dashed #CCC;
    background-color: #eee;
    color: var(--navy);
    width: 11em;
    padding-left: 30px;
    text-align: left;}

.tb_yoko td {
    vertical-align: middle;
padding-bottom: 10px;
	padding-top: 10px;
    border-bottom: 1px dashed #CCC;
	padding-left: 1em;
    padding-right: 1em;
padding-right: 30px;}



/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.tb_yoko th {
	vertical-align: middle;
	padding-bottom: 3px;
	padding-top: 3px;
	 border-bottom: 1px dashed #CCC;
background-color: #eee;
	color: var(--navy);
	width: 6em;
    padding-left: .5em;
    padding-right: .5em;
	box-sizing: border-box;}


.tb_yoko td {
    vertical-align: middle;
	padding-bottom: 3px;
	padding-top: 3px;
    border-bottom: 1px dashed #CCC;
	padding-left: .5em;
    padding-right: .5em;}
}
/* -------------end------------- */


/* 要項ページ下応募ボタン-------------- */

.bt_job_entry {
  width: 30%;
  background-color: var(--orange);
  border-radius: 3px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
    font-size: 118%;
}

.bt_job_entry a {
  color: #ffffff;
  padding: 10px 20px 10px 60px; /* 左側にアイコンのスペース確保 */
  display: block;
}

/* 共通のアイコンスタイル */
.bt_job_entry a::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid アイコンを表示するため */
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #fff;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.bt_job_entry {
  width: 100%;
}
}
/* -------------end------------- */




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

   サイトマップ

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

.sitemap a {
color: var(--text-color);
}


.sitemap ul li ul {
  margin-top: .5em;
  margin-bottom: .75em;
  margin-left: 48px;
}
 
.sitemap ul li ul li {
  margin-bottom: .25em;
  position: relative;
}
 
.sitemap ul li ul li::before {
  content: "";
  position: absolute;
  top: -0.5em;
  left: -16px;
  width: 10px;
  height: calc(100% + .75em);
  border-left: 1px solid #000000;
}
 
.sitemap ul li ul li:last-child::before {
  height: calc(1em + .25em);
}
 
.sitemap ul li ul li::after {
  content: "";
  position: absolute;
  top: .75em;
  left: -16px;
  width: 10px;
  border-bottom: 1px solid #000000;
}