.pc-only {
        display: block;
    }
    .sp-only{
    	display: none;
    }

/* ==========================================================================
   TABLET
========================================================================== */

@media screen and (max-width: 800px) {

    /* style */
    body {
        min-width: 100%;
        background-image: none;
    }

    .wrapper {
        width: 96%;
        padding: 0px 2%;
    }

    img {
        max-width: 100%;
        height: auto;
    }
    


    /*-- header --*/
    .hd {
        background-color: #C40809;
        border-bottom: 1px solid #900;
    }

    .tell-2 {
        font-size: 10px;
    }

    .prico {
        float: left;
        padding-top: 10px;
        width: 18%;
    }

    .header_r {
        width: 100%;
    }

    .word {
        background-size: 100%;
        margin: 0;
        padding: 5px 0px 0px;
    }

    .tell {
        margin-top: 5px;
    }

    nav {
        background-color: #f7f9ff;
        padding-bottom: 15px;
    }

    nav .menu-button-01 {
        width: 32.5%;
        height: auto;
        text-align: center;
        background-size: 100% 100%;
        float: left;
        margin: 2px;
    }

    .topnav-button-01 {
        width: 48.5%;
        height: auto;
        text-align: center;
        background-size: 100% 100%;
        float: left;
        margin: 2px;
    }

    .search1:hover .btnnx {
        background: none;
    }

    .btnnx {
        position: relative;
        display: block;
        width: 5vw;
        height: auto;
        background: none;
    }

    .button-01 {
        font-size: 15px;
    }

    .button-01 span {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .navigation {
        height: auto;
    }

    .navigation li {
        float: left;
        width: 33.3333%;
    }

    .mobser {
        display: block
    }

    .navigation ul {
        margin: 0;
        padding: 0;
        height: auto;
        background-color: #E8E8E8;
    }


    /*-- header ver 202012 --*/
    
    
    .headerMain {
    margin-top: 100px;
}
    
    .logo > a {
        display: inline-block;
    }

    .headerCaptionWrap {
        flex-wrap: wrap;
        padding-bottom: 28px;
    }

    .headerCaption__text {
        width: 100%;
        padding: 0;
        text-align: center;
        font-size: .8em;
    }

    .headerCaption__search {
        width: 100%;
    }

    .headerCaption__search-box input[type="text"] {
        padding: .5em 0;
    }

    .headerCaption__search-submit {
        padding: .5em;
        box-sizing: border-box;
    }

    .bottomNav .header_tell{
        width: 100%;
        justify-content: center;
        padding-bottom: 7px;
        border-bottom: 1px solid #CCC;
        margin-bottom: 10px;
    }

    .bottomNav .header_tell .header_tell-num{
        font-size: 30px;
    }

    .bottomNav .header_button-1{
        width: 50%;
    }

    .bottomNav .header_button-2{
        width: 50%;
    }

    .logo {
        width: 100%;
        text-align: center;
    }


    .header_button-1 a,
    .header_button-2 a {
        padding: 14px 0;
    }

    .header__nav1 {
        flex-wrap: wrap;
    }

    .header__nav1 > a {
        width: 33.3%;

        padding: 15px 0;
        background: #fff;
        color: #0e47a1;
        border: thin solid #0e47a1;
        box-sizing: border-box;
        border-radius: 7px;
        margin-bottom: 16px;

    }

    .header__nav2 {
        width: 100%;
    }

    .header__nav3 {
        width: 100%;
    }

    .header__nav3 {
        padding-left: 0;
    }

    .header__nav3:before {
        content: none;
    }

    .header__nav3 > a {
        width: 33%;
        font-size: 12px;
    }


    /*-- index ver 202012 --*/

    .indexCatch-1,
    .indexCatch-2 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    .indexUpNews dt {
        width: 100%;
    }

    .indexUpNews dd {
        width: 100%;
        padding-left: 24px;
    }



    .indexMaking__list > * {
        width: 50%;
    }

    .indexMaking__list-haribako {
        width: 99%;
    }


    .indexMaking__list__caption {
        font-size: 14px;
    }

    .indexMaking__list__figure-haribako {
        width: 33vw;
    }

    .indexReason__header:after {
        content: "" !important;
    }

    .indexFeatures__list.flex3 li {

        width: 46%;
        margin-left: 2%;
    }

    .indexFlow__list.flex2 li {
        width: 48%;
        margin-left: 1%;

    }

    .indexAbout__list > a {
        width: 49% !important;
    }

    .indexNouki__list > a {
        width: 49% !important;
    }

    .indexAside-left {
        width: 100%;
    }

    .indexAside-right {
        width: 100%;
    }


    .indexAside-right__sns > a:nth-child(1) {
        text-align: center;
        color: #fff;
        background: #0163E1;
        padding: .8em;
        margin: 24px 0;
        border-right: thin solid #fff;
        border-radius: 5%;

    }

    .indexAside-right__sns > a:nth-child(2) {
        text-align: center;
        color: #fff;
        background: #E60023;
        padding: .8em;
        margin: 24px 0;
        border-radius: 5%;

    }

    .partsCta {
        width: 96%;
        margin: 0px 2%;
        padding: 0;
        line-height: 1.1;
    }


    .partsCta__body:before {
        content: none;
        z-index: -1;
    }

    .partsCta__body-link1 {
        font-size: 22px;
        padding: 26px 10px;
    }

    .partsCta__body-main {
        text-align: left;
    }

    .partsCta__body-marker {
        display: inline;
    }

    /*-- footer --*/
    .ft {
        clear: both;
    }

    .ft_add {
        float: none;
        width: 100%;
    }

    .ft_list {
        width: 98%;
        margin: 0 auto;
    }

    .ft_list ul li {
        width: 100%;
    }

    .ft_link {
        clear: both;
        width: 100%;
        overflow: hidden;
        padding-bottom: 20px;
    }

    .ft_link ul {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: auto;
    }

    .ft_link ul li {
        list-style: none;
        padding-right: 1%;
        width: 48%;
        padding-bottom: 5px;
    }

    .ft_link ul li img {
        width: 100%;
    }

    .fixUnderWrap a .pc_only {

        display: none;
    }

    .fixUnderWrap a:before {

        display: none;
    }


    .copy {
        float: none;
    }

    .attachment-149x85 {
        width: 149px;
        height: 85px
    }

    .fixUnder {
        background: rgba(0, 0, 0, 0.6);
    }

    .fixUnderWrap {
        max-width: 100%;
        width: 100%;
    }

    a.fixUnderWrap__contactLink,
    a.fixUnderWrap__mitsumoriLink,
    a.fixUnderWrap__telLink {
        width: 32%;
        padding: 1em 0;
        font-size: 0.8em;
        margin: 0;
        box-sizing: border-box;
    }


    /*-- index --*/
    .aisatsu {
        background-image: none;
        padding-right: 15px;
    }

    .index_c {
        width: 64%;
    }

    .index_r {
        width: 32%;
    }

    .index_list {
        width: 100%;
    }

    .pickup {
        padding: 20px;
        background-size: 60% auto;
    }

    .pickup ul {
        margin: 0;
    }

    .pickup li {
        width: 60%;
        margin: 0 0 10px 0;
    }

    .toplist li {
        width: 24%;
    }

    .postimage2 {
        height: 60px;
    }

    .toplist li {
        width: 32%;
    }

    #example_list2 ul {
        width: 100%;
    }

    #example_list2 ul,
    #example_list2 li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #example_list2 li {
        width: 100%;
        height: auto;
    }

    #example_list2 li a {
        list-style: none;
        background-color: #FFF;
        border: 1px solid #CCC;
        padding: 10px;
        border-radius: 5px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 100%;
        float: none;
        margin-bottom: 5px;
    }

    #example_list2 li a img {
        width: 200px;
        height: auto;
    }

    #prevBtn2_no,
    #nextBtn_no {
        display: none
    }

    .navigation ul {
        margin: 0;
        padding: 0;
        height: auto;
    }

    .topnav li {
        width: 48.5%;
        margin: 2px;
    }

    .topnav li a {
        font-size: 15px;
        line-height: 41px;
    }

    .tuto1 h2 {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 20px;
    }

    .tuto1 p {
        font-size: 15px;
        line-height: 24px;
    }

    .search1 {
        min-height: 440px;
    }

    .btncon {
        font-size: 20px;
    }

    .tel img {
        width: 34px;
    }

    .tel span {
        font-size: 26px;
    }

    /*-- page --*/
    .sideber {
        display: none;
    }

    .main {
        width: 100%;
    }

    .toriatukai {
        width: 100%;
        overflow: hidden;
    }

    .toriatukai li,
    .toriatukai li a,
    .toriatukai li img,
    .toriatukai li a span {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .toriatukai li {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 25%;
        border-radius: 0px;
    }

    .toriatukai li a {
        width: 100%;
        padding: 5px;
        border-radius: 0px;
    }

    .toriatukai li a img {
        width: 100%;
        max-height: 85px
    }

    .toriatukai li a span {
        width: 100%;
    }

    a.view_dl,
    a.view_more {
        width: 100%;
        margin-top: 10px;
        box-sizing: border-box;
    }

    /* ==========================================================================
   PhotospaceJS
========================================================================== */
    .photospace {
        position: relative;
        margin-bottom: 20px !important;
        min-height: 200px;
        /* space for loader */
    }

    .photospace,
    .photospace .thumnail_col,
    .photospace .gal_content,
    .photospace .slideshow-container,
    .photospace .slideshow span,
    .photospace .slideshow a.advance-link,
    .photospace .slideshow img {
        width: 100% !important;
        height: auto !important;
    }

    .photospace .slideshow span {
        display: block !important;
    }

    .photospace .gal_content {
        float: none !important;
    }

    .photospace .slideshow span {
        position: relative !important;
        /* Keep the gallery height – Doesn't work with synced transistions */
    }

    .photospace .loader {
        width: 100px !important;
        height: 100px !important;
        top: 50% !important;
        left: 50% !important;
        margin-left: -50px;
    }

    .photospace .thumbs_wrap2 {
        min-height: 45px;
        /* space for thumbnails */
        overflow: hidden;
    }

    .photospace .thumbs {
        min-height: 40px;
    }

    .photospace .thumbs_wrap {
        float: left;
        left: 50%;
        position: relative;
    }

    .photospace .pageLink.next {
        margin-right: 0;
    }

    .photospace .thumnail_col {
        float: left;
        left: -50%;
        width: auto !important;
        position: relative;
    }

    .photospace ul.thumbs {
        float: left;
    }

    .photospace span.image-caption {
        position: inherit !important;
    }

    .photospace div.thumbs_wrap,
    .photospace .thumnail_col,
    .photospace .image-caption {
        width: 100% !important;
    }

    .photospace_clear,
    .pageLink {
        float: left;
        clear: none;
    }

    /*-- example --*/
    #example_list2 ul {
        width: 100%;
    }

    #example_list2 ul,
    #example_list2 li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #example_list2 li {
        width: 100%;
        height: auto;
    }

    #example_list2 li a {
        list-style: none;
        background-color: #FFF;
        border: 1px solid #CCC;
        padding: 10px;
        border-radius: 5px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 100%;
        float: none;
        margin-bottom: 5px;
    }

    #example_list2 li a img {
        width: 200px;
    }

    #prevBtn2_no,
    #nextBtn_no {
        display: none
    }

    .ft_link li:nth-child(4) {
        /*display: none;*/
    }
}

