@charset "utf-8";


/********************************* box,table *****************************/

.box-content {
    display: flex;
    align-items: flex-start;
}
.box-content-inner {
    position: relative;
	padding: 28px;
}
.box-content-img {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
}
.box-content-img img {
    margin: 20px;
}
.box-content-img p {
    color: #045661;
    text-align: center;
}
.box-content-inner .btn01 {
    margin-top: 40px;
    /*float: right;*/
}
.box01 .box-content-inner,
.box01 .box-shokisettei {
    width: 50%;
}
.box01 .box-shokisettei a img {
    width: 100%;
}
.box0203 {
    display: flex;
    justify-content: space-between;
}
.box02, .box03 {
    width: 48%;
}

.box-shokisettei {
    padding: 28px;
    padding-left: 0;
}

.box-content table {
    width: 100%;
    margin-bottom: 20px;
}
.box-content table th {
    text-align: left;
    padding: 10px 40px;
    background-color: #D3E4E5;
    color: #0F3D43;
    width: 280px;
}
.box-content table td {
    padding: 10px 40px;
    text-align: left;
}
.box-content table tr:nth-child(even) {
    background-color: #ECECEC;
}
.box-content table .price {
    color: #F31A1A;
    font-weight: bold;
    font-size: 1.25rem;
    text-align: right;
}

/******************************* TOP ******************************/
/*.mainvisual-img {
    background: url(../img/shop20211029-1.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 50vh;
    position: relative;
}*/

/*
.main-btn {
    color: #0F3D43;
    position: absolute;
    top: 100px;
    left: 60%;
}
.main-btn h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.main-btn p {
    margin-bottom: 20px;
}
.main-btn a img {
    display: block;
    margin-bottom: 20px;
    width: 300px;
}
*/

.mainvisual {
    width: 100%;
    height: 70vh;
    background-image: url(../img/shop20240423.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.mainvisual-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

/*.mainvisual-img {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.mainvisual-img::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0F3D4320;
    background-blend-mode: multiply;
}*/

.mainvisual-btn {
    width: fit-content;
    position: absolute;
    bottom: 20px;
    right: 0;
}


.top-container {
    display: flex;
    justify-content: space-between;
}

.top-content {
    margin-right: 20px;
}

.news-box {
    margin-bottom: 80px;
}
.news-box table {
    width: 100%;
    /* font-size: 14px; */
}
.news-box table tr:first-child th,
.news-box table tr:first-child td {
    border-top: solid 1px #ABABAB;
}
.news-box table th,
.news-box table td {
    border-bottom: solid 1px #ABABAB;
    padding: 0.5rem 1rem;
}
.news-box table th {
    color: #045661;
    text-align: left;
    max-width: fit-content;
}

.contact-bottom {
    background-color: #0F3D43;
    color: #ffffff;
    margin-top: 80px;
    margin-bottom: 1px;
}
.contact-bottom .wrapper {
    display: flex;
}
.contact-bottom .left-box {
    display: block;
    width: 50%;
    background: url(../img/shop20240423-sp.png) no-repeat;
    background-size: cover;
}
.contact-bottom .right-box {
    text-align: center;
    margin: 40px auto;
}
.right-box span {
    font-size: 1.2rem;
}
.right-box img {
    margin: 20px 0;
    max-width: 400px;
}
.right-box .btn02 {
    margin-top: 20px;
}

/* top message */

.top-message p {
    color: #045661;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: #D3E4E5;
    padding: 40px;
    width: 70%;
}
.top-message-content {
    text-align: center;
    margin: 40px 0;
}
.top-message-content p {
    color: #045661;
    font-weight: bold;
}
.top-message-img {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.top-message-img img {
    margin: 0 20px;
}


/***************************** サポート *******************************/

.shokisettei-top_sp,
.option-contents_sp {
    display: none;  /*スマホで表示*/
}


#shokisettei,
#moushikomi {
    padding-top: 160px;
}
.shokisettei .box-content-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.shokisettei-contents {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 10px;
    width: 630px;
}
.shokisettei li img,
.option-contents img  {
    margin-bottom: 10px;
}
.shokisettei li p,
.option-contents p {
    font-size: 14px;
}
.shokisettei-contents img,
.shokisettei-contents p {
    width: 200px;
}
/* .shokisettei-price {
    margin: auto 0;
}
 */
.moushikomi-contents {
    display: flex;
    justify-content: center;
    max-width: 700px;
}
.box-plus {
    margin: auto;
    color: #045661;
}
.box-plus p {
    text-align: center;
}

.price-l {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}
@media only screen and (max-width: 1023px) {
    .price-l {
        margin: 0 auto;
    }
}
.price-l_title {
    color: #0F3D43;
}
.price-l_price {
    color: #F31A1A;
    margin-top: -12px;
}
.price-l .tax {
    font-size: 1rem;
    color: #0F3D43;
}

/***************************** ネットワーク ****************************/

.network-illust {
    max-width: 200px;
}






/**************************** PC買取・販売 ******************************/
.pc_card-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.pc_card {
    width: 240px;
    margin: 6px;
    background-color: #ffffff;
    border-radius: 10px;
}
.pc_card-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}
.pc_card-img img {
    height: 100%;
    width: auto;
    margin: 0 auto;
}
.pc_card-content {
    padding: 20px;
}
.pc_card-content-maker {
    font-size: 13px;
}
.pc_card-content-name {
    color: #045661;
    font-weight: bold;
}
.pc_card-content-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #F31A1A;
    text-align: right;
}
.pc_card-content-price span {
    font-size: 0.8rem;
}


