@charset "UTF-8";
/** ================================================

  Responsive Settings

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

  Easing Settings

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

  Font Settings

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

  Object Size

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

  Utility

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

  Responsive

================================================ */
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,500,700|Noto+Sans+JP:300,400,500,700&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,500,700&display=swap&subset=japanese");
/*===============================================
 responsive element
===============================================*/
.pc-inline {
  display: inline !important;
}

.pc-inline-block {
  display: inline-block !important;
}

.pc-block {
  display: block !important;
}

.sp-inline,
.sp-inline-block,
.sp-block {
  display: none !important;
}

@media not all and (min-width: 768px) {
  .pc-inline,
.pc-inline-block,
.pc-block {
    display: none !important;
  }
  .sp-inline {
    display: inline !important;
  }
  .sp-inline-block {
    display: inline-block !important;
  }
  .sp-block {
    display: block !important;
  }
}
#issp {
  display: none;
}

@media not all and (min-width: 768px) {
  #issp {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
}
/*===============================================
 layout
===============================================*/
html {
  height: 100%;
  min-width: 1128px;
  overflow: auto;
  overflow-y: scroll;
}

@media not all and (min-width: 768px) {
  html {
    min-width: 0px;
  }
}
#loading {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 208002;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
}

body.loaded #loading {
  transition: opacity 0.6s linear;
  opacity: 0;
  pointer-events: none;
}

.wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wrap * {
  color: #1f1f1f;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "メイリオ", sans-serif;
  font-weight: 400;
  font-feature-settings: "palt";
}

body.modal--visible .wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

.wrap-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wrap-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.alt {
  display: none !important;
}

/*-------------------------------------
header
---------------------------------------*/
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 208001;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}

.header--visible {
  opacity: 1;
  pointer-events: auto;
}

.header-inner {
  position: relative;
  display: flex;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid #dedede;
}

@media not all and (min-width: 768px) {
  .header-inner {
    height: 17.33333vw;
    background-color: transparent;
    border-bottom-color: transparent;
    transition: background-color 0.2s linear, border-bottom-color 0.2s linear;
  }
}
@media not all and (min-width: 768px) {
  .header--visible .header-inner {
    background-color: #fff;
    border-bottom-color: #dedede;
  }
}
@media not all and (min-width: 768px) {
  body.sp-nav--visible .header-inner {
    background-color: #fff;
    border-bottom-color: #dedede;
  }
}
.header-logo {
  padding: 27px 27px 0 27px;
}

@media not all and (min-width: 768px) {
  .header-logo {
    padding: 5.6vw 0 0 6vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s linear;
  }
}
.header-logo a {
  display: block;
  width: 240px;
  height: 29px;
  background: url(../images/common/header-logo.png) no-repeat;
}

@media not all and (min-width: 768px) {
  .header-logo a {
    width: 50.66667vw;
    height: 6.4vw;
    background-image: url(../images/common/sp-header-logo.png);
    background-size: contain;
  }
}
@media not all and (min-width: 768px) {
  .header--visible .header-logo {
    opacity: 1;
    pointer-events: auto;
  }
}
@media not all and (min-width: 768px) {
  body.sp-nav--visible .header-logo {
    opacity: 1;
    pointer-events: auto;
  }
}
.header-nav {
  margin: 0 0 0 auto;
}

@media not all and (min-width: 768px) {
  .header-nav {
    display: none;
  }
}
.header-nav ul {
  display: flex;
  justify-content: center;
  margin: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1;
}

.header-nav ul li a {
  display: block;
  padding: 30px 18px;
  text-decoration: none;
  color: #1f1f1f;
  white-space: nowrap;
}

.header-nav ul li a.blank:after {
  display: inline-block;
  width: 12px;
  height: 9px;
  margin: 0 0 0 1em;
  background: url(../images/common/nav-ico-blank.png) no-repeat;
  content: "";
}

.header-nav ul li a.shop:before {
  display: inline-block;
  width: 18px;
  height: 19px;
  margin: -0.2em 0.5em 0 0;
  background: url(../images/common/nav-ico-shop.png) no-repeat;
  vertical-align: -0.2em;
  content: "";
}

.header-sp-buttons {
  display: none;
}

@media not all and (min-width: 768px) {
  .header-sp-buttons {
    display: flex;
    margin: 2.13333vw 4.26667vw 0 auto;
  }
  .header-sp-buttons a {
    flex: 0 0 auto;
    display: block;
    width: 7.46667vw;
    padding-top: 9.6vw;
    margin: 0 0 0 6.4vw;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-size: 2.66667vw;
    font-family: "Noto Serif JP", serif;
    line-height: 1;
  }
  .header-sp-buttons a:first-child {
    margin: 0;
  }
}
@media not all and (min-width: 768px) {
  .header--visible .header-sp-buttons a {
    color: #1f1f1f;
  }
}
@media not all and (min-width: 768px) {
  body.sp-nav--visible .header-sp-buttons a {
    color: #1f1f1f;
  }
}
.header-sp-shop {
  background: url(../images/common/sp-header-nav-ico-shop-w.png) no-repeat center top;
  background-size: 7.46667vw auto;
}

.header--visible .header-sp-shop {
  background-image: url(../images/common/sp-header-nav-ico-shop.png);
}

body.sp-nav--visible .header-sp-shop {
  background-image: url(../images/common/sp-header-nav-ico-shop.png);
}

.header-sp-menu {
  background: url(../images/common/sp-header-nav-ico-menu-w.png) no-repeat center top;
  background-size: 7.46667vw auto;
}

.header-sp-menu .close {
  display: none;
}

.header--visible .header-sp-menu {
  background-image: url(../images/common/sp-header-nav-ico-menu.png);
}

body.sp-nav--visible .header-sp-menu {
  background-image: url(../images/common/sp-header-nav-ico-close.png);
}

.header-sp-nav {
  display: none;
}

