/* ========================================================================
 variables
======================================================================== */
:root {
	/* colors */
    --bt-darkgreen: #284421;
	--bt-white: #fff;
	--text-black: #333;
    --bg-beige: #f3f4ec;
	/* button fade animation duration */
    --bt-anim-duration: 0.3s;
}
/* ========================================================================
 common
======================================================================== */
body{
    font-family: "Aoto Gothic Regular";
    color:var(--text-black);
    font-weight:500;
    line-height: 2;
}
a:link,a:visited{
    text-decoration: none;
}
a:hover,a:active,a:focus{
    text-decoration: none;
}

/* ========================================================================
 buttons
======================================================================== */
/* ------------------------------------
 bt-filled
------------------------------------ */
.bt-filled{
    width: fit-content;
    min-height:62px;
    padding: 12px 32px 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color:var(--bt-white);
    font-size:16px;
    line-height:1.4;
    border:solid 2px var(--bt-white);
    border-radius:31px;
    background-color: var(--bt-darkgreen);
    transition: color var(--bt-anim-duration) ease, background-color var(--bt-anim-duration) ease, border var(--bt-anim-duration) ease;
}
.bt-filled:hover{
    color:var(--bt-darkgreen);
    background-color: var(--bt-white);
    border-color:var(--bt-darkgreen);
}
.bt-filled:before{
    content:"\e901";
    margin-right:16px;
    display: inline-block;
    color:var(--bt-white);
    font-size:16px;
    line-height:1.4;
    transition: color var(--bt-anim-duration) ease;
}
.bt-filled:hover:before{
    color: var(--bt-darkgreen);
}

/* ------------------------------------
 bt-text
------------------------------------ */
.bt-text{
    padding-left:1.5em;
    display: inline-block;
    position:relative;
    box-sizing: border-box;
    color:var(--text-black);
}
.bt-text:hover{
	text-decoration: underline;
}
.bt-text:before{
    content:"\e901";
    display: inline-block;
    position:absolute;
    left: 0; top: 0.1em;
    vertical-align: middle;
    color:var(--bt-darkgreen);
    font-size:1em;
    line-height: inherit !important;
}

/* ========================================================================
 icon font
======================================================================== */
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/iconfont.eot?iu75qo');
    src:url('../fonts/iconfont.eot?iu75qo#iefix') format('embedded-opentype'),
        url('../fonts/iconfont.ttf?iu75qo') format('truetype'),
        url('../fonts/iconfont.woff?iu75qo') format('woff'),
        url('../fonts/iconfont.svg?iu75qo#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.bt-filled:before,
.bt-text:before{
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

#pdfArea .wrapper{
    max-width: 1192px;
    margin: 0 auto;
    width: 90%;
}
@media screen and (max-width:959px),print{
    #pdfArea .wrapper{
        padding: 0 40px;
        width: 100%;
    }
}
@media screen and (max-width:559px){
    #pdfArea .wrapper{
        padding: 0 16px;
    }
}
#pdfArea .pdfBg{
    background-color: #f3f4ec;
    padding: 100px 0;
}
@media screen and (max-width:959px),print{
    #pdfArea .pdfBg{
        padding: 50px 0;
    }
}
#pdfArea .buttonArea{
    visibility: hidden;
    opacity: 0;
    max-width: 275px;
    position: relative;
    left: 50%;
}
#pdfArea .buttonArea.anim{
    visibility: visible;
    animation: slidein_BtoT_02 var(--animin-duration) var(--animin-easing) 0.2s 1 normal forwards;
}
#pdfArea .bt-filled{
    border-radius: 8px;
    padding: 18px 32px 12px 52px;
    position: relative;
}
#pdfArea .bt-filled::before{
    display: none;
}
#pdfArea .bt-filled::after{
    position: absolute;
    content: "";
    background-image: url(../images/action/pdf.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 18px;
    left: 20px;
    top: 50%;
    transform: translate(0,-50%);
}
#pdfArea .bt-filled:hover::after{
    background-image: url(../images/action/pdf02.svg);
}
@keyframes slidein_BtoT_02 {
    0% {
      transform: translate(-50%, 20px);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }