@font-face {
  font-family: "li";
  src: url("/store/techo/ja/magazine/pencatalog/font/Montserrat-Light.ttf") format("TrueType");
}

@font-face {
  font-family: "re";
  src: url("/store/techo/ja/magazine/pencatalog/font/Montserrat-Regular.ttf") format("TrueType");
}

@font-face {
  font-family: "me";
  src: url("/store/techo/ja/magazine/pencatalog/font/Montserrat-Medium.ttf") format("TrueType");
}

@font-face {
  font-family: "bo";
  src: url("/store/techo/ja/magazine/pencatalog/font/Montserrat-Bold.ttf") format("TrueType");
}

#contents {
  width: 100%;
  padding-bottom: 95px;
  color: #333;
  font-size: 16px;
  line-height: 1;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-icons.png);
  background-color: #FFFFDD;
  background-repeat: repeat-y;
  background-size: 100%;
}

#contents a {
  color: #333;
  text-decoration: none;
  transition: .4s;
}

#contents a:hover {
  opacity: .7;
}

.contnet-inner {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  font-family: 're';
}

.bg-white {
  background-color: #fff;
}

.bg-grid {
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-grid.png);
  background-color: #fff;
  background-repeat: repeat-y;
  background-size: 100%;
}

.secMv img {
  width: 100%;
}

.secYod {
  padding: 80px 0 0;
}

.secYod p {
  position: relative;
  text-align: center;
  line-height: 2;
  letter-spacing: 0.06em;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco1.png);
  background-size: 791px;
  background-position: center 10px;
  background-repeat: no-repeat;
}

.secYod p.attention {
  margin-top: 40px;
  font-family: 'li';
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 0;
  color: #777;
  background: none;
}

.secMokuji {
  position: relative;
}

.secMokuji img {
  width: 100%;
}

.secMokuji ul {
  position: absolute;
  left: 12%;
  top: 45%;
  display: flex;
  flex-direction: column;
}

.secMokuji ul li {
  margin-top: 10.6%;
}

.secMokuji ul li:first-of-type {
  margin-top: 0;
}

.secMokuji ul img {
  display: block;
  width: 29px;
}

.secMokuji a {
  display: flex;
  align-items: center;
  pointer-events: none;
}

.secMokuji a span:first-of-type {
  margin-left: 8px;
}

.secMokuji a span:nth-of-type(2) {
  font-family: 'li';
  font-size: 13px;
}

.secMokuji--1 {
  margin-top: -90px;
}

.secMokuji--2 {
  margin-top: -139px;
}

.secMokuji--2 ul {
  top: 44.8%;
}

.secMokuji--2 ul li {
  margin-top: 10.7%;
}

.secMokuji--3 {
  margin-top: -104px;
}

.secMokuji--3 ul {
  top: 42.5%;
}

.secMokuji--3 ul li {
  margin-top: 12.1%;
}

.secMokuji--4 {
  margin-top: -86px;
}

.secMokuji--4 ul {
  top: 41.3%;
}

.secMokuji--4 ul li {
  margin-top: 10%;
}

.secPen {
  padding: 78px 0 80px;
}

.secPen ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 800px;
  margin: auto;
}

.secPen ul li {
  position: relative;
  width: 360px;
  height: 640px;
}

.secPen ul li::before, .secPen ul li::after {
  content: '';
  position: absolute;
  background-size: cover;
  z-index: 1;
}

.secPen ul li:nth-of-type(n+3) {
  margin-top: 80px;
}

.secPen ul li#n20 p {
  letter-spacing: -0.06em;
}

.secPen ul li#n22 p {
  letter-spacing: -0.01em;
}

.secPen ul li#n23 p, .secPen ul li#n24 p {
  letter-spacing: -0.05em;
}

.secPen ul img {
  width: 100%;
}

.secPen a {
  display: block;
  position: absolute;
  width: 88px;
  top: 65%;
  left: 9%;
}

.secPen a img {
  width: 100%;
}

.secPen p {
  position: absolute;
  top: 31%;
  right: 9%;
  width: 54%;
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
}

.secPen p span {
  display: block;
  font-family: 'li';
  font-size: 13px;
}

.secPen--1 ul li:nth-of-type(1)::before {
  top: -50px;
  left: -51px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco2.png);
  width: 118px;
  height: 45px;
}

