@charset "utf-8";
/* CSS Document */
/*共通*/
.hagaki_pic{
   border: 1px solid #CCC;
}
.hagaki_pic img {
   width: 100%;
   height: auto;
}
.flex_cotn {
   display: flex;
   gap: 0 40px;
}
/*トップアンカーリンク*/
#feature_list{
   display: flex;
   justify-content: space-between;
}

#feature_list li{
   width: 290px;
   text-align: center;
   border-bottom: 3px solid var(--color-main);
}

#feature_list li a{
   text-decoration: none;
   display: block;
   font-size: 18px;
   font-weight: bold;
   padding-right:53px;
   position: relative;
   height: 65px;
   line-height: 65px;
   transition: .3s all;
}

#feature_list li a::after{
   content: "";
   display: block;
   width: 12px;
   height: 12px;
   border-bottom: 5px solid var(--color-main);
   border-right: 5px solid var(--color-main);
   transform:rotate(45deg) translateY(-50%);
   position: absolute;
   top: 40%;
   right: 35px;
   transition: .3s all;
}
#feature_list li a:hover{
   background:var(--color-hover-bg);
   color: #333;
}
#feature_list li a:hover::after{
   top: 50%;
}
/*宛名レイアウト-------------*/
.card_image{
   width: 680px;
   margin: 0 auto 40px;
}
.bt_layout a {
   display: inline-block;
   border: 1px solid var(--color-main);
   padding: 10px 20px 7px;
   text-decoration: none;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   font-weight: bold;
   color: #333;
}
.bt_layout a.link_outlink::after {
   display: inline-block;
}
.bt_layout a:hover{
   background:var(--color-hover-bg);
   color: #333;
}
/*差出人情報*/
.p_layout{
   justify-content: center;
   gap: 0 30px;
}

/*宛名印刷の書体-------------*/
.address_sample dt{
   font-weight: bold;
   padding: 3px 0;
}
.address_sample .hagaki_pic{
   width: 280px;
}
/*宛名印刷の品質-------------*/
.quality_sample dt{
   margin-bottom: 20px;
   font-weight: bold;
   font-size: 18px;
   text-align: center;
}
.quality_sample dd{
   width: 400px;
}
.quality_sample dd img{
   width: 100%;
}