@charset "utf-8";
/* ================================================================= 
 License : e-TRUST Inc.
 File name : style.css
 Style : style
================================================================= */
/*===========================PC====================================== */

:root {
    --ac3:#565682;
    --ac4:#D2D2DF;
    --blue99:#edf3f9;
    --mc: #565682;
    --mc20: #DDDDE6;
    --mc40: #C7C7D5;
    --cal1: #2884C3;
    --cal2: #D4E6F3;
    --cal3: #F1F7FB;
}

:root {
--fug: "YakuHanJP_Narrow","Noto Serif JP", "Hiragino Mincho ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro","Noto Serif JP", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.it01 h1, .it01 h2, .it01 h3, .ti01 h1, .ti01 h2, .ti01 h3 {
    background-color: var(--blue99);
    color: var(--tx);
}

.btn, .btn-sm, .btn3, .btn-lg, .btn2{
    background-color: var(--ac3);
}

.ul_btns a[class*=btn] {
    border-radius: 40px;
    font-family: var(--telFF);
    letter-spacing: var(--telLS);
    font-weight: bold;
}

#contents div.blog_form div.blog_list > div ul a {
    background-color: var(--ac3);
    border-radius: 3px;
    padding: 5px;
    font-size: 0.8em;
}

.h_btn:is(a).__mc {
    background-color: #51B3E4;
    color:white;
}

button:not([class*=_logo] a, [class*=slick] button):focus, a:not([class*=_logo] a, [class*=slick] button):focus {
    outline-width: 0px;
    outline-style: none;
    outline-color: none;
}

.it_bnr > div .btn {
    color: var(--ac3);
}

.bg_pt {
    background-image: url(/images/home/pt00.png);
    background-color: #f9f9f9;
}

.ul_btns li:nth-child(even) a {
    background-color: #51B3E4;
    color: white;
    background-image: linear-gradient(var(--wh20), var(--wh20));
}

.f_copy {
    background-color: var(--ac3);
}

.h-bdi :is(h1, h2, h3) span {
    --c: var(--blue99);
}

.f_logolink {
    background-color: #77779B;
}

.pan1 ul a:any-link {
    color: var(--ac3);
}

.nav_inner > ul {
    background-color: var(--ac3);
}

/*===  料金表　=== */
.tbl01 table td {
    padding: 10px 7px !important;
}

.frame01 > article {
    border: 2px solid var(--ac4);
}

.frame01 h2, .frame01 h3 {
  color: var(--tx);
  background-color: white;
}

.tbl_normal tr:first-of-type, .tbl_scroll tr:first-of-type {
    background-color: var(--blue99);
}
.tbl_normal tr:first-of-type td:first-of-type, .tbl_scroll tr:first-of-type td:first-of-type {
    background-color: var(--blue99);
}
.tbl_normal td:first-of-type, .tbl_scroll td:first-of-type {
    background-color: white;
}
.tbl_normal tr:not(:first-of-type) td:not(:first-of-type), .tbl_scroll tr:not(:first-of-type) td:not(:first-of-type) {
    color: var(--un);
}
.tbl03 tr:first-of-type, .tbl03 tr:nth-of-type(2) {
    background-color: var(--blue99);
}

.h2_deco01 article h2 {
    border-top: 3px solid var(--ac3);
    padding: 1rem 0 1rem 2rem;
    background-color: #5656820f;
}
  
  
.h3_deco01 article h3 {
    position: relative;
    padding: 1rem 2rem;
    border-bottom: 5px solid var(--ac4);
    font-size: 28px;
}
  
.h3_deco01 article h3:before {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 15%;
    height: 5px;
    content: '';
    background: var(--ac3);
}
  
.h4_deco01 h4{
      display: flex;
      justify-content: left;
      align-items: center;
      font-size: 26px;
      text-align: center;
}
  
.h4_deco01 h4::before,
.h4_deco01 h4::after {
      content: '';
      width: 70px;
      height: 3px;
      background-color: var(--ac4);
}
  
.h4_deco01 h4::before {
      margin-right: 20px;
}
.h4_deco01 h4::after {
      margin-left: 20px;
}

/*===  ご依頼の流れ　=== */
.link_03 a::after {
    border-color: transparent transparent transparent var(--mc20) !important;
}

