@charset "utf-8";


#td_lp_wrap img {
    max-width: 100%;
}
#td_lp_wrap .pcOnly { display: block;}
#td_lp_wrap .spOnly { display: none;}

.pbAreaWrapper1 {
    background-color: #ffffec;
    width: 100% !important;
    background-image: url(/library/td/images/supply_electrification/image/index/bg_page.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
.headingl h1,
.heading_l h1 {
    display: none !important;
}

#td_lp_wrap .move {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 1s;
}
#td_lp_wrap .move.mv02{
  transform: translate(0, 0);
  opacity: 1;
}

/*td_lp*/
#td_lp_wrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
    font-family: "Noto Sans JP", "ÓÎ¥´¥·¥Ã¥¯ Medium", "Yu Gothic Medium", "ÓÎ¥´¥·¥Ã¥¯Ìå", "¥á¥¤¥ê¥ª", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-feature-settings: "palt";
	-webkit-text-size-adjust: none;
}
#td_lp_wrap .inner {
    width: 1130px;
    max-width: 95%;
    margin: 0 auto;
}

/*¥á¥¤¥ó¥Ó¥¸¥å¥¢¥ë*/
#td_lp_wrap .main_visual {
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    padding-top: 50%;
}
#td_lp_wrap .main_visual .left_text_area {
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 3;
    max-width: 40%;
}
#td_lp_wrap .main_visual h2 {
    max-width: 100%;
    width: 539px;
    margin-bottom: 40px;
}
#td_lp_wrap .main_visual .mv_copy {
    max-width: 90%;
    width: 493px;
    margin-bottom: 20px;
    margin-left: 40px;
}
#td_lp_wrap .main_visual .mv_eletoku {
    max-width: 50%;
    width: 206px;
    margin-left: 40px;
}
#td_lp_wrap .right_move {
    width: 959px;
    max-width: 65%;
    position: absolute;
    right: 0;
    top: 10%;
}
#td_lp_wrap .right_move li{
}

#td_lp_wrap .right_move ul{
  position:relative;
  margin:0 auto;
  padding:0 auto;
  text-align: center;
    width: 100%;
}
#td_lp_wrap .right_move ul{
  margin:0;
  padding:0;
  list-style:none;
    padding-top: 75%;
}
#td_lp_wrap .right_move ul img{
  width:100%;
  margin:0 auto 0;
  padding:0 auto;
}
#td_lp_wrap .right_move ul li{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  animation-iteration-count:infinite;
  animation-duration:14s;
}

/*´µ¤­³ö¤·Î»ÖÃ*/
#td_lp_wrap .right_move ul li p {
    position: absolute;
    width: 131px;
    max-width: 15%;
}
#td_lp_wrap .right_move ul li p a {
    display: block;
    transition: 0.3s;
}
#td_lp_wrap .right_move ul li p a:hover {
    opacity: 0.7;
}
#td_lp_wrap .right_move ul li .mv01_ic_ih {
    top: 30%; left: 11%;
    animation-delay:0.4s;
}
#td_lp_wrap .right_move ul li .mv01_ic_allele {
    top: 0%; left: 17%;
    animation-delay:0.1s;
}
#td_lp_wrap .right_move ul li .mv01_ic_benri {
    top: 8%; left: 35%;
    animation-delay:0.3s;
}
#td_lp_wrap .right_move ul li .mv01_ic_elecar {
    top: 40%; right: 15%;
    animation-delay:0.1s;
}
#td_lp_wrap .right_move ul li .mv01_ic_eco {
    top: -2%; right: 14%;
    animation-delay:0s;
}
#td_lp_wrap .right_move ul li .mv01_btn_katei {
    width: 332px;
    max-width: 30%;
    bottom: 0;
    right: 0%;
}
#td_lp_wrap .right_move ul li .mv01_btn_katei:hover {
	cursor: pointer;
	opacity: 0.7;
}
#td_lp_wrap .right_move ul li .mv02_ic_allele {
    top: 28%; left: 34%;
    animation-delay:0.4s;
}
#td_lp_wrap .right_move ul li .mv02_ic_elecar {
    bottom: 11%; left: 36%;
    animation-delay:0.1s;
}
#td_lp_wrap .right_move ul li .mv02_ic_spot {
    top: 45%; right: 19%;
    animation-delay:0.2s;
}
#td_lp_wrap .right_move ul li .mv02_btn_mati {
    width: 332px;
    max-width: 30%;
    bottom: 0;
    right: 0%;
}
#td_lp_wrap .right_move ul li .mv02_btn_mati:hover {
	cursor: pointer;
	opacity: 0.7;
}


