@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');
:root {
    --color-Brown: #52390A;
    --color-LtBrown: #C9C1B3;
    --color-PaleBrown: #F9F3EE;
    --color-BaseBrown: #FFFAF5;
    --color-BrownMask: rgba( 230, 218, 209 , 0.6);
    --color-Blue: #3C8FD4;
    --color-LtBlue: #9ED5FF;
    --color-DkBlue: #0961AB;
    --color-PaleBlue: #D8E9F6;
    --color-Yellow: #FFDB79;
    --color-LtRed: #EE7171;
    --color-Green: #8FD56D;
    --color-LtGreen: #6AB844;
    --color-black: black;
    --color-gray: gray;
    --color-Ltgray: #eeeeee;
    --color-white: white;
    --animation-duration: 11s;
}
* {
    min-height: 0vw;
}
html {
    font-size: 100%;
    min-height: 100%;
    scroll-padding-top:calc( 100vw * ( 100 / 1440));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
}
/*1440px以上*/
@media screen and (min-width: 1440px) {
    html {
        scroll-padding-top:100px;
    }
}
body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    color: var(--color-Brown);
    -webkit-text-size-adjust: 100%;
}
body, html {
    background-color: var(--color-BaseBrown);
}
a {
    overflow: hidden;
    outline: none;
    color: #3C8FD4;
}
a:link {
    color: #3C8FD4;
}
a:visited {
    color: #3C8FD4;
}
table {
    border-collapse: collapse;
}
img {
    border: none;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
p {
    margin-bottom: 1em;
}
p:last-of-type {
    margin-bottom: 0;
}
br.Port, br.Land, br.SP {
    display: none;
}
br.PC {
    display: block;
}
#Wrapper {
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    height: auto;
    min-height: 100vh;
    z-index: 0;
}
#PageBG {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw * (1920 / 1440));
    max-width: 1920px;
    height: 100vh;
    overflow: hidden;
    background: url("../images/global/pagebg_2025.png") no-repeat center top;
    background-color: var(--color-BaseBrown);
    background-size: 100% auto;
    background-blend-mode: multiply;
}
.BGTexture{
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    left:50%;
    top:0;
    transform: translateX(-50%);
    background:url("../images/global/bg_texture.png") repeat center top;
    background-size: 100vw auto;
    background-color: var(--color-BaseBrown);
    mix-blend-mode: multiply;
    opacity:0.1;
}
/*1440px以上*/
@media screen and (min-width: 1440px) {
    .BGTexture {
        background-size: 1440px auto;
    }
}
/*ヘッダー*/
#Header {
    display: flex;
    width: calc(100% * (1400 / 1440));
    max-width: 1400px;
    height: auto;
    aspect-ratio: 1400/100;
    background-color: var(--color-white);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000;
    border-bottom-left-radius: clamp(10px, 0.7vw, 5px);
    border-bottom-right-radius: clamp(10px, 0.7vw, 5px);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    line-height: 120%;
    font-weight: 700;
}
#Header a {
    color: var(--color-Brown);
    text-decoration: none;
}
#Header #HeaderBlock {
    width: calc(100% * (1272 / 1440));
    height: 64%;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}
#HeaderMenuBtn {
    display: none;
}
#HeaderLogo {
    width: calc(100% * (102 / 1272));
    max-width: 102px;
    height: auto;
    aspect-ratio: 102/64;
    background: url("../images/global/h_logo.png") no-repeat center center;
    background-size: contain;
    text-indent: -999em;
    z-index: 1000001;
    flex-shrink: 0;
}
#HeaderLogo a {
    display: block;
    width: 100%;
    height: 100%;
}
#UserArea {
    display: flex;
    justify-content: flex-end;
    align-items:center;
    list-style: none;
    gap: 1em;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
