@font-face {
 font-family: 'KTEGAKI';
 src: url("../fonts/KTEGAKI.eot");
 src: url("../fonts/KTEGAKI.eot?#iefix") format("embedded-opentype"), url("../fonts/KTEGAKI.woff") format("woff"), url("../fonts/KTEGAKI.ttf") format("truetype");
 font-weight: normal;
 font-style: normal
}
main {
 display: block;
 font-family: "fot-tsukuardgothic-std", sans-serif;
 font-style: normal;
 font-feature-settings: "palt"
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main {
  width: 100vw;
  margin: 0 auto 70px;
  padding-top: 58px
 }
}
main article, main div, main section {
 position: relative
}
main * {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box
}
main figure img {
 width: 100%;
 height: auto
}
main section h3 {
 font-size: 46px;
 font-size: 2.875rem;
 margin-bottom: 5%;
 text-align: center
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section h3 {
  font-size: 30px;
  font-size: 1.875rem;
  margin-bottom: 10%
 }
}
main section h3 span {
 position: relative
}
main section h3 span:before {
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 3px;
 background: #000;
 bottom: -10px;
 left: 0
}
main section article {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
 padding: 7% 0
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section article {
  max-width: 100vw
 }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section article {
  padding: 15% 5%
 }
}
main section#visual {
 height: calc(100vh - 90px);
 overflow: hidden
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual {
  height: calc(70vh - 90px)
 }
}
main section#visual:before, main section#visual:after {
 content: "";
 display: block;
 position: absolute
}
main section#visual:before {
 width: 120px;
 height: 120px;
 bottom: 37%;
 left: 68%;
 background: rgba(245, 174, 159, 0.2);
 z-index: 5
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual:before {
  width: calc(100vw - 88vw);
  height: calc(100vw - 88vw);
  bottom: 40%
 }
}
main section#visual:after {
 width: 100%;
 height: 30vh;
 bottom: 0;
 left: 0;
 background: #e7faf7;
 z-index: 0
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual:after {
  height: 20vh
 }
}
main section#visual h1 {
 width: 30%;
 max-width: 420px;
 height: auto;
 position: absolute;
 top: 20%;
 right: 10%;
 z-index: 5
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual h1 {
  width: 40%
 }
}
main section#visual h1:before, main section#visual h1:after {
 content: "";
 display: block;
 position: absolute
}
main section#visual h1:before {
 width: 90px;
 height: 90px;
 background: rgba(37, 143, 89, 0.1);
 top: -36%;
 right: -39%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual h1:before {
  width: calc(100vw - 92vw);
  height: calc(100vw - 92vw);
  right: -30%
 }
}
main section#visual h1:after {
 width: 120%;
 height: 150%;
 background: rgba(255, 255, 255, 0.7);
 top: -25%;
 left: -10%;
 z-index: 0
}
main section#visual h1 b {
 width: 50%;
 height: 100%;
 background: url("../images/limited.webp") no-repeat;
 background-size: contain;
 position: absolute;
 z-index: 3;
 transform: rotate(10deg);
 bottom: -80%;
 right: -36%
}
main section#visual h1 b:before, main section#visual h1 b:after {
 content: "";
 display: block;
 position: absolute;
 transform: rotate(-10deg)
}
main section#visual h1 b:after {
 width: 70px;
 height: 70px;
 background: rgba(96, 156, 213, 0.2);
 bottom: 115%;
 right: 287%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual h1 b:after {
  width: calc(100vw - 92vw);
  height: calc(100vw - 92vw)
 }
}
main section#visual h1 img {
 position: relative;
 z-index: 1
}
main section#visual h1 span:before, main section#visual h1 span:after {
 content: "";
 display: block;
 position: absolute;
 transition: all 1s cubic-bezier(0.5, 1, 0.89, 1)
}
main section#visual h1 span:before {
 width: 60px;
 height: 60px;
 background: rgba(152, 101, 166, 0.1);
 bottom: 119%;
 right: 12%;
 z-index: 1
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual h1 span:before {
  width: calc(100vw - 94vw);
  height: calc(100vw - 94vw);
  bottom: 140%;
  right: 5%
 }
}
main section#visual h1 span:after {
 width: 80px;
 height: 80px;
 background: rgba(248, 243, 205, 0.6);
 bottom: 140%;
 right: 20%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual h1 span:after {
  width: calc(100vw - 92vw);
  height: calc(100vw - 92vw);
  bottom: 160%;
  right: 13%
 }
}
main section#visual p {
 width: 120px;
 position: absolute;
 bottom: 2%;
 left: 2%;
 z-index: 5
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual p {
  width: 70px;
  bottom: 2%;
  left: 2%
 }
}
main section#visual div.slick {
 width: 70%;
 height: 100%;
 background: #fff;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 4
}
main section#visual div.slick__bg {
 width: 100%;
 height: calc(100vh - 90px);
 background-size: cover;
 background-position: bottom center
}
main section#visual .bgnoslide {
 width: 70%;
 height: 100%;
 background: #fff;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 4
}
main section#visual .bgnoslide .bg {
 width: 100%;
 height: calc(100vh - 90px);
 background-size: cover;
 background-position: bottom center;
 background-image: url("../images/01.webp")
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual div.slick__bg {
  height: calc(70vh - 90px)
 }
 main section#visual .bgnoslide .bg {
  height: calc(70vh - 90px)
 }
}
main section#visual div.slick__bg01 {
 background-image: url("../images/01.webp")
}
main section#visual div.slick__bg02 {
 background-image: url("../images/02.webp")
}
main section#visual div.slick__bg03 {
 background-image: url("../images/03.webp")
}
main section#visual div.slick__bg04 {
 background-image: url("../images/04.webp")
}
main section#visual div.slick__bg05 {
 background-image: url("../images/05.webp")
}
main section#visual div.slick .slick-dots {
 bottom: 25px
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual div.slick .slick-dots {
  padding-right: 2%;
  bottom: 2%;
  text-align: right
 }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual div.slick .slick-dots li {
  margin: 0 .5%
 }
}
main section#visual div.slick .slick-dots li button:before {
 font-size: 48px;
 font-size: 3rem
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#visual div.slick .slick-dots li button:before {
  font-size: 40px;
  font-size: 2.5rem
 }
}
main section#intro {
 background: #e7faf7
}
main section#intro article p {
 font-size: 28px;
 font-size: 1.75rem;
 width: 100%;
 letter-spacing: .15em;
 text-align: center;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article p {
  font-size: 20px;
  font-size: 1.25rem
 }
}
main section#intro article div.about {
 margin-bottom: 7%
}
main section#intro article div.about h2 {
 font-size: 48px;
 font-size: 3rem;
 text-align: center
}
main section#intro article div.about h2 a {
 color: #333;
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.about h2 {
  font-size: 30px;
  font-size: 1.875rem
 }
 main section#intro article div.about h2 br {
  display: none;
 }
}
main section#intro article div.about h2 b {
 background: linear-gradient(transparent 60%, #ffe29d 60%)
}
main section#intro article div.about h2 small {
 font-size: 32px;
 font-size: 2rem;
 font-weight: normal
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.about h2 small {
  font-size: 24px;
  font-size: 1.5rem
 }
}
main section#intro article div.about figure {
 display: flex;
 justify-content: center;
 width: 80%;
 max-width: 1000px;
 margin: 5% auto
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.about figure {
  display: block;
  display: flex
 }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.about figure {
  width: 90%
 }
 main section#intro article div.about p br {
  display: none;
 }
}
main section#intro article div.about figure img {
 width: 14%;
 margin: 0 1%
}
main section#intro article div.eraser {
 display: flex;
 align-items: center;
 margin-bottom: 7%;
 background: #fff;
 overflow: hidden
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.eraser {
  display: block
 }
}
main section#intro article div.eraser figure {
 width: 45%;
 height: 450px
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.eraser figure {
  width: 100%;
  height: auto
 }
}
main section#intro article div.eraser figure img {
 height: 600px;
 object-fit: cover
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.eraser figure img {
  height: 150px
 }
}
main section#intro article div.eraser figure:nth-of-type(2) img {
 object-position: center -40px
}
main section#intro article div.eraser div {
 width: 60%;
 padding: 0 6%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.eraser div {
  width: 100%;
  padding: 5%
 }
}
main section#intro article div.eraser div h4 {
 font-size: 40px;
 font-size: 2.5rem;
 margin-bottom: 3rem;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.eraser div h4 {
  font-size: 30px;
  font-size: 1.875rem
 }
}
main section#intro article div.eraser div h4:after {
 content: "";
 display: block;
 position: absolute;
 width: 50px;
 height: 2px;
 background: #000;
 bottom: -1.5rem;
 left: 0
}
main section#intro article div.eraser div h4 small {
 font-size: 30px;
 font-size: 1.875rem
}
main section#intro article div.eraser div p {
 text-align: left
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.eraser div p br {
  display: none
 }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.eraser {
  margin: 5% 0
 }
}
main section#intro article div.mizutama {
 display: flex;
 justify-content: space-around;
 align-items: center;
 background: #fff
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.mizutama {
  display: block
 }
}
main section#intro article div.mizutama figure {
 width: 570px;
 order: 2
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.mizutama figure {
  width: 100%;
  margin: 0 auto;
  display: block
 }
}
main section#intro article div.mizutama div {
 width: 60%;
 padding: 0 6%;
 order: 1
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.mizutama div {
  width: 100%;
  padding: 5%
 }
}
main section#intro article div.mizutama div h4 {
 font-size: 40px;
 font-size: 2.5rem;
 margin-bottom: 3rem;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#intro article div.mizutama div h4 {
  font-size: 30px;
  font-size: 1.875rem
 }
}
main section#intro article div.mizutama div h4:after {
 content: "";
 display: block;
 position: absolute;
 width: 50px;
 height: 2px;
 background: #000;
 bottom: -1.5rem;
 left: 0
}
main section#intro article div.mizutama div h4 small {
 font-size: 30px;
 font-size: 1.875rem
}
main section#intro article div.mizutama div p {
 text-align: left
}
main section#lineup {
 background: #f7f7f7
}
main section#lineup article h2 {
 font-size: 80px;
 font-size: 5rem;
 font-family: poppins, sans-serif;
 font-weight: 500;
 font-style: normal;
 margin-bottom: 8%;
 line-height: 1.2;
 position: relative;
 margin-bottom: 5%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article h2 {
  font-size: 60px;
  font-size: 3.75rem;
  text-align: center
 }
}
main section#lineup article h2 + p {
 font-size: 26px;
 font-size: 1.625rem;
 margin-bottom: 5%
}
main section#lineup article div.tape {
 display: flex;
 justify-content: space-between
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article div.tape {
  display: block
 }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article div.tape {
  margin-bottom: 8%
 }
}
main section#lineup article div.tape dl {
 width: 48%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article div.tape dl {
  width: auto
 }
}
main section#lineup article div.tape dl dt {
 display: flex;
 justify-content: space-between;
 margin-bottom: 1%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article div.tape dl dt {
  display: block;
  display: flex
 }
}
main section#lineup article div.tape dl dd {
 width: 100%;
 margin-bottom: 10%;
 border: 1px solid #eee;
 background: #fff
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article div.tape dl dd {
  margin-bottom: 5%;
 }
}
main section#lineup article div.tape dl dd a {
 display: block;
 transition: all 0.6s ease 0s;
 position: relative;
 overflow: hidden;
 text-align: center;
}
main section#lineup article div.tape dl dd a:hover {
 filter: alpha(opacity=50);
 -moz-opacity: .5;
 opacity: .5
}
main section#lineup article div.tape dl dd a:hover img {
 transform: scale(1.08, 1.08);
 transition: .5s all
}
main section#lineup article div.tape dl dd a img {
 height: 60px;
 object-fit: cover;
 object-position: 0 0
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article div.tape dl dd a img {
  height: 40px
 }
}
main section#lineup article aside div.eraser, main section#lineup article aside div.deco {
 display: flex;
 align-items: center;
 background: #fff;
 overflow: hidden
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser, main section#lineup article aside div.deco {
  display: block
 }
}
main section#lineup article aside div.eraser figure, main section#lineup article aside div.deco figure {
 width: 50%;
 height: 450px;
 background: linear-gradient(120deg, #f0f5f5, #fafafa)
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser figure, main section#lineup article aside div.deco figure {
  width: 100%;
  height: 50vh
 }
}
main section#lineup article aside div.eraser figure img, main section#lineup article aside div.deco figure img {
 height: 470px;
 object-fit: cover;
 object-position: left bottom
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser figure img, main section#lineup article aside div.deco figure img {
  height: 50vh
 }
}
main section#lineup article aside div.eraser div, main section#lineup article aside div.deco div {
 width: 50%;
 padding: 0 10%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div, main section#lineup article aside div.deco div {
  width: 100%;
  padding: 5% 10%
 }
}
main section#lineup article aside div.eraser div h4, main section#lineup article aside div.deco div h4 {
 font-size: 40px;
 font-size: 2.5rem;
 margin-bottom: 3rem;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div h4, main section#lineup article aside div.deco div h4 {
  font-size: 30px;
  font-size: 1.875rem
 }
}
main section#lineup article aside div.eraser div h4:after, main section#lineup article aside div.deco div h4:after {
 content: "";
 display: block;
 position: absolute;
 width: 50px;
 height: 2px;
 background: #000;
 bottom: -1.5rem;
 left: 0
}
main section#lineup article aside div.eraser div h4 small, main section#lineup article aside div.deco div h4 small {
 font-size: 30px;
 font-size: 1.875rem
}
main section#lineup article aside div.eraser div p, main section#lineup article aside div.deco div p {
 text-align: left
}
main section#lineup article aside div.eraser div dl, main section#lineup article aside div.deco div dl {
 width: auto;
 max-width: 400px;
 display: flex;
 align-items: baseline
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div dl, main section#lineup article aside div.deco div dl {
  display: block;
  display: flex
 }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div dl, main section#lineup article aside div.deco div dl {
  font-size: 20px;
  font-size: 1.25rem;
  max-width: 100%
 }
}
main section#lineup article aside div.eraser div dl dt, main section#lineup article aside div.deco div dl dt {
 display: flex;
 align-items: center;
 width: 40%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div dl dt, main section#lineup article aside div.deco div dl dt {
  display: block;
  display: flex
 }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div dl dt, main section#lineup article aside div.deco div dl dt {
  width: 35%
 }
}
main section#lineup article aside div.eraser div dl dd:before, main section#lineup article aside div.deco div dl dd:before {
 display: inline-block;
 *display: inline;
 *zoom: 1;
 margin-right: 5px;
 content: "："
}
main section#lineup article aside div.eraser div dl dd b, main section#lineup article aside div.deco div dl dd b {
 font-size: 32px;
 font-size: 2rem;
 font-weight: normal
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div dl dd b, main section#lineup article aside div.deco div dl dd b {
  font-size: 30px;
  font-size: 1.875rem
 }
}
main section#lineup article aside div.eraser div ul li a, main section#lineup article aside div.deco div ul li a {
 font-size: 24px;
 font-size: 1.5rem;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 width: auto;
 max-width: 200px;
 height: 50px;
 margin-top: 10%;
 background: #ccc;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.6s;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser div ul li a, main section#lineup article aside div.deco div ul li a {
  width: 90%;
  height: 50px;
  margin: 10% auto 0
 }
}
main section#lineup article aside div.eraser div ul li a:hover, main section#lineup article aside div.deco div ul li a:hover {
 filter: alpha(opacity=50);
 -moz-opacity: .5;
 opacity: .5;
 text-decoration: none
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.eraser, main section#lineup article aside div.deco {
  margin: 5% 0
 }
}
main section#lineup article aside div.deco {
 margin: 7% 0 0
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#lineup article aside div.deco {
  margin: 15% 0
 }
}
main section#lineup article aside div.eraser div {
 order: 1
}
main section#lineup article aside div.eraser figure {
 order: 2
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto {
  margin: 15% 0
 }
}
main section#howto h3 {
 position: absolute;
 top: 10%;
 left: 20%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto h3 {
  position: static
 }
}
main section#howto section {
 display: flex;
 justify-content: space-between
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section {
  display: block
 }
}
main section#howto section div {
 width: calc(100vw / 2.5)
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div {
  width: 80%;
  margin: 0 auto
 }
}
main section#howto section div figure {
 position: relative
}
main section#howto section div figure img {
 position: relative;
 z-index: 1
}
main section#howto section div figure:before {
 content: "";
 display: block;
 position: absolute;
 position: absolute;
 z-index: 0
}
main section#howto section div figure figcaption {
 font-size: 30px;
 font-size: 1.875rem;
 position: absolute;
 z-index: 1;
 font-weight: bold
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div figure figcaption {
  font-size: 28px;
  font-size: 1.75rem
 }
}
main section#howto section div figure figcaption:before {
 content: "";
 display: block;
 position: absolute;
 width: 0.2rem;
 height: 5rem;
 margin-right: 0.8rem;
 margin-left: -1rem;
 background: #000
}
main section#howto section div:nth-of-type(1) figure {
 margin-top: 60%;
 margin-left: 10%;
 margin-right: -10%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(1) figure {
  margin: 0
 }
}
main section#howto section div:nth-of-type(1) figure:before {
 width: 80%;
 height: 100%;
 top: -30%;
 left: -10%;
 background: #fce5e4
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(1) figure:before {
  top: 15%
 }
}
main section#howto section div:nth-of-type(1) figure figcaption {
 top: -40px;
 right: 10px
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(1) figure figcaption {
  top: auto;
  bottom: -34px;
  right: 30px
 }
}
main section#howto section div:nth-of-type(1) figure figcaption:before {
 transform: translate(0, 0.6rem)
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(1) figure figcaption:before {
  transform: translate(5.5rem, -2rem)
 }
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(1) {
 margin-top: 20%;
 margin-left: -5%;
 margin-right: 5%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(2) figure:nth-of-type(1) {
  margin: 20% auto
 }
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(1):before {
 width: 80%;
 height: 100%;
 top: 15%;
 right: -5%;
 background: #fcf7d7
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(2) figure:nth-of-type(1):before {
  right: -10%
 }
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(1) figcaption {
 bottom: -40px;
 left: 20px
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(2) figure:nth-of-type(1) figcaption {
  bottom: -34px
 }
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(1) figcaption:before {
 transform: translate(0, -2rem)
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(2) {
 margin-top: 20%;
 margin-left: -15%;
 margin-right: 15%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(2) figure:nth-of-type(2) {
  margin: 0
 }
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(2):before {
 width: 80%;
 height: 100%;
 top: 15%;
 left: -10%;
 background: #dcf3fc
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(2) figcaption {
 bottom: -40px;
 right: 30px
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#howto section div:nth-of-type(2) figure:nth-of-type(2) figcaption {
  bottom: -34px
 }
}
main section#howto section div:nth-of-type(2) figure:nth-of-type(2) figcaption:before {
 transform: translate(7.2rem, -2rem)
}
main section#howto section dl {
 width: calc(100vw / 3);
 height: auto
}
main section#download article {
 padding-bottom: 0
}
main section#download section {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 3%
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#download section {
  display: block
 }
}
main section#download section:before, main section#download section:after {
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
}
main section#download section:before {
 border: 1px solid #ccc;
 top: 0;
 left: 0;
 z-index: 1
}
main section#download section:after {
 background: #eee6fa;
 top: 10px;
 left: 10px;
 z-index: 0
}
main section#download section div {
 width: 50%;
 padding: 3%;
 padding-right: 5%;
 z-index: 2;
 order: 1
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#download section div {
  width: 100%;
  padding: 5% 8%
 }
}
main section#download section figure {
 width: 50%;
 z-index: 2;
 order: 2;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#download section figure {
  width: 90%;
  margin: 5% auto 0
 }
}
main section#download section h4 {
 font-size: 40px;
 font-size: 2.5rem;
 margin-bottom: 3rem;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#download section h4 {
  font-size: 30px;
  font-size: 1.875rem
 }
}
main section#download section h4:after {
 content: "";
 display: block;
 position: absolute;
 width: 50px;
 height: 2px;
 background: #000;
 bottom: -1.5rem;
 left: 0
}
main section#download section h4 small {
 font-size: 30px;
 font-size: 1.875rem
}
main section#download section li a {
 font-size: 24px;
 font-size: 1.5rem;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 width: auto;
 max-width: 200px;
 height: 50px;
 margin-top: 10%;
 background: #ccc;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.6s;
 position: relative
}
main section#download section li .nolink {
 font-size: 24px;
 font-size: 1.5rem;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 width: auto;
 max-width: 200px;
 height: 50px;
 margin-top: 10%;
 background: #ccc;
 color: #ddd;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#download section li a {
  width: 90%;
  height: 50px;
  margin: 10% auto 0
 }
 main section#download section li .nolink {
  width: 90%;
  height: 50px;
  margin: 10% auto 0
 }
}
main section#download section li a:hover {
 filter: alpha(opacity=50);
 -moz-opacity: .5;
 opacity: .5;
 text-decoration: none
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#gallery {
  margin-top: 20%
 }
}
main section#gallery article {
 padding: 8% 0
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#gallery article {
  padding: 0
 }
}
main section#gallery article h2 {
 font-size: 80px;
 font-size: 5rem;
 font-family: poppins, sans-serif;
 font-weight: 500;
 font-style: normal;
 margin-bottom: 8%;
 line-height: 1.2;
 position: relative;
 text-align: center
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#gallery article h2 {
  font-size: 60px;
  font-size: 3.75rem;
  text-align: center
 }
}
main section#gallery article h2:after {
 content: "";
 display: block;
 position: absolute;
 width: 60px;
 height: 1px;
 margin-left: -30px;
 position: absolute;
 top: 9rem;
 left: 50%;
 background: #000
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#gallery article h2:after {
  display: none
 }
}
main section#gallery article ul {
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#gallery article ul {
  display: block;
  display: flex
 }
}
main section#gallery article ul li {
 width: 300px;
 height: 300px;
 margin-bottom: 3%;
 overflow: hidden
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#gallery article ul li {
  width: 46%;
  height: 200px
 }
}
@media screen and (min-width: 320px) and (max-width: 568px) {
 main section#gallery article ul li {
  height: 120px
 }
}
@media screen and (min-width: 375px) and (max-width: 667px) {
 main section#gallery article ul li {
  height: 140px
 }
}
@media screen and (min-width: 414px) and (max-width: 736px) {
 main section#gallery article ul li {
  height: 160px
 }
}
main section#gallery article ul li a:hover img {
 transform: scale(1.08, 1.08);
 transition: .5s all
}
main section#gallery article ul li img {
 width: 300px;
 height: 300px;
 object-fit: cover
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 main section#gallery article ul li img {
  width: 200px;
  height: 200px
 }
}
@media screen and (min-width: 320px) and (max-width: 568px) {
 main section#gallery article ul li img {
  width: 140px;
  height: 140px
 }
}
@media screen and (min-width: 375px) and (max-width: 667px) {
 main section#gallery article ul li img {
  width: 180px;
  height: 180px
 }
}
@media screen and (min-width: 414px) and (max-width: 736px) {
 main section#gallery article ul li img {
  width: 200px;
  height: 200px
 }
}
.modal_contents.show {
 display: block;
 opacity: 1
}
.modal_contents .prev_next {
 display: none
}
.modal_contents a.link {
 display: none !important
}
@media screen and (min-width: 0) and (max-width: 1000px) {
 ul.breadcrumb li:last-child {
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 100%
 }
}
/*# sourceMappingURL=style.css.map */