@media screen and (max-width: 1000px){
    header {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 60px;
        z-index: 10000;
    }
    header .inner {
        width: auto;
        height: 60px;
    }
    header .inner .home {
        margin: 0px 0px 0px 0px;
        width: 230px;
    }
    header .inner .home a {
        /*background-image: url( "../img/systrooom_logo2.png" );*/
        background-position: -5px center;
        background-repeat: no-repeat;
        background-size: 230px auto;
        width: 210px;
    }
    header .inner .search {
        display: none;
    }
    
    header .header_cart {
        display: block;
        float: right;
        width: 150px;
        margin: 0px 30px 0 0;
    }

    header .header_cart a {
        display: block;
        float: right;
        margin: 5px 0px 0 0;
        width: 50px;
    }
 
    header .header_cart a span {
        display: none;
    }

    header .inner a:hover {
        border: none;
    }
       
    body, .body, .container {
        width: auto;
        margin: 60px 0 0 0;
    }

    .slide_button_area {
        top: 60px;
        height: 150px;
    }

    .slide_button_inner {
        height: 150px;
    }

    a.slide_left_button {
        padding: 50px 0 0 0;
        height: 150px;
    }

    a.slide_right_button {
        padding: 50px 0 0 0;
        height: 150px;
    }

    .slide_link {
        top: 120px;
    }

    .keyvisual {
        height: 150px;
    }

    .keyvisual .card {
        width: 200px;
        height: 100px;
    }

    .keyvisual #slide0 .card {
        float: right;
        margin: 50px 10px 0 10px;
        width: 200px;
        height: 80px;
        padding: 5px 5px;
    }

    .keyvisual #slide1 .card {
        float: right;
        margin: 50px 10px 0 10px;
        width: 300px;
        height: 80px;
        padding: 5px 5px;
    }

    .keyvisual #slide2 .card {
        float: right;
        margin: 50px 10px 0 10px;
        width: 300px;
        height: 80px;
        padding: 5px 5px;
    }

    .keyvisual #slide0 .title {
        margin: 0px 0px 0px 0px;
    }
    .keyvisual #slide0 .subtitle {
        margin: 0px 0px 0px 0px;
        font-size: 12px;
        line-height: 14px;
        width: auto;
    }

    .keyvisual #slide1 .title {
        margin: 0px 0px 0px 0px;
    }
    .keyvisual #slide1 .subtitle {
        margin: 0px 0px 0px 0px;
        font-size: 12px;
        line-height: 14px;
        width: auto;
    }

    .keyvisual #slide2 .title {
        margin: 0px 0px 0px 0px;
    }
    .keyvisual #slide2 .subtitle {
        margin: 0px 0px 0px 0px;
        font-size: 12px;
        line-height: 14px;
        width: auto;
    }

    .keyvisual .card .title {
        font-size: 18px;
        margin: 10px 0 0 10px;
    }

    .container {
        margin: 0px auto 0 auto;
        padding: 0 0 0 0px;
    }

    .container.top {
        margin: 0px auto 0 auto;
    }
        
    .container .main_contents {
        float: left;
        width: 100%;
        padding: 0px 0px 0px 0px;
    }

    .category_list {
        position: static;
        float: left;
        padding: 0px;
    }

    .main_list {
        clear: both;
        float: left;
        padding: 0px;
        width: 100%;
        margin: 0px;
    }

    .main_contents .product_list_scroll {
        width: 100%;
    }

    .category_list_header, .category_list_header_text {
        margin: 0 0 10px 10px;
    }

    .banner img {
        width: 100%;
        height: auto;
    }
    
    .cms_body {
    width: 300px;
    }
    
    .cms_body h1 {
    width: 280px;
    background-image: url("./image/h1_mobile.png");
    }
    
    form {
    width: auto;
    max-width: 100%;
    overflow: hidden;
    display: block;
    height: auto;
    }
    
    .form_title_field,
    .form_submit_field {
    display: block;
    width: auto;
    padding: 5px;
    }

    .form_description {
        margin: 0px 0px 10px 0px;
        line-height: 18px;
    }
    
    .input_item,
    .input_field {
    display: inline;
    border-right: solid 1px #dddddd;
    border-left: solid 1px #dddddd;
    width: 100%;
    padding: 5px;
    }

    .input_item {
        background-color: var(--color-background);
    }
    
    .input_field {
        border-top: dotted 1px #eeeeee;
    }
    
    .input_field_wide {
    width: 95%;
    }
    
    input[type=text],
    input[type=password]
    {
    width: 95%;
    font-size: 18px;
    }

    .input_field select {
        width: auto;
    }
    
    input.short {
    display: inline;
    width: 70px;
    }
    
    textarea {
    width: 260px;
    font-size: 18px;
    }
    
    .element {
    width: 140px;
    font-size: 8px;
    margin: 0 4px 4px 0;
    }
    
    .element img {
    width: 120px;
    }
    
    .pagenator {
    text-align: center;
    font-size: 8px;
    }
    
    .pagenator .page {
    float: left;
    border: solid 1px #eeeeee;
    min-width: 15px;
    margin: 2px;
    text-align: center;
    font-size: 8px;
    }
    
    .pagenator .current_page {
    float: left;
    font-weight: bold;
    border: solid 1px #eeeeee;
    min-width: 15px;
    margin: 2px;
    text-align: center;
    font-size: 8px;
    }
    
    .picture_left {
    width: 20px;
    height: 400px;
    }
    
    .picture_left img {
    width: 10%;
    margin-top: 60px;
    }
    
    .picture_right {
    text-align: right;
    width: 20px;
    height: 400px;
    }
    .picture_right img {
    width: 10%;
    margin-top: 60px;
    }
    .picture_center {
    width: 260px;
    height: 400px;
    }
    
    .picture_name {
    font-size: 8px;
    width: 50%;
    }
    .picture_slide {
    font-size: 8px;
    text-align: center;
    width: 30%;
    }
    .picture_page {
    font-size: 8px;
    width: 20%;
    }
    
    form table {
        min-width: auto;
    }
    
    .input_field table {
    min-width: none;
    }
    
    a {
        color: #0077aa;
        text-decoration: under-line;
    }


        
    header .inner .header_cart .user_information {
        display: block;
        position: fixed;
        top: 10px;
        right: 90px;
        margin: 0px 0px 0 0;
        width: 80px;
        height: auto;
        overflow: hidden;
        text-align: center;
    }
    
    header .inner .header_cart .user_information .user_icon  {
        display: block;
        width: 15px;
        height: 15px;
        margin: 0 auto 2px auto;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
    }
    
    header .inner .header_cart .user_information .user_name  {
        margin:  0px 0 0 0;
        padding: 0px 0px 0px 0px;
        line-height: 10px;
        font-size: 8px;
        text-align: center;
        width: 80px;
        height: 30px;
    }

    header .inner .header_cart a {
        position: fixed;
        top: 10px;
        right: 40px;
        margin: 0px 0px 0px 0px;
    }

    footer {
        width: 100%;
        padding: 0px 0 20px 5px;
        position: static;
    }
    
    footer .inner {
      width: 100%;
    }
    
    footer ul {
        max-width: 90%;
      position: inline;
      left: 0px;
      padding: 0 0 0 0px;
      float: none;
      clear: both;
    }
    footer ul li {
        max-width: 100%;
      position: inline;
      left: 0;
      float: none;
      padding: 0 0px 0 0px;
      border-right: none;
    }
    
    footer .copyright {
      clear: both;
      width: 100%;
      height: auto;
      overflow: hidden;
      margin: 230px auto 0 auto;
      color: #ffffff;
      text-align: center;
      font-size: 10px;
    }
    
    footer .catchcopy {
      width: 100%;
      font-size: 8px;
      line-height: 12px;
      margin: 10px 0 20px 0;
    }
    
    
    .menubar_button {
        display: block;
        width: 32px;
        height: 32px;
        float: right;
        position: fixed;
        right: 5px;
        top: 15px;
    }
    
    .menubar_button a {
        display: block;
        width: 32px;
        height: 32px;
        background-image: url( "../img/humberger.png" );
        background-position: center;
        background-repeat: no-repeat;
        background-size: 32px 32px;
    }
    
    .menubar {
        display: none;
        width: 100%;
        height: auto;
        border-bottom: solid 1px #dddddd;
        margin: 0px;
        background-color: var(--color-black);
        box-shadow: 0px 2px 2px gray;
        position: fixed;
        left: 0px;
        top: 60px;
        z-index: 10000;
    }
    
    .menubar ul {
        width: 100%;
        height: auto;
        overflow: hidden;

        padding-left: 0px;
        margin: 0 auto 0 auto;
        list-style-type: none;
    }
    
    .menubar ul li {
        float: left;
        width: 100%;
        min-height: 40px;
        height: auto;
        padding: 0px 0px 0px 0px;
        clear: both;
        /* background: linear-gradient(#ffffff, #eeeeee ); */
    }
    
    .menubar ul li a {
        display: block;
        float: none;
        width: auto;
        height: 25px;
        padding: 15px 0 0 0;
        color: var(--color-white);
        border: none;
        font-size: 14px;
        text-align: left;
        text-decoration: none;
    }

    .menubar ul li a:hover {
        background-color: var(--color-background);
        color: var(--color-black);
        border: none;
        border-radius: 0px;
    }
    
    .menubar ul li .search {
        margin: 0px 0px 0px 0px;
        padding: 0px;
    }
    
    .menubar ul li .search form {
        box-shadow: none;
        border: none;
        width: 320px;
        margin: 5px auto 0px auto;
        padding: 0px;
        background-color: var(--color-black);
    }

    .menubar ul li .search select {
        float: left;
        width: 100px;
        height: 52px;
        margin: 0px 0 0 0;
        vertical-align: top;
    }

    .menubar ul li .search input[type="text"] {
        float: left;
        margin: 0px 0 0 -3px;
        width: 140px;
        height: 25px;
        vertical-align: top;
    }
    .menubar ul li .search input[type="submit"] {
        float: left;
        width: 50px;
        height: 53px;
        background-image: url( "../img/loop.png" );
        background-repeat: no-repeat;
        background-position: center;
        border: none;
        box-shadow: none;
        margin: 0px 0px 0 0;
        padding: 0px;
        border-radius: 0 2px 2px 0;
        vertical-align: top;
    }    

    .menubar ul li .login_button {
        float: none;
        display: inline-block;
        width: 30%;
        height: 40px;
        margin: 10px 0px 0 0;
        padding: 0px;
    }
    
    .menubar ul li .login_button a {
        float: none;
        display: inline-block;
        background: linear-gradient(var(--color-light-active), var(--color-active));
        width: 100%;
        height: 30px;
        border: solid 1px #b88638;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        margin: 0px;
        padding: 8px 0 0 0;
        text-decoration: none;
        color: var(--color-black);
    }

    .menubar ul li .regist_button {
        float: none;
        display: inline-block;
        width: 30%;
        height: 40px;
        margin: 10px 0px 0 0;
        padding: 0px;
    }
    
    .menubar ul li .regist_button a {
        float: none;
        display: inline-block;
        background: linear-gradient(var(--color-green), var(--color-darkgray));
        width: 100%;
        height: 30px;
        border: solid 1px var(--color-black);
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        margin: 0px;
        padding: 8px 0 0 0;
        text-decoration: none;
        color: #ffffff;
    }
    
    /*.menubar ul li .ask_button {
        float: none;
        display: inline-block;
        width: 30%;
        height: 40px;
        margin: 10px 0px 0 0;
        padding: 0px;
    }
    
    .menubar ul li .ask_button a {
        float: none;
        display: inline-block;
        background: linear-gradient(var(--color-navy), var(--color-darkgray));
        width: 100%;
        height: 30px;
        border: solid 1px var(--color-black);
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        margin: 0px;
        padding: 8px 0 0 0;
        text-decoration: none;
        color: #ffffff;
    }*/

    .menubar a.menubar_regist_button {
        display: none;
    }

    .top_list_inner {
        position: static;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }
        
    .main_contents .document_contain img {
        width: auto;
        max-width: 97%;
    }
    
    .main_contents .contents_image {
        width: 90%;
        margin: 0 auto 0 auto;
    }

    .content_tile .content_left {
        margin: 20px auto 0 auto;
    }
    
    .content_left {
        float: none;
        width: 100%;
        height: 120px;
        margin: 5px 10px 0 5px;
    }
    
    .content_left .date {
        display: none;
        text-align: center;
        font-size: 8px;
    }
    
    .content_left .author_image {
        margin: 0 0 20px 0;
    }
    
    .content_left .nickname {
        border-radius: 20px;
        padding: 10px 10px 10px 10px;
    }
    
    .view_author img {
        border-radius: 10px;
        width: 80px;
        height: 80px;
    }
    
    div.view_author {
        width: auto;
        text-align: center;
    }

    .view_author .profile {
        width: auto;
    }
    
    /*
    .content_right {
        clear: both;
        float: left;
        margin: -125px 0 0 5px;
        width: 95%;
    }
    */
    
    .no_title {
        margin: 20px 0 0 0;
    }
    
    .category {
        margin: -3px 0 0 0;
    }
    
    .content_top {
        clear: both;
        float: left;
        /* background-image: url( "../img/content_top_sp.png" ); */
        background-position: 0px 0px;
        margin: 10px 10px 0 auto;
        padding: 5px 5px 5px 5px;
        overflow: hidden;
        height: auto;
        width: 95%;
    }
    
    .content_top.reverse {
        background-image: url( "../img/content_top_sp_reverse.png" );
    }
    
    .no_title .content_top {
        background-position: 0 -120px;
        padding: 30px 0px 0px 30px;
    }
    
    .content_top a.title {
        display: block;
        text-decoration: none;
        line-height: 1.3;
        font-size: 213%;
        height: 115px;
        margin: 0 0 25px 90px;
        overflow: hidden;
        width: calc( 100% - 100px );
    }
   
    .content_bottom {
        clear: both;
        float: left;
        height: 7px;
        /* background-image: url( "../img/content_bottom_sp.png" ); */
        background-position: bottom left;
        background-repeat: no-repeat;
        margin: 0px auto 22px auto;
        padding: 0px 5px 0px 5px;
        width: 95%;
    }
    
    .content_bottom.reverse {
        background-image: url( "../img/content_bottom_sp_reverse.png" );
    }
    
    .sidebar {
        clear: both;
        float: left;
    }
    
    .sidebar .element_contents {
        width: 300px;
        min-height: 100px;
        border: solid 1px #bcbcbc;
        background-color: #ffffff;
    }
    
    .paginator {
        clear: both;
    }
    
    ul.pagination {
        list-style-type: none;
        padding-left: 0px;
    }
    
    ul.pagination li a, div.paginator p {
        display: block;
        float: left;
        margin: 0 0 0 2px;
        padding: 5px;
        border: solid 1px #aaaaaa;
        text-decoration: none;
        color: #666666;
        background-color: #ffffff;
    }
    
    ul.pagination li.active a {
        color: #ff0000;
        font-weight: bold;
        border: solid 1px #ff0000;
        background-color: #ffeeee;
    }
    
    ul.slideshow {
        height: auto;
    }
    
    ul.slideshow li {
        width: 100%;
        height: auto;
    }
    
    .character_element {
        float: left;
        width: 260px;
        height: 450px;
        text-align: center;
        padding: 20px;
        overflow: hidden;
    }
    
    .character_element img {
        width: 260px;
    }
    
    .character_element p {
        font-size: 14px;
        text-align: left;
    }
    
    h1 {
        line-height: 1.3;
        font-family: Roboto, "Hiragino Sans";
        font-size: 213%;
        font-weight: 700;
        margin: 10px 0 10px 0;
        padding: 0px 0 0px 0;
        text-align: center;
    }
    
    h2 {
        width: auto;
        font-size: 130%;
        font-weight: bold;
        color: #000000;
        padding: 10px 5px 10px 5px;
        background-image: -webkit-gradient(
                      linear
                    , left top
                    , left bottom
                    , from(#ffffff)
                    , to(#eeeeee));
    }
    
    .speak_ballon {
        width: 100%;
        height: 40px;
        background-image: url( '../img/view_bottom_sp.png' );
        background-position: center;
        background-repeat: no-repeat;
        margin: 0 auto 0 auto;
    }
    
    .description {
        clear: both;
        padding: 0 0px;
        line-height: 1.8;
        font-size: 130%;
    }
    
    .description img {
        margin: 10px auto 20px auto;
        padding: 10px;
        border: solid 1px #cdcdcd;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
        width: 90%;
    }
    .post_date {
        clear:both;
    }
    
    .view_author {
        margin-left: 10px;
    }
    
    .view_image {
        text-align: center;
        padding: 0 0 50px 0;
        overflow: hidden;
    }
    
    .view_image img {
        max-width: 80%;
        padding: 10px;
        border: solid 1px #cdcdcd;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    }
    
    .link {
        background-image: url( '../img/ic_link.png' );
        background-position: left center;
        background-repeat: no-repeat;
        padding: 0 0 0 20px;
        margin: 0 0 20px 50px;
    }
    
    .footer_link a {
        margin: 5px;
        bottom: 5px;
        right: 5px;
    }
    
    .twitter-share-button {
        float: right;
        margin-right: 10px;
    }
    
    .fb-like {
        float: right;
        margin-right: 10px;
    }
    
    #map {
        height: 400px;
        overflow: hidden;
    }
    
    #map_border {
        border: solid 1px #aaaaaa;
        margin-bottom: 20px;
        padding-left: 1px;
    }
    
    .weather {
        overflow: hidden;
        height: auto;
        clear: both;
        margin: 0 auto 20px auto;
        
        border: none;
        /*
        border: solid 1px #aaaaaa;
        border-right: none;
        border-bottom: none;
        border-radius: 5px;
        */
    }
    
    .weather_header {
        float: left;
        overflow: hidden;
        border-left: solid 1px #aaaaaa;
        border-top: solid 1px #aaaaaa;
    }
    
    .weather_body {
        float: left;
        overflow: hidden;
        height: 20px;
        overflow: hidden;
        border-left: solid 1px #aaaaaa;
    }
    
    .weather_data {
        height: 60px;
    }
    
    .weather_header div {
        border-right: solid 1px #aaaaaa;
        border-bottom: solid 1px #aaaaaa;
        padding: 2px;
        background-color: #eeeeee;
        color: #333333;
        font-weight: bold;
        float: left;
        width: 117px;
        height: 32px;
        font-size: 10px;
    }
    
    
    .weather_body div {
        float: left;
        width: 117px;
        border-right: solid 1px #aaaaaa;
        border-bottom: solid 1px #aaaaaa;
        padding: 2px;
        background-color: #ffffff;
        color: #000000;
        text-align: left;
        float: left;
        height: 15px;
        min-height: 15px;
        font-size: 10px;
        vertical-align: baseline;
        overflow: hidden;
    }
    
    .weather_body div.weather_data {
        border-right: solid 1px #aaaaaa;
        border-bottom: solid 1px #aaaaaa;
        padding: 2px;
        background-color: #ffffff;
        color: #000000;
        text-align: center;
    }
    
    .weather_body div.weather_data img {
        width: 16px;
        height: 16px;
    }
    
    .weather_body div.weather_data .templatuer {
        float: right;
    }
    
    
    
    
    .calender {
        overflow: hidden;
        height: auto;
        width: 388px;
        clear: both;
        border-left: solid 1px #aaaaaa;
        border-top: solid 1px #aaaaaa;
        margin: 0 auto 20px auto;
        border: solid 1px #aaaaaa;
        border-radius: 5px;
    }
    
    .calender_title_cell {
        display: none;
        float: left;
        width: 390px;
        padding: 5px 0 5px 0;
        text-align: center;
        font-size: 1.0%;
        font-weight: bold;
        border-right: solid 1px #aaaaaa;
        border-bottom: solid 1px #aaaaaa;
        background-color: #eeeeee;
    }
    
    .calender_cell {
        float: left;
        width: 390px;
        height: 100px;
        border-right: solid 1px #aaaaaa;
        border-bottom: solid 1px #aaaaaa;
    }
    
    .today {
        background-color: #ffeeaa;
    }
    
    .holiday {
        background-color: #ffdddd;
    }
    
    .no_display {
        display: none;
    }
    
    .calender_cell .day {
        display: none;
        float: left;
        font-size: 100%;
        font-weight: bold;
        color: #000000;
        width: 25px;
        height: 20px;
        padding: 10px 5px 5px 5px;
        text-align: center;
        border-right: solid 1px #aaaaaa;
        border-bottom: solid 1px #aaaaaa;
        background-color: #ffffff;
    }
    
    .calender_cell .day_sp {
        display: block;
        float: left;
        font-size: 100%;
        font-weight: bold;
        color: #000000;
        width: 150px;
        height: 20px;
        padding: 10px 5px 5px 5px;
        text-align: center;
        border-right: solid 1px #aaaaaa;
        border-bottom: solid 1px #aaaaaa;
        background-color: #ffffff;
    }
    
    .calender_cell .calender_weather {
        float: left;
        font-size: 12px;
        font-weight: normal;
        color: #000000;
        width: 218px;
        height: 25px;
        padding: 5px;
        text-align: center;
        border-bottom: solid 1px #aaaaaa;
        background-color: #ffffff;
    }
    
    .calender_cell .calender_weather img {
        width: 20px;
    }
    
    .calender_controller {
        display: block;
        border: solid 1px #aaaaaa;
        background-color: #eeeeee;
        border-radius: 5px;
        overflow: hidden;
        margin: 0 5px 20px 0;
    }
    
    .calender_controller a, .calender_controller .month, .calender_controller .menu {
        display: block;
        padding: 22px 10px 22px 10px;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        text-decoration: none;
        float: left;
        border-right: solid 1px #aaaaaa;
    }
    
    .calender_controller .month {
        background-color: #ffffff;
    }
    
    .calender_item {
        font-size: 12px;
        padding: 2px;
    }
    
    .holiday .calender_item {
        color: #ff00aa;
    }
    
    .calender_item a {
        color: #ff6600;
        text-decoration: none;
    }
    
    
    
    .clear {
        clear: both;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="file"],
    textarea,
    select
     {
         -webkit-appearance: none;
         width: 90%;
         max-width: 90%;
         margin: 0px;
    }
    
    select {
        width: 95%;
        max-width: 95%;
    }
    
    .input_field {
        border-top: dotted 1px #aaaaaa;
    }
    
    .input_field_wide {
        width: 100%;
    }
    
    
    .calender_controller input[type="text"] {
        width: 80px;
    }
    
    .calender_controller input[type="submit"] {
        padding: 15px 10px 15px 10px;
        width: 80px;
        font-size: 10px;
    }
    
    a.link_command, .form_return_link a, input[type=submit], .button  {
         -webkit-appearance: none;
    }

    .form_return_link {
        margin: 0px 0px 58px 0px;
    }
    
    .tab_area {
      min-width: 100%;
    }
    
    .tab_border {
        display: none;
    }
    
    .tab a {
        width: 98%;
        border-right: solid 1px #aaaaaa;
        margin: 0px 0px 0px 0px;
        margin-bottom: 0px;
        padding: 10px 2px 5px 2px;
        height: 40px;
    }
    
    .tab.active a {
        background-color: #ffffff;
        border-bottom: solid 1px #aaaaaa;
    }
    
    .tab_border_last {
        height: 0px;
        border-left: none;
        border-bottom: none;
        margin-bottom: 10px;
    }
    
    
    .data_table {
        display: block;
        overflow: hidden;
        width: 95%;
        margin: 0 auto 0 auto;
    }
    
    .data_table tbody {
        display: inline;
        width: 100%;
   }
    
    .data_table tr {
        display: block;
        float: left;
        margin-bottom: 20px;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    
    .data_table tr.first {
        margin-bottom: 0px;
        border-top: none;
    }
    
    
    .data_table th.list_title {
        display: block;
        clear: both;
        width: auto;
        margin: 0px;
        margin-bottom: 1px;
    }

    .data_table th.list_title:first-child {
        border-top: none;
    }
    
    .data_table td.list_data {
        display: inline;
        float: left;
        clear: both;
        width: 100%;
        min-height: 40px;
        margin-bottom: 1px;
        padding-bottom: 0px;
        border-bottom: solid 1px #eeeeee;
    }
    
    .data_table th {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .project_main {
        width: 98%;
        /*max-width: 100%;
        margin: 0px 0px 0px 0px;*/
    }

    .project_main form {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 20px auto;
        border: none;
    }

    .project_main form[action=projectEntry] {
        width: 95%;
    }

    .project_main .input_item {
        width: 100%;
    }
    
    .project_main .input_field {
        width: 100%;
    }
  
    
    .project_center {
        float: none;
        clear: both;
        width: 95%;
        margin: 0px auto 0px auto;
    }

    .project_center .data_table {
        width: 100%;
    }

    .main_contents .project {
        width: 98%;
    }

    .main_contents .project_right {
        float: none;
        clear: both;
        width: 95%;
        margin: 0px auto 0px auto;
    }

    .project_main_img {
        width: 300px;
    }
    
    .project_user {
        font-size: 0.8em;
        width: 94%;
        padding: 5px;
        border-left: solid 1px #dddddd;
        border-right: solid 1px #dddddd;
        border-top: solid 3px #1174b9;
    }
    
    .project_icon {
        border: solid 1px #dddddd;
        width: 300px;
    }
    
    .project_icon_img {
        width: 60px;
        height: 60px;
        margin-top: -70px;
    }
    
    .project_content {
        width: 94%;
        padding: 5px;
        border-top: none;
        font-size: 0.8em;
    }
    
    .half_area {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        clear: both;
        width: 100%;
    }
    
    h2.half {
        width: 95%;
    }
    
    .vertical_scroll {
        width: 100%;
        overflow-x: scroll;
    }
    
    .vertical_scroll_inner {
        width: 1024px;
    }
    
    .vertical_scroll_inner .data_table td.list_data {
        float: none;
    }
    
    .category_element {
        width: 97%;
    }
    
    input[type="text"].entry_title {
        width: 85%; 
        font-weight: bold; 
        font-size: 18px;
    }
     
    input[type="text"][size="20"] {
        width: 20%; 
        font-weight: bold; 
        font-size: 18px;
        margin: 2px;
    }
     
    input[type="text"][size="5"] {
        width: 10%; 
        font-weight: bold; 
        font-size: 18px;
        margin: 2px;
    }
   
    .entry_editor {
        width: 90%; 
        height: 100px;
        padding: 5px 0px 5px 0px;
    }
    
    .entry_map_digree {
        float: none;
    }
    
    #date_select select {
        width: 50px;
    }
    
    .form_section_field {
        width: 100%;
    }
    
    .spot_box {
        float: none;
        margin: 0 auto 10px auto;
        width: 300px;
    }
    
    .comment_right {
        width: 190px;
    }
    
    #image_upload_section {
        width: 92%;
    }
    #image_upload_section #area {
        width: 92%;
    }
    
    dl dt {
        width: 100px;
    }
    dl dd {
        width: 150px;
    }
    
    .contents_left {
        float: left;
        max-width: 100%;
        margin: 0 0 0 0;
    }
    
    .contents_right {
        float: left;
        max-width: 100%;
    }
    
    /*.content_box .content_right {
        width: 100%;
    }*/
    
    .sidebar_date {
        font-size: 12px;
    }
    
    .sidebar_title {
        font-size: 12px;
    }
    
    
    .twitter_box {
        float: left;
        width: 300px;
        background-color: #ffffff;
        overflow: hidden;
        height: auto;
        padding: 10px;
        margin: 0 5px 10px 0px;
        border: solid 1px #cdcdcd;
    }
    
    .comment_left {
        float: left;
        clear: both;
        width: 56px;
        height: 56px;
        padding: 2px;
        border-bottom: none;
    }
    
    .comment_right {
        float: left;
        width: 231px;
        height: auto;
        border-bottom: none;
        overflow: hidden;
        padding: 3px;
        line-height: 120%;
    }

        .main_contents .product_list {
            overflow: hidden;
            width: 100%;
        }

    .main_contents .product_list .product_card {
        width: 112px;
        margin: 0px 2px 4px 0;
        padding: 1px;
    }

    .main_contents .product_list .product_card .product_image {
        width: 100px;
        height: 100px;
        margin: 2px;
    }
    
    .main_contents .solution_desc {
        padding: 10px 5px 20px 5px;
    }

    .main_contents .solution_desc .main_left {
        position: relative;
        width: 100%;
    }

    .main_contents .solution_desc .image_list {
        width: 100%;
        height: 40px;
    }

    .main_contents .solution_desc .image_list .image {
        float: left;
        margin: 0px 5px 0px 0px;
    }

    .main_contents .solution_desc .main_image_box {
        position: relative;
        width: 100%;
    }

    .main_contents .solution_desc .main_image {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 300px;
        margin: 0 0 5px 0;
    }

    .main_contents .solution_desc .main_image img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
    }
    
    .main_contents .solution_desc .main_information .price {
        padding: 0;
    }

    .main_contents .solution_desc .main_description .description {
        padding: 0px 0px 0px 0px;
    }
    
    .main_contents .solution_desc .main_description {
        width: 100%;
        padding: 0px 0px 0 0px;
    }

    .main_contents .right_sidebar {
        position: relative;
        width: 100%;
    }

    .main_contents .right_sidebar .more_info {
        margin: 0px auto 0px auto;
    }

    .main_contents .right_sidebar .category_title {
        width: 260px;
        margin: 10px auto 5px auto;
    }

    .main_contents .right_sidebar .category_title {
        width: 302px;
        margin: 10px auto 5px auto;
    }

    .main_contents .right_sidebar .user_list {
        width: 302px;
        margin: 10px auto 5px auto;
    }

    .main_contents .solution_desc .main_information {
        width: 100%;
        padding: 0px;
    }
    
    .main_contents .shopping_cart {
        max-width: 100%;
        margin: 0px 0px 20px 0px;
    }

    .main_contents .shopping_cart_contain {
        padding: 0 5px 0 0;
    }

    .main_contents .shopping_cart .cart_list {
        height: auto;
        overflow: hidden;
    }

    .main_contents .shopping_cart .cart_list .image {
        float: left;
        width: 50px;
        height: auto;
        overflow: hidden;
    }
    .main_contents .shopping_cart .cart_list .image img {
        width: 50px;
        height: auto;
    }

    .main_contents .shopping_cart .cart_list .solution {
        display: inline-block;
        margin: 0 5px 0 5px;
        width: 270px;
        height: auto;
        overflow: hidden;
    }

    .main_contents .shopping_cart .cart_list .price {
        display: inline-block;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .main_contents .shopping_cart .cart_list .management_fee {
        display: inline-block;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .main_contents .shopping_cart .total {
        display: none;
    }

    .main_contents .solution_form {
        width: 100%;
    }

    .profile_header {
        height: auto;
    }

    .profile_header .profile_information {
        margin: 100px 0 0 0;
        padding: 0px 0px 0px 0px;
    }

    .profile_header .information {
        width: auto;
        height: auto;
        padding: 0 5px 0 5px;
    }

    .profile_header .information .catch_copy {
        height: auto;
    }

    .profile_header .icon_frame {
        float: none;
        margin: 20px auto 0 auto;
    }

    .profile_header .icon_frame .nickname {
        height: auto;
    }

    .main_contents .document_contain {
        padding: 0px 5px 20px 5px;
    }

    .main_contents .blog_main {
        width: auto;
    }

    .main_contents .blog_main {
        width: auto;
        margin: 0px 5px 0px 0px;
    }

    .main_contents .blog_right {
        width: auto;
        max-width: 100%;
        margin: 0px 5px 0px 0px;
    }

    .mce-panel {
        width: 100%;
    }

    .content_tile {
        max-width: 100%;
    }

    .menu_icon, .project_icon, .project_user_icon, .project_card {
        width: 90px;
        height: 120px;
        font-size: 10px;
        line-height: 12px;
    }

    .menu_icon img {
        width: 48px;
        height: 48px;
    }

    footer {
        width: auto;
        padding: 0px 5px 50px 5px;
    }

    footer .inner .footer_link_box {
        position: static;
        float: left;
        width: 100%;
        min-height: 0px;
        margin: 0px;
    }
    
    footer .inner .footer_link_box.logo {
        position: absolute;
        float: right;
        margin: 300px 0 0 0;
    }
        
    
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .category_view .description {
        min-height: 0px;
        padding: 0px 10px 0 10px;
        }
    .category_view .date {
        padding: 0px 10px 0 10px;
    }
    .category_view .title {
        padding: 0px 10px 0 10px;
    }

    .dashboard_inquiry_detail {
		padding: 10px auto 10px 5px;
		border-collapse:  collapse;     /* セルの線を重ねる */	
		font-size: 12px;
	}
	.dashboard_inquiry_detail tr {
		display: block;
		float: left;
	  }

	.th_l {
		background: var(--color-order-background);
		border: solid 1px #ccc;
		color: #333333;
		padding: 10px;
		width: 150px;
		border-right: none;
	}
	.th_m {
		background: var(--color-order-background);
		border: solid 1px #ccc;
		color: #333333;
		padding: 10px;
		width: 100px;
		border-right: none;
	}
	.th_s {
		background: var(--color-order-background);
		border: solid 1px #ccc;
		color: #333333;
		padding: 10px;
		width: 50px;
		border-right: none;
	}
	.tb_l {
		border: solid 1px #ccc;
		padding: 10px;
		text-align: center;
		display: block;
		height: 40px;
		width: 150px;
		border-top: 0px;
		border-right: 0px;
	}
	.tb_m {
		border: solid 1px #ccc;
		padding: 10px;
		text-align: center;
		display: block;
		height: 40px;
		width: 100px;
		border-top: 0px;
		border-right: 0px;
	}
	.tb_s {
		border: solid 1px #ccc;
		padding: 10px;
		text-align: center;
		display: block;
		height: 40px;
		width: 50px;
		border-top: 0px;
		border-right: 0px;
	}

    .reservation_status {
        width:100%;
    }
    .reservation_status .dashboard_box {
        width:auto;
    }
	.dashboard_box .dashboard_inquiry_detail .td_l {
		border: solid 1px #ccc;
		padding: 10px;
		text-align: center;
		display: block;
		height: 40px;
		width: 150px;
		border-top: 0px;
		border-right: 0px;
	}
	.dashboard_box .dashboard_inquiry_detail .td_m {
		border: solid 1px #ccc;
		padding: 10px;
		text-align: center;
		display: block;
		height: 40px;
		width: 100px;
		border-top: 0px;
		border-right: 0px;
	}

    .dashboard_inquiry {
		padding: 10px auto 10px 5px;
		border-collapse:  collapse;     /* セルの線を重ねる */	
	}
	.dashboard_inquiry tr {
		display: block;
		float: left;
	  }
	.dashboard_inquiry th {
		background: var(--color-order-background);
		color: #333333;
		padding: 10px;
		width: 150px;
		
	}
	.dashboard_inquiry td {
		padding: 10px;
		text-align: center;
		display: block;
		height: 40px;
		width: 150px;
    }

    .dashboard_status {
        width: 100%;
    }
    .dashboard_status th {
        width: 100%;
    }
    /*
    .dashboard_status tr {
    display: block;
    float: left;
    }
    .dashboard_status tr td, 
    .dashboard_status tr th {
    border-left: none;
    display: block;
    height: 50px;
    }
    .dashboard_status thead {
    display: block;
    float: left;
    width: 30%;
    }
    .dashboard_status thead tr {
    width: 100%;
    }
    .dashboard_status tbody {
    display: block;
    float: left;
    width: 70%;
    }
    .dashboard_status tbody tr {
    width: 50%;
    }
    .dashboard_status tr td + td {
    border-left: none;
    }
*/
    .project_main .half_area {
        width: 100%;
        margin: 0 auto 20px auto;
    }


    .projectlist_table td:nth-child(2) {
        display: none;
    }
    .projectlist_table td:nth-child(3) {
        display: none;
    }
    .projectlist_table td:nth-child(5) {
        display: none;
    }

    .projectlist_table {
        display: none;
    }
    .projectlist_table_mini {
        display: block;
        padding: 10px auto 10px 5px;
        border-collapse: collapse;     /* セルの線を重ねる */	
        border-spacing: 0px;
        border: solid 1px #ccc;
        border-top: 0px;
        border-left: 0px;
        border-bottom: 0px;
        width: 98%;
        
        margin: 10px;
    }

    .projectlist_table_mini td {
        border: solid 1px #ccc;
        padding: 10px;
        text-align: center;
        height: 30px;
        border-top: 0px;
        border-right: 0px;
    }
    .projectlist_table_mini .table_header {
        background: var(--color-order-background);
        border: solid 1px #ccc;
        color: #333333;
        padding: 10px;
        border-right: none;
    }

    .container .main_contents ul.project_menu_mini {
        display: block;
        clear: both;
        border: solid 1px var(--color-green);
        border-radius: 0px 0px 0px 0px;
        padding: 0px;
        float: none;
        width: 95%;
        margin: 0 auto 10px auto;
        overflow: hidden;
    }
    
    .container .main_contents ul.project_menu_mini li {
        float: left;
        width: 20%;
        border-right: solid 1px var(--color-green);
        margin: 0px;
        margin-bottom: 0px;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        border-bottom: none;
    }
    
    .container .main_contents ul.project_menu_mini li:last-child {
        border-right: none;
    }
    
    .container .main_contents ul.project_menu_mini li a {
        background-color: transparent;
        color: var(--color-black);
        font-size: 12px;
        font-weight: normal;
        box-shadow: none;
    }
    
    .container .main_contents ul.project_menu_mini li a.active {
        color: var(--color-white);
        background-color: var(--color-green);
        font-weight: bold;
    }
    
    /*管理者以外のプロジェクトメニュー*/
    .container .main_contents ul.project_menu_not_administrator_mini {
        display: block;
        clear: both;
        border: solid 1px var(--color-green);
        border-radius: 0px 0px 0px 0px;
        padding: 0px;
        overflow: hidden;
        float: none;
        width: 420px;
        margin: 0 auto 10px auto;
    }
    
    .container .main_contents ul.project_menu_not_administrator_mini li {
        float: left;
        border-right: solid 1px var(--color-green);
        margin: 0px;
        margin-bottom: 0px;
        box-sizing: border-box;
        text-align: center;
        width: 140px;
        overflow: hidden;
        border-bottom: none;
    }
    
    .container .main_contents ul.project_menu_not_administrator_mini li:last-child {
        border-right: none;
    }
    
    .container .main_contents ul.project_menu_not_administrator_mini li a {
        background-color: transparent;
        color: var(--color-black);
        font-size: 12px;
        font-weight: normal;
        box-shadow: none;
        display: block;
        text-align: center;
        display: block;
        width: auto;
    }
    
    .container .main_contents ul.project_menu_not_administrator_mini li a.active {
        color: var(--color-white);
        background-color: var(--color-green);
        font-weight: bold;
    }

    .container .main_contents ul.project_menu {
        display: none;
    }
    .container .main_contents ul.project_menu_not_administrator {
        display: none;
    }
/*
    .dashboard_status tr {
        display: block;
        float: left;
    }
    .dashboard_status tr td, 
    .dashboard_status tr th {
        border-left: none;
        display: block;
        height: 50px;
    }
    .dashboard_status thead {
        display: block;
        float: left;
        width: 30%;
    }
    .dashboard_status thead tr {
        width: 100%;
    }
    .dashboard_status tbody {
        display: block;
        float: left;
        width: 70%;
    }
    .dashboard_status tbody tr {
        width: 50%;
    }
    .dashboard_status tr td + td {
        border-left: none;
    }
*/
    .dashboard_status,
    .dashboard_status thead,
    .dashboard_status tbody,
    .dashboard_status th,
    .dashboard_status td,
    .dashboard_status tr {
        display: block;
    /*width: 100%;*/
    }

    .dashboard_status thead {
        display: none; /* ヘッダー非表示 */
    }

    .dashboard_status tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 8px;
        background: #fff;
    }

    .dashboard_status td {
        text-align: left;
        padding: 6px;
        position: relative;
        width: auto;  /* ←ここをautoにする */
        box-sizing: border-box; /* ←paddingやborderを含めて計算 */
    }

    .dashboard_status td::before {
        content: attr(data-label); /* ヘッダーのラベルを表示 */
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
        color: #333;
    }
    .sp-hidden {
        display: none !important;
    }

    .container .main_contents .content_box .content_right .right {
        display:block;
    }

    .dashboard_project th {
        background: var(--color-order-background);
        border: solid 1px #ccc;
        color: #333333;
        padding: 10px;
        width: 100px;
        border-right: none;
    }
    .dashboard_project td {
        border: solid 1px #ccc;
        padding: 10px;
        text-align: center;
        display: block;
        height: 70px;
        width: 100px;
        border-top: 0px;
        border-right: 0px;
    }
    
    .main_contents .solution_desc .main_image_box .main_image { 
        width: 100%;
    }

    .main_contents .solution_desc .main_description img {
        width: 100%;
        min-width: 100%;
        box-shadow: none;
    }

    .dialog_title {
        margin: 50px 5px 0px 5px;
    }

    .dialog_body {
        margin: 0 5px 50px 5px;
    }

  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
    width: 100%;
  }

  .responsive-table thead {
    display: none; /* ヘッダー非表示 */
  }

  .responsive-table tr {
    margin-bottom: 1rem;
    border: 2px solid #bbb;   /* カード全体の枠 */
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  .responsive-table td {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd; /* 各行の区切り */
    background: #fafafa;
  }

  .responsive-table td:nth-child(even) {
    background: #fdfdfd;
  }

  .responsive-table td:last-child {
    border-bottom: none;
  }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 10px;
    color: #333;
  }

  .main_contents .document_contain_formcomplete {
    background-color: var(--color-white);
    margin: 0 0 0px 0;
    padding: none;
  }
}