/***************************** ホームページ制作 *************************/

.box-content .box-tel {
    margin-right: 20px;
}

.box-content .web-flow div{
    width: 200px;
    margin-right: 20px;
}
.box-content .web-flow img {
    margin: 0 auto;
    margin-bottom: 20px;
}
.box-content .web-flow p {
    text-align: left;
    font-size: 14px;
}
.box-content i {
    color: #045661;
    font-weight: 900;
    margin: auto;
}
.box-content p span {
    font-weight: bold;
}

.web-productions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}
.card {
    width: 350px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #dbdbdb;
    margin-bottom: 20px;
    margin-right: 20px;
  }
  .card-img a img {
    border-radius: 10px 10px 0 0;
    max-width: 100%;
    height: auto;
  }
  .card-img:hover {
      opacity: .6;
      transition: .4s;
  }
  .card-content {
    padding: 20px;
  }
  .card-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #045661;
  }
  .card-text {
    color: #777;
    font-size: 14px;
    line-height: 1.5;
  }
  .card-link {
    text-align: right;
    padding: 20px;
  }
  .card-link a {
    color: #248e9c;
  }
  .card-link a:hover {
    border-bottom: solid 1px #248e9c;
}



/***************************** お問い合わせ ***************************/
.inquiry-tel {
    text-align: center;
    margin-bottom: 80px;
}

.okotowari a {
    color: #248e9c;
}
.okotowari a:hover {
    text-decoration: underline;
}


form, button,input {border:0; margin:0; padding:0;}

.myform table {
    margin: 0 auto;
}
.myform table th,
.myform table td {
    display: block;
}
.myform table th{
    vertical-align: top;
    /* padding: 10px; */
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
}
.myform table td {
    /* padding: 10px; */
    margin-bottom: 2rem;
}
.myform table td input, textarea {
    border:  solid 1px #dbdbdb;
    border-radius: 6px;
    padding: 10px;
    width: 600px;
}
.myform span {
    color: #F31A1A;
}
.myform p {
    text-align: center;
}
.btn-submit {
    text-align: center;
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.form_confirm table td {
    border:  solid 1px #dbdbdb;
    border-radius: 6px;
    padding: 10px;
    width: 600px;
    background-color: #ECECEC;
}

/***************************** アクセス *******************************/
.access {
    display: flex;
    flex-wrap: wrap;
}
.access p {
    width: 48%;
    max-width: 500px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 960px) {
    .access p {
        width: 100%;
    }
}

/***************************** 会社概要 *******************************/

.box-bold {
    font-size: 1.2rem;
    font-weight: bold;
    color: #045661;
}
.greeting-content {
    display: flex;
    align-items: flex-start;
}
.greeting-content p {
    width: 55%;
    margin-right: 5%;
}
.greeting-content img{
    width: 40%;
}

/*********************** プライバシーポリシーほか **************************/
.map {
    padding: 10px;
}


.sitemap {
    display: flex;
}
.sitemap ul {
    width: 50%;
}
.sitemap ul li::before {
    content: url(../img/logomark-icon.png);
    padding-right: 4px;
    display: inline;
}

/*ホバー無し状態のスタイル*/
.sitemap ul li a {
    display: inline-block;
    position: relative;
    color: #045661 !important;
    line-height: 40px;
  }
  .sitemap ul li a::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #F31A1A;
    transition: all 0.3s ease 0s;
  }
  /*ホバー無し状態のスタイル＿ここまで*/
  
  /*ホバー有り状態のスタイル*/
  .sitemap ul li a:hover {
    color:#F31A1A!important;
  }
  .sitemap ul li a:hover::after {
    width: 100%;
  /*ホバー有り状態のスタイル＿ここまで*/
}

