@charset "utf-8";

:root{
  --default-font:"Noto Sans JP", sans-serif;
  --serif-font:YuMincho, "Yu Mincho Medium", "Yu Mincho", serif;
  --line-font:'LINESeedJPStd', sans-serif;
	--bootstrap:'bootstrap-icons';
	--icon-font:'bootstrap-icons';
  --google-icon:'Material Symbols Outlined';
  --main-color:#E60012;
  --base-color:#111;
  --base-light-color:#555;
  --link-color:#1386b6;
  --energy-title-after:1;
  --energy-title-h1-before:1;
  --situation-end-before:'1';
  --self-supply-title-after:'1';
  --normal:400;
  --bold:600;
}
.carshare {
  box-sizing: border-box;
}
.carshare  section{
  margin-bottom:140px;
}
.carshare h3{
  font-size:26px;
  color:var(--main-color);
  margin-top:1em;
  margin-bottom:0.6em;
} 
.carshare h4{
  font-size:22px;
  padding-bottom:0.2em;
  margin-bottom:25px;
  border-bottom:1px solid #ccc;
} 
.carshare .billboard .slick-container{
  width:900px;
}
.carshare .billboard ul.billboard-slider .slider-item{
  width:900px;
  height:520px;
}
.carshare .billboard ul.billboard-slider .slider-item img{
  width:900px;
}
.carshare  .slick-slide {
  display: flex !important; /* slick が inline-block にするので上書き */
  align-items: center;      /* 縦中央 */
}
.carshare  ul.slick-dots {
  display: flex;
  justify-content: center;
}
.carshare  .slick-dots li button {
  font-size: 0; /* 数字を見えなくする */
  border: none;         /* 枠線を消す */
  background: none;  
  cursor: pointer; 
}

.carshare  .slick-dots li button:before {
  font-family: 'slick';
  font-size: 32px;
  line-height: 20px;
  color: #ccc;
  opacity: .75;
  content: '•'; 
}
.carshare  .slick-dots li.slick-active button:before {
  color: #000; /* アクティブ時の色 */
  opacity: 1;
}
.carshare .card-slider{
  margin-top:1.8em;
  display: flex;
  justify-content: space-between;
}
.carshare .card-slider li {
  border:2px solid var(--main-color);
  border-radius: 10px;
  padding:1.4em 1em;
  width:250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:0.8em;
}
.carshare .card-slider li .text-box{
  text-align: center;
}
.carshare  .card-slider li figure{
  height:89px;
  display: flex;
  align-items: center;
}
.carshare  .card-slider li img{
  width:90px;
}
.carshare  .card-slider li h2{
  color:var(--main-color);
  font-size:1.3em;
  text-align: center;
  margin-bottom:0;
}
.carshare  .card-slider li h2::after{
  border:none;
}
.carshare  .card-slider li p{
  margin-bottom:0;
}
.carshare  .card-slider li span.size80{
  display: block;
}
.carshare .slick-prev,
.carshare .slick-next {
  font-size:0;
  border: none;
  background: none;
  position: absolute;
  cursor: pointer !important;
  top:50%;
  transform: translateY(-50%);
}