.link_03 a:nth-child(even)::after {
    border-color: transparent transparent transparent var(--mc40) !important;
}

.link_03 a:hover {
    background: var(--mc);
}

.link_03 a:hover::after {
    border-color: transparent transparent transparent var(--mc)!important;
}

.flow01 .box:is(#contents div):after {
    width:1em;
}

.flow01 .box:is(#contents div):before {
    content: "Step " counter(cnt);
    color: var(--mc);
    background-color: transparent;
    font-weight: 700;
}

.flow01 .box:is(#contents div) article .btn {
    border-radius: 40px;
    letter-spacing: var(--telLS);
    font-weight: bold;
}

.flow01 .box:is(#contents div) article .btn.blue_btn {
    background-color: #51B3E4 !important;
}

.flow01 .box:is(#contents div) article img:is(#contents *) {
    max-width: 90px;
}

/*=== calmoについて === */

.pan1.pan2 ul a:any-link {
    color: var(--cal1) !important;
}

.h2_calmo01 article h2 {
    border-top: 3px solid var(--cal1);
    padding: 1rem 0 1rem 2rem;
    background-color: var(--cal3);
}

.h3_calmo01 article h3 {
    position: relative;
    padding: 1rem 2rem;
    border-bottom: 5px solid var(--cal2);
    font-size: 28px;
}
  
.h3_calmo01 article h3:before {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 15%;
    height: 5px;
    content: '';
    background: var(--cal1);
}
  
.h4_calmo01 h4{
      display: flex;
      justify-content: left;
      align-items: center;
      font-size: 26px;
      text-align: center;
}
  
.h4_calmo01 h4::before,
.h4_calmo01 h4::after {
      content: '';
      width: 70px;
      height: 3px;
      background-color: var(--cal3);
}
  
.h4_calmo01 h4::before {
      margin-right: 20px;
}
.h4_calmo01 h4::after {
      margin-left: 20px;
}

/*=== blog === */

section.blog div#contents article h2 span {
    border-top: 3px solid var(--ac3);
    border-bottom: 0;
    padding: 1rem 0 1rem 2rem;
    background-color: #5656820f;
    font-size: clamp(24px, 3vw, 28px);
}

body.blog section div#contents article div.date {
    font-size: 16px;
    text-align: right;
}

body.blog section div#contents article ul li a {
    font-size: 16px;
}

#contents div.blog_form02 div.blog_list > div ul a {
    background-color: var(--ac3);
    border-radius: 3px;
    padding: 5px;
    font-size: 0.8em;
}

body.blog section div#contents article ul li a{
    border-radius: 3px;
}

section.blog div#contents article, section.blog aside article {
    margin-bottom: 100px;
}

section.blog aside .pages {
    font-size: 0.8em;
    line-height: 2;
}

body.blog section aside {
    padding: 0 20px;
}

#contents div.blog_form02 div.blog_list > div{
    padding-bottom: 2.5em;
}


#contents div.blog_form div.blog_list > div ul {
    display: none;
}

#contents div.blog_form02 div.blog_list > div ul {
    display: none;
}

body.blog #contents article ul.clearfix, body.blog #contents article style + * {
    display: none;
}

body.blog section div#contents article div.flex_images > * {
    flex: unset;
    width: 80%;
}

body.blog section div#contents > dl ul li {
    display: none;
}

@media only screen and (max-width: 960px){
body.blog section div#contents article div.flex_images > * {
    flex: unset;
    width: 80%;
}
}

/*=== shop === */

div.items > article{
    min-width: 32%;
}

div.items > article a.name {
    font-size: clamp(20px, 2.4vw, 22px);
}

div.crumb {
    font-size: var(--f16);
}

div.item_view > ul li {
    float: right;
}

div.item_view > ul li a {
    display: inline;
    text-decoration: none;
    border: 0;
    font-size: var(--f16);
    color: white;
    background-color: var(--ac3);
}

div.item_option a {
    font-size: var(--f14);
}

div.item_view p.postage {
    font-size:var(--f16);
}

div.detail, div.detail2 {
    margin-top: 30px;
    font-size: var(--f16);
    order: 2;
}

div.item_option dl {
    font-size:var(--f16);
}