.privacy .privacy-sec {
    margin-bottom: 40px;
}


.error404contents {
    padding-top: 80px;
    text-align: center;
}



/*---   public style   for Tablet   ---------------------------------*/
@media only screen and (max-width:1023px) {

    /********************* box,table**********************/
    /*.top-box {
        margin: 20px 10px;
    }
    .box01 .box-content {
        flex-direction: column;
    }*/
    .box0203 {
        flex-direction: column;
    }
    .box02, .box03 {
        width: 100%;
    }
    .box-content-img .icon {
        height: 60px;
    }

    .box01 .box-content-inner,
    .box01 .box-shokisettei {
        width: 100%;
    }
    /******************************* TOP ****************************/
    
    .mainvisual {
        height: 60vh;
        background-position-x: left;
    }

    .mainvisual .wrapper {
        width: 100%;
        padding: 0;
    }

    .mainvisual-btn {
        bottom: 20px;
        right: 20px;
    }

    .top-container {
        flex-direction: column;
    }
    .top-content,
    .top-side {
        width: 100%;
    }

    .news-box,.sns-box {
        width: 100%;
        /*margin-top: 40px;*/
    }

    .contact-bottom .wrapper {
        padding: 0;
    }
    .contact-bottom .right-box img {
        width: 80%;
        margin: 20px auto;
    }

    /******************************* SUPPORT ****************************/
    .shokisettei .box-content-inner {
        padding: 20px;
    }

    .box-content table th{
        width: 200px;
    }

    .shokisettei .box-content-inner {
        flex-direction: column;
        align-items: center;
        align-items: flex-start;
    }
    .shokisettei-contents {
        width: 100%;
        /* margin-bottom: 40px; */
    }
    .shokisettei-contents img,
    .shokisettei-contents p {
        width: 180px;
    }
    .shokisettei-price {
        margin: 0 auto;
    }
    .option-contents,
    .option-price {
        margin: 0 auto;
    }
    /* .option-contents {
        margin-bottom: 40px;
    } */
    

    /***************** PC買取・販売 *********************/
    .pc_card {
        margin-bottom: 20px;
    }

    
    /********************* WEB **********************/
    .box-content .web-flow div {
        width: 25%;
    }
}