.secPen--1 ul li:nth-of-type(1)::after {
  top: 254px;
  right: -60px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco3.png);
  width: 72px;
  height: 118px;
}

.secPen--1 ul li:nth-of-type(2)::before {
  top: 31px;
  right: -57px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco4.png);
  width: 69px;
  height: 113px;
}

.secPen--1 ul li:nth-of-type(2)::after {
  bottom: -75px;
  right: -51px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco5.png);
  width: 67px;
  height: 109px;
}

.secPen--1 ul li:nth-of-type(3)::before {
  top: -52px;
  left: -40px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco6.png);
  width: 158px;
  height: 73px;
}

.secPen--1 ul li:nth-of-type(3)::after {
  bottom: -90px;
  right: -162px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco8.png);
  width: 260px;
  height: 81px;
}

.secPen--1 ul li:nth-of-type(4)::before {
  top: 271px;
  right: -60px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco7.png);
  width: 71px;
  height: 52px;
}

.secPen--1 ul li:nth-of-type(5)::before {
  top: 193px;
  left: -68px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco9.png);
  width: 81px;
  height: 102px;
}

.secPen--1 ul li:nth-of-type(5)::after {
  bottom: -55px;
  right: -91px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco11.png);
  width: 99px;
  height: 73px;
}

.secPen--1 ul li:nth-of-type(6)::before {
  top: 81px;
  right: -53px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco10.png);
  width: 71px;
  height: 53px;
}

.secPen--1 ul li:nth-of-type(6)::after {
  bottom: -18px;
  right: -34px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco12.png);
  width: 49px;
  height: 58px;
}

.secPen--2 ul li:nth-of-type(1)::before {
  top: -31px;
  left: -44px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco13.png);
  width: 158px;
  height: 61px;
}

.secPen--2 ul li:nth-of-type(1)::after {
  bottom: -113px;
  right: -95px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco15.png);
  width: 137px;
  height: 143px;
}

.secPen--2 ul li:nth-of-type(2)::before {
  top: 170px;
  right: -45px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco14.png);
  width: 56px;
  height: 53px;
}

.secPen--2 ul li:nth-of-type(3)::before {
  top: 233px;
  left: -58px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco16.png);
  width: 81px;
  height: 42px;
}

.secPen--2 ul li:nth-of-type(3)::after {
  bottom: -38px;
  left: 140px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco17.png);
  width: 59px;
  height: 47px;
}

.secPen--2 ul li:nth-of-type(4)::before {
  top: 14px;
  right: -65px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco18.png);
  width: 141px;
  height: 123px;
}

.secPen--2 ul li:nth-of-type(5)::before {
  bottom: -62px;
  right: -130px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco19.png);
  width: 125px;
  height: 65px;
}

.secPen--2 ul li:nth-of-type(6)::before {
  top: -69px;
  right: 61px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco20.png);
  width: 110px;
  height: 63px;
}

.secPen--2 ul li:nth-of-type(6)::after {
  bottom: 184px;
  right: -31px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco21.png);
  width: 39px;
  height: 38px;
}

.secPen--3 ul li:nth-of-type(1)::before {
  top: -38px;
  left: -47px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco22.png);
  width: 171px;
  height: 55px;
}

.secPen--3 ul li:nth-of-type(1)::after {
  bottom: -120px;
  right: -74px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco24.png);
  width: 110px;
  height: 150px;
}

.secPen--3 ul li:nth-of-type(2)::before {
  top: 81px;
  right: -63px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco23.png);
  width: 76px;
  height: 84px;
}

.secPen--3 ul li:nth-of-type(3)::before {
  bottom: -73px;
  left: -64px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco25.png);
  width: 156px;
  height: 61px;
}

.secPen--3 ul li:nth-of-type(5)::before {
  top: 76px;
  right: -70px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco26.png);
  width: 100px;
  height: 71px;
}

.secPen--3 ul li:nth-of-type(5)::after {
  bottom: -58px;
  right: -58px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco27.png);
  width: 84px;
  height: 70px;
}

.secPen--3 ul li:nth-of-type(6)::before {
  top: -55px;
  right: -37px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco28.png);
  width: 73px;
  height: 96px;
}

.secPen--3 ul li:nth-of-type(6)::after {
  bottom: 192px;
  right: -64px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco29.png);
  width: 74px;
  height: 145px;
}

