/******************************************************* CONFIG */
/******************************************************* MIXIN */
/******************************************************* TOP */
/* common
========================================================*/
section { margin: 0; padding: 0; position: relative; overflow: hidden; }

/* main
========================================================*/
#main .main-bk { width: 100%; top: 0; left: 0; z-index: 1; position: relative; }

#main .main01, #main .main02, #main .logo { z-index: 2; position: absolute; }

#main .logo { width: 22%; top: 2%; left: 2%; }

#main .main01 { width: 48%; top: 10%; left: 0; }

#main .main02 { width: 65%; bottom: 3%; right: 0; }

/* cta
========================================================*/
.cta-block { padding: 44% 0 3% 0; }

.cta-block .cta-bk { width: 100%; top: 0; left: 0; z-index: 1; position: absolute; }

.cta-block a.cta-btn { width: 95%; display: block; margin: 0 auto; z-index: 2; position: relative; overflow: hidden; }

/* merit
========================================================*/
#merit .merit-bk { width: 100%; top: 0; left: 0; z-index: 1; position: relative; }

#merit .merit-tl { display: block; margin: 0 auto; z-index: 2; position: absolute; bottom: 0; left: 0; }

/* photo slider
========================================================*/
#photo { padding: 0 0 50px 0; }

ul.slider { width: 100%; margin: 0 auto; padding: 0; }

ul.slider li { width: 100%; margin: 0 auto; padding: 0; }

ul.slider li:focus { outline: none; }

ul.slider li img { max-width: 100%; height: 500vw; max-height: 500px; min-height: 300px; margin: 0 auto; display: block; border-radius: 3px; }

@media screen and (max-width: 800px) { ul.slider li img { height: 50vw; } }

ul.slick-dots { width: 100%; clear: both; }

ul.slick-dots li { width: 3%; }

/* diode
========================================================*/
#diode .diode01 { z-index: 1; position: relative; }

#diode .diode02 { z-index: 2; position: relative; margin: -35% 0 0 0; }

#diode .diode03 { z-index: 3; position: relative; margin: -35% 0 0 0; }

/* reviews
========================================================*/
#reviews .reviews01, #reviews .reviews02, #reviews .reviews03 { display: block; z-index: 2; position: relative; }

#reviews span { content: ""; width: 0%; height: 2%; background-color: #F3DC85; position: absolute; z-index: 1; }

#reviews span.line1 { top: 31%; left: 36%; }

#reviews span.line2-1 { top: 50%; left: 70%; }

#reviews span.line2-2 { top: 55%; left: 36%; }

#reviews span.line2-3 { top: 59%; left: 36%; }

#reviews span.line3 { bottom: 8%; left: 36%; }

/* satisfaction
========================================================*/
#satisfaction .satisfaction02-bk { width: 100%; top: 0; left: 0; z-index: 1; position: relative; }

#satisfaction .satisfaction02, #satisfaction .discount { z-index: 2; position: absolute; }

#satisfaction .satisfaction02 { width: 50%; top: 0; left: 0; }

#satisfaction .discount { width: 94%; bottom: 3%; right: 0; left: 0; margin: auto; }

/* access
========================================================*/
#access { background-color: #FFCEDA; }

#access .acd-check { display: none; }

#access .acd-label { width: 96%; margin: 0 auto 20px auto; background: #420715; color: #fff; display: block; padding: 25px; font-size: 3rem; border-radius: 3px; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; }

#access .acd-label:after { content: ""; width: 0; height: 0; position: absolute; top: 0; bottom: 0; right: 5%; margin: auto; border-style: solid; border-width: 10px 10px 0 10px; border-color: #fff transparent transparent transparent; }

#access .acd-label:hover { background: #999; }

@media screen and (max-width: 500px) { #access .acd-label { font-size: 1.8rem; } }

#access .acd-content { height: 0; opacity: 0; -webkit-transition: .5s; transition: .5s; visibility: hidden; }

#access .acd-content img { border-radius: 3px; display: block; }

#access .acd-content table { width: 100%; margin: 20px auto; }

#access .acd-content table th { width: 25%; font-size: 2rem; font-weight: bold; padding: 20px 0; line-height: 180%; border-bottom: 1px solid #443931; }

#access .acd-content table td { font-size: 2rem; padding: 20px 0; line-height: 180%; border-bottom: 1px solid #443931; }

@media screen and (max-width: 500px) { #access .acd-content table th { font-size: 1.3rem; }
  #access .acd-content table td { font-size: 1.3rem; } }

#access .acd-check:checked + .acd-label + .acd-content { width: 96%; height: auto; margin: 0 auto; opacity: 1; visibility: visible; }
/*# sourceMappingURL=top.css.map */