@charset "UTF-8";
@media screen and (max-width: 599px) {
    /* 共通クラス */
    .col1,
    .col2,
    .col3,
    .col4,
    .col5,
    .col6,
    .col7 {
        flex-basis: 100%;
    }


    .envAlert {
      
        padding:0.4em 2em 0.5em;
       
    }

    .btnStyleA {
        margin-bottom: 10px;
    }
    .btnStyleB {
        margin-top: 10px;
    }
    /* ログイン画面 */
    .login .content {
        padding: 40px 20px;
    }
    h2.side_line {
        font-size: var(--size-text-default);
    }
    /* ナビゲーション */
    nav {
        width: 100%;
        padding: 0;
    }
    nav .menu-btn {
        position: fixed;
        top: 10px;
        left: 10px;
        display: flex;
        height: 50px;
        width: 50px;
        min-width: auto;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: rgba(255, 255, 255, 1);
        margin: 0;
        padding: 0;
        border-radius: 10px;
    }
    nav .menu-btn span,
    nav .menu-btn span:before,
    nav .menu-btn span:after {
        content: '';
        display: block;
        height: 4px;
        width: 30px;
        border-radius: 3px;
        background-color: var(--color-primary);
        position: absolute;
        transition: all 0.5s;
    }
    #menu-btn-check:checked~.menu-btn span {
        background-color: rgba(255, 255, 255, 0);
    }
    #menu-btn-check:checked~.menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked~.menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
    nav .menu-btn span:before {
        bottom: 10px;
    }
    nav .menu-btn span:after {
        top: 10px;
    }
    nav dl {
        margin: 0;
    }
    .accordion_inner dd a {
        margin: 0;
    }
    .s_02 .accordion_one .accordion_inner {
        padding-bottom: 0;
    }
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 100%;
        z-index: 80;
        background-color: var(--color-section-bg);
        padding: 20px 20px 0;
        transition: all 0.5s;
        overflow: hidden;
    }
    .scroll {
        OVERFLOW: auto;
        height: 100%;
    }
    #menu-btn-check:checked~.menu-content {
        right: 0;
    }
    dl.nav_list {
        text-align: center;
    }
    nav dl dd {
        margin: 1em 0;
    }
    nav dd a.active {
        padding-left: 10PX;
        border-radius: 5px;
        margin:0;
    }
    
    .icon {
        justify-content: center;
    }
    .estimateStyle dl dd,
    .estimateStyle dl dd.sum {
        width: calc(100% - 150px);
    }
    header {
        display: none;
        padding-top: 30px;
        padding-left: 0;
        width: 100%;
        min-width: auto;
        flex-direction: column;
    }
    .sp_header {
        display: block;
        padding-top: 30px;
        width: 100%;
        min-width: auto;
        flex-direction: column;
    }
    .sp_header input[type="text"] {
        display: block;
    }
    .accordion_header p {
        font-size: var(--size-text-L);
    }
    .header_section.header_usrinfo.s_02 {
        margin-top: 20px;
    }
    #estimate_box {
        z-index: 200;
        top: 0px;
    }
    /* メインコンテンツ */
    main {
        width: 100%;
        min-width: auto;
        margin: 0;
        padding: 90px 20px 20px;
    }
    main.main-estimate {
        padding-bottom: 100vh;
    }
    .content {
        padding: 20px;
        margin-bottom:15px !important;
    }
    /* 見積もり作成 */
    .formStyle dl {
        flex-direction: column;
    }
    .formStyle dl dt {
        width: auto;
        text-align: left;
        /* padding: 0 0 0 35px; */
        padding: 0;
    }
    .formStyle dl dd {
        width: 100%;
        flex-direction: column;
        display: inline-block;
    }
    .formStyle dl dd label {
        width: auto;
        margin-bottom: 5px;
    }
    .formStyle .input-name {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }
    .input-name .name {

        margin-right: 0;
    }
    .formStyle .input-name span:nth-child(2n) {
        margin-right: 1em;
        margin-left: 1em;
        display: block;
    }
    span.name {
        margin-bottom: 2em;
    }
    .formStyle dd small {
        text-align: center;
        /* margin-top: -1.25em; */
    }
    .formStyle .btn_section button {
        min-width: auto;
        width: 100%;
    }

    .formStyle .btn_section, .formStyle1 .btn_section{
        flex-wrap: wrap;
    }

    .btn_section button,
    .btn_section button,
    .btn_section a,
    .btn_section a
    {
       width:100%;
       margin:0 0 10px 0;
       

    }
    .fixed-style {
        width: 100%;
        min-width: auto;
        bottom: 0;
        z-index: 2;
    }
    /* ダッシュボード */
    .listStyle1 li a {
        margin: 5px 0;
        padding: 0 0 10px 0;
        flex-wrap: wrap;
    }
    .listStyle1 time {
        width: 100%;
    }
    .listStyle1 .news_title {
        flex-basis: 100%;
    }
    article.content.col3 {
        margin-bottom: var(--size-text-LL);
    }
    .space {
        margin: 0;
    }
    .dashbord .status_r dt {
        margin-right: auto;
        width: 50%;
    }
    .status_l,
    .status_r {
        margin-bottom: 2em;
    }
    /* 見積もり履歴 */
    .accordion_secsion {
        margin-bottom: var(--size-text-LL);
    }
    .refined_search_bar.accordion_header h3.h3_style1 {
        margin: 0;
    }
    .s_03 {
        margin-top: var(--size-text-LL);
        display: none;
    }
    .s_01 .accordion_one .accordion_inner,
    .s_02 .accordion_inner,
    .s_03 .accordion_one .accordion_inner {
        z-index: 1;
    }
    .s_02 .box_one .refined_search_l,
    .s_02 .box_one .refined_search_r {
        display: flex;
        flex-basis: 100%;
    }
    .s_02 .box_one {
        flex-wrap: wrap;
        width: 100%;
    }
    .s_02 .accordion_inner {
        margin-top: 20px;
    }
    .estimate_history .formStyle dl dt,
    .estimate_history .formStyle dl dd {
        width: 100%;
    }
    .estimate_history .formStyle dl dd {
        align-items: baseline;
    }
    .input_wrapper p {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
    .search_header {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 50px;
        padding-bottom: 25px;
        border-bottom: solid 3px;
        border-color: var(--color-frame-bg);
    }
    .hit,
    .pager {
        width: 100%;
        margin-bottom: var(--size-text-LL);
    }
    .search_header .hit dl {
        flex-direction: row;
        justify-content: center;
    }
    .estimate_history .formStyle .hit dl dt {
        width: 25%;
        display: inline-block;
        padding-left: 0;
    }
    .estimate_history .formStyle .hit dl dd {
        flex-direction: row;
        width: 30%;
    }
    .results_head {
        flex-direction: column;
        align-items: baseline;
    }
    .results_head p {
        margin: 5px 0;
    }
    .results_name {
        width: 100%;
    }
    .date_list {
        flex-direction: column;
    }
    .search_results_ul dd,
    .formStyle dl dd {
        padding-left: 35px;
    }
    .address_select dl dd {
        margin: 1em 0;
    }
    .search_results_list .btn_section {
        flex-direction: column;
        align-items: center;
    }
    .search_results_list .btn_section button,
    .date_list+.btn_section button {
        margin: 10px 0;
    }
    .user_info_r dt.hissu:nth-child(19)::after,
    .user_info_confirmation dt.hissu:nth-child(19)::after {
        right: calc(-40px - 1em);
    }
    .user_info_r .formStyle h4:nth-child(4) {
        margin-top: 3.5em;
    }
    /* =========estimateDeliverypoint======== */
    .estimateDeliverypoint .formStyle div:nth-child(4) dl dd:nth-child(2) label {
        width: 45%;
    }
    .shipping_address button.btnStyleB {
        margin: 0;
    }
    .new_point:before {
        left: calc(50% - 12px);
    }
    .new_point:after {
        left: calc(50% - 12px);
    }
    /* =========signup======== */
    .signup .content {
        padding: 20px 20px 1px;
    }
    .formStyle1 .signup_h3 {
        border: none;
        padding-left: 0;
    }
    .formStyle1 .signup_h3 h3 {
        /* border-bottom: 10px solid var(--color-primary); */
        line-height: 1.75;
        position: relative;
    }
    .formStyle1 .signup_h3 h3:after {
        content: '';
        background-color: var(--color-primary);
        border-radius: 5px;
        display: block;
        margin-top: 5px;
        height: 10px;
        width: 100%;
    }
    .formStyle1 dl {
        flex-direction: column;
    }
    .formStyle1 dl dd {
        width: 100%;
    }
    .signup .content:nth-child(3) input[type="text"] {
        width: 100%;
    }
    .formStyle1 .btn_section button {
        min-width: auto;
    }
    .form_wrapper {
        padding-left: 0;
    }
    /* =========user_registration_completed======== */
    .user_registration_completed h3 {
        line-height: 1.75;
    }
    .user_registration_completed .space {
        margin-bottom: 30px;
    }
    .date_list+.btn_section {
        text-align: center;
    }
    .input-name .name:nth-child(n+2) {
        margin-left: 0;
    }
    .input-name span:nth-child(2n) {
        margin-bottom: 3em;
    }
    .formStyle .align-items-baseline:nth-child(18) dd span,
    .formStyle .align-items-baseline:nth-child(17) dd span {
        margin-bottom: 2em;
        display: inline-block;
    }
    .estimated_result .input-name .name {
        margin: 0;
    }
    .productManagement .formStyle dl dd {
        width: auto;
    }
    /* =========productManageInfo_a======== */
    .unitprice.flex {
        flex-direction: column;
    }
    .productManagement .formStyle dl {
        margin: 0;
    }
    .formStyle .unitprice dl dd.input_wrapper {
        padding: 0;
    }
    .formStyle .unitprice dl dd input.calendar {
        min-width: auto;
        width: 100%;
        margin: 0;
    }
    table.pricelist {
        display: block;
    }
    .table_scroll {
        max-height: 340px;
    }
    .tableStyle tbody {
        display: flex;
        font-size: var(--size-text-default);
        overflow: auto;
        position: relative;
    }
    .tableStyle tbody::-webkit-scrollbar {
        height: 10px;
    }
    .tableStyle tbody::-webkit-scrollbar-track {
        background-color: var(--color-frame-bg);
        border-radius: 5px;
    }
    .tableStyle tbody::-webkit-scrollbar-thumb {
        background-color: var(--color-primary);
        border-radius: 5px;
    }
    .tableStyle tr {
        display: block;
        height: 100%;
        border: none;
    }
    .tableStyle tr:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
    }
    .tableStyle tr th,
    .tableStyle tr td {
        display: block;
        height: 40px;
        padding-top: 10px;
        border-bottom: 1px solid var(--color-frame-bg);
    }
    .tableStyle tr th {
        width: 120px;
        background-color: var(--color-section-bg);
    }
    .tableStyle tr th br {
        display: none;
    }
    .tableStyle tr td {
        width: 70px;
    }
    .listStyle2 .search_header {
        flex-direction: column;
    }
    .listStyle2 .search_header .pager {
        margin: 0 0 20px;
    }
    .listStyle2 .list_title {
        display: none;
    }
    .listStyle2 time {
        display: block;
        width: 100%;
    }
    .listStyle2 a {
        flex-direction: column;
    }
    .listStyle2>ul li {
        flex-direction: column;
        height: auto;
        padding-bottom: 20px;
        align-items: flex-start;
    }
    .listStyle2>ul li:nth-child(n+3) {
        padding-top: 20px;
    }
    .listStyle2>ul li a {
        width: 100%;
    }
    .listStyle2 .news_title {
        width: 100%;
        max-width: none;
        margin: 1em 0;
    }
    .news_info dl>dd {
        padding: 0;
    }
    .news_info dl>dd:nth-of-type(1) input {
        max-width: none;
    }
    .news_info dl>dd:nth-of-type(2) input {
        width: 100%;
        max-width: none;
    }
    .newsinfo .listStyle2 ul li:nth-child(n+2) time {
        width: 100%;
    }
    .postageinfo .history tr td:nth-child(3) {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: space-around;
    }
    .postageinfo .history tr:nth-child(n+2) {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
    }
    .postageinfo .btnStyleB {
        margin: 0;
    }
    table.history {
        width: calc(100% - 20px);
    }
    .postageinfo .history tr:first-child th:first-child,
    .postageinfo .history tr:first-child th:nth-child(2) {
        width: 80px;
        display: block;
    }
    .postageinfo .history tr td:first-child,
    .postageinfo .history tr td:nth-child(2) {
        width: min-content;
    }
    .tableStyle1 .pricelist .thead {
        display: none;
    }
    .tableStyle1 .pricelist tr {
        width: 100%;
        flex-direction: column;
        margin-bottom: 50px;
        /* align-items: center; */
    }
    .tableStyle1 .pricelist td {
        display: flex;
        text-align: right;
        width: 100%;
        position: relative;
        margin: 0 0 0.5em;
        padding-bottom: 0.5em;
        border-bottom: 1px solid var(--color-frame-bg);
    }
    .tableStyle1 .pricelist th {
        text-align: center;
        width: 100%;
    }
    .tableStyle1 .pricelist td:before {
        content: attr(data-label);
        margin-right: auto;
        margin-left: 0;
        width: 50%;
        display: block;
        word-break: keep-all;
        font-size: var(--size-text-default);
        text-align: left;
        position: relative;
        left: 0;
    }
    th.row1 {
        border-top: 3px solid var(--color-primary);
        padding-top: 1em;
    }
    th.row2 {
        border-bottom: 3px solid var(--color-primary);
        margin-bottom: 1em;
    }


    .chart_step dl dt {
        text-align: center;
        padding:0.4em 0;
    }
    .chart_step dl dd li::after{
        width: 24px;
        right: -33px;
    }

    .chart_step dl dd li span::before{
        display: block;
        font-size: var(--size-text-S);
        
    }

    .chart_step dl dd ol  {
        height:250px;
    
    }
    .chart_step dl dd li  {
        flex-grow:1;
        display: block;
        /*width:calc( 100% - 40px );*/
        padding:5px 0;
        min-width:10px;
        width:10px;
        margin-right:30px;
    
    }


    .chart_step dl dd li a{
    }

    .chart_step dl dd li strong{
        writing-mode: vertical-rl;
        align-items: center;
        display: flex;
        margin: 0 auto;
    }

    .chart_step_group:nth-of-type(3){

        min-width:16px;
        width:16px;
    }

    .chart_step dl dd li.styleB {
        align-items:flex-start;
    }


    .btn-hint {
        left:0;
        top:40px;
        width:100vw;
        min-width: none;

        
        
    }


    .product_list dl {
        
        
    }

    .product_list dl dt {
        width:25%;
        
    }

    .product_list dl dd{
        width:75%;
        
    }

    #form_estimate .input-size {
        flex-wrap: wrap-reverse;
    }


    .tpd-skin-basic .tpd-content {
        max-width: calc(100vw - 100px);
    }




}

@media screen and (max-width: 1024px) {
    .s_01 .accordion_one .accordion_header,
    .s_02 .accordion_header {
        font-size: var(--size-text-LL);
    }
    .s_01 .accordion_one .accordion_header .i_box,
    .s_01 .accordion_header .i_box {
        width: 30px;
        height: 30px;
        margin-top: -15px;
    }
}

@media screen and (max-width: 767px) {
    .s_01 .accordion_one .accordion_header,
    .s_01 .accordion_header {
        font-size: var(--size-text-L);
        text-align: left;
        padding: 15px 60px 15px 15px;
    }
}