@charset "UTF-8";

html {
    font-size: 100%;
    height: auto;
    overscroll-behavior-y: none;
}

body {
    font-size: 1em;
    line-height: 1.4em;
    min-width: 320px;
    background-image: url('../images/icon_back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* height: 100vh; */
    /* min-height: 100vh; */
    position: relative;
    box-sizing: border-box;
    padding-bottom: 120px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
        "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",
        sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
ol,
span,
small,
strong,
th,
td,
dd,
dt,
b,
label,
input {
    font-weight: 600;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
        "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",
        sans-serif;
    color: #333333;
    letter-spacing: 0.02em;
}

input::placeholder {
    font-weight: normal !important;
}

table {
    display: block;
}

tbody {
    display: block;
}

tr {
    display: block;
}

th {
    display: block;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

a,
a:hover,
a img,
a:hover img,
a::after,
a:hover::after,
a::before,
a:hover::before,
a:hover span,
a span {
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

.t_center {
    text-align: center;
}

.t_right {
    text-align: right;
}

.t_left {
    text-align: left;
}

.fw_normal {
    font-weight: normal;
}

.w1200 {
    max-width: 1200px;
    margin: auto;
}

.w1000 {
    max-width: 1000px;
    margin: auto;
}

.sc_tp10 {
    padding-top: 10px;
}

.sc_tp20 {
    padding-top: 20px;
}

.sc_tp30 {
    padding-top: 30px;
}

.sc_tp {
    padding-top: 60px;
}

.sc_tp_bm {
    padding: 20px 0 60px;
}

.sc_bm {
    padding-bottom: 30px;
}

.sc_bm20 {
    padding-bottom: 20px;
}

.sc_bm40 {
    padding-bottom: 40px;
}

.sc_lf_rt {
    padding-left: 20px;
    padding-right: 20px;
}

.opacity {
    transition: .3s;
}

.h_gray:hover {
    transition: .3s;
}

a {
    outline: none;
}

br.sp_br {
    display: none;
}

br.pc_br {
    display: inline;
}

.bold {
    font-weight: bold;
}

h2.headline {
    /* background-color: #A6DDD5; */
    border-top: 3px solid #727272;
    border-bottom: 3px solid #727272;
    color: #23559B;
    font-size: 2.0rem;
    line-height: 1.2;
    /* margin-bottom: 30px; */
    font-weight: bold;
    /* padding: 10px 20px; */
    padding: 11px 20px 10px 20px;
    margin: 0 0 20px 0;
}

h2.headline-second {
    color: #037fdd;
    font-size: 2.8rem;
    line-height: 1;
    font-weight: bold;
}

h3.subheading {
    font-weight: bold;
}

.basic_btn_area {
    margin-top: 30px;
}

.basic_btn {
    position: relative;
    background-color: #037fdd;
    color: #fff;
    padding: 15px 10px;
    max-width: 260px;
    width: auto;
    height: auto;
    text-align: center;
    border-radius: 50px;
    display: block;
    margin: 0 auto;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 2px 2px 4px gray;
    /* 下方向の影 */
    transition: all 0.1s ease-in-out;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.basic_btn:active {
    transform: translateY(4px);
    /* 下に移動 */
    box-shadow: 0 0 0 #037fdd;
    /* 影を消す */
}

.basic_btn_area.btn_tow {
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.basic_btn_area.btn_tow .basic_btn {
    width: 100%;
}

.letter_btn.front_btn {
    padding-right: 23px;
}

.front_btn::before {
    content: '';
    position: absolute;
    background-image: url('../images/arrow04.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.back_btn {
    background-color: #8b8b8b;
}

.back_btn::before {
    content: '';
    position: absolute;
    /* background-image: url('../images/arrow06.svg'); */
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
}

.move_btn::before {
    content: '';
    position: absolute;
    /* background-image: url('../images/arrow05.svg'); */
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    top: 50%;
    right: 7%;
    transform: translateY(-50%);
}

.letter_btn_area {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.letter_btn_area.comparison {
    justify-content: center;

}

.letter_btn_area.comparison a,
.letter_btn_area.comparison .inputButton {
    margin: 0 10px;
}

/* .letter_btn_area.comparison a:first-child {
    margin: 0 10px 0 0;
} */

.letter_btn_area.comparison p {
    font-weight: bold;
}

.letter_btn_area .inputButton {
    font-size: 1em;
}

.letter_btn {
    position: relative;
    color: #037fdd;
    font-weight: bold;
    background-color: transparent;
}

.letter_btn.switching {
    box-shadow: 2px 2px 4px gray;
    /* 下方向の影 */
    transition: all 0.1s ease-in-out;
}

.letter_btn.back_btn {
    padding-left: 30px;
}

.letter_btn.back_btn::before {
    background-image: url('../images/arrow03.svg');
}

.c_red {
    color: #c81517;
}

.c_blue {
    color: #037fdd;
}

.white_box {
    background-color: #fff;
    padding: 20px 60px 60px;
}

.caution {
    margin-top: 20px;
    text-align: center;
}

.indent-1 {
    padding-left: 1em;
    text-indent: -1em;
}

/* 20230316 */
.cross_box {
    position: absolute;
    top: 25px;
    right: 25px;
}

.cross_box b {
    display: block;
    position: relative;
    cursor: pointer;
}

.cross_box b::before,
.cross_box b::after {
    /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 20px;
    background: #333;
}

.cross_box b::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.cross_box b::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.new_login {
    margin: 30px auto 0 auto;
    max-width: 530px;
    padding: 25px 0;
    border-top: 1px solid #ced4da;
}

.new_login .basic_btn {
    margin-top: 25px;
}

.new_login .basic_btn.btn_orange {
    background-color: #ff801e;
}

.new_login .basic_btn.btn_green {
    background-color: #fcc800;
}

.graph_change_box {
    margin: 30px 0;
}

.graph_change_box_contents {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.graph_change_box_contents:first-child {
    margin-bottom: 0;
}

.graph_change_box .col-12 {
    align-items: center;
    justify-content: space-between;
    width: 45%;
}

.graph_change_box .col-12.f_s_b {
    margin-bottom: 5px;
}

.graph_change_box .item_box {
    align-items: center;
}

.graph_change_box .ECM_CheckboxInput-DummyInput {
    border-radius: 20%;
}

.sort_order_box {
    width: 30%;
    margin: 0 0 0 auto;
}

.confirm_container {
    margin-top: 1rem !important;
}

.confirm-group {
    margin-bottom: 0.5rem;
}

.confirm-group-title {
    color: gray;
}

.confirm-group-title::before {
    content: "＜";
}

.confirm-group-title::after {
    content: "＞";
}

.confirm-group-text {
    padding-left: 1rem;
}

/* 20230316 */
/* トップページ------------------------ */
/* ヘッダー */
header {
    /* background-color: #fff; */
    background-image: url("../images/header_bg.png");
    background-size: cover;
    /* 画面いっぱいに広げる */
    background-repeat: no-repeat;
    /* 繰り返さない */
    background-position: center;
    /* 画像の中心を表示 */
    height: 140px;
}

.main_area img {
    width: 100%;
}

.day_box span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    background-image: url('../images/date_bg.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 232px;
    height: 40px;

}

.header_bottom {
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.logo_area {
    width: 25%;
    margin-top: 5px;
}

.login_area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 70%;
    margin-top: 5px;
}

.login_area a {
    display: flex;
    align-items: center;
}

.login_area strong {
    position: relative;
    display: inline-block;
    background-color: #037fdd;
    border-radius: 50px;
    height: 45px;
    width: 45px;
    pointer-events: auto;
}

.login_area strong::before {
    content: '';
    background-image: url('../images/login.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 26px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login_area small {
    display: inline-block;
    font-size: 1.0rem;
    margin-left: 7px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
}

.login_area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 70%;
}

.login_btn {
    display: flex;
    align-items: center;
    background-color: #fff;
    /* ボタン背景 */
    border: 2px solid #037fdd;
    color: #037fdd;
    padding: 7px 10px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.login_btn:hover {
    opacity: 0.8;
    /* ホバー効果 */
}

.login_icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('../images/login.svg');
    /* アイコン画像 */
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    /* アイコンと文字の間隔 */
}

.login_text {
    font-size: 1.7rem;
    color: #333333;
    line-height: 1;
}

/* ヘッダー */

/* コンテンツ */
.contents_bg {
    background-color: #f8f6f3;
}

.co2 {
    padding-top: 60px;
}

.co2 .sp_img {
    display: none;
}

.co2 img {
    width: 100%;
}

.news_bg {
    background-color: #fff;

    /* 2026-02-10
    background: linear-gradient(to bottom, #DFF4EE 0%, #FFFFFF 100%);
    border-color: #23559B;
    border-style: solid;
    border-width: 2px;
    padding: 0px 0px 40px 0px; */
    /* border-radius: 15px; */
    /* 2026-02-05 */
}

.news_list dl {
    padding: 13px 13px;
    border-bottom: 1px solid #e6e6e6;
}

.news_list a:first-child dl {
    padding: 5px 13px 5px 13px;
}

.news_list dt {
    display: inline-block;
    padding-right: 10px;
}

.news_list dt .day {
    color: #037fdd;
    font-weight: 600;
}

.news_list dd {
    display: inline-block;
}

/* .button_area ul {
    width: calc(100% + 3%);
    margin-bottom: 0px;
}

.button_area ul li {
    width: 300px;
    height: 300px;
    margin: 0 2% 2% 0;
    margin-bottom: calc(2% + 0px);
}

.button_area ul li:nth-child(4){
	margin: 0 0 2% 0;
}  */
.button_area ul{
  --gap: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  justify-content: flex-start;
}

.button_area ul > li{
  box-sizing: border-box;
  margin: 0;
  height: 300px;
  width: calc((100% - var(--gap) * 2) / 3);
}

.button_area ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    width: 96%;
    height: 96%;
    padding: 30px 0;
    box-sizing: border-box;
}

.order .button_area ul li a {
    width: 98%;
}

.button_area ul li.og a {
    background-color: #ff6900;
    box-sizing: unset;
}

.button_area ul li.yg a {
    background-color: #a57de8;
    box-sizing: unset;
}

.button_area ul li.yg2 a {
    background-color: #993399;
    box-sizing: unset;
}

.button_area ul li.lb a {
    background-color: #4ddada;
    box-sizing: unset;
}

.button_area ul li.lp a {
    background-color: #ff9cb1;
    box-sizing: unset;
}

.button_area ul li.pk a {
    background-color: #ff7269;
    box-sizing: unset;
}

.button_area ul li.bl a {
    background-color: #00baff;
    box-sizing: unset;
}

.button_area ul li.yl a {
    background-color: #e3a763;
    box-sizing: unset;
}

.button_area ul li.gn a {
    background-color: #06c755;
    /* box-sizing: unset; */
}

.button_area ul li a .button_box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.button_area ul li a span {
    display: block;
    border-radius: 50%;
    background-color: #ffffff;
    height: 135px;
    width: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button_area ul li.gn a span {
    background-color: transparent;
}

.button_area ul li a p {
    width: 100%;
    text-align: center;
    padding-top: 15px;
}

.button_area ul li a p strong {
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
}

.button_area ul li a p small {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
}

.button_area ul li a p small img {
    width: 100%;
}

.button_area ul li.gas_area {
    width: calc(100% - 2%);
    margin: 0;
    margin-bottom: 0;
    background-color: #037fdd;
    border-radius: 15px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
    justify-content: center;
    height: auto !important;
}

.button_area ul li.gas_area {
    width: calc(100% - 2%);
    margin: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    position: relative;
    border-radius: 18px;
    background: linear-gradient(180deg, rgb(40, 135, 215), rgb(5, 105, 185));
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
    padding: 18px 16px 10px 16px;
}

.button_area ul.flex > li.gas_area{
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* .button_area ul li.gas_area::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 20px;
    background: linear-gradient(125deg, rgb(55,175,220), rgb(5,90,165));
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}
.button_area ul li.gas_area p { display: flex; align-items: center; justify-content: center; margin: 0; }
.button_area ul li.gas_area p b {
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    text-shadow:
        0.5px  0    0 rgba(20,100,200,.90),
       -0.5px  0    0 rgba(20,100,200,.90),
        0     0.5px 0 rgba(20,100,200,.90),
        0    -0.5px 0 rgba(20,100,200,.90);
    margin-left: 10px;
}
.button_area ul li.gas_area,
.button_area ul li.gas_area .gas_btn_box {
   overflow: visible;
}
.button_area ul li.gas_area .gas_btn_box {
    display: flex;
    justify-content: center;
    gap: 0px;
    margin-top: 0px;
    padding-left: 40px;
}

.button_area ul li.gas_area .gas_btn_box a.gs_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 150px;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 800;
    color: #fff;
    border: 2px solid transparent;
    background:
        linear-gradient(125deg, rgb(255,145,0), rgb(205,70,10)) border-box,
        linear-gradient(180deg, rgb(255,145,55), rgb(245,120,35)) padding-box;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
} */

.gas_area p {
    display: flex;
    align-items: center;
    margin-right: 100px;
}

.gas_area p b {
    color: #fff;
    margin-left: 10px;
    font-weight: bold;
}

.gas_area span {
    border-radius: 50%;
    background-color: #ffffff;
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gas_btn_box {
    /* align-items: center;
	justify-content: space-between;
	max-width: 500px;
	position: absolute;
	top: 50%;
	right: 2%;
	transform: translateY(-50%); */
}

.button_area ul li a.gs_btn {
    position: relative;
    background-color: #ff801e;
    color: #fff;
    padding: 13px 10px;
    min-width: 180px;
    width: auto;
    /* height: auto; */
    text-align: center;
    border-radius: 50px;
    display: block;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    font-weight: bold;
    box-shadow: 2px 2px 4px gray;
    /* 下方向の影 */
    transition: all 0.1s ease-in-out;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.gs_btn:active {
    transform: translateY(4px);
    /* 下に移動 */
    box-shadow: 0 0 0 #037fdd;
    /* 影を消す */
}

.button_area ul li a.gs_btn:first-child {
    margin-right: 30px;
}

.button_area ul li a.gs_btn::after {
    content: '';
    position: absolute;
    /* background-image: url('../images/arrow05.svg'); */
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
}

.banner_area ul {
    justify-content: space-between;
    align-items: center;
}

.banner_area ul li {
    width: 48%;
}

.banner_area ul li img {
    width: 100%;
}

/* コンテンツ */
/* モーダル */
.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}

.modal-type2 h2.headline {
    font-size: 2.4rem;
}

.modal-type2 p {
    margin-bottom: 10px;
}

.modal-type2 .back_btn::before {
    background: none;
}

.modal-type2 .text_area {
    margin-bottom: 30px;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
    z-index: 9999;
}

#modal01 .modal__bg {
    background: transparent;
}

.modal__content_area {
    position: relative;
    height: 100vh;
    margin: 0 15px;
}

#modal01 .modal__content_area {
    max-width: 1000px;
    margin: 0 auto;
}

#modal01 .modal__content {
    background: #fff;
    right: 0;
    padding: 20px 0;
    position: absolute;
    top: 12%;
    min-width: 300px;
    border-radius: 5px;
    z-index: 99999;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
}

#modal01.hide {
    display: none !important;
}

.modal-type2 .modal__content {
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 30px 30px;
    position: absolute;
    max-width: 800px;
    width: 100%;
    border-radius: 5px;
    z-index: 99999;
}

.btn-pattern1 {
    color: #fff;
    background-color: #3272db;
    border: 1px solid #3272db;
    border: none;
    padding: 8px 30px;
    border-radius: 0.375rem;
}

.btn-pattern2 {
    background-color: #fff;
    border: 1px solid #3272db;
    padding: 8px 20px;
    border-radius: 0.375rem;
}

.modal__content .btn_area {
    margin-top: 40px;
}

.modal .login_area {
    display: block;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
}

.modal .login_area strong {
    display: block;
    margin: 0 auto;
}

.modal .login_area small {
    display: block;
    text-align: center;
    margin: 10px 0 0 0;
    border-bottom: none;
}

.modal .login_area span {
    display: block;
    text-align: center;
    font-size: 1.0rem;
}

.other_login_area {
    background-color: #fff;
    display: block;
    opacity: .3s;
}

.other_login {
    padding: 20px 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
}

.other_login strong {
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: relative;
}

.other_login.us2 strong {
    background-color: #009688;
}

.other_login.us3 strong {
    background-color: #ff5722;
}

.other_login.us4 strong {
    background-color: #3f51b5;
}

.other_login strong::before {
    content: '';
    background-image: url('../images/login.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.other_login small {
    display: inline-block;
    font-size: 1.0rem;
    font-weight: bold;
    line-height: 1;
}

.other_login span {
    display: block;
    line-height: 1;
    font-size: 0.9rem;
}

.last_login {
    padding: 20px 20px;
    border-bottom: 1px solid #e6e6e6;
}

.last_login strong {
    display: block;
    font-size: 1.0rem;
}

.last_login small {
    display: block;
    font-size: 0.9rem;
    line-height: 1;
}

.other_logout_btn {
    border-bottom: 1px solid #e6e6e6;
}

.logout_btn {
    padding: 20px 20px;
    display: flex;
    align-items: center;
}

.logout_btn strong {
    display: block;
    margin-right: 5px;
    line-height: 1;
}

.logout_btn {}

/* モーダル */
/* フッター */
footer {
    background-color: #13448f;
    padding: 20px 0;
    width: 100%;
    position: absolute;
    bottom: 0;
}

footer p {
    color: #fff;
    /* font-size: 1rem; */
    font-size: 13px;
    /* font-weight: 600; */
}

/* フッター */
/* トップページ------------------------ */
/* エネルギーの見える化------------------------ */
.mieruka_box_bg {
    background-color: #fff;
    padding: 60px 30px;
}

.mieruka_box_btn {
    margin-bottom: 30px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mieruka_btn {
    background-color: #c8c8c8;
    color: #fff;
    text-align: center;
    font-weight: bold;
    min-width: 200px;
    padding: 10px 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 4px gray;
    /* 下方向の影 */
    transition: all 0.1s ease-in-out;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* .btn-action-graph {
    background-color: #c8c8c8;
    color: #fff;
    text-align: center;
    font-weight: bold;
    min-width: 200px;
    padding: 10px 10px;
    border-radius: 8px;
} */

.mieruka_btn.active {
    background-color: #047edc;
    /* box-shadow: 0 0 0 #037fdd;  影を消す */
}

.mieruka h2.headline {
    margin-bottom: 10px;
}

.mk_table_area {
    padding-top: 30px;
}

.mk_table {
    padding-bottom: 30px;
}

.mk_table th {
    position: relative;
    padding: 13px 0;
    border-bottom: 2px solid #a2a2a2;
    font-size: 1.5rem;
    color: #37414f;
}

.mk_table th::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 32px;
    height: 2px;
    background-color: #037fdd;
}

.mk_table_content {
    margin: auto 20px;
    padding: 20px 10px;
    border-bottom: 1px solid #e6e6e6;
}

.mk_table_content:last-child {
    border-bottom: none;
}

.mk_table .money {
    width: 40%;
    /* width: 80vw; */
}

.mk_table .period {
    width: 60%;
    /* width: 20vw; */
}

.mk_table .money strong {
    font-size: 3rem;
    color: #37414f;
}

.mk_table .money small {
    font-size: 1.2rem;
    color: #37414f;
}

.letter_btn.calendar_bnt {
    border: 2px solid #037fdd;
    background-color: #fff;
    color: #037fdd;
    /* max-width: 250px; */
    min-width: 170px;
    padding: 6px 12px;
    border-radius: 8px;
}

.switching_btn_area {
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    gap: 3px;
}

.switching_btn_area .switching {
    background-color: #c8c8c8;
    color: #fff;
    /* max-width: 250px; */
    min-width: 50px;
    padding: 6px 10px;
    border-radius: 5px;
    transition: .3s;
    margin: 0 2px;
}

.switching_btn_area .switching.active {
    background-color: #ff801e;
}

.mk_table_subheading {
    font-size: 2rem;
}

.mk_table_content td.review {
    display: block;
}

/* エネルギーの見える化------------------------ */

/* お問合せ------------------------ */
/* .list_area ul {
	justify-content: space-between;
} */
.list_area ul li h4 {
    font-weight: bold;
    margin-bottom: 15px;
}

.list_area ul li {
    /* width: 31%; */
    width: 300px;
    height: 300px;
    padding: 10px 10px;
    /* margin-bottom: 30px; */
}

.list_area ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.list_area ul li.yg {
    background-color: #a57de8;
    border-radius: 8px;
}

.list_area ul li.yg2 {
    background-color: #993399;
    border-radius: 8px;
}

.list_area ul li.pk {
    background-color: #ff7269;
    border-radius: 8px;
}

.list_area .white_box {
    /*padding: 20px 10px 50px;*/
    padding: 20px 10px 30px;
    /* 2025.12.08 Edit */
    position: relative;
    border-radius: 8px;
}

.list_area:has(.list_tp50) .white_box {
    padding-top: 50px;
}

.list_area:has(.list_pt) .white_box {
    /* 2025.12.09 Add */
    padding-top: 55px;
}

.list_area .icon_area {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50%;
    height: 74px;
    width: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list_top {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-right: 3px;
}

.basic_btn.history_btn {
    margin: 0;
    min-width: 210px;
    position: relative;
}

.basic_btn.history_btn::before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    width: 19px;
    height: 24px;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
}

.basic_btn.history_btn.yg {
    background-color: #a57de8;
}

.basic_btn.history_btn.pk {
    background-color: #ff7269;
}

.basic_btn.history_btn.yg::before {
    background-image: url('../images/yg_btn08.svg');
}

/* 注文履歴 変更案 */
/* .basic_btn.history_btn.pk {
    position: relative;
    background: linear-gradient(
        180deg,
        rgb(255, 125, 100) 0%,
        rgb(245, 110, 90) 100%
    );
    box-shadow: none;
}

.basic_btn.history_btn.yg::before {
    content: "";
    position: absolute;
    inset: 1;
    background-image: url('../images/yg_btn08.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.basic_btn.history_btn.pk::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(
        125deg,
        rgb(255, 170, 150) 0%,
        rgb(235, 80, 60) 100%
    );
    z-index: -1;
    box-shadow: 2px 2px 4px rgba(0,0,0,.4);
}
.basic_btn.history_btn.pk {
    color: #fff;
    font-weight: bold;
    text-shadow:
        0.75px  0     0 rgb(235,78,0),
       -0.75px  0     0 rgb(235,78,0),
        0      0.75px 0 rgb(235,78,0),
        0     -0.75px 0 rgb(235,78,0),
        0.75px  0.75px 0 rgb(235,78,0),
       -0.75px  0.75px 0 rgb(235,78,0),
        0.75px -0.75px 0 rgb(235,78,0),
       -0.75px -0.75px 0 rgb(235,78,0),

        1px     0     0 rgba(235,78,0,.75),
       -1px     0     0 rgba(235,78,0,.75),
        0       1px   0 rgba(235,78,0,.75),
        0      -1px   0 rgba(235,78,0,.75),
        1px     1px   0 rgba(235,78,0,.75),
       -1px     1px   0 rgba(235,78,0,.75),
        1px    -1px   0 rgba(235,78,0,.75),
       -1px    -1px   0 rgba(235,78,0,.75),

        2px 2px 4px rgba(0,0,0,0.5);
} */

.list_area .icon_area span {
    display: inline-block;
    width: 50px;
    /* 2025.12.09 追加 */
}

.list_area ul .basic_btn {
    max-width: 250px;
    margin: 30px auto 0 auto;
}

.list_area .reference_table li {
    width: 100% !important;
    height: auto !important;
}

.reference_table .ch_table tr {
    justify-content: flex-start;
    border: none;
}

.reference_table .ch_table td {
    text-align: left;
}

.reference_table .ch_table td.number {
    width: 8%;
    text-align: center;
}

.reference_table .ch_table td.r_item {
    width: 40%;
}

.reference_table .ch_table td.r_detail {
    width: 32%;
}

.reference_table .ch_table td.r_money {
    width: 20%;
    text-align: right;
}

.confirm_area .text_area {
    background-color: #fafafa;
    /* border: 2px solid #e6e6e6; */
    padding: 30px 30px;
}

.confirm_area .text_area h4 {
    font-size: 1.8rem;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.confirm_area .text_area p {
    margin-bottom: 10px;
}

.contact_history_box_bg {
    background-color: #fff;
    padding: 60px 30px;
}

#contact_button .icon-size {
    width: 70%;
}

#contact_button .rm-price br.pc-none {
    display: none;
}

#contact_button.re-detail .white_box {
    padding-bottom: 20px;
}

.ch_table {
    overflow-x: scroll;
}

.ch_table tbody {
    width: 800px;
}

.ch_table.rireki tbody {
    width: auto;
}

.ch_table tr {
    margin: 0;
    border: 1px solid #c8c8c8;
    border-bottom: none;
    justify-content: space-around;
}

.ch_table tr:last-child {
    border-bottom: 1px solid #c8c8c8;
}

.ch_table th {
    width: 33.3%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    border-right: 1px solid #ffffff;
    padding: 8px 3px;
    background-color: #98d616;
    color: #fff;
}

.ch_table th:last-child {
    border-right: none;
}

.ch_table tr:nth-child(odd) {
    background-color: #f6f6f6;
}

.ch_table td {
    width: 33.3%;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #c8c8c8;
    padding: 8px 8px;
}

.ch_table td:last-child {
    border-right: none;
}

/* アコーディオン */
.accordion-005 {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-005:not([open]) {
    margin-bottom: 7px;
}

.accordion-005 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /*padding: 1em 2em;*/
    padding: 0.75em 1em 0.75em 0.75em;
    /* 2025.12.08 Edit */
    border-left: 5px solid #a57de8;
    background-color: #f8f6f3;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    margin: 0.75rem 0;
    /* 2025.12.09 Add */
}

.accordion-005 summary::-webkit-details-marker {
    display: none;
}

.accordion-005 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #a57de8;
    border-right: 3px solid #a57de8;
    content: '';
    transition: transform .3s;
    box-sizing: content-box;
}

.accordion-005[open] summary::after {
    transform: rotate(225deg);
}

.accordion-005 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    /*padding: 10px 0;*/
    padding: 8px 0;
    /* 2025.12.08 Edit */
    transition: transform .5s, opacity .5s;
}

.accordion-005[open] p {
    transform: none;
    opacity: 1;
}

.accordion-005 .pricelist tr td {
    /* 2025.12.09 Add */
    font-weight: 500;
}

/* アコーディオン */
/* お問合せ------------------------ */
.contact_phone_area {
    /* 2025.12.08 Add */
    padding: 1.2rem;
    background-color: #f6f6f6;
}

/* ガス消し忘れ------------------------ */
.meter_check_area .text_area {
    /* 2025.12.09 Add */
    margin-top: 1rem;
}

.meter_check_area .text_area p:first-child {
    /* 2025.12.09 Add */
    margin-bottom: 1rem;
}

.meter_check_area h4 {
    margin-bottom: 20px;
}

.meter_check_area .flex {
    /* 2025.12.09 Add */
    justify-content: center;
}

.meter_check_area .flex .basic_btn {
    /* 2025.12.09 Add */
    flex: 1;
    margin: 0 0.4rem;
}

.meter_check_msg_inner {
    display: inline-block;
    text-align: left;
}

/* ガス消し忘れ------------------------ */

/* 注文------------------------ */
.order .list_top {
    justify-content: flex-end;
    padding-right: 3px;
}

.order_history_box_bg {
    background-color: #fff;
    padding: 60px 30px;
}

.order_history .ch_table th {
    width: 25%;
    background-color: #ff7269;
}

.order_history .ch_table td {
    text-align: left;
}

.order_history th.ch_day,
.order_history td.ch_day {
    width: 22%;
}

.order_history th.ch_contents,
.order_history td.ch_contents {
    width: 38%;
}

.order_history th.ch_su,
.order_history td.ch_su {
    width: 10%;
}

.order_history th.ch_person,
.order_history td.ch_person {
    width: 30%;
}

.order_history td.ch_su {
    text-align: right;
}

.order .list_area ul {
    justify-content: space-between;
}

.order .list_area ul li {
    /* 2025.12.08 Edit */
    width: 100% !important;
    height: auto !important;
}

/*.order .list_area ul li.pk {
    width: 100%;
    height: auto !important;
}*/

.order .slect_area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 0rem;
    /* 2025.12.08 Add */
    margin-top: 1.5rem;
    /* 2025.12.08 Add */
}

.order .slect_area .slect_box {
    width: 48%;
    display: flex;
    align-items: center;
}

.order .slect_area .slect_box h5 {
    width: 30%;
}

.order .button_area ul li.yg a {
    background: #ff7269;
    box-sizing: inherit;
}

.order .button_box span img {
    width: 30vw;
    max-width: 90px;
}

.slect_area {
    text-align: center;
}

.slect_box {
    display: inline-block;
    margin-top: 15px;
}

.slect_box:first-child {
    margin-top: 0;
}

.slect_area h5 {
    margin-bottom: 3px;
    margin-left: 0.5rem;
    /* 2025.12.08 Add */
}

.selectbox-001 {
    position: relative;
    display: inline-block;
}

.selectbox-001::before,
.selectbox-001::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.selectbox-001::before {
    right: 0;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 0 5px 5px 0;
    background-color: #037fdd;
}

.selectbox-001::after {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(50%, -50%) rotate(45deg);
    width: 5px;
    height: 5px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
}

.selectbox-001 select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 280px;
    min-width: 280px;
    height: 40px;
    padding: 5px 25px 5px 15px;
    border: none;
    border-radius: 5px;
    border: 2px solid #cacaca;
    background-color: #fff;
    color: #333333;
    cursor: pointer;
}

.selectbox-001 select[name="unit"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 55px;
}

.selectbox-001 select:focus {
    outline: 2px solid #037fdd;
}

/* 注文------------------------ */

/* 設定------------------------ */
.mb-3 {
    margin-bottom: 20px;
}

.mb-3:last-child {
    margin-bottom: 0;
}

label {
    display: block;
    margin-bottom: 3px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 7px 7px;
    font-size: 1.4rem;
    font-weight: 600 !important;
    line-height: 1.6;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control::placeholder {
    color: #999999e6;
    font-weight: 600;
}

.form_area {
    max-width: 450px;
    padding: 25px;
    margin: 0 auto;
}

.sending .form_area {
    max-width: 200px;
    padding: 20px 0px 40px 0;
}

.sending .mb-3 {
    margin-bottom: 10px;
}

.readonly {
    background-color: #e9e9e9;
}

textarea {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ced4da;
    padding: 10px 10px;
}

input::placeholder {
    color: #ddd;
    font-weight: 600;
}

.ECM_CheckboxInput {
    /* padding: 12px 8px; */
    display: flex;
    align-items: center;
    /* cursor: pointer; */
    margin-right: 8px;
}

.ECM_CheckboxInput-Input {
    margin: 0;
    width: 0;
    opacity: 0;
}

/* .ECM_CheckboxInput:hover{
	background: rgba(0,0,0,.05) !important;
}
.ECM_CheckboxInput:hover > .ECM_CheckboxInput-DummyInput{
	transform: scale(1.1);
} */
.ECM_CheckboxInput-Input:focus+.ECM_CheckboxInput-DummyInput {
    transform: scale(1.1);
}

.ECM_CheckboxInput-Input:checked+.ECM_CheckboxInput-DummyInput {
    background: #ff801e;
    border: 1px solid #ff801e;
}

.ECM_CheckboxInput-Input:checked+.ECM_CheckboxInput-DummyInput::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    height: 4px;
    border-radius: 2px;
    transform: translate(-6px, 5px) rotateZ(-135deg);
    transform-origin: 2px 2px;
    background: #FFFFFF;
}

.ECM_CheckboxInput-Input:checked+.ECM_CheckboxInput-DummyInput::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 4px;
    border-radius: 2px;
    transform: translate(-6px, 5px) rotateZ(-45deg);
    transform-origin: 2px 2px;
    background: #FFFFFF;
}