@media not all and (min-width: 768px) {
  .header-sp-nav {
    display: block;
    position: fixed;
    left: 0;
    top: 17.33333vw;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
.header-sp-nav-inner {
  width: 100%;
}

.header-sp-nav-inner ul {
  display: block;
  padding: 0;
  margin: 0;
  background-color: #000;
  list-style: none;
}

.header-sp-nav-inner ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: calc((100vh - 17.33333vw) / 5);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.header-sp-nav-inner ul li a > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header-sp-nav-inner ul li a > div span {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 4.26667vw;
  line-height: 1;
  white-space: nowrap;
}

.header-sp-nav-inner ul li a > div small {
  display: block;
  margin: 1em 0 0 0;
  text-align: center;
  color: #fff;
  font-size: 3.46667vw;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.header-sp-nav-inner ul li a:after {
  position: absolute;
  right: 8.53333vw;
  top: 50%;
  transform: translateY(-50%);
  width: 3.86667vw;
  height: 1.06667vw;
  background: url(../images/common/sp-nav-ico-link.png) no-repeat;
  background-size: contain;
  content: "";
}

.header-sp-nav-inner ul li a.blank:after {
  right: 9.06667vw;
  width: 2.66667vw;
  height: 2.13333vw;
  background-image: url(../images/common/sp-nav-ico-blank.png);
}

.header-sp-nav-inner ul li a.shop:before {
  position: absolute;
  left: 1.33333vw;
  right: 1.33333vw;
  top: 1.33333vw;
  bottom: 1.33333vw;
  border: 1px solid #fff;
  opacity: 0.6;
  content: "";
}

.header-sp-nav-inner ul li a.shop > div span:before {
  display: inline-block;
  width: 5.06667vw;
  height: 5.46667vw;
  margin: 0 3.2vw 0 0;
  background: url(../images/common/sp-nav-ico-shop.png) no-repeat;
  background-size: contain;
  vertical-align: -0.15em;
  content: "";
}

.header-sp-nav-inner ul li:nth-child(1) a {
  background-image: url(../images/common/sp-nav-themes.jpg);
}

.header-sp-nav-inner ul li:nth-child(2) a {
  background-image: url(../images/common/sp-nav-life.jpg);
}

.header-sp-nav-inner ul li:nth-child(3) a {
  background-image: url(../images/common/sp-nav-journal.jpg);
}

.header-sp-nav-inner ul li:nth-child(4) a {
  background-image: url(../images/common/sp-nav-others.jpg);
}

.header-sp-nav-inner ul li:nth-child(5) a {
  background-image: url(../images/common/sp-nav-shop.jpg);
}

body.sp-nav--visible .header-sp-nav {
  height: calc(100vh - 17.33333vw);
}

/*===============================================
 top
===============================================*/
.top .pic-anim-mono, .top .pic-anim-pencil, .top .pic-anim-full {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.top .pic-anim-pencil, .top .pic-anim-full {
  opacity: 0;
}

.top .pic-anim--play .pic-anim-pencil,
.top .pic-anim--play .pic-anim-full {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.top .pic-anim--play .pic-anim-pencil {
  transition-delay: 0.3s;
}

.top .pic-anim--play .pic-anim-full {
  transition-delay: 1.2s;
}

.top-mv {
  position: relative;
  width: 100%;
  height: 100vh;
}

@media not all and (min-width: 768px) {
  .top-mv {
    height: 128vw !important;
  }
}
.top-mv-images {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.top-mv-pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.top-mv-pic-1 .pic-anim-mono {
  background-image: url(../images/top/vi-1-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-1 .pic-anim-mono {
    background-image: url(../images/top/vi-1-mono-s.jpg);
  }
}
.top-mv-pic-1 .pic-anim-pencil {
  background-image: url(../images/top/vi-1-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-1 .pic-anim-pencil {
    background-image: url(../images/top/vi-1-pencil-s.jpg);
  }
}
.top-mv-pic-1 .pic-anim-full {
  background-image: url(../images/top/vi-1-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-1 .pic-anim-full {
    background-image: url(../images/top/vi-1-full-s.jpg);
  }
}
.top-mv-pic-2 .pic-anim-mono {
  background-image: url(../images/top/vi-2-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-2 .pic-anim-mono {
    background-image: url(../images/top/vi-2-mono-s.jpg);
  }
}
.top-mv-pic-2 .pic-anim-pencil {
  background-image: url(../images/top/vi-2-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-2 .pic-anim-pencil {
    background-image: url(../images/top/vi-2-pencil-s.jpg);
  }
}
.top-mv-pic-2 .pic-anim-full {
  background-image: url(../images/top/vi-2-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-2 .pic-anim-full {
    background-image: url(../images/top/vi-2-full-s.jpg);
  }
}
.top-mv-pic-3 .pic-anim-mono {
  background-image: url(../images/top/vi-3-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-3 .pic-anim-mono {
    background-image: url(../images/top/vi-3-mono-s.jpg);
  }
}
.top-mv-pic-3 .pic-anim-pencil {
  background-image: url(../images/top/vi-3-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-3 .pic-anim-pencil {
    background-image: url(../images/top/vi-3-pencil-s.jpg);
  }
}
.top-mv-pic-3 .pic-anim-full {
  background-image: url(../images/top/vi-3-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-3 .pic-anim-full {
    background-image: url(../images/top/vi-3-full-s.jpg);
  }
}
.top-mv-pic-4 .pic-anim-mono {
  background-image: url(../images/top/vi-4-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-4 .pic-anim-mono {
    background-image: url(../images/top/vi-4-mono-s.jpg);
  }
}
.top-mv-pic-4 .pic-anim-pencil {
  background-image: url(../images/top/vi-4-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-4 .pic-anim-pencil {
    background-image: url(../images/top/vi-4-pencil-s.jpg);
  }
}
.top-mv-pic-4 .pic-anim-full {
  background-image: url(../images/top/vi-4-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-4 .pic-anim-full {
    background-image: url(../images/top/vi-4-full-s.jpg);
  }
}
.top-mv-pic-5 .pic-anim-mono {
  background-image: url(../images/top/vi-5-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-5 .pic-anim-mono {
    background-image: url(../images/top/vi-5-mono-s.jpg);
  }
}
.top-mv-pic-5 .pic-anim-pencil {
  background-image: url(../images/top/vi-5-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-5 .pic-anim-pencil {
    background-image: url(../images/top/vi-5-pencil-s.jpg);
  }
}
.top-mv-pic-5 .pic-anim-full {
  background-image: url(../images/top/vi-5-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-5 .pic-anim-full {
    background-image: url(../images/top/vi-5-full-s.jpg);
  }
}
.top-mv-pic-6 .pic-anim-mono {
  background-image: url(../images/top/vi-6-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-6 .pic-anim-mono {
    background-image: url(../images/top/vi-6-mono-s.jpg);
  }
}
.top-mv-pic-6 .pic-anim-pencil {
  background-image: url(../images/top/vi-6-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-6 .pic-anim-pencil {
    background-image: url(../images/top/vi-6-pencil-s.jpg);
  }
}
.top-mv-pic-6 .pic-anim-full {
  background-image: url(../images/top/vi-6-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-mv-pic-6 .pic-anim-full {
    background-image: url(../images/top/vi-6-full-s.jpg);
  }
}
.top-mv-ttl {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 207px;
  height: 233px;
  background: url(../images/top/vi-logo.png) no-repeat;
}

@media not all and (min-width: 768px) {
  .top-mv-ttl {
    width: 33.73333vw;
    height: 37.86667vw;
    background-image: url(../images/top/vi-logo-s.png);
    background-size: contain;
  }
}
.top-mv-scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 21px;
  height: 70px;
  background: url(../images/top/vi-scroll.png) no-repeat center bottom;
}

@media not all and (min-width: 768px) {
  .top-mv-scroll {
    width: 4vw;
    height: 13.06667vw;
    background-image: url(../images/top/vi-scroll-s.png);
    background-size: contain;
  }
}
@media not all and (min-width: 768px) {
  .top-nav {
    display: none;
  }
}
.top-nav ul {
  display: flex;
  justify-content: center;
  margin: 0;
  list-style: none;
  font-size: 16.5px;
}

.top-nav ul li a {
  display: block;
  padding: 32px 18px;
  text-decoration: none;
  color: #1f1f1f;
}

.top-nav ul li a.blank:after {
  display: inline-block;
  width: 12px;
  height: 9px;
  margin: 0 0 0 1em;
  background: url(../images/common/nav-ico-blank.png) no-repeat;
  content: "";
}

.top-nav ul li a.shop:before {
  display: inline-block;
  width: 18px;
  height: 19px;
  margin: -0.2em 0.5em 0 0;
  background: url(../images/common/nav-ico-shop.png) no-repeat;
  vertical-align: -0.2em;
  content: "";
}

.top-sec-vi {
  position: relative;
  width: 100%;
  padding-top: 31.25%;
}

@media not all and (min-width: 768px) {
  .top-sec-vi {
    padding-top: 48%;
  }
}
.top-sec-vi:before {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 1px;
  height: 38px;
  background-color: #fff;
  opacity: 0.8;
  content: "";
}

@media not all and (min-width: 768px) {
  .top-sec-vi:before {
    height: 5.06667vw;
  }
}
.top-sec-vi:after {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 2;
  width: 1px;
  height: 38px;
  background-color: #3e3e3e;
  opacity: 0.8;
  content: "";
}

@media not all and (min-width: 768px) {
  .top-sec-vi:after {
    height: 5.06667vw;
  }
}
.top-sec-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 0 120px;
}

@media not all and (min-width: 768px) {
  .top-sec-center {
    padding: 14.66667vw 0 21.33333vw;
  }
}
.top-sec-ttl {
  text-align: center;
  font-size: 40px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-sec-ttl {
    font-size: 6.4vw;
  }
}
.top-sec-lead {
  margin: 48px 0 0 0;
  text-align: center;
  font-size: 21px;
  font-weight: 300;
}

@media not all and (min-width: 768px) {
  .top-sec-lead {
    margin: 7.46667vw 0 0 0;
    font-size: 3.73333vw;
    line-height: 1.71429;
  }
}
.top-sec-link {
  width: 430px;
  margin: 80px auto 0;
}

@media not all and (min-width: 768px) {
  .top-sec-link {
    width: 77.33333vw;
    margin: 13.33333vw auto 0;
  }
}
.top-sec-link a {
  position: relative;
  display: block;
  padding: 26px 0;
  box-sizing: border-box;
  border: 1px solid #1f1f1f;
  text-decoration: none;
  text-align: center;
  color: #1f1f1f;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-sec-link a {
    padding: 4.26667vw 3.2vw 4.26667vw 0;
    font-size: 4vw;
    letter-spacing: 0;
  }
}
.top-sec-link a:after {
  position: absolute;
  right: 27px;
  top: 50%;
  transform: translate(0, -50%);
  width: 24px;
  height: 6px;
  background: url(../images/top/ico-link.png) no-repeat;
  content: "";
  transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

@media not all and (min-width: 768px) {
  .top-sec-link a:after {
    right: 4.8vw;
    width: 5.2vw;
    height: 1.33333vw;
    background-image: url(../images/top/ico-link-s.png);
    background-size: 100% 100%;
  }
}
.top-sec-link a:hover:after {
  transform: translate(25%, -50%);
}

.top-sec-link a.blank:after {
  width: 16px;
  height: 12px;
  background-image: url(../images/top/ico-blank.png);
}

@media not all and (min-width: 768px) {
  .top-sec-link a.blank:after {
    width: 3.33333vw;
    height: 2.66667vw;
    background-image: url(../images/top/ico-blank-s.png);
  }
}
.top-sec-link a.blank:hover:after {
  transform: translate(0, -50%);
}

.top-lead {
  position: relative;
}

.top-lead-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.top-lead-bg > div {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.top-lead-bg-mono {
  background: url(../images/top/lead-bg-mono.jpg) no-repeat center bottom;
  background-size: cover;
}

@media not all and (min-width: 768px) {
  .top-lead-bg-mono {
    background-image: url(../images/top/lead-bg-mono-s.jpg);
  }
}
.top-lead-bg-pencil {
  background: url(../images/top/lead-bg-pencil.jpg) no-repeat center bottom;
  background-size: cover;
  opacity: 0;
  height: 0%;
  transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s linear;
  transition-delay: 0.1s;
}

@media not all and (min-width: 768px) {
  .top-lead-bg-pencil {
    background-image: url(../images/top/lead-bg-pencil-s.jpg);
  }
}
.top-lead-bg-full {
  background: url(../images/top/lead-bg.jpg) no-repeat center bottom;
  background-size: cover;
  opacity: 0;
  height: 0%;
  transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s linear;
  transition-delay: 0.7s;
}

@media not all and (min-width: 768px) {
  .top-lead-bg-full {
    background-image: url(../images/top/lead-bg-s.jpg);
  }
}
.top-lead.inview--visible .top-lead-bg-pencil {
  height: 100%;
  opacity: 1;
}

.top-lead.inview--visible .top-lead-bg-full {
  height: 100%;
  opacity: 1;
}

.top-lead-inner {
  position: relative;
  padding: 84px 0 748px;
}

@media not all and (min-width: 768px) {
  .top-lead-inner {
    padding: 14.66667vw 0 124vw;
  }
}
.top-lead-ttl {
  text-align: center;
  font-size: 44px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-lead-ttl {
    font-size: 6.93333vw;
  }
}
.top-lead-main {
  margin: 72px 0 0 0;
}

@media not all and (min-width: 768px) {
  .top-lead-main {
    margin: 10.66667vw 0 0 0;
  }
}
.top-lead-main p {
  margin: 58px 0 0 0;
  text-align: center;
  font-size: 21px;
  line-height: 2.7619;
}

@media not all and (min-width: 768px) {
  .top-lead-main p {
    margin: 6.66667vw 0 0 0;
    font-size: 4vw;
    line-height: 2.53333;
  }
}
.top-lead-main p:first-child {
  margin: 0;
}

.top-themes {
  position: relative;
  padding: 104px 0 0 0;
}

@media not all and (min-width: 768px) {
  .top-themes {
    padding: 14.66667vw 0 0 0;
  }
}
.top-themes-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.top-themes-bg-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0px;
  background: url(../images/top/themes-bg-line.png) no-repeat center top;
  transition: height 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media not all and (min-width: 768px) {
  .top-themes-bg-line {
    background-image: url(../images/top/themes-bg-line-s.png);
    background-size: 100% auto;
  }
}
.top-themes-bg-pencils {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.top-themes-bg-pencils img {
  position: absolute;
  left: 50%;
  display: block;
  width: 27px;
  height: auto;
  margin: -451px 0 0 -13.5px;
  opacity: 0;
  transition: opacity 1.5s linear, transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media not all and (min-width: 768px) {
  .top-themes-bg-pencils img {
    width: 4.53333vw;
    margin: -82.66667vw 0 0 -2.26667vw;
  }
}
.top-themes-bg-pencils img:nth-child(1) {
  top: 278px;
  transform: translate(-234px, 15%) rotate(-99.64deg);
  transform-origin: center bottom;
  transition-delay: 0.5s;
}

@media not all and (min-width: 768px) {
  .top-themes-bg-pencils img:nth-child(1) {
    top: 40.8vw;
    transform: translate(-32.66667vw, 15%) rotate(-99.64deg);
  }
}
.top-themes-bg-pencils img:nth-child(2) {
  top: 303px;
  transform: translate(-196px, 15%) rotate(-132.26deg);
  transform-origin: center bottom;
  transition-delay: 0.7s;
}

@media not all and (min-width: 768px) {
  .top-themes-bg-pencils img:nth-child(2) {
    top: 44.93333vw;
    transform: translate(-26.26667vw, 15%) rotate(-132.26deg);
  }
}
.top-themes-bg-pencils img:nth-child(3) {
  top: 382px;
  transform: translate(-160px, 15%) rotate(-104.25deg);
  transform-origin: center bottom;
  transition-delay: 0.9s;
}

@media not all and (min-width: 768px) {
  .top-themes-bg-pencils img:nth-child(3) {
    top: 55.06667vw;
    transform: translate(-19.86667vw, 15%) rotate(-104.25deg);
  }
}
.top-themes-bg-pencils img:nth-child(4) {
  top: 126px;
  transform: translate(205px, 15%) rotate(68.72deg);
  transform-origin: center bottom;
  transition-delay: 0.5s;
}

@media not all and (min-width: 768px) {
  .top-themes-bg-pencils img:nth-child(4) {
    top: 20.93333vw;
    transform: translate(28.93333vw, 15%) rotate(71.72deg);
  }
}
.top-themes-bg-pencils img:nth-child(5) {
  top: 214px;
  transform: translate(181px, 15%) rotate(52.81deg);
  transform-origin: center bottom;
  transition-delay: 0.7s;
}

@media not all and (min-width: 768px) {
  .top-themes-bg-pencils img:nth-child(5) {
    top: 35.46667vw;
    transform: translate(25.06667vw, 15%) rotate(52.81deg);
  }
}
.top-themes-bg-pencils img:nth-child(6) {
  top: 246px;
  transform: translate(225px, 15%) rotate(88.97deg);
  transform-origin: center bottom;
  transition-delay: 0.9s;
}

@media not all and (min-width: 768px) {
  .top-themes-bg-pencils img:nth-child(6) {
    top: 40.8vw;
    transform: translate(32.4vw, 15%) rotate(88.97deg);
  }
}
.top-themes-bg.inview--visible .top-themes-bg-line {
  height: 633px;
}

@media not all and (min-width: 768px) {
  .top-themes-bg.inview--visible .top-themes-bg-line {
    height: 86.26667vw;
  }
}
.top-themes-bg.inview--visible .top-themes-bg-pencils img {
  opacity: 1;
}

.top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(1) {
  transform: translate(-234px, 0%) rotate(-104.64deg);
}

@media not all and (min-width: 768px) {
  .top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(1) {
    transform: translate(-32.66667vw, 0%) rotate(-104.64deg);
  }
}
.top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(2) {
  transform: translate(-196px, 0%) rotate(-127.26deg);
}

@media not all and (min-width: 768px) {
  .top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(2) {
    transform: translate(-26.26667vw, 0%) rotate(-127.26deg);
  }
}
.top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(3) {
  transform: translate(-160px, 0%) rotate(-112.25deg);
}

@media not all and (min-width: 768px) {
  .top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(3) {
    transform: translate(-19.86667vw, 0%) rotate(-112.25deg);
  }
}
.top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(4) {
  transform: translate(205px, 0%) rotate(63.72deg);
}

@media not all and (min-width: 768px) {
  .top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(4) {
    transform: translate(28.93333vw, 0%) rotate(63.72deg);
  }
}
.top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(5) {
  transform: translate(181px, 0%) rotate(57.81deg);
}

@media not all and (min-width: 768px) {
  .top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(5) {
    transform: translate(25.06667vw, 0%) rotate(57.81deg);
  }
}
.top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(6) {
  transform: translate(225px, 0%) rotate(80.97deg);
}

@media not all and (min-width: 768px) {
  .top-themes-bg.inview--visible .top-themes-bg-pencils img:nth-child(6) {
    transform: translate(32.4vw, 0%) rotate(80.97deg);
  }
}
.top-themes-inner {
  position: relative;
}

.top-themes-ttl {
  text-align: center;
}

.top-themes-ttl small {
  display: block;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-themes-ttl small {
    font-size: 4.26667vw;
  }
}
.top-themes-ttl span {
  display: block;
  margin: 40px 0 0 0;
  font-size: 56px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  line-height: 1.32143;
}

@media not all and (min-width: 768px) {
  .top-themes-ttl span {
    margin: 8.53333vw 0 0 0;
    font-size: 8.53333vw;
    line-height: 1.375;
  }
}
.top-themes-main {
  margin: 200px 0 0 0;
}

@media not all and (min-width: 768px) {
  .top-themes-main {
    margin: 24vw 0 0 0;
  }
}
.top-themes-main p {
  margin: 1em 0 0 0;
  text-align: center;
  font-size: 21px;
  line-height: 2.7619;
}

@media not all and (min-width: 768px) {
  .top-themes-main p {
    font-size: 4vw;
    line-height: 2.2;
  }
}
.top-themes-main p:first-child {
  margin: 0;
}

.top-product {
  width: 940px;
  padding: 66px 40px 50px;
  margin: 112px auto 0;
  box-sizing: border-box;
  background-color: #edeceb;
}

@media not all and (min-width: 768px) {
  .top-product {
    width: 94.66667vw;
    padding: 10.66667vw 2.66667vw 2.66667vw;
    margin: 21.33333vw auto 0;
  }
}
.top-product-ttl {
  text-align: center;
  font-size: 40px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
}

@media not all and (min-width: 768px) {
  .top-product-ttl {
    font-size: 6.4vw;
  }
}
.top-product-item {
  display: flex;
  justify-content: space-between;
  margin: 74px 0 0 0;
}

@media not all and (min-width: 768px) {
  .top-product-item {
    flex-direction: column;
    width: 77.33333vw;
    margin: 9.86667vw auto 0;
  }
}
.top-product-item-pic {
  width: 380px;
}

@media not all and (min-width: 768px) {
  .top-product-item-pic {
    width: 100%;
  }
}
.top-product-item-pic-border {
  padding: 10px;
  background-color: #fff;
}

@media not all and (min-width: 768px) {
  .top-product-item-pic-border {
    width: 63.33333vw;
    padding: 1.73333vw;
    margin: 2.66667vw auto 0;
    box-sizing: border-box;
  }
}
.top-product-item-pic-border img {
  display: block;
  width: 100%;
  height: auto;
}

.top-product-item-info {
  width: 440px;
  padding: 18px 0 0 0;
}

@media not all and (min-width: 768px) {
  .top-product-item-info {
    width: auto;
    padding: 6vw 0 0 0;
  }
}
.top-product-item-info-catch {
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-product-item-info-catch {
    text-align: center;
    font-size: 4vw;
  }
}
.top-product-item-info-ttl {
  margin: 40px 0 0 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

@media not all and (min-width: 768px) {
  .top-product-item-info-ttl {
    margin: 0;
    font-size: 4.8vw;
  }
}
.top-product-item-info-volume {
  margin: 16px 0 0 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-product-item-info-volume {
    margin: 4vw 0 0 0;
    font-size: 3.73333vw;
  }
}
.top-product-item-info-price {
  margin: 30px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-product-item-info-price {
    margin: 5.33333vw 0 0 0;
    font-size: 5.6vw;
  }
}
.top-product-item-info-price small {
  font-size: 16px;
  font-weight: 400;
}

@media not all and (min-width: 768px) {
  .top-product-item-info-price small {
    font-size: 3.2vw;
  }
}
.top-product-item-info-detail {
  margin: 48px 0 0 0;
}

@media not all and (min-width: 768px) {
  .top-product-item-info-detail {
    margin: 5.86667vw 0 0 0;
  }
}
.top-product-item-info-detail a {
  position: relative;
  display: block;
  width: 390px;
  padding: 25px 0;
  background-color: #262626;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 21px;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .top-product-item-info-detail a {
    width: auto;
    padding: 4.8vw 0;
    font-size: 4vw;
  }
}
.top-product-item-info-detail a:after {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translate(0, -50%);
  width: 24px;
  height: 6px;
  background: url(../images/top/ico-link-w.png) no-repeat;
  content: "";
}

@media not all and (min-width: 768px) {
  .top-product-item-info-detail a:after {
    right: 5.33333vw;
    width: 5.2vw;
    height: 1.33333vw;
    background-image: url(../images/top/ico-link-w-s.png);
    background-size: contain;
  }
}
.top-product-award {
  width: 780px;
  padding: 46px 0 22px;
  margin: 50px auto 0;
  box-sizing: border-box;
  background-color: #fff;
  *zoom: 1;
}

.top-product-award:after {
  content: "";
  display: block;
  clear: both;
}

@media not all and (min-width: 768px) {
  .top-product-award {
    width: 89.33333vw;
    padding: 7.46667vw 0 4.26667vw;
  }
}
.top-product-award-pic {
  width: 540px;
  margin: 0 auto;
}

@media not all and (min-width: 768px) {
  .top-product-award-pic {
    width: 80vw;
  }
  .top-product-award-pic img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.top-product-award-logo {
  float: left;
  margin: 25px 0 0 30px;
}

@media not all and (min-width: 768px) {
  .top-product-award-logo {
    margin: 6.13333vw 0 0 3.33333vw;
    width: 32.8vw;
  }
  .top-product-award-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.top-product-award-txt {
  margin: 55px 0 0 230px;
}

@media not all and (min-width: 768px) {
  .top-product-award-txt {
    width: 45.33333vw;
    margin: 7.33333vw 0 0 39.46667vw;
  }
}
.top-product-award-txt p {
  font-size: 18px;
  line-height: 2;
}

@media not all and (min-width: 768px) {
  .top-product-award-txt p {
    font-size: 3.46667vw;
    line-height: 1.53846;
  }
}
.top-others {
  margin-top: 140px;
}

@media not all and (min-width: 768px) {
  .top-others {
    margin-top: 13.33333vw;
  }
}
.top-others-vi .pic-anim-mono {
  background-image: url(../images/top/others-vi-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-others-vi .pic-anim-mono {
    background-image: url(../images/top/others-vi-mono-s.jpg);
  }
}
.top-others-vi .pic-anim-pencil {
  background-image: url(../images/top/others-vi-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-others-vi .pic-anim-pencil {
    background-image: url(../images/top/others-vi-pencil-s.jpg);
  }
}
.top-others-vi .pic-anim-full {
  background-image: url(../images/top/others-vi-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-others-vi .pic-anim-full {
    background-image: url(../images/top/others-vi-full-s.jpg);
  }
}
.top-others-links {
  max-width: 1200px;
  margin: 60px auto 0;
  display: flex;
  justify-content: space-between;
}

@media not all and (min-width: 768px) {
  .top-others-links {
    width: 89.33333vw;
    margin: 9.33333vw auto 0;
    flex-direction: column;
  }
}
.top-others-links a {
  position: relative;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.top-others-links a:nth-child(1) {
  width: 48.33333%;
  padding-top: 21.33333%;
  background-image: url(../images/top/others-link-paper.jpg);
}

@media not all and (min-width: 768px) {
  .top-others-links a:nth-child(1) {
    width: 100%;
    padding-top: 44.77612%;
    background-image: url(../images/top/others-link-paper-s.jpg);
  }
}
.top-others-links a:nth-child(2) {
  width: 49.16667%;
  padding-top: 21.33333%;
  background-image: url(../images/top/others-link-stand.jpg);
}

@media not all and (min-width: 768px) {
  .top-others-links a:nth-child(2) {
    width: 100%;
    margin-top: 6.66667vw;
    padding-top: 44.77612%;
    background-image: url(../images/top/others-link-stand-s.jpg);
  }
}
.top-others-links a span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-shadow: 0 0 4px #000;
}

@media not all and (min-width: 768px) {
  .top-others-links a span {
    font-size: 4.8vw;
  }
}
.top-life-vi .pic-anim-mono {
  background-image: url(../images/top/life-vi-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-life-vi .pic-anim-mono {
    background-image: url(../images/top/life-vi-mono-s.jpg);
  }
}
.top-life-vi .pic-anim-pencil {
  background-image: url(../images/top/life-vi-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-life-vi .pic-anim-pencil {
    background-image: url(../images/top/life-vi-pencil-s.jpg);
  }
}
.top-life-vi .pic-anim-full {
  background-image: url(../images/top/life-vi-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-life-vi .pic-anim-full {
    background-image: url(../images/top/life-vi-full-s.jpg);
  }
}
.top-life-pics {
  max-width: 1200px;
  margin: 60px auto 0;
  *zoom: 1;
}

.top-life-pics:after {
  content: "";
  display: block;
  clear: both;
}

@media not all and (min-width: 768px) {
  .top-life-pics {
    width: 94.66667vw;
    margin: 9.33333vw auto 0;
  }
}
.top-life-pics-item {
  float: left;
  width: 18.83333%;
  margin: 1.33333% 0 0 1.33333%;
}

@media not all and (min-width: 768px) {
  .top-life-pics-item {
    width: 31.83099%;
    margin: 2.25352% 0 0 2.25352%;
  }
}
.top-life-pics-item:nth-child(1) {
  width: 39%;
  margin: 0;
}

@media not all and (min-width: 768px) {
  .top-life-pics-item:nth-child(1) {
    width: 65.91549%;
  }
}
.top-life-pics-item:nth-child(2), .top-life-pics-item:nth-child(3), .top-life-pics-item:nth-child(4) {
  margin-top: 0;
}

@media not all and (min-width: 768px) {
  .top-life-pics-item:nth-child(2), .top-life-pics-item:nth-child(3), .top-life-pics-item:nth-child(4) {
    margin-top: 2.25352%;
  }
}
.top-life-pics-item:nth-child(2), .top-life-pics-item:nth-child(5) {
  margin-left: 1.75%;
}

@media not all and (min-width: 768px) {
  .top-life-pics-item:nth-child(2), .top-life-pics-item:nth-child(5) {
    margin-left: 2.25352%;
  }
}
@media not all and (min-width: 768px) {
  .top-life-pics-item:nth-child(2) {
    margin-top: 0;
  }
  .top-life-pics-item:nth-child(4) {
    clear: left;
    margin-left: 0;
  }
  .top-life-pics-item:nth-child(7) {
    display: none;
  }
}
.top-life-pics-item a {
  display: block;
}

.top-life-pics-item img {
  display: block;
  width: 100%;
  height: auto;
}

.top-life-link a:before {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin: 0 16px 0 0;
  background: url(../images/top/life-ico-instagram.png) no-repeat;
  vertical-align: -9px;
  content: "";
}

@media not all and (min-width: 768px) {
  .top-life-link a:before {
    width: 6.4vw;
    height: 6.4vw;
    margin: 0 3.73333vw 0 0;
    background-image: url(../images/top/life-ico-instagram-s.png);
    background-size: contain;
    vertical-align: -0.4em;
  }
}
.top-journal-vi .pic-anim-mono {
  background-image: url(../images/top/journal-vi-mono.jpg);
}

@media not all and (min-width: 768px) {
  .top-journal-vi .pic-anim-mono {
    background-image: url(../images/top/journal-vi-mono-s.jpg);
  }
}
.top-journal-vi .pic-anim-pencil {
  background-image: url(../images/top/journal-vi-pencil.jpg);
}

@media not all and (min-width: 768px) {
  .top-journal-vi .pic-anim-pencil {
    background-image: url(../images/top/journal-vi-pencil-s.jpg);
  }
}
.top-journal-vi .pic-anim-full {
  background-image: url(../images/top/journal-vi-full.jpg);
}

@media not all and (min-width: 768px) {
  .top-journal-vi .pic-anim-full {
    background-image: url(../images/top/journal-vi-full-s.jpg);
  }
}
.top-journal-container {
  width: 940px;
  margin: 60px auto 0;
  border-top: 1px solid #dedede;
}

@media not all and (min-width: 768px) {
  .top-journal-container {
    width: 89.33333vw;
    margin: 8vw auto 0;
  }
}
.top-journal-item {
  border-bottom: 1px solid #dedede;
}

.top-journal-item a {
  position: relative;
  display: block;
  padding: 32px 64px 36px 8px;
  text-decoration: none;
  color: inherit;
}

@media not all and (min-width: 768px) {
  .top-journal-item a {
    padding: 5.6vw 9.6vw 5.6vw 0.8vw;
  }
}
.top-journal-item a:after {
  position: absolute;
  right: 27px;
  top: 50%;
  transform: translate(0, -50%);
  width: 24px;
  height: 6px;
  background: url(../images/top/ico-link.png) no-repeat;
  content: "";
  transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

@media not all and (min-width: 768px) {
  .top-journal-item a:after {
    right: 3.2vw;
    width: 5.2vw;
    height: 1.33333vw;
    background-image: url(../images/top/ico-link-s.png);
    background-size: contain;
  }
}
.top-journal-item a:hover:after {
  transform: translate(25%, -50%);
}

.top-journal-item a.blank:after {
  width: 16px;
  height: 12px;
  background-image: url(../images/top/ico-blank.png);
}

@media not all and (min-width: 768px) {
  .top-journal-item a.blank:after {
    width: 3.33333vw;
    height: 2.66667vw;
    background-image: url(../images/top/ico-blank-s.png);
  }
}
.top-journal-item a.blank:hover:after {
  transform: translate(0, -50%);
}

.top-journal-item-ttl {
  display: inline-block;
  font-size: 23px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}

@media not all and (min-width: 768px) {
  .top-journal-item-ttl {
    font-size: 4.26667vw;
  }
}
.top-journal-item-new {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 0 0 24px;
  background-color: #262626;
  vertical-align: 4px;
  color: #fff;
  font-size: 10px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.1em;
}

@media not all and (min-width: 768px) {
  .top-journal-item-new {
    padding: 0.25em 0.75em;
    font-size: 2.4vw;
  }
}
.top-journal-item-body {
  margin: 22px 0 0 0;
}

@media not all and (min-width: 768px) {
  .top-journal-item-body {
    margin: 2.93333vw 0 0 0;
  }
}
.top-journal-item-body p {
  color: #7c7c7c;
  font-size: 18px;
  line-height: 2.22222;
}

@media not all and (min-width: 768px) {
  .top-journal-item-body p {
    font-size: 3.46667vw;
    line-height: 1.53846;
  }
}
/*===============================================
 themes
===============================================*/
.themes {
  padding: 80px 0 0 0;
}

@media not all and (min-width: 768px) {
  .themes {
    padding: 17.33333vw 0 0 0;
  }
}
.themes-heading {
  position: relative;
  padding: 100px 0 0 0;
}

@media not all and (min-width: 768px) {
  .themes-heading {
    padding: 9.33333vw 0 0 0;
  }
}
.themes-heading-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.themes-heading-bg img {
  position: absolute;
  left: 50%;
  top: -398px;
  display: block;
  width: 22px;
  height: auto;
  margin-left: -11px;
  transform-origin: center bottom;
  opacity: 0;
  transition: opacity 1.5s linear, transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img {
    width: 3.73333vw;
    top: -68.4vw;
    margin-left: -1.86667vw;
  }
}
.themes-heading-bg img:nth-child(1) {
  transform: translate(-166px, 160px) rotate(-68.56deg);
  transition-delay: 0.5s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(1) {
    transform: translate(-21.73333vw, 10.93333vw) rotate(-68.56deg);
  }
}
.themes-heading-bg img:nth-child(2) {
  transform: translate(-218px, 197px) rotate(-72.43deg);
  transition-delay: 0.7s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(2) {
    transform: translate(-32.66667vw, 16.8vw) rotate(-72.43deg);
  }
}
.themes-heading-bg img:nth-child(3) {
  transform: translate(-224px, 287px) rotate(-55.03deg);
  transition-delay: 0.9s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(3) {
    transform: translate(-24vw, 31.2vw) rotate(-55.03deg);
  }
}
.themes-heading-bg img:nth-child(4) {
  transform: translate(-304px, 184px) rotate(-99.5deg);
  transition-delay: 0.5s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(4) {
    transform: translate(-32.53333vw, 33.06667vw) rotate(-99.5deg);
  }
}
.themes-heading-bg img:nth-child(5) {
  transform: translate(-260px, 440px) rotate(-74.17deg);
  transition-delay: 0.7s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(5) {
    transform: translate(-24.93333vw, 49.86667vw) rotate(-74.17deg);
  }
}
.themes-heading-bg img:nth-child(6) {
  transform: translate(-210px, 495px) rotate(-73.03deg);
  transition-delay: 0.9s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(6) {
    transform: translate(-19.73333vw, 61.06667vw) rotate(-73.03deg);
  }
}
.themes-heading-bg img:nth-child(7) {
  transform: translate(172px, 170px) rotate(71.91deg);
  transition-delay: 0.5s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(7) {
    transform: translate(21.73333vw, 14vw) rotate(71.91deg);
  }
}
.themes-heading-bg img:nth-child(8) {
  transform: translate(262px, 226px) rotate(43.17deg);
  transition-delay: 0.7s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(8) {
    transform: translate(34.66667vw, 25.06667vw) rotate(43.17deg);
  }
}
.themes-heading-bg img:nth-child(9) {
  transform: translate(335px, 195px) rotate(83.78deg);
  transition-delay: 0.9s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(9) {
    transform: translate(44.53333vw, 26.53333vw) rotate(83.78deg);
  }
}
.themes-heading-bg img:nth-child(10) {
  transform: translate(320px, 300px) rotate(115.68deg);
  transition-delay: 0.5s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(10) {
    transform: translate(39.33333vw, 38.13333vw) rotate(115.68deg);
  }
}
.themes-heading-bg img:nth-child(11) {
  transform: translate(212px, 407px) rotate(98.83deg);
  transition-delay: 0.7s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(11) {
    transform: translate(24.66667vw, 53.6vw) rotate(98.83deg);
  }
}
.themes-heading-bg img:nth-child(12) {
  transform: translate(287px, 337px) rotate(131.2deg);
  transition-delay: 0.9s;
}

@media not all and (min-width: 768px) {
  .themes-heading-bg img:nth-child(12) {
    transform: translate(30vw, 42.13333vw) rotate(131.2deg);
  }
}
.themes-heading-bg.inview--visible img {
  opacity: 1;
}

.themes-heading-bg.inview--visible img:nth-child(1) {
  transform: translate(-166px, 80px) rotate(-73.56deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(1) {
    transform: translate(-21.73333vw, 4.26667vw) rotate(-73.56deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(2) {
  transform: translate(-218px, 117px) rotate(-67.43deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(2) {
    transform: translate(-32.66667vw, 10.13333vw) rotate(-67.43deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(3) {
  transform: translate(-224px, 207px) rotate(-63.03deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(3) {
    transform: translate(-24vw, 24.53333vw) rotate(-63.03deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(4) {
  transform: translate(-304px, 104px) rotate(-104.5deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(4) {
    transform: translate(-32.53333vw, 26.4vw) rotate(-104.5deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(5) {
  transform: translate(-260px, 360px) rotate(-69.17deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(5) {
    transform: translate(-24.93333vw, 43.2vw) rotate(-69.17deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(6) {
  transform: translate(-210px, 415px) rotate(-81.03deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(6) {
    transform: translate(-19.73333vw, 54.4vw) rotate(-81.03deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(7) {
  transform: translate(172px, 90px) rotate(66.91deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(7) {
    transform: translate(21.73333vw, 7.33333vw) rotate(66.91deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(8) {
  transform: translate(262px, 146px) rotate(48.17deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(8) {
    transform: translate(34.66667vw, 18.4vw) rotate(48.17deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(9) {
  transform: translate(335px, 115px) rotate(75.78deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(9) {
    transform: translate(44.53333vw, 19.86667vw) rotate(75.78deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(10) {
  transform: translate(320px, 220px) rotate(110.68deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(10) {
    transform: translate(39.33333vw, 31.46667vw) rotate(110.68deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(11) {
  transform: translate(212px, 327px) rotate(103.83deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(11) {
    transform: translate(24.66667vw, 46.93333vw) rotate(103.83deg);
  }
}
.themes-heading-bg.inview--visible img:nth-child(12) {
  transform: translate(287px, 257px) rotate(123.2deg);
}

@media not all and (min-width: 768px) {
  .themes-heading-bg.inview--visible img:nth-child(12) {
    transform: translate(30vw, 35.46667vw) rotate(123.2deg);
  }
}
.themes-heading-inner {
  position: relative;
}

.themes-ttl {
  width: 340px;
  height: 235px;
  margin: 0 auto;
  background: url(../images/themes/title.png) no-repeat;
}

@media not all and (min-width: 768px) {
  .themes-ttl {
    width: 53.33333vw;
    height: 39.6vw;
    background-image: url(../images/themes/title-s.png);
    background-size: contain;
  }
}
.themes-lead {
  margin: 88px 0 0 0;
}

@media not all and (min-width: 768px) {
  .themes-lead {
    margin: 11.73333vw 0 0 0;
  }
}
.themes-lead-ttl {
  text-align: center;
  font-size: 30px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

@media not all and (min-width: 768px) {
  .themes-lead-ttl {
    font-size: 5.33333vw;
  }
}
.themes-lead-main {
  margin: 48px 0 0 0;
}

.themes-lead-main p {
  margin-top: 2em;
  text-align: center;
  font-size: 20px;
  line-height: 2.3;
}

@media not all and (min-width: 768px) {
  .themes-lead-main p {
    font-size: 4vw;
    line-height: 2.2;
  }
}
.themes-lead-main p:first-child {
  margin-top: 0;
}

.themes-main {
  margin-top: 230px;
  padding-bottom: 425px;
}

@media not all and (min-width: 768px) {
  .themes-main {
    margin-top: 30.66667vw;
    padding-bottom: 30.13333vw;
  }
}
.themes-sec {
  position: relative;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media not all and (min-width: 768px) {
  .themes-sec {
    width: 100%;
  }
}
.themes-sec-pencils {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.themes-sec-pencils img {
  position: absolute;
  left: 50%;
  top: -380px;
  width: 21px;
  height: auto;
  margin-left: -10px;
  opacity: 0;
  transform-origin: center bottom;
  transition: opacity 1.5s linear, transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media not all and (min-width: 768px) {
  .themes-sec-pencils img {
    top: -75.2vw;
    width: 4.13333vw;
    margin-left: -2.06667vw;
  }
}
.themes-sec-ttl {
  position: relative;
}

.themes-sec-ttl-en {
  position: relative;
  display: inline-block;
}

@media not all and (min-width: 768px) {
  .themes-sec-ttl-en {
    display: block;
  }
}
.themes-sec-ttl-en img {
  display: block;
}

@media not all and (min-width: 768px) {
  .themes-sec-ttl-en img {
    width: 100%;
    height: auto;
  }
}
.themes-sec-ttl-en .mono {
  opacity: 1;
  transition: opacity 1.2s linear;
}

.themes-sec-ttl-en .full {
  position: absolute;
  left: 0;
  top: 0;
  transition: clip 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.themes-sec-ttl-ja {
  margin-top: 24px;
  font-size: 28px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  text-shadow: 0 0 3px #fff, 1px 1px 3px #fff, -1px -1px 3px #fff;
}

@media not all and (min-width: 768px) {
  .themes-sec-ttl-ja {
    margin-top: 4vw;
    font-size: 5.33333vw;
  }
}
.themes-sec-ttl-ja:before {
  content: "- ";
}

.themes-sec-ttl-ja:after {
  content: " -";
}

.themes-sec-inner {
  position: relative;
  width: 270px;
}

@media not all and (min-width: 768px) {
  .themes-sec-inner {
    width: 53.33333vw;
  }
}
.themes-sec-txt p {
  text-align: center;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.66667;
  white-space: nowrap;
  text-shadow: 0 0 3px #fff, 1px 1px 3px #fff, -1px -1px 3px #fff;
}

@media not all and (min-width: 768px) {
  .themes-sec-txt p {
    font-size: 4vw;
    line-height: 1.66667;
  }
}
.themes-sec-link {
  margin: 48px 0 0 0;
}

@media not all and (min-width: 768px) {
  .themes-sec-link {
    margin: 10.13333vw 0 0 0;
  }
}
.themes-sec-link a {
  display: block;
  width: 100%;
  padding: 16px 0;
  background-color: #262626;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .themes-sec-link a {
    padding: 4vw 0;
    font-size: 3.46667vw;
  }
}
.themes-sec-link a:after {
  position: absolute;
}

.themes-sec-pickup {
  position: absolute;
}

@media not all and (min-width: 768px) {
  .themes-sec-pickup {
    position: relative;
    left: 0 !important;
    top: 0 !important;
  }
}
.themes-sec-pickup a {
  position: relative;
  display: block;
  width: 420px;
  height: 420px;
  background-color: #f4f4f3;
  text-decoration: none;
  color: inherit;
}

@media not all and (min-width: 768px) {
  .themes-sec-pickup a {
    width: 89.33333vw;
    height: 89.33333vw;
    margin-left: auto;
    margin-right: auto;
  }
}
.themes-sec-pickup a:after {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  background: url(../images/themes/ico-link-pickup.png) no-repeat;
  content: "";
}

@media not all and (min-width: 768px) {
  .themes-sec-pickup a:after {
    right: 6.66667vw;
    bottom: 6.66667vw;
    width: 10.66667vw;
    height: 10.66667vw;
    background-image: url(../images/themes/ico-link-pickup-s.png);
    background-size: 100% 100%;
  }
}
.themes-sec-pickup-thumb {
  position: absolute;
}

.themes-sec-pickup-thumb img {
  display: block;
}

@media not all and (min-width: 768px) {
  .themes-sec-pickup-thumb img {
    width: 100%;
    height: auto;
  }
}
.themes-sec-pickup-label {
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 16px;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .themes-sec-pickup-label {
    left: 5.06667vw;
    top: 5.33333vw;
    font-size: 3.46667vw;
  }
}
.themes-sec-pickup-ttl {
  position: absolute;
  right: 24px;
  top: 34px;
  font-size: 24px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  line-height: 1.66667;
  writing-mode: vertical-rl;
}

@media not all and (min-width: 768px) {
  .themes-sec-pickup-ttl {
    right: 6.66667vw;
    top: 7.46667vw;
    font-size: 5.06667vw;
    line-height: 1.68421;
  }
}
.themes-sec.inview--visible .themes-sec-pencils img {
  opacity: 1;
}

@media not all and (min-width: 768px) {
  .themes-sec.inview--visible .themes-sec-ttl-en img {
    width: 100%;
    height: auto;
  }
}
.themes-sec.inview--visible .themes-sec-ttl-en .mono {
  opacity: 0;
}

.themes-sec:nth-child(1) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-129px, 215px) rotate(-99.64deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-23.46667vw, 37.6vw) rotate(-99.64deg);
  }
}
.themes-sec:nth-child(1) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-86px, 218px) rotate(-132.26deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-15.33333vw, 38.13333vw) rotate(-132.26deg);
  }
}
.themes-sec:nth-child(1) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-55px, 268px) rotate(-108.93deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-9.33333vw, 47.73333vw) rotate(-108.93deg);
  }
}
.themes-sec:nth-child(1) .themes-sec-ttl {
  margin-left: 402px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1) .themes-sec-ttl {
    margin-left: 4.8vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1) .themes-sec-ttl-en {
    width: 56vw;
  }
}
.themes-sec:nth-child(1) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 117px, 0px);
}

.themes-sec:nth-child(1) .themes-sec-ttl-ja {
  margin-left: 200px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1) .themes-sec-ttl-ja {
    margin-left: 38.4vw;
  }
}
.themes-sec:nth-child(1) .themes-sec-inner {
  margin-top: 85px;
  margin-left: 636px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1) .themes-sec-inner {
    margin-top: 18.4vw;
    margin-left: 41.33333vw;
  }
}
.themes-sec:nth-child(1).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-129px, 185px) rotate(-104.64deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-23.46667vw, 34.93333vw) rotate(-104.64deg);
  }
}
.themes-sec:nth-child(1).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-86px, 188px) rotate(-127.26deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-15.33333vw, 35.46667vw) rotate(-127.26deg);
  }
}
.themes-sec:nth-child(1).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-55px, 238px) rotate(-116.93deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(1).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-9.33333vw, 45.06667vw) rotate(-116.93deg);
  }
}
.themes-sec:nth-child(1).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 295px, 117px, 0px);
}

.themes-sec:nth-child(2) {
  margin-top: 203px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) {
    margin-top: 35.73333vw;
  }
}
.themes-sec:nth-child(2) .themes-sec-pickup {
  right: 0;
  top: 198px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(2) .themes-sec-pickup-thumb {
  left: -13px;
  top: 134px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-pickup-thumb {
    left: -2.53333vw;
    top: 28.8vw;
    width: 74.26667vw;
  }
}
.themes-sec:nth-child(2) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-312px, 268px) rotate(-126.49deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-16.53333vw, 45.33333vw) rotate(-126.49deg);
  }
}
.themes-sec:nth-child(2) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-248px, 376px) rotate(-122.18deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-6.8vw, 51.33333vw) rotate(-122.18deg);
  }
}
.themes-sec:nth-child(2) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-299px, 345px) rotate(-118.37deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-19.06667vw, 30.8vw) rotate(-118.37deg);
  }
}
.themes-sec:nth-child(2) .themes-sec-ttl {
  margin-left: 200px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-ttl {
    margin-left: 10.93333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-ttl-en {
    width: 83.33333vw;
  }
}
.themes-sec:nth-child(2) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 79px, 0px);
}

.themes-sec:nth-child(2) .themes-sec-ttl-ja {
  margin-left: 56px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-ttl-ja {
    margin-left: 46.4vw;
  }
}
.themes-sec:nth-child(2) .themes-sec-inner {
  margin-top: 210px;
  margin-left: 388px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2) .themes-sec-inner {
    margin-top: 45.33333vw;
    margin-left: 38.66667vw;
  }
}
.themes-sec:nth-child(2).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-312px, 238px) rotate(-131.49deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-16.53333vw, 42.66667vw) rotate(-131.49deg);
  }
}
.themes-sec:nth-child(2).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-248px, 346px) rotate(-117.18deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-6.8vw, 48.66667vw) rotate(-117.18deg);
  }
}
.themes-sec:nth-child(2).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-299px, 315px) rotate(-126.37deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(2).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-19.06667vw, 28.13333vw) rotate(-126.37deg);
  }
}
.themes-sec:nth-child(2).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 483px, 79px, 0px);
}

.themes-sec:nth-child(3) {
  margin-top: 208px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) {
    margin-top: 23.46667vw;
  }
}
.themes-sec:nth-child(3) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-80px, 106px) rotate(109.85deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) .themes-sec-pencils img:nth-child(1) {
    transform: translate(4.53333vw, 14.53333vw) rotate(109.85deg);
  }
}
.themes-sec:nth-child(3) .themes-sec-pencils img:nth-child(2) {
  transform: translate(12px, 51px) rotate(113.54deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) .themes-sec-pencils img:nth-child(2) {
    transform: translate(21.86667vw, 3.86667vw) rotate(113.54deg);
  }
}
.themes-sec:nth-child(3) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-18px, 199px) rotate(103.8deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) .themes-sec-pencils img:nth-child(3) {
    transform: translate(16.4vw, 32.26667vw) rotate(103.8deg);
  }
}
.themes-sec:nth-child(3) .themes-sec-ttl {
  margin-left: 307px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) .themes-sec-ttl {
    margin-left: 10.13333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) .themes-sec-ttl-en {
    width: 35.2vw;
  }
}
.themes-sec:nth-child(3) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 85px, 0px);
}

.themes-sec:nth-child(3) .themes-sec-ttl-ja {
  margin-left: 12px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) .themes-sec-ttl-ja {
    margin-left: 2.13333vw;
  }
}
.themes-sec:nth-child(3) .themes-sec-inner {
  margin-top: 150px;
  margin-left: 387px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3) .themes-sec-inner {
    margin-top: 38.13333vw;
    margin-left: 19.73333vw;
  }
}
.themes-sec:nth-child(3) .themes-sec-txt {
  margin-left: -1.5em;
  margin-right: -1.5em;
}

.themes-sec:nth-child(3).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-80px, 76px) rotate(104.85deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(4.53333vw, 11.86667vw) rotate(104.85deg);
  }
}
.themes-sec:nth-child(3).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(12px, 21px) rotate(118.54deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(21.86667vw, 1.2vw) rotate(118.54deg);
  }
}
.themes-sec:nth-child(3).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-18px, 169px) rotate(95.8deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(3).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(16.4vw, 29.6vw) rotate(95.8deg);
  }
}
.themes-sec:nth-child(3).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 185px, 85px, 0px);
}

.themes-sec:nth-child(4) {
  margin-top: 231px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) {
    margin-top: 43.06667vw;
  }
}
.themes-sec:nth-child(4) .themes-sec-pickup {
  left: 0;
  top: 107px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(4) .themes-sec-pickup-thumb {
  left: 29px;
  top: 117px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-pickup-thumb {
    left: 6.13333vw;
    top: 25.33333vw;
    width: 57.6vw;
  }
}
.themes-sec:nth-child(4) .themes-sec-pencils img:nth-child(1) {
  transform: translate(201px, 195px) rotate(76.36deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-pencils img:nth-child(1) {
    transform: translate(24.66667vw, 34.13333vw) rotate(76.36deg);
  }
}
.themes-sec:nth-child(4) .themes-sec-pencils img:nth-child(2) {
  transform: translate(261px, -38px) rotate(127.97deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-pencils img:nth-child(2) {
    transform: translate(36vw, -10.53333vw) rotate(127.97deg);
  }
}
.themes-sec:nth-child(4) .themes-sec-pencils img:nth-child(3) {
  transform: translate(203px, -13px) rotate(128.32deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-pencils img:nth-child(3) {
    transform: translate(24.8vw, -5.6vw) rotate(128.32deg);
  }
}
.themes-sec:nth-child(4) .themes-sec-ttl {
  margin-left: 489px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-ttl {
    margin-left: 12vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-ttl-en {
    width: 66.26667vw;
  }
}
.themes-sec:nth-child(4) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 78px, 0px);
}

.themes-sec:nth-child(4) .themes-sec-ttl-ja {
  margin-left: 27px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-ttl-ja {
    margin-left: 5.33333vw;
  }
}
.themes-sec:nth-child(4) .themes-sec-inner {
  margin-top: 82px;
  margin-left: 561px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4) .themes-sec-inner {
    margin-top: 19.73333vw;
    margin-left: 23.73333vw;
  }
}
.themes-sec:nth-child(4).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(201px, 165px) rotate(71.36deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(24.66667vw, 31.46667vw) rotate(71.36deg);
  }
}
.themes-sec:nth-child(4).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(261px, -68px) rotate(132.97deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(36vw, -13.2vw) rotate(132.97deg);
  }
}
.themes-sec:nth-child(4).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(203px, -43px) rotate(120.32deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(4).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(24.8vw, -8.26667vw) rotate(120.32deg);
  }
}
.themes-sec:nth-child(4).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 348px, 78px, 0px);
}

.themes-sec:nth-child(5) {
  margin-top: 219px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) {
    margin-top: 22.53333vw;
  }
}
.themes-sec:nth-child(5) .themes-sec-pencils img:nth-child(1) {
  transform: translate(92px, 77px) rotate(-116.15deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-14.66667vw, 11.6vw) rotate(-116.15deg);
  }
}
.themes-sec:nth-child(5) .themes-sec-pencils img:nth-child(2) {
  transform: translate(184px, 211px) rotate(-105.99deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) .themes-sec-pencils img:nth-child(2) {
    transform: translate(2.8vw, 37.2vw) rotate(-105.99deg);
  }
}
.themes-sec:nth-child(5) .themes-sec-pencils img:nth-child(3) {
  transform: translate(130px, 161px) rotate(-105.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-7.73333vw, 27.73333vw) rotate(-105.03deg);
  }
}
.themes-sec:nth-child(5) .themes-sec-ttl {
  margin-left: 725px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) .themes-sec-ttl {
    margin-left: 38vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) .themes-sec-ttl-en {
    width: 54.66667vw;
  }
}
.themes-sec:nth-child(5) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 92px, 0px);
}

.themes-sec:nth-child(5) .themes-sec-ttl-ja {
  margin-left: 162px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) .themes-sec-ttl-ja {
    margin-left: 30.4vw;
  }
}
.themes-sec:nth-child(5) .themes-sec-inner {
  margin-top: 92px;
  margin-left: 744px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5) .themes-sec-inner {
    margin-top: 25.06667vw;
    margin-left: 40.8vw;
  }
}
.themes-sec:nth-child(5).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(92px, 47px) rotate(-121.15deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-14.66667vw, 8.93333vw) rotate(-121.15deg);
  }
}
.themes-sec:nth-child(5).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(184px, 181px) rotate(-100.99deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(2.8vw, 34.53333vw) rotate(-100.99deg);
  }
}
.themes-sec:nth-child(5).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(130px, 131px) rotate(-113.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(5).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-7.73333vw, 25.06667vw) rotate(-113.03deg);
  }
}
.themes-sec:nth-child(5).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 287px, 92px, 0px);
}

