@charset "utf-8";
/*--------------------------------------------------------------------------------

共通/common

--------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------

ヘッダー/header

--------------------------------------------------------------------------------*/

@media screen and (max-width: 959px){
    #gheader {
    }

    #gheader .wrapper {
        box-sizing: border-box;
        width: 100%;
        padding: 3%;
    }

    #gheader h1 {
        margin-bottom: 1em;
    }

    #gheader .wrapper .col_l,
    #gheader .wrapper .col_r {
        width: 100%;
        padding: 0;
        float: none;
    }

    #gheader .wrapper .col_l a {
        display: block;
    }

    #gheader .wrapper .col_l img {
        display: block;
        width: 100%;
    }

    #gnav {
        z-index: 999999;
    }

    #gnav ul {
        width: 100%;
    }

    #gnav li {
        display: block;
        width: 100%;
    }
    #gnav.scroll {
        position: static;
    }

    #sidebar {
        display: none !important;
        float: none;
    }

    .top_image {
        margin-bottom: 0;
    }

    .top_image img {
        width: 100%;
    }

    #mainArea {
        box-sizing: border-box;
    }

    #mainArea.wrapper {
        box-sizing: border-box;
        width: 100%;
    }

    #mainArea .content_area {
        box-sizing: border-box;
        width: 100%;
        padding: 15px 3%;
        margin-bottom: 50px;
        float: none;
    }

    #mainArea .content_area h2 img {
        max-width: 100%;
    }

    #mainArea .content_area .content_box {
        padding: 4%;
        padding-bottom: 10%;
    }

    div#bgcontainer {
        display: none;
    }
}

/*--------------------------------------------------------------------------------

一般/common

--------------------------------------------------------------------------------*/
@media screen and (max-width: 959px){

    /* ナビゲーション/navigation -------------------------------------------- */
    #gnav {
        display: block;
        width: 220px;
        height: 100%;
        position: fixed;
        top: 0;
        right: -220px;
        z-index: 99999;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
    }

    #gnav li {
        border: none !important;
        border-bottom: 1px dashed #ffffff !important;
    }

    #gnav li a {
        font-size: 1em;
        padding: 1em 0.3em;
    }

    #gnav li.manga:before,
    #gnav li.manga:after {
        display: none;
    }

    #gheader .btn_menu {
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: 0.5em 0.3em;
        margin-top: 0.7em;
        text-align: center;
        background: #28b6f6;
        background: url(../../image/top_back.jpg);
        color: #ffffff;
        font-weight: bold;
        border-radius: 5px;
    }

    #gnav .btn_close {
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: 1em 0.3em;
        text-align: center;
        background: #a0a0a0;
    }

    #gheader .sub_nav {
        width: calc(100% - 220px);
    }

    .btn_top {
        width: 30px;
        height: 30px;
        padding: 0.5em;
        bottom: 1em;
    }

    .btn_top img {
        width: 100%;
    }

    #icon_nav {
        display: none;
    }
}