.ECM_CheckboxInput-DummyInput {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 30px;
    height: 30px;
    border: solid 2px transparent;
    border: 1px solid #ced4da;
    border-radius: 50%;
    transition: all .15s linear;
}

.ECM_CheckboxInput-LabelText {
    margin-left: 12px;
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.port_change .form-control {
    width: 86%;
}

.port_change_box {
    justify-content: space-between;
}

.port_change .form_area {
    max-width: 600px;
}

.various_change .form_area {
    max-width: 600px;
}

.form_area p {
    margin-bottom: 20px;
}

.v_unity {
    background-color: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 20px;
}

.v_unity_box {
    padding: 20px 15px;
}

.v_unity h5 {
    font-weight: bold;
    background-color: #037fdd;
    color: #f3f3f3;
    padding: 10px 10px;
    border-radius: 10px 10px 0 0;
}

.v_unity h6 {
    font-weight: bold;
    margin-bottom: 8px;
}

.form_area .v_unity p {
    margin-bottom: 5px;
}

.col-12-line {
    padding: 30px 0;
    border-bottom: 1px solid #ced4da;
}

.col-12-line .mb-3 {
    margin-bottom: 10px;
}

.col-12-line:first-child {
    padding: 0 0 30px 0;
}

.col-12-line:last-child {
    border-bottom: none;
}

.sending .ECM_CheckboxInput-DummyInput {
    margin-right: 10px;
}

.withdrawal .text_area {
    margin-bottom: 30px;
}

.withdrawal .text_area p {
    margin-bottom: 10px;
}

/* 設定------------------------ */
/* ログイン画面　追記250327 */
.login_btn_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.login_btn_grid .basic_btn {
    width: 100%;
}

/* ログイン画面　追記250402 */
.login-news h3 {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #dedede;
}

.browser .sp-block {
    display: none;
}

.browser .browser-hosoku h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #dedede;
    color: #0d2159;
}