.themes-sec:nth-child(6) {
  margin-top: 145px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) {
    margin-top: 29.6vw;
  }
}
.themes-sec:nth-child(6) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-30px, 247px) rotate(108.83deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) .themes-sec-pencils img:nth-child(1) {
    transform: translate(7.73333vw, 44vw) rotate(108.83deg);
  }
}
.themes-sec:nth-child(6) .themes-sec-pencils img:nth-child(2) {
  transform: translate(46px, 176px) rotate(118.2deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) .themes-sec-pencils img:nth-child(2) {
    transform: translate(22vw, 30.66667vw) rotate(118.2deg);
  }
}
.themes-sec:nth-child(6) .themes-sec-pencils img:nth-child(3) {
  transform: translate(79px, 139px) rotate(118.68deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) .themes-sec-pencils img:nth-child(3) {
    transform: translate(28.13333vw, 23.46667vw) rotate(118.68deg);
  }
}
.themes-sec:nth-child(6) .themes-sec-ttl {
  margin-left: 345px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) .themes-sec-ttl {
    margin-left: 11.2vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) .themes-sec-ttl-en {
    width: 58.26667vw;
  }
}
.themes-sec:nth-child(6) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 91px, 0px);
}

.themes-sec:nth-child(6) .themes-sec-ttl-ja {
  margin-left: 16px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) .themes-sec-ttl-ja {
    margin-left: 12.53333vw;
  }
}
.themes-sec:nth-child(6) .themes-sec-inner {
  margin-top: 104px;
  margin-left: 316px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6) .themes-sec-inner {
    margin-top: 29.33333vw;
    margin-left: 15.33333vw;
  }
}
.themes-sec:nth-child(6).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-30px, 217px) rotate(103.83deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(7.73333vw, 41.33333vw) rotate(103.83deg);
  }
}
.themes-sec:nth-child(6).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(46px, 146px) rotate(123.2deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(22vw, 28vw) rotate(123.2deg);
  }
}
.themes-sec:nth-child(6).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(79px, 109px) rotate(110.68deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(6).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(28.13333vw, 20.8vw) rotate(110.68deg);
  }
}
.themes-sec:nth-child(6).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 306px, 91px, 0px);
}

