@charset "utf-8";

@import url("../../css/service_res.css");
html {
  scroll-behavior: smooth;
}
.contents {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.contents h1 {
    color: #fff;
    width: 100%;
    background: #00933E;
    font-size: 160%;
    padding-left: 1em;
}

/*
h1[id] {
    display: block;
    height: 6rem;
    margin-top: -6rem;
    content: "";
}
*/

.contents h2 {
    width: 100%;
}

.h2title {
    width: 100%;
    margin: 15px auto;
}

#maincontents h2 {
    background-color: #ddd;
    border-radius: 5px;
    margin: 10px 0;
    background-image: none;
}

#maincontents h2.relatedservicestitle_3 {
    border-radius: unset;
}

#maincontents h2.relatedservicestitle_3.subtitle {
    box-sizing: border-box;
    width: 100%;
    border-top: 1px dotted #666;
    border-bottom: 1px dotted #666;
    margin-bottom: 0;
    margin-top: 0;
    border-radius: 0;
    height: auto;
    display: flex;
    justify-content: space-between;
    border-radius: unset;
}

.contents p {
    font-size: 120%;
    text-align: justify;
}

.p90 {
    width: 90%;
}

.request {
    display: flex;
    width: 95%;
    box-sizing: border-box;
    padding: 1em;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #f0831e;
    margin-bottom: 20px;
}

.request .title {
    box-sizing: border-box;
    background: #f0831e;
    height: 100%;
    color: #fff;
    font-size: 140%;
    text-align: center;
    padding: 0.5em 1em;
}

.request a {
    text-decoration: none;
    color: #000;
    font-size: 230%;
    font-weight: bold;
}

.request .tel a span,
.request .email a i {
    color: #f0831e;
}
#sonotakeishiki {
  scroll-margin-top: 140px;
}
@media only screen and (max-width: 640px) {
#sonotakeishiki {
  scroll-margin-top: 80px;
}

}
.choice {
    width: 100%;
    background: #fff799;
    padding: 1.5em;
    box-sizing: border-box;
    margin-bottom: 3em;
}

.choice ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.choice li {
    width: 24%;
    background: #00933E;
    padding: 0.7em;
    box-sizing: border-box;
}

.choice img {
    width: 100%;
    height: auto;
}

.choice li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
}

.choice li a p {
    text-align: center;
    margin: 0;
}

.choice li a p:first-child {
    font-size: 140%;
}

.choice li a p:nth-of-type(2) {
    line-height: 1.3em
}

.contents.town-community h1 {
    background: #f0831e;
}

.pricelist {
    display: flex;
}

.leftbox {
    width: 45%;
    margin-bottom: 20px;
}

.leftbox img {
width: 100%;
}

.servicebox {
    width: 50%;
    margin-left: auto;
}

.servicebox p.title {
    border-top: 1px dotted #000;
    border-bottom: 1px dotted #000;
    color: #00933E;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    height: fit-content;
}

.pricelist2 table td {
    font-size: 12px;
    width: 18%;
}

.sitei-area {
    background: #f78500;
    border-radius: 5px;
    padding: 0.2em 1em;
    color: #fff;
    text-decoration: none;
}

.kanban-button {
    background: #0057ad;
    color: #fff;
    padding: 0.5em 2em;
    font-size: 20px;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 95px;
    font-weight: bolder;
    text-decoration: none;
}

.tkform {
    width: 100%;
}

.relatedservicestitle.form {
    margin-top: 0;
}

div#maincontents .tkform table.contactformtable {
    width: 100%;
}

div#maincontents .tkform table.contactformtable td.brone {
    width: 25%;
}

.shopinfo {
    width: 100%;
}

.red {
    color: red;
}

@media only screen and (max-width: 640px) {
    .pc {
        display: none;
    }

    .contents p {
        font-size: 110%;
    }

    .contents h1 {
        font-size: 150%;
    }

    #maincontents h2.relatedservicestitle_3.subtitle {
        justify-content: center;
        flex-flow: column;
        flex-wrap: wrap;
    }

    .request {
        flex-flow: column;
    }

    .request .title {
        width: 100%;
        height: auto;
    }

    .request div {
        margin-bottom: 1em;
    }

    .request a {
        font-size: 130%;
    }

    .choice ul {
        flex-wrap: wrap;
    }

    .choice li {
        width: 48%;
        margin-bottom: 1rem;
    }

    .pricelist {
        flex-flow: column;
    }

    .leftbox,
    .servicebox {
        width: 100%;
    }

    .sitei-area {
        background: #f78500;
        border-radius: 5px;
        padding: 0.5em 1em;
        color: #fff;
        text-decoration: none;
        margin-right: 10px;
        font-size: 12px;
    }

    .kanban-button {
        background: #0057ad;
        color: #fff;
        padding: 0.5em 2em;
        font-size: 20px;
        text-align: center;
        display: block;
        width: 100%;
        box-sizing: border-box;
        height: 95px;
        font-weight: bolder;
    }

    div#maincontents .tkform table.contactformtable td.brone {
        width: auto;
    }

    div#maincontents .tkform table.contactformtable input.zip {
        width: 50%;
    }

    div#maincontents .tkform table.contactformtable input.zipbtn {
        width: 30%;
    }

    .shopinfo {
        width: auto;
    }

}






section.seal_question {
    display: block;
    width: 100%;
    margin: 0 auto 3em auto;
}

div.question_title {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;




}

div.question_title p {
    margin: 0;
    padding: 0.5em;
    font-size: 1.25em;

}


div.question_title img {
    width: 35%;
    height: auto;

}

