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

.pc { display: block !important; }
.sp { display: none !important; }
 
@media screen and (max-width: 767px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

html {
 font-size: 14px;
}

@media(min-width:768px) {
 html {
  font-size: 16px;
 }
}

.br-sp {
 display: none;
}

@media screen and (max-width: 767px) {
.br-sp {
 display: block;
 }
}

.wrapper_top {
 background-color: rgb(250 128 69 / 100%);
 width: 100%;
 height: 800px;		
 margin: 0 auto;
 background-image:url(https://www.do-ene.jp/assets/02/image/header_main_bg.png);
 background-size:auto;
 background-position: top center;
 background-repeat: no-repeat;
 position: relative;
 overflow: hidden;
}

.wrapper_top_02 {
 background-color: rgb(250 128 69 / 100%);
 width: 100%;

 margin: 0 auto;
 background-image:url(https://www.do-ene.jp/assets/02/image/header_main_bg.png);
 background-size:auto;
 background-position: top center;
 background-repeat: no-repeat;
 position: relative;
 overflow: hidden;
}


.wrapper {
 background-color: rgb(250 128 69 / 100%);
 width: 100%;
 height: 176px;
 margin: 0 auto;
 background-image:url(https://www.do-ene.jp/assets/02/image/header_main_bg.png);
 background-size:auto;
 background-position: top center;
 background-repeat: no-repeat;
 overflow: hidden;
 z-index: 10;
}

.wrapper_white {
 background-color: rgb(255 255 255 / 100%);

}

.slide_on {
 height: 300px;
}

.bg_white {
 background-color: rgb(255 255 255 / 100%);
}


@keyframes zoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(1.5);
   }
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadein{
 animation-name:fadein_anime;
 animation-delay:1s;
 animation-duration:1.5s;
 animation-fill-mode:forwards;
 opacity:0;
}

@keyframes fadein_anime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*========= ヘッダー ===============*/
.header {
 width: 1020px;
 height: 50px;
 margin: 0 auto;
 background-color: rgb(85 205 135 / 0%);
 position: absolute;
 top: 28px;
 right: 0;
 left: 0;
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1em;
 letter-spacing: 0.03em;
 text-align: left;
 color: #fff;
 place-content: center;
 display: flex;
 align-items: center;
 justify-content: space-between;
 z-index: 30;
}

.header_navi_btn {
 width: 1020px;
 height: 50px;
 margin: 0 auto;
 background-color: rgb(210 95 60 / 0%);
  position: fixed;
 top: 28px;
 right: 0;
 left: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 80;
pointer-events: none;	
}

.header_navi_btn div:nth-of-type(1){
 margin-left: auto;
}

img.top_rogo {
 width: 234px;
}

img.top_jp_rogo {
 width: 127px;
}

.header div:nth-of-type(2){
 margin-left: auto;
}

.header div:nth-child(2) {
 margin-right: 54px;
}

/*========= ページタイトル ===============*/

h1 {
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1.62em;
 letter-spacing: 0.03em;
 text-align: center;
 color: #fff;
 position: absolute;
 top: 71px;
 right: 0;
 left: 0;
 z-index: 20;
}

h1.content_title_jp {
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1.62em;
 letter-spacing: 0.03em;
 text-align: center;
 color: #fff;
 position: absolute;
 top: 71px;
 right: 0;
 left: 0;
 z-index: 20;
}

h2.page_title {
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1.6em;
 letter-spacing: 0.03em;
 text-align: center;
 color: #fff;
 position: absolute;
 top: 300px;
 right: 0;
 left: 0;
 z-index: 20;
}

h2.page_first {
padding-top:56px;
}


h2.page_head {
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 1.45em;
letter-spacing: 0.03em;
text-align: center;
color: #575757;
margin:	45px auto 0px;	
}

h3.content_title_en {
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1em;
 letter-spacing: 0.03em;
 text-align: center;
 color: #fff;
 position: absolute;
 top: 118px;
 right: 0;
 left: 0;
 z-index: 20;
}

/*========= OPENボタン ===============*/
.openbtn{
 z-index: 100;
 position: relative;/*ボタン内側の基点となるためrelativeを指定*/
 cursor: pointer;
 width: 37px;
 height: 37px;
 border-radius: 37px;
 background: rgb(255 255 255 / 100%);
 filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, 0.16));
}

.openbtn span{
 display: inline-block;
 transition: all .4s;/*アニメーションの設定*/
 position: absolute;
 left: 25%;
 height: 2px;
 background-color: #E60012;
}

.openbtn span:nth-of-type(1) {
 top:15px; 
 width: 50%;
}

.openbtn span:nth-of-type(2) {
 top:21px;
 width: 50%;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
 top: 12px;
 left: 25%;
 transform: translateY(6px) rotate(-45deg);
 width: 50%;
}

.openbtn.active span:nth-of-type(2) {
 top: 24px;
 left: 25%;
 transform: translateY(-6px) rotate(45deg);
 width: 50%;
}


/*========= ナビ ===============*/

.navigation {
 position: absolute;
 z-index: 50!important;
 top:0;
 right: -120%;
 width: 800px;
 background-color: rgb(255 255 255 / 100%);
 box-shadow: -5px 3px 15px rgba(0, 0, 0, 0.16);
 height: 100vh;/*ナビの高さ*/
 transition: all 0.8s;
 display: grid;
 grid-template-columns: 280px 160px 35%; 
 grid-template-rows: 100px 120px 1fr; 
 grid-column-gap: 0px;
 grid-row-gap: 0px;
 padding-left: 100px; 
}

/*アクティブクラスがついたら位置を0に*/
.navigation.panelactive{
  right: 0;
  z-index: 50!important;
}

.item1 {
 grid-column: 1 / 4;
 grid-row: 1 / 2;
 display: flex;
 align-items: center;
}
.item2 {
 grid-column: 1 / 2;
 grid-row: 2 / 3;
 display: flex;
 align-items: center;
}
.item3 {
 grid-column: 2 / 4;
 grid-row: 2 / 3;
 display: flex;
 align-items: center;
}
.item4 {
 grid-column: 1 / 2;
 grid-row: 3 / 4;
}
.item5 {
 grid-column: 2 / 3;
 grid-row: 3 / 4;
}
.item6 {
 grid-column: 3 / 4;
 grid-row: 3 / 4;
}

.navi_list {
 font-family: "Noto Sans JP";
 font-weight: normal;
 font-size: 1.0em;
 line-height: 2.5;
 text-align: left;
 padding-left: 50px;
}

.top_pad {
 padding-top: 25px;	
}

h4.navi_list {
 font-size: 1.2em;
 font-weight: bold;
}

.navi_list a{
 color: #575757;
}

.navi_list.ind {
  padding-left: 0!important;
  text-indent: .5em;
}
.navi_list.ind a:before {
  margin-right: .2em;
  content: '▪︎';
}

/*========= スマホ版ナビ ===============*/
@media screen and (max-width: 767px) {

.navi_list.ind {
  text-indent: 1em;
}

}


/*スクロールダウン全体の場所*/
.scrolldown{
  position:absolute;
  bottom:0%;
  left:10%;
    /*全体の高さ*/
  height:100px;
 z-index: 50;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  top: -30px;
font-family: "Maven Pro";
font-weight: bold;
font-size: 16px;
line-height: 28px;
text-align: center;
color: #fff;
}

/* 線の描写 */
.scrolldown::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 87px;
  background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

/*========= SS検索バー ===============*/
.ss_serch_navi {
 width:790px;
 height: 100px;
 border-radius: 26px;
 box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.16);
 margin: 0 auto;
 background-color: rgb(252 83 31 / 100%);
 position: absolute;
 top: 141px;
 right: 0;
 left: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 z-index: 30;	
}

