/*
  電力小売関連ページ専用
  対象:
    /for_home/power/
    /for_home/power/plan/
  スコープ: #power および電力プラン関連
  読み込み: header.php（電力関連ページのみ）
  更新: 2026年7月24日
*/

/* for_home power ---------------------------------------------- */

/* for_home powerのセクション */
#power section {
    margin: 0 0 50px;
}

/* for_home powerのセクション（1番目）の画像 */
#power section:nth-of-type(1) img {
    display: block;
    margin: 0;
}

/* for_home powerのセクション（1番目）のh3タイトル */
#power section:nth-of-type(1) h3 {
    background: #eba117;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px;
    color: #fff;
    text-align: center;
}

/* for_home powerのセクション（1番目）のdiv */
#power section:nth-of-type(1) div {
    background: #eee;
    padding: 15px;
    text-align: center;
}

/* for_home powerのセクション（1番目）のdiv内p */
#power section:nth-of-type(1) div p {
    font-size: 16px;
    margin: 0 0 10px;
    font-weight: bold;
}

/* for_home powerのスモールテキスト */
#power small {
    font-size: 12px;
    display: block;
}

/* for_home powerのセクション（2番目）のp */
#power section:nth-of-type(2) p {
    font-size: 16px;
    text-align:left;
    padding:20px 50px 0;
    line-height: 1.5;
}


/* for_home powerのセクション（2番目） */
#power section:nth-of-type(2) {
    text-align: center;
}

/* for_home powerのセクション（2、3、6番目）のh3タイトル */
#power section:nth-of-type(2) h3,
#power section:nth-of-type(3) h3,
#power section:nth-of-type(6) h3 {
    background: #e33b57;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 15px;
    color: #fff;
    text-align: center;
}

/* for_home powerのセクション（2番目）のh4タイトル */
#power section:nth-of-type(2) h4 {
    font-size: 16px;
    margin: 0 0 10px;
    line-height: 1.5;
}

/* for_home powerのセクション（2番目）のh4タイトル内スパン */
#power section:nth-of-type(2) h4 span {
    display: block;
}

/* for_home powerのセクション（2番目）のh4タイトル内スパン内スパン */
#power section:nth-of-type(2) h4 span span {
    display: inline;
    font-size: 22px;
}

/* for_home powerのセクション（2番目）のh4タイトル内スパン内スパン内スパン */
#power section:nth-of-type(2) h4 span span span {
    color: #e33b57;
}

/* for_home powerのセクション（2番目）のh4タイトル内スパン内スパン内スパン内スパン */
#power section:nth-of-type(2) h4 span span span span {
    color: #000;
    font-size: 10px;
    position: relative;
    top: -10px;
}

/* for_home powerのセクション（2番目）の画像（PCクラス） */
#power section:nth-of-type(2) img.pc {
    display: inline-block!important;
    margin: 30px 20px 15px;
}

/* for_home powerのセクション（2番目）のスモールテキスト（1番目） */
#power section:nth-of-type(2) small:nth-of-type(1) {
    display: block;
    width: 80%;
    text-align: left;
    margin: 0 auto;
}

/* for_home powerのプランエリア */
#power .plan {
    display: block;
    width: 48%;
    padding: 15px 30px 15px 15px;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    border: 2px solid #e33b57;
    color: #e33b57;
    background: url(../img/for_home/power/arrow.png) center right 15px no-repeat;
}

/* for_home powerのセクション（4番目）のh3タイトル */
#power section:nth-of-type(4) h3 {
    background: #38a8b5;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 15px;
    color: #fff;
    text-align: center;
}

/* for_home powerのセクション（5番目）のh3タイトル */
#power section:nth-of-type(5) h3 {
    background: #64ad82;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 15px;
    color: #fff;
    text-align: center;
}

/* for_home powerのコンタクトエリア */
#power .contact {
    border: 2px solid #b5b5b6;
    padding: 20px;
    width: 80%;
    margin: 0 auto 10px;
}

/* for_home powerのコンタクトエリア内p */
#power .contact p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* for_home powerのコンタクトエリア内p内スパン */
#power .contact p span {
    display: inline-block;
    margin: 0 0 0 5px;
    font-size: 24px;
    color: #eba117;
}

/* for_home powerのコンタクトエリアの次のp */
#power .contact+p {
    text-align: center;
    margin: 0;
}


/* for_home power plan ---------------------------------------------- */

/* for_home power planのセクション */
#powerplan section {
    margin: 0 0 50px;
}

/* for_home power planのセクション内セクション（最後） */
#powerplan section section:last-child {
    margin: 0;
}

