/* =========================

 BACE
 
   ====================== */

* { padding: 0; margin: 0; }

::selection { background-color: #f5f5f5; color: #626262; }

::-moz-selection { background-color: #f5f5f5; color: #626262; }

html { font-size: 14px; font-family: "Sawarabi Gothic",sans-serif; }

body { color: #333; text-align: center; }

header { background: #fff url("../img/back.jpg") no-repeat top center ; text-align: left; padding: 80px 0;}

h1 { font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 3.625rem; text-align: left; color: #fff; letter-spacing: 10px; padding: 0 45px; }

#wrapper { background: #fff; max-width: 680px; margin: auto; padding: 5px; }

h2 { position: relative; display: inline-block; padding: 80px 45px; font-size: 1rem; letter-spacing: 5px; font-weight: normal; color: #737373;}

h2:before, h2:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 30px; height: 1px; background-color: black; -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg);
}

h2:before {left:0;}

h2:after {right: 0;}

.conttex p { text-align: left; padding: 10px; }

.contkey { border: #737373 solid 1px; margin: 30px 0; padding: 30px 10px; }

address { font-style: normal; padding: 0 10px; margin: 0 auto;}

dt { padding-bottom: 15px; float: left; clear: left; text-align: left; margin-right: 0.5em; width: 35%;display: flex;}

dt:after { border-top: 1px solid #737373; content: ""; flex-grow: 1; margin-left: 1rem; margin-top: 12px; }

dd { padding-bottom: 15px; float: left; margin-left: 10px; text-align: left; }

.mail::after { content: attr(data-domain); }

.mail::before { content: attr(data-user) "@"; }

footer { clear: both; padding: 20px 0; font-size: 0.75rem;}

/* =========================

   MEDIA QUERIES
 
   ====================== */

@media screen and (max-width: 874px) {
html { font-size: 93.8%; }
}

@media screen and (max-width: 479px) {
html { font-size: 87.5%; }
}