ul#UserData, ul#LoginBtn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    gap: 1em;
    height: 100%;
}
ul#UserData li a, ul#LoginBtn li a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 175%;
    position: relative;
}
ul#UserData li.Point a {
    padding-left: 2em;
}
ul#UserData li.Point a::before {
    content: '';
    display: block;
    width: 1.75em;
    height: 1.75em;
    background: url("../images/global/icn_point_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul#UserData li.Setting a {
    padding-left: 2em;
}
ul#UserData li.Setting a::before {
    content: '';
    display: block;
    width: 1.75em;
    height: 1.75em;
    background: url("../images/global/icn_setting_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul#LoginBtn li.Registration a {
    background-color: var(--color-Blue);
    color: var(--color-white);
    height: 1.625em;
    padding-left: calc(0.5em + 1.5em);
    padding-right: 0.5em;
    border-radius: 1.5em;
}
ul#LoginBtn li.Registration a::before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/global/icn_registration_2025.png") no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
ul#LoginBtn li.Login a {
    color: var(--color-Blue);
    height: 1.625em;
    padding-left: calc(0.5em + 1.5em);
    padding-right: 0.5em;
    border-radius: 1.5em;
    border: solid 2px var(--color-Blue);
}
ul#LoginBtn li.Login a::before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/global/icn_login_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
ul#LoginBtn li.Logout a {
    color: var(--color-Blue);
    height: 1.625em;
    padding-left: calc(0.5em + 1.5em);
    padding-right: 0.5em;
    border-radius: 1.5em;
    border: solid 2px var(--color-Blue);
}
ul#LoginBtn li.Logout a::before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/global/icn_logout_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
#HeaderMenu {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    position: relative;
}
#HeaderMenu .Wrap {
    display: contents;
}
ul#GlobalNav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    list-style: none;
    width: 100%;
    height: 100%;
}
ul#GlobalNav > li {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    position: relative;
    line-height: 100%;
    cursor: pointer;
}
ul#GlobalNav ul {
    display: none;
}
ul#GlobalNav li.Select ul {
    position: absolute;
    top: 1.5em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    list-style: none;
    background-color: var(--color-PaleBrown);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 0.5em 1em;
    border-radius: clamp(10px, 0.7vw, 5px);
    line-height: 150%;
}
ul#GlobalNav li.Select ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: dotted 1px var(--color-Brown);
    padding: 0.5em;
    position: relative;
}
ul#GlobalNav li.Select ul li:last-child {
    border: none;
}
ul#GlobalNav li.SP {
    display: none;
}
/*フッター*/
#Footer {
    display: block;
    margin-top: auto;
    background-color: var(--color-white);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    z-index: 10000;
}
#Footer #FooterBlock {
    width: calc(100% * (1272 / 1440));
    height: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 1em;
    padding: 1em;
}
#Footer #FooterBlock #FooterLogo {
    display: block;
    width: calc(100% * (200 / 1440));
    height: auto;
    aspect-ratio: 200/40;
}
#Footer #FooterBlock #FooterLogo a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/global/f_logo_2025.png") no-repeat center center;
    background-size: contain;
    text-indent: -999em;
}
ul#FooterNav {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
}
ul#FooterNav li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    color: var(--color-Brown);
    font-weight: 700;
    text-decoration: none;
}
ul#FooterNav li a span {
    display: inline-flex;
    white-space: nowrap;
}
#Footer p {
    font-size: 75%;
    line-height: 150%;
    text-align: center;
}
#Footer #Copyright {
    font-size: 75%;
    line-height: 150%;
    font-weight: 300;
    text-align: center;
}
#GotoTop {
    position: fixed;
    right: 0.5em;
    bottom: 1em;
    z-index: 100;
}
#GotoTop a {
    display: block;
    width: calc(100vw * (60 / 1440));
    max-width: 60px;
    height: auto;
    aspect-ratio: 1/1;
    background: url("../images/global/icn_arrow_u_wh_2025.png") no-repeat center center;
    background-size: cover;
    background-color: var(--color-Blue);
    border-radius: 50%;
    text-indent: -999em;
}
/*ボタンパーツ*/
.BtmBtnArea {
    display: flex;
    justify-content: center;
    align-items: center;
}
.BlueBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /*min-height: 60px;*/
    position: relative;
    font-size: 16px;
    line-height: 125%;
    font-weight: 700;
    text-align: center;
    background-color: var(--color-Blue);
    padding: 0.5em;
    border-radius: 2em;
    color: var(--color-white) !important;
    text-decoration: none;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.RedBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /*min-height: 60px;*/
    position: relative;
    font-size: 16px;
    line-height: 125%;
    font-weight: 700;
    text-align: center;
    background-color: var(--color-LtRed);
    padding: 0.5em;
    border-radius: 2em;
    color: var(--color-white) !important;
    text-decoration: none;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.LtBrown {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /*min-height: 60px;*/
    position: relative;
    font-size: 16px;
    line-height: 125%;
    font-weight: 700;
    text-align: center;
    background-color: var(--color-LtBrown);
    padding:  0.5em;
    border-radius: 2em;
    color: var(--color-white);
    text-decoration: none;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.BlueBtn.Disabled,
.BlueBtn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}
.RightArrow::after {
    content: '';
    display: block;
    border-radius: 50%;
    background: url("../images/global/icn_arrow_r_whmask_2025.png") no-repeat center center;
    background-size: 120%;
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
}
.LeftArrow::after {
    content: '';
    display: block;
    border-radius: 50%;
    background: url("../images/global/icn_arrow_l_whmask_2025.png") no-repeat center center;
    background-size: 120%;
    position: absolute;
    top: 50%;
    left: 0.5em;
    transform: translateY(-50%);
}
.RightPlus::after {
    content: '';
    display: block;
    border-radius: 50%;
    background: url("../images/global/icn_plus_whmask_2025.png") no-repeat center center;
    background-size: 120%;
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
}
.CloseCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../images/global/icn_close_2025.png") no-repeat center center var(--color-Blue);
    background-size: contain;
    text-indent: -999em;
    border-radius: 50%;
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: absolute;
    right:30px;
    top:30px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