.secPen--4 ul li:nth-of-type(1)::before {
  top: -54px;
  left: -57px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco30.png);
  width: 219px;
  height: 45px;
}

.secPen--4 ul li:nth-of-type(1)::after {
  top: -30px;
  right: -41px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco31.png);
  width: 81px;
  height: 64px;
}

.secPen--4 ul li:nth-of-type(2)::before {
  top: 76px;
  right: -64px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco33.png);
  width: 92px;
  height: 90px;
}

.secPen--4 ul li:nth-of-type(3)::before {
  top: -75px;
  left: -61px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco32.png);
  width: 98px;
  height: 70px;
}

.secPen--4 ul li:nth-of-type(3)::after {
  top: -62px;
  right: -63px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco34.png);
  width: 106px;
  height: 107px;
}

.secPen--4 ul li:nth-of-type(4)::before {
  top: 89px;
  right: -47px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco35.png);
  width: 52px;
  height: 51px;
}

.secPen--4 ul li:nth-of-type(4)::after {
  bottom: -113px;
  left: -119px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco36.png);
  width: 107px;
  height: 118px;
}

.secPen--4 ul li:nth-of-type(5)::before {
  top: 131px;
  left: -41px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco37.png);
  width: 48px;
  height: 53px;
}

.secPen--4 ul li:nth-of-type(5)::after {
  bottom: -66px;
  right: -42px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco38.png);
  width: 48px;
  height: 93px;
}

.secPen--4 ul li:nth-of-type(6)::before {
  top: -28px;
  right: -62px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco39.png);
  width: 96px;
  height: 133px;
}

.secPen--4 ul li:nth-of-type(6)::after {
  bottom: 264px;
  right: -56px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco40.png);
  width: 42px;
  height: 75px;
}

.ft {
  padding: 30px 0 80px;
  background-color: #fff;
}

.creater {
  position: relative;
  margin-left: 80px;
  font-family: "re";
  font-size: 11px;
  line-height: 1.75;
  color: #666;
}

.creater::after {
  content: '';
  position: absolute;
  top: -431%;
  right: 0%;
  width: 218px;
  height: 410px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco41.png);
  background-size: cover;
}

.gotoTop {
  margin-top: 120px;
  font-family: 'bo';
  text-align: center;
}

.gotoTop a {
  color: #875500 !important;
}

.shareBorder {
  width: 600px;
  padding: 25px 0 35px;
  font-size: 12px;
  margin: 60px auto 40px;
  border: 1px solid #E5E5E5;
  text-align: center;
}

.shareBorder p {
  font-family: 'bo';
  font-size: 12px;
  color: #666;
}

.share {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.share a {
  width: 30px;
}

.share a:nth-of-type(2) {
  margin: 0 40px;
}

.date {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/*PC*/
/*SP*/
.device-sp #contents {
  padding: 0;
}

.device-sp .contnet-inner {
  width: 100%;
}

.device-sp .secYod {
  padding: 40px 0 0;
  width: 89%;
  margin: auto;
}

.device-sp .secYod img:nth-of-type(1) {
  width: 94px;
  margin: 0 auto 10px;
}

.device-sp .secYod img:nth-of-type(2) {
  width: 223px;
  margin: 15px auto 0;
}

.device-sp .secYod p {
  background: none;
}

.device-sp .secYod p.attention {
  margin-top: 20px;
}

.device-sp .secMokuji ul {
  flex-direction: row;
  align-items: center;
  width: 90%;
  top: inherit;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
}

.device-sp .secMokuji ul li {
  width: 16.6666%;
  margin-top: 0;
  text-align: center;
}

.device-sp .secMokuji ul img {
  width: 61%;
  margin: auto;
}

.device-sp .secMokuji--1 {
  margin-top: 35px;
}

.device-sp .secMokuji--2, .device-sp .secMokuji--3, .device-sp .secMokuji--4 {
  margin-top: 0;
}

.device-sp .secPen {
  padding: 7% 0 3%;
}

.device-sp .secPen--4 {
  padding-bottom: 7%;
}

.device-sp .secPen a {
  width: 29%;
  top: 64.5%;
  left: 7.6%;
}

.device-sp .secPen p {
  top: 30.5%;
  right: 7%;
  width: 51%;
  font-size: 4.0vw;
}

.device-sp .secPen p span {
  font-size: 3.9vw;
}

.device-sp .secPen ul {
  justify-content: center;
  width: 100%;
}

.device-sp .secPen ul li {
  width: 89%;
  height: auto;
  min-height: 186vw;
}

.device-sp .secPen ul li:nth-of-type(n+3), .device-sp .secPen ul li:nth-of-type(n+2) {
  margin-top: 6%;
}

.device-sp .secPen ul li#n2 a {
  top: 63.5%;
}