/*--------------------------------------------------------------------------------

コンテンツ/content

--------------------------------------------------------------------------------*/
@media screen and (max-width: 959px){

    .top .top_box {
        width: 94%;
        margin: 1em auto;
        box-sizing: border-box;
    }

    .top_box .top_title {
        padding: 24px 1em 40px;
    }

    .top_box .top_title:after {
        width: 30%;
        background-size: contain;
        background-position: top right;
    }

    .top_box .top_title img {
        width: 100%;
    }

    .top_box #top_nav {
        height: auto;
        margin-bottom: 30px;
        border-radius: 0 0 10px 10px;
    }

    .top_box #top_nav ul {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 3%;
        position: static;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .top_box #top_nav ul li {
        width: 30%;
        margin: 0;
        margin-right: 5%;
        margin-bottom: 0.5em;
    }

    .top_box #top_nav ul li:nth-child(3n) {
        margin-right: 0;
    }

    .top_box #top_nav ul li img {
        width: 100%;
    }

    .top_box .top_news {
        margin-bottom: 30px;
    }

    /* どんな会社？/about -------------------------------------------- */
    #about_qa h3 {
        height: auto;
        line-height: 1.3em;
    }

    #about_qa a {
        display: block;
    }

    #about_qa dd:first-of-type:before {
        top: 0;
    }

    #about_qa .qa_image {
        display: block;
    }

    #about_qa .qa_image li {
        width: 100%;
        margin-bottom: 12px;
    }

    #about_qa .qa_image img {
        max-width: 100%;
    }

    #about_greeting figure img {
        width: 100%;
    }

    #about_business .business_list dd figure {
        float: none;
        margin: 0;
        margin-bottom: 1em;
        width: 100%;
    }

    #about_business .business_list {
        margin-bottom: 2em;
    }

    #about_business .business_list dd figure img {
        width: 100%;
    }

    #about_profile .about_table {
        font-size: 0.8em;
    }

    #about_profile .about_table th,
    #about_profile .about_table td {
        padding: 0.5em;
    }

    #about_profile .about_table th {
        width: 35%;
    }

    #about_profile .about_history dt {
        width: auto;
        color: #29b6f6;
    }

    #about_profile .about_history dd {
        width: 100%;
        font-size: 0.9em;
    }

    /* 商品一覧/product ------------------------------------------------------------ */

    .btn_product {
        text-align: center;
    }

    .btn_product li a img {
        width: 100%;
    }

    .btn_product li a span {
        font-size: 0.8em;
    }

    #product_detail #detail .col_l,
    #product_detail #detail .col_r {
        float: none;
        width: 100%;
    }

    #product_detail #detail .col_l {
        text-align: center;
        margin-bottom: 1em;
    }

    #product_detail .product_size {
        border-top: 1px dashed #cccccc;
        margin-bottom: 1rem;
    }

    #product_detail .product_size li {
        box-sizing: border-box;
        width: calc((100% - 1px) / 2);
        margin-bottom: 0;
        padding: 1em 0;
        border-right: 1px dashed #cccccc;
        border-bottom: 1px dashed #cccccc;
    }

    #product_detail .product_size li:nth-child(2n) {
        border-right: 0;
    }

    #product_detail .product_size li .size_img {
        font-size: 0;
    }

    #product_detail .product_size li .size_img img {
        position: static;
        display: inline-block;
        max-width: 40%;
        font-size: 0.7rem;
    }

    #product_detail .product_size li .size_img img:not(:last-child) {
        margin-right: 1em;
    }

    #product_detail .product_size li .size_img .back {
        transform: none;
    }

    #product_detail .product_size li .size_img:hover {
        transform: none;
    }

    #product_detail .product_size li .size_img:hover .front {
        display: inline-block;
    }

    #product_detail .product_size li .size_img span {
        display: block;
        margin-top: 1em;
    }

    #product_detail .product_box h4, .product_header {
        font-size: 21px;
    }

    #product_detail .product_box h4:after {
        margin-bottom: 1em;
    }

    #product_detail .product_size li img {
        max-width: 100%;
    }

    #product_detail .product_price {
        font-size: 0.7em;
    }

    #product_detail .product_price th,
    #product_detail .product_price td {
        word-wrap: break-word;
        padding: 0.5em;
    }

    #product_detail .product_price th {
        width: 18%;
    }

    #product .extra_option li {
        padding: 0.7em;
        font-size: 16px;
    }

    #product .bagging_list li {
        width: calc((100% - 1.4em)/3);
        font-size: 0.8em;
    }

    #product .bagging_list li img {
        width: 100%;
    }

    #product #send_map img {
        width: 100%;
    }

    /* 作り方/howto -------------------------------------------------------------- */

    #howto .howto_box h3 img {
        max-width: 100%;
    }
    #howto .howto_box img {
        max-width: 100%;
    }

    #howto .howto_box .design_attention span {
        display: block;
        width: 30%;
    }

    #howto .howto_box .design_attention p {
        width: 60%;
    }

    #howto .howto_box .howto_example li {
        margin-bottom: 1em;
    }

    #howto .howto_box .howto_jpg_order {
        align-items: flex-start;
    }

    #howto .howto_box .howto_jpg_order img {
        width: 50%;
        height: auto;
    }

    #howto .template_list li a {
        padding: 0.8em;
    }

    #howto .template_list li a img {
        width: 100%;
    }

    #howto .howto_size {
        font-size: 0.8em;
    }

    #howto .howto_size th,
    #howto .howto_size td {
        padding: 0.5em;
    }

    #howto .howto_size th {
        width: 30%;
    }

    #design_support figure img {
        width: 100%;
    }

    /* 制作実績/works -------------------------------------------------------------- */

    #works .works_list li {
        width: 100%;
        margin-right: 0;
        padding: 5%;
        padding-bottom: 10%;
    }

    #works .works_list li img {
        width: 100%;
    }

    /* 特定商取引/プライバシーポリシー/info -------------------------------------------- */

    #info_law .info_table {
        font-size: 0.8em;
    }

    #info_law .info_table th {
        width: 40%;
    }

    /* サッカーボール/football -------------------------------------------- */

    .football .main_image {
        margin-bottom: 1em;
    }

    .football .main_image img {
        width: 100%;
    }

    .football h2 {
        margin-bottom: 1em;
    }

    .football h3 {
        margin-bottom: 1em;
    }

    .football h3 img {
        max-width: 100%;
    }

    .football .football_image {
        margin-top: 50px;
    }

    .football .football_image li {
        width: 100%;
    }

    .football .football_image img {
        width: 100%;
    }

}

/*--------------------------------------------------------------------------------

フッター/footer

--------------------------------------------------------------------------------*/

@media screen and (max-width: 959px){
    #gfooter {
        box-sizing: border-box;
        padding: 5%;
    }

    #gfooter .wrapper {
        width: 100%;
    }

    #gfooter .sitemap {
        width: auto;
        float: none;
        margin-bottom: 1.2em;
    }

    #gfooter .sitemap {
        font-size: 0;
    }

    #gfooter .sitemap li {
        display: inline-block;
        font-size: 14px;
        margin-bottom: 1em;
        margin-right: 1em;
        line-height: 1em;
    }

    #gfooter .fb_iframe_widget {
        margin-bottom: 1.2em;
    }

    #gfooter .footer_info {
        width: 80%;
        height: auto;
        float: none;
        position: static;
    }

    #gfooter .footer_info small {
        position: static;
        margin-top: 1em;
    }
}

/*--------------------------------------------------------------------------------

拡張/java/css

--------------------------------------------------------------------------------*/