/*1440px以下*/
@media screen and (max-width: 1439px) {
    #Header, #Footer {
        font-size: 1.1vw;
        line-height: 120%;
    }
}
/*Slickパーツ*/
.Pager {
    list-style: none;
}
.Pager li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}
.Pager li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}
.Pager li:last-child {
    margin-right: 0;
}
.Pager li .SlickDots{
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}
.Pager li .SlickDots {
    transform:rotate(-90deg);
    outline:none;
}
.Pager li .SlickDots .circle {
    stroke: var(--color-Blue);
    stroke-width: 4px;
    fill: transparent;
    stroke-dasharray: 157px;
    stroke-dashoffset: 157px;
}
.Pager li.slick-active .SlickDots .circle{
    animation-name: circleAnim;
    animation-fill-mode: forwards;
    animation-timing-function:linear;
    animation-duration: var(--animation-duration);
}
@keyframes circleAnim {
  to {
    stroke-dashoffset: 0;
  }
}
.Pager li .SlickDots .center{
    fill: var(--color-PaleBlue);
}
.Pager li.slick-active .SlickDots .center{
    fill: var(--color-Blue);
}
/*マウスオーバー*/
@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--color-DkBlue);
    }
    ul#UserData li a:hover {
        color: var(--color-DkBlue);
    }
    ul#UserData li.Point a:hover::before {
        background-position: center bottom;
    }
    ul#UserData li.Setting a:hover::before {
        background-position: center bottom;
    }
    ul#LoginBtn li.Registration a:hover {
        background-color: var(--color-DkBlue);
        color: var(--color-white);
    }
    ul#LoginBtn li.Login a:hover {
        color: var(--color-DkBlue);
        border-color: var(--color-DkBlue);
    }
    ul#LoginBtn li.Login a:hover::before {
        background-position: center bottom;
    }
    ul#LoginBtn li.Logout a:hover {
        color: var(--color-DkBlue);
        border-color: var(--color-DkBlue);
    }
    ul#LoginBtn li.Logout a:hover::before {
        background-position: center bottom;
    }
    ul#GlobalNav li:hover, ul#GlobalNav li a:hover {
        color: var(--color-DkBlue);
    }
    ul#FooterNav a:hover {
        color: var(--color-DkBlue);
    }
    #GotoTop a:hover {
        background-color: var(--color-DkBlue);
    }
    .BlueBtn:hover {
        color: var(--color-white);
        background-color: var(--color-DkBlue);
    }
    .RedBtn:hover {
        color: var(--color-white);
    }
    .LtBrown:hover {
        color: var(--color-white);
        background-color: var(--color-Brown);
    }
    .CloseCircle:hover {
        background-color: var(--color-DkBlue);
    }
}
/*ページコンテンツ*/
#PageContents {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-top: calc(100vw * (100 / 1440));
}
/*1440px以上*/
@media screen and (min-width: 1440px) {
    #PageContents {
        padding-top: 100px;
    }
}
#PageContents h1 {
    font-size: 42px;
    line-height: 125%;
    font-weight: 700;
}
#PageContents h2 {
    font-size: 32px;
    line-height: 150%;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    border-bottom: solid 2px var(--color-Brown);
}
#PageContents h3 {
    font-size: 24px;
    line-height: 150%;
    font-weight: 700;
}
.ContentsBlock {
    display: block;
    width: calc(100% * (1200 / 1440));
    max-width: 1200px;
    margin: 0 auto;
}
.SmallText {
    font-size: 70%;
    line-height: 150%;
}
.LargeText {
    font-size: 120%;
    line-height: 150%;
}
.NormalText {
    font-weight: 400;
}
.RedText {
    color: var(--color-LtRed);
}
.BoldText {
    font-weight: 700;
}
.AlignCenter {
    text-align: center;
}
.AlignRight {
    text-align: right;
}
.fixed {
    position: fixed;
}
.fixed #Wrapper {
    width: 100vw;
}
/*404*/
.ContentsBlock_404 {
    width: calc(100% * (1200 / 1440));
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    margin-bottom: 3em;
}
.ContentsBlock_404 figure {
    width: calc(100% * (330 / 1200));
    height: auto;
    aspect-ratio: 654/330;
    position: relative;
}
.ContentsBlock_404 figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ContentsBlock_404 p.LargeText {
    font-size: 133.3%;
    line-height: 125%;
}
.ContentsBlock_404 p.SmallText {
    font-size: 77.7%;
    line-height: 125%;
}
.ContentsBlock_404 .BtmBtnArea {
    margin: 1em auto;
    align-items: stretch;
    gap: 1em;
}
.ContentsBlock_404 .BtmBtnArea .BlueBtn {
    width: 250px;
    height: 60px;
}
.ContentsBlock_404 .BtmBtnArea .RightArrow::after{
    width: 32px;
    height: 32px;
}
/*白バック*/
.WhBGLeft {
    display: block;
    padding-top: calc(100vw * (60 / 1440));
    padding-bottom: calc(100vw * (60 / 1440));
    margin: 0 auto;
    position: relative;
}
.WhBGLeft::before {
    content: '';
    width: calc( 50vw + ( 100vw * ( 660 / 1440)));
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--color-white);
    border-top-right-radius: clamp(16px, 1.11vw, 8px);
    border-bottom-right-radius: clamp(16px, 1.11vw, 8px);
    z-index: -1;
}
.WhBGLeft::after {
    content: '';
    width: calc( 50vw + ( 100vw * ( 660 / 1440)));
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background:url("../images/global/bg_texture.png") repeat center top var(--color-white);
    background-size: 100vw auto;
    background-blend-mode: luminosity;
    opacity: 0.1;
    border-top-right-radius: clamp(16px, 1.11vw, 8px);
    border-bottom-right-radius: clamp(16px, 1.11vw, 8px);
    z-index: -1;
}
/*1440px以上*/
@media screen and (min-width: 1440px) {
    .WhBGLeft::before,.WhBGLeft::after  {
        width: calc(50vw + 660px);
        max-width: calc(960px + 660px);
        background-size: 1440px auto;
    }
}
.WhBGRight {
    display: block;
    padding-top: calc(100vw * (60 / 1440));
    padding-bottom: calc(100vw * (60 / 1440));
    position: relative;
}
.WhBGRight::before {
    content: '';
    width: calc( 50vw + ( 100vw * ( 660 / 1440)));
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: var(--color-white);
    border-top-left-radius: clamp(16px, 1.11vw, 8px);
    border-bottom-left-radius: clamp(16px, 1.11vw, 8px);
    z-index: -1;
}
.WhBGRight::after {
    content: '';
    width: calc( 50vw + ( 100vw * ( 660 / 1440)));
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-top-left-radius: clamp(16px, 1.11vw, 8px);
    border-bottom-left-radius: clamp(16px, 1.11vw, 8px);
    z-index: -1;
    background:url("../images/global/bg_texture.png") repeat center top var(--color-white);
    background-size: 100vw auto;
    mix-blend-mode: luminosity;
    opacity:0.1;
}
/*1440px以上*/
@media screen and (min-width: 1440px) {
    .WhBGRight::before, .WhBGRight::after  {
        width: calc(50vw + 660px);
        max-width: calc(960px + 660px);
        background-size: 1440px auto;
    }
}
/*1440px以上*/
@media screen and (min-width: 1440px) {
    .WhBGLeft, .WhBGRight {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
/*ラインワーク*/
.LineWork {
    position: absolute;
    width: calc(100vw * (1920 / 1440));
    max-width: 1920px;
    height: auto;
    z-index: -1;
    pointer-events: none;
}
#PageContents .LineWork.Top {
    top:0;
    left: 50%;
    transform: translateX(-50%);
}
#PageContents .LineWork.Bottom {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 20%);
}
.LineWork picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/*ラインアニメーション*/
@keyframes clip-path-Blue {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    }
    50% {
        clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
@keyframes clip-path-Orange {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    }
    50% {
        clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
@keyframes RtoL {
    0% {
        clip-path: inset(0 0 0 100%);
    }
    100% {
        clip-path: inset(0);
    }
}
@keyframes LtoR {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0);
    }
}

/*1440px以上*/
@media screen and (min-width: 1440px) {
    #PageBG {
        background-size: calc( 100vw * (1920 / 1440)) auto;
    }
}
@media screen and (min-width: 1920px) {
    #PageBG {
        background-size: calc( 100% * (1920 / 1440)) auto;
    }
}

#Copyright-Logo {
    vertical-align: middle;
    height: 2em;
    width: auto;
    margin: 0 0.5em;
}