/* *********************************
 センター紹介 
********************************* */
/* table関連 */
.table_box_break {
  width: 100%;
}


table#access {
width: 100%;
margin: 0px 0 60px 0;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
border-top: 1px #D9D9D9 solid;
}
table#access th {
font-family: 'Roboto';
font-weight: normal;
vertical-align: middle;
text-align: center;
padding: 12px 20px 12px 20px;
white-space: nowrap; 
border-bottom: 1px #D9D9D9 solid;
background-color: #F8F8F8;
width:200px;
height: 53px;
}
table#access td {
text-align: left;
padding: 7px 10px 7px 10px;
white-space: normal;
vertical-align: middle;
border-bottom: 1px #D9D9D9 solid;
}
table#access td a{ color: #333; }
table#access td a:hover{
color: #333;
text-decoration: underline;
}

@media screen and (max-width: 640px) {
  table#access th {
  font-family: 'Roboto';
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
  padding: 8px 12px 8px 12px;
  white-space: nowrap; 
  border-bottom: 1px #D9D9D9 solid;
  background-color: #F8F8F8;
  width:100px;
  }
 
}





table#route {
width: 100%;
margin: 0px 0 45px 0;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
border-top: 1px #999 solid;
}
table#route th {
font-family: 'Roboto';
font-weight: normal;
vertical-align: middle;
text-align: center;
padding: 12px 20px 12px 20px;
white-space: nowrap; 
border-bottom: 1px #999 solid;
background-color: #F8F8F8;
width:50%;
}
table#route td {
text-align: left;
padding: 7px 10px 7px 10px;
white-space: normal;
vertical-align: middle;
border-bottom: 1px #999 solid;
width:50%;
}
table#route td a{ color: #333; }
table#route td a:hover{
color: #333;
text-decoration: underline;
}

