.screen_type_lcd img,
.screen_type_oled img {
    margin-left: 0.5rem; /* 画像とテキストの間にスペースを追加 */
    width: 1rem; /* 画像の幅を指定 */
    height: 1rem; /* 画像の高さを指定 */
}

/* 共通のスタイル */
.responsive-image {
    position: relative;
    text-align: center;
}

/* パソコン用画像のデフォルト表示 */
.desktop-image {
    display: block; /* パソコン用画像を表示 */
    width: 100%; /* 必要に応じて調整 */
    height: auto;
}

/* スマホ用画像のデフォルト非表示 */
.mobile-image {
    display: none; /* スマホ用画像を非表示 */
}

/* スマホ用のスタイル */
@media (max-width: 835px) {
    .desktop-image {
        display: none; /* パソコン用画像を非表示 */
    }

    .mobile-image {
        display: block; /* スマホ用画像を表示 */
        width: 100%; /* 必要に応じて調整 */
        height: auto;
    }
}

/* heading-1のスタイル */
 .heading-1 {
        display: flex;
        font-size: 2vmax;
        justify-content: center;
        align-items: center;
        color: #333333;
	  
    }

    .heading-1::before,
    .heading-1::after {
        width: 3px;
        height: 40px;
        background-color: #2589d0;
        content: "";
    }

    .heading-1::before {
        transform: rotate(-35deg);
        margin-right: 30px;
    }

    .heading-1::after {
        transform: rotate(35deg);
        margin-left: 30px;
    }

.select {
    display: flex;
flex-wrap: wrap;
}

.button-003 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% - 40px) / 2);
    margin: 10px;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 0.8em;
}

.button-003 a {
color: #fff;
}

.button-003:hover {
    background-color: #1579c0;
}

.heading-026 {
    color: #333333;
}

.heading-026:first-letter {
    color: #2589d0;
    font-size: 2em;
}

.heading-027 {
    color: #333333;
}

.heading-027 span{
    color: #2589d0;
    font-size: 2em;
}
/*---スムーズスクロール---*/
html { scroll-behavior: smooth;}

/*---タイトル---*/
.heading-003 {
    padding:0 .4em .2em;
    border-bottom: 3px dotted #2589d0;
    background-color: #ffffff;
    color: #333333;
}

.accordion-002 {
    max-width: auto;
    margin-bottom: 7px;
    border: 2px solid #2589d0;
    border-radius: 5px;
}

.accordion-002 summary {
    display: flex;
    flex-direction: column; /* デフォルトは縦並び */
    align-items: center;
    position: relative;
    padding: 1em 2em 0 2em;
    color: #2589d0;
    font-weight: 600;
    cursor: pointer;
}

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

.accordion-002 summary::before,
.accordion-002 summary::after {
    position: absolute;
    right: calc(2em + 2.5px);
    width: 3px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    content: '';
    transition: transform 0.3s;
}

.accordion-002 summary::before {
    rotate: 90deg;
}

.accordion-002 summary::after {
    transition: rotate 0.3s;
}

.accordion-002[open] summary::after {
    rotate: 90deg;
}

.accordion-002 .title {
    margin-bottom: 0.5em; /* デフォルトでタイトルと画像間に余白 */
    white-space: nowrap; /* 改行を防ぐ */
    overflow: hidden;
    text-overflow: ellipsis; /* 必要なら省略記号 */
    text-align: center;
}

.accordion-002 .title_image {
    position: relative;
    width: 80%; /* デフォルトはスマホ用の幅 */
    height: auto;
    overflow: hidden;
    padding-bottom: 25%; /* 高さを画像の上1/4に制限 */

   /* マスクの設定 */
    mask-image: linear-gradient(to bottom, black, transparent); /* 上から下へのグラデーション */
    -webkit-mask-image: linear-gradient(to bottom, black, transparent); /* Webkitブラウザ用 */
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 10%;
    -webkit-mask-size: 100% 100%;
}

.accordion-002 .title_image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover; /* ボーダーいっぱいに表示 */
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
}

.accordion-002 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 0 0 1em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-002[open] p {
    transform: none;
    opacity: 1;
line-height: 0.5;
}

.menu_box {
padding: 1em 0 0 0;
}

.menu1 {
padding: 0.5rem 1em;
    margin: 0em 1em;
font-weight: bolder;
font-size: large;
border-radius: 3px;
border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

ol.price {
  counter-reset:list;
  list-style-type:none;
  padding:0;
}

ol.price li {
    position: relative;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 1em 0 1em 0;
}

ol.price li::after {
    content: ''; /* 空の疑似要素 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 1rem; /* 右に1remのスペース */
    border-bottom: dashed 1px #2589d0; /* dashedのスタイル */
}

ol.price li:before {
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid #2589d0;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translat
}


.repair-time {
  margin-left: auto; /* 自動的に左側に余白を作り、右寄せにする */
  text-align: right; /* テキストを右寄せ */
  font-size: 14px; /* 必要に応じて調整 */
  color: #555; /* 必要に応じて色を調整 */
margin-right: 1rem;
}

/* デフォルトの縦並び部分 */
.vertical-container {
    display: grid;
    align-items: center; /* 垂直方向で中央揃え */
    gap: 0.5rem; /* 要素間の隙間 */
}

/* 横並び部分 */
.horizontal-container {
    display: grid;
align-items: center; /* 垂直方向で中央揃え */
    gap: 0.5rem; /* 要素間の隙間を調整 */
margin: 1.2em 0 0 0;
}

@media (max-width: 835px) {
.screen_type_lcd,
.screen_type_oled {
    display: inline-flex; /* インライン要素でフレックスボックスを適用 */
    align-items: center; /* 垂直方向で中央揃え */
    justify-content: center; /* 水平方向で中央揃え */
    color: #fff;
    background-color: #eb6100;
    border-radius: 100vh;
    padding: 0.2rem 1rem;
    font-size: 0.8rem;
    line-height: 1;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    order: -1;
    letter-spacing: 5px;
    text-align: center;
}
}

.box-005 {
    width: auto;
    margin-bottom: 2rem;
    border: 2px solid #f06060;
    border-radius: 5px;
    color: #333333;
}

.box-005 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #f06060;
    font-weight: 600;
    vertical-align: top;
}