/* for_home power planのセクション（1、2、4、5番目）のh3タイトル */
#powerplan>section:nth-of-type(1) h3,
#powerplan>section:nth-of-type(2) h3,
#powerplan>section:nth-of-type(4) h3,
#powerplan>section:nth-of-type(5) h3 {
    padding: 0 5px 5px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 15px;
    color: #fff;
}

/* for_home power planのセクション（1番目）のh3タイトル */
#powerplan>section:nth-of-type(1) h3 {
    background: #5ec1c4;
}

/* for_home power planのセクション（2番目）のh3タイトル */
#powerplan>section:nth-of-type(2) h3 {
    background: #eba117;
}

/* for_home power planのセクション（4番目）のh3タイトル */
#powerplan>section:nth-of-type(4) h3 {
    background: #336bb4;
}

/* for_home power planのセクション（5番目）のh3タイトル */
#powerplan>section:nth-of-type(5) h3 {
    background: #209f7f;
}

/* for_home power planのセクション（1、2、4、5番目）のh3タイトルの疑似要素 */
#powerplan>section:nth-of-type(1) h3:before,
#powerplan>section:nth-of-type(2) h3:before,
#powerplan>section:nth-of-type(4) h3:before,
#powerplan>section:nth-of-type(5) h3:before {
    position: relative;
    bottom: -5px;
    display: inline-block;
    content: "";
    border-left: 5px solid #fff;
    height: 26px;
    margin: 0 5px 0 0;
}

/* for_home power planのセクション（6番目）のh3タイトル */
#powerplan>section:nth-of-type(6) h3 {
    background: #e33b57;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 15px;
    color: #fff;
    text-align: center;
}

/* for_home power planのスモールテキスト */
#powerplan small {
    display: block;
    font-size: 12px;
    line-height: 1.3;
}

/* for_home power planのプランエリア */
#powerplan .plan {
    display: block;
    width: 60%;
    padding: 15px 30px 15px 15px;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    border: 2px solid #e33b57;
    color: #e33b57;
    background-image: url(../img/for_home/power/arrow.png);
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-color: #fcfced;
}

/* for_home power planのセクション（1番目）の定義リスト */
#powerplan>section:nth-of-type(1) dl {
    border: 2px solid #5ec1c4;
    width: 48%;
    margin: 0 0 30px;
}

/* for_home power planのセクション（1番目）の定義リストタイトル */
#powerplan>section:nth-of-type(1) dl dt {
    background: #5ec1c4;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

/* for_home power planのセクション（1番目）の定義リスト説明 */
#powerplan>section:nth-of-type(1) dl dd {
    padding: 10px;
    line-height: 1.5;
}

/* for_home power planのセクション（2番目）のスモールテキスト */
#powerplan>section:nth-of-type(2) small {
    margin: 0 0 30px;
}

/* for_home power planのセクション（2番目）の画像 */
#powerplan>section:nth-of-type(2) img {
    display: block;
    width: 45%;
    margin: 0 0 30px;
}

/* for_home power planのセクション（2番目）のリスト（右フロート） */
#powerplan>section:nth-of-type(2) ul.fr {
    width: 53%;
    background: #e7efde;
    padding: 20px 20px 0;
}

/* for_home power planのセクション（2番目）のリスト（右フロート）内リスト項目 */
#powerplan>section:nth-of-type(2) ul.fr li {
    font-weight: bold;
    margin: 0 0 20px;
    line-height: 1.3;
}

/* for_home power planのセクション（2番目）の定義リスト */
#powerplan>section:nth-of-type(2) dl {
    border: 2px solid #eba117;
    width: 48%;
    margin: 0 0 30px;
}

/* for_home power planのセクション（2番目）の定義リストタイトル */
#powerplan>section:nth-of-type(2) dl dt {
    background: #eba117;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

/* for_home power planのセクション（2番目）の定義リスト説明 */
#powerplan>section:nth-of-type(2) dl dd {
    padding: 10px;
    line-height: 1.5;
}

/* for_home power planのセクション（2番目）のプラン（1番目） */
#powerplan>section:nth-of-type(2) .plan:nth-of-type(1) {
    margin: 0 auto 10px;
}

/* for_home power planのコンタクトエリア */
#powerplan .contact {
    border: 2px solid #b5b5b6;
    padding: 20px;
    width: 80%;
    margin: 0 auto 10px;
}

/* for_home power planのコンタクトエリア内p */
#powerplan .contact p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* for_home power planのコンタクトエリア内p内スパン */
#powerplan .contact p span {
    display: inline-block;
    margin: 0 0 0 5px;
    font-size: 24px;
    color: #eba117;
}

