@charset "utf-8";

.contents { margin-bottom:80px; padding-top:0; padding-bottom:0; }
.sns_wrap { width:100%; display:flex; flex-wrap:wrap; gap:40px; align-items: flex-start;}
.sns_wrap li { width:100%; display:flex; flex-wrap:wrap; gap:20px; }
.sns_wrap li h2 { width:100%; font-weight:700; border-bottom:1px solid #333333; padding-bottom:10px; }
.sns_wrap li .button_sns { width:100%; height:55px; border-radius:10px; display:flex; align-items:center; }
.sns_wrap li .button_sns dl { width:90%;  height:100%; margin:0 auto; display:flex; }
.sns_wrap li .button_sns dl dt { width:14%; display:flex; align-items:center;}
.sns_wrap li .button_sns dl dt img { height:25px; }
.sns_wrap li .button_sns dl dd { width:86%; font-size:18px; font-weight:700; display:flex; align-items:center; letter-spacing:0.1em; }

.x { border:2px solid #4B4B4B; color:#fff; background:#4B4B4B; position:relative; }
.x::after{ content: ""; position:absolute; top:50%; transform: translateY(-50%); right:5%; width:14px; height:14px; background:url("/img/sns/arrow_white.svg") no-repeat center; background-size:contain;} 
.x:hover { background:rgba(75, 75, 75, 0.5); }
.facebook { border:2px solid #0866FF; color:#0866FF; position:relative; }
.facebook::after{ content: ""; position:absolute; top:50%; transform: translateY(-50%); right:5%; width:14px; height:14px; background:url("/img/sns/arrow_blue.svg") no-repeat center; background-size:contain;} 
.facebook:hover { background:#E6F7FF; }
.instagram { border:2px solid #E73189; color:#E73189; position:relative; }
.instagram::after { content: ""; position:absolute; top:50%; transform: translateY(-50%); right:5%; width:14px; height:14px; background:url("/img/sns/arrow_pink.svg") no-repeat center; background-size:contain;}
.instagram:hover { background:#FCE6FE; }
.youtube { border:2px solid #FF0000; color:#FF0000; position:relative; }
.youtube::after  { content: ""; position:absolute; top:50%; transform: translateY(-50%); right:5%; width:14px; height:14px; background:url("/img/sns/arrow_red.svg") no-repeat center; background-size:contain;}
.youtube:hover { background:rgba(255, 0, 0, 0.1); }
.line { border:2px solid #4CC764; color:#4CC764; position:relative; }
.line::after  { content: ""; position:absolute; top:50%; transform: translateY(-50%); right:5%; width:14px; height:14px; background:url("/img/sns/arrow_green.svg") no-repeat center; background-size:contain;} 
.line:hover { background:rgba(76, 199, 100, 0.1); }
@media (min-width:768px) {
    .contents { margin-bottom:120px; }
    .sns_wrap { justify-content: space-between; }
    .sns_wrap li { width:45%; }
    .line { margin-bottom:40px; }
    .sns_wrap li .button_sns  { height:70px; }

}