@import '01_font-sizes.css';
.on_mobile{
    display: none!important;
}

/* もっとでっかいPC */
@media screen and (max-height: 1080px){
    .header-message2, .top-right-box, .yohaku600px {
        display: none;
    }

    .dropdown-content a {
        font-size: calc(var(--font-size-lg) - 6px);
    }

    .header-message, .header-message2 {
        font-size: calc(var(--font-size-lg) - 2px);
    }

    .h_nav {
        height: 85px;
    }
}

/* でっかいPC */
@media screen and (max-width: 2500px){
    .yohaku600px {
        width: 600px;
    }

    .bln {
        margin: 0 auto;
        width: 100%;
        padding: 0 50px;
    }
}

/* mac air くらい */
@media screen and (max-width: 1919px){
    .top-right-box {
        display: none;
    }

    .yohaku600px {
        width: 0px;
    }

    .a_tab {
        min-width: 210px;
    }

    .tab_div {
        padding: 0 150px;
        padding-top: 14px;
    }

    .a_tab span {
        font-size: calc(var(--font-size-lg) - 4px);
    }
}

/* タブレット？ */
@media screen and (max-width: 1439px){
    .main {
        padding: 0;
    }

    .header-menu2 {
        max-width: 100%;
    }

    .IconAndName {
        max-width: 100%;
    }

    .a_tab {
        min-width: 170px;
    }

    .footer-sitemap {
        padding: 0;
    }

    .tab_div {
        padding: 0;
    }

    .senden_monku {
        display: none;
    }
    
    .top-right-box {
        display: none;
    }

    .yohaku600px {
        width: 0px;
    }

    .yohaku {
        display: none;
    }

    .header-message2 {
        display: none;
    }

    .IconAndName {
        padding-top: 10px;
    }
    
    .left-promotion {
        bottom: -2px;
        left: 22px;
    }

    .left-promotion p {
        padding: 0px 0;
    }

    .right-promotion img {
        width: 80px;
    }

    /* 施工例 */
    .sekourei {
        grid-template-columns: 1fr;
        margin: 0;
    }
}

/* 横向きスマホ？ */
@media (orientation: landscape) and (max-width: 767px){
    .right-promotion {
        right: 96px!important;
        bottom: 20px!important;
        display: flex!important;
        gap: 10px!important;
    }

    .h_main_icon_parent1{
        padding: 20px 0;
    }

    .h_main_icon_parent2{
        padding: 10px 0;
    }

    .h_contact .mobilenumber{
        font-size: calc(var(--font-size-lg) + 10px)!important;
    }
}