div.order {
    font-size: var(--f16);
}

div.item_view div.struct {
    order: 3;
}

div.detail2 .item-dt1 {
    font-size: var(--f14);
}

/*=== cart === */
section div#login.purchase {
    padding-top: 50px;
}

section div#login.purchase dl dt {
    min-width: 230px;
    max-width: 230px;
}

section div.form_wrap dl dd.is_entry label {
    width: 100px;
}

section div.form_wrap dl dd.is_entry p {
    padding-top: 20px;
}

#sumcart {
    max-width: 960px;
    margin: 0 auto;
}

#sumcart ul {
    margin-top: 30px;
}

#sumcart ul li div.item a.name {
    font-size: var(--f20);
}

#sumcart ul li div.photo {
    margin: 0 15px 15px 0;
}

#sumcart ul li div.count a{
    color: #ffffff;
    background-color: #696969;
    border-radius: 4px;
    padding: 0.5em;
    margin: 0 3px;
}

#sumcart ul li p.deliv {
    font-size: 16px;
}

#sumcart ul li input {
    margin-right: 3px;
}

section div.purchase {
    max-width: 960px;
    margin: 0 auto;
}

.payment div.payment_type {
    background-color: #f7f7f7;
    padding: 1.5em;
    line-height: 2;
    font-size: 18px;
}

.payment_type div {
    border-bottom: 1px dashed #CCC;
    padding-bottom: 10px;
}

section div.shipment {
    background-color: #eff7ff;
    padding: 1.5em;
    line-height: 2;
    font-size: 18px;
    margin-top: 60px;
}

section div.purchase h3 {
    margin: 30px 0 15px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px dashed #CCC;
}

section div.purchase.shipment dl {
    margin-bottom: 20px;
}

section div.purchase.shipment dl dt {
    margin-top: 20px;
}

section div.purchase.shipment dl {
    line-height: 1;
}

section div.purchase dl dt {
    min-width: 180px;
    max-width: 180px;
    font-size: 85%;
    font-weight: 700;
}

section div.purchase button {
    margin: 50px auto 30px auto;
}

#contents .form_wrap.confirm, .form_wrap.message, .form_wrap.error {
    background-color: #f7f7f7;
    padding: 1.5em;
}

section div.purchase h2 {
    margin-top:20px;
}

section div.purchase.confirm button {
    margin: 20px auto 10px auto;
}

section div.purchase.confirm dl {
    border-bottom: 1px solid #ebebeb;
}

section div.purchase div.cardform dl dd input {
    background-color: #FFF;
}

section div.purchase.accept {
    margin-top: calc(var(--head) * 1.2) !important;
}

/*===========================cart tab====================================== */
@media screen and (min-width: 641px) and (max-width: 834px) {
    div.purchase dl, div.purchase p, div.complete > div, div.customer div.hist {
    font-size: 16px;
    }

    section div.purchase.shipment label {
        flex-basis: content;
    }
}
/*===========================cart tab END====================================== */

/*===========================cart sp====================================== */
@media only screen and (max-width: 640px){
    #sumcart ul li div.photo {
        margin: 0 15px 15px 10px;
    }

    section div.purchase.payment .bank dl dd {
        padding: 2px;
        border-bottom: 1px solid #CCC;
    }
    
    section div.purchase.payment .bank dl dt {
        font-weight: 700;
    }

    div.purchase dl, div.purchase p, div.complete > div, div.customer div.hist {
        font-size: 16px;
    }
    
    section div.purchase.shipment dl dt {
        margin:20px 0;
    }

    section div.purchase.shipment label {
        width: 30%;
        flex-basis: content;
    }

    section form div.form_wrap dl dt {
        background-color: #ebebeb;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    dl.deliver_item ul {
        margin-top:20px;
    }

    section div#login.purchase dl {
        flex-direction: column;
    }

    
}
/*===========================cart sp END====================================== */



/*===========================tab====================================== */
@media screen and (min-width: 641px) and (max-width: 834px){




}
/*===========================tab END====================================== */
/*===========================sp====================================== */
@media only screen and (max-width: 640px){

    body.blog section aside {
        padding: 0 10px;
    }

    .f_top .ul_btns .btn {
    min-height: 3em;
    }
}
/*===========================sp END====================================== */