/*---   public style   for SmartPhone   ------------------------------*/
@media only screen and (max-width:599px) {


    /********************* box,table**********************/
    /* .box-content-inner {
        padding: 40px 32px;
    } */
    .box-content-img {
        flex-wrap: wrap;
        justify-content: center;
    }
    .box-content-img .icon {
        height: 56px;
        margin-right: 10px;
    }
    .box01 .box-content {
        flex-direction: column;
    }
    .box-shokisettei {
        padding: 20px;
    }
    .box0203 {
        margin-bottom: 40px;
    }

    .box-content table {
        border: 0;
        width:100%
    }
    .box-content table tr {
        display: block;
        margin-bottom: .625em;
        border: 1px solid #D3E4E5;
    }
    .box-content table th,
    .box-content table td {
        display: block;
        border-right: none;
        padding: 10px 1rem;
    }
    .box-content table th{
        background-color: #D3E4E5;
        color: #0F3D43;
        width: 100%;
    }
    .box-content table td {
        border-bottom: 1px dotted #ECECEC;
        font-size: 14px;
        position: relative;
    }
    .box-content table td:last-child {
        border-bottom: 0;
    }
    .box-content table tr:nth-child(even){
      background-color: #fff;
    }
    
    .box-content table th span {
        font-size: 12px;
        color: #F31A1A;
    }
    .price {
        font-size: 1em;
    }

    .box-content ul li {
        margin: 10px 0;
    }

    /******************************** TOP *******************************/
    /*.mainvisual-img {
        background-position: -160px;
    }

    .main-btn {
        color: white;
        text-shadow: 0 0 5px #000000;
        top: auto;
        bottom: 0;
        left: 10px;
    }
    .main-btn h1 {
        font-size: 2.5rem;
    }
    .main-btn a img {
        width: 200px;
        margin-bottom: 10px;
    }*/
    
    .mainvisual {
        height: 34vh;
        /*background-image: url(../img/shop20211118-2-sp.png);
        background-position-x: -10px;
        background-position-y: -10px;*/
    }

    .mainvisual-btn {
        bottom: -100px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    .btn-tel img {
        width: 220px;
    }

    .only-sp-mt {
        margin-top: 140px;
    }

    .top-container {
        flex-direction: column;
    }
    .top-content,
    .top-side {
        width: 100%;
    }

    .news-box {
        margin-bottom: 40px;
    }
    .news-box table th {
        padding-left: 0;
    }
    .news-box table td {
        padding: 0.5rem 0 ;
    }

    .contact-bottom .left-box {
        display: none;
    }
    .contact-bottom .right-box {
        margin: 40px auto;
    }

    /* top message*/

    .top-message p {
        font-size: 0.8rem;
        padding: 20px;
        width: fit-content;
    }
    .top-message-img img {
        height: 60px;
    }
    .top-message-content {
        margin: 20px;
    }
    .top-message-content p {
        font-size: 1rem;
    }


    /**************************** SUPPORT *******************************/
    
    #shokisettei,
    #moushikomi {
        padding-top: 100px;
    }
    
    .shokisettei-contents {
        width: 100%;
    }
    .shokisettei .box-content-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .shokisettei li {
        width: calc(50% - 10px);
    }
    .shokisettei li img,
    .shokisettei li p {
        width: 100%;
    }
    /* .shokisettei-contents p,
    .option-contents p {
        font-size: .8rem;
    } */

    .shokisettei-price img,
    .option-price img {
        width: 180px;
    }

    .shokisettei-top {
        display: none;
    }
    .shokisettei-top_sp,
    .option-contents_sp {
        display: block;
    }
    .shokisettei-top_sp {
        width: 100%;
    }


    /**************************** PC買取・販売 ******************************/
    .pc_card {
        width: 100%;
    }


    /**************************** WEB *******************************/
    
    .box-content .box-tel {
        margin-bottom: 20px;
    }
    .box-content .box-content-img .btn03 {
        padding: 2em 3em;
    }

    .box-content .web-flow {
        flex-direction: column;
    }
    .box-content .web-flow div {
        width: 100%;
        margin-right: 0;
    }
    .box-content .web-flow div p {
        font-size: 14px;
        text-align: center;
    }
    .box-content .web-flow i {
        transform: rotate(90deg);
    }
    .card {
        width: 300px;
        margin: 0;
        margin-bottom: 20px;
    }


    /********************** CONTACT ************************/
    /*.myform table th,
    .myform table td {
        display: block;
    }*/
    /* .myform table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    } */
    /* .myform table th {
        padding: 0;
    } */
    .myform table td input, textarea {
        width: 320px;
    }
    .btn-submit input {
        width: 80%;
    }

    /*************** SITEMAP ********************/
    .sitemap {
        flex-direction: column;
    }
    .sitemap ul {
        width: 100%;
    }

    /*************** COMPANY ********************/
    .greeting-content {
        flex-direction: column-reverse;
    }
    .greeting-content p {
        width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }
    .greeting-content img{
        width: 100%;
    }
    
}