@media only screen and (max-width: 640px) {
div.question_title img {
    width: 23%;
    height: auto;
}

}


/* 矢印吹き出し1 左右   */

.balloon1-left {
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 1em;
    min-width: 150px;
    max-width: 100%;
    font-size: 1.25em;
    background: #ffb36c;
    border-radius: 0.5em;

}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #ffb36c;
}





.balloon1-right {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 1em;
    min-width: 150px;
    max-width: 100%;
    font-size: 1.25em;
    background: #ffb36c;
    border-radius: 0.5em;
}

.balloon1-right:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid #ffb36c;
}
@media only screen and (max-width: 640px) {
.balloon1-left {
    font-size: 1em;
    padding: 0.5em;

}
.balloon1-right {
    font-size: 1em;
    padding: 0.5em;

}

}

/* 矢印吹き出し1 左右 終わり  */




.question-container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto 2em auto;
    border-bottom: #d4d4d4 1px solid;
    padding-bottom: 3em;
}
@media only screen and (max-width: 640px) {
.question-container {
    width: 100%;
}

}
.last {
    border-bottom: none;
}

.question-label {
    display: inline-block;
    color: #f0831e;
    padding: 8px 16px;
    font-size: 1.5em;
    font-weight: bold;
}

.question-title {
    font-size: 24px;
    font-weight: bold;
    border-left: 6px solid #f0831e;
    padding-left: 14px;
    margin-bottom: 0.5em;
}

.usage-section {
    margin-bottom: 1em;
    display: block;
}
.usage-section span{
    font-size: 1.2em;
}

.usage-section-title {
    display: inline-block;
    padding: 4px 10px;
}

.usage-section-title p {
    font-size: 1.1em;
    font-weight: bold;

    margin: 0;
}
.usage-section-img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto
}
.usage-section-img img{
width: 33%;
}
.usage-section-description {
    font-size: 1.2em;
    margin-left: 50px;
}

.usage-section-description li {
    list-style-position: inside;
    margin-bottom: 5px;
}
.usage-section-title p {
    padding-left: 1em;
    text-indent: -1em;
}


.btntk {
    padding: 0.5em 1.5em;
    font-size: 1.5em;
    text-decoration: none;
    margin: 2em auto;
    text-align: center;
}

.btn--orange,
a.btn--orange {
    color: #fff;
    background-color: #f0831e;
}

.btn--orange:hover,
a.btn--orange:hover {
    color: #fff;
    background: #ffb444;
}

a.btn--radius {
    border-radius: 100vh;
}






:root {
    --accent: #cfe9d9;
    --border: #bdbdbd;
    --label-bg: #dbeee2;
}


.spec-wrap {
    max-width: 450px;
    width: 100%;
    margin: auto;
}

.spec-title {
    font-size: 16px;
    margin: 0 0 8px 0;
    color: #333
}

table.spec {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px
}

table.spec td {
    border: 1px solid var(--border);
    padding: 10px 12px;
    vertical-align: middle
}

table.spec td.label {
    width: 36%;
    background: var(--label-bg);
    font-weight: 700;
    color: #1b3a2a
}

table.spec td.value {
    background: #fff;
    color: #222
}

/* 金額行を目立たせる */
table.spec tr.price td.label {
    background: var(--accent);
    font-weight: 700
}

table.spec tr.price td.value {
    font-weight: 700;
    text-align: right
}

/* 小さめ表示の調整 */
@media (max-width:420px) {
    .spec-wrap {
        padding: 0 6px
    }

    table.spec td {
        padding: 8px
    }
}

/* 画像左上に文字ラベルを配置 */
.img-with-label {
    position: relative;
    display: inline-block;
    margin: 0.5em;
    width: 33%;
}

.img-label {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 4px 8px;
    font-size: 1.2em;
    font-weight: bold;
    z-index: 10;
}

.img-with-label img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1.5em;
}












/* ご入稿注意事項セクション */
.submission-notice {
    width: 95%;
    max-width: 100%;
    margin: 2em auto 4em auto;
}

.notice-header {
    background-color: #f0831e;
    color: white;
    padding: 0.5em 1.5em;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1.5em;
    text-align: center;
    border-radius: 3px;
}

.notice-section {
    display: block;
}
.notice-footer{
text-align: center !important;
font-size: 1.8em !important;
font-weight: bold;
color: #f0831e;
    margin-bottom: 1em;
    line-height: 1.3em;
}
.notice-icon {
display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
}

.notice-icon img {
    width: 100px;
    height: auto;
}
.notice-icon span{
font-size: 1.8em;
font-weight: bold;
margin:0 1em;
padding: 0.5em 1em;
background-color: #fff1a1;
border-radius: 0.5em;
}
.notice-content {
    display: flex;
    flex-direction: column;
}
.btn-center{
    text-align: center;
}
/* 2番目の notice-header を色分け */
.submission-notice:nth-of-type(2) .notice-header {
  background-color: #4bc2fa; /* ここを希望の色に変更 */
}

.notice-content h3 .icon-mini {
    width: 40px;
    height: 40px;
}

.notice-content p {
    margin: 0.5em 0;
    line-height: 1.6;
    font-size: 0.95em;
}

.notice-content ul {
    margin: 0.5em 0;
}

.notice-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
    font-size: 1.2em;
}
.notice-content li {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.setumeiimg{
    width: 70%;
    margin: 1em auto;
}
.setumeiimg img{
width: 100%;
}


@media only screen and (max-width: 640px) {
    .notice-section {
        flex-direction: column;
    }
.notice-content li {
    font-size: 1.2em;
}
.setumeiimg{
    width: 100%;
}
.notice-icon span{
font-size: 1.2em;
}

}