.themes-sec:nth-child(7) {
  margin-top: 307px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) {
    margin-top: 55.6vw;
  }
}
.themes-sec:nth-child(7) .themes-sec-pickup {
  right: 0;
  top: 43px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(7) .themes-sec-pickup-thumb {
  left: -14px;
  top: 133px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-pickup-thumb {
    left: 2.93333vw;
    top: 28.53333vw;
    width: 75.2vw;
  }
}
.themes-sec:nth-child(7) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-265px, 26px) rotate(-62.43deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-19.33333vw, 1.73333vw) rotate(-62.43deg);
  }
}
.themes-sec:nth-child(7) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-256px, 188px) rotate(-68.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-17.86667vw, 32.66667vw) rotate(-68.03deg);
  }
}
.themes-sec:nth-child(7) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-199px, -35px) rotate(-65.56deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-6.93333vw, -9.73333vw) rotate(-65.56deg);
  }
}
.themes-sec:nth-child(7) .themes-sec-ttl {
  margin-left: 325px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-ttl {
    margin-left: 25.6vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-ttl-en {
    width: 68vw;
  }
}
.themes-sec:nth-child(7) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 77px, 0px);
}

.themes-sec:nth-child(7) .themes-sec-ttl-ja {
  margin-left: 244px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-ttl-ja {
    margin-left: 46.66667vw;
  }
}
.themes-sec:nth-child(7) .themes-sec-inner {
  margin-top: 72px;
  margin-left: 372px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7) .themes-sec-inner {
    margin-top: 13.86667vw;
    margin-left: 36.26667vw;
  }
}
.themes-sec:nth-child(7).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-265px, -4px) rotate(-67.43deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-19.33333vw, -0.93333vw) rotate(-67.43deg);
  }
}
.themes-sec:nth-child(7).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-256px, 158px) rotate(-63.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-17.86667vw, 30vw) rotate(-63.03deg);
  }
}
.themes-sec:nth-child(7).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-199px, -65px) rotate(-73.56deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(7).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-6.93333vw, -12.4vw) rotate(-73.56deg);
  }
}
.themes-sec:nth-child(7).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 357px, 77px, 0px);
}