.browser .browser-hosoku span {
    display: block;
    color: #8b8b8b;
    font-size: 1.4rem;
    margin-top: 5px;
    padding-left: 14px;
    text-indent: -14px;
}

.browser .browser-hosoku ul li {
    padding-left: 16px;
    text-indent: -16px;
}


/* 20250417 */
.line-link h3 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    /* background: #037fdd; */
    padding: 5px 20px;
    color: #037fdd;
    margin: 10px 0 0 0;
    font-size: 1.1rem;
}

.line-link .situation {
    font-size: 1.5rem;
    margin-top: 15px;
    text-align: center !important;
    margin-bottom: 40px !important;
}

.line-link .modal__content_area .move_btn {
    margin-bottom: 20px;
}

.line-link .modal__content_area .back_btn::before {
    content: '';
    position: absolute;
    /* background-image: url('../images/arrow06.svg'); */
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    top: 50%;
    right: 7%;
    transform: translateY(-50%) rotate(180deg);
    left: inherit;
}

.add_code.v_unity {
    padding: 5%;
}

.add_code.v_unity .v_unity_box {
    padding: 0;
    margin-bottom: 20px;
}

.add_code.v_unity .v_unity_box:last-of-type {
    margin-bottom: 0;
}

.cancell-code .code {
    max-width: 600px;
    padding: 15px 25px 0 25px;
    margin-inline: auto;
}