/* スマホ */
@media screen and (max-width: 767px){
    /* common */
    h1 {
        /* border-left: solid 5px #0DC97F; */
        /* line-height: 0.5em; */
        color: black;
        padding: 10px 0 10px 7px;
        font-size: large;
        margin-top: 4px;
    }
    
    h2 {
        margin-left: 0em;
    }
    
    h3 {
        margin-left: 0em;
        padding-left: 0px;
        font-size: var(--font-size-lg);
    }

    h4 {
        padding: 0;
        margin-left: 1em;
        font-size: 22px;
    }
    
    .orangeBG {
        font-size: 20px;
        text-align: center;
        margin-top: 0em;
        margin-bottom: 18px;
        background-color: #ffce99;
        padding: 8px;
    }
    
    .rightblueBG {
        font-size: 20px;
        text-align: center;
        margin-top: 0em;
        margin-bottom: 18px;
        background-color: #ffce99;
        padding: 8px;
    }
    
    .container1 p {
        font-size: var(--font-size-lg);
        padding-left: 0em;
    }

    .container1 ul p {
        padding-left: 0em;
        color: #000;
        line-height: 32px;
        margin: 0px;
    }

    .container1 ul li, .promise ul li {
        list-style: none;
        position: relative;
        padding-left: 28px;
    }

    /* h2:not([class="h_h2"]){
        font-size: var(--font-size-lg);
        margin-top: 1em;
        padding-left: 0%;
    } */

    ul{
        padding-left: 0px;
        margin-left: 0px;
    }

    span {
        font-size: calc(var(--font-size-lg) - 8px);
        display: block;
        line-height: 24px;
    }

    .on_mobile{
        display: block!important;
    }
    
    .none_mobile {
        display: none!important;
    }

    .h_class{
        background-position-y: -66px;
        background-size: 102%;
    }
    
    /* タブメニュー関連 */
    .tab_div {
        display: grid;
        grid-template-columns: repeat(5, auto);
        border: 0px;
        padding: 0px;
        letter-spacing: normal;
    }

    .a_tab {
        height: 50px;
        background-color: darkgrey;
        line-height: 50px;
        font-size: calc(var(--font-size-lg) - 5px);
        text-align: center;
        display: block;
        order: -1;
        text-decoration: none;
        border-radius: 0px;
        width: 100%;
        box-shadow: none;
        min-width: 0;
    }

    .container1 span {
        font-size: var(--font-size-lg);
        line-height: calc(var(--font-size-lg) + 10px);
    }

    .container1 .says span {
        font-size: calc(var(--font-size-lg) - 4px) !important;
    }

    .main {
        display: flex;
        justify-content: center; /* メインコンテンツを中央に配置 */
        width: 100%;
        margin: 0 auto;
        padding: 0em;
    }

    .container1 {
        flex: 1;
        width: 60%;
        margin: 0 auto;
        background-color: white;
        margin-bottom: 20px;
    }

    table td{
        font-size: calc(var(--font-size-lg) - 10px);
    }

    table th {
        font-size: calc(var(--font-size-lg) - 10px);
        /* white-space: nowrap; */
    }

    .table_base{
        width: 100px;
    }

    /* header */
    .call_icon {
        background-image: url(./images/Call_resize.webp);
        background-size: contain;
        background-repeat: no-repeat;
        width: 28px;
        height: 24px;
        align-items: center;
    }

    .IconAndName{
        width: 316px;
        max-width: 100%;
    }
    
    /* .tel_box {
        width: 22%;
    } */

    .header-message, .header-message2 {
        font-size: calc(var(--font-size-lg) - 8px);
    }

    .tel_box a{
        font-size: calc(var(--font-size-lg) - 4px);
        color: black;
        text-decoration: none;
    }

    .tel_box .mobile{
        display: block!important;
        font-size: calc(var(--font-size-lg) - 8px);
    }

    .mobile{
        display: block!important;
        font-size: calc(var(--font-size-lg) - 8px);
    }

    .h_nav{
        display: flex;
        justify-content: center;
        height: 42px;
        align-items: center;
        padding: 0px 0px;
    }

    .h_nav span{
        text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
        color: #0000EE;
    }

    /* メニューの部分 */
    .h_contact {
        display: flex;
        align-items: center;
        padding-right: 10px;
    }

    .menuBG {
        background: white;
        padding: 4px;
        padding-top: 7px;
        border: 3px solid #444;
        margin-bottom: 6px;
    }
    
    #menu-button {
        position: relative;
        height: 20px;
        width: 28px;
        display: inline-block;
        box-sizing: border-box;
    }
    #menu-button div {
        position: absolute;
        left: 0;
        height: 4px;
        width: 28px;
        background-color: #444;
        /* border-radius: 2px; */
        display: inline-block;
        box-sizing: border-box;
    }
    #menu-button div:nth-of-type(1) {
        bottom: 20px;
    }
    #menu-button div:nth-of-type(2) {
        bottom: 10px;
    }
    #menu-button div:nth-of-type(3) {
        bottom: 0;
    }

    #menu-button.active div:nth-child(1) {
        bottom: 18px;
        transform: translateY(8px) rotate(45deg);
    }
    
    #menu-button.active div:nth-child(2) {
        opacity: 0;
    }
    
    #menu-button.active div:nth-child(3) {
        bottom: 6px;
        transform: translateY(-4px) rotate(-45deg);
    }

    .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background-color: rgb(150 193 138); */
        background-color: rgb(255, 255, 255);
        display: none;
        z-index: 5;
        padding: 20px;
        box-sizing: border-box;
        border: 4px solid black;
        margin-top: 70px;
    }

    .mobile-menu h2 {
        font-size: calc(var(--font-size-lg) + 4px);
    }
    
    .mobile-menu ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-menu li {
        margin-bottom: 20px;
        display: flex;
        text-align: center;
        padding-left: 20px;
    }
    
    .mobile-menu a {
        display: flex;
        color: #000000;
        /* text-decoration: none; */
        font-size: calc(var(--font-size-lg) + 4px);
        text-align: center;
        padding-left: 20px;
        display: inline-flex;
        align-items: center;
    }
    
    .close-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: transparent;
        border: none;
        color: #fff;
        font-size: calc(var(--font-size-lg) + 10px);
        cursor: pointer;
    }
    
    .mobile-menu img {
        width: 52px;
        /* height: 20px; */
        margin-right: 5px;
    }

    .left-call {
        width: auto;
        position: fixed;
        right: 92px;
        bottom: 20px;
        display: block;
        justify-content: center;
        align-items: center;
        z-index: 1;
        font-size: calc(var(--font-size-lg) + 16px);
    }

    .left-call span {
        font-size: var(--font-size-lg);
        display: block;
        line-height: 24px;
        font-weight: 200;
        display: inline;
        border: 2px solid black;
        background-image: url(./images/背景画像/028.webp);
        background-size: 210px;
    }

    .left-call a {
        color: #000;
        text-shadow: 1px 1px 0 #0000EE, -1px -1px 0 #0000EE, -1px 1px 0 #0000EE, 1px -1px 0 #0000EE, 0px 1px 0 #0000EE, 0-1px 0 #0000EE, -1px 0 0 #0000EE, 1px 0 0 #0000EE;
        color: #0000EE;
        border: 2px solid black;
        padding: 0px 4px;
        display: block;
        background-image: url(./images/背景画像/028.webp);
        background-size: 210px;
    }

    /* ここまで */

    .h_contact img {
        padding-left: 1px;
        padding-right: 1px;
    }

    /* .h_contact img{
        width: 20%;
    } */

    .h_message {
        display: block;
        font-size: calc(var(--font-size-lg) - 10px);
        line-height: 14px;
        font-weight: 900;
    }

    .h_logo img{
        /* max-width: 200px; */
        /* width: 100%; */
        align-items: center;
        gap: 4px;
    }
    .h_icon img{
        max-width: 200px;
        width: 30px;
        vertical-align: middle;
    }

    .right-promotion img {
        width: 62px;
    }

    .right-promotion {
        right: 17px;
    }

    .senden_monku p {
        margin: 6px 0px;
    }

    .a_tab span {
        font-size: calc(var(--font-size-lg) - 6px);
        font-weight: 200;
        display: contents;
    }

    #menu .list a {
        font-size: calc(var(--font-size-lg) - 8px);
    }

    #menu .list{
        margin: -3px;
    }

    .box{
        display:flex;
        flex-flow: column;
    }

    .container1 ul li:before,.promise ul li:before {
        color: #50dd4b;
        content: "・";
        font-size: calc(var(--font-size-lg) + 22px)!important;
        position: absolute;
        top: -18px!important;
        left: -8px!important;
    }

    /* .container1 th, .container1 td {
        width: auto;
    } */

    .container1 th:last-child, .container1 td:last-child {
        width: 100px;
    }

    footer{
        font-size: calc(var(--font-size-lg) - 10px);
        padding-bottom: 122px;
    }

    .footer-section img {
        width: 170px;
    }

    #contactForm table th,#contactForm table td{
        width: auto!important;
        display: flex;
    }

    #contactForm table td{ 
        flex-flow: column;
    }

    #contactForm td{
        font-size: calc(var(--font-size-lg) - 4px);
    }

    input:not([type="checkbox"]),.selector{
        width: 90%;
        font-size: calc(var(--font-size-lg) - 2px);
    }

    .cost_pack {
        gap: 6px 90px;
        display: block;
        justify-content: center;
        align-items: center;
    }

    .cost_pack h2{
        width: 100%;
        background-color: #ffe599;
    }
    
    .cost_pack div{
        width: 100%;
    }

    #truck-images {
        display: block;
    }

    /* 料金案内 */
    /* cost */

    .ryoukinAnnai .kyoutyouMonku{
        font-size: calc(var(--font-size-lg) + 24px);
        text-align: center;
    }

    .oheyaService td:first-child,.oheyaService th:first-child {
        width: 70px!important;
    }

    .syobunhiyou {
        /* border: 2px solid black; */
        padding: 0px 16px;
    }

    .syobunhiyou table {
        max-width: 372px!important;
    }

    .syobunhiyou td:first-child {
        width: 70px!important;
    }

    .oniwa td:first-child {
        width: 70px!important;
    }

    .oniwa .h2Kakko {
        font-size: var(--font-size-lg);
        line-height: 24px;
    }

    h2.syobunhiyouH2 {
        font-size: calc(var(--font-size-lg) + 14px);
        padding-left: 0px;
        text-align: center;
    }

    .oniwa table .tyousei{
        font-size: calc(var(--font-size-lg) - 1px);
    }

    .oniwa table .tyousei span{
        font-size: calc(var(--font-size-lg) - 6px);
    }

    .ryoukinAnnai table tr th:first-child{
        width: 100px;
        /* max-width: 48px; */
        font-size: calc(var(--font-size-lg) + 4px);
        word-break: break-all;
    }

    .ryoukinAnnai table tr th:last-child{
        width: 48px;
    }

    .normalWeight{
        font-weight: normal!important;
        width: 56px;
    }

    td.tg-jnp9{
        width: 70px!important;
        padding: 2px;
    }

    th.koumoku{
        font-size: calc(var(--font-size-lg) + 4px);
    }
    
    td.tg-825v {
        font-size: calc(var(--font-size-lg) + 4px);
        padding: 2px;
    }

    /* .ryoukinAnnai .tg1 table tr th:first-child{
        font-size: calc(var(--font-size-lg) - 8px);
    } */

    span.h1Kakko{
        font-size: calc(var(--font-size-lg) - 6px)!important;
    }

    #truck-images2 {
        display: block;
        /* width: 300px;
        height: 200px;
        border: 1px solid #333 ; */
        margin: 20px auto;
        /* 画像の後で置き換える際に適切なスタイルを追加します */
    }

    .cost_table{
        max-width: 315px;
    }

    
    #truck-images2 img {
        width: auto;
        height: 152px;
    }

    /* 草刈 */

    .kusakari_syuttyouhi tr:not(:last-child) {
        border-bottom: 4px double #000; /* 二重線のスタイルと色を指定 */
    }

    .kusakari_syuttyouhi h2{
        padding-right: 2px;
        text-align:right
    }

    .kusakari_syuttyouhi td{
        display: block;
        width: 100%!important;
        box-sizing: border-box;
    }

    .kusakari_ryoukinn {
        padding-left: 0px;
    }

    .kusakari_ryoukinn .rei {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        margin: 0 auto;
        border: 2px solid black;
        gap: 16px;
        padding: 10px;
    }

    .kusakari_ryoukinn .rei span {
        font-size: calc(var(--font-size-lg) + 4px);
        margin: 2px;
    }

    .costRei_mobileL {
        display: flex;
        flex-direction: column;
    }
    
    .costRei_mobileR {
        display: flex;
        flex-direction: row;
    }

    .siharaiHouhou h2{
        font-size: var(--font-size-lg);
    }

    .tg .tg-kgzb {
        background-image: url(./images/背景画像/029.webp);
    background-size: 500px;
        font-size: var(--font-size-lg);
    }

    /* 問い合わせ案内 */
    .toiawaseCall a {
        width: 276px;
    }

    .toiawaseCall .call_icon {
        padding-right: 0px;
    }

    .toiawaseLINE {
        display: block;
        padding: 10px 42px;
        flex-wrap: wrap;
        text-align: center;
    }

    /* company */
    .company_container{
        font-size: calc(var(--font-size-lg) - 4px)!important;
    }

    .aboutcompany table td{
        font-size: calc(var(--font-size-lg) - 4px);
    }

    .aboutcompany table th{
        font-size: calc(var(--font-size-lg) - 4px);
        background-image: url(./images/背景画像/029.webp);
    background-size: 500px;
    }

    .kasukabe_shineitai{
        display: block;
    }

    .goaisatu,.goaisatu{
        display: block;
    }

    .kasukabe_shineitai{
        justify-content: center;
        display: flex;
    }

    .kasukabe_shineitai img{
        width: 70px !important;
    }
    
    .sikakuHutatu {
        display: block;
        padding: 0px;
    }

    .sikakuHutatu .contents{
        margin: 0px;
        padding-bottom: 24px;
    }

    .sikakuHutatu img{
        height: auto;
        width: 100%!important;
        height: auto;
    }

    /* confirm */
    .confirmation-table td{
        padding: 26px!important;
        display: block;
        width: auto!important;
    }

    .confirmation-table th{
        padding: 2px 42px 2px 18px;
        display: block;
    }

    form .col-9.offset-3 {
        flex-wrap: wrap;
    }

    a.sendbutton{
        margin: 8px;
    }

    /* footer */
    .gmap .map {
        border: 4px solid black;
        width: 250px;
        height: 250px;
    }

    .kogai img {
        width: 50%;
    }

    .container1 .says p {
        font-size: calc(var(--font-size-lg) - 4px);
        padding-left: 0;
    }

    .bln {
        padding: 0;
        width: 100%;
        margin: 4px 0px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .bln:before {
        content: "";
        width: 100px;
        height: 100px;
        background: no-repeat left center / 78px;
        /* display: inline-block; */
    }

    .bln:before {
		width: 80px;
		height: 80px;
	}

    .h_main_icon{
        width: 26px;
        border-radius: 50%;
        border: 1px solid black;
    }

    /* サービス一覧 */

    .service_list {
        display: flex;
        background-image: url(./images/くーすけ_寝そべり.webp);
        background-size: 170px;
        display: block;
    }

    .service_list li p {
        width: auto;
    }

    /* thanks画面 */
    .thanks_msg img{
        width: 324px!important;
    }

    /* 番号リスト */

    ol {
        padding-left: 1em;
        margin-left: 1em;
        margin-right: 1em;
    }

    ol li {
        font-size: var(--font-size-lg);
    }

    .container1 ol p {
        font-size: var(--font-size-lg);
    }

    /* 実績関連 */
    .achievement_img_BOX {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px 0;
    }

    .achievement_img_BOX img {
        height: auto;
    }

    /* 帯 */
    .container1 .obi-001 {
        font-size: var(--font-size-lg);
        text-align: left;
        margin-top: 0em;
        margin-bottom: 18px;
        background-color: #f4d4e2;
        padding: 8px;
        background-size: 110px;
    }

    /* 特殊背景系 */
    .blueBG {
        margin: 0;
    }

    .toggle {
        margin-left: 0px;
        margin-right: 0px;
    }

    .container1 p {
        padding-left: 1em;
    }

    /* 施工例 */
    .sekourei {
        grid-template-columns: 1fr;
        margin: 0;
    }

    .umekomiYT h3 {
        margin-top: 0;
        margin-bottom: 15px;
        margin-left: 0px;
        height: auto;
    }

    /* note */
    .note-box {
        margin: 0px;
    }

    /* メディア */
    .media {
        display: block;
        width: 200px;
        margin: 0 auto;
    }
}