.themes-sec:nth-child(8) {
  margin-top: 285px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) {
    margin-top: 30.66667vw;
  }
}
.themes-sec:nth-child(8) .themes-sec-pencils img:nth-child(1) {
  transform: translate(25px, 163px) rotate(-103.44deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) .themes-sec-pencils img:nth-child(1) {
    transform: translate(1.2vw, 27.86667vw) rotate(-103.44deg);
  }
}
.themes-sec:nth-child(8) .themes-sec-pencils img:nth-child(2) {
  transform: translate(72px, 224px) rotate(-106.38deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) .themes-sec-pencils img:nth-child(2) {
    transform: translate(10.26667vw, 39.6vw) rotate(-106.38deg);
  }
}
.themes-sec:nth-child(8) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-89px, 140px) rotate(-108.12deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-20.53333vw, 23.6vw) rotate(-108.12deg);
  }
}
.themes-sec:nth-child(8) .themes-sec-ttl {
  margin-left: 563px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) .themes-sec-ttl {
    margin-left: 36vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) .themes-sec-ttl-en {
    width: 41.86667vw;
  }
}
.themes-sec:nth-child(8) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 86px, 0px);
}

.themes-sec:nth-child(8) .themes-sec-ttl-ja {
  margin-left: 126px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) .themes-sec-ttl-ja {
    margin-left: 24.53333vw;
  }
}
.themes-sec:nth-child(8) .themes-sec-inner {
  margin-top: 180px;
  margin-left: 494px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8) .themes-sec-inner {
    margin-top: 40.26667vw;
    margin-left: 16.53333vw;
  }
}
.themes-sec:nth-child(8) .themes-sec-txt {
  margin-left: -0.5em;
  margin-right: -0.5em;
}

.themes-sec:nth-child(8).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(25px, 133px) rotate(-108.44deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(1.2vw, 25.2vw) rotate(-108.44deg);
  }
}
.themes-sec:nth-child(8).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(72px, 194px) rotate(-101.38deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(10.26667vw, 36.93333vw) rotate(-101.38deg);
  }
}
.themes-sec:nth-child(8).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-89px, 110px) rotate(-116.12deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(8).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-20.53333vw, 20.93333vw) rotate(-116.12deg);
  }
}
.themes-sec:nth-child(8).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 220px, 86px, 0px);
}

.themes-sec:nth-child(9) {
  margin-top: 351px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) {
    margin-top: 49.6vw;
  }
}
.themes-sec:nth-child(9) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-96px, 215px) rotate(80.78deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) .themes-sec-pencils img:nth-child(1) {
    transform: translate(12.26667vw, 37.6vw) rotate(80.78deg);
  }
}
.themes-sec:nth-child(9) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-27px, 36px) rotate(43.17deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) .themes-sec-pencils img:nth-child(2) {
    transform: translate(24.93333vw, 3.73333vw) rotate(43.17deg);
  }
}
.themes-sec:nth-child(9) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-117px, -21px) rotate(74.91deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) .themes-sec-pencils img:nth-child(3) {
    transform: translate(7.73333vw, -6.93333vw) rotate(74.91deg);
  }
}
.themes-sec:nth-child(9) .themes-sec-ttl {
  margin-left: 251px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) .themes-sec-ttl {
    margin-left: 10.4vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) .themes-sec-ttl-en {
    width: 71.2vw;
  }
}
.themes-sec:nth-child(9) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 106px, 0px);
}

.themes-sec:nth-child(9) .themes-sec-ttl-ja {
  margin-left: 25px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) .themes-sec-ttl-ja {
    margin-left: 4.26667vw;
  }
}
.themes-sec:nth-child(9) .themes-sec-inner {
  margin-top: 100px;
  margin-left: 270px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9) .themes-sec-inner {
    margin-top: 31.2vw;
    margin-left: 12.53333vw;
  }
}
.themes-sec:nth-child(9) .themes-sec-txt {
  margin-left: -1.5em;
  margin-right: -1.5em;
}

.themes-sec:nth-child(9).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-96px, 185px) rotate(75.78deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(12.26667vw, 34.93333vw) rotate(75.78deg);
  }
}
.themes-sec:nth-child(9).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-27px, 6px) rotate(48.17deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(24.93333vw, 1.06667vw) rotate(48.17deg);
  }
}
.themes-sec:nth-child(9).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-117px, -51px) rotate(66.91deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(9).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(7.73333vw, -9.6vw) rotate(66.91deg);
  }
}
.themes-sec:nth-child(9).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 374px, 106px, 0px);
}

.themes-sec:nth-child(10) {
  margin-top: 282px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) {
    margin-top: 36.93333vw;
  }
}
.themes-sec:nth-child(10) .themes-sec-pickup {
  left: 0;
  top: 191px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(10) .themes-sec-pickup-thumb {
  left: -1px;
  top: 150px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-pickup-thumb {
    left: -0.4vw;
    top: 32.26667vw;
    width: 57.86667vw;
  }
}
.themes-sec:nth-child(10) .themes-sec-pencils img:nth-child(1) {
  transform: translate(296px, 47px) rotate(132.66deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-pencils img:nth-child(1) {
    transform: translate(31.2vw, 5.73333vw) rotate(132.66deg);
  }
}
.themes-sec:nth-child(10) .themes-sec-pencils img:nth-child(2) {
  transform: translate(280px, 205px) rotate(123.15deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-pencils img:nth-child(2) {
    transform: translate(28.26667vw, 36vw) rotate(123.15deg);
  }
}
.themes-sec:nth-child(10) .themes-sec-pencils img:nth-child(3) {
  transform: translate(237px, 112px) rotate(119.84deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-pencils img:nth-child(3) {
    transform: translate(19.86667vw, 18.26667vw) rotate(119.84deg);
  }
}
.themes-sec:nth-child(10) .themes-sec-ttl {
  margin-left: 530px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-ttl {
    margin-left: 8.26667vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-ttl-en {
    width: 61.2vw;
  }
}
.themes-sec:nth-child(10) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 198px, 0px);
}

.themes-sec:nth-child(10) .themes-sec-ttl-ja {
  margin-left: 122px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-ttl-ja {
    margin-left: 24.8vw;
  }
}
.themes-sec:nth-child(10) .themes-sec-inner {
  margin-top: 108px;
  margin-left: 633px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10) .themes-sec-inner {
    margin-top: 39.73333vw;
    margin-left: 14.13333vw;
  }
}
.themes-sec:nth-child(10).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(296px, 17px) rotate(127.66deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(31.2vw, 3.06667vw) rotate(127.66deg);
  }
}
.themes-sec:nth-child(10).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(280px, 175px) rotate(128.15deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(28.26667vw, 33.33333vw) rotate(128.15deg);
  }
}
.themes-sec:nth-child(10).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(237px, 82px) rotate(111.84deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(10).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(19.86667vw, 15.6vw) rotate(111.84deg);
  }
}
.themes-sec:nth-child(10).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 321px, 198px, 0px);
}