.cancell-code .add_code label {
    color: #aaa;
    font-size: 14px;
}

.cancell-code .form-control {
    appearance: auto;
}

/* 20250512 */
.btn_line {
    margin-top: 25px;
    background-color: #06c755;
}

.center-link {
    text-align: center;
}

.center-link,
.center-link2 {
    margin-top: 10px;
}

.common {
    display: inline-block;
    color: #037fdd;
    border-bottom: 2px solid #037fdd;
    padding-bottom: 1px;
}

.pricelist {
    overflow-x: hidden;
    border-collapse: collapse;
}

.reference_table .pricelist td.number {
    width: 60%;
    text-align: start;
    /* border-bottom: 1px solid #c8c8c8!important; */
    border-right: none;
    padding: 15px 10px;
}

.reference_table .pricelist td {
    text-align: center;
}

.pricelist tbody {
    width: 100%;
}

.reference_table .pricelist tr .r_item {
    width: 33.3%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.reference_table .pricelist tr .r_detail {
    width: 33.3%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.reference_table .pricelist tr .r_money {
    width: 40%;
    align-items: center;
    display: flex;
    justify-content: end;
    /*padding: 15px 10px;*/
    padding: 0px 15px 10px;
    /* 2025.12.08 Edit */
}

.dsp_none {
    display: none;
}

.reference_table .pricelist.ch_table tr:last-child {
    border: none;
}

/* css color button by item menu */
.button_area ul li.Mieruka a {
    background: linear-gradient(180deg,
            rgb(255, 145, 55) 0%,
            /* 上部（薄） */
            rgb(245, 120, 35) 100%
            /* 下部（濃） */
        );
    /* 角丸やパディングなどは既存 .button_area ul li a 側にあり、ここでは色だけ上書き */
    box-shadow: none;
    /* 本体には影を付けない */
}

.button_area ul li.Mieruka a::before {
    content: "";
    position: absolute;
    /* 枠線ぶんだけ外に広げる（2pxの外枠） */
    inset: -3px;
    /* 本体より少し大きい角丸にして“枠だけ”を見せる */
    border-radius: 18px;
    /* 既存 a の角丸が 15px なら +2px〜+2px相当で調整 */
    /* 角度125°のグラデーション（左上が薄、右下が濃） */
    background: linear-gradient(125deg,
            rgb(255, 185, 75) 0%,
            /* 左上（明） */
            rgb(240, 95, 5) 100%
            /* 右下（暗） */
        );
    z-index: -1;
    /* 背面に配置して“枠線”のように見せる */
    /* 重要：親 a を position: relative にしておく（既に定義済みであれば不要） */
    box-shadow: 2px 2px 4px gray;
    /* 下方向の影 */
}

.button_area ul li.Mieruka .btn-submit-menu {
    position: relative;
}

.button_area ul li.Mieruka .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        /* 第1リング：±0.75px（不透明） */
        0.75px 0 0 rgb(235, 78, 0),
        -0.75px 0 0 rgb(235, 78, 0),
        0 0.75px 0 rgb(235, 78, 0),
        0 -0.75px 0 rgb(235, 78, 0),
        0.75px 0.75px 0 rgb(235, 78, 0),
        -0.75px 0.75px 0 rgb(235, 78, 0),
        0.75px -0.75px 0 rgb(235, 78, 0),
        -0.75px -0.75px 0 rgb(235, 78, 0),
        /* 第2リング：±1.0px（半透明 0.75） */
        1px 0 0 rgba(235, 78, 0, .75),
        -1px 0 0 rgba(235, 78, 0, .75),
        0 1px 0 rgba(235, 78, 0, .75),
        0 -1px 0 rgba(235, 78, 0, .75),
        1px 1px 0 rgba(235, 78, 0, .75),
        -1px 1px 0 rgba(235, 78, 0, .75),
        1px -1px 0 rgba(235, 78, 0, .75),
        -1px -1px 0 rgba(235, 78, 0, .75),

        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button_area ul li.Contact a {
    background: linear-gradient(180deg,
            rgb(170, 140, 225) 0%,
            /* 上：薄 */
            rgb(145, 115, 200) 100%
            /* 下：濃 */
        );
    box-shadow: none;
}

.button_area ul li.Contact a::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(125deg,
            rgb(185, 175, 235) 0%,
            /* 左上：明 */
            rgb(130, 100, 175) 100%
            /* 右下：やや濃 */
        );
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}

.button_area ul li.Contact .btn-submit-menu {
    position: relative;
}

.button_area ul li.Contact .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        0.75px 0 0 rgb(160, 90, 240),
        -0.75px 0 0 rgb(160, 90, 240),
        0 0.75px 0 rgb(160, 90, 240),
        0 -0.75px 0 rgb(160, 90, 240),
        0.75px 0.75px 0 rgb(160, 90, 240),
        -0.75px 0.75px 0 rgb(160, 90, 240),
        0.75px -0.75px 0 rgb(160, 90, 240),
        -0.75px -0.75px 0 rgb(160, 90, 240),
        1px 0 0 rgba(160, 90, 240, .75),
        -1px 0 0 rgba(160, 90, 240, .75),
        0 1px 0 rgba(160, 90, 240, .75),
        0 -1px 0 rgba(160, 90, 240, .75),
        1px 1px 0 rgba(160, 90, 240, .75),
        -1px 1px 0 rgba(160, 90, 240, .75),
        1px -1px 0 rgba(160, 90, 240, .75),
        -1px -1px 0 rgba(160, 90, 240, .75),
        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button_area ul li.Contacts a {
    background: linear-gradient(180deg,
            rgb(135, 80, 165) 0%,
            /* 上：薄 */
            rgb(105, 40, 145) 100%
            /* 下：濃 */
        );
    box-shadow: none;
}

.button_area ul li.Contacts a::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(125deg,
            rgb(135, 50, 180) 0%,
            /* 左上：明 */
            rgb(80, 60, 100) 100%
            /* 右下：やや濃 */
        );
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}