.ss_serch_navi div{
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100px;
}

.ss_serch_navi div:nth-child(1) {
 width:145px;
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1.4em;
 letter-spacing: 0.03em;
 text-align: center;
 color: #fff;
}
.ss_serch_navi div:nth-child(2) {
 width:220px;
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1.1em;
 text-align: center;
 color: #fff;
 position: relative;
 background-position: center center;
 background-image:url(https://www.do-ene.jp/assets/02/image/near_search_btn.png);
 background-size: 206px 54px;
 background-repeat: no-repeat;
}
.ss_serch_navi div:nth-child(3) {
 width:220px;
 font-family: "Noto Sans JP";
 font-weight: normal;
 font-size: 1.1em;
 letter-spacing: 0.03em;
 text-align: left;
 color: #8b8b8b;
 position: relative;
 background-position: center center;
 background-image:url(https://www.do-ene.jp/assets/02/image/search_window.png);
 background-size: 203px 50px;
 background-repeat: no-repeat;
 padding-right:70px;
}

.ss_serch_navi div:nth-child(4) {
 width:140px;
 font-family: "Noto Sans JP";
 font-weight: normal;
 font-size: 1.0em;
 letter-spacing: 0.03em;
 text-align: left;
 color: #fff;
 text-decoration: underline;
 padding-right: 15px;	
}


/*========= パンクズ ===============*/

.breadcrumb {
 width: 960px;
 height: 30px;
 margin: 0 auto;
 background-color: rgb(210 95 60 / 0%);
 position: absolute;
 top: 175px;
 right: 0;
 left: 0;
 z-index: 30;
 font-family: "Noto Sans JP";
 font-weight: 500;
 font-size: 0.85em;
 letter-spacing: 0.03em;
 text-align: left;
}
.breadcrumb:after {
  content: "";
  display: table;
  clear: both;
}
.breadcrumb li {
  display: inline-block;
  float: left;
  margin: 0.5em 0;
}
.breadcrumb li::after {
  /* this is the separator between items */
  display: inline-block;
  margin: 0 .6em;
  color: #fff;
  content: '';
  height: 16px;
  width: 16px;
  background: url(https://www.do-ene.jp/assets/02/image/pan_separator.svg) no-repeat center center;
  vertical-align: middle;
}

.breadcrumb li:last-of-type::after {
  /* hide separator after the last item */
  display: none;
}
.breadcrumb li > * {
  /* single step */
  display: inline-block;
 font-size: 0.85em;
  color: #fff;
}
.breadcrumb li.current > * {
  /* selected step */
  color: #fff;
 font-style:normal;
}
.no-touch .breadcrumb a:hover {
  /* steps already visited */
  color: #FC531F;
}

.bg_white {
 color: #6a6a6a;
}
.bg_white li > * {
 color: #6a6a6a;
}
.bg_white li.current > * {
 color: #6a6a6a;
}

.breadcrumb li::after {
 color: #6a6a6a;
  background: url(https://www.do-ene.jp/assets/02/image/pan_separator_glay.svg) no-repeat center center;
}

@media only screen and (min-width: 768px) {
  .breadcrumb {
    padding: 0 1.2em;
  }
  .breadcrumb li {
    margin: 1.2em 0;
  }
  .breadcrumb li::after {
    margin: 0 1em;
  }
  .breadcrumb li > * {
  font-size: 0.85em;
  }
}

/*========= サービスアイコン ===============*/

.service_list {
 width: 612px;
 height: 394px;
 margin: 0 auto;
 position: absolute;
 top: 370px;
 right: 0;
 left: 0;
 display: grid;
 grid-auto-flow: row dense; 
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
 grid-template-rows: 1fr 1fr 1fr; 
 gap: 0px 0px;
}



.service_icon {
 display: flex;
 flex-flow: column;
 align-items: center;
 justify-content: flex-start;
}

.service_icon a{
 display: block;
 text-align: center;
}

.service_icon span{
 display: block;
 font-family: "Noto Sans JP";
 font-weight: normal;
 font-size: 0.8em;
 line-height: 1.4;
 text-align: center;
 color: #fff;
}


img.service_icon_link_btn {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.16));
 border: 4px solid;
 border-color: #BFBFBF;
 position: relative;
}

a:hover img.service_icon_link_btn {
 border-color: #FC531F;
}




/*========= SS検索固定ランチャー ===============*/

.search_launcher {
 width: 122px;
 height: 101px;
 position: fixed;
 top: 159px;
 right: 0;
 background-color: rgb(155 50 100 / 0%);
 background-image:url(https://www.do-ene.jp/assets/02/image/search_launcher.png);
 background-size: 100% ;
 background-repeat: no-repeat;
 z-index: 40;
border-radius: 26px 0 0 26px;
box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.16);
}


/*========= 道エネっと固定ランチャー ===============*/

.doenet_launcher {
 width: 122px;
 height: 156px;
 position: fixed;
 top: 275px;
 right: 0;
 background-color: rgb(155 50 100 / 0%);
 background-image:url(https://www.do-ene.jp/assets/02/image/doenet_launcher.png);
 background-size: 100% ;
 background-repeat: no-repeat;
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1em;
 letter-spacing: 0.03em;
 line-height: 1.2;
 text-align: center;
 color: #fff;
 padding-top: 12px;
 z-index: 40;
}

/*========= リラプリ固定ランチャー ===============*/

.rilapri_launcher {
 width: 122px;
 height: 156px;
 position: fixed;
 top: 431px;
 right: 0;
 background-color: rgb(155 50 100 / 0%);
 background-image:url(https://www.do-ene.jp/assets/02/image/rilapri_launcher.png);
 background-size: 100% ;
 background-repeat: no-repeat;
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1em;
 letter-spacing: 0.03em;
 line-height: 1.2;
 text-align: center;
 color: #02264b;
 padding-top: 7px;
 z-index: 40;
}



/*========= バナースライド ===============*/


.banner_slide {
 height: 350px;
 background-color: rgb(240 240 240 / 100%);	
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
 margin: 0 auto;
 position: absolute;
 top: 300px;
 right: 0;
 left: 0;
 display: flex;
 justify-content: center;
 z-index: 30;
}

.bs_off {
 top: 300px;
height: 118px;
}

img.title_icon {
 width: 87px;
 height: 87px;
 margin: -43px auto 0;
}

.banner_slide_contener {
 position: absolute;
 top: 234px;
 right: 0;
 left: 0;
 width: 960px;
 height: 361px;
 border-radius: 30px;
 background: #fff;
 box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.16);
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 z-index: 40;
 text-align: center;
}

/*========= コンテンツスライダー ===============*/

.bs_content {
 width: 810px;
 height: 236px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: 17px;
 position: relative;
}
.bs_content_left {
width: 360px;
height: 236px;
 text-align: left;
}

.bs_content_right {
width: 450px;
height: 236px;
}

.bs_content_right img {
width: 450px;
height: 236px;	
}

h2.news_title {
padding-top:30px;
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 1.5em;
letter-spacing: 0.03em;
line-height: 1.5;
text-align: left;
color: #6a6a6a;
 padding-right:30px;
 padding-bottom:30px;
}

span.tag {
display: inline-block;
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 0.75em;
letter-spacing: 0.03em;
text-align: center;
color: #fff;
background: #7e7e7e;
border-radius: 12px;
padding: 2px 10px;
}

span.ind {
margin-left:5px;
}

.more_link{
width: 250px;
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 0.8em;
color: #6a6a6a;
position: relative;
text-align: left;	
 padding-top:30px;
}

.more_link::after{
content: "";
width: 23px;
height: 23px;
background-image:url(https://www.do-ene.jp/assets/02/image/slider_link_arrow.png);
background-size: contain;
background-repeat:no-repeat;
position: absolute;
margin-left:20px;
}

.sliderdots{
   z-index: 3;
   width: 300px;
text-align: center;
 margin: 15px auto 0px;
}

.link_slider_dots li {
    display:inline-block;
  margin:0 5px;
}

.link_slider_dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
  background: #fc531f;;
}

.link_slider_dots .sslider_active button{
  background: rgb(255 255 255 / 100%);
}


/*========= コンテンツMAXワイド ===============*/

.max_wide_area {
 max-width: 1120px;
 margin: 0 auto;
 background-color: rgb(255 255 255 / 50%);
 position: relative;
}

.banner_slide_on {
 margin-top: 350px;
}

/*========= レイアウト ===============*/

.title_content {
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
}

h4.title_first {
width: 810px;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 0.875em;
letter-spacing: 0.03em;
line-height: 1.6;
text-align: center;
color: #6a6a6a;
padding-top:60px;
padding-bottom:50px;
margin:0 auto;	
}

.section_title_pickup_split {
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
 height: 32px;
 background: linear-gradient(180deg, #fff 0%, #fff 50%, #F0F0F0 50%, #F0F0F0 100%);
}
	

.section_pickup {
 background-color: #F0F0F0;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
 text-align: center;
 padding-bottom:64px;
}


.content1 {
 height: 420px;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
}

.pick_up {
width: 722px;
height: auto;
margin:	0 auto;
 padding-top: 60px;
}

.pick_up img{
width: 100%;

}



.content2 {
 height: 960px;
 background: #f0f0f0;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
 padding-top:25px
}

.introduction {
width: 1120px;
margin-top:	0 auto;
padding-top: 45px;
}

.introduction img{
width: 100%;
}

.topics_index {
width: 960px;
height: 448px;
margin:	0 auto;
padding-top: 28px;
}

.topics_index img{
width: 100%;
}


/*========= 基本オレンジ画像リンクボタン ===============*/

.all_list_btn {
width: 210px;
height: 57px;
margin:	60px auto;
padding-bottom: 60px;
}

.all_list_btn img{
width: 100%;
}

.view_all_list_btn_campaign {
width: 270px;
height: 57px;
margin:	60px auto;
padding-bottom: 60px;
}

.view_all_list_btn_campaign img{
width: 100%;
}

.view_all_list_btn_topics {
width: 250px;
height: 57px;
margin:	60px auto;
padding-bottom: 60px;
}

.view_all_list_btn_topics img{
width: 100%;
}

.tire_reservation {
width: 270px;
height: 57px;
margin:	50px auto;
}

.tire_reservation img{
width: 100%;
}

.oil_reservation {
width: 280px;
height: 57px;
margin:	64px auto;
}

.oil_reservation img{
width: 100%;
}

.ss_search_btn {
width: 180px;
height: 48px;
margin:	50px auto;
}

.ss_search_btn img{
width: 100%;
}

.corporate_contract_btn {
width: 280px;
height: 48px;
margin:	50px auto;
}

.corporate_contract_btn img{
width: 100%;
}

h2.topics {
 margin-top:80px;	
}

.content3 {
width: 100%;
height: 388px;
margin:	0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction:column;
 
}
.content3 img{
width: ;
}

.rogo_foot_orange {
width: 226px;
height: 27px;
margin:	0 auto;
margin-bottom:42px;
}

.rogo_foot_orange img{
width: 100%;

}

.link_flex {
 display: flex;
 width: 456px;
 height: 57px;
 justify-content: space-between;
 align-items: center;
}

.item {
 width: 210px;
 height: 57px;
}

.item img{
 width: 100%;
}


/*========= サブフッター ===============*/
.subfooter {
 position: relative;
 height: 435px;
 margin: 0 auto;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
 background: rgb(250 128 69 / 100%);
}

h2.sub_footer_title {
 font-family: "Noto Sans JP";
 font-weight: bold;
 font-size: 1.42em;
 letter-spacing: 0.03em;
 text-align: center;
 color: #fff;
 padding-top: 67px;
 padding-bottom: 37px;
}

.subfooter_service_list {
 width: 720px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

.sub_service_icon {
 width: 120px;
 display: flex;
 flex-flow: column;
 align-items: center;
 justify-content: flex-start;
}

.sub_service_icon:nth-of-type(n+7) {
  margin-top:20px;
}

.sub_service_icon a{
 display: block;
}

.sub_service_icon span{
 display: block;
 font-family: "Noto Sans JP";
 font-weight: normal;
 font-size: 0.8em;
 line-height: 1.4;
 text-align: center;
 color: #fff;
}


img.sub_service_icon_link_btn {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.16));
 border: 4px solid;
 border-color: #BFBFBF;
 position: relative;
}

a:hover img.sub_service_icon_link_btn {
 border-color: #FC531F;
}


img.carlife_icon {
 border-radius: 18px;
}

/*========= フッター ===============*/
footer {
 height: 420px;
 margin: 0 auto;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
 background: rgb(2 37 74 / 100%);
 position: relative;
}

.footer_contents {
 width: 980px;
 height: 280px;
 margin: 0 auto;
 background-color: rgb(255 255 255 / 0%);
 display: flex;
 align-items: center;
 justify-content: space-between;
 position: absolute;
 top: 75px;
 left: 0;
 right: 0;
}

.fotter_left {
 width: 465px;
}
.fotter_left img{
 width: 283px;
 padding-left: 30px;
}
.fotter_left img.instagram{
  margin-top: 30px;
}
.fotter_right {
 width: 515px;
 display: flex;
 justify-content: space-between;
}

.column1 {
width: 148px;
 height: 280px;
 display: flex;
 flex-direction: column;
 justify-content:flex-start;
}

.column1 div.f_link:nth-of-type(2) {
 margin-top:38px;
}

.column2 {
width: 148px;
 padding-top:54px;	
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}


.column3 {
 width: 148px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.column3 div.f_link:nth-of-type(2) {
 margin-top:62px;
}
.column3 div.f_link:nth-of-type(n+3) {
 margin-top:25px;
}

.column4 {
 width: auto;
 display: flex;
 flex-direction: column;
 justify-content:space-between;
}

.f_link {
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 0.85em;
text-align: left;
color: #fff;
}

.f_link a{
 position: relative;
}
.co:nth-of-type(n+1) {
  padding-top:7px;
}
.ind {
 padding-left:10%;	
}
.f_link.ind::before {
  margin-right: .2em;
  content: '▪︎';
}

.fotter_link_list a::after {
 content: '';
 /*絶対配置で線の位置を決める*/
 position: absolute;
 bottom: -10px;
 left: 0;
 /*線の形状*/
 width: 100%;
 height: 2px;
 background:#FC531F;
 /*アニメーションの指定*/
 transition: all .3s;
 transform: scale(0, 1);/*X方向0、Y方向1*/
 transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.fotter_link_list a:hover::after {
 transform: scale(1, 1);/*X方向にスケール拡大*/
}


.fotter_link_text {
 font-family: "Noto Sans JP";
 font-weight: 500;
 font-size: 12px;
 line-height: 2.8;
 text-align: left;
 color: #fff;
}

[data-ruby] {
    position: relative;
}

[data-ruby]::before {
 content: attr(data-ruby);
 position: absolute;
 top: -1.4em;
 left: 0;
 right: 0;
 margin: auto;
 font-family: "Maven Pro";
 font-weight: bold;
 font-size: 0.7em;
 text-align: left;
 color: #fc531f;

}

/*========= コピーライト ===============*/
.copyright {
 height: 50px;
 margin: 0 auto;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding-left: calc(50vw - 50%);
 padding-right: calc(50vw - 50%);
 background: rgb(2 37 74 / 100%);
 font-family: "Maven Pro";
 font-weight: 500;
 font-size: 12px;
 letter-spacing: 0.03em;
 text-align: center;
 color: #fff;

}

/*========= スマホ版ナビ ===============*/

.navigation_sp {
 position:fixed;
 z-index: -1;
 opacity: 0;/*はじめは透過0*/
 top:0;
 width:100%;
 height: 100vh;/*ナビの高さ*/
 background-color: rgb(255 255 255 / 100%);
 transition: all 0.3s;
 padding-top: 0px;	
}

/*アクティブクラスがついたら位置を0に*/
.navigation_sp.panelactive{
  opacity: 1;
  z-index:70;
}

.sp_navi_flex {
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 width: 90%;
 margin: 0 auto;	
}

.sp_navi_item {
 width: 50%;
}


@media screen and (max-width: 767px) {
.navi_list {
 font-size: 0.9em;
 line-height: 2.3;
 padding-left: 40px;
}

.navi_right {
 padding-left: 20px;
}	
	
}	

/*========= スマホ版ナビロゴ ===============*/
.rogo_orange {
 width: 35%;
 margin: 25px 0px 50px 20px;
 z-index: 90;
}

.rogo_orange img{
 margin-top: 0px;	
 width: 50%;
}	


.sp_rogo_jp {
 position: absolute;
 width: 74%;
 top: 25px;
 left: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 20;
}

.sp_rogo_jp img{	
 width: 100%;
}	

/*========= スマホ版OPENボタン ===============*/
	
.sp_btn_open{
 position: absolute;
 width: 50px;
 top: 10px;
 right: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999;
}
	
	
.openbtn_sp{
 z-index: 9999;/*ボタンを最前面に*/
 cursor: pointer;
 position: relative;/*ボタン内側の基点となるためrelativeを指定*/
 background: rgb(255 255 255 / 100%);
 width: 50px;
 height: 50px;
 border-radius: 50px;
 filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, 0.16));
}

.openbtn_sp span{
 display: inline-block;
 transition: all .4s;/*アニメーションの設定*/
 position: absolute;
 left: 25%;
 height: 2px;
 background-color: #E60012;
}

.openbtn_sp span:nth-of-type(1) {
 top:20px; 
 width: 50%;
}

.openbtn_sp span:nth-of-type(2) {
 top:30px;
 width: 50%;
}



.openbtn_sp.active span:nth-of-type(1) {
 top: 19px;
 left: 25%;
 transform: translateY(6px) rotate(-45deg);
 width: 50%;
}

.openbtn_sp.active span:nth-of-type(2) {
 top: 31px;
 left: 25%;
 transform: translateY(-6px) rotate(45deg);
 width: 50%;
}



/*========= スマホ版 ===============*/

.wrapper_sp_top {
 background-color: rgb(250 128 69 / 100%);
 width: 100%;
 height: 110vh;
 overflow: hidden;
 background-image:url(https://www.do-ene.jp/assets/02/image/sp/top_bg_main.png);
 background-size: 100% auto;
 background-repeat: no-repeat;
}

.fixed_search {
 position: fixed;
 bottom: 0;
 width:33%;
 height:75px;
 left: 0;
 background-color: rgb(155 50 100 / 0%);
 background-image:url(https://www.do-ene.jp/assets/02/image/sp/fixed_btn01.png);
 background-size: 100% ;
 background-repeat: no-repeat;
 z-index: 40;	
}
.fixed_rilapri {
 position: fixed;
 bottom: 0;
 width:33%;
 left: 33%;
 height:75px;
 background-color: rgb(155 50 100 / 0%);
 background-image:url(https://www.do-ene.jp/assets/02/image/sp/fixed_btn02.png);
 background-size: 100% ;
 background-repeat: no-repeat;
 z-index: 40;	
}
.fixed_doenet {
 position: fixed;
 bottom: 0;
 width:34%;
 left: 66%;
 height:75px;
 background-color: rgb(155 50 100 / 0%);
 background-image:url(https://www.do-ene.jp/assets/02/image/sp/fixed_btn03.png);
 background-size: 100% ;
 background-repeat: no-repeat;
 z-index: 40;	
}

.fixed_search img{
 width:100%;	
}
.fixed_rilapri img{
 width:100%;
}
.fixed_doenet img{
 width:100%;
}





@media screen and (max-width: 767px) {
	
h1 {
 font-size: 1.45em;
 top: 71px;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}	

h2.page_title {
 font-size: 1.2em;
 top: 420px;
}

/*========= SS検索バー ===============*/
.ss_serch_navi {
 width: 90%;
 height: 280px;
 border-radius: 26px;
 box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.16);
 margin: 0 auto;
 background-color: rgb(252 83 31 / 100%);
 position: absolute;
 top: 125px;
 right: 0;
 left: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 z-index: 30;
 padding-bottom:15px;
}

.ss_serch_navi div{
 display: flex;
 align-items: center;
 justify-content: flex-start;
 height: 50px;
 margin: 0 auto;	
}

.ss_serch_navi div:nth-child(1) {
 width: 90%;
 justify-content: center;
}
.ss_serch_navi div:nth-child(2) {
 width: 90%;
 background-image:url(https://www.do-ene.jp/assets/02/image/sp/search_near.png);
 background-size: 295px 50px;
 text-align: left;
 padding-left:20%;	
}
.ss_serch_navi div:nth-child(3) {
 width: 90%;
 background-image:url(https://www.do-ene.jp/assets/02/image/sp/search_window.png);
 background-size: 295px 50px;
 text-align: left;
 padding-left:20%;	
}
.ss_serch_navi div:nth-child(4) {
 width:100px;
 padding-right: 15px;	
}

/*========= スマホ版サービスアイコン ===============*/

.service_list {
 width: 82%;
 height: auto;
 margin: 0 auto;
 position: absolute;
 top: 460px;
 right: 0;
 left: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
}

.service_icon {
 width: 33%;
 display: flex;
 flex-flow: column;
 align-items: center;
 justify-content: flex-start;
 padding-bottom:25px;
}

.service_icon a{
 display: block;
}

.service_icon span{
 display: block;
 font-family: "Noto Sans JP";
 font-weight: normal;
 font-size: 0.8em;
 line-height: 1.4;
 text-align: center;
 color: #fff;
}


img.service_icon_link_btn {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.16));
 border: 4px solid;
 border-color: #BFBFBF;
 position: relative;
}
	

/*========= レイアウト ===============*/

.content1 {
 height: 530px;
}

.pick_up {
width: 92%;
height: auto;
margin:	30px auto 0;
}

.pick_up img{
width: 100%;

}
h2.topics {
 margin-top:80px;	
}
.content2 {
 height: auto;
 padding-top:0;
 padding-bottom:20px;
}
h2.sp2 {
 margin: 0px auto 0px;
 padding-top:40px
} 
.introduction {
height: auto;	
width: 100%;
margin-top:	0 auto;
padding-top: 30px;
}

.introduction img{
width: 100%;
}

.topics_index {
width: 92%;
height: auto;
margin:	0 auto;
padding-top: 30px;
}

.topics_index img{
width: 100%;
}


.all_list_btn {
width: 210px;
height: 57px;
margin:	60px auto;
padding-bottom: 60px;
}

.all_list_btn img{
width: 100%;
}



.content3 {
height: 310px;
margin:	0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction:column;
 
}
.content3 img{
width: ;
}

.rogo_foot_orange {
width: 226px;
height: 27px;
margin:	0 auto;
margin-bottom:24px;
}

.rogo_foot_orange img{
width: 100%;

}

.link_flex {
 display: flex;
 width: 56%;
 height: auto;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

.item {
 width: 210px;
 height: 57px;
margin-bottom:16px;
}

.item img{
 width: 100%;
}	

.sp_footer {
 width: 100%;
 height:820px;	
 margin: 0 auto;
 background: rgb(2 37 74 / 100%);
 position: relative;
}	
	
.footer_contents {
width: 82%;
height: auto;
 margin: 0 auto;
}
.footer_contents img{
width: 100%;
}	

/*========= コピーライト ===============*/
.copyright {
 height: 100px;
 padding-bottom:150px;

}	
	
}

/*========= ポイントボックス ===============*/

div.point_box {
padding-top: 30px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: center;
 position: relative;
}

.point_box .point_number {
width: 143px;
  height:60px;
border-radius: 15px 0px 0px 15px;
background: #fc531f;
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 0.875em;
color: #fff;
display:grid;
align-items:center;
text-align: center;
}
	
.point_box .point_text {
width: 667px;
height:60px;
border-radius: 0px 15px 15px 0px;
background: #fff;
display:grid;
align-items:center;
padding-left:38px;
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 1em;
letter-spacing: 0.03em;
color: #6a6a6a;	
}

h5.base_gray {
width: 810px;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 0.875em;
letter-spacing: 0.03em;
line-height: 1.6;
color: #6a6a6a;
 margin: 0 auto;
padding-top: 25px;
}