.themes-sec:nth-child(11) {
  margin-top: 312px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) {
    margin-top: 40.8vw;
  }
}
.themes-sec:nth-child(11) .themes-sec-pickup {
  right: 0;
  top: 110px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(11) .themes-sec-pickup-thumb {
  left: 25px;
  top: 77px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-pickup-thumb {
    left: 5.33333vw;
    top: 16.4vw;
    width: 49.73333vw;
  }
}
.themes-sec:nth-child(11) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-219px, 82px) rotate(-70.69deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-22.4vw, 12.26667vw) rotate(-70.69deg);
  }
}
.themes-sec:nth-child(11) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-178px, 148px) rotate(-112.39deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-14.66667vw, 25.06667vw) rotate(-112.39deg);
  }
}
.themes-sec:nth-child(11) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-117px, 222px) rotate(-93.48deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-3.2vw, 39.06667vw) rotate(-93.48deg);
  }
}
.themes-sec:nth-child(11) .themes-sec-ttl {
  margin-left: 418px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-ttl {
    margin-left: 31.46667vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-ttl-en {
    width: 54.93333vw;
  }
}
.themes-sec:nth-child(11) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 85px, 0px);
}

.themes-sec:nth-child(11) .themes-sec-ttl-ja {
  margin-left: 36px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-ttl-ja {
    margin-left: 21.33333vw;
  }
}
.themes-sec:nth-child(11) .themes-sec-inner {
  margin-top: 172px;
  margin-left: 424px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11) .themes-sec-inner {
    margin-top: 24vw;
    margin-left: 15.33333vw;
  }
}
.themes-sec:nth-child(11).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-219px, 52px) rotate(-75.69deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-22.4vw, 9.6vw) rotate(-75.69deg);
  }
}
.themes-sec:nth-child(11).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-178px, 118px) rotate(-107.39deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-14.66667vw, 22.4vw) rotate(-107.39deg);
  }
}
.themes-sec:nth-child(11).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-117px, 192px) rotate(-101.48deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(11).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-3.2vw, 36.4vw) rotate(-101.48deg);
  }
}
.themes-sec:nth-child(11).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 290px, 85px, 0px);
}

.themes-sec:nth-child(12) {
  margin-top: 283px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) {
    margin-top: 24.93333vw;
  }
}
.themes-sec:nth-child(12) .themes-sec-pickup {
  left: 0;
  top: 151px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(12) .themes-sec-pickup-thumb {
  left: 31px;
  top: 89px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-pickup-thumb {
    left: 6.66667vw;
    top: 19.2vw;
    width: 57.73333vw;
  }
}
.themes-sec:nth-child(12) .themes-sec-pencils img:nth-child(1) {
  transform: translate(156px, 165px) rotate(122.4deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-pencils img:nth-child(1) {
    transform: translate(12.4vw, 28.4vw) rotate(122.4deg);
  }
}
.themes-sec:nth-child(12) .themes-sec-pencils img:nth-child(2) {
  transform: translate(278px, 148px) rotate(122.55deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-pencils img:nth-child(2) {
    transform: translate(35.73333vw, 25.06667vw) rotate(122.55deg);
  }
}
.themes-sec:nth-child(12) .themes-sec-pencils img:nth-child(3) {
  transform: translate(188px, 235px) rotate(130.47deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-pencils img:nth-child(3) {
    transform: translate(18.53333vw, 41.73333vw) rotate(130.47deg);
  }
}
.themes-sec:nth-child(12) .themes-sec-ttl {
  margin-left: 512px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-ttl {
    margin-left: 13.06667vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-ttl-en {
    width: 65.06667vw;
  }
}
.themes-sec:nth-child(12) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 89px, 0px);
}

.themes-sec:nth-child(12) .themes-sec-ttl-ja {
  margin-left: 90px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-ttl-ja {
    margin-left: 17.06667vw;
  }
}
.themes-sec:nth-child(12) .themes-sec-inner {
  margin-top: 94px;
  margin-left: 546px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12) .themes-sec-inner {
    margin-top: 32.26667vw;
    margin-left: 30.4vw;
  }
}
.themes-sec:nth-child(12).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(156px, 135px) rotate(117.4deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(12.4vw, 25.73333vw) rotate(117.4deg);
  }
}
.themes-sec:nth-child(12).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(278px, 118px) rotate(127.55deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(35.73333vw, 22.4vw) rotate(127.55deg);
  }
}
.themes-sec:nth-child(12).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(188px, 205px) rotate(122.47deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(12).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(18.53333vw, 39.06667vw) rotate(122.47deg);
  }
}
.themes-sec:nth-child(12).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 342px, 89px, 0px);
}

.themes-sec:nth-child(13) {
  margin-top: 384px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) {
    margin-top: 22.93333vw;
  }
}
.themes-sec:nth-child(13) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-115px, 148px) rotate(-128.63deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-19.33333vw, 25.06667vw) rotate(-128.63deg);
  }
}
.themes-sec:nth-child(13) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-117px, 80px) rotate(-129.31deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-19.73333vw, 12.26667vw) rotate(-129.31deg);
  }
}
.themes-sec:nth-child(13) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-78px, 161px) rotate(-130.44deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-12.26667vw, 27.46667vw) rotate(-130.44deg);
  }
}
.themes-sec:nth-child(13) .themes-sec-ttl {
  margin-left: 542px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) .themes-sec-ttl {
    margin-left: 38.13333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) .themes-sec-ttl-en {
    width: 52.66667vw;
  }
}
.themes-sec:nth-child(13) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 91px, 0px);
}

.themes-sec:nth-child(13) .themes-sec-ttl-ja {
  margin-left: 166px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) .themes-sec-ttl-ja {
    margin-left: 31.73333vw;
  }
}
.themes-sec:nth-child(13) .themes-sec-inner {
  margin-top: 80px;
  margin-left: 530px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13) .themes-sec-inner {
    margin-top: 28.8vw;
    margin-left: 30.4vw;
  }
}
.themes-sec:nth-child(13) .themes-sec-txt {
  margin-left: -3.5em;
  margin-right: -3.5em;
}

.themes-sec:nth-child(13).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-115px, 118px) rotate(-133.63deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-19.33333vw, 22.4vw) rotate(-133.63deg);
  }
}
.themes-sec:nth-child(13).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-117px, 50px) rotate(-124.31deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-19.73333vw, 9.6vw) rotate(-124.31deg);
  }
}
.themes-sec:nth-child(13).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-78px, 131px) rotate(-138.44deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(13).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-12.26667vw, 24.8vw) rotate(-138.44deg);
  }
}
.themes-sec:nth-child(13).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 278px, 91px, 0px);
}

.themes-sec:nth-child(14) {
  margin-top: 374px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) {
    margin-top: 38.13333vw;
  }
}
.themes-sec:nth-child(14) .themes-sec-pencils img:nth-child(1) {
  transform: translate(101px, -42px) rotate(-99.5deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-20.53333vw, -11.06667vw) rotate(-99.5deg);
  }
}
.themes-sec:nth-child(14) .themes-sec-pencils img:nth-child(2) {
  transform: translate(195px, 269px) rotate(-86.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-2.53333vw, 48.13333vw) rotate(-86.03deg);
  }
}
.themes-sec:nth-child(14) .themes-sec-pencils img:nth-child(3) {
  transform: translate(144px, 215px) rotate(-61.17deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-12.13333vw, 37.86667vw) rotate(-61.17deg);
  }
}
.themes-sec:nth-child(14) .themes-sec-ttl {
  margin-left: 675px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) .themes-sec-ttl {
    margin-left: 21.33333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) .themes-sec-ttl-en {
    width: 66.53333vw;
  }
}
.themes-sec:nth-child(14) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 115px, 0px);
}

.themes-sec:nth-child(14) .themes-sec-ttl-ja {
  margin-left: 180px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) .themes-sec-ttl-ja {
    margin-left: 34.66667vw;
  }
}
.themes-sec:nth-child(14) .themes-sec-inner {
  margin-top: 155px;
  margin-left: 780px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14) .themes-sec-inner {
    margin-top: 33.33333vw;
    margin-left: 37.06667vw;
  }
}
.themes-sec:nth-child(14).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(101px, -72px) rotate(-104.5deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-20.53333vw, -13.73333vw) rotate(-104.5deg);
  }
}
.themes-sec:nth-child(14).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(195px, 239px) rotate(-81.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-2.53333vw, 45.46667vw) rotate(-81.03deg);
  }
}
.themes-sec:nth-child(14).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(144px, 185px) rotate(-69.17deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(14).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-12.13333vw, 35.2vw) rotate(-69.17deg);
  }
}
.themes-sec:nth-child(14).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 349px, 115px, 0px);
}

.themes-sec:nth-child(15) {
  margin-top: 350px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) {
    margin-top: 31.46667vw;
  }
}
.themes-sec:nth-child(15) .themes-sec-pickup {
  right: 0;
  top: 95px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(15) .themes-sec-pickup-thumb {
  left: -6px;
  top: 190px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-pickup-thumb {
    left: -0.93333vw;
    top: 41.33333vw;
    width: 68.93333vw;
  }
}
.themes-sec:nth-child(15) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-241px, 230px) rotate(81.14deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-pencils img:nth-child(1) {
    transform: translate(7.33333vw, 40.66667vw) rotate(81.14deg);
  }
}
.themes-sec:nth-child(15) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-143px, 78px) rotate(78.28deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-pencils img:nth-child(2) {
    transform: translate(26.13333vw, 11.46667vw) rotate(78.28deg);
  }
}
.themes-sec:nth-child(15) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-154px, 284px) rotate(79.04deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-pencils img:nth-child(3) {
    transform: translate(24.13333vw, 50.93333vw) rotate(79.04deg);
  }
}
.themes-sec:nth-child(15) .themes-sec-ttl {
  margin-left: 148px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-ttl {
    margin-left: 13.33333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-ttl-en {
    width: 53.86667vw;
  }
}
.themes-sec:nth-child(15) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 83px, 0px);
}

.themes-sec:nth-child(15) .themes-sec-ttl-ja {
  margin-left: 185px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-ttl-ja {
    margin-left: 35.73333vw;
  }
}
.themes-sec:nth-child(15) .themes-sec-inner {
  margin-top: 102px;
  margin-left: 140px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15) .themes-sec-inner {
    margin-top: 34.66667vw;
    margin-left: 14.4vw;
  }
}
.themes-sec:nth-child(15).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-241px, 200px) rotate(76.14deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(7.33333vw, 38vw) rotate(76.14deg);
  }
}
.themes-sec:nth-child(15).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-143px, 48px) rotate(83.28deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(26.13333vw, 8.8vw) rotate(83.28deg);
  }
}
.themes-sec:nth-child(15).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-154px, 254px) rotate(71.04deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(15).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(24.13333vw, 48.26667vw) rotate(71.04deg);
  }
}
.themes-sec:nth-child(15).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 283px, 83px, 0px);
}

.themes-sec:nth-child(16) {
  margin-top: 283px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) {
    margin-top: 36.4vw;
  }
}
.themes-sec:nth-child(16) .themes-sec-pickup {
  left: 0;
  top: 67px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(16) .themes-sec-pickup-thumb {
  left: 12px;
  top: 55px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-pickup-thumb {
    left: 2.53333vw;
    top: 11.46667vw;
    width: 63.33333vw;
  }
}
.themes-sec:nth-child(16) .themes-sec-pencils img:nth-child(1) {
  transform: translate(235px, 78px) rotate(107.02deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-pencils img:nth-child(1) {
    transform: translate(29.06667vw, 11.73333vw) rotate(107.02deg);
  }
}
.themes-sec:nth-child(16) .themes-sec-pencils img:nth-child(2) {
  transform: translate(180px, 173px) rotate(119.77deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-pencils img:nth-child(2) {
    transform: translate(18.53333vw, 29.73333vw) rotate(119.77deg);
  }
}
.themes-sec:nth-child(16) .themes-sec-pencils img:nth-child(3) {
  transform: translate(205px, 110px) rotate(124.19deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-pencils img:nth-child(3) {
    transform: translate(23.06667vw, 17.73333vw) rotate(124.19deg);
  }
}
.themes-sec:nth-child(16) .themes-sec-ttl {
  margin-left: 504px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-ttl {
    margin-left: 12.8vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-ttl-en {
    width: 52.93333vw;
  }
}
.themes-sec:nth-child(16) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 85px, 0px);
}

.themes-sec:nth-child(16) .themes-sec-ttl-ja {
  margin-left: 22px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-ttl-ja {
    margin-left: 4.26667vw;
  }
}
.themes-sec:nth-child(16) .themes-sec-inner {
  margin-top: 84px;
  margin-left: 526px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16) .themes-sec-inner {
    margin-top: 20vw;
    margin-left: 16.53333vw;
  }
}
.themes-sec:nth-child(16).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(235px, 48px) rotate(102.02deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(29.06667vw, 9.06667vw) rotate(102.02deg);
  }
}
.themes-sec:nth-child(16).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(180px, 143px) rotate(124.77deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(18.53333vw, 27.06667vw) rotate(124.77deg);
  }
}
.themes-sec:nth-child(16).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(205px, 80px) rotate(116.19deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(16).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(23.06667vw, 15.06667vw) rotate(116.19deg);
  }
}
.themes-sec:nth-child(16).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 278px, 85px, 0px);
}

.themes-sec:nth-child(17) {
  margin-top: 349px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) {
    margin-top: 33.2vw;
  }
}
.themes-sec:nth-child(17) .themes-sec-pickup {
  right: 0;
  top: 113px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(17) .themes-sec-pickup-thumb {
  left: 16px;
  top: 116px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-pickup-thumb {
    left: 3.6vw;
    top: 24.8vw;
    width: 62vw;
  }
}
.themes-sec:nth-child(17) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-299px, 177px) rotate(-104.29deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-14.4vw, 30.8vw) rotate(-104.29deg);
  }
}
.themes-sec:nth-child(17) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-240px, 198px) rotate(-123.59deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-2.93333vw, 34.53333vw) rotate(-123.59deg);
  }
}
.themes-sec:nth-child(17) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-323px, -8px) rotate(-65.09deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-18.93333vw, -4.66667vw) rotate(-65.09deg);
  }
}
.themes-sec:nth-child(17) .themes-sec-ttl {
  margin-left: 180px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-ttl {
    margin-left: 9.33333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-ttl-en {
    width: 84vw;
  }
}
.themes-sec:nth-child(17) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 91px, 0px);
}

.themes-sec:nth-child(17) .themes-sec-ttl-ja {
  margin-left: 330px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-ttl-ja {
    margin-left: 63.2vw;
  }
}
.themes-sec:nth-child(17) .themes-sec-inner {
  margin-top: 84px;
  margin-left: 354px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17) .themes-sec-inner {
    margin-top: 26.4vw;
    margin-left: 35.73333vw;
  }
}
.themes-sec:nth-child(17) .themes-sec-txt {
  margin-left: -1em;
  margin-right: -1em;
}

.themes-sec:nth-child(17).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-299px, 147px) rotate(-109.29deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-14.4vw, 28.13333vw) rotate(-109.29deg);
  }
}
.themes-sec:nth-child(17).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-240px, 168px) rotate(-118.59deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-2.93333vw, 31.86667vw) rotate(-118.59deg);
  }
}
.themes-sec:nth-child(17).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-323px, -38px) rotate(-73.09deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(17).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-18.93333vw, -7.33333vw) rotate(-73.09deg);
  }
}
.themes-sec:nth-child(17).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 441px, 91px, 0px);
}