.button_area ul li.Contacts .btn-submit-menu {
    position: relative;
}

.button_area ul li.Contacts .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        0.75px 0 0 rgb(135, 50, 180),
        -0.75px 0 0 rgb(135, 50, 180),
        0 0.75px 0 rgb(135, 50, 180),
        0 -0.75px 0 rgb(135, 50, 180),
        0.75px 0.75px 0 rgb(135, 50, 180),
        -0.75px 0.75px 0 rgb(135, 50, 180),
        0.75px -0.75px 0 rgb(135, 50, 180),
        -0.75px -0.75px 0 rgb(135, 50, 180),
        1px 0 0 rgba(135, 50, 180, .75),
        -1px 0 0 rgba(135, 50, 180, .75),
        0 1px 0 rgba(135, 50, 180, .75),
        0 -1px 0 rgba(135, 50, 180, .75),
        1px 1px 0 rgba(135, 50, 180, .75),
        -1px 1px 0 rgba(135, 50, 180, .75),
        1px -1px 0 rgba(135, 50, 180, .75),
        -1px -1px 0 rgba(135, 50, 180, .75),
        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button_area ul li.Meter a {
    background: linear-gradient(180deg,
            rgb(100, 200, 210) 0%,
            /* 上：薄 */
            rgb(80, 180, 195) 100%
            /* 下：濃 */
        );
    box-shadow: none;
}

.button_area ul li.Meter a::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(125deg,
            rgb(110, 220, 220) 0%,
            /* 左上：明 */
            rgb(50, 155, 170) 100%
            /* 右下：やや濃 */
        );
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}

.button_area ul li.Meter .btn-submit-menu {
    position: relative;
}

/* 文字輪郭（パターンB）— 輪郭色はテーマに合わせて緑青寄り */
.button_area ul li.Meter .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        0.75px 0 0 rgb(26, 150, 150),
        -0.75px 0 0 rgb(26, 150, 150),
        0 0.75px 0 rgb(26, 150, 150),
        0 -0.75px 0 rgb(26, 150, 150),
        0.75px 0.75px 0 rgb(26, 150, 150),
        -0.75px 0.75px 0 rgb(26, 150, 150),
        0.75px -0.75px 0 rgb(26, 150, 150),
        -0.75px -0.75px 0 rgb(26, 150, 150),
        1px 0 0 rgba(26, 150, 150, .75),
        -1px 0 0 rgba(26, 150, 150, .75),
        0 1px 0 rgba(26, 150, 150, .75),
        0 -1px 0 rgba(26, 150, 150, .75),
        1px 1px 0 rgba(26, 150, 150, .75),
        -1px 1px 0 rgba(26, 150, 150, .75),
        1px -1px 0 rgba(26, 150, 150, .75),
        -1px -1px 0 rgba(26, 150, 150, .75),
        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button_area ul li.Order a {
    background: linear-gradient(180deg,
            rgb(255, 125, 100) 0%,
            /* 上：薄 */
            rgb(245, 110, 90) 100%
            /* 下：濃 */
        );
    box-shadow: none;
}

.button_area ul li.Order a::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(125deg,
            rgb(255, 165, 155) 0%,
            /* 左上：明 */
            rgb(230, 80, 80) 100%
            /* 右下：やや濃 */
        );
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}