/*¥á¥¤¥ó¥Ó¥¸¥å¥¢¥ë¡¡¥¨¥ì¥È¥¯¥â©`¥À¥ë±íʾ*/
.modal-open_toku{
    display: inline-block;
    color: #fff;
    margin: 10px;
}

.modal-open_toku a{
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.modal_toku{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.modal_toku:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}
.modal_toku:target{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
}
.modal_toku .overlay_toku{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: 20;
}
.modal-wrapper_toku{
    width: 100%;
    max-width: 648px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 21;
}
.modal-contents_toku{
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.modal-content_toku{
}
.modal-close_toku{
width: 60px;
position: absolute;
top: 20px;
right: 20px;
text-decoration: none;
}


/* ¥¢¥Ë¥á©`¥·¥ç¥óé_ʼ•rég¤ÎÔO¶¨ */
#td_lp_wrap .right_move ul li:nth-child(1){
  /*animation-name:right_move;
  animation-delay:-2s;*/
}
#td_lp_wrap .right_move ul li:nth-child(2){
  /*animation-name:right_move;
  animation-delay:5s;
  opacity:0; */
     z-index: 1;
}

/* ¥Õ¥§©`¥É¥¤¥ó?¥Õ¥§©`¥É¥¢¥¦¥È¤ÎÔO¶¨ */
/*@keyframes right_move{
  0%{
    opacity:0;
      z-index: 1;
  }
  14.28%{
    opacity:1;
      z-index: 2;
  }
  50%{
    opacity:1;
      z-index: 2;
  }
  64.28%{
    opacity:0;
      z-index: 1;
  }
  100%{
    opacity:0;
      z-index: 1;
  } 
}*/
.updown {
  animation: move-y .8s infinite alternate ease-in-out;
  display: inline-block;
  color: red;
}
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(3px);
  }
}



/*¥á¥¤¥ó¥Ó¥¸¥å¥¢¥ëÏ¡¡¥á¥¤¥ó¥³¥Ô©`*/
.main_copy {
    width: 100%;
    max-width: 90%;
    margin: 100px auto 50px;
    text-align: center;
}
.main_copy h4 {
    margin-bottom: 40px;
}
.main_copy h4 span {
    color: #54baa7;
    border-top: 2px solid #54baa7;
    border-bottom: 2px solid #54baa7;
    padding: 10px 0 5px;
    line-height: 1;
    font-size: 130%;
    font-weight: bold;
    letter-spacing: 0.2rem;
}
.main_copy h5 {
    font-size: 160%;
    letter-spacing: 0.2rem;
    margin-bottom: 20px;
}
.main_copy p {
    color: #464646;
    font-size: 130%;
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: 0.1rem;
}
.main_copy ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}
.main_copy ul li {
    list-style: none;
    width: 100%;
    max-width: 358px;
    margin: 0 10px 10px;
}
/*.main_copy ul li:nth-child(1) {
    max-width: 100%;
}
.main_copy ul li:nth-child(1) img {
    width: 358px;
    max-width: 100%;
}*/
.main_copy ul li a {
    display: block;
    transition: 0.3s;
}
.main_copy ul li a:hover {
    opacity: 0.7;
}