.themes-sec:nth-child(18) {
  margin-top: 294px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) {
    margin-top: 45.2vw;
  }
}
.themes-sec:nth-child(18) .themes-sec-pencils img:nth-child(1) {
  transform: translate(46px, 164px) rotate(121.29deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) .themes-sec-pencils img:nth-child(1) {
    transform: translate(4.8vw, 28.13333vw) rotate(121.29deg);
  }
}
.themes-sec:nth-child(18) .themes-sec-pencils img:nth-child(2) {
  transform: translate(72px, 268px) rotate(95.01deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) .themes-sec-pencils img:nth-child(2) {
    transform: translate(9.73333vw, 47.86667vw) rotate(95.01deg);
  }
}
.themes-sec:nth-child(18) .themes-sec-pencils img:nth-child(3) {
  transform: translate(186px, 100px) rotate(119.26deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) .themes-sec-pencils img:nth-child(3) {
    transform: translate(31.6vw, 16vw) rotate(119.26deg);
  }
}
.themes-sec:nth-child(18) .themes-sec-ttl {
  margin-left: 442px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) .themes-sec-ttl {
    margin-left: 9.6vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) .themes-sec-ttl-en {
    width: 63.46667vw;
  }
}
.themes-sec:nth-child(18) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 106px, 0px);
}

.themes-sec:nth-child(18) .themes-sec-ttl-ja {
  margin-left: 20px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) .themes-sec-ttl-ja {
    margin-left: 5.6vw;
  }
}
.themes-sec:nth-child(18) .themes-sec-inner {
  margin-top: 130px;
  margin-left: 440px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18) .themes-sec-inner {
    margin-top: 25.86667vw;
    margin-left: 13.6vw;
  }
}
.themes-sec:nth-child(18) .themes-sec-txt {
  margin-left: -2em;
  margin-right: -2em;
}

.themes-sec:nth-child(18).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(46px, 134px) rotate(116.29deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(4.8vw, 25.46667vw) rotate(116.29deg);
  }
}
.themes-sec:nth-child(18).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(72px, 238px) rotate(100.01deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(9.73333vw, 45.2vw) rotate(100.01deg);
  }
}
.themes-sec:nth-child(18).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(186px, 70px) rotate(111.26deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(18).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(31.6vw, 13.33333vw) rotate(111.26deg);
  }
}
.themes-sec:nth-child(18).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 333px, 106px, 0px);
}

.themes-sec:nth-child(19) {
  margin-top: 324px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) {
    margin-top: 40.66667vw;
  }
}
.themes-sec:nth-child(19) .themes-sec-pickup {
  right: 0;
  top: 60px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(19) .themes-sec-pickup-thumb {
  left: 0px;
  top: 126px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-pickup-thumb {
    left: 0vw;
    top: 27.06667vw;
    width: 84.26667vw;
  }
}
.themes-sec:nth-child(19) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-221px, 64px) rotate(-105.76deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-11.33333vw, 9.06667vw) rotate(-105.76deg);
  }
}
.themes-sec:nth-child(19) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-216px, -4px) rotate(-124.77deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-10.53333vw, -3.86667vw) rotate(-124.77deg);
  }
}
.themes-sec:nth-child(19) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-175px, 225px) rotate(-80.3deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-2.66667vw, 39.73333vw) rotate(-80.3deg);
  }
}
.themes-sec:nth-child(19) .themes-sec-ttl {
  margin-left: 510px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-ttl {
    margin-left: 47.73333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-ttl-en {
    width: 39.33333vw;
  }
}
.themes-sec:nth-child(19) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 93px, 0px);
}

.themes-sec:nth-child(19) .themes-sec-ttl-ja {
  margin-left: 102px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-ttl-ja {
    margin-left: 18.93333vw;
  }
}
.themes-sec:nth-child(19) .themes-sec-inner {
  margin-top: 92px;
  margin-left: 285px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19) .themes-sec-inner {
    margin-top: 17.6vw;
    margin-left: 15.73333vw;
  }
}
.themes-sec:nth-child(19) .themes-sec-txt {
  margin-left: -2em;
  margin-right: -2em;
}

.themes-sec:nth-child(19).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-221px, 34px) rotate(-110.76deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-11.33333vw, 6.4vw) rotate(-110.76deg);
  }
}
.themes-sec:nth-child(19).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-216px, -34px) rotate(-119.77deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-10.53333vw, -6.53333vw) rotate(-119.77deg);
  }
}
.themes-sec:nth-child(19).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-175px, 195px) rotate(-88.3deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(19).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-2.66667vw, 37.06667vw) rotate(-88.3deg);
  }
}
.themes-sec:nth-child(19).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 207px, 93px, 0px);
}

.themes-sec:nth-child(20) {
  margin-top: 309px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) {
    margin-top: 30.8vw;
  }
}
.themes-sec:nth-child(20) .themes-sec-pencils img:nth-child(1) {
  transform: translate(226px, 121px) rotate(58.51deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) .themes-sec-pencils img:nth-child(1) {
    transform: translate(24.53333vw, 20vw) rotate(58.51deg);
  }
}
.themes-sec:nth-child(20) .themes-sec-pencils img:nth-child(2) {
  transform: translate(198px, 72px) rotate(35.41deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) .themes-sec-pencils img:nth-child(2) {
    transform: translate(18.93333vw, 10.66667vw) rotate(35.41deg);
  }
}
.themes-sec:nth-child(20) .themes-sec-pencils img:nth-child(3) {
  transform: translate(198px, 167px) rotate(110.8deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) .themes-sec-pencils img:nth-child(3) {
    transform: translate(18.93333vw, 28.8vw) rotate(110.8deg);
  }
}
.themes-sec:nth-child(20) .themes-sec-ttl {
  margin-left: 402px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) .themes-sec-ttl {
    margin-left: 10.93333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) .themes-sec-ttl-en {
    width: 47.73333vw;
  }
}
.themes-sec:nth-child(20) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 83px, 0px);
}

.themes-sec:nth-child(20) .themes-sec-ttl-ja {
  margin-left: 34px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) .themes-sec-ttl-ja {
    margin-left: 6.4vw;
  }
}
.themes-sec:nth-child(20) .themes-sec-inner {
  margin-top: 48px;
  margin-left: 545px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20) .themes-sec-inner {
    margin-top: 18.66667vw;
    margin-left: 17.06667vw;
  }
}
.themes-sec:nth-child(20).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(226px, 91px) rotate(53.51deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(24.53333vw, 17.33333vw) rotate(53.51deg);
  }
}
.themes-sec:nth-child(20).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(198px, 42px) rotate(40.41deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(18.93333vw, 8vw) rotate(40.41deg);
  }
}
.themes-sec:nth-child(20).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(198px, 137px) rotate(102.8deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(20).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(18.93333vw, 26.13333vw) rotate(102.8deg);
  }
}
.themes-sec:nth-child(20).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 251px, 83px, 0px);
}

.themes-sec:nth-child(21) {
  margin-top: 196px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) {
    margin-top: 29.86667vw;
  }
}
.themes-sec:nth-child(21) .themes-sec-pencils img:nth-child(1) {
  transform: translate(-52px, 259px) rotate(-104.59deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) .themes-sec-pencils img:nth-child(1) {
    transform: translate(23.2vw, 46.53333vw) rotate(-104.59deg);
  }
}
.themes-sec:nth-child(21) .themes-sec-pencils img:nth-child(2) {
  transform: translate(-159px, 209px) rotate(-121.36deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) .themes-sec-pencils img:nth-child(2) {
    transform: translate(2.8vw, 36.93333vw) rotate(-121.36deg);
  }
}
.themes-sec:nth-child(21) .themes-sec-pencils img:nth-child(3) {
  transform: translate(-218px, 178px) rotate(-100.11deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-8.66667vw, 31.06667vw) rotate(-100.11deg);
  }
}
.themes-sec:nth-child(21) .themes-sec-ttl {
  margin-left: 256px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) .themes-sec-ttl {
    margin-left: 20.53333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) .themes-sec-ttl-en {
    width: 69.2vw;
  }
}
.themes-sec:nth-child(21) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 84px, 0px);
}

.themes-sec:nth-child(21) .themes-sec-ttl-ja {
  margin-left: 166px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) .themes-sec-ttl-ja {
    margin-left: 30.4vw;
  }
}
.themes-sec:nth-child(21) .themes-sec-inner {
  margin-top: 210px;
  margin-left: 364px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21) .themes-sec-inner {
    margin-top: 41.6vw;
    margin-left: 34vw;
  }
}
.themes-sec:nth-child(21) .themes-sec-txt {
  margin-left: -2.5em;
  margin-right: -2.5em;
}

.themes-sec:nth-child(21).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(-52px, 229px) rotate(-109.59deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(23.2vw, 43.86667vw) rotate(-109.59deg);
  }
}
.themes-sec:nth-child(21).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(-159px, 179px) rotate(-116.36deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(2.8vw, 34.26667vw) rotate(-116.36deg);
  }
}
.themes-sec:nth-child(21).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(-218px, 148px) rotate(-108.11deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(21).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-8.66667vw, 28.4vw) rotate(-108.11deg);
  }
}
.themes-sec:nth-child(21).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 363px, 84px, 0px);
}

.themes-sec:nth-child(22) {
  margin-top: 250px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) {
    margin-top: 29.06667vw;
  }
}
.themes-sec:nth-child(22) .themes-sec-pencils img:nth-child(1) {
  transform: translate(242px, 134px) rotate(123.79deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) .themes-sec-pencils img:nth-child(1) {
    transform: translate(30.4vw, 22.4vw) rotate(123.79deg);
  }
}
.themes-sec:nth-child(22) .themes-sec-pencils img:nth-child(2) {
  transform: translate(179px, 291px) rotate(103.38deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) .themes-sec-pencils img:nth-child(2) {
    transform: translate(18.53333vw, 52.26667vw) rotate(103.38deg);
  }
}
.themes-sec:nth-child(22) .themes-sec-pencils img:nth-child(3) {
  transform: translate(187px, 177px) rotate(132.04deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) .themes-sec-pencils img:nth-child(3) {
    transform: translate(20vw, 30.8vw) rotate(132.04deg);
  }
}
.themes-sec:nth-child(22) .themes-sec-ttl {
  margin-left: 494px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) .themes-sec-ttl {
    margin-left: 10.93333vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) .themes-sec-ttl-en {
    width: 67.06667vw;
  }
}
.themes-sec:nth-child(22) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 111px, 0px);
}

.themes-sec:nth-child(22) .themes-sec-ttl-ja {
  margin-left: 34px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) .themes-sec-ttl-ja {
    margin-left: 6.66667vw;
  }
}
.themes-sec:nth-child(22) .themes-sec-inner {
  margin-top: 118px;
  margin-left: 488px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22) .themes-sec-inner {
    margin-top: 26.4vw;
    margin-left: 14.13333vw;
  }
}
.themes-sec:nth-child(22) .themes-sec-txt {
  margin-left: -0.5em;
  margin-right: -0.5em;
}

.themes-sec:nth-child(22).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(242px, 104px) rotate(118.79deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(30.4vw, 19.73333vw) rotate(118.79deg);
  }
}
.themes-sec:nth-child(22).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(179px, 261px) rotate(108.38deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(18.53333vw, 49.6vw) rotate(108.38deg);
  }
}
.themes-sec:nth-child(22).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(187px, 147px) rotate(124.04deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(22).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(20vw, 28.13333vw) rotate(124.04deg);
  }
}
.themes-sec:nth-child(22).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 352px, 111px, 0px);
}

.themes-sec:nth-child(23) {
  margin-top: 262px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) {
    margin-top: 46.13333vw;
  }
}
.themes-sec:nth-child(23) .themes-sec-pickup {
  left: 0;
  top: 107px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-pickup {
    margin-top: 16vw;
  }
}
.themes-sec:nth-child(23) .themes-sec-pickup-thumb {
  left: 8px;
  top: 109px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-pickup-thumb {
    left: 1.73333vw;
    top: 23.46667vw;
    width: 66.53333vw;
  }
}
.themes-sec:nth-child(23) .themes-sec-pencils img:nth-child(1) {
  transform: translate(159px, 230px) rotate(-55.58deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-12.93333vw, 40.8vw) rotate(-55.58deg);
  }
}
.themes-sec:nth-child(23) .themes-sec-pencils img:nth-child(2) {
  transform: translate(178px, -28px) rotate(-103.28deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-9.33333vw, -8.4vw) rotate(-103.28deg);
  }
}
.themes-sec:nth-child(23) .themes-sec-pencils img:nth-child(3) {
  transform: translate(95px, 293px) rotate(-38.87deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-25.2vw, 52.8vw) rotate(-38.87deg);
  }
}
.themes-sec:nth-child(23) .themes-sec-ttl {
  margin-left: 690px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-ttl {
    margin-left: 20.66667vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-ttl-en {
    width: 71.2vw;
  }
}
.themes-sec:nth-child(23) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 106px, 0px);
}

.themes-sec:nth-child(23) .themes-sec-ttl-ja {
  margin-left: 244px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-ttl-ja {
    margin-left: 47.33333vw;
  }
}
.themes-sec:nth-child(23) .themes-sec-inner {
  margin-top: 112px;
  margin-left: 784px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23) .themes-sec-inner {
    margin-top: 28.66667vw;
    margin-left: 36.8vw;
  }
}
.themes-sec:nth-child(23) .themes-sec-txt {
  margin-left: -0.5em;
  margin-right: -0.5em;
}

.themes-sec:nth-child(23).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(159px, 200px) rotate(-60.58deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-12.93333vw, 38.13333vw) rotate(-60.58deg);
  }
}
.themes-sec:nth-child(23).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(178px, -58px) rotate(-98.28deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-9.33333vw, -11.06667vw) rotate(-98.28deg);
  }
}
.themes-sec:nth-child(23).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(95px, 263px) rotate(-46.87deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(23).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-25.2vw, 50.13333vw) rotate(-46.87deg);
  }
}
.themes-sec:nth-child(23).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 374px, 106px, 0px);
}