.button_area ul li.Order .btn-submit-menu {
    position: relative;
}

/* 文字輪郭（パターンB）— 輪郭色はテーマに合わせてコーラル寄り */
.button_area ul li.Order .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        0.75px 0 0 rgb(220, 80, 70),
        -0.75px 0 0 rgb(220, 80, 70),
        0 0.75px 0 rgb(220, 80, 70),
        0 -0.75px 0 rgb(220, 80, 70),
        0.75px 0.75px 0 rgb(220, 80, 70),
        -0.75px 0.75px 0 rgb(220, 80, 70),
        0.75px -0.75px 0 rgb(220, 80, 70),
        -0.75px -0.75px 0 rgb(220, 80, 70),
        1px 0 0 rgba(220, 80, 70, .75),
        -1px 0 0 rgba(220, 80, 70, .75),
        0 1px 0 rgba(220, 80, 70, .75),
        0 -1px 0 rgba(220, 80, 70, .75),
        1px 1px 0 rgba(220, 80, 70, .75),
        -1px 1px 0 rgba(220, 80, 70, .75),
        1px -1px 0 rgba(220, 80, 70, .75),
        -1px -1px 0 rgba(220, 80, 70, .75),
        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}


.button_area ul li.WEBMEISAI a {
    background: linear-gradient(180deg,
            rgb(50, 170, 235) 0%,
            /* 上：薄 */
            rgb(25, 145, 215) 100%
            /* 下：濃 */
        );
    box-shadow: none;
}

.button_area ul li.WEBMEISAI a::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(125deg,
            rgb(35, 205, 255) 0%,
            /* 左上：明 */
            rgb(15, 105, 170) 100%
            /* 右下：やや濃 */
        );
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}

.button_area ul li.WEBMEISAI .btn-submit-menu {
    position: relative;
}

/* 文字輪郭（パターンB）— 輪郭色はテーマに合わせてブルー寄り */
.button_area ul li.WEBMEISAI .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        0.75px 0 0 rgb(20, 100, 200),
        -0.75px 0 0 rgb(20, 100, 200),
        0 0.75px 0 rgb(20, 100, 200),
        0 -0.75px 0 rgb(20, 100, 200),
        0.75px 0.75px 0 rgb(20, 100, 200),
        -0.75px 0.75px 0 rgb(20, 100, 200),
        0.75px -0.75px 0 rgb(20, 100, 200),
        -0.75px -0.75px 0 rgb(20, 100, 200),
        1px 0 0 rgba(20, 100, 200, .75),
        -1px 0 0 rgba(20, 100, 200, .75),
        0 1px 0 rgba(20, 100, 200, .75),
        0 -1px 0 rgba(20, 100, 200, .75),
        1px 1px 0 rgba(20, 100, 200, .75),
        -1px 1px 0 rgba(20, 100, 200, .75),
        1px -1px 0 rgba(20, 100, 200, .75),
        -1px -1px 0 rgba(20, 100, 200, .75),
        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button_area ul li.Settings a {
    background: linear-gradient(180deg,
            rgb(220, 150, 50) 0%,
            /* 上：薄 */
            rgb(180, 120, 50) 100%
            /* 下：濃 */
        );
    box-shadow: none;
}

.button_area ul li.Settings a::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(125deg,
            rgb(240, 185, 85) 0%,
            /* 左上：明 */
            rgb(180, 110, 25) 100%
            /* 右下：やや濃 */
        );
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}

.button_area ul li.Settings .btn-submit-menu {
    position: relative;
}

/* 文字輪郭（パターンB）— 輪郭色はテーマに合わせてブラウン寄り */
.button_area ul li.Settings .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        0.75px 0 0 rgb(160, 100, 40),
        -0.75px 0 0 rgb(160, 100, 40),
        0 0.75px 0 rgb(160, 100, 40),
        0 -0.75px 0 rgb(160, 100, 40),
        0.75px 0.75px 0 rgb(160, 100, 40),
        -0.75px 0.75px 0 rgb(160, 100, 40),
        0.75px -0.75px 0 rgb(160, 100, 40),
        -0.75px -0.75px 0 rgb(160, 100, 40),
        1px 0 0 rgba(160, 100, 40, .75),
        -1px 0 0 rgba(160, 100, 40, .75),
        0 1px 0 rgba(160, 100, 40, .75),
        0 -1px 0 rgba(160, 100, 40, .75),
        1px 1px 0 rgba(160, 100, 40, .75),
        -1px 1px 0 rgba(160, 100, 40, .75),
        1px -1px 0 rgba(160, 100, 40, .75),
        -1px -1px 0 rgba(160, 100, 40, .75),
        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button_area ul li.LINE a,
.button_area ul li.gn a {
    background: linear-gradient(180deg,
            rgb(45, 185, 65) 0%,
            /* 上：薄（明） */
            rgb(30, 170, 50) 100%
            /* 下：濃（暗） */
        );
    box-shadow: none;
}

.button_area ul li.LINE a::before,
.button_area ul li.gn a::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(125deg,
            rgb(80, 205, 95) 0%,
            /* 左上：明 */
            rgb(70, 145, 70) 100%
            /* 右下：やや濃 */
        );
    z-index: -1;
    box-shadow: 2px 2px 4px gray;
}

.button_area ul li.LINE .btn-submit-menu,
.button_area ul li.gn .btn-submit-menu {
    position: relative;
}

/* 文字輪郭（パターンB）— 輪郭色はテーマに合わせてグリーン寄り */
.button_area ul li.LINE .button_box p.text_shadow strong,
.button_area ul li.gn .button_box p.text_shadow strong {
    color: #fff;
    text-shadow:
        0.75px 0 0 rgb(0, 150, 65),
        -0.75px 0 0 rgb(0, 150, 65),
        0 0.75px 0 rgb(0, 150, 65),
        0 -0.75px 0 rgb(0, 150, 65),
        0.75px 0.75px 0 rgb(0, 150, 65),
        -0.75px 0.75px 0 rgb(0, 150, 65),
        0.75px -0.75px 0 rgb(0, 150, 65),
        -0.75px -0.75px 0 rgb(0, 150, 65),
        1px 0 0 rgba(0, 150, 65, .75),
        -1px 0 0 rgba(0, 150, 65, .75),
        0 1px 0 rgba(0, 150, 65, .75),
        0 -1px 0 rgba(0, 150, 65, .75),
        1px 1px 0 rgba(0, 150, 65, .75),
        -1px 1px 0 rgba(0, 150, 65, .75),
        1px -1px 0 rgba(0, 150, 65, .75),
        -1px -1px 0 rgba(0, 150, 65, .75),
        /* ▼追加：後ろに落ち影（ぼかしあり） */
        2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button_area ul li.Anshin a {
    background-color: #ff9cb1;
}

.button_area ul li form.menu-form {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    padding: 30px 0;
    box-sizing: border-box;
}

.contents_menu .menu_btn {
    position: relative;
}

.contents_menu .menu_btn.new:after {
    display: block;
    height: 27px;
    content: url(../images/icon_new.png);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* 設定------------------------ */

/* my customizations */
.btnCustomContnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1.2em 2em;
    border-left: 5px solid #98d616;
    background-color: #f8f6f3;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
}

.btnCustomContnt::-webkit-details-marker {
    display: none;
}

.btnCustomContnt::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #98d616;
    border-right: 3px solid #98d616;
    content: '';
    transition: transform .3s;
}

.btnCustomContnt {
    width: 100%;
    outline: none;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    font-size: 1.5rem;
    padding: 1.2em .8em;
    transition: all .3s;
    user-select: none;
    color: #000;
}

.btnCustomContnt:hover {
    background-color: #f0f0f0;
}

.gas_efficiently .accordion-005 {
    margin: 8px auto;
    max-width: 900px;
}

.btnCustomContnt::after {
    transform: translateY(0) rotate(-225deg);
}