.device-sp .secPen ul li#n2 p {
  top: 31.5%;
}

.device-sp .secPen ul li#n3 a {
  top: 57%;
}

.device-sp .secPen ul li#n3 p {
  top: 26.5%;
}

.device-sp .secPen ul li#n4 a {
  top: 59%;
}

.device-sp .secPen ul li#n4 p {
  top: 26%;
}

.device-sp .secPen ul li#n5 a {
  top: 69.5%;
}

.device-sp .secPen ul li#n5 p {
  top: 35%;
}

.device-sp .secPen ul li#n6 a {
  top: 62.5%;
}

.device-sp .secPen ul li#n6 p {
  top: 29%;
}

.device-sp .secPen ul li#n7 a {
  top: 64.5%;
}

.device-sp .secPen ul li#n7 p {
  top: 30%;
}

.device-sp .secPen ul li#n8 a {
  top: 67%;
}

.device-sp .secPen ul li#n8 p {
  top: 31.5%;
}

.device-sp .secPen ul li#n9 a {
  top: 66%;
}

.device-sp .secPen ul li#n9 p {
  top: 33%;
}

.device-sp .secPen ul li#n10 a {
  top: 58.5%;
}

.device-sp .secPen ul li#n10 p {
  top: 27.5%;
}

.device-sp .secPen ul li#n11 a {
  top: 58.5%;
}

.device-sp .secPen ul li#n11 p {
  top: 27%;
  width: 50%;
}

.device-sp .secPen ul li#n12 a {
  top: 66.5%;
}

.device-sp .secPen ul li#n12 p {
  top: 32%;
}

.device-sp .secPen ul li#n13 a {
  top: 58.5%;
}

.device-sp .secPen ul li#n13 p {
  top: 27%;
}

.device-sp .secPen ul li#n14 a {
  top: 61.5%;
}

.device-sp .secPen ul li#n14 p {
  top: 31%;
}

.device-sp .secPen ul li#n15 a {
  top: 66.5%;
}

.device-sp .secPen ul li#n15 p {
  top: 31%;
}

.device-sp .secPen ul li#n16 a {
  top: 68.5%;
}

.device-sp .secPen ul li#n16 p {
  top: 34.5%;
  right: 5%;
}

.device-sp .secPen ul li#n17 a {
  top: 55%;
}

.device-sp .secPen ul li#n17 p {
  top: 25.5%;
}

.device-sp .secPen ul li#n18 a {
  top: 67.5%;
}

.device-sp .secPen ul li#n18 p {
  top: 32%;
}

.device-sp .secPen ul li#n19 p {
  top: 30%;
}

.device-sp .secPen ul li#n20 a {
  top: 58.5%;
}

.device-sp .secPen ul li#n20 p {
  top: 29%;
}

.device-sp .secPen ul li#n21 a {
  top: 66.5%;
}

.device-sp .secPen ul li#n21 p {
  top: 31%;
}

.device-sp .secPen ul li#n22 a {
  top: 55.5%;
}

.device-sp .secPen ul li#n22 p {
  top: 24.5%;
}

.device-sp .secPen ul li#n23 a {
  top: 57%;
}

.device-sp .secPen ul li#n23 p {
  top: 26.5%;
}

.device-sp .secPen ul li#n24 a {
  top: 54%;
}

.device-sp .secPen ul li#n24 p {
  top: 24%;
}

.device-sp .secPen ul li::before, .device-sp .secPen ul li::after {
  content: none;
}

.device-sp .ft {
  padding: 4% 0 35px;
}

.device-sp .creater {
  position: relative;
  margin-left: 5.5%;
}

.device-sp .creater::after {
  content: '';
  position: absolute;
  top: -89%;
  right: 6%;
  width: 105px;
  height: 92px;
  background-image: url(/store/techo/en/magazine/pencatalog/img/bg-deco_sp3.png);
  background-size: cover;
}

.device-sp .gotoTop {
  margin-top: 80px;
}

.device-sp .shareBorder {
  width: 89%;
  margin: 45px auto 40px;
}