.themes-sec:nth-child(24) {
  margin-top: 304px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) {
    margin-top: 44.4vw;
  }
}
.themes-sec:nth-child(24) .themes-sec-pencils img:nth-child(1) {
  transform: translate(9px, -41px) rotate(116.24deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) .themes-sec-pencils img:nth-child(1) {
    transform: translate(10.53333vw, -10.93333vw) rotate(116.24deg);
  }
}
.themes-sec:nth-child(24) .themes-sec-pencils img:nth-child(2) {
  transform: translate(71px, 142px) rotate(100.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) .themes-sec-pencils img:nth-child(2) {
    transform: translate(22.26667vw, 23.86667vw) rotate(100.03deg);
  }
}
.themes-sec:nth-child(24) .themes-sec-pencils img:nth-child(3) {
  transform: translate(12px, 255px) rotate(92.13deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) .themes-sec-pencils img:nth-child(3) {
    transform: translate(10.8vw, 45.6vw) rotate(92.13deg);
  }
}
.themes-sec:nth-child(24) .themes-sec-ttl {
  margin-left: 364px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) .themes-sec-ttl {
    margin-left: 10.4vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) .themes-sec-ttl-en {
    width: 47.46667vw;
  }
}
.themes-sec:nth-child(24) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 117px, 0px);
}

.themes-sec:nth-child(24) .themes-sec-ttl-ja {
  margin-left: 12px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) .themes-sec-ttl-ja {
    margin-left: 2.13333vw;
  }
}
.themes-sec:nth-child(24) .themes-sec-inner {
  margin-top: 144px;
  margin-left: 252px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24) .themes-sec-inner {
    margin-top: 30.93333vw;
    margin-left: 22.66667vw;
  }
}
.themes-sec:nth-child(24) .themes-sec-txt {
  margin-left: -1em;
  margin-right: -1em;
}

.themes-sec:nth-child(24).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(9px, -71px) rotate(111.24deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(10.53333vw, -13.6vw) rotate(111.24deg);
  }
}
.themes-sec:nth-child(24).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(71px, 112px) rotate(105.03deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(22.26667vw, 21.2vw) rotate(105.03deg);
  }
}
.themes-sec:nth-child(24).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(12px, 225px) rotate(84.13deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(24).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(10.8vw, 42.93333vw) rotate(84.13deg);
  }
}
.themes-sec:nth-child(24).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 249px, 117px, 0px);
}

.themes-sec:nth-child(25) {
  margin-top: 206px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) {
    margin-top: 33.2vw;
  }
}
.themes-sec:nth-child(25) .themes-sec-pencils img:nth-child(1) {
  transform: translate(41px, 358px) rotate(-103.35deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) .themes-sec-pencils img:nth-child(1) {
    transform: translate(-16.4vw, 65.2vw) rotate(-103.35deg);
  }
}
.themes-sec:nth-child(25) .themes-sec-pencils img:nth-child(2) {
  transform: translate(27px, 305px) rotate(-80.22deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) .themes-sec-pencils img:nth-child(2) {
    transform: translate(-19.06667vw, 55.06667vw) rotate(-80.22deg);
  }
}
.themes-sec:nth-child(25) .themes-sec-pencils img:nth-child(3) {
  transform: translate(99px, 363px) rotate(-127.91deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) .themes-sec-pencils img:nth-child(3) {
    transform: translate(-5.06667vw, 65.73333vw) rotate(-127.91deg);
  }
}
.themes-sec:nth-child(25) .themes-sec-ttl {
  margin-left: 532px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) .themes-sec-ttl {
    margin-left: 9.6vw;
  }
}
@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) .themes-sec-ttl-en {
    width: 66.53333vw;
  }
}
.themes-sec:nth-child(25) .themes-sec-ttl-en .full {
  clip: rect(0px, 0px, 113px, 0px);
}

.themes-sec:nth-child(25) .themes-sec-ttl-ja {
  margin-left: 20px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) .themes-sec-ttl-ja {
    margin-left: 3.46667vw;
  }
}
.themes-sec:nth-child(25) .themes-sec-inner {
  margin-top: 112px;
  margin-left: 744px;
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25) .themes-sec-inner {
    margin-top: 22.66667vw;
    margin-left: 36vw;
  }
}
.themes-sec:nth-child(25) .themes-sec-txt {
  margin-left: -1.5em;
  margin-right: -1.5em;
}

.themes-sec:nth-child(25).inview--visible .themes-sec-pencils img:nth-child(1) {
  transform: translate(41px, 328px) rotate(-108.35deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25).inview--visible .themes-sec-pencils img:nth-child(1) {
    transform: translate(-16.4vw, 62.53333vw) rotate(-108.35deg);
  }
}
.themes-sec:nth-child(25).inview--visible .themes-sec-pencils img:nth-child(2) {
  transform: translate(27px, 275px) rotate(-75.22deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25).inview--visible .themes-sec-pencils img:nth-child(2) {
    transform: translate(-19.06667vw, 52.4vw) rotate(-75.22deg);
  }
}
.themes-sec:nth-child(25).inview--visible .themes-sec-pencils img:nth-child(3) {
  transform: translate(99px, 333px) rotate(-135.91deg);
}

@media not all and (min-width: 768px) {
  .themes-sec:nth-child(25).inview--visible .themes-sec-pencils img:nth-child(3) {
    transform: translate(-5.06667vw, 63.06667vw) rotate(-135.91deg);
  }
}
.themes-sec:nth-child(25).inview--visible .themes-sec-ttl-en .full {
  clip: rect(0px, 349px, 113px, 0px);
}

.themes-nav {
  position: fixed;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}

@media not all and (min-width: 768px) {
  .themes-nav {
    right: 2vw;
  }
}
.themes-nav ul li {
  display: block;
  width: 9px;
  height: 9px;
  margin: 10px 0 0 0;
  border-radius: 2px;
  background-color: #d4d4d4;
  transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.2s linear;
  cursor: pointer;
}

@media not all and (min-width: 768px) {
  .themes-nav ul li {
    width: 1.6vw;
    height: 1.6vw;
    margin: 2.4vw 0 0 0;
  }
}
.themes-nav ul li:first-child {
  margin: 0;
}

.themes-nav ul li.active {
  transform: scale(2.11111);
}

@media not all and (min-width: 768px) {
  .themes-nav ul li.active {
    transform: scale(2.33333);
  }
}
.themes-nav ul li:nth-child(1).active {
  background-color: #ff5b6e;
}

.themes-nav ul li:nth-child(2).active {
  background-color: #c8561b;
}

.themes-nav ul li:nth-child(3).active {
  background-color: #f152a1;
}

.themes-nav ul li:nth-child(4).active {
  background-color: #3db3da;
}

.themes-nav ul li:nth-child(5).active {
  background-color: #d13539;
}

.themes-nav ul li:nth-child(6).active {
  background-color: #fa7a15;
}

.themes-nav ul li:nth-child(7).active {
  background-color: #aa513e;
}

.themes-nav ul li:nth-child(8).active {
  background-color: #dc422e;
}

.themes-nav ul li:nth-child(9).active {
  background-color: #f3ac92;
}

.themes-nav ul li:nth-child(10).active {
  background-color: #314c66;
}

.themes-nav ul li:nth-child(11).active {
  background-color: #ea7c7f;
}

.themes-nav ul li:nth-child(12).active {
  background-color: #e66c9d;
}

.themes-nav ul li:nth-child(13).active {
  background-color: #ac3859;
}

.themes-nav ul li:nth-child(14).active {
  background-color: #fe8b1d;
}

.themes-nav ul li:nth-child(15).active {
  background-color: #526264;
}

.themes-nav ul li:nth-child(16).active {
  background-color: #36b19c;
}

.themes-nav ul li:nth-child(17).active {
  background-color: #e6b47b;
}

.themes-nav ul li:nth-child(18).active {
  background-color: #a83a59;
}

.themes-nav ul li:nth-child(19).active {
  background-color: #edbdca;
}

.themes-nav ul li:nth-child(20).active {
  background-color: #acb4b1;
}

.themes-nav ul li:nth-child(21).active {
  background-color: #e5d7c9;
}

.themes-nav ul li:nth-child(22).active {
  background-color: #d9e99a;
}

.themes-nav ul li:nth-child(23).active {
  background-color: #363536;
}

.themes-nav ul li:nth-child(24).active {
  background-color: #c3d844;
}

.themes-nav ul li:nth-child(25).active {
  background-color: #828282;
}

.modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s linear;
}

body.modal--visible .modal {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.4;
}

.modal-box {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 600px;
  padding: 24px 0;
}

@media not all and (min-width: 768px) {
  .modal-box {
    left: 0;
    width: 100%;
    padding: 0;
    transform: translateX(0%);
  }
}
.modal-box-back {
  display: none;
}

@media not all and (min-width: 768px) {
  .modal-box-back {
    display: block;
    background-color: #ffffff;
    *zoom: 1;
    border-bottom: 1px solid #dedede;
  }
  .modal-box-back:after {
    content: "";
    display: block;
    clear: both;
  }
  .modal-box-back a {
    float: left;
    position: relative;
    display: block;
    padding: 6.66667vw 6.66667vw 6.66667vw 14vw;
    border-right: 1px solid #dedede;
    text-decoration: none;
    color: #000;
    font-size: 4vw;
    line-height: 1;
  }
  .modal-box-back a:before {
    position: absolute;
    left: 5.33333vw;
    top: 50%;
    transform: translateY(-50%);
    width: 3.86667vw;
    height: 1.06667vw;
    background: url(../images/themes/ico-back-modal-s.png) no-repeat;
    background-size: contain;
    content: "";
  }
}
.modal-box-inner {
  position: relative;
  padding: 48px 0;
  background-color: #fff;
}

@media not all and (min-width: 768px) {
  .modal-box-inner {
    padding: 4vw 0 5.33333vw;
  }
}
.modal-box-close {
  position: absolute;
  right: -60px;
  top: 0;
  width: 60px;
  height: 60px;
}

@media not all and (min-width: 768px) {
  .modal-box-close {
    display: none;
  }
}
.modal-box-close a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #262626;
}

.modal-box-close a:before, .modal-box-close a:after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 2px;
  background-color: #fff;
  content: "";
}

.modal-box-close a:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-box-close a:after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-theme-heading {
  padding: 0 50px;
}

@media not all and (min-width: 768px) {
  .modal-theme-heading {
    padding: 0 4vw;
  }
}
.modal-theme-ttl-en {
  text-align: right;
}

@media not all and (min-width: 768px) {
  .modal-theme-ttl-en img {
    width: auto;
    height: 16vw;
  }
}
.modal-theme-ttl-ja {
  margin: 16px 0 0 0;
  text-align: right;
  font-size: 26px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  line-height: 1;
}

@media not all and (min-width: 768px) {
  .modal-theme-ttl-ja {
    margin: 3.73333vw 0 0 0;
    font-size: 5.33333vw;
  }
}
.modal-theme-ttl-ja:before {
  content: "- ";
}

.modal-theme-ttl-ja:after {
  content: " -";
}

.modal-theme-description {
  margin: 24px 0 0 0;
  text-align: right;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

@media not all and (min-width: 768px) {
  .modal-theme-description {
    margin: 5.6vw 0 0 0;
    font-size: 3.33333vw;
  }
}
.modal-theme-body {
  margin: 28px 0 0 0;
  position: relative;
  padding: 0 50px;
}

@media not all and (min-width: 768px) {
  .modal-theme-body {
    margin: 6.4vw 0 0 0;
    padding: 0 4vw;
  }
}
.modal-theme-body-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: url(../images/themes/bg-detail.png) no-repeat center top;
  transition: height 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0s;
}

@media not all and (min-width: 768px) {
  .modal-theme-body-bg {
    background-image: url(../images/themes/bg-detail-s.png);
    background-position: center 38.4vw;
    background-size: 100% auto;
  }
}
body.modal--visible .modal-theme-body-bg {
  height: 100%;
  transition-delay: 1s;
}

.modal-theme-body-inner {
  position: relative;
  display: flex;
  width: 100%;
}

@media not all and (min-width: 768px) {
  .modal-theme-body-inner {
    flex-direction: column-reverse;
  }
}
.modal-theme-pencil {
  display: flex;
  flex: 1 1 auto;
}

@media not all and (min-width: 768px) {
  .modal-theme-pencil {
    margin: 8.53333vw 0 0 0;
  }
}
.modal-theme-pencil-pic {
  width: 26px;
  padding: 0 28px;
  flex: 0 0 auto;
}

@media not all and (min-width: 768px) {
  .modal-theme-pencil-pic {
    width: 6.93333vw;
    padding: 0 6.66667vw;
  }
}
.modal-theme-pencil-pic img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(180deg);
}

.modal-theme-pencil-info {
  padding: 6px 6px 0 0;
  flex: 1 1 auto;
}

.modal-theme-pencil-ttl {
  position: relative;
  width: 100%;
}

.modal-theme-pencil-ttl-ja {
  writing-mode: vertical-rl;
  float: right;
  font-size: 48px;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  line-height: 1.25;
  white-space: nowrap;
}

@media not all and (min-width: 768px) {
  .modal-theme-pencil-ttl-ja {
    font-size: 11.73333vw;
    line-height: 1.20455;
  }
}
.modal-theme-pencil-ttl-en {
  position: absolute;
  left: 32px;
  top: 0;
  transform: rotate(90deg);
  transform-origin: left top;
  font-size: 24px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media not all and (min-width: 768px) {
  .modal-theme-pencil-ttl-en {
    left: 4.26667vw;
    font-size: 4.8vw;
  }
}
.modal-theme-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  align-content: flex-start;
  width: 84px;
  margin: 0 0 0 38px;
}

@media not all and (min-width: 768px) {
  .modal-theme-nav {
    width: 100%;
    margin: 0;
  }
}
.modal-theme-nav a {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  margin: 8px 0 0 8px;
}

@media not all and (min-width: 768px) {
  .modal-theme-nav a {
    width: 7.46667vw;
    height: 7.46667vw;
    margin: 1.86667vw 0 0 1.86667vw;
  }
}
.modal-theme-nav a:nth-child(-n+2) {
  margin-top: 0;
}

.modal-theme-nav a:nth-child(2n+1) {
  margin-left: 0;
}

@media not all and (min-width: 768px) {
  .modal-theme-nav a:nth-child(-n+2) {
    margin-top: 1.86667vw;
  }
  .modal-theme-nav a:nth-child(2n+1) {
    margin-left: 1.86667vw;
  }
  .modal-theme-nav a:nth-child(-n+10) {
    margin-top: 0;
  }
  .modal-theme-nav a:nth-child(10n+1) {
    margin-left: 0;
  }
}
.modal-theme-nav a img {
  display: block;
  width: 100%;
  height: auto;
}

.modal-theme-nav a:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 3px solid #3c3c3c;
  opacity: 0;
  content: "";
}

.modal-theme-nav a.active:after {
  opacity: 1;
}

.modal-theme-close {
  margin: 50px 0 0 0;
}

@media not all and (min-width: 768px) {
  .modal-theme-close {
    display: none;
  }
}
.modal-theme-close a {
  display: block;
  width: 270px;
  padding: 1em 0;
  margin: 0 auto;
  border: 1px solid #1f1f1f;
  text-decoration: none;
  text-align: center;
  color: #1f1f1f;
  font-size: 17px;
  line-height: 1;
}
/*# sourceMappingURL=500_gl.css.map */