.accordion_area.gas_efficiently {
    padding: 20px 30px;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

/*landing view mieru*/
.title_bar {
    background: linear-gradient(0deg, rgba(0, 93, 163, 1) 0%, rgba(0, 105, 177, 1) 98%, rgba(0, 123, 197, 1) 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 30px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title_bar .text-section {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex: 1;
}

.title_bar .text-section i {
    color: white;
    font-size: 24px;
}

.title_bar .text-section span {
    color: white;
    font-size: 26px;
    font-weight: bolder;
    margin-left: 10px;
}

.title_bar .subtext {
    color: #fff;
    font-size: 18px;
    margin-top: auto;
    font-weight: bold;
}

.title_bar .image-section img {
    max-width: 390px;
    object-fit: cover;
    margin-left: 5px;
}

.contents-post {
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 20px 14px;
    max-width: 100%;
    width: 100%;
}

.contents-post__header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 15px 10px;
    background-image: linear-gradient(to right, #e2eeea, #e4efeb, #e5f0ec, #e7f0ed, #e8f1ee);
    border-radius: 8px;
}

.contents-post__header-space {
    background-color: #3b82f6;
    height: 40px;
    width: 8px;
    border-radius: 4px;
    margin-left: 20px;
}

.contents-post__title {
    font-size: 25px;
    font-weight: bold;
    color: #1e3a8a;
    margin-left: 15px;
}

.contents-post__content {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 45px;
}

.contents-post__image img {
    max-width: 100%;
    height: auto;
}

.contents-post__text {
    flex: 1;
    padding: 16px;
}

.contents-post__paragraph {
    color: #374151;
    margin-bottom: 8px;
}

.contents-post__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.contents-post__footer-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.contents-post__text {
    margin-top: 15px;
    font-size: 1.8rem;
}

.contents-post__text p {
    line-height: 1.6em;
}

p.contents-post__paragraph {
    margin: 15px 0;
    text-align: left;
}

.bg_img_content {
    background-image: url('../images/contents/page/bg_contents.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.accordion_area.gas_efficiently {
    padding: 20px 30px;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

a {
    cursor: pointer !important;
}

button {
    cursor: pointer !important;
}


/* co2 */
/* CO2バナーのレスポンシブ対応 */
.letter_bnr_area {
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.letter_bnr_area.flex img {
    max-width: 600px;
}

/* PC・タブレット用画像（デフォルト） */
.co2_bnr_pc {
    display: block;
}

.co2_bnr_sp {
    display: none;
}

.contents_body .note {
    margin-bottom: 30px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 6px 10px;
    border-radius: 8px;
}

.contents_body>.note>ul>li,
.content_body--text>ul>li {
    margin: 15px 0;
}

.contents_main .body2 {
    display: flex;
    flex-direction: row;
    column-gap: 18px;
}

.contents_menu .menu_btn {
    position: relative;
}

.contents_menu .menu_btn.new:after {
    display: block;
    height: 27px;
    content: url(../images/icon_new.png);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.logout_btn_area {
    cursor: pointer;
}

.dsp_none {
    display: none;
}

.graph_img img {
    width: 100%;
    object-fit: contain;
}

.letter_btn_area a,
.letter_btn_area button,
.letter_btn_area div.flex-1 {
    /* flex: 1; */
}

.letter_btn_area .invisible {
    visibility: hidden;
}

.mieruka_navigate .front_btn {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
    display: block;
}

.mieruka_navigate .back_btn {
    text-align: left
}

.switching_btn_area .switching {
    cursor: pointer;
}

.letter_btn.calendar_bnt {
    max-width: fit-content
}

.letter_btn_area.comparison .inputButton:first-of-type {
    margin-left: 0;
}

#ui-datepicker-div {
    z-index: 3 !important;
    margin-top: 2em !important;
    /* left: 30% !important; */
}

.ui-widget {
    font-size: 1.2em !important;
}

#compmodel_box {
    display: flex;
    column-gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

/* 600px以下で画像を画面幅に合わせて縮小 */
@media screen and (max-width: 600px) {
    .letter_bnr_area.flex img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
}

/* スマートフォン用（480px以下） */
@media screen and (max-width: 480px) {
    .co2_bnr_pc {
        display: none;
    }

    .co2_bnr_sp {
        display: block;
    }

    .letter_bnr_area.flex img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
}

.co2-detail_container {
    padding: 5%;
    background: #009688;
    border-radius: 20px;
}

.co2-detail_container .bg-beige {
    background: #fff7d7;
    padding: 20px;
    border-radius: 10px;
}

.co2-detail_container .flex-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.co2-detail_container .flex-box li {
    position: relative;
    width: 22%;
}

.co2-detail_container .flex-box li::after {
    content: "";
    width: 1px;
    height: 100%;
    background: #DFEBBA;
    position: absolute;
    top: 0;
    right: -20px;
}

.co2-detail_container .flex-box li:last-of-type:after {
    content: none;
}

.co2-detail_container .flex-box .btn {
    width: 90%;
    margin-inline: auto;
}

.co2-detail_container .flex-box .basic_btn {
    font-size: 1.1rem;
    padding: 6px 12px 6px 15px;
    text-align: center;
    background: #009688;
}

.co2-detail_container .hosoku {
    display: block;
    text-align: left;
    margin-bottom: 20px;
    color: #333;
}

.co2-detail_container .hosoku a {
    text-decoration: underline;
}

.co2-detail_container h2 {
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 20px;
}

.co2-detail_container h2 .yellow {
    color: #FFFC31;
}

.co2-detail_container .txt {
    color: #006837;
    text-align: left;
    margin-bottom: 20px;
}

.co2-detail_container.all-area .txt {
    text-align: start;
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #333;
    margin-bottom: 50px;
}

.co2-detail_container .torikumi-box {
    background: 20px;
    background: #DFEBBA;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.co2-detail_container .torikumi-box h3 {
    color: #006837;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.co2-detail_container .torikumi-box p {
    font-weight: 400;
}

.co2-detail_container.all-area .img .sp {
    display: none;
}

.co2-detail_container.meyasu-area .flex-box {
    display: flex;
    justify-content: space-between;
}

.co2-detail_container.meyasu-area li {
    width: 49%;
    margin-bottom: 20px;
}

.co2-detail_container.meyasu-area .item-flex {
    display: flex;
    justify-content: space-between;
}

.co2-detail_container.meyasu-area .item-flex:nth-of-type(3) {
    margin-bottom: 0;
}

.co2-detail_container.meyasu-area .item-flex:nth-of-type(4) {
    margin-bottom: 0;
}

.co2-detail_container.meyasu-area .flex-box li::after {
    content: none;
}

.co2-detail_container.meyasu-area .item-flex .joken {
    margin-bottom: 10px;
}

.co2-detail_container.meyasu-area li h2 {
    color: #006837;
}

.co2-detail_container.meyasu-area li h2 small {
    color: #006837;
}

.co2-detail_container.meyasu-area .item-flex h3 {
    font-size: 1.8rem;
    color: #006837;
    margin-bottom: 10px;
}

.co2-detail_container.meyasu-area .item-flex p {
    font-weight: 400;
}

#SelDate_box {
    display: flex;
    justify-content: center;
}

.co2-bnr {
    padding-top: 0 !important;
    margin-bottom: 1em !important;
}

.co2-bnr_wrap {
    background-color: #f6f6f6;
    border-color: #ddd;
    color: #333;
    color: #ddd;
    text-shadow: 0 1px 0 #f3f3f3;
    background-color: transparent;
    color: #fff;
    text-shadow: 1px 1px 1px #aaa;
    white-space: normal !important;
    text-decoration: none !important;
    font-family: sans-serif !important;
    font-weight: bold !important;
    font-size: 1em;
    line-height: 1.3;
    margin: .5em 0;
    padding: 0;
    display: block;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    display: block;
    overflow: unset;
    width: 500px;
}

.co2-bnr_wrap a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    background: linear-gradient(#65b32d 0%, #9ad441 70%) !important;
    overflow: unset;
    color: #fff !important;
}

.co2-bnr_wrap a:hover {
    color: #fff !important;
}

.co2-bnr_txt {
    position: relative;
    padding: 30px 0;
    font-size: 1.15em;
    width: 100%;
    box-sizing: border-box;
    padding-left: 35%;
    text-align: left;
}

.co2-bnr_txt em {
    font-style: normal;
    color: yellow;
    font-weight: 600;
}

.co2-bnr_tree {
    position: absolute;
    left: 3%;
    bottom: 0;
    width: 140px;
    z-index: 1;
}

.co2-bnr_tree img {
    width: 100%;
    vertical-align: bottom;
}

.co2-bnr_more {
    position: relative;
    width: 100%;
    padding: 10px 0;
    background-color: transparent;
    background: #00bdfd;
    background: -moz-linear-gradient(top, linear-gradient(to bottom, #56c225 0%, #71d01e 7%, #50c61c 15%, #369922 44%, #128b14 45%, #159c24 70%, #75c233 100%));
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56c225), color-stop(7%, #71d01e), color-stop(15%, #50c61c), color-stop(44%, #369922), color-stop(45%, #128b14), color-stop(70%, #159c24), color-stop(100%, #75c233));
    background: -webkit-linear-gradient(top, linear-gradient(to bottom, #56c225 0%, #71d01e 7%, #50c61c 15%, #369922 44%, #128b14 45%, #159c24 70%, #75c233 100%));
    background: -o-linear-gradient(top, linear-gradient(to bottom, #56c225 0%, #71d01e 7%, #50c61c 15%, #369922 44%, #128b14 45%, #159c24 70%, #75c233 100%));
    background: -ms-linear-gradient(top, linear-gradient(to bottom, #56c225 0%, #71d01e 7%, #50c61c 15%, #369922 44%, #128b14 45%, #159c24 70%, #75c233 100%));
    background: linear-gradient(to bottom, linear-gradient(to bottom, #56c225 0%, #71d01e 7%, #50c61c 15%, #369922 44%, #128b14 45%, #159c24 70%, #75c233 100%));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097c7', endColorstr='#085BA2', GradientType=0);
    box-sizing: border-box;
    padding-left: 25%;
}

.co2-bnr_wrap .ui-btn-icon-right {
    padding-right: 0;
}

.w-100 {
    width: 100%;
}

/* スマホだけ表示（768px 以下はお好みで調整） */
@media screen and (max-width: 768px) {
    br.sp_br {
        display: inline;
    }

    br.pc_br {
        display: none;
    }
}

/* =========================================================
   2025/12/08 注文履歴ページ（order_history.html）調整
   25年12月の修正点
   ・外枠のピンク背景を削除
   ・履歴テーブルを通常の table レイアウトに戻す
   ・ボーダー/縦線の削除＆はみ出し防止
   ========================================================= */

/* 外側のピンク枠（li.pk の背景）を消す */
.order_history .list_area ul li.pk {
    background-color: transparent !important;
    padding: 0 !important;
    height: auto !important;
}

/* 白いボックスのパディングだけ注文履歴用に調整 */
.order_history .white_box {
    border: none !important;
    padding: 20px 16px !important;
}

/* ▼ 以下、履歴テーブルだけ「普通の table」に戻す ▼ */

/* table 本体 */
.order_history .history_list .ch_table {
    overflow-x: visible !important;
    display: table !important;
    width: 100% !important;
    border: none !important;
}

/* tbody / tr / th / td の display を上書きして flex/block を解除 */
.order_history .history_list .ch_table tbody {
    display: table-row-group !important;
    width: auto !important;
}

.order_history .history_list .ch_table tr {
    display: table-row !important;
    border: none !important;
    /* 行の外枠線を消す */
}

.order_history .history_list .ch_table th,
.order_history .history_list .ch_table td {
    display: table-cell !important;
    border: none !important;
    /* セルの線を消す */
    width: auto !important;
    white-space: normal !important;
    /* 折り返し許可 */
    text-align: left !important;
    padding: 2px 4px;
}

/* 数量列だけ右寄せ */
.order_history .history_list .ch_table td.ch_su {
    text-align: right !important;
}

.order_history .page_cnt {
    margin: 1rem 0.5rem 0;
}

.order_history .history_list {
    border-bottom: gray solid 1px;
    border-left: gray solid 1px;
    border-right: gray solid 1px;
}

/* 灰色カードの枠線も念のため無効化 */
.order_history .history_list .history_box {
    /*border: none !important;*/
    border-top: gray solid 1px;
    padding: 12px 15px;
}

.order_history .history_list .history_box p {
    padding: 2px 0;
}

.order_history .history_list .history_box p.order_item {
    width: 75%;
}

.order_history .history_list .history_box p.order_num {
    width: 25%;
    text-align: right;
}

/* =========================================================
   2025/12/08 注文履歴ページ（history_box の交互背景）
   ========================================================= */

/* 奇数の history_box（1件目、3件目…） */
.order_history .history_list .history_box:nth-child(odd) {
    background: #f6f6f6 !important;
    /* 薄グレー */
}

/* 偶数の history_box（2件目、4件目…） */
.order_history .history_list .history_box:nth-child(even) {
    background: #ffffff !important;
    /* 白 */
}

/* 行内の td だけ背景が上書きされないように透明化 */
.order_history .history_list .history_box .ch_table td,
.order_history .history_list .history_box .ch_table tr {
    background: transparent !important;
}


/* =========================================================
   2025/12/08 注文履歴ページ（前項／次項ボタンレイアウト）
   ========================================================= */

.order_history .page_nav_area {
    display: flex;
    justify-content: space-between;
    /* 左右に配置 */
    gap: 10px;
    /*margin-top: 20px;*/
}

/* ボタンの幅を均等にする（左右に2つ置いたときの最適化） */
.order_history .page_nav_area .basic_btn {
    flex: 1;
    /* 横幅を均等に */
    text-align: center;
    padding: 12px 0 !important;
    /* ボタンの高さを調整 */
    font-size: 16px;
    margin-top: 1rem;
}

/* =========================================================
   2025/12/08 注文履歴ページ（前項/次項の矢印ボタン）
   ========================================================= */

/* ボタンを左右に配置（2個に対応） */
.order_history .page_nav_area {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* ボタンサイズを均等にする */
.order_history .page_nav_area .basic_btn {
    flex: 1;
    text-align: center;
    padding: 12px 0 !important;
    font-size: 16px;
}

/* =========================================================
   2025/12/08 注文履歴ページ（前項ボタンサイズ修正）
   ========================================================= */

/* 前項ボタンの余白は元に戻す（move_btn のデフォルトと同じ） */
.order_history .page_nav_area .prev_btn {
    padding-left: 0 !important;
}

/* 左矢印の位置を微調整して自然に見せる */
.order_history .page_nav_area .prev_btn::before {
    left: 12px !important;
    /* ボタンの左から12px に配置 */
    right: auto !important;
    /* 右側配置を無効化 */
}

/* =========================================================
   2025/12/08 前項ボタンは左向き矢印にする
   ========================================================= */

.order_history .page_nav_area .prev_btn::before {
    content: '';
    position: absolute;
    /* background-image: url('../images/arrow06.svg') !important;  ← 左向き矢印に強制変更 */
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 12px;
    /* ボタン左に配置 */
    right: auto !important;
    transform: translateY(-50%);
}

/* =========================================================
   2025/12/08 contact_history お問い合わせ履歴カード化
   25年12月の修正点
   ========================================================= */

/* history_box を交互背景（1件目グレー） */
.contact_history .history_list .history_box:nth-child(odd) {
    background: #f6f6f6 !important;
}

.contact_history .history_list .history_box:nth-child(even) {
    background: #ffffff !important;
}

.contact_history .history_list .history_box .ch_table td,
.contact_history .history_list .history_box .ch_table tr {
    background: transparent !important;
}

/* 前項 / 次項 ボタンレイアウト（order_history と同じ） */
.contact_history .page_nav_area {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.contact_history .page_nav_area .basic_btn {
    flex: 1;
    text-align: center;
    padding: 12px 0 !important;
    font-size: 16px;
}

/* 前項ボタン：左向き矢印（arrow06.svg） */
.contact_history .page_nav_area .prev_btn {
    padding-left: 0 !important;
}

.contact_history .page_nav_area .prev_btn::before {
    content: '';
    position: absolute;
    /* background-image: url('../images/arrow06.svg') !important; */
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 12px;
    right: auto !important;
    transform: translateY(-50%);
}

/* =========================================================
   2025/12/08 contact_history レイアウト調整
   25年12月の修正点
   ・右側に出ていた余白を解消（カードを横幅いっぱいに）
   ========================================================= */

.contact_history .list_area ul li.pk {
    width: 100% !important;
    /* 共通の 300px を上書きして全幅に */
    max-width: 100% !important;
    height: auto !important;
    /* 高さ300px固定も解除して中身に合わせる */
    padding: 0 0 10px !important;
}

/* =========================================================
   2025/12/08 ページングボタン：次項だけの場合の右寄せ＋幅調整
   ========================================================= */

.page_nav_area>.basic_btn:only-child {
    margin-left: auto;
    /* コンテナの右側に寄せる */
    flex: 0 0 60%;
    /* 横幅を全体の60%に固定して、潰れを防ぐ */
    max-width: 260px;
    /* タブレット以上でも広がりすぎないように */
    min-width: 160px;
    /* 極端に小さくならないよう保険 */
}

.box_shadow {
    box-shadow: 2px 2px 4px gray;
    /* 下方向の影 */
    transition: all 0.1s ease-in-out;
}

.box_shadow:active {
    transform: translateY(4px);
    /* 下に移動 */
    box-shadow: 0 0 0 #037fdd;
    /* 影を消す */
}

.text_shadow {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.icon_shadow {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.img_shadow {
    filter: drop-shadow(0 4px 6px rgba(117, 113, 113, 0.5));
}

/*--------------------問合せ履歴ボタン装飾--------------------*/
#contact_button .basic_btn.history_btn {
    background: linear-gradient(to bottom,
            rgb(170, 140, 225) 0%,
            rgb(145, 115, 200) 100%);
    border: 2px solid rgb(145, 115, 200);
    border-radius: 9999px;
    /* 両端を丸く */
    color: #fff;
    font-weight: bold;
    padding: 10px 28px;
    /* 丸ボタンに合う広さ */
    display: inline-block;
    transition: 0.3s;
}

/*--------------------注文履歴ボタン装飾--------------------*/
.order .basic_btn.history_btn {
    background: linear-gradient(to bottom,
            rgb(255, 125, 100) 0%,
            rgb(245, 110, 90) 100%);
    border: 2px solid rgb(245, 110, 90);
    border-radius: 9999px;
    /* 両端を丸く */
    color: #fff;
    font-weight: bold;
    padding: 10px 28px;
    /* 丸ボタンに合う広さ */
    display: inline-block;
    transition: 0.3s;
}

.is-hidden {
    visibility: hidden;
    pointer-events: none;
}