/* 横山追記 */
.rute-box{
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.rute-box-inner{
width: 47.5%;
}
.rute-box-inner-wrap{
margin: 0 0 40px 0;
padding: 0 0 40px 0;
border-bottom: 1px solid #D9D9D9;
}
.rute-box-inner-wrap-end{
margin: 0;
padding: 0 0 40px 0;
border-bottom: 1px solid #D9D9D9;
}
h5.rute-box-inner-maptitle{
background-color: #F8F8F8;
border: 1px solid #D9D9D9;
border-bottom: none;
padding: 8px 20px 6px 20px;
border-radius: 10px 10px 0 0;
font-size: 18px;
line-height: 1.8;
margin: 0;
}
.rute-box-inner-mapbox{
background-color: #fff;
border: 1px solid #D9D9D9;
border-top: none;
padding: 0;
border-radius: 0 0 10px 10px;
margin: 0 0 40px 0;
}

h3.midashi-24px{
color: #0292DD;
font-size: 24px;
line-height:1.8;
font-weight: 400;
margin: 0 0 20px 0;
}
p.honbun-16px-title1{
color: #E13D97;
font-size: 16px;
line-height:1.8;
font-weight: 400;
margin: 0 0 12px 0;
}
p.honbun-16px-title2{
color: #F2853B;
font-size: 16px;
line-height:1.8;
font-weight: 400;
margin: 0 0 12px 0;
}
.rute-pink{
color: #E13D97;
}
.rute-purple{
color: #A14BC6;
}
.rute-orange{
color: #F2853B;
}


.honbun-box{
margin: 0 0 20px 20px;
}
p.honbun-16px{
font-size: 16px;
line-height:1.8;
font-weight: 400;
margin: 0 0 12px 0;
}
.honbun-box-inner{
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.honbun-box-inner-img{
width: 47.5%;
}
.honbun-box-inner-img img{
margin: 0 0 4px 0;
vertical-align: bottom;
}
.honbun-box-inner-img p{
font-size: 13px;
}
p.end-text{
font-size: 16px;
line-height:1.8;
margin: 0;
padding: 0 0 0 1em;
text-indent: -1em;
}
/* 横山追記ここまで */


.ecobox{
  padding: 8px 18px 8px 0px; 
  display: flex; 
  justify-content: left; 
  align-items: center;
  vertical-align: middle;
  text-align: center;
  width: 209px;
  height:42px; 
}
.ecoboxgray{
  padding: 16px 24px 24px 24px; 
  background-color: #F8F8F8;
}
.ecoboxautogray{
  display: flex; 
  justify-content: center; 
  align-items: center;
  vertical-align: middle;
  text-align: center;
  background-color: #F8F8F8;
  width: 209px;
  height:42px; 
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px #D9D9D9 solid;
}


.ecoboxblue{
  padding: 16px 16px 16px 16px; 
  background-color: #F2FBFD;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px #0292DD solid;
}
.ecoboxbluenoborder{
  padding: 16px 24px 24px 24px; 
  background-color: #F2FBFD;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.eco-box-blue-arrow a{
display: inline-block;
font-size: 16px;
}
.eco-box-blue-arrow a:before{
content:"";
display:inline-block;
width: 12px;
height: 12px;
margin-right: 13px;
background:url("../images/recre/right_arrow.png") no-repeat;
background-size:contain;
background-position: left ;
}
/*
.eco-box-blue-arrow a:hover{
color: #FF667E;
}
*/

.ecoboxblue a[target="_blank"] {
  &:after {
    font-family: "Font Awesome 6 Free";
    content: "\f08e";
    font-weight: 800;
    margin: 0 0.25rem;
    color:#0292DD;
  }
}






.ecoboxred{
  padding: 16px 24px 24px 24px; 
  background-color: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px #F20000 solid;
}

.ecoboxred .attn{
  font-size: 18px;
  color: #F20000;
}

.ecoattn{
  font-size: 16px;
  color: #F20000;
}
.yellow_underline {
    background: linear-gradient(transparent 70%, #FFE978 50%);
    width:auto;
    line-height: 180%;
}

/* テキスト関連 */
.econormaltext{
font-size:16px;
}
.eco18text{
font-size:18px;
}
.ecomidtext{
font-size:20px;
}
.ecobgtext{
font-size:24px;
}
.ecobgline{
  padding: 50px 0 0 0;
}

.ecohonbun-18px{
  font-size: 18px;
}
.ecohonbun-b-18px{
  font-size: 18px;
  color: #0292DD;
}



/*　画像関連 */
.ecoimg-circle2 img{
  border-radius: 2%;  /* 円形にする */
}
.ecoimg-circle4 img{
  border-radius: 4%;  /* 円形にする */
}

.ecoimg-border{
  border: 1px #D9D9D9 solid;
}


/*　見出し関連 */
.eco-center-midashi{
padding-bottom: 40px;
}
.eco-center-sub-midashi{
  padding-bottom: 20px;
}
.eco-center-midashi h4{
  border-left: 4px solid #0292DD;
  color: #000;
  font-weight: normal;
  font-size: 28px;
margin: 0;
}



.eco-center-link{
  color:#006EBC;
  text-decoration: underline;
}

.eco-center-midashi-normal h5{
  font-size: 24px;
  color: #000;
  font-weight: normal;
}

.eco-center-sub-midashi h5{
  font-size: 24px;
  color: #0292DD;
  font-weight: normal;
}




/* list 関連 */
.ecoul li {
  list-style:none;
  background-image:url("../images/common/bullet_icon.png");
  background-repeat:no-repeat;
  background-position:top left center;
  padding-left:15px;
  margin: 0 0 10px 0;
}


/* list 関連 */
.ecoularrow li {
  padding-left: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  background:url("../images/recre/right_arrow.png") left 0px top 20px no-repeat;
  border-bottom: 1px solid #D9D9D9;
}




.ecolinkbox a[target="_blank"] {
  &:after {
    font-family: "Font Awesome 6 Free";
    content: "\f08e";
    font-weight: 800;
    margin: 0 0.25rem;
    color:#222222;
  }
}



@media screen and (max-width: 640px) {
  .table_box_break {
    width: 100%;
  } 
  .table_box_break .thead {
    display: none;
  }
  .table_box_break tr,
  .table_box_break th{
    display: block;
    position: relative;
  }

  .table_box_break .ecotwogrid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  } 

  .ecomidtext{
  font-size:16px;
  }
  .ecobgtext{
  font-size:17px;
  }
  .ecobgline{
    padding: 20px 0 0 0;
  }
}



@media screen and (max-width: 767px) {
/* 横山追記 */
.eco-center-midashi{
padding-bottom: 28px;
}
.eco-center-midashi h4{
font-size: 5.25vw;
}
.rute-box-inner{
width: 100%;
}
h5.rute-box-inner-maptitle{
font-size: 4.5vw;
}
h3.midashi-24px{
font-size: 5.25vw;
margin: 0 0 12px 0;
}
p.honbun-16px-title1{
font-size: 4.25vw;
margin: 0 0 12px 0;
}
p.honbun-16px-title2{
font-size: 4.25vw;
margin: 0 0 12px 0;
}
.honbun-box{
margin: 0 0 20px 20px;
}
p.honbun-16px{
font-size: 4.25vw;
margin: 0 0 12px 0;
}
.honbun-box-inner-img{
width: 100%;
margin: 0 0 20px 0;
}
.honbun-box-inner-img img{
margin: 0 0 4px 0;
}
.honbun-box-inner-img p{
font-size: 3.75vw;
}
p.end-text{
font-size: 4.25vw;
}
/* 横山追記ここまで */
}


@media ( min-width: 600px) {

   
}
  






.width100{ width: calc(100% - 12px)!important; }
.width95{ width: 95%!important; }
.width90{ width: 90%!important; }
.width85{ width: 85%!important; }
.width80{ width: 80%!important; }
.width75{ width: 75%!important; }
.width70{ width: 70%!important; }
.width65{ width: 65%!important; }
.width60{ width: 60%!important; }
.width55{ width: 55%!important; }
.width50{ width: 50%!important; }
.width45{ width: 45%!important; }
.width40{ width: 40%!important; }
.width35{ width: 35%!important; }
.width30{ width: 30%!important; }
.width25{ width: 25%!important; }
.width20{ width: 20%!important; }
.width15{ width: 15%!important; }
.width10{ width: 10%!important; }
.width5{ width: 5%!important; }

@media screen and (max-width: 480px) {
  .width95,
  .width90,
  .width85,
  .width80,
  .width75,
  .width70,
  .width65,
  .width60,
  .width55,
  .width50,
  .width45,
  .width40,
  .width35,
  .width30,
  .width25,
  .width20,
  /* .width15, */
  /* .width10, */
  .width5{
  width: calc(100% - 20px)!important;
  }
}