.carshare .slick-prev { left: -20px; } 
.carshare .slick-next { right: -10px; }
.carshare .slick-prev:before,
.carshare .slick-next:before {
  content: none; 
}
.carshare .slick-prev::before,
.carshare .slick-next::before {
  aspect-ratio: 1/1;
  width:20px;
  height:auto;
  font-family: var(--google-icon);
  font-size: 28px;
  line-height: 1;
  color: var(--main-color);
  opacity: 1; 
  font-variation-settings: 'FILL' 1;
  
}
/* 左矢印 */
.carshare .slick-prev::before {
  content: "\eaa7";
}
/* 右矢印 */
.carshare .slick-next::before {
  content: "\eaaa";
}
.carshare .introduciton .introduction-box h2{
  font-size:1.6em;
}
.carshare .introduciton .introduction-box h2::after{
  border-top:none;
}
.carshare .introduciton .introduction-box  > ul {
  margin-bottom:1.6em;
}
.carshare .introduciton .introduction-box  > ul > li{
  margin-bottom:0.4em;
  font-weight: var(--bold);
  font-size:1.4em;
  position: relative;
}
.carshare .introduciton .introduction-box ul > li span.marker {
  background: linear-gradient(transparent 70%, #ff6 30%);
}

.carshare .introduciton  ol.page-menu{
  background-color:rgba(208, 219, 217, 0.2);
  padding:1.8em 2.5em;
}
.carshare .introduciton  ol.page-menu > li{
  font-size:1.2em;
  margin-bottom:0.8em;
}
.carshare .introduciton  ol.page-menu > li span.initial{
  position: relative;
}
.carshare .introduciton  ol.page-menu > li:first-of-type{
  margin-bottom:1em;
  font-size: 1.4em;
}
.carshare .introduciton  ol.page-menu > li:not(:first-of-type) span.initial{
  padding-left:1.5em;
}
.carshare .introduciton  ol.page-menu > li > ul{
  padding-left:1.4em;
}
.carshare .introduciton  ol.page-menu > li:nth-of-type(n+2) span.initial::before{
  font-family: var(--google-icon);
  font-size:1.2em;
  color:var(--base-color);
  font-variation-settings: 'FILL' 1;
  position: absolute;
  left:0; top:55%;
  transform: translateY(-50%);
}
.carshare .introduciton  ol.page-menu > li:nth-of-type(2) span.initial::before{
  content:'\f784';
}
.carshare .introduciton  ol.page-menu > li:nth-of-type(3) span.initial::before{
  content:'\f783';
}
.carshare .introduciton  ol.page-menu > li:nth-of-type(4) span.initial::before{
  content:'\f782';
}
.carshare .introduciton  ol.page-menu > li:nth-of-type(5) span.initial::before{
  content:'\f781';
}
.carshare #akashina h2,
.carshare #hirata h2{
  margin-top:1em;
}
#akashina ul.garalley-list{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  margin-bottom:40px;
  background-color:rgba(230,0,18,0.04);
  border-radius: 10px;
  padding:3em 3.5em 1em;
}
#akashina ul.garalley-list li{
  width:calc((100% - 40px) / 2);
}
#akashina ul.garalley-list li img{
  border-radius: 10px;
}
#akashina ul.garalley-list p{
  text-align: center;
  font-size: 1.1em;
  line-height: 1.4;
}
#akashina .flex,
#hirata .flex{
  gap:25px;
  margin-bottom: 3em;
}
.carshare .flex iframe{
  aspect-ratio: 4/3;
}
.carshare .flex img{
  aspect-ratio: 4/3;
  width:425px;
  height:auto;
}
.carshare  ul.car-list{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 3em;
  gap:80px;
}
.carshare  ul.car-list li{
  width:380px;
}
.carshare ul.fee-list{
  display: flex;
  justify-content: space-between;
  margin-bottom:50px;
}
.carshare ul.fee-list li{
  width:calc((100% - 25px) / 2);
}
#hirata .description-box{
  display: flex;
  gap:20px;
  margin-bottom:50px;
}
#hirata .description-box img{
  width:300px;
  border-radius: 10px;
}
.carshare #service h3:first-of-type{
  text-align: center;
  color:#fff;
  line-height: 2;
  background-color:var(--main-color);
  
}
.carshare #service > ul.service-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:0 20px;
  margin-bottom:50px;
}
.carshare #service ul.service-list li{
  width:calc((100% - 50px) / 3 );
  border:2px solid var(--main-color);
  border-radius: 15px;
  margin-bottom:25px;
  padding:20px 0 22px;
  display: flex;
  flex-direction: column;
  gap:1em;
}
.carshare #service ul.service-list li p{
  margin-bottom:0;
}
.carshare #service ul.service-list img{
  width:160px;
  height: 90px;
  object-fit: contain;
  margin:0 auto;
}
.carshare #service ul.service-list h4{
  border-bottom:none;
  font-size:18px;
  text-align: center;
  margin-bottom:0.2em;
}
.carshare #service ul.service-list  .text-box{
  margin:0 25px;
}
.carshare #howto ol{
  display: flex;
  gap:35px;
}
.carshare #howto ol li{
  flex:1;
  border:1px solid var(--main-color);
  position: relative;
}
.carshare #howto ol li:not(:last-of-type)::after{
  content:'';
  width: 25px;
  height: 45px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color:var(--main-color);
  position: absolute;
  top:50%; right:0;
  transform: translate(25px,-50%);
}
.carshare #howto ol li  img{
  width:140px;
  margin:0 auto 15px;
}
.carshare #howto ol li h4{
  border-bottom:none;
  background-color:var(--main-color);
  color:#fff;
  text-align: center;
  font-size:1.1em;
  line-height:1.8;
  margin-bottom:15px;
}
.carshare #howto ol li p{
  padding:0 10px;
}
.carshare #registration > .personal-contact > p{
  text-align: center;
  margin-top:0.4em;
}
.carshare #registration > div{
  background-color: rgba(208, 219, 217, 0.2);
  padding:0.5em 2.4em 1.4em;
  margin-bottom:50px;
}
.carshare #registration .app-box{
  display: flex;
  justify-content:center ;
  gap:25px;
}
.carshare .personal-contact ul:not(.button-list) {
  display: flex;
  justify-content: space-between;
  gap:1.5em;
  margin-bottom:2em;
}
.carshare .personal-contact ul:not(.button-list) li{
  flex:1;
  text-align: center;
  line-height: 1.6;
  font-weight: var(--bold);
  border:1px solid var(--main-color);
  background-color:#fff;
  padding:0.5em 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carshare .personal-contact ul:not(.button-list) li:not(:last-of-type){
  position: relative;
}
.carshare .personal-contact ul:not(.button-list) li:not(:last-of-type)::after{
  content:'';
  width: 15px;
  height: 30px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color:var(--main-color);
  position: absolute;
  top:50%; right:0;
  transform: translate(15px,-50%);
}
.carshare #registration .button-container p{
  text-align: center;
  font-weight: var(--bold);
  font-size:1.3em;
  margin-bottom:0px;
}
.carshare #registration .button-container {
  margin-bottom:1.5em;
  background-color: #fff;
  text-align: center;
  padding:2em 0;
}
.carshare #registration .button-container .button-list li{
  width:500px;

}
.carshare #registration .button-container .button-list {
  margin-bottom: 1.5em;
}
.carshare #registration .button-container h3{
  color: var(--base-color);
  font-size: 1.3em;
  margin-bottom: 0;
}
.carshare #registration .button-container .tel,
.carshare #registration .button-container .tel a{
  color:var(--main-color);
}
.carshare #registration .corporation-contact-box h4{
  border-bottom:none;
  margin-bottom:0;
}

.carshare  table tr{
  display: block;
  vertical-align: top;

}
.carshare  table tr:nth-of-type(odd){
  background-color: rgba(208, 219, 217, 0.2);
}
.carshare  table tr:nth-of-type(even){
  background-color: rgba(208, 219, 217, 0);
}
.carshare  table tr th{
  white-space: nowrap;
  width:180px;
  padding:0.8em;
  font-size:0.95em;
}
.carshare  table tr td{
  padding:0.8em;
}
.carshare .fee-button-container{
  border:1px solid #ccc;
}
.carshare .fee-button-container h3{
  text-align: center;
  font-size:1.4em;
  color:var(--base-color);
}
.carshare .fee-button-container .flex{
  justify-content: center;
}
.carshare .fee-button-container ul.button-list li{
  position: relative;
}
.carshare .fee-button-container ul.button-list li a{
  font-size:1.1em;
}
.carshare .fee-button-container ul.button-list li::after{
  content:'\e5c5';
  font-family: var(--google-icon);
  font-size:2em;
  color:#fff;
  font-variation-settings: 'FILL' 1;
  position: absolute;
  right:12px; top:52%;
  transform: translateY(-50%);
}