@media screen and (max-width: 680px) {
    .toriatukai li {
        width: 33.3333%;
    }

    .sample dt,
    .sample dd {
        float: none;
        width: 100%;
    }

    .sample dt {
        background-color: #F0F0F0;
    }

    .header-buttom-1 {
        font-size: 12px;
    }

    .header-buttom-2 {
        font-size: 12px;
    }

    .logo_1 {
        font-size: 13px;
        line-height: 17px;
    }

    .logo_2 {
        font-size: 15px;
        line-height: 19px;
    }

    .logo_3 {
        font-size: 40px;
        line-height: 45px;
    }


    .flex3 > * {
        width: 50%;
    }

    .flex4 > * {
        width: 50%;
    }

    .indexAbout__caption {
        font-size: 16px;
    }

    .indexMaking__list-haribako {
        width: 99%;
    }

    .indexYouto__list > a {
        width: 50%;
    }

    .indexExist {
        line-height: 1.2;
    }

    .partsCta__body {
        padding: 64px 4%;
    }

    .partsCta__header {
        font-size: 18px;
    }

    .partsCta__body-header {
        font-size: 32px
    }

    .partsCta__body-caption {
        font-size: 28px;
    }

    .partsCta__body-sub {
        font-size: 18px;
    }

    .btnnx {
        position: relative;
        display: block;
        width: 5vw;
        height: auto;
        background: none;
    }

    .flexParent {
        flex-direction: column;
    }

    .tell-2 {
        font-size: 8px;
    }



    .header_r {
        width: 100%;
    }

    .prico {
        display: none;
    }

    .index_ftr {
        float: none;
        clear: both;
    }

    .partsCta__body-link1 {
        width: 100%;

    }

    .partsCta__body-link2 {
        width: 100%;
    }

    .contact {
        height: 325px;
    }

    .btncon {
        width: 80%;
        margin: 19px 10% 6px 10%;
    }

    .tel {
        width: 80%;
        margin: 6px 10% 20px 10%;
    }

    .footerAbout-1,
    .footerAbout-2 {
        width: 100%;
    }
}