/*¡¸ëŠ»¯¡¹¤Î¿ìßmÉú»î*/
.denka_wrap {
    width: 100%;
    background-image: url(/library/td/images/supply_electrification/image/index/bg_pink_middle.png) ;
    background-repeat: repeat-y;
    background-size: contain;
}
.denka_wrap .denka_top {
    position: relative;
    margin-bottom: 20px;
}
.denka_wrap .scroll {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    width: 20px;
    margin: 0 auto 100px;
    text-align: center;
    z-index: 1;
}
.denka_wrap h4 {
    margin: 0 auto 50px;
    text-align: center;
}
.denka_wrap h4 span {
    color: #fff;
    padding: 10px 0 5px;
    line-height: 1;
    font-size: 180%;
    font-weight: bold;
    letter-spacing: 0.2rem;
}
.denka_wrap ul {
    width: 830px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.denka_wrap ul li {
    width: 30%;
    max-width: 250px;
    list-style: none;
    margin-bottom: 40px;
}
.denka_wrap ul li a {
    display: block;
    transition: 0.3s;
}
.denka_wrap ul li a:hover {
    opacity: 0.7;
}
.denka_wrap .torikumi_link {
    text-align: center;
    font-size: 150%;
    letter-spacing: 0.1rem;
    font-weight: bold;
    margin-bottom: 20px;
}
.denka_wrap .torikumi_link a {
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
    transition: 0.3s;
}
.denka_wrap .torikumi_link a:hover {
    border-bottom: 2px solid rgba(255, 255, 255, 0);
}



/*=============================
sp
=============================*/
@media only screen and (max-width: 768px) {
    
    #td_lp_wrap .pcOnly { display: none;}
    #td_lp_wrap .spOnly { display: block;}
    
    .pbAreaWrapper1 {
        background-color: #ffffec;
        width: 100% !important;
        background-image: url(/library/td/images/supply_electrification/image/index/bg_page_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
}    
    #td_lp_wrap .main_visual {
        padding-top: 0;
        max-width: 100%;
    }
    #td_lp_wrap .main_visual .left_text_area {
        position: relative;
        max-width: 100%;
        padding-bottom: 20px;
    }
    #td_lp_wrap .right_move {
        position: relative;
        max-width: 100%;
        margin-top: 20px;
    }
    #td_lp_wrap .main_visual h2 {
        margin: 0 auto 10px;
        max-width: 80%;
    }
    #td_lp_wrap .main_visual .mv_copy {
        margin: 50px auto 20px;
    }
    #td_lp_wrap .main_visual .mv_eletoku {
        margin: 0 auto;
    }
    #td_lp_wrap .right_move ul {
        padding-top: 92%;
    }
    #td_lp_wrap .right_move ul li .mv01_ic_ih {
        top: 30%; left: 2%;
    }
    #td_lp_wrap .right_move ul li .mv01_ic_allele {
        top: 7%; left: 10%;
    }
    #td_lp_wrap .right_move ul li .mv01_ic_benri {
        top: 12%; left: 32%;
    }
    #td_lp_wrap .right_move ul li .mv01_ic_elecar {
        top: 40%; right: 10%;
    }
    #td_lp_wrap .right_move ul li .mv01_ic_eco {
        top: 2%; right: 10%;
    }
    #td_lp_wrap .right_move ul li .mv01_btn_katei {
        max-width: 50%;
        bottom: -30px;
        right: 10px;
    }
    #td_lp_wrap .right_move ul li .mv02_ic_allele {
        top: 35%; left: 35%;
    }
    #td_lp_wrap .right_move ul li .mv02_ic_elecar {
        bottom: 6%; left: 36%;
    }
    #td_lp_wrap .right_move ul li .mv02_ic_spot {
        top: 53%; right: 10%;
    }
    #td_lp_wrap .right_move ul li .mv02_btn_mati {
        max-width: 50%;
        bottom: -30px;
        right: 10px;
    }

    
    
    .modal-wrapper_toku {
        width: 85%;
    }
    .modal-close_toku {
        width: 40px;
        top: 15px;
    }
    
    
    .main_copy h4 span {
        font-size: 120%;
        letter-spacing: 0.1rem;;
    }
    .main_copy p {
        text-align: left;
    }
    .main_copy ul {
        margin: 30px auto;
        padding: 0;
    }
    
    
    .denka_wrap {
        margin-bottom: 0;
    }
    .denka_wrap .scroll {
        top: -30px;
    }
    .denka_wrap .denka_top {
        margin-bottom: 0;
    }
    .denka_wrap h4 {
        margin: 0 auto 30px;
    }
    .denka_wrap h4 span {
        font-size: 160%;
        padding: 10px 0 0px;
        line-height: 2;
    }
    .denka_wrap ul {
        max-width: 90%;
        margin: 0 auto;
        padding: 0;
    }
    .denka_wrap ul li {
        width: 48%;
        margin-bottom: 20px;
    }
    .pbMainArea {
        margin-bottom: 0 !important;
    }
    
    .denka_wrap .torikumi_link {
        border-bottom: 2px solid #fff;
        width: 85%;
        padding-top: 20px;
        padding-bottom: 10px;
        margin: 0 auto;
        font-size: 120%;
    }
    .denka_wrap .torikumi_link a {
        line-height: 1.5;
        padding-bottom: 0px;
        border-bottom: none;
    }
    
}