@charset "UTF-8";

:root {
  --main-color-pink: #DB5683;
}

#main .contents .contents_title .contents_title_en{color:var(--main-color-pink);}
#main .contents .contents_title .contents_title_jp:before {border-bottom-color:var(--main-color-pink);}
#main .sub_title{color:var(--main-color-pink);}
#main p.en{color:var(--main-color-pink);}

#main .bcos{margin:0 0 80px;}
#main .bcos .tex{font-size:20px;line-height:1.6;text-align:left;}
#main .flow{display:flex;flex-wrap:wrap;}
#main .flow li{width:20%;position: relative;}
#main .flow li:before{content:"";vertical-align:middle;display:inline-block;background:url("../images/service/business_card_order_system/yajirushi.svg") no-repeat 0 0;background-size:contain;width:70px;height:70px;position: absolute;top:15px;right:-35px;}
#main .flow li:last-child:before{display:none;}
#main .flow li img{width: 100px;margin:0 auto 30px;}
#main .flow li .tex{font-size:23px;line-height:1.4;text-align:center;}

#main .brand{display:flex;flex-wrap:wrap;align-items:flex-start;padding:60px 0 0;}
#main .brand li{display:flex;flex-wrap:wrap;margin:0 140px 60px 0}
#main .brand li:nth-child(2n){margin-right:0;}
#main .brand li:last-child,
#main .brand li:nth-last-child(2):nth-child(odd){margin-bottom:0}
#main .brand li .pic{width:240px;}
#main .brand li .pic img{width:180px;height:auto;}
#main .brand li{display:flex;align-items:center;}
#main .brand li .tex_block{width:290px;text-align:left;}
#main .brand li .tex_block .title{font-size:18px;line-height:1.4;font-weight:700;}
#main .brand li .tex_block .tex{font-size:16px;line-height:1.4;}

#main .introduction{margin:0 0 60px;}
#main .introduction .num{font-size:30px;color:var(--gray-color);letter-spacing:0.1em;}
#main .introduction .num span{font-size:60px;color:var(--main-color-pink);}
#main .mail .tex{font-size:26px;}
#main .mail .tex a{font-weight:700;color:#000;text-decoration:none;}
@media screen and (min-width: 768px) {
  #main .mail .tex a:hover{text-decoration:underline;}
}

@media (max-width: 1280px) {
  #main .bcos {margin:0 0 6.25vw;}
  #main .bcos .tex{font-size:1.562vw;}
  #main .flow li:before{width:5.46vw;height:5.46vw;top:1.17vw;right:-2.73vw}
  #main .flow li img{width:7.81vw;height:7.81vw;margin:0 auto 2.34vw;}
  #main .flow li .tex{font-size:1.79vw;}

  #main .brand{padding:4.687vw 0 0;}
  #main .brand li{margin:0 10.93vw 4.687vw 0}
  #main .brand li .pic{width:18.75vw;}
  #main .brand li .pic img{width:14.06vw;}
  #main .brand li .tex_block{width:22.65vw;}
  #main .brand li .tex_block .title{font-size:1.40vw;}
  #main .brand li .tex_block .tex{font-size:1.25vw;}

  #main .introduction{margin:0 0 4.687vw;}
  #main .introduction .num{font-size:2.34vw;}
  #main .introduction .num span{font-size:4.68vw;}
  #main .mail .tex{font-size:2.03vw;}
}

@media screen and (max-width: 767px) {
  #main .bcos {margin:0 0 40px;}
  #main .bcos .tex{font-size:12px;}
  #main .flow_back{overflow-x:scroll;overflow-y:hidden;}
  #main .flow{display:flex;width:750px;}
  #main .flow li{width:20%;}
  #main .flow li:before{width:65px;height:46px;position:absolute;top:4px;right:-45px;}
  #main .flow  li img{width:55px;height:auto;margin:0 auto 15px;}
  #main .flow  li .tex{font-size:16px;}

  #main .brand{padding:10px 0 0;}
  #main .brand li{margin:0 0 20px;}
  #main .brand li:nth-child(2n){margin-right:0;}
  #main .brand li:last-child,
  #main .brand li:nth-last-child(2):nth-child(odd){margin-bottom:0}
  #main .brand li .pic{width:100%;}
  #main .brand li .pic img{width:150px;}
  #main .brand li .tex_block{width:100%;}
  #main .brand li .tex_block .title{font-size:14px;line-height:1.8;}
  #main .brand li .tex_block .tex{font-size:12px;line-height:1.8;}

  #main .introduction {margin:0 0 25px;}
  #main .introduction .num{font-size:14px;}
  #main .introduction .num span{font-size:35px;}
  #main .mail .tex{font-size:12px;margin:0 -40px;}
  #main .mail .tex a{font-size:14px;}
}