/* for_home power planのコンタクトエリアの次のp */
#powerplan .contact+p {
    text-align: center;
    margin: 0;
}

/* for_home power planのセクション（3番目）内セクションのh4タイトル */
#powerplan>section:nth-of-type(3) section h4 {
    color: #e33b57;
    font-size: 16px;
    margin: 0 0 15px;
    font-weight: bold;
    text-align: center;
}

/* for_home power planのセクション（3番目）内セクションのスモールテキスト */
#powerplan>section:nth-of-type(3) section small {
    text-indent: -1em;
    padding: 0 0 0 1em;
    margin: 0 0 5px;
}

/* for_home power planのセクション（3番目）内セクション（1番目）のh3タイトル */
#powerplan>section:nth-of-type(3) section:nth-of-type(1) h3 {
    background: #e33b57;
    padding: 20px;
    margin: 0 0 20px;
    line-height: 1.5;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

/* for_home power planのセクション（3番目）内セクション（1番目）のh3タイトル内スパン */
#powerplan>section:nth-of-type(3) section:nth-of-type(1) h3 span {
    display: block;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div {
    border: 2px solid #e33b57;
    margin: 0 0 20px;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv内h3タイトル */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div h3 {
    background: #e33b57;
    padding: 15px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv内p */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div p {
    padding: 20px 20px 0;
    text-align: center;
    margin: 0;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv内p内スパン */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div p span {
    display: block;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv内リスト */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div ul {
    display: table;
    border-collapse: separate;
    border-spacing: 20px;
    width: 100%;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv内リスト内リスト項目 */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div ul li {
    display: table-cell;
    vertical-align: middle;
    width: 33%;
    text-align: center;
    background: #f1dddd;
    font-weight: bold;
    line-height: 1.5;
    padding: 20px 0;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv内リスト内リスト項目内スパン */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div ul li span {
    display: block;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のdiv内リスト内リスト項目内スパン内スパン */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) div ul li span span {
    display: inline;
    font-size: 10px;
    font-weight: normal;
    position: relative;
    top: -5px;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のh6タイトル */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) h6 {
    text-indent: -.5em;
    font-size: 12px;
    margin: 0 0 5px;
}

/* for_home power planのセクション（3番目）内セクション（2番目）のスモールテキスト */
#powerplan>section:nth-of-type(3) section:nth-of-type(2) small {
    text-indent: -2.3em;
    padding: 0 0 0 2.3em;
}

/* for_home power planのセクション（3番目）内セクション（3番目）のdiv */
#powerplan>section:nth-of-type(3) section:nth-of-type(3)>div {
    margin: 0 0 20px;
    background: #e33b57;
    padding: 20px;
}

/* for_home power planのセクション（3番目）内セクション（3番目）のdiv内h3タイトル */
#powerplan>section:nth-of-type(3) section:nth-of-type(3)>div h3 {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 10px;
    color: #fff;
    text-align: center;
}

/* for_home power planのセクション（3番目）内セクション（3番目）のdiv内p */
#powerplan>section:nth-of-type(3) section:nth-of-type(3)>div>p {
    margin: 0 0 5px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

/* for_home power planのセクション（3番目）内セクション（3番目）のdiv内div */
#powerplan>section:nth-of-type(3) section:nth-of-type(3)>div div {
    border-radius: 10px;
    padding: 15px;
    background: #f1dddd;
    margin: 15px 0 0;
}

/* for_home power planのセクション（3番目）内セクション（3番目）のdiv内div内p */
#powerplan>section:nth-of-type(3) section:nth-of-type(3)>div div p {
    font-weight: bold;
    font-size: 13px;
    margin: 0;
}

@media screen and (max-width: 979px) {
    /* for_home power ---------------------------------------------- */
    #power section {
        margin: 0 0 2rem;
    }
    #power section:nth-of-type(1) h3 {
        padding: 1rem;
        line-height: 1.5;
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #power section:nth-of-type(1) div {
        padding: 1rem;
    }
    #power section:nth-of-type(1) div p {
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #power small {
        font-size: 1rem;
    }
    #power section:nth-of-type(2) h3,
    #power section:nth-of-type(3) h3,
    #power section:nth-of-type(6) h3 {
        padding: 1rem;
        line-height: 1.5;
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #power section:nth-of-type(2) h4 {
        font-size: 1.2rem;
        margin: 0 0 1rem;
    }
    #power section:nth-of-type(2) h4 span span {
        font-size: 1.4rem;
    }
    #power section:nth-of-type(2) h4 span span span span {
        font-size: .8rem;
        top: -.5rem;
    }
    #power section:nth-of-type(2) small:nth-of-type(1) {
        width: 100%;
        margin: 0 0 2rem;
    }
    #power section:nth-of-type(2) img {
        display: block;
        margin: 0 auto 1rem;
    }
    #power .plan {
        display: block;
        width: 100%;
        padding: 1rem;
        font-size: 1.2rem;
    }
    #power section:nth-of-type(4) h3 {
        padding: 1rem;
        line-height: 1.5;
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #power section:nth-of-type(5) h3 {
        padding: 1rem;
        line-height: 1.5;
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #power .contact {
        padding: 1rem;
        margin: 0 auto 1rem;
    }
    #power .contact p {
        font-size: 1.4rem;
        margin: 0;
    }
    #power .contact p span {
        display: block;
        margin: 0;
        font-size: 2.2rem;
    }
    #power .contact+p {
        margin: 0 0 2rem;
    }
    /* for_home power plan ---------------------------------------------- */
    #powerplan section {
        margin: 0 0 2rem;
    }
    #powerplan>section:nth-of-type(1) h3,
    #powerplan>section:nth-of-type(2) h3,
    #powerplan>section:nth-of-type(4) h3,
    #powerplan>section:nth-of-type(5) h3 {
        padding: 0 .5rem .5rem;
        line-height: 2rem;
        font-size: 1.5rem;
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(1) h3:before,
    #powerplan>section:nth-of-type(2) h3:before,
    #powerplan>section:nth-of-type(4) h3:before,
    #powerplan>section:nth-of-type(5) h3:before {
        bottom: -.5rem;
        height: 2rem;
        margin: 0 .5rem 0 0;
    }
    #powerplan>section:nth-of-type(6) h3 {
        background: #e33b57;
        padding: 1rem;
        line-height: 1.5;
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #powerplan small {
        font-size: 1rem;
    }
    #powerplan .plan {
        width: 100%;
        padding: 1rem 3rem 1rem 1rem;
        font-size: 1.2rem;
        background-position: center right 1rem;
    }
    #powerplan>section:nth-of-type(1) dl {
        float: none;
        width: 100%;
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(1) dl dt {
        padding: 1rem;
    }
    #powerplan>section:nth-of-type(1) dl dd {
        padding: 1rem;
    }
    #powerplan>section:nth-of-type(2) small {
        margin: 0 0 2rem;
    }
    #powerplan>section:nth-of-type(2) img {
        float: none;
        display: block;
        width: 80%;
        height: auto;
        margin: 0 auto 1rem;
    }
    #powerplan>section:nth-of-type(2) ul.fr {
        float: none;
        width: 100%;
        padding: 1rem;
        margin: 0 0 2rem;
    }
    #powerplan>section:nth-of-type(2) ul.fr li {
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(2) dl {
        width: 100%;
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(2) dl dt {
        padding: 1rem;
    }
    #powerplan>section:nth-of-type(2) dl dd {
        padding: 1rem;
    }
    #powerplan>section:nth-of-type(2) .plan:nth-of-type(1) {
        margin: 0 auto 1rem;
    }
    #powerplan .contact {
        padding: 1rem;
        margin: 0 auto 1rem;
    }
    #powerplan .contact p {
        font-size: 1.4rem;
        margin: 0;
    }
    #powerplan .contact p span {
        display: block;
        margin: 0;
        font-size: 2.2rem;
    }
    #powerplan .contact+p {
        margin: 0 0 2rem;
    }
    #powerplan>section:nth-of-type(3) section h4 {
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(3) section small {
        margin: 0 0 .5rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(1) h3 {
        padding: 1rem;
        margin: 0 0 1rem;
        font-size: 1.6rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(2) div {
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(2) div h3 {
        padding: 1rem;
        font-size: 1.4rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(2) div p {
        padding: 1rem 1rem 0;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(2) div ul {
        display: block;
        padding: 1rem 1rem 0;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(2) div ul li {
        display: block;
        width: 100%;
        padding: 1rem;
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(2) div ul li span span {
        font-size: .8rem;
        top: -.5rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(2) h6 {
        text-indent: -.5em;
        font-size: 1rem;
        margin: 0 0 .5rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(3)>div {
        margin: 0 0 1rem;
        padding: 1rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(3)>div h3 {
        font-size: 1.6rem;
        margin: 0 0 1rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(3)>div>p {
        margin: 0 0 .5rem;
        font-size: 1.2rem;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(3)>div div {
        border-radius: 1rem;
        padding: 1rem;
        margin: 1rem 0 0;
    }
    #powerplan>section:nth-of-type(3) section:nth-of-type(3)>div div p {
        font-size: 1rem;
    }
}