.box-005 img {
    padding-right: 4px;
}

.box-005 p {
    margin: 0;
    padding: 0 1.5em 1em;
    margin-right: 1em;
    line-height: 1.5em;
}

.accordion-001 {
    background-color: #f0f5f9;
margin-left: 2em;
    margin-right: 2em;
}

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

.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-radius: 5px;
    background-color: #f06060;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

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

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

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

.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

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

/* パソコン表示用のスタイル */
@media (min-width: 835px) { /* パソコン用に幅を調整 */

    .box-004 {
        display: flex;
        grid-gap: 0 .7em;
        margin: 0 auto;
        padding: 1em;
        border-radius: 5px;
        background-color: #ffebee;
        color: #333333;
    }
    
    .box-004::before {
        width: 24px;
        height: 24px;
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
    }
    
    .box-004 p {
        margin: 0;
        padding: 0 0 0 .7em;
        border-left: 1px solid #f06060;
    }
    .accordion-002 summary {
        flex-direction: row; /* 横並び */
        justify-content: center; /* 子要素を右寄りに配置 */
        align-items: center; /* 縦方向で中央揃え */
    }

   .accordion-002 .title_image {
    position: relative;
    width: 100%; /* 横並び時の画像の幅 */
    padding-bottom: 25%; /* 高さを画像の上1/4に制限 */
    overflow: hidden; /* グラデーション外の部分を隠す */

    /* グラデーションをマスクとして適用 */
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 10%;
    -webkit-mask-size: 100% 100%;
}

/* 画像自体のスタイル */
.accordion-002 .title_image img {
    width: 100%; /* 画像の幅を100%に */
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 画像を枠にフィットさせる */
    pointer-events: none; /* クリックを無効化 */
}

.accordion-002 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 0 0 8em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.menu1 {
padding: 0.5rem 1em;
    margin: 0em 8em;
font-weight: bolder;
font-size: large;
border-radius: 3px;
border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

ol.price li:before {
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 7em;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid #2589d0;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translat
}

.repair-time {
    margin-right: 12em;
    text-align: right;
    font-size: 14px;
    color: #555;
}

@media (min-width: 836px) {
    .accordion-002 summary {
        display: grid;
        grid-template-columns: 1fr 1fr; /* タイトルと画像を同じ幅に分割 */
        align-items: center; /* 子要素を縦方向に中央揃え */
    }

    .accordion-002 .title {
        text-align: center; /* タイトルを中央揃え */
        font-size: 1.2em;
    }

    .accordion-002 .title_image {
        display: flex;
        justify-content: center; /* 画像を中央揃え */
        align-items: center;
    }


.subtitle {
    padding: .5em .7em;
    border: 2px solid #2589d0;
    box-shadow: 5px 5px #2589d0;
    color: #2589d0;
}

.box-005 {
    width: auto;
    margin-bottom: 2rem;
    border: 2px solid #f06060;
    border-radius: 5px;
    color: #333333;
}

.box-005 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #f06060;
    font-weight: 600;
    vertical-align: top;
}

.box-005 img {
    padding-right: 4px;
}

.box-005 p {
    margin: 0;
    padding: 0 1.5em 1em;
    margin-right: 1em;
    line-height: 1.5em;
}

.accordion-001 {
    background-color: #f0f5f9;
margin-left: 2em;
    margin-right: 2em;
}

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

.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-radius: 5px;
    background-color: #f06060;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

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

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

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

.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

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

/* デフォルトの縦並び部分 */
.vertical-container {
    display: flex; /* フレックスボックスを適用 */
    flex-direction: row; /* 横並び */
    align-items: center; /* 垂直方向で中央揃え */
    gap: 0.5rem; /* 要素間の隙間 */
}

/* 横並び部分 */
.horizontal-container {
    display: flex; /* 横並びにする */
    align-items: center; /* 垂直方向で中央揃え */
    gap: 0.5rem; /* 要素間の隙間を調整 */
}


}
}

@media (min-width: 835px) {
.screen_type_lcd,
.screen_type_oled {
    color: #fff;
    background-color: #eb6100;
    border-radius: 100vh;
    padding: 0.2rem 1rem;
    font-size: 0.8rem;
    line-height: 1;
}

/* 時間部分 */
.repair-time {
    margin-left: auto;
    text-align: right;
    font-size: 14px;
    color: #555;
}
}