/* ==========================================================================
   PHONE
========================================================================== */

@media screen and (max-width: 450px) {

    .pc_only {
        display: none !important;
    }

    .flex4 > *,
    .flex3 > * {
        width: 50%;
    }

    .hd_logo {
        margin-top: 10px;
    }

    .logo_link {
        display: none;
    }

    body {
        overflow-x: hidden;
    }

    header .headMenu {
        margin-top: 32px;
    }

    .navigation {
        background-color: #2866C6;
    }

    .navigation li a:hover,
    .navigation li a.current {
        transform: none;
    }

    .menuTitle {
        display: block;
        pointer-events: all;
        margin: 8px 0;
    }

    .headerToggleMenu {
        background: #B10707;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
        padding: 0;
    }

    .menu-button-01 {
        margin-bottom: 20px;
    }

    .menuTitle + div {
        display: none;
    }

    .tuto1 p {
        text-align: left;
    }

    .indexEstimateFirst a {
        font-size: 16px;
    }

    .navigation div div {
        margin-bottom: 16px;
        border-radius: 3px;
    }

    nav {
        /* position: fixed;*/
        top: 0;
        left: 0;
        width: 100%;
        z-index: 512;
    }

    nav .menu-button-01 {
        width: 48.5%;
        height: auto;
        text-align: center;
        background-size: 100% 100%;
        float: left;
        margin: 2px;
    }

    .button-00 {
        border-radius: 15px;
    }

    .topnav-button-01 {
        width: 48.5%;
        height: auto;
        text-align: center;
        background-size: 100% 100%;
        float: left;
        margin: 2px;
    }

    .mailform dd {
        border-top: none;
    }

    .header-buttom-1 {
        font-size: 15px;
    }

    .header-buttom-2 {
        font-size: 15px;
    }

    .bottomNav .flex3{
        justify-content: space-between;
    }

    .bottomNav .flex3 > *{
        width: 31%;
        padding: 0;
    }

    .bottomNav .header_tell{
        display: none;;
    }

    .bottomNav .word .header_tell a{
        color: #06c;
        box-shadow: unset;
    }

    .bottomNav .header_tell .header_tell-num{
        margin: 0;
    }

    .bottomNav .header_button-tell{
        display: block;
        margin: 0;
    }

    .bottomNav .header_button-tell a{
        color: #f04c27;
        border: 1px solid #f04c27;
        background: #FFF;
        border-radius: 7px;
        text-align: center;
        box-shadow: 0 3px 3px rgb(120 120 120 / 25%);
        transition: 0.3s;
        box-sizing: border-box;
        padding: 6px 0;
    }

    .bottomNav .header_button-1 a,.bottomNav .header_button-2 a{
        padding: 6px 0;
    }

    .bottomNav .header_button-1 span,.bottomNav .header_button-2 span{
        display: none;
    }

    .tell img {
        margin-bottom: 5px;
    }

    .tell-2 {
        font-size: 13px;
    }

    .mainimagebg {
        display: none;
    }

    .pickup {
        display: none;
    }

    .thumbRp,
    .thumbLp,
    .thumbR,
    .thumbL {
        float: none;
    }

    /*-- header --*/
    header {
        margin-top: 30px;
    }

    .headline {
        display: none;
    }

    .logo__point li {
        width: 48%;

    }

    .logo {
        float: none;
        width: 100%;
    }

    .btnnx {
        position: relative;
        display: block;
        width: 10vw;
        height: auto;
        background: none;
    }

    .header_r {
        float: none;
        width: 100%;
    }

    .word {
        width: 100%;
        margin: 0px 0px 5px;
        padding: 0px;
    }

    .tell {
        clear: both;
    }

    .navigation li {
        float: left;
        width: 50%;
    }

    /*-- index --*/

    .indexCatch-1,
    .indexCatch-2 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .indexCatch-2:after {
        content: none;
    }

    .indexUpNews dt {
        width: 100%;
    }

    .indexUpNews dd {
        width: 100%;
        padding-left: 24px;
    }



    .indexMaking__list > * {
        width: 100%;
    }



    .indexMaking__list__caption {
        font-size: 14px;
    }

    .indexMaking__list__figure-haribako {
        display: none;
    }

    .indexYouto__list > a {
        width: 50%;
    }

    .indexExist:before {
        content: none;
    }

    .indexExist__header,
    .indexExist__body {
        margin-left: 0;
        line-height: 1.2;
    }

    .indexReason__header:after {
        content: "" !important;
    }
    .indexReason .flex3 li{
        width: 96%;
        margin: 0 2% 20px;
    }
    .indexReason .flex3 li:nth-last-of-type(1){
        margin-bottom: 0;
    }
    .indexFeatures__list.flex3 li {

        width: 98%;
        margin-left: 2%;
    }

    .indexFlow__list.flex2 li {
        width: 98%;
        margin-left: 2%;

    }
    .indexGuide .bt-bl{
        width: 100%;
        margin: 0;
    }
    .indexGuide .bt-bl:nth-of-type(1){
        margin-bottom: 20px;
    }
    .indexAbout__list > a {
        width: 98% !important;
    }

    .indexNouki__list > a {
        width: 98% !important;
    }

    .partsCta {
        width: 96%;
        margin: 32px 2%;
        padding: 0;
        line-height: 1.3;
    }

    .partsCta__body {
        padding: 8%;

    }

    .partsCta__body:before {
        content: none;
        z-index: -1;
    }

    .partsCta__body-main {
        text-align: left;
    }

    .partsCta__body-link1 {
        width: 100%;
        font-size: 16px;
        padding: 26px 10px;
    }


    .partsCta__body-marker {
        text-align: left;
        display: inline;
    }

    .partsCta__body-link2 {
        width: 100%;
    }

    /*-- footer --*/
    .ft {
        clear: both;
    }

    .ft_text dl {
        width: 100%;
        float: none;
    }

    .ft_text dt {
        width: 100%;
        float: none;
    }

    .ft_link ul li {
        float: none;
        list-style: none;
        width: 100%;
        padding-bottom: 5px;
    }

    .ft_link ul li {
        display: inline-block;
        width: 48%;
        margin-right: 0;
    }

    .ft_link li:nth-child(even) {
        margin-right: 0;
    }

    /*-- index --*/
    .tuto1 h1 {
        text-align: left;
        font-size: 25px;
    }

    .index_c {
        width: 100%;
        float: none;
        clear: both;
    }

    .index_r {
        width: 100%;
        float: none;
        clear: both;
    }

    .topnav li {
        width: 50%;
    }

    .block01 {
        text-align: left;
    }

    .block02 {
        text-align: right;
    }

    .block03 {
        text-align: left;
    }

    .block04 {
        text-align: right;
    }

    .toplist li {
        width: 50%;
    }

    .pickup {
        background-image: none;
    }

    .pickup li {
        width: 100%;
    }

    .search1 {
        width: 95%;
        text-align: center;
    }

    .searchimg {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .search1 p {
        text-align: left;
    }

    .contact .ttlm {
        width: 90%;
    }

    /*-- page --*/
    .sideber {
        display: none;
    }

    .main {
        width: 100%;
    }

    .index_r section:nth-last-child(2) img {
        display: inline-block;
        width: 48%;
        margin-right: 2%;
    }

    .index_r section:nth-last-child(2) a:nth-child(even) img {
        margin-right: 0;
    }

    .toriatukai {
        width: 100%;
        overflow: visible;
        margin-left: 0px;
    }

    .index_ftl {
        float: none;
        clear: both;
        width: 100%;
    }

    .index_ftc {
        float: none;
        clear: both;
        width: 100%;
    }

    .index_ftr {
        float: none;
        clear: both;
        width: 100%;
    }

    .toriatukai li {
        -moz-box-sizing: border-box;
        box-shadow: 0px 3px 7px -3px rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        width: 48%;
        margin-bottom: 24px;
        border-radius: 4px;
        margin-right: 4%
    }

    .toriatukai li:nth-child(2n) {
        margin-right: 0;
    }

    .toriatukai li a {
        padding: 12px;
        border: none;
        border-radius: 4px;
        display: block;
        overflow: hidden;
    }

    .toriatukai li a img {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin-right: 5px;
        margin-bottom: 8px;
        float: left;
    }

    .toriatukai li a span {
        text-align: center;
    }

    .index_list li span {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 2%;
        margin: 0;
    }

    p.gotop {
        position: fixed;
        right: 0;
        bottom: 0;
        text-align: center;
    }

    p.gotop a {
        width: 120px;
        display: block;
    }

    dl.toku dt {
        width: 6em;
    }

    dl.toku dd {
        margin-left: 7em;
    }

    #example_list2 li a img {
        width: 100%;
    }

    .mailform dt,
    .mailform dd {
        clear: both;
        width: 100%;
    }

    .column2 {
        float: none;
        width: 100%;
    }

    .maintitle,
    .maintitle_exam,
    .maintitle_pro {
        margin-top: 0;
    }

    .pc-only {
        display: none;
    }
    .sp-only{
    	display: block;
    }

    .view_box {
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        margin-bottom: 32px;
    }

    .view_box .description {
        width: 100%;
    }

    .view_image {
        float: none;
        width: 80%;
        display: block;
        margin: 1em auto;
    }

    /* ==========================================================================
   PhotospaceJS
========================================================================== */
    .photospace .thumbs li {
        width: 55px;
        height: 55px;
    }

    .photospace .thumbs li img {
        width: 55px;
        height: 55px;
    }

    .photospace .thumnail_col a.pageLink {
        width: 